office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
65 lines • 3.22 kB
JavaScript
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