@instructure/outcomes-ui 2.1.2 → 2.1.3

package/lib/translated/vi/components/AlignmentList/__tests__/index.test.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
+
+describe('AlignmentList', function () {
+  var triggerButtonSelector = 'Button[variant="circle-primary"]';
+
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      alignedOutcomes: [{
+        id: '1',
+        label: 'A1',
+        title: 'tA1'
+      }, {
+        id: '2',
+        label: 'B2',
+        title: 'tB2'
+      }, {
+        id: '3',
+        label: 'C3',
+        title: 'tC3'
+      }],
+      emptySetHeading: 'Foo',
+      scope: 'scopeForTest',
+      viewAlignment: _sinon.default.spy(),
+      closeAlignment: _sinon.default.spy(),
+      removeAlignment: _sinon.default.spy(),
+      onUpdate: _sinon.default.spy(),
+      isOpen: _sinon.default.stub().returns(false),
+      setOutcomePickerState: _sinon.default.spy(),
+      openOutcomePicker: _sinon.default.spy(),
+      screenreaderNotification: _sinon.default.spy(),
+      addModal: function addModal() {
+        return null;
+      },
+      outcomePicker: function outcomePicker() {
+        return null;
+      },
+      readOnly: false
+    }, props);
+  }
+
+  describe('no alignments present', function () {
+    var props = makeProps({
+      alignedOutcomes: []
+    });
+    it('shows billboard when no alignments present', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find('Billboard')).to.have.length(1);
+    });
+    it('does not show the billboard when readOnly is true', function () {
+      var props = makeProps({
+        alignedOutcomes: [],
+        readOnly: true
+      });
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find('Billboard')).to.have.length(0);
+    });
+    it('includes the right heading', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find('Billboard').prop('heading')).to.equal('Foo');
+    });
+    it('launches modal when billboard clicked', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+        disableLifecycleMethods: true
+      });
+      wrapper.find('Billboard').simulate('click');
+      (0, _chai.expect)(props.openOutcomePicker.calledOnce).to.be.true;
+    });
+    it('focuses the billboard button when focus called', function (done) {
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+      setTimeout(function () {
+        var trigger = wrapper.find('button').last();
+
+        var focus = _sinon.default.spy(trigger.instance(), 'focus');
+
+        wrapper.instance().focus();
+        setTimeout(function () {
+          (0, _chai.expect)(focus.calledOnce).to.be.true;
+          (0, _chai.expect)(focus.calledWith()).to.be.true;
+          done();
+        }, 1);
+      }, 1);
+    });
+    it('meets a11y standards', function () {
+      return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    });
+  });
+  describe('alignments present', function () {
+    it('shows list', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find('ul')).to.have.length(1);
+    });
+    it('adds one alignment row per alignment', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find('Alignment')).to.have.length(3);
+    });
+    it('gives correct outcome to alignment rows', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find('Alignment').last().prop('outcome')).to.have.property('label', 'C3');
+    });
+    it('gives correct callbacks to alignment rows', function () {
+      var props = makeProps();
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+      var first = wrapper.find('Alignment').at(0);
+      var remove = first.prop('removeAlignment');
+      remove();
+      (0, _chai.expect)(props.removeAlignment.calledWith('1', props.onUpdate)).to.be.true;
+      var view = first.prop('viewAlignment');
+      view();
+      (0, _chai.expect)(props.viewAlignment.calledWith('1')).to.be.true;
+      var close = first.prop('closeAlignment');
+      close();
+      (0, _chai.expect)(props.closeAlignment.calledWith()).to.be.true;
+    });
+    it('renders a trigger button when readOnly is false', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find(triggerButtonSelector)).to.have.length(1);
+    });
+    it('does not render a trigger button when readOnly is true', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+        readOnly: true
+      })), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find(triggerButtonSelector)).to.have.length(0);
+    });
+    it('launches modal when trigger button clicked', function () {
+      var props = makeProps();
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+        disableLifecycleMethods: true
+      });
+      wrapper.find(triggerButtonSelector).simulate('click');
+      (0, _chai.expect)(props.openOutcomePicker.calledOnce).to.be.true;
+    });
+    it('focuses the add button when modal dismissed', function (done) {
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+      setTimeout(function () {
+        var trigger = wrapper.find('button').last();
+
+        var focus = _sinon.default.spy(trigger.instance(), 'focus');
+
+        wrapper.instance().focus();
+        setTimeout(function () {
+          (0, _chai.expect)(focus.calledOnce).to.be.true;
+          (0, _chai.expect)(focus.calledWith()).to.be.true;
+          done();
+        }, 1);
+      }, 1);
+    });
+    it('generates screenreader notification when removing an alignment', function (done) {
+      var props = makeProps();
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+      var first = wrapper.find('Alignment').at(0);
+      var label = first.instance().props.outcome.label;
+      var remove = first.prop('removeAlignment');
+      remove();
+      setTimeout(function () {
+        (0, _chai.expect)(props.screenreaderNotification.getCall(0).args[0]).to.include(label);
+        done();
+      }, 1);
+    });
+    it('focuses on the prior alignment when current alignment deleted', function (done) {
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+      setTimeout(function () {
+        var last = wrapper.find('Alignment').at(2);
+        var previous = wrapper.find('Alignment').at(1);
+
+        var focus = _sinon.default.spy(previous.instance(), 'focus');
+
+        var remove = last.prop('removeAlignment');
+        remove();
+        setTimeout(function () {
+          (0, _chai.expect)(focus.calledOnce).to.be.true;
+          (0, _chai.expect)(focus.calledWith()).to.be.true;
+          done();
+        }, 1);
+      }, 1);
+    });
+    it('focuses on the next alignment when first alignment deleted', function (done) {
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+      setTimeout(function () {
+        var first = wrapper.find('Alignment').at(0);
+        var next = wrapper.find('Alignment').at(1);
+
+        var focus = _sinon.default.spy(next.instance(), 'focus');
+
+        var remove = first.prop('removeAlignment');
+        remove();
+        setTimeout(function () {
+          (0, _chai.expect)(focus.calledOnce).to.be.true;
+          (0, _chai.expect)(focus.calledWith()).to.be.true;
+          done();
+        }, 1);
+      }, 1);
+    });
+    it('meets a11y standards', function () {
+      return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    });
+  });
+});

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

@@ -0,0 +1,395 @@
+"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 _uiBillboard = require("@instructure/ui-billboard");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../Alignment/index.js"));
+
+var _theme = _interopRequireDefault(require("../theme.js"));
+
+var _index2 = _interopRequireDefault(require("../OutcomePickerModal/index.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'sJofx',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__AlignmentList--header {\n  background-color: #BBBBBB;\n  border: solid 1px #999999;\n  border-radius: 5px;\n  padding: 10px 20px;\n}\n\n.outcomes-ui__AlignmentList--list {\n  list-style: none;\n  padding-left: 0;\n  border: solid 1px #BBBBBB;\n  border-radius: 5px;\n}\n\n.outcomes-ui__AlignmentList--list > li {\n  padding: 10px 20px;\n}\n\n.outcomes-ui__AlignmentList--list > li + li {\n  border-top: dashed 1px #BBBBBB;\n}\n\n.outcomes-ui__AlignmentList--addOutcome {\n  text-align: center;\n}\n\n[dir=\"ltr\"] .outcomes-ui__AlignmentList--addOutcome {\n  text-align: center;\n}\n\n[dir=\"rtl\"] .outcomes-ui__AlignmentList--addOutcome {\n  text-align: center;\n}\n\n.outcomes-ui__AlignmentList--addOutcome button {\n  padding: 0;\n}\n";
+  },
+  'header': 'outcomes-ui__AlignmentList--header',
+  'list': 'outcomes-ui__AlignmentList--list',
+  'addOutcome': 'outcomes-ui__AlignmentList--addOutcome'
+};
+
+var Clipboard = function Clipboard(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+    width: "70",
+    height: "96",
+    viewBox: "0 0 70 96",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, props), /*#__PURE__*/_react.default.createElement("title", null, "ClipBoard"), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("path", {
+    id: "a",
+    d: "M0 96h70V0H0z"
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M65 95H5a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4v69a4 4 0 0 1-4 4z",
+    fill: "#F7F8F7"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M65 95H5a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4v69a4 4 0 0 1-4 4z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "b",
+    fill: "#fff"
+  }, /*#__PURE__*/_react.default.createElement("use", {
+    xlinkHref: "#a"
+  })), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#FFF",
+    mask: "url(#b)",
+    d: "M9 46h13V33H9z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M9 46h13V33H9z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#3F5463",
+    mask: "url(#b)",
+    d: "M28 36h23v-3H28zM28 46h14v-3H28zM28 41h31v-3H28z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    stroke: "#00B517",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M12 39l3 2.655 4.398-5.265"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#FFF",
+    mask: "url(#b)",
+    d: "M9 67h13V54H9z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M9 67h13V54H9z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#3F5463",
+    mask: "url(#b)",
+    d: "M28 57h23v-3H28zM28 77h23v-3H28zM28 67h14v-3H28zM28 62h31v-3H28z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    stroke: "#00B517",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M12 60l3 2.655 4.398-5.265"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#FFF",
+    mask: "url(#b)",
+    d: "M9 87h13V74H9z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M9 87h13V74H9z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#3F5463",
+    mask: "url(#b)",
+    d: "M28 87h14v-3H28zM28 82h31v-3H28z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    stroke: "#00B517",
+    strokeWidth: "2",
+    mask: "url(#b)",
+    d: "M12 80l3 2.655 4.398-5.265"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M55.874 25H14.126a2 2 0 0 1-1.816-2.838L17 12h36l4.69 10.162A2 2 0 0 1 55.874 25",
+    fill: "#C0C6CB",
+    mask: "url(#b)"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M55.874 25H14.126a2 2 0 0 1-1.816-2.838L17 12h36l4.69 10.162A2 2 0 0 1 55.874 25z",
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M35 1C24 1 24 12 24 12h22S44.667 1 35 1",
+    fill: "#E5E8EA",
+    mask: "url(#b)"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M35 1C24 1 24 12 24 12h22S44.667 1 35 1z",
+    stroke: "#3F5463",
+    strokeWidth: "2",
+    mask: "url(#b)"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M36.667 6.551a2 2 0 1 1-4 .002 2 2 0 0 1 4-.002",
+    fill: "#3F5463",
+    mask: "url(#b)"
+  })));
+};
+
+var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(AlignmentList, _React$Component);
+
+  var _super = (0, _createSuper2.default)(AlignmentList);
+
+  function AlignmentList() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, AlignmentList);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.handleModalOpen = function () {
+      _this.props.openOutcomePicker();
+    };
+
+    _this.triggerButton = function () {
+      // eslint-disable-next-line react/no-find-dom-node
+      var r = _reactDom.default.findDOMNode(_this.triggerRoot);
+
+      return r.type === 'button' ? r : r.children[0];
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(AlignmentList, [{
+    key: "handleRemoveAlignment",
+    value: function handleRemoveAlignment(outcome, index) {
+      var _this$props = this.props,
+          removeAlignment = _this$props.removeAlignment,
+          alignedOutcomes = _this$props.alignedOutcomes,
+          onUpdate = _this$props.onUpdate;
+      var priorListItem = this["position".concat(index - 1)];
+      removeAlignment(outcome.id, onUpdate);
+      this.props.screenreaderNotification("\u0110\xE3 g\u1EE1 " + outcome.label + " m\u1EE5c c\u0103n ch\u1EC9nh");
+
+      if (priorListItem) {
+        priorListItem.focus();
+      } else if (alignedOutcomes.length > 0) {
+        // TBD - need to do something better here if first item is
+        // removed, just doing this for now so there's consistent behavior
+        var nextListItem = this["position".concat(index + 1)];
+
+        if (nextListItem) {
+          nextListItem.focus();
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(oldProps) {
+      var alignedOutcomes = this.props.alignedOutcomes;
+
+      if (oldProps.alignedOutcomes.length && !alignedOutcomes.length) {
+        this.triggerButton().focus();
+      }
+    }
+  }, {
+    key: "renderAddOutcomeButton",
+    value: function renderAddOutcomeButton() {
+      var _this2 = this;
+
+      return /*#__PURE__*/_react.default.createElement("li", {
+        className: styles.addOutcome
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        ref: function ref(d) {
+          _this2.triggerRoot = d;
+        } // eslint-disable-line immutable/no-mutation
+        ,
+        variant: "circle-primary",
+        size: "small",
+        onClick: function onClick() {
+          return _this2.handleModalOpen();
+        }
+      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconPlusLine, {
+        title: "C\u0103n ch\u1EC9nh k\u1EBFt qu\u1EA3 m\u1EDBi"
+      })));
+    }
+  }, {
+    key: "renderList",
+    value: function renderList() {
+      var _this3 = this;
+
+      var _this$props2 = this.props,
+          alignedOutcomes = _this$props2.alignedOutcomes,
+          _viewAlignment = _this$props2.viewAlignment,
+          closeAlignment = _this$props2.closeAlignment,
+          isOpen = _this$props2.isOpen,
+          artifactTypeName = _this$props2.artifactTypeName,
+          displayMasteryDescription = _this$props2.displayMasteryDescription,
+          displayMasteryPercentText = _this$props2.displayMasteryPercentText,
+          readOnly = _this$props2.readOnly,
+          scope = _this$props2.scope;
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", {
+        className: styles.list
+      }, alignedOutcomes.map(function (outcome, index) {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          key: outcome.id,
+          ref: function ref(o) {
+            _this3["position".concat(index)] = o;
+          } // eslint-disable-line immutable/no-mutation
+          ,
+          removeAlignment: function removeAlignment() {
+            return _this3.handleRemoveAlignment(outcome, index);
+          },
+          viewAlignment: function viewAlignment() {
+            return _viewAlignment(outcome.id);
+          },
+          closeAlignment: closeAlignment,
+          outcome: outcome,
+          isOpen: isOpen(outcome.id),
+          artifactTypeName: artifactTypeName,
+          displayMasteryDescription: displayMasteryDescription,
+          displayMasteryPercentText: displayMasteryPercentText,
+          readOnly: readOnly,
+          scope: scope
+        });
+      }), !readOnly && this.renderAddOutcomeButton()));
+    }
+  }, {
+    key: "renderEmpty",
+    value: function renderEmpty() {
+      var _this4 = this;
+
+      return !this.props.readOnly && /*#__PURE__*/_react.default.createElement(_uiBillboard.Billboard, {
+        ref: function ref(d) {
+          _this4.triggerRoot = d;
+        } // eslint-disable-line immutable/no-mutation
+        ,
+        heading: this.props.emptySetHeading,
+        message: "Duy\u1EC7t xem v\xE0 th\xEAm k\u1EBFt qu\u1EA3 b\u1EB1ng c\xE1ch nh\u1EA5p v\xE0o \u0111\xE2y.",
+        headingAs: "h3",
+        headingLevel: "h3",
+        size: "small",
+        hero: /*#__PURE__*/_react.default.createElement(Clipboard, null),
+        type: "button",
+        onClick: this.handleModalOpen
+      });
+    }
+  }, {
+    key: "renderBody",
+    value: function renderBody() {
+      var alignedOutcomes = this.props.alignedOutcomes;
+
+      if (alignedOutcomes && alignedOutcomes.length > 0) {
+        return this.renderList();
+      } else {
+        return this.renderEmpty();
+      }
+    }
+  }, {
+    key: "renderModal",
+    value: function renderModal() {
+      var _this$props3 = this.props,
+          OutcomePickerModal = _this$props3.addModal,
+          pickerProps = _this$props3.pickerProps,
+          onUpdate = _this$props3.onUpdate,
+          onModalOpen = _this$props3.onModalOpen,
+          onModalClose = _this$props3.onModalClose,
+          scope = _this$props3.scope,
+          artifactTypeName = _this$props3.artifactTypeName,
+          displayMasteryDescription = _this$props3.displayMasteryDescription,
+          displayMasteryPercentText = _this$props3.displayMasteryPercentText,
+          screenreaderNotification = _this$props3.screenreaderNotification,
+          liveRegion = _this$props3.liveRegion,
+          mountNode = _this$props3.mountNode;
+      return /*#__PURE__*/_react.default.createElement(OutcomePickerModal, Object.assign({
+        onModalClose: onModalClose,
+        onModalOpen: onModalOpen,
+        onUpdate: onUpdate,
+        trigger: this,
+        scope: scope,
+        artifactTypeName: artifactTypeName,
+        displayMasteryDescription: displayMasteryDescription,
+        displayMasteryPercentText: displayMasteryPercentText,
+        screenreaderNotification: screenreaderNotification,
+        liveRegion: liveRegion,
+        mountNode: mountNode
+      }, pickerProps));
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      if (this.triggerRoot) {
+        this.triggerButton().focus();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", null, this.renderBody(), this.renderModal());
+    }
+  }]);
+  AlignmentList.displayName = "AlignmentList";
+  return AlignmentList;
+}(_react.default.Component), _class2.propTypes = {
+  addModal: _propTypes.default.func.isRequired,
+  pickerType: _propTypes.default.string,
+  pickerProps: _propTypes.default.object,
+  alignedOutcomes: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired
+  })).isRequired,
+  emptySetHeading: _propTypes.default.string.isRequired,
+  readOnly: _propTypes.default.bool,
+  removeAlignment: _propTypes.default.func.isRequired,
+  onUpdate: _propTypes.default.func,
+  viewAlignment: _propTypes.default.func.isRequired,
+  closeAlignment: _propTypes.default.func.isRequired,
+  isOpen: _propTypes.default.func.isRequired,
+  openOutcomePicker: _propTypes.default.func.isRequired,
+  onModalOpen: _propTypes.default.func,
+  onModalClose: _propTypes.default.func,
+  scope: _propTypes.default.string.isRequired,
+  artifactTypeName: _propTypes.default.string,
+  displayMasteryDescription: _propTypes.default.bool,
+  displayMasteryPercentText: _propTypes.default.bool,
+  screenreaderNotification: _propTypes.default.func,
+  liveRegion: _index2.default.propTypes.liveRegion,
+  mountNode: _index2.default.propTypes.mountNode
+}, _class2.defaultProps = {
+  pickerType: 'dialog',
+  pickerProps: {},
+  onUpdate: null,
+  onModalOpen: null,
+  onModalClose: null,
+  readOnly: false,
+  artifactTypeName: null,
+  displayMasteryDescription: false,
+  displayMasteryPercentText: false,
+  screenreaderNotification: null,
+  liveRegion: null,
+  mountNode: null
+}, _temp)) || _class);
+var _default = AlignmentList;
+exports.default = _default;

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.noAlignedOutcomes = exports.alignedOutcomes = 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: 'AlignmentList'
+};
+exports.default = _default;
+
+var alignedOutcomes = function alignedOutcomes() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    alignedOutcomes: (0, _addonKnobs.object)('Outcomes', (0, _constants.defaultOutcomes)()),
+    emptySetHeading: "Align Institution outcomes to this question",
+    removeAlignment: function removeAlignment() {},
+    viewAlignment: function viewAlignment() {},
+    closeAlignment: function closeAlignment() {},
+    openOutcomePicker: function openOutcomePicker() {},
+    isOpen: function isOpen() {},
+    artifactTypeName: "Quiz",
+    displayMasteryDescription: true,
+    displayMasteryPercentText: true,
+    readOnly: (0, _addonKnobs.boolean)('Read Only', false),
+    scope: "",
+    addModal: function addModal() {
+      return null;
+    },
+    outcomePickerState: "closed",
+    pickerType: "dialog"
+  });
+};
+
+exports.alignedOutcomes = alignedOutcomes;
+
+var noAlignedOutcomes = function noAlignedOutcomes() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    alignedOutcomes: [],
+    emptySetHeading: (0, _addonKnobs.text)('Empty Message', 'Align Institution outcomes to this question'),
+    removeAlignment: function removeAlignment() {},
+    viewAlignment: function viewAlignment() {},
+    closeAlignment: function closeAlignment() {},
+    openOutcomePicker: function openOutcomePicker() {},
+    isOpen: function isOpen() {},
+    artifactTypeName: "Quiz",
+    displayMasteryDescription: true,
+    displayMasteryPercentText: true,
+    readOnly: (0, _addonKnobs.boolean)('Read Only', false),
+    scope: "",
+    addModal: function addModal() {
+      return null;
+    },
+    outcomePickerState: "closed",
+    pickerType: "dialog"
+  });
+};
+
+exports.noAlignedOutcomes = noAlignedOutcomes;