@instructure/outcomes-ui 2.1.0 → 2.1.3

package/lib/translated/vi/components/OutcomeTree/index.js

@@ -0,0 +1,296 @@
+"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 _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _uiThemeable = _interopRequireDefault(require("@instructure/ui-themeable"));
+
+var _uiBillboard = require("@instructure/ui-billboard");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _index = _interopRequireDefault(require("../OutcomeSelectionList/index.js"));
+
+var _index2 = _interopRequireDefault(require("../OutcomeFolderList/index.js"));
+
+var _index3 = _interopRequireDefault(require("./TreeBrowser/index.js"));
+
+var _theme = _interopRequireDefault(require("../theme.js"));
+
+var _sanitize = require("../../lib/sanitize.js");
+
+var _dec, _class, _class2, _temp;
+
+var AlignOutcomes = function AlignOutcomes(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+    width: "120",
+    height: "87",
+    viewBox: "0 0 120 87",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("title", null, "Align-Outcomes"), /*#__PURE__*/_react.default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M77.383 16.062a6.636 6.636 0 0 0 .604-2.762 6.667 6.667 0 0 0-4.204-6.193c.012-.142.022-.286.022-.431a4.958 4.958 0 0 0-4.958-4.958 4.927 4.927 0 0 0-2.898.94A11.87 11.87 0 0 0 59.881 1c-4.753 0-8.856 2.779-10.776 6.8a7.219 7.219 0 0 0-2.983-.648c-4 0-7.243 3.243-7.243 7.243 0 .574.074 1.13.201 1.667h38.303z",
+    fill: "#FFF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M77.383 16.062a6.636 6.636 0 0 0 .604-2.762 6.667 6.667 0 0 0-4.204-6.193c.012-.142.022-.286.022-.431a4.958 4.958 0 0 0-4.958-4.958 4.927 4.927 0 0 0-2.898.94A11.87 11.87 0 0 0 59.881 1c-4.753 0-8.856 2.779-10.776 6.8a7.219 7.219 0 0 0-2.983-.648c-4 0-7.243 3.243-7.243 7.243 0 .574.074 1.13.201 1.667h38.303z",
+    stroke: "#CED3D7",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M118.39 23.614c.015-.228.025-.457.025-.688 0-5.703-4.623-10.327-10.326-10.327-1.913 0-3.704.523-5.24 1.43a7.675 7.675 0 0 0-14.68 2.219 6.02 6.02 0 0 0-.936-.08 5.992 5.992 0 0 0-5.992 5.992c0 .502.07.988.185 1.454h36.964z",
+    fill: "#FFF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M118.39 23.614c.015-.228.025-.457.025-.688 0-5.703-4.623-10.327-10.326-10.327-1.913 0-3.704.523-5.24 1.43a7.675 7.675 0 0 0-14.68 2.219 6.02 6.02 0 0 0-.936-.08 5.992 5.992 0 0 0-5.992 5.992c0 .502.07.988.185 1.454h36.964z",
+    stroke: "#CED3D7",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M84.402 85.735a3.82 3.82 0 0 1-3.174-1.685L57.064 48.29 32.901 84.05a3.827 3.827 0 1 1-6.34-4.284l30.503-45.148L87.57 79.766a3.827 3.827 0 0 1-3.167 5.97",
+    fill: "#E5E8EA"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M84.402 85.735a3.82 3.82 0 0 1-3.174-1.685L57.064 48.29 32.901 84.05a3.827 3.827 0 1 1-6.34-4.284l30.503-45.148L87.57 79.766a3.827 3.827 0 0 1-3.167 5.97z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M84.398 50.201c0 15.096-12.238 27.334-27.334 27.334S29.73 65.297 29.73 50.201s12.238-27.334 27.334-27.334 27.334 12.238 27.334 27.334",
+    fill: "#FFF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M84.398 50.201c0 15.096-12.238 27.334-27.334 27.334S29.73 65.297 29.73 50.201s12.238-27.334 27.334-27.334 27.334 12.238 27.334 27.334z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M77.291 50.201c0 11.171-9.055 20.227-20.226 20.227s-20.227-9.056-20.227-20.227c0-11.17 9.056-20.227 20.227-20.227 11.17 0 20.227 9.056 20.227 20.227",
+    fill: "#F1060F"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M77.291 50.201c0 11.171-9.055 20.227-20.226 20.227s-20.227-9.056-20.227-20.227c0-11.17 9.056-20.227 20.227-20.227 11.17 0 20.227 9.056 20.227 20.227z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M70.185 50.201c0 7.246-5.874 13.12-13.12 13.12-7.246 0-13.121-5.874-13.121-13.12 0-7.246 5.875-13.12 13.12-13.12 7.247 0 13.12 5.874 13.12 13.12",
+    fill: "#FFF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M70.185 50.201c0 7.246-5.874 13.12-13.12 13.12-7.246 0-13.121-5.874-13.121-13.12 0-7.246 5.875-13.12 13.12-13.12 7.247 0 13.12 5.874 13.12 13.12z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M63.625 50.201a6.56 6.56 0 1 1-13.12 0 6.56 6.56 0 0 1 13.12 0",
+    fill: "#F1060F"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M63.625 50.201a6.56 6.56 0 1 1-13.12 0 6.56 6.56 0 0 1 13.12 0z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M42.855 23.346a8.598 8.598 0 0 0 .857-3.736 8.655 8.655 0 0 0-8.654-8.654c-4.003 0-7.361 2.72-8.35 6.41a8.657 8.657 0 0 0-2.548-.532l.002-.027A8.344 8.344 0 0 0 8.12 13.59C4.074 14.314 1 17.845 1 22.1c0 .424.04.837.1 1.245h41.755z",
+    fill: "#FFF"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M42.855 23.346a8.598 8.598 0 0 0 .857-3.736 8.655 8.655 0 0 0-8.654-8.654c-4.003 0-7.361 2.72-8.35 6.41a8.657 8.657 0 0 0-2.548-.532l.002-.027A8.344 8.344 0 0 0 8.12 13.59C4.074 14.314 1 17.845 1 22.1c0 .424.04.837.1 1.245h41.755z",
+    stroke: "#CED3D7",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#3F5463",
+    d: "M64.635 43.022V15.576l10.02 10.021 14.62-14.619 7.404 7.403-14.62 14.62 10.023 10.021z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M89.275 8.857l-2.12 2.12-12.499 12.499-6.4-6.4-5.122-5.121v32.568h32.568L90.58 39.4l-6.4-6.4 12.498-12.498 2.122-2.121-2.122-2.122-5.282-5.282-2.12-2.121zm0 4.243l5.282 5.282L79.938 33l8.521 8.522H66.134V19.197l8.522 8.522 14.62-14.62z",
+    fill: "#FFF"
+  })));
+};
+
+var styles = {
+  componentId: 'bkdMu',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__OutcomeTree--outcomeTree {\n  overflow: scroll;\n  height: 100%;\n}\n\n.outcomes-ui__OutcomeTree--outcomeContent {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-y: scroll;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection {\n  padding-bottom: 1rem;\n  padding-left: 1rem;\n  padding-top: 1rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p:last-child {\n    margin-bottom: 0\n  }\n";
+  },
+  'outcomeTree': 'outcomes-ui__OutcomeTree--outcomeTree',
+  'outcomeContent': 'outcomes-ui__OutcomeTree--outcomeContent',
+  'selectedOutcomeCollection': 'outcomes-ui__OutcomeTree--selectedOutcomeCollection',
+  'outcomeDescription': 'outcomes-ui__OutcomeTree--outcomeDescription'
+};
+var OutcomeTree = (_dec = (0, _uiThemeable.default)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(OutcomeTree, _React$Component);
+
+  var _super = (0, _createSuper2.default)(OutcomeTree);
+
+  function OutcomeTree() {
+    (0, _classCallCheck2.default)(this, OutcomeTree);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(OutcomeTree, [{
+    key: "setRHS",
+    value: // eslint-disable-next-line no-undef
+    function setRHS(rhs) {
+      this.rhs = rhs; // eslint-disable-line immutable/no-mutation
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(oldProps) {
+      var oldCollection = oldProps.activeCollection ? oldProps.activeCollection.id : null;
+      var newCollection = this.props.activeCollection ? this.props.activeCollection.id : null;
+
+      var parent = _reactDom.default.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
+
+
+      if (oldCollection !== newCollection && parent && !parent.contains(document.activeElement) && this.rhs) {
+        var next = this.rhs.querySelector('input') || this.rhs.querySelector('button');
+
+        if (next) {
+          next.focus();
+        }
+      }
+    }
+  }, {
+    key: "renderActiveCollection",
+    value: function renderActiveCollection() {
+      var activeCollection = this.props.activeCollection;
+      return activeCollection && activeCollection.id ? /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.selectedOutcomeCollection
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h3",
+        as: "h2",
+        margin: "0 0 x-small"
+      }, activeCollection.header)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-small"
+      }, activeCollection.summary)), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-small"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.outcomeDescription,
+        dangerouslySetInnerHTML: {
+          // eslint-disable-line react/no-danger
+          __html: (0, _sanitize.sanitizeHtml)(activeCollection.description)
+        }
+      }))) : /*#__PURE__*/_react.default.createElement(_uiBillboard.Billboard, {
+        message: "Duy\u1EC7t xem k\u1EBFt qu\u1EA3 c\u1EE7a b\u1EA1n b\u1EB1ng c\xE1ch s\u1EED d\u1EE5ng th\u01B0 m\u1EE5c nh\xF3m.",
+        heading: "C\u0103n Ch\u1EC9nh K\u1EBFt Qu\u1EA3",
+        headingAs: "h3",
+        headingLevel: "h3",
+        size: "small",
+        hero: /*#__PURE__*/_react.default.createElement(AlignOutcomes, null),
+        margin: "medium"
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props = this.props,
+          activeChildren = _this$props.activeChildren,
+          collections = _this$props.collections,
+          setFocusedOutcome = _this$props.setFocusedOutcome,
+          getOutcomeSummary = _this$props.getOutcomeSummary,
+          isOutcomeSelected = _this$props.isOutcomeSelected,
+          selectOutcomeIds = _this$props.selectOutcomeIds,
+          deselectOutcomeIds = _this$props.deselectOutcomeIds,
+          setActiveCollection = _this$props.setActiveCollection,
+          rootOutcomeIds = _this$props.rootOutcomeIds,
+          activeCollection = _this$props.activeCollection,
+          toggleExpandedIds = _this$props.toggleExpandedIds,
+          expandedIds = _this$props.expandedIds;
+      var groups = activeChildren.groups,
+          nonGroups = activeChildren.nonGroups;
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        alignItems: "stretch",
+        height: "100%",
+        width: "100%"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        width: "30%"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.outcomeTree,
+        "data-automation": "outcomePicker__outcomeTree"
+      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+        collections: collections,
+        setActiveCollection: setActiveCollection,
+        rootOutcomeIds: rootOutcomeIds,
+        expandedIds: expandedIds,
+        toggleExpandedIds: toggleExpandedIds
+      }))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        size: "0",
+        shouldGrow: true,
+        display: "flex",
+        borderWidth: "0 0 0 small"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        height: "100%",
+        width: "100%",
+        direction: "column",
+        alignItems: "stretch",
+        className: styles.outcomeContent,
+        elementRef: function elementRef(rhs) {
+          return _this.setRHS(rhs);
+        },
+        "data-automation": "outcomePicker__outcomeContent"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        size: "0",
+        shouldGrow: true
+      }, this.renderActiveCollection(), /*#__PURE__*/_react.default.createElement(_index.default, {
+        setFocusedOutcome: setFocusedOutcome,
+        outcomes: nonGroups,
+        isOutcomeSelected: isOutcomeSelected,
+        selectOutcomeIds: selectOutcomeIds,
+        deselectOutcomeIds: deselectOutcomeIds
+      }), /*#__PURE__*/_react.default.createElement(_index2.default, {
+        outcomes: groups,
+        setActiveCollection: setActiveCollection,
+        getOutcomeSummary: getOutcomeSummary,
+        toggleExpandedIds: toggleExpandedIds,
+        activeCollectionId: activeCollection ? activeCollection.id : null
+      })))));
+    }
+  }]);
+  OutcomeTree.displayName = "OutcomeTree";
+  return OutcomeTree;
+}(_react.default.Component), _class2.propTypes = {
+  expandedIds: _propTypes.default.array,
+  toggleExpandedIds: _propTypes.default.func.isRequired,
+  setFocusedOutcome: _propTypes.default.func.isRequired,
+  getOutcomeSummary: _propTypes.default.func.isRequired,
+  isOutcomeSelected: _propTypes.default.func.isRequired,
+  selectOutcomeIds: _propTypes.default.func.isRequired,
+  deselectOutcomeIds: _propTypes.default.func.isRequired,
+  collections: _propTypes.default.object.isRequired,
+  setActiveCollection: _propTypes.default.func.isRequired,
+  rootOutcomeIds: _propTypes.default.array.isRequired,
+  activeChildren: _propTypes.default.shape({
+    groups: _propTypes.default.array,
+    nonGroups: _propTypes.default.array
+  }),
+  activeCollection: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    header: _propTypes.default.string,
+    summary: _propTypes.default.string,
+    description: _propTypes.default.string
+  })
+}, _class2.defaultProps = {
+  expandedIds: null,
+  activeCollection: null,
+  activeChildren: {
+    groups: [],
+    nonGroups: []
+  }
+}, _temp)) || _class);
+var _default = OutcomeTree;
+exports.default = _default;

package/lib/translated/vi/components/OutcomeTree/index.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.twoLevelExpanded = exports.oneLevelExpanded = exports.collapsed = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _constants = require("../../../.storybook/constants.js");
+
+var _uiView = require("@instructure/ui-view");
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _default = {
+  title: 'OutcomeTree'
+};
+exports.default = _default;
+
+var collapsed = function collapsed() {
+  return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    as: "div",
+    height: "100vh"
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    collections: (0, _addonKnobs.object)('Collections', _constants.defaultCollections),
+    setActiveCollection: function setActiveCollection() {},
+    rootOutcomeIds: [1, 2, 3],
+    expandedIds: [],
+    toggleExpandedIds: function toggleExpandedIds() {}
+  }));
+};
+
+exports.collapsed = collapsed;
+
+var oneLevelExpanded = function oneLevelExpanded() {
+  return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    as: "div",
+    height: "100vh"
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    collections: (0, _addonKnobs.object)('Collections', _constants.defaultCollections),
+    setActiveCollection: function setActiveCollection() {},
+    rootOutcomeIds: [1, 2, 3],
+    expandedIds: (0, _addonKnobs.array)('Expanded Group Ids', [1]),
+    toggleExpandedIds: function toggleExpandedIds() {}
+  }));
+};
+
+exports.oneLevelExpanded = oneLevelExpanded;
+
+var twoLevelExpanded = function twoLevelExpanded() {
+  return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+    as: "div",
+    height: "100vh"
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    collections: (0, _addonKnobs.object)('Collections', _constants.defaultCollections),
+    setActiveCollection: function setActiveCollection() {},
+    rootOutcomeIds: [1, 2, 3],
+    expandedIds: (0, _addonKnobs.array)('Expanded Group Ids', [1, 4]),
+    toggleExpandedIds: function toggleExpandedIds() {}
+  }));
+};
+
+exports.twoLevelExpanded = twoLevelExpanded;

package/lib/translated/vi/components/OutcomeTree/styles.css

@@ -0,0 +1,26 @@
+.outcomeTree {
+  overflow: scroll;
+  height: 100%;
+}
+
+.outcomeContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.selectedOutcomeCollection {
+  padding-bottom: 1rem;
+  padding-left: 1rem;
+  padding-top: 1rem;
+}
+
+.selectedOutcomeCollection .outcomeDescription > p {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+
+  &:last-child {
+    margin-bottom: 0
+  }
+}

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+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"));
+
+describe('OutcomeView MasteryCounts', 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({
+      scoringMethod: scoringMethod,
+      outcomeResult: {
+        masteryCount: 10,
+        count: 20
+      }
+    }, props);
+  }
+
+  it('includes a progress bar', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    (0, _chai.expect)(wrapper.find('ProgressBar')).to.have.length(1);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});

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

@@ -0,0 +1,107 @@
+"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 _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiProgress = require("@instructure/ui-progress");
+
+var _shapes = require("../../../store/shapes.js");
+
+var _convertToPoints = _interopRequireDefault(require("../convertToPoints.js"));
+
+var _theme = _interopRequireDefault(require("../../theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'dIVYN',
+  template: function template(theme) {
+    return "\n\n@media screen and (min-width: 768px) {\n  .outcomes-ui__MasteryCounts--masteryBarGraph {\n    margin-top: 2rem;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreSection {\n    display: none;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .outcomes-ui__MasteryCounts--masteryBarGraph {\n    display: none;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreSection {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-evenly;\n    margin-top: 2rem;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery {\n    color: ".concat(theme.masteryColor || 'inherit', ";\n    display: flex;\n    flex-direction: column;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  [dir=\"ltr\"] .outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery {\n    text-align: center;\n  }\n\n  [dir=\"rtl\"] .outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery {\n    text-align: center;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery {\n    display: flex;\n    flex-direction: column;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  [dir=\"ltr\"] .outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery {\n    text-align: center;\n  }\n\n  [dir=\"rtl\"] .outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery {\n    text-align: center;\n  }\n}\n\n.outcomes-ui__MasteryCounts--masteryBarDetails {\n  display: flex;\n  justify-content: space-between;\n  padding-top: 0.25rem;\n}\n\n.outcomes-ui__MasteryCounts--masteryCountText {\n  color: ").concat(theme.masteryColor || 'inherit', ";\n}\n");
+  },
+  'masteryBarGraph': 'outcomes-ui__MasteryCounts--masteryBarGraph',
+  'masteryScoreSection': 'outcomes-ui__MasteryCounts--masteryScoreSection',
+  'masteryScoreBoxAboveMastery': 'outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery',
+  'masteryScoreBoxBelowMastery': 'outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery',
+  'masteryBarDetails': 'outcomes-ui__MasteryCounts--masteryBarDetails',
+  'masteryCountText': 'outcomes-ui__MasteryCounts--masteryCountText'
+};
+var MasteryCounts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(MasteryCounts, _React$Component);
+
+  var _super = (0, _createSuper2.default)(MasteryCounts);
+
+  function MasteryCounts() {
+    (0, _classCallCheck2.default)(this, MasteryCounts);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(MasteryCounts, [{
+    key: "render",
+    value: // eslint-disable-next-line no-undef
+    function render() {
+      var _this$props = this.props,
+          outcomeResult = _this$props.outcomeResult,
+          scoringMethod = _this$props.scoringMethod;
+      var masteryPoints = (0, _convertToPoints.default)(scoringMethod.mastery_percent, scoringMethod);
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.masteryScoreSection
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.masteryScoreBoxAboveMastery
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-large"
+      }, outcomeResult.masteryCount), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, "Th\xE0nh Th\u1EA1o \u1EDF " + masteryPoints + " \u0111i\u1EC3m th\xE0nh ph\u1EA7n")), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.masteryScoreBoxBelowMastery
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-large"
+      }, outcomeResult.count - outcomeResult.masteryCount), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, "Kh\xF4ng \u0110\u1EA1t"))), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.masteryBarGraph,
+        "data-automation": "outcomeView__masteryBarGraph"
+      }, /*#__PURE__*/_react.default.createElement(_uiProgress.ProgressBar, {
+        size: "small",
+        screenReaderLabel: outcomeResult.masteryCount + " / " + outcomeResult.count + " \u0111\u1EA1t m\u1EE9c th\xE0nh th\u1EA1o",
+        meterColor: "success",
+        valueMax: outcomeResult.count,
+        valueNow: outcomeResult.masteryCount
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.masteryBarDetails,
+        "data-automation": "outcomeView__masteryBarDetails"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.masteryCountText
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small",
+        "data-automation": "outcomeView__masteryCount"
+      }, "Th\xE0nh Th\u1EA1o " + outcomeResult.masteryCount + " \u1EDF " + masteryPoints + " \u0111i\u1EC3m th\xE0nh ph\u1EA7n")), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small",
+        "data-automation": "outcomeView__noMasteryCount"
+      }, "Kh\xF4ng \u0110\u1EA1t " + (outcomeResult.count - outcomeResult.masteryCount)))));
+    }
+  }]);
+  MasteryCounts.displayName = "MasteryCounts";
+  return MasteryCounts;
+}(_react.default.Component), _class2.propTypes = {
+  outcomeResult: _shapes.outcomeResultShape.isRequired,
+  scoringMethod: _shapes.scoringMethodShape.isRequired
+}, _temp)) || _class);
+exports.default = MasteryCounts;

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

@@ -0,0 +1,30 @@
+"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: 'MasteryCounts'
+};
+exports.default = _default;
+
+var standard = function standard() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    outcomeResult: (0, _addonKnobs.object)('Outcome Result', _constants.outcomeRollup),
+    scoringMethod: (0, _addonKnobs.object)('Scoring Method', _constants.defaultScoringMethod)
+  });
+};
+
+exports.standard = standard;

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

@@ -0,0 +1,47 @@
+@media screen and (min-width: 768px) {
+  .masteryBarGraph {
+    margin-top: 2rem;
+  }
+
+  .masteryScoreSection {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .masteryBarGraph {
+    display: none;
+  }
+
+  .masteryScoreSection {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin-top: 2rem;
+  }
+
+  .masteryScoreBoxAboveMastery {
+    color: var(--masteryColor);
+    display: flex;
+    flex-direction: column;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .masteryScoreBoxBelowMastery {
+    display: flex;
+    flex-direction: column;
+    font-weight: bold;
+    text-align: center;
+  }
+}
+
+.masteryBarDetails {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 0.25rem;
+}
+
+.masteryCountText {
+  color: var(--masteryColor);
+}