@instructure/quiz-core 17.19.2-rc.5 → 17.19.3-rc.2

package/lib/banks/components/BankEntry/theme.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      typography = _ref.typography,
+      borders = _ref.borders;
+  return {
+    contentBackgroundColor: colors.white,
+    entryRowMargin: spacing.small,
+    headerRowColor: colors.ash,
+    headerRowPadding: spacing.small,
+    headerTextFontSize: typography.fontSizeSmall,
+    leftHeaderMargin: spacing.small,
+    headerBackgroundColor: colors.porcelain,
+    headerColor: colors.licorice,
+    headerPaddingTopBottom: spacing.xSmall,
+    headerPaddingLeftRight: spacing.small,
+    footerPaddingBottom: spacing.xSmall,
+    footerPaddingTop: spacing.small,
+    rightHeaderPaddingLeft: spacing.xSmall,
+    rightFooterPaddingLeftRight: spacing.small,
+    entryEditBorderWidth: borders.widthSmall,
+    entryEditBorderColor: colors.tiara
+  };
+}

package/lib/banks/components/BankEntryRow/BankEntryRow.examples.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _immutable = require("immutable");
+
+var _BankEntry = _interopRequireDefault(require("../../../common/records/BankEntry.js"));
+
+var _Item = _interopRequireDefault(require("../../../common/records/Item.js"));
+
+var _default = {
+  propsValues: {
+    addEntryToQuiz: [null, Function.prototype],
+    isExpanded: [false, true]
+  },
+  getComponentProps: function getComponentProps(props) {
+    var bankEntry = new _BankEntry.default();
+    var item = new _Item.default();
+
+    bankEntry.getEntry = function () {
+      return item;
+    };
+
+    return {
+      bankEntry: bankEntry,
+      bankId: '1',
+      clearUi: Function.prototype,
+      createItem: Function.prototype,
+      createStimulus: Function.prototype,
+      navigateToBankEntry: Function.prototype,
+      openModal: Function.prototype,
+      removeBankEntry: Function.prototype,
+      screenreaderNotification: Function.prototype,
+      tagAssociations: (0, _immutable.fromJS)([{
+        id: '1',
+        tag_value: 'DOK-1'
+      }, {
+        id: '2',
+        tag_value: 'Difficulty 0'
+      }, {
+        id: '3',
+        tag_value: 'Question'
+      }]),
+      toggleExpanded: Function.prototype,
+      withConfirm: Function.prototype,
+      useBankTags: true
+    };
+  }
+};
+exports.default = _default;

package/lib/banks/components/BankEntryRow/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../common/react-redux.js");
+
+var _items = require("../../../building/api/items.js");
+
+var _stimuli = require("../../../building/api/stimuli.js");
+
+var _ui = require("../../../common/actions/ui.js");
+
+var modalActions = _interopRequireWildcard(require("../../../common/actions/modal.js"));
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var bankEntryApiActions = _interopRequireWildcard(require("../../api/bankEntries.js"));
+
+var _alerts = require("../../../common/actions/alerts.js");
+
+var _featureCheck = require("../../../common/util/featureCheck.js");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _this = void 0;
+
+var rowKey = function rowKey(props) {
+  return "BANK_ENTRY_".concat(props.bankEntry.get('id'), "_EXPANDED");
+};
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return {
+    activeQuizId: state.getIn(['quizzes', 'activeQuizId']),
+    isExpanded: !!state.getIn(['ui', rowKey(props)]),
+    position: state.getIn(['ui', _quizCommon.BUILD_TRAY_POSITION]),
+    stimulusId: state.getIn(['ui', _quizCommon.BUILD_TRAY_STIMULUS_ID]),
+    setEditButtonFocus: state.getIn(['ui', _quizCommon.SET_EDIT_BUTTON_FOCUS]),
+    tagAssociations: state.getIn(['tagAssociations', props.bankEntry.entry.get('schema'), props.bankEntry.entry.get('id')]),
+    useBankTags: (0, _featureCheck.featureOn)('item_bank_tagging')
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch, props) {
+  return {
+    clearUi: (0, _redux.bindActionCreators)(_ui.clear, dispatch),
+    createItem: (0, _redux.bindActionCreators)(_items.createItem, dispatch),
+    createStimulus: (0, _redux.bindActionCreators)(_stimuli.createStimulus, dispatch),
+    openModal: (0, _redux.bindActionCreators)(modalActions.openModal, dispatch),
+    removeBankEntry: (0, _redux.bindActionCreators)(bankEntryApiActions.removeBankEntry, dispatch),
+    screenreaderNotification: (0, _redux.bindActionCreators)(_alerts.screenreaderNotification, dispatch),
+    setUi: (0, _redux.bindActionCreators)(_ui.set, dispatch),
+    toggleExpanded: (0, _redux.bindActionCreators)(_ui.toggle.bind(_this, rowKey(props)), dispatch),
+    withConfirm: (0, _redux.bindActionCreators)(modalActions.withConfirm, dispatch)
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;

package/lib/banks/components/BankEntryRow/presenter.js

@@ -0,0 +1,453 @@
+"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.BankEntryRow = 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 _partial = _interopRequireDefault(require("lodash/partial"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _immutable = _interopRequireDefault(require("immutable"));
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiList = require("@instructure/ui-list");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _quizRce = require("@instructure/quiz-rce");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _quizInteractions = require("@instructure/quiz-interactions");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index = _interopRequireDefault(require("../CopyMoveBankEntryModal/index.js"));
+
+var _index2 = _interopRequireDefault(require("../../../common/components/shared/ExpandButton/index.js"));
+
+var _QuizEntry = _interopRequireDefault(require("../../../common/records/QuizEntry.js"));
+
+var _Overlay = _interopRequireDefault(require("../../../common/components/shared/overlay/Overlay.js"));
+
+var _index3 = _interopRequireDefault(require("../../../common/components/resources/item/ItemShow/index.js"));
+
+var _index4 = _interopRequireDefault(require("../../../common/components/resources/stimulus/StimulusShowInfo/index.js"));
+
+var _index5 = _interopRequireDefault(require("../../../common/components/shared/TagDisplay/index.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'eQXFj',
+  template: function template(theme) {
+    return "\n\n.eQXFj_IXXK{padding:".concat(theme.entryDetailPadding || 'inherit', "}\n\n.eQXFj_dlpV{align-items:flex-start;color:").concat(theme.headerRowColor || 'inherit', ";display:flex;flex-direction:row;justify-content:space-between}\n\n.eQXFj_exDh{display:inline-flex;position:relative;z-index:").concat(theme.buttonsZIndex || 'inherit', "}\n\n.eQXFj_bTHH{border-left:").concat(theme.expandButtonContainerBorderWidth || 'inherit', " solid ").concat(theme.expandButtonContainerBorderColor || 'inherit', "}\n\n.eQXFj_AHIw{display:block}\n\n.eQXFj_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}\n\n.eQXFj_ftIe{margin-bottom:").concat(theme.addButtonMargin || 'inherit', "}\n\n.eQXFj_fAhB{color:").concat(theme.headerTextColor || 'inherit', ";font-size:").concat(theme.headerTextFontSize || 'inherit', "}\n\n.eQXFj_cloC{font-size:").concat(theme.stemFontSize || 'inherit', ";line-height:").concat(theme.stemLineHeight || 'inherit', ";overflow-x:auto}\n\n.eQXFj_cloC p{margin:0}\n\n.eQXFj_cjWK{border-top:").concat(theme.footerBorderWidth || 'inherit', " solid ").concat(theme.footerBorderColor || 'inherit', ";font-size:").concat(theme.footerFontSize || 'inherit', ";padding:").concat(theme.footerPadding || 'inherit', "}");
+  },
+  'entryDetail': 'eQXFj_IXXK',
+  'headerRow': 'eQXFj_dlpV',
+  'buttons': 'eQXFj_exDh',
+  'expandButtonContainer': 'eQXFj_bTHH',
+  'deleteAlert': 'eQXFj_AHIw',
+  'deletePreface': 'eQXFj_eTBd',
+  'addButton': 'eQXFj_ftIe',
+  'headerText': 'eQXFj_fAhB',
+  'stem': 'eQXFj_cloC',
+  'footer': 'eQXFj_cjWK'
+};
+
+var _ref2 = /*#__PURE__*/_react.default.createElement("div", null);
+
+var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+  (0, _inherits2.default)(BankEntryRow, _withI18nSupport);
+
+  var _super = (0, _createSuper2.default)(BankEntryRow);
+
+  function BankEntryRow() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BankEntryRow);
+
+    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.incrementPosition = function () {
+      _this.props.setUi(_quizCommon.BUILD_TRAY_POSITION, _this.props.position + 1);
+    };
+
+    _this.deleteBankEntry = function () {
+      var confirmBody = /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        variant: "error",
+        padding: "0"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.deleteAlert
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.deletePreface
+      }, (0, _formatMessage.default)('Deleting this item:')), /*#__PURE__*/_react.default.createElement(_uiList.List, null, /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, _formatMessage.default.rich('will <0>NOT</0> remove it from any assessments', [function (_ref) {
+        var children = _ref.children;
+        return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          weight: "bold",
+          key: "0"
+        }, children);
+      }])), /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, (0, _formatMessage.default)('will lose its statistical link in reporting')), /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, (0, _formatMessage.default)('will remove access for all users with whom this bank has been shared')))));
+
+      _this.props.withConfirm((0, _partial.default)(_this.props.removeBankEntry, _this.props.bank.id, _this.props.bankEntry.id), {
+        title: (0, _formatMessage.default)('Delete Item'),
+        text: confirmBody,
+        continueText: (0, _formatMessage.default)('Delete'),
+        continueVariant: 'danger',
+        size: 'medium'
+      });
+    };
+
+    _this.addToQuiz = function () {
+      if (_this.props.activeQuizId) {
+        var newEntry = _QuizEntry.default.create({
+          entryId: _this.props.bankEntry.id,
+          entryType: 'BankEntry',
+          position: _this.props.position,
+          stimulusQuizEntryId: _this.props.stimulusId
+        });
+
+        _this.props.addEntryToQuiz(_this.props.activeQuizId, newEntry.entryId, newEntry.entryType, newEntry.getProperties(), false).then(function () {
+          _this.props.screenreaderNotification((0, _formatMessage.default)('Bank Entry was successfully added to the quiz'));
+        });
+
+        if (_this.props.position) _this.incrementPosition();
+      }
+    };
+
+    _this.openCopyMoveBankEntryModal = function () {
+      _this.props.openModal([_quizCommon.COPY_MOVE_BANK_ENTRY_MODAL, _this.props.bankEntry.entryType, _this.props.bankEntry.entry.toJS().id].join(':'), {
+        modalTrigger: _this.copyMoveBankEntryButton
+      });
+    };
+
+    _this.createEntryForBank = function () {
+      var createEntry = _this.isItemEntry() ? _this.props.createItem : _this.props.createStimulus;
+      return createEntry(_this.getEntry(), _this.props.bank.id, 'bank');
+    };
+
+    _this.storeCopyMoveBankEntryButtonRef = function (c) {
+      _this.copyMoveBankEntryButton = c;
+    };
+
+    _this.storeEditButtonRef = function (c) {
+      _this.editButton = c;
+    };
+
+    _this.renderTrashButton = function () {
+      var title = (0, _formatMessage.default)('Delete {type}', {
+        type: _this.type()
+      });
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "icon",
+        size: "medium",
+        onClick: _this.deleteBankEntry,
+        "data-automation": "sdk-delete-bank-entry-button",
+        icon: _uiIcons.IconTrashLine,
+        title: title
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, title));
+    };
+
+    _this.navigateToBankEntry = function () {
+      _this.props.setUi(_quizCommon.SET_EDIT_BUTTON_FOCUS, _this.props.bankEntry.id);
+
+      _this.props.navigateToBankEntry(_this.props.bankEntry.id, _this.props.bank.id);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(BankEntryRow, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.bankEntry.id === this.props.setEditButtonFocus) {
+        this.editButton.focus();
+        this.props.clearUi(_quizCommon.SET_EDIT_BUTTON_FOCUS);
+      }
+    }
+  }, {
+    key: "getEntry",
+    value: function getEntry() {
+      return this.props.bankEntry.getEntry();
+    }
+  }, {
+    key: "isItemEntry",
+    value: function isItemEntry() {
+      return this.props.bankEntry.entryType === 'Item';
+    }
+  }, {
+    key: "type",
+    value: function type() {
+      return this.isItemEntry() ? (0, _formatMessage.default)('Item') : (0, _formatMessage.default)('Stimulus');
+    }
+  }, {
+    key: "entryIdentifier",
+    value: function entryIdentifier() {
+      return this.isItemEntry() ? (0, _formatMessage.default)('Item { itemBody }', {
+        itemBody: (0, _quizInteractions.extractTextFromHtml)(this.getEntry().title)
+      }) : (0, _formatMessage.default)('Stimulus { title }', {
+        title: this.getEntry().title
+      });
+    }
+  }, {
+    key: "moveModalTitle",
+    value: function moveModalTitle() {
+      return (0, _formatMessage.default)('Copy / Move {type}', {
+        type: this.type()
+      });
+    }
+  }, {
+    key: "renderExpandButton",
+    value: function renderExpandButton() {
+      var type = this.type();
+      var title = this.props.isExpanded ? (0, _formatMessage.default)('Collapse {type} details', {
+        type: type
+      }) : (0, _formatMessage.default)('Expand {type} details', {
+        type: type
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.expandButtonContainer
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        onClick: this.props.toggleExpanded,
+        title: title,
+        isExpanded: this.props.isExpanded
+      }));
+    }
+  }, {
+    key: "renderAddButton",
+    value: function renderAddButton() {
+      if (this.props.addEntryToQuiz) {
+        var title = (0, _formatMessage.default)('Add {type} to this quiz', {
+          type: this.type()
+        });
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)(styles.buttons, styles.addButton)
+        }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+          variant: "circle-primary",
+          size: "small",
+          onClick: this.addToQuiz,
+          "data-automation": "sdk-add-bank-entry-button",
+          disabled: this.props.bankEntry.isStimulus && this.props.stimulusId !== null,
+          icon: _uiIcons.IconPlusLine,
+          title: title
+        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, title)));
+      } // This empty div is necessary for spacing
+
+
+      return _ref2;
+    }
+  }, {
+    key: "renderMoveButton",
+    value: function renderMoveButton() {
+      var title = this.moveModalTitle();
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        ref: this.storeCopyMoveBankEntryButtonRef,
+        variant: "icon",
+        size: "medium",
+        onClick: this.openCopyMoveBankEntryModal,
+        "data-automation": "sdk-copy-move-bank-entry-button",
+        icon: _uiIcons.IconCopyLine,
+        title: title
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, title));
+    }
+  }, {
+    key: "entryHeader",
+    value: function entryHeader() {
+      return this.isItemEntry() ? this.getEntry().getInteractionType().name : (0, _formatMessage.default)('Stimulus');
+    }
+  }, {
+    key: "renderHeader",
+    value: function renderHeader() {
+      var separator = ' | ';
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.headerRow
+      }, this.renderAddButton(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.buttons
+      }, this.props.bank.canEdit() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderEditButton(), this.renderMoveButton(), this.renderTrashButton()), this.renderExpandButton())), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.headerText
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "reset",
+        as: "h2"
+      }, this.entryHeader(), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, separator), this.entryIdentifier())));
+    }
+  }, {
+    key: "renderEntryCollapsed",
+    value: function renderEntryCollapsed() {
+      var itemOrStimulus = this.getEntry(); // render item's body as html
+      // or title plain text
+
+      if (itemOrStimulus.itemBody) {
+        return /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+          customStyles: styles.stem,
+          content: itemOrStimulus.itemBody
+        });
+      } else {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.stem
+        }, itemOrStimulus.title);
+      }
+    }
+  }, {
+    key: "renderEntryExpanded",
+    value: function renderEntryExpanded() {
+      var entry = this.getEntry();
+
+      if (this.isItemEntry()) {
+        return /*#__PURE__*/_react.default.createElement(_index3.default, {
+          entry: entry,
+          guid: this.props.bankEntry.id
+        });
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_index4.default, {
+          stimulus: entry
+        });
+      }
+    }
+  }, {
+    key: "renderEditButton",
+    value: function renderEditButton() {
+      var title = (0, _formatMessage.default)('Edit {type}', {
+        type: this.type()
+      });
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        ref: this.storeEditButtonRef,
+        variant: "icon",
+        size: "medium",
+        onClick: this.navigateToBankEntry,
+        "data-automation": "sdk-edit-bank-entry-button",
+        icon: _uiIcons.IconEditLine,
+        title: title
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, title));
+    }
+  }, {
+    key: "renderTags",
+    value: function renderTags() {
+      if (!this.props.useBankTags) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index5.default, {
+        tagAssociations: this.props.tagAssociations
+      });
+    }
+  }, {
+    key: "renderFooter",
+    value: function renderFooter() {
+      var lastUpdate = _formatMessage.default.rich('<0>Last Update</0> { updatedAt }', {
+        0: function _(_ref3) {
+          var children = _ref3.children;
+          return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+            key: "lastUpdate",
+            weight: "bold",
+            color: "primary"
+          }, children);
+        },
+        updatedAt: this.formatDatetimeMedium(this.props.bankEntry.get('updatedAt'))
+      });
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.footer
+      }, /*#__PURE__*/_react.default.createElement("span", null, lastUpdate), this.renderTags());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isExpanded = this.props.isExpanded;
+      return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
+        onClick: this.props.toggleExpanded,
+        tabIndex: "-1",
+        ariaLabel: this.entryIdentifier()
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        role: "group"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.entryDetail,
+        "data-automation": "sdk-bankEntryItem"
+      }, this.renderHeader(), isExpanded ? this.renderEntryExpanded() : this.renderEntryCollapsed()), isExpanded && this.renderFooter()), /*#__PURE__*/_react.default.createElement(_index.default, {
+        createEntry: this.createEntryForBank,
+        label: this.moveModalTitle(),
+        sourceBankId: this.props.bank.id,
+        sourceBankEntryId: this.props.bankEntry.id,
+        entryId: this.props.bankEntry.entry.get('id'),
+        entryType: this.props.bankEntry.entryType
+      }));
+    }
+  }]);
+  BankEntryRow.displayName = "BankEntryRow";
+  return BankEntryRow;
+}((0, _quizCommon.withI18nSupport)(_react.Component)), _class2.propTypes = {
+  activeQuizId: _propTypes.default.string,
+  addEntryToQuiz: _propTypes.default.func,
+  bankEntry: _reactImmutableProptypes.default.record.isRequired,
+  bank: _reactImmutableProptypes.default.record.isRequired,
+  clearUi: _propTypes.default.func.isRequired,
+  createItem: _propTypes.default.func.isRequired,
+  createStimulus: _propTypes.default.func.isRequired,
+  isExpanded: _propTypes.default.bool,
+  navigateToBankEntry: _propTypes.default.func.isRequired,
+  openModal: _propTypes.default.func.isRequired,
+  position: _propTypes.default.number,
+  removeBankEntry: _propTypes.default.func.isRequired,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  setEditButtonFocus: _propTypes.default.bool,
+  setUi: _propTypes.default.func.isRequired,
+  stimulusId: _propTypes.default.string,
+  tagAssociations: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.map),
+  useBankTags: _propTypes.default.bool.isRequired,
+  toggleExpanded: _propTypes.default.func.isRequired,
+  withConfirm: _propTypes.default.func.isRequired,
+  locale: _propTypes.default.string,
+  timezone: _propTypes.default.string
+}, _class2.defaultProps = {
+  activeQuizId: null,
+  addEntryToQuiz: null,
+  stimulusId: null,
+  isExpanded: false,
+  position: 0,
+  setEditButtonFocus: false,
+  tagAssociations: _immutable.default.List(),
+  locale: null,
+  timezone: null
+}, _class2.contextTypes = {
+  locale: _propTypes.default.string,
+  timezone: _propTypes.default.string
+}, _temp)) || _class);
+exports.BankEntryRow = BankEntryRow;
+var _default = BankEntryRow;
+exports.default = _default;

package/lib/banks/components/BankEntryRow/theme.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      borders = _ref.borders,
+      typography = _ref.typography;
+  return {
+    entryDetailPadding: spacing.small,
+    headerRowColor: colors.ash,
+    buttonsZIndex: '3333',
+    expandButtonContainerBorderWidth: borders.widthMedium,
+    expandButtonContainerBorderColor: colors.tiara,
+    addButtonMargin: spacing.small,
+    headerTextColor: colors.ash,
+    headerTextFontSize: typography.fontSizeXSmall,
+    stemFontSize: typography.fontSizeMedium,
+    stemLineHeight: typography.lineHeight,
+    footerPadding: spacing.medium,
+    footerBorderWidth: borders.widthSmall,
+    footerBorderColor: colors.tiara,
+    footerFontSize: typography.fontSizeXSmall,
+    deletePrefaceMargin: spacing.xxSmall
+  };
+}