office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
67 lines • 3.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var ComponentStatus_types_1 = require("./ComponentStatus.types");
require("./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 ComponentStatus_types_1.ChecklistStatus.unknown:
case ComponentStatus_types_1.ChecklistStatus.notApplicable:
return 'lightgrey';
case ComponentStatus_types_1.ChecklistStatus.fail:
case ComponentStatus_types_1.ChecklistStatus.none:
return 'red';
case ComponentStatus_types_1.ChecklistStatus.poor:
return 'yellow';
case ComponentStatus_types_1.ChecklistStatus.fair:
return 'yellowgreen';
case ComponentStatus_types_1.ChecklistStatus.pass:
case ComponentStatus_types_1.ChecklistStatus.good:
return 'brightgreen';
}
return 'red';
};
ComponentStatus.defaultProps = {
keyboardAccessibilitySupport: ComponentStatus_types_1.ChecklistStatus.fail,
markupSupport: ComponentStatus_types_1.ChecklistStatus.fail,
highContrastSupport: ComponentStatus_types_1.ChecklistStatus.fail,
rtlSupport: ComponentStatus_types_1.ChecklistStatus.fail,
testCoverage: ComponentStatus_types_1.ChecklistStatus.none
};
return ComponentStatus;
}(React.Component));
exports.ComponentStatus = ComponentStatus;
//# sourceMappingURL=ComponentStatus.js.map