office-ui-fabric-react/lib-es2015/demo/ComponentStatus/ComponentStatus.js

Reusable React components for building experiences for Office 365.

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