@instructure/outcomes-ui 2.1.2 → 2.1.3

package/es/translated/vi/components/OutcomeTree/__tests__/index.test.js

@@ -0,0 +1,176 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow, mount } from 'enzyme';
+import OutcomeTree from "../index.js";
+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'
+};
+import checkA11y from "../../../test/checkA11y.js";
+describe('OutcomeTree', function () {
+  var outcomeData = {
+    label: 'FOO',
+    title: 'bar'
+  };
+  var groups = [_objectSpread({
+    'id': '2'
+  }, outcomeData), _objectSpread({
+    'id': '3'
+  }, outcomeData), _objectSpread({
+    'id': '6'
+  }, outcomeData)];
+  var nonGroups = [_objectSpread({
+    'id': '4'
+  }, outcomeData), _objectSpread({
+    'id': '5'
+  }, outcomeData)];
+
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      activeChildren: {
+        groups: groups,
+        nonGroups: nonGroups
+      },
+      rootOutcomeIds: [],
+      toggleExpandedIds: sinon.spy(),
+      isOutcomeSelected: sinon.stub().returns(false),
+      getOutcomeSummary: sinon.spy(),
+      selectOutcomeIds: sinon.spy(),
+      deselectOutcomeIds: sinon.spy(),
+      setFocusedOutcome: sinon.spy(),
+      setActiveCollection: sinon.spy(),
+      collections: {
+        100: {
+          id: '100',
+          name: 'Outcome group'
+        }
+      },
+      expandedIds: [],
+      activeCollection: {
+        id: '100',
+        header: 'Outcome group',
+        summary: '1 outcome',
+        description: 'This is the description'
+      }
+    }, props);
+  }
+
+  it('passes the correct params to OutcomeBrowser', function () {
+    var props = makeProps();
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('OutcomeBrowser')).to.have.length(1);
+    expect(wrapper.find('OutcomeBrowser').prop('collections')).to.deep.equal(props.collections);
+    expect(wrapper.find('OutcomeBrowser').prop('rootOutcomeIds')).to.deep.equal(props.rootOutcomeIds);
+    expect(wrapper.find('OutcomeBrowser').prop('expandedIds')).to.deep.equal(props.expandedIds);
+  });
+  it('wraps the browser with the proper CSS styling', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(".".concat(styles.outcomeTree)).exists()).to.equal(true);
+  });
+  it('passes correct params to OutcomeSelectionList component', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('OutcomeSelectionList').prop('outcomes')).to.deep.equal(nonGroups);
+  });
+  it('passes correct params to OutcomeFolderList component', function () {
+    var props = makeProps();
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('OutcomeFolderList').prop('outcomes')).to.deep.equal(groups);
+    expect(wrapper.find('OutcomeFolderList').prop('activeCollectionId')).to.deep.equal(props.activeCollection.id);
+  });
+  it('passes correct params to the Text components', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    var texts = wrapper.find('Text');
+    var header = wrapper.find('Heading');
+    expect(texts.at(0).render().text()).to.equal('1 outcome');
+    expect(texts.at(1).render().text()).to.equal('This is the description');
+    expect(header.at(0).render().text()).to.equal('Outcome group');
+  });
+  it('sanitizes the outcome description', function () {
+    var props = makeProps();
+    props.activeCollection.description = 'I have <blink>invalid html';
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, props));
+    expect(wrapper.html()).to.include('</blink>');
+  });
+  it('sets the CSS styling when there is a description', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(".".concat(styles.outcomeDescription)).exists()).to.equal(true);
+  });
+  it('shows the proper billboard when there are no active collection details', function () {
+    var props = makeProps({
+      activeCollection: {}
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Billboard')).to.have.length(1);
+    expect(wrapper.find('Billboard').prop('heading')).to.equal('Align Outcomes');
+  });
+  it('shows the proper billboard when there is no active collection id', function () {
+    var props = makeProps();
+    delete props.activeCollection.id;
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Billboard')).to.have.length(1);
+    expect(wrapper.find('Billboard').prop('heading')).to.equal('Align Outcomes');
+  });
+  it('does not set the CSS description styling when there are no active collection details', function () {
+    var props = makeProps({
+      activeCollection: {}
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(".".concat(styles.outcomeDescription)).exists()).to.equal(false);
+  });
+  it('sets the CSS content styling', function () {
+    var props = makeProps({
+      activeCollection: {}
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTree, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(".".concat(styles.outcomeContent)).exists()).to.equal(true);
+  });
+  it('handles missing activeCollection props', function () {
+    var props = makeProps();
+    delete props.activeCollection;
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, props));
+    var texts = wrapper.find('Text');
+    expect(texts.at(0).render().text()).to.equal('Select all');
+  });
+  it('meets a11y standards', function () {
+    var props = makeProps();
+    return checkA11y( /*#__PURE__*/React.createElement(OutcomeTree, props));
+  });
+  it('resets focus on update', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()));
+    wrapper.setProps(_objectSpread({}, makeProps({
+      activeCollection: {
+        id: '101'
+      }
+    })));
+    expect(wrapper.getDOMNode().contains(document.activeElement));
+  });
+});

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

@@ -0,0 +1,271 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import themeable from '@instructure/ui-themeable';
+import { Billboard } from '@instructure/ui-billboard';
+import { Flex } from '@instructure/ui-flex';
+import { Text } from '@instructure/ui-text';
+import { Heading } from '@instructure/ui-heading';
+import OutcomeSelectionList from "../OutcomeSelectionList/index.js";
+import OutcomeFolderList from "../OutcomeFolderList/index.js";
+import TreeBrowser from "./TreeBrowser/index.js";
+
+var AlignOutcomes = function AlignOutcomes(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: "120",
+    height: "87",
+    viewBox: "0 0 120 87",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("title", null, "Align-Outcomes"), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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"
+  })));
+};
+
+import theme from "../theme.js";
+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'
+};
+import { sanitizeHtml } from "../../lib/sanitize.js";
+var OutcomeTree = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(OutcomeTree, _React$Component);
+
+  var _super = _createSuper(OutcomeTree);
+
+  function OutcomeTree() {
+    _classCallCheck(this, OutcomeTree);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(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.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.createElement("div", {
+        className: styles.selectedOutcomeCollection
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+        level: "h3",
+        as: "h2",
+        margin: "0 0 x-small"
+      }, activeCollection.header)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+        size: "x-small"
+      }, activeCollection.summary)), /*#__PURE__*/React.createElement(Text, {
+        size: "x-small"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.outcomeDescription,
+        dangerouslySetInnerHTML: {
+          // eslint-disable-line react/no-danger
+          __html: sanitizeHtml(activeCollection.description)
+        }
+      }))) : /*#__PURE__*/React.createElement(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.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.createElement(Flex, {
+        alignItems: "stretch",
+        height: "100%",
+        width: "100%"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        width: "30%"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.outcomeTree,
+        "data-automation": "outcomePicker__outcomeTree"
+      }, /*#__PURE__*/React.createElement(TreeBrowser, {
+        collections: collections,
+        setActiveCollection: setActiveCollection,
+        rootOutcomeIds: rootOutcomeIds,
+        expandedIds: expandedIds,
+        toggleExpandedIds: toggleExpandedIds
+      }))), /*#__PURE__*/React.createElement(Flex.Item, {
+        size: "0",
+        shouldGrow: true,
+        display: "flex",
+        borderWidth: "0 0 0 small"
+      }, /*#__PURE__*/React.createElement(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.createElement(Flex.Item, {
+        size: "0",
+        shouldGrow: true
+      }, this.renderActiveCollection(), /*#__PURE__*/React.createElement(OutcomeSelectionList, {
+        setFocusedOutcome: setFocusedOutcome,
+        outcomes: nonGroups,
+        isOutcomeSelected: isOutcomeSelected,
+        selectOutcomeIds: selectOutcomeIds,
+        deselectOutcomeIds: deselectOutcomeIds
+      }), /*#__PURE__*/React.createElement(OutcomeFolderList, {
+        outcomes: groups,
+        setActiveCollection: setActiveCollection,
+        getOutcomeSummary: getOutcomeSummary,
+        toggleExpandedIds: toggleExpandedIds,
+        activeCollectionId: activeCollection ? activeCollection.id : null
+      })))));
+    }
+  }]);
+
+  OutcomeTree.displayName = "OutcomeTree";
+  return OutcomeTree;
+}(React.Component), _class2.propTypes = {
+  expandedIds: PropTypes.array,
+  toggleExpandedIds: PropTypes.func.isRequired,
+  setFocusedOutcome: PropTypes.func.isRequired,
+  getOutcomeSummary: PropTypes.func.isRequired,
+  isOutcomeSelected: PropTypes.func.isRequired,
+  selectOutcomeIds: PropTypes.func.isRequired,
+  deselectOutcomeIds: PropTypes.func.isRequired,
+  collections: PropTypes.object.isRequired,
+  setActiveCollection: PropTypes.func.isRequired,
+  rootOutcomeIds: PropTypes.array.isRequired,
+  activeChildren: PropTypes.shape({
+    groups: PropTypes.array,
+    nonGroups: PropTypes.array
+  }),
+  activeCollection: PropTypes.shape({
+    id: PropTypes.string,
+    header: PropTypes.string,
+    summary: PropTypes.string,
+    description: PropTypes.string
+  })
+}, _class2.defaultProps = {
+  expandedIds: null,
+  activeCollection: null,
+  activeChildren: {
+    groups: [],
+    nonGroups: []
+  }
+}, _temp)) || _class);
+export default OutcomeTree;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { object, array } from '@storybook/addon-knobs';
+import { defaultCollections } from "../../../.storybook/constants.js";
+import { View } from '@instructure/ui-view';
+import OutcomeTree from "./index.js";
+export default {
+  title: 'OutcomeTree'
+};
+export var collapsed = function collapsed() {
+  return /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    height: "100vh"
+  }, /*#__PURE__*/React.createElement(OutcomeTree, {
+    collections: object('Collections', defaultCollections),
+    setActiveCollection: function setActiveCollection() {},
+    rootOutcomeIds: [1, 2, 3],
+    expandedIds: [],
+    toggleExpandedIds: function toggleExpandedIds() {}
+  }));
+};
+export var oneLevelExpanded = function oneLevelExpanded() {
+  return /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    height: "100vh"
+  }, /*#__PURE__*/React.createElement(OutcomeTree, {
+    collections: object('Collections', defaultCollections),
+    setActiveCollection: function setActiveCollection() {},
+    rootOutcomeIds: [1, 2, 3],
+    expandedIds: array('Expanded Group Ids', [1]),
+    toggleExpandedIds: function toggleExpandedIds() {}
+  }));
+};
+export var twoLevelExpanded = function twoLevelExpanded() {
+  return /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    height: "100vh"
+  }, /*#__PURE__*/React.createElement(OutcomeTree, {
+    collections: object('Collections', defaultCollections),
+    setActiveCollection: function setActiveCollection() {},
+    rootOutcomeIds: [1, 2, 3],
+    expandedIds: array('Expanded Group Ids', [1, 4]),
+    toggleExpandedIds: function toggleExpandedIds() {}
+  }));
+};

package/es/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/es/translated/vi/components/OutcomeView/MasteryCounts/__tests__/index.test.js

@@ -0,0 +1,34 @@
+import { expect } from 'chai';
+import React from 'react';
+import { mount } from 'enzyme';
+import MasteryCounts from "../index.js";
+import checkA11y from "../../../../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 = mount( /*#__PURE__*/React.createElement(MasteryCounts, makeProps()));
+    expect(wrapper.find('ProgressBar')).to.have.length(1);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(MasteryCounts, makeProps()));
+  });
+});

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

@@ -0,0 +1,90 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import { themeable } from '@instructure/ui-themeable';
+import { Text } from '@instructure/ui-text';
+import { ProgressBar } from '@instructure/ui-progress';
+import { outcomeResultShape, scoringMethodShape } from "../../../store/shapes.js";
+import convertToPoints from "../convertToPoints.js";
+import theme from "../../theme.js";
+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 = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(MasteryCounts, _React$Component);
+
+  var _super = _createSuper(MasteryCounts);
+
+  function MasteryCounts() {
+    _classCallCheck(this, MasteryCounts);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(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 = convertToPoints(scoringMethod.mastery_percent, scoringMethod);
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: styles.masteryScoreSection
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.masteryScoreBoxAboveMastery
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "x-large"
+      }, outcomeResult.masteryCount), /*#__PURE__*/React.createElement(Text, {
+        size: "small"
+      }, "Th\xE0nh Th\u1EA1o \u1EDF " + masteryPoints + " \u0111i\u1EC3m th\xE0nh ph\u1EA7n")), /*#__PURE__*/React.createElement("div", {
+        className: styles.masteryScoreBoxBelowMastery
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "x-large"
+      }, outcomeResult.count - outcomeResult.masteryCount), /*#__PURE__*/React.createElement(Text, {
+        size: "small"
+      }, "Kh\xF4ng \u0110\u1EA1t"))), /*#__PURE__*/React.createElement("div", {
+        className: styles.masteryBarGraph,
+        "data-automation": "outcomeView__masteryBarGraph"
+      }, /*#__PURE__*/React.createElement(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.createElement("div", {
+        className: styles.masteryBarDetails,
+        "data-automation": "outcomeView__masteryBarDetails"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.masteryCountText
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        "data-automation": "outcomeView__masteryCount"
+      }, "Th\xE0nh Th\u1EA1o " + outcomeResult.masteryCount + " \u1EDF " + masteryPoints + " \u0111i\u1EC3m th\xE0nh ph\u1EA7n")), /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        "data-automation": "outcomeView__noMasteryCount"
+      }, "Kh\xF4ng \u0110\u1EA1t " + (outcomeResult.count - outcomeResult.masteryCount)))));
+    }
+  }]);
+
+  MasteryCounts.displayName = "MasteryCounts";
+  return MasteryCounts;
+}(React.Component), _class2.propTypes = {
+  outcomeResult: outcomeResultShape.isRequired,
+  scoringMethod: scoringMethodShape.isRequired
+}, _temp)) || _class);
+export { MasteryCounts as default };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { object } from '@storybook/addon-knobs';
+import { defaultScoringMethod, outcomeRollup } from "../../../../.storybook/constants.js";
+import MasteryCounts from "./index.js";
+export default {
+  title: 'MasteryCounts'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(MasteryCounts, {
+    outcomeResult: object('Outcome Result', outcomeRollup),
+    scoringMethod: object('Scoring Method', defaultScoringMethod)
+  });
+};