UNPKG

office-ui-fabric-react

Version:

Reusable React components for building experiences for Office 365.

65 lines 3.22 kB
import * as tslib_1 from "tslib"; import * as React from 'react'; import { ChecklistStatus } from './ComponentStatus.types'; import './ComponentStatus.scss'; var ComponentStatus = /** @class */ (function (_super) { tslib_1.__extends(ComponentStatus, _super); function ComponentStatus() { return _super !== null && _super.apply(this, arguments) || this; } ComponentStatus.prototype.render = function () { var keyboardAccessibilitySubject = 'Keyboard Accessibility'; var markupSubject = 'Markup'; var highContrastSupportSubject = 'High Contrast'; var rtlSubject = 'Right to Left'; var testCoverageSubject = 'Test Coverage'; return (React.createElement("div", { className: 'ComponentStatus-div' }, this._definebadgeAnchor(keyboardAccessibilitySubject, this.props.keyboardAccessibilitySupport), this._definebadgeAnchor(markupSubject, this.props.markupSupport), this._definebadgeAnchor(highContrastSupportSubject, this.props.highContrastSupport), this._definebadgeAnchor(rtlSubject, this.props.rtlSupport), this._definebadgeAnchor(testCoverageSubject, this.props.testCoverage))); }; ComponentStatus.prototype._definebadgeAnchor = function (subject, state) { var ariaLabel = subject + '. ' + state; var color = this._colorForComponentStateStatus(state); return this._badgeAnchor(ariaLabel, color, subject, state); }; ComponentStatus.prototype._badgeAnchor = function (ariaLabel, color, subject, status) { return (React.createElement("a", { "aria-label": ariaLabel, href: '#/components-status', className: 'ComponentStatus-badge' }, React.createElement("img", { src: this._badgeURL(color, subject, status) }))); }; ComponentStatus.prototype._badgeURL = function (color, subject, status) { var badgeBaseURL = 'https://img.shields.io/badge/'; var badgeStyle = 'flat'; return badgeBaseURL + subject + '-' + status + '-' + color + '.svg' + '?style=' + badgeStyle; }; ComponentStatus.prototype._colorForComponentStateStatus = function (testCoverageStatus) { switch (testCoverageStatus) { case ChecklistStatus.unknown: case ChecklistStatus.notApplicable: return 'lightgrey'; case ChecklistStatus.fail: case ChecklistStatus.none: return 'red'; case ChecklistStatus.poor: return 'yellow'; case ChecklistStatus.fair: return 'yellowgreen'; case ChecklistStatus.pass: case ChecklistStatus.good: return 'brightgreen'; } return 'red'; }; ComponentStatus.defaultProps = { keyboardAccessibilitySupport: ChecklistStatus.fail, markupSupport: ChecklistStatus.fail, highContrastSupport: ChecklistStatus.fail, rtlSupport: ChecklistStatus.fail, testCoverage: ChecklistStatus.none }; return ComponentStatus; }(React.Component)); export { ComponentStatus }; //# sourceMappingURL=ComponentStatus.js.map