@instructure/quiz-core 17.19.2 → 17.19.3-rc.0

package/lib/building/components/layout/header/BuildingButtons/presenter.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BuildingButtons = 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 = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiMenu = require("@instructure/ui-menu");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _index = _interopRequireDefault(require("../../../../../common/components/shared/PrintTrigger/index.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'exAHi',
+  template: function template(theme) {
+    return "\n\n.exAHi_cKjJ{color:".concat(theme.quizSavingColor || 'inherit', ";margin:").concat(theme.quizSavingMargin || 'inherit', "}\n\n.exAHi_dxna{align-items:center;display:flex;height:100%;margin-right:").concat(theme.buttonsHolderMargin || 'inherit', "}\n\n.exAHi_cLWx{font-size:").concat(theme.menuIconFontSize || 'inherit', ";margin-right:").concat(theme.menuIconMargin || 'inherit', ";vertical-align:middle}");
+  },
+  'quizSaving': 'exAHi_cKjJ',
+  'buttonsHolder': 'exAHi_dxna',
+  'menuIcon': 'exAHi_cLWx'
+};
+var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(BuildingButtons, _Component);
+
+  var _super = (0, _createSuper2.default)(BuildingButtons);
+
+  function BuildingButtons() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BuildingButtons);
+
+    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.openBanksTray = function () {
+      _this.props.setBanksTrayButtonRef(_this.banksTrayButton);
+
+      _this.props.openBanksTray();
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(BuildingButtons, [{
+    key: "renderSavingMessage",
+    value: function renderSavingMessage() {
+      if (this.props.quizSaving) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.quizSaving
+        }, (0, _formatMessage.default)('Saving...'));
+      }
+    }
+  }, {
+    key: "isBuildingPage",
+    value: function isBuildingPage() {
+      return 'building' === this.props.app;
+    }
+  }, {
+    key: "renderMenu",
+    value: function renderMenu(handlePrint) {
+      if (!this.isBuildingPage()) return;
+      var menuItems = [];
+      menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        key: "import",
+        disabled: !this.props.canImport,
+        onSelect: this.props.openModal,
+        "data-automation": "sdk-import-content-menuitem"
+      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconImportLine, {
+        className: styles.menuIcon,
+        "data-automation": "sdk-import-content-icon"
+      }), (0, _formatMessage.default)('Import Content')));
+
+      if (this.props.enableItemBanking) {
+        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+          key: "banks",
+          onSelect: this.props.navigateToBanks,
+          "data-automation": "sdk-manage-item-banks-menuitem"
+        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, {
+          className: styles.menuIcon,
+          "data-automation": "sdk-manage-item-banks-icon"
+        }), (0, _formatMessage.default)('Manage Item Banks')));
+      }
+
+      if (this.props.printingEnabled) {
+        {
+          /* eslint-disable react/jsx-no-bind */
+        }
+        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+          key: "printKey",
+          disabled: !this.props.hasQuestions || this.props.isEditing,
+          onSelect: function onSelect() {
+            return handlePrint(_quizCommon.PRINT_CURRENT_PAGE, true);
+          },
+          "data-automation": "sdk-print-key-menuitem"
+        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconPrinterLine, {
+          className: styles.menuIcon,
+          "data-automation": "sdk-print-icon"
+        }), (0, _formatMessage.default)('Print Key (With Answers)')));
+        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+          key: "printBlank",
+          disabled: !this.props.hasQuestions || this.props.isEditing,
+          onSelect: function onSelect() {
+            return handlePrint(_quizCommon.PRINT_BLANK, true);
+          },
+          "data-automation": "sdk-print-blank-menuitem"
+        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconPrinterLine, {
+          className: styles.menuIcon,
+          "data-automation": "sdk-print-blank-icon"
+        }), (0, _formatMessage.default)('Print Blank Quiz')));
+        {
+          /* eslint-enable react/jsx-no-bind */
+        }
+      }
+
+      if (menuItems.length < 1) return;
+      return /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
+        trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+          variant: "icon",
+          icon: _uiIcons.IconMoreSolid,
+          "data-automation": "sdk-more-quiz-actions-button"
+        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('More Quiz Actions')))
+      }, menuItems);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.buttonsHolder
+      }, this.renderSavingMessage(), /*#__PURE__*/_react.default.createElement(_index.default, {
+        render: function render(handlePrint) {
+          return _this2.renderMenu(handlePrint);
+        },
+        navigateToPreviewPrint: this.props.navigateToPreviewPrint
+      }));
+    }
+  }]);
+  BuildingButtons.displayName = "BuildingButtons";
+  return BuildingButtons;
+}(_react.Component), _class2.propTypes = {
+  app: _propTypes.default.string,
+  canImport: _propTypes.default.bool.isRequired,
+  enableItemBanking: _propTypes.default.bool,
+  hasQuestions: _propTypes.default.bool.isRequired,
+  isEditing: _propTypes.default.bool.isRequired,
+  navigateToBanks: _propTypes.default.func.isRequired,
+  navigateToPreviewPrint: _propTypes.default.func.isRequired,
+  openBanksTray: _propTypes.default.func.isRequired,
+  openModal: _propTypes.default.func.isRequired,
+  printingEnabled: _propTypes.default.bool.isRequired,
+  quizSaving: _propTypes.default.bool,
+  setBanksTrayButtonRef: _propTypes.default.func.isRequired
+}, _class2.defaultProps = {
+  quizSaving: false,
+  app: null,
+  enableItemBanking: true
+}, _temp)) || _class);
+exports.BuildingButtons = BuildingButtons;
+var _default = BuildingButtons;
+exports.default = _default;

package/lib/building/components/layout/header/BuildingButtons/theme.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      spacing = _ref.spacing,
+      typography = _ref.typography;
+  return {
+    quizSavingColor: colors.lightGray,
+    quizSavingMargin: spacing.large,
+    buttonsHolderMargin: spacing.xLarge,
+    menuIconMargin: spacing.xSmall,
+    menuIconFontSize: typography.fontSizeLarge
+  };
+}

package/lib/building/components/layout/header/SDKBuildingButtons/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SDKBuildingButtons = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRedux = require("../../../../../common/react-redux.js");
+
+var _reduxStore = _interopRequireDefault(require("../../../../../reduxStore.js"));
+
+var _index = _interopRequireDefault(require("../BuildingButtons/index.js"));
+
+var SDKBuildingButtons = function SDKBuildingButtons(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+    store: _reduxStore.default
+  }, /*#__PURE__*/_react.default.createElement(_index.default, props));
+};
+
+exports.SDKBuildingButtons = SDKBuildingButtons;
+SDKBuildingButtons.displayName = 'SDKBuildingButtons';
+var _default = SDKBuildingButtons;
+exports.default = _default;

package/lib/building/components/resources/ActionButtons/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ActionButtons = void 0;
+
+var _immutable = require("immutable");
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../../common/react-redux.js");
+
+var _presenter = require("./presenter.js");
+
+var _disableDraggingOverride = _interopRequireDefault(require("../../../../common/components/shared/functionality/disableDraggingOverride.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _featureCheck = require("../../../../common/util/featureCheck.js");
+
+function editingAddContentPopover(state) {
+  return state.get('editing', (0, _immutable.Map)()).some(function (isEditing, componentKey) {
+    return componentKey.includes(_quizCommon.ADD_CONTENT_POPOVER_KEY) && isEditing;
+  });
+}
+
+function mapStateToProps(state) {
+  return {
+    editingAddContentPopover: editingAddContentPopover(state),
+    questionCopyEnabled: (0, _featureCheck.featureOn)('question_copy')
+  };
+}
+
+var ActionButtons = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps), _disableDraggingOverride.default)(_presenter.ActionButtons);
+exports.ActionButtons = ActionButtons;
+var _default = ActionButtons;
+exports.default = _default;

package/lib/building/components/resources/ActionButtons/presenter.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ActionButtons = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../../../common/components/shared/drag_and_drop/DragHandle/index.js"));
+
+var _makeScrollable = _interopRequireDefault(require("../../../../common/components/shared/functionality/makeScrollable.js"));
+
+var _noop = _interopRequireDefault(require("../../../../common/util/noop.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fBJVH',
+  template: function template(theme) {
+    return "\n\n.fBJVH_exDh{color:".concat(theme.buttonsColor || 'inherit', ";display:inline-flex;flex:0 0 auto;font-size:1.1rem;padding:0 ").concat(theme.buttonsPadding || 'inherit', ";text-align:right;z-index:").concat(theme.buttonsZIndex || 'inherit', "}\n\n[dir=ltr] .fBJVH_exDh,[dir=rtl] .fBJVH_exDh{text-align:right}\n\n.fBJVH_fwKS.fBJVH_bBLs{display:none}\n\n@media print{.fBJVH_exDh{display:none}}");
+  },
+  'buttons': 'fBJVH_exDh',
+  'edit': 'fBJVH_fwKS',
+  'hide': 'fBJVH_bBLs'
+};
+var ScrollTargetButton = (0, _makeScrollable.default)(_uiButtons.Button);
+var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ActionButtons, _Component);
+
+  var _super = (0, _createSuper2.default)(ActionButtons);
+
+  function ActionButtons() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ActionButtons);
+
+    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.editButton = null;
+
+    _this.connectDragSource = function (dragHandle) {
+      if (_this.props.shouldDisableDragHandle) {
+        return dragHandle;
+      }
+
+      return _this.props.connectDragSource(dragHandle);
+    };
+
+    _this.onButtonFocus = function (e) {
+      e.stopPropagation();
+    };
+
+    _this.switchOnEditing = function () {
+      _this.props.switchOnEditing();
+    };
+
+    _this.setEditRef = function (node) {
+      _this.editButton = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ActionButtons, [{
+    key: "shouldFocusOnMount",
+    value: function shouldFocusOnMount() {
+      return this.props.shouldFocusOnMount && !this.props.editingAddContentPopover;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      if (this.shouldFocusOnMount() && this.editButton) {
+        // use setTimeout to break away from RCE destruction that loses focus
+        setTimeout(function () {
+          _this2.editButton && _this2.editButton.getWrappedInstance().setFocus();
+        }, 50);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classnames;
+
+      var editClasses = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.edit, true), (0, _defineProperty2.default)(_classnames, styles.hide, !this.props.shouldRenderEdit), _classnames));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        tabIndex: "-1",
+        onFocus: this.onButtonFocus,
+        className: styles.buttons
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: editClasses
+      }, /*#__PURE__*/_react.default.createElement(ScrollTargetButton, {
+        as: "div",
+        onClick: this.switchOnEditing,
+        scrollKey: this.props.scrollKey,
+        variant: "icon",
+        icon: _uiIcons.IconEditLine,
+        size: "small",
+        "data-automation": "sdk-edit-question-button",
+        shouldFocusOnMount: this.shouldFocusOnMount(),
+        ref: this.setEditRef
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.EDIT)))), this.props.questionCopyEnabled && this.props.onCopy && /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        as: "div",
+        onClick: this.props.onCopy,
+        disabled: this.props.shouldDisableCopy,
+        variant: "icon",
+        icon: _uiIcons.IconDuplicateLine,
+        size: "small",
+        "data-automation": "sdk-copy-question-button"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.COPY))), this.connectDragSource( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+        displayPosition: this.props.displayPosition,
+        quizEntry: this.props.quizEntry,
+        quizEntries: this.props.quizEntries,
+        disabled: this.props.shouldDisableDragHandle
+      }))), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        as: "div",
+        onClick: this.props.onDelete,
+        disabled: this.props.shouldDisableDeleteButton,
+        variant: "icon",
+        icon: _uiIcons.IconTrashLine,
+        size: "small",
+        "data-automation": "sdk-delete-question-button"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.REMOVE))));
+    }
+  }]);
+  ActionButtons.displayName = "ActionButtons";
+  return ActionButtons;
+}(_react.Component), _class2.propTypes = {
+  connectDragSource: _propTypes.default.func.isRequired,
+  displayPosition: _propTypes.default.number.isRequired,
+  editingAddContentPopover: _propTypes.default.bool.isRequired,
+  onCopy: _propTypes.default.func,
+  onDelete: _propTypes.default.func.isRequired,
+  questionCopyEnabled: _propTypes.default.bool.isRequired,
+  quizEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
+  quizEntry: _reactImmutableProptypes.default.record.isRequired,
+  scrollKey: _propTypes.default.string,
+  shouldDisableCopy: _propTypes.default.bool,
+  shouldDisableDragHandle: _propTypes.default.bool,
+  shouldDisableDeleteButton: _propTypes.default.bool,
+  shouldRenderEdit: _propTypes.default.bool,
+  switchOnEditing: _propTypes.default.func,
+  shouldFocusOnMount: _propTypes.default.bool
+}, _class2.defaultProps = {
+  onCopy: null,
+  scrollKey: void 0,
+  shouldDisableCopy: false,
+  shouldDisableDragHandle: false,
+  shouldDisableDeleteButton: false,
+  shouldRenderDelete: true,
+  shouldRenderEdit: true,
+  switchOnEditing: _noop.default,
+  shouldFocusOnMount: false
+}, _temp)) || _class);
+exports.ActionButtons = ActionButtons;
+var _default = ActionButtons;
+exports.default = _default;

package/lib/building/components/resources/ActionButtons/theme.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors;
+  return {
+    buttonsZIndex: '3333',
+    buttonsColor: colors.oxford,
+    buttonsPadding: spacing.xSmall
+  };
+}

package/lib/building/components/resources/AddToBankOptions/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AddToBankOptions = 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 = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'dYFmJ',
+  template: function template(theme) {
+    return "\n\n.dYFmJ_dNGs{background-color:".concat(theme.addToBankBackgroundColor || 'inherit', ";border:1px dashed ").concat(theme.addToBankBorderColor || 'inherit', "}");
+  },
+  'addToBank': 'dYFmJ_dNGs'
+};
+var AddToBankOptions = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AddToBankOptions, _Component);
+
+  var _super = (0, _createSuper2.default)(AddToBankOptions);
+
+  function AddToBankOptions() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, AddToBankOptions);
+
+    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.openAddToBankModal = function () {
+      var displayPosition = _this.props.displayPosition;
+
+      if (_this.props.isValid) {
+        _this.props.openModal([_quizCommon.ADD_TO_BANK_MODAL, _this.props.entryType, _this.props.guid].join(':'), {
+          modalTrigger: _this.addToBankLink
+        });
+      } else {
+        var msg = (0, _formatMessage.default)('{entryType} {displayPosition, number} cannot be saved due to invalid input data.', {
+          entryType: _this.props.entryType,
+          displayPosition: displayPosition
+        });
+
+        _this.props.screenreaderNotification(msg);
+
+        _this.props.showError(_this.props.guid);
+      }
+    };
+
+    _this.storeAddToBankLinkRef = function (c) {
+      _this.addToBankLink = c;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(AddToBankOptions, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        className: styles.addToBank
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "link",
+        ref: this.storeAddToBankLinkRef,
+        onClick: this.openAddToBankModal,
+        "data-automation": "sdk-add-to-bank-link",
+        fluidWidth: true
+      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        textAlign: "center",
+        padding: "xx-small"
+      }, (0, _formatMessage.default)('Add to Bank')))));
+    }
+  }]);
+  AddToBankOptions.displayName = "AddToBankOptions";
+  return AddToBankOptions;
+}(_react.Component), _class2.propTypes = {
+  displayPosition: _propTypes.default.number.isRequired,
+  entryType: _propTypes.default.string.isRequired,
+  guid: _propTypes.default.string.isRequired,
+  isValid: _propTypes.default.bool.isRequired,
+  openModal: _propTypes.default.func.isRequired,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  showError: _propTypes.default.func.isRequired
+}, _temp)) || _class);
+exports.AddToBankOptions = AddToBankOptions;
+var _default = AddToBankOptions;
+exports.default = _default;

package/lib/building/components/resources/AddToBankOptions/theme.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors;
+  return {
+    addToBankBackgroundColor: colors.porcelain,
+    addToBankBorderColor: colors.oxford
+  };
+}

package/lib/building/components/resources/BanksTray/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BanksTray = void 0;
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _reactRedux = require("../../../../common/react-redux.js");
+
+var _ui = require("../../../../common/actions/ui.js");
+
+var _presenter = require("./presenter.js");
+
+function mapStateToProps(state) {
+  return {
+    activeBankId: state.getIn(['ui', 'activeBankId']),
+    activeBankEntryId: state.getIn(['ui', 'activeBankEntryId']),
+    trayOpen: !!state.getIn(['ui', _quizCommon.BUILD_TRAY_OPEN]),
+    trayAlertOpen: !!state.getIn(['ui', _quizCommon.TRAY_ALERT_OPEN]),
+    trayTrigger: state.getIn(['ui', _quizCommon.BUILD_TRAY_BUTTON_REF])
+  };
+}
+
+var BanksTray = (0, _reactRedux.connect)(mapStateToProps, {
+  newActiveBankEntry: _ui.newActiveBankEntry,
+  newActiveBank: _ui.newActiveBank,
+  clear: _ui.clear,
+  setUI: _ui.set
+})(_presenter.BanksTray);
+exports.BanksTray = BanksTray;
+var _default = BanksTray;
+exports.default = _default;