@instructure/outcomes-ui 2.1.2 → 2.1.3

package/lib/translated/vi/components/OutcomeView/MasteryDescription/__tests__/index.test.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
+
+var styles = {
+  componentId: 'IalyE',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__MasteryDescription--scoreMastery {\n  background-color: #F5F5F5;\n  border: solid 1px #999999;\n  border-radius: 0.25rem;\n  margin-top: 2rem;\n  padding: 1.0rem 1.0rem;\n}\n\n.outcomes-ui__MasteryDescription--scoreMasteryText {\n  margin-top: 1rem;\n}\n";
+  },
+  'scoreMastery': 'outcomes-ui__MasteryDescription--scoreMastery',
+  'scoreMasteryText': 'outcomes-ui__MasteryDescription--scoreMasteryText'
+};
+describe('MasteryDescription', function () {
+  var scoringMethod = {
+    id: 1,
+    description: 'Some Method',
+    points_possible: 5,
+    mastery_percent: 0.6,
+    algorithm: 'highest',
+    algorithm_data: {}
+  };
+
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      artifactTypeName: 'Quiz',
+      displayMasteryPercentText: true,
+      scoringMethod: scoringMethod
+    }, props);
+  }
+
+  it('renders spinner with no scoring method', function () {
+    var props = makeProps({
+      scoringMethod: null
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+      attachTo: document.body
+    });
+    (0, _chai.expect)(wrapper.find('Spinner')).to.have.length(1);
+  });
+  it('does not render mastery percent text if displayMasteryPercentText is false', function () {
+    var props = makeProps({
+      displayMasteryPercentText: false
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var scoreMastery = wrapper.find(".".concat(styles.scoreMasteryText));
+    (0, _chai.expect)(scoreMastery.length).to.equal(0);
+  });
+  it('does not render mastery percent text if no artifactTypeName provided', function () {
+    var props = makeProps({
+      artifactTypeName: null
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var scoreMastery = wrapper.find(".".concat(styles.scoreMasteryText));
+    (0, _chai.expect)(scoreMastery.length).to.equal(0);
+  });
+  it('renders mastery percent text', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    var scoreMastery = wrapper.find(".".concat(styles.scoreMasteryText));
+    (0, _chai.expect)(scoreMastery.length).to.equal(1);
+  });
+  it('renders mastery description for decaying_average', function () {
+    var props = makeProps({
+      scoringMethod: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scoringMethod), {}, {
+        mastery_percent: 0.8,
+        algorithm: 'decaying_average'
+      })
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    (0, _chai.expect)(txt.first().text()).to.match(/Decaying Average/);
+  });
+  it('renders mastery description for n_mastery', function () {
+    var props = makeProps({
+      scoringMethod: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scoringMethod), {}, {
+        mastery_percent: 0.8,
+        algorithm: 'n_mastery'
+      })
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    (0, _chai.expect)(txt.first().text()).to.match(/n Number of Times/);
+  });
+  it('renders mastery description for highest', function () {
+    var props = makeProps({
+      scoringMethod: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scoringMethod), {}, {
+        mastery_percent: 0.8,
+        algorithm: 'highest'
+      })
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    (0, _chai.expect)(txt.first().text()).to.match(/Highest Score/);
+  });
+  it('renders mastery description for latest', function () {
+    var props = makeProps({
+      scoringMethod: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, scoringMethod), {}, {
+        mastery_percent: 0.8,
+        algorithm: 'latest'
+      })
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    (0, _chai.expect)(txt.first().text()).to.match(/Most Recent Score/);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});

package/lib/translated/vi/components/OutcomeView/MasteryDescription/index.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiSpinner = require("@instructure/ui-spinner");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _shapes = require("../../../store/shapes.js");
+
+var _theme = _interopRequireDefault(require("../../theme.js"));
+
+var _percent_vi_number = Intl.NumberFormat("vi", { style: "percent" }).format,
+    _default_vi_number = Intl.NumberFormat("vi", { style: "decimal" }).format,
+    _dec,
+    _class,
+    _class2,
+    _temp;
+
+var styles = {
+  componentId: 'IalyE',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__MasteryDescription--scoreMastery {\n  background-color: #F5F5F5;\n  border: solid 1px #999999;\n  border-radius: 0.25rem;\n  margin-top: 2rem;\n  padding: 1.0rem 1.0rem;\n}\n\n.outcomes-ui__MasteryDescription--scoreMasteryText {\n  margin-top: 1rem;\n}\n";
+  },
+  'scoreMastery': 'outcomes-ui__MasteryDescription--scoreMastery',
+  'scoreMasteryText': 'outcomes-ui__MasteryDescription--scoreMasteryText'
+};
+
+var scoringText = function scoringText(scoringMethod) {
+  switch (scoringMethod.algorithm) {
+    case 'decaying_average':
+      return "M\u1EE9c Th\xE0nh Th\u1EA1o \u0111\u01B0\u1EE3c t\xEDnh to\xE1n theo c\xE1ch t\xEDnh Trung B\xECnh \u01AFu Ti\xEAn \u0110i\u1EC3m S\u1ED1 G\u1EA7n Nh\u1EA5t. C\xE1c l\u1EA7n t\xEDnh g\u1EA7n nh\u1EA5t \u0111\u01B0\u1EE3c t\xEDnh theo tr\u1ECDng s\u1ED1 th\xE0nh th\u1EA1o l\xE0 " + _percent_vi_number(scoringMethod.algorithm_data.decaying_average_percent) + ", trung b\xECnh t\u1EA5t c\u1EA3 l\u1EA7n t\xEDnh k\u1EBFt qu\u1EA3 kh\xE1c \u0111\u01B0\u1EE3c t\xEDnh theo tr\u1ECDng s\u1ED1 l\xE0 " + _percent_vi_number(1.0 - scoringMethod.algorithm_data.decaying_average_percent) + ". N\u1EBFu ch\u1EC9 c\xF3 m\u1ED9t k\u1EBFt qu\u1EA3 th\xEC \u0111i\u1EC3m duy nh\u1EA5t s\u1EBD \u0111\u01B0\u1EE3c tr\u1EA3 v\u1EC1.";
+
+    case 'n_mastery':
+      return "M\u1EE9c th\xE0nh th\u1EA1o \u0111\u01B0\u1EE3c t\xEDnh theo n S\u1ED1 L\u1EA7n. Ph\u1EA3i \u0111\u1EA1t m\u1EE9c th\xE0nh th\u1EA1o \xEDt nh\u1EA5t " + _default_vi_number(scoringMethod.algorithm_data.n_mastery_count) + " l\u1EA7n.  \u0110i\u1EC3m tr\xEAn m\u1EE9c th\xE0nh th\u1EA1o s\u1EBD \u0111\u01B0\u1EE3c t\xEDnh trung b\xECnh \u0111\u1EC3 t\xEDnh to\xE1n \u0111i\u1EC3m cu\u1ED1i c\xF9ng.";
+
+    case 'highest':
+      return "M\u1EE9c th\xE0nh th\u1EA1o \u0111\u01B0\u1EE3c t\xEDnh theo \u0110i\u1EC3m Cao Nh\u1EA5t. \u0110i\u1EC3m th\xE0nh th\u1EA1o th\u1EC3 hi\u1EC7n m\u1EE9c \u0111i\u1EC3m cao nh\u1EA5t c\u1EE7a b\xE0i \u0111\xE1nh gi\xE1 \u0111\xE3 \u0111\u01B0\u1EE3c ch\u1EA5m \u0111i\u1EC3m.";
+
+    case 'latest':
+      return "M\u1EE9c th\xE0nh th\u1EA1o \u0111\u01B0\u1EE3c t\xEDnh theo \u0110i\u1EC3m G\u1EA7n Nh\u1EA5t. \u0110i\u1EC3m th\xE0nh th\u1EA1o th\u1EC3 hi\u1EC7n b\xE0i \u0111\xE1nh gi\xE1 \u0111\xE3 \u0111\u01B0\u1EE3c ch\u1EA5m \u0111i\u1EC3m g\u1EA7n nh\u1EA5t.";
+
+    default:
+      return '';
+  }
+};
+
+var masteryText = function masteryText(masteryPercent, artifactTypeName) {
+  return "B\u1EB1ng c\xE1ch c\u0103n ch\u1EC9nh theo " + artifactTypeName + " n\xE0y, n\u1EBFu sinh vi\xEAn \u0111\u1EA1t tr\xEAn " + _percent_vi_number(masteryPercent) + " th\xEC s\u1EBD \u0111\u1EA1t m\u1EE9c th\xE0nh th\u1EA1o.";
+};
+
+var MasteryDescription = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(MasteryDescription, _React$Component);
+
+  var _super = (0, _createSuper2.default)(MasteryDescription);
+
+  function MasteryDescription() {
+    (0, _classCallCheck2.default)(this, MasteryDescription);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(MasteryDescription, [{
+    key: "render",
+    value: // eslint-disable-next-line no-undef
+    function render() {
+      var _this$props = this.props,
+          artifactTypeName = _this$props.artifactTypeName,
+          displayMasteryPercentText = _this$props.displayMasteryPercentText,
+          scoringMethod = _this$props.scoringMethod;
+
+      if (!scoringMethod) {
+        return /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+          renderTitle: "\u0110ang t\u1EA3i"
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.scoreMastery,
+        "data-automation": "outcomeView__scoreMethodDescription"
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, scoringText(scoringMethod))), displayMasteryPercentText && artifactTypeName && /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.scoreMasteryText
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, masteryText(scoringMethod.mastery_percent, artifactTypeName))));
+    }
+  }]);
+  MasteryDescription.displayName = "MasteryDescription";
+  return MasteryDescription;
+}(_react.default.Component), _class2.propTypes = {
+  artifactTypeName: _propTypes.default.string,
+  displayMasteryPercentText: _propTypes.default.bool.isRequired,
+  scoringMethod: _shapes.scoringMethodShape
+}, _class2.defaultProps = {
+  artifactTypeName: null,
+  scoringMethod: null
+}, _temp)) || _class);
+exports.default = MasteryDescription;

package/lib/translated/vi/components/OutcomeView/MasteryDescription/index.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.standard = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _constants = require("../../../../.storybook/constants.js");
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _default = {
+  title: 'MasteryDescription'
+};
+exports.default = _default;
+
+var standard = function standard() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    artifactTypeName: "Quiz",
+    displayMasteryPercentText: (0, _addonKnobs.boolean)('Display Mastery Percent Text', true),
+    scoringMethod: (0, _addonKnobs.object)('ScoringMethod', _constants.defaultScoringMethod)
+  });
+};
+
+exports.standard = standard;

package/lib/translated/vi/components/OutcomeView/MasteryDescription/styles.css

@@ -0,0 +1,11 @@
+.scoreMastery {
+  background-color: #F5F5F5;
+  border: solid 1px #999999;
+  border-radius: 0.25rem;
+  margin-top: 2rem;
+  padding: 1.0rem 1.0rem;
+}
+
+.scoreMasteryText {
+  margin-top: 1rem;
+}

package/lib/translated/vi/components/OutcomeView/ScoringTiers/__tests__/index.test.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
+
+var styles = {
+  componentId: 'bCFPW',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__ScoringTiers--score {\n  border: 1px solid #ccc;\n  color: #888;\n  border-radius: 100%;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 0.1rem;\n  margin-right: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--description {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.outcomes-ui__ScoringTiers--mastery {\n  margin-top: 0.25rem;\n}\n\n.outcomes-ui__ScoringTiers--rating {\n  display: flex;\n  margin-bottom: 0.5rem;\n}\n\n.outcomes-ui__ScoringTiers--scoringTier {\n  margin-bottom: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--masteryCount {\n  font-weight: bold;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--gap:not(:empty) {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--pill {\n  display: flex;\n  align-items: center;\n  font-size: 1.2rem;\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--mastery {\n  color: ".concat(theme.masteryColor || 'inherit', ";\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--average {\n  color: ").concat(theme.averageColor || 'inherit', "\n}\n\n.outcomes-ui__ScoringTiers--pill:not(:last-child) {\n  margin-bottom: 0.75rem;\n}\n");
+  },
+  'score': 'outcomes-ui__ScoringTiers--score',
+  'description': 'outcomes-ui__ScoringTiers--description',
+  'mastery': 'outcomes-ui__ScoringTiers--mastery',
+  'rating': 'outcomes-ui__ScoringTiers--rating',
+  'scoringTier': 'outcomes-ui__ScoringTiers--scoringTier',
+  'masteryCount': 'outcomes-ui__ScoringTiers--masteryCount',
+  'gap': 'outcomes-ui__ScoringTiers--gap',
+  'pill': 'outcomes-ui__ScoringTiers--pill',
+  'average': 'outcomes-ui__ScoringTiers--average'
+};
+describe('OutcomeView ScoringTiers', function () {
+  var scoringMethod = {
+    id: 1,
+    description: 'Some Method',
+    points_possible: 5,
+    mastery_percent: 0.6,
+    algorithm: 'highest',
+    algorithm_data: {}
+  };
+  var outcomeResult = {
+    childArtifactCount: 0,
+    masteryCount: 0,
+    count: 0,
+    averageScore: 0.6,
+    outcomeId: 'foo'
+  };
+
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      scoringMethod: scoringMethod,
+      scoringTiers: [{
+        id: 1,
+        description: 'Cri 1',
+        percent: 1.0
+      }, {
+        id: 2,
+        description: 'Cri 2',
+        percent: 0.6
+      }, {
+        id: 3,
+        description: 'Cri 3',
+        percent: 0.22222222
+      }]
+    }, props);
+  }
+
+  it('displays scoring tiers', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    (0, _chai.expect)(wrapper.find(".".concat(styles.rating))).to.have.length(3);
+  });
+
+  var nextScore = function nextScore(pillWrapper) {
+    var gapNode = pillWrapper.closest(".".concat(styles.gap)).instance();
+    var tierNode = gapNode.nextSibling;
+    var score = tierNode ? tierNode.getElementsByClassName(styles.score)[0].innerText : null;
+    return score;
+  };
+
+  it('shows mastery between correct tiers', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    var mastery = wrapper.find(_uiIcons.IconStarSolid);
+    var score = nextScore(mastery);
+    (0, _chai.expect)(score).to.equal('1.11');
+  });
+  it('shows average between the correct tiers', function () {
+    var props = makeProps({
+      outcomeResult: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, outcomeResult), {}, {
+        averageScore: 0.99
+      })
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var average = wrapper.find(_uiIcons.IconEmptyLine);
+    var score = nextScore(average);
+    (0, _chai.expect)(score).to.equal('3');
+  });
+  it('shows mastery above average if they are equal', function () {
+    var props = makeProps({
+      outcomeResult: (0, _objectSpread2.default)({
+        averageScore: 0.6
+      }, outcomeResult)
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var gap = wrapper.find(_uiIcons.IconStarSolid).closest(".".concat(styles.gap));
+    (0, _chai.expect)(gap.childAt(0).hasClass(styles.mastery)).to.be.true;
+    (0, _chai.expect)(gap.childAt(1).hasClass(styles.average)).to.be.true;
+  });
+  it('rounds mastery points', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var score = wrapper.find(".".concat(styles.rating)).last().find(".".concat(styles.score));
+    (0, _chai.expect)(score.text()).to.equal('1.11');
+  });
+  it('renders tier mastery count', function () {
+    var props = makeProps({
+      scoringTiers: [{
+        id: 1,
+        description: 'Cri 1',
+        percent: 1.0,
+        count: 10
+      }]
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var txt = wrapper.find(".".concat(styles.masteryCount)).find('Text');
+    (0, _chai.expect)(txt.first().text()).to.match(/Students/);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});

package/lib/translated/vi/components/OutcomeView/ScoringTiers/index.js

@@ -0,0 +1,190 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiPill = require("@instructure/ui-pill");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _shapes = require("../../../store/shapes.js");
+
+var _convertToPoints = _interopRequireDefault(require("../convertToPoints.js"));
+
+var _theme = _interopRequireDefault(require("../../theme.js"));
+
+var _default_vi_number = Intl.NumberFormat("vi", { style: "decimal" }).format,
+    _dec,
+    _class,
+    _class2,
+    _temp;
+
+var styles = {
+  componentId: 'bCFPW',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__ScoringTiers--score {\n  border: 1px solid #ccc;\n  color: #888;\n  border-radius: 100%;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 0.1rem;\n  margin-right: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--description {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.outcomes-ui__ScoringTiers--mastery {\n  margin-top: 0.25rem;\n}\n\n.outcomes-ui__ScoringTiers--rating {\n  display: flex;\n  margin-bottom: 0.5rem;\n}\n\n.outcomes-ui__ScoringTiers--scoringTier {\n  margin-bottom: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--masteryCount {\n  font-weight: bold;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--gap:not(:empty) {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--pill {\n  display: flex;\n  align-items: center;\n  font-size: 1.2rem;\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--mastery {\n  color: ".concat(theme.masteryColor || 'inherit', ";\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--average {\n  color: ").concat(theme.averageColor || 'inherit', "\n}\n\n.outcomes-ui__ScoringTiers--pill:not(:last-child) {\n  margin-bottom: 0.75rem;\n}\n");
+  },
+  'score': 'outcomes-ui__ScoringTiers--score',
+  'description': 'outcomes-ui__ScoringTiers--description',
+  'mastery': 'outcomes-ui__ScoringTiers--mastery',
+  'rating': 'outcomes-ui__ScoringTiers--rating',
+  'scoringTier': 'outcomes-ui__ScoringTiers--scoringTier',
+  'masteryCount': 'outcomes-ui__ScoringTiers--masteryCount',
+  'gap': 'outcomes-ui__ScoringTiers--gap',
+  'pill': 'outcomes-ui__ScoringTiers--pill',
+  'average': 'outcomes-ui__ScoringTiers--average'
+};
+
+var valueBetweenTiers = function valueBetweenTiers(value, upperTier, lowerTier) {
+  if (upperTier && value > upperTier.percent) {
+    return false;
+  }
+
+  if (lowerTier && value <= lowerTier.percent) {
+    return false;
+  }
+
+  return true;
+};
+
+var renderTier = function renderTier(scoringMethod, tier) {
+  var _s, _n;
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    key: tier.id,
+    className: styles.scoringTier,
+    "data-automation": "outcomeView__scoringTier"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.rating
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.score,
+    "data-automation": "outcomeView__score"
+  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    size: "medium"
+  }, (0, _convertToPoints.default)(tier.percent, scoringMethod))), /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.description,
+    "data-automation": "outcomeView__description"
+  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    size: "small"
+  }, tier.description))), tier.count != null && /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.masteryCount,
+    "data-automation": "outcomeView__masteryCount"
+  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    size: "small"
+  }, _default_vi_number(tier.count) + " Sinh Vi\xEAn")));
+};
+
+var ScorePill = function ScorePill(_ref) {
+  var _classNames;
+
+  var className = _ref.className,
+      icon = _ref.icon,
+      text = _ref.text,
+      variant = _ref.variant;
+  var outerStyle = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.pill, true), (0, _defineProperty2.default)(_classNames, className, true), _classNames));
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: outerStyle,
+    "data-automation": "outcomeView__".concat(variant, "Pill")
+  }, icon, "\xA0", /*#__PURE__*/_react.default.createElement(_uiPill.Pill, {
+    text: text,
+    variant: variant
+  }));
+}; // eslint-disable-next-line immutable/no-mutation
+
+
+ScorePill.propTypes = {
+  className: _propTypes.default.string.isRequired,
+  icon: _propTypes.default.node.isRequired,
+  text: _propTypes.default.string.isRequired,
+  variant: _propTypes.default.string.isRequired
+};
+
+var renderGap = function renderGap(scoringMethod, outcomeResult, upperTier, lowerTier) {
+  var mastery = scoringMethod.mastery_percent;
+  var average = outcomeResult ? outcomeResult.averageScore : null;
+  var components = [valueBetweenTiers(mastery, upperTier, lowerTier) && /*#__PURE__*/_react.default.createElement(ScorePill, {
+    key: "mastery",
+    text: "Mastery ".concat((0, _convertToPoints.default)(mastery, scoringMethod), " pts"),
+    className: styles.mastery,
+    variant: "success",
+    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconStarSolid, {
+      "data-automation": "outcomeView__masteryStar"
+    })
+  })];
+
+  if (average !== null) {
+    components.push(valueBetweenTiers(average, upperTier, lowerTier) && /*#__PURE__*/_react.default.createElement(ScorePill, {
+      key: "average",
+      text: "Avg. Score ".concat((0, _convertToPoints.default)(average, scoringMethod), " pts"),
+      className: styles.average,
+      variant: "primary",
+      icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconEmptyLine, null)
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: styles.gap
+  }, average !== null && average <= mastery ? components : components.reverse());
+};
+
+var ScoringTiers = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ScoringTiers, _React$Component);
+
+  var _super = (0, _createSuper2.default)(ScoringTiers);
+
+  function ScoringTiers() {
+    (0, _classCallCheck2.default)(this, ScoringTiers);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(ScoringTiers, [{
+    key: "render",
+    value: // eslint-disable-next-line no-undef
+    function render() {
+      var _this$props = this.props,
+          outcomeResult = _this$props.outcomeResult,
+          scoringTiers = _this$props.scoringTiers,
+          scoringMethod = _this$props.scoringMethod;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        "data-automation": "outcomeView__scoringTiers"
+      }, renderGap.apply(void 0, [scoringMethod, outcomeResult, null].concat((0, _toConsumableArray2.default)(scoringTiers.slice(0, 1)))), scoringTiers.map(function (tier, i) {
+        return [renderTier(scoringMethod, tier), renderGap.apply(void 0, [scoringMethod, outcomeResult].concat((0, _toConsumableArray2.default)(scoringTiers.slice(i, i + 2))))];
+      }));
+    }
+  }]);
+  ScoringTiers.displayName = "ScoringTiers";
+  return ScoringTiers;
+}(_react.default.Component), _class2.propTypes = {
+  scoringTiers: _propTypes.default.arrayOf(_shapes.scoringTierShape).isRequired,
+  scoringMethod: _shapes.scoringMethodShape.isRequired,
+  outcomeResult: _shapes.outcomeResultShape
+}, _class2.defaultProps = {
+  outcomeResult: null
+}, _temp)) || _class);
+exports.default = ScoringTiers;

package/lib/translated/vi/components/OutcomeView/ScoringTiers/index.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.results = exports.noResults = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var sbConstants = _interopRequireWildcard(require("../../../../.storybook/constants.js"));
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _default = {
+  title: 'ScoringTiers'
+};
+exports.default = _default;
+
+var noResults = function noResults() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    outcomeResult: null,
+    scoringTiers: (0, _addonKnobs.object)('ScoringTiers', sbConstants.defaultScoringTiers),
+    scoringMethod: (0, _addonKnobs.object)('ScoringMethod', sbConstants.defaultScoringMethod)
+  });
+};
+
+exports.noResults = noResults;
+
+var results = function results() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    outcomeResult: (0, _addonKnobs.object)('OutcomeResult', sbConstants.resultAverageScore),
+    scoringTiers: (0, _addonKnobs.object)('ScoringTiers', sbConstants.scoringTiersWithResults),
+    scoringMethod: (0, _addonKnobs.object)('ScoringMethod', sbConstants.defaultScoringMethod)
+  });
+};
+
+exports.results = results;