@instructure/quiz-core 20.11.3-rc.2 → 20.11.3-rc.20

package/es/banks/components/Bank/presenter.js

@@ -15,7 +15,7 @@ import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
-import { IconPlusLine } from '@instructure/ui-icons';
+import { IconMoreSolid, IconPlusLine } from '@instructure/ui-icons';
 import { BreadcrumbLink } from '@instructure/ui-breadcrumb';
 import { Button } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
@@ -38,6 +38,9 @@ import NavWrapper from "../NavWrapper/index.js";
 import { ADD_BANK_ENTRY_MODAL, BANKS_BANK_ENTRY_PAGINATION, CAN_EDIT, REMOVED_ACCESS, READ_ONLY } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconMoreSolid, null);
+
 export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Bank, _Component);
 
@@ -67,7 +70,10 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     _this.renderHeaderMenu = function () {
       if (!_this.props.isCompact) {
         return jsx(HeaderMenu, {
-          bank: _this.props.bank
+          bank: _this.props.bank,
+          iceTopNavBarEnabled: _this.props.iceTopNavBarEnabled,
+          id: "BankMenu",
+          renderIcon: _ref
         });
       }
     };
@@ -92,7 +98,7 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     };
 
     _this.unshareBankWithCourse = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(sharedBank) {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(sharedBank) {
         var _this$props, updateSharedBankPermission, bankId, getSharedBank, scope;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -120,7 +126,7 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       }));
 
       return function (_x) {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }();
 
@@ -175,8 +181,8 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       }, _this.renderNewBankEntryButton());
     };
 
-    _this.announceResults = function (_ref2) {
-      var totalPages = _ref2.totalPages;
+    _this.announceResults = function (_ref3) {
+      var totalPages = _ref3.totalPages;
       var message = t("{\n      count, plural,\n         =0 {No search results found}\n        one {Displaying one page of results}\n      other {Displaying # pages of results}\n    }", {
         count: totalPages
       }); // Audibly announce when search results are ready.

package/es/banks/components/HeaderMenu/presenter.js

@@ -9,8 +9,11 @@ var _dec, _class, _class2, _temp;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { View } from '@instructure/ui-view';
 import { Menu } from '@instructure/ui-menu';
 import { IconButton } from '@instructure/ui-buttons';
+import { TopNavBar } from '@instructure/ui-top-nav-bar';
+import { Drilldown } from '@instructure/ui-drilldown';
 import { IconMoreSolid, IconImportLine } from '@instructure/ui-icons';
 import { withStyle, jsx } from '@instructure/emotion';
 import QTIImportModal from "../../../building/components/QTIImportModal/index.js";
@@ -18,6 +21,11 @@ import { PARENT_TYPE_BANK } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
+
+var _ref = jsx(IconImportLine, {
+  "data-automation": "sdk-headermenu-import-content"
+});
+
 export var HeaderMenu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(HeaderMenu, _Component);
 
@@ -32,6 +40,28 @@ export var HeaderMenu = (_dec = withStyle(generateStyle, generateComponentTheme)
   _createClass(HeaderMenu, [{
     key: "renderMenu",
     value: function renderMenu() {
+      if (this.props.iceTopNavBarEnabled) {
+        return jsx(TopNavBar.Item, {
+          id: this.props.id,
+          variant: "icon",
+          renderIcon: this.props.renderIcon,
+          showSubmenuChevron: false,
+          renderSubmenu: jsx(Drilldown, {
+            rootPageId: "root"
+          }, jsx(Drilldown.Page, {
+            id: "root"
+          }, jsx(Drilldown.Option, {
+            id: "import",
+            key: "import",
+            disabled: !this.props.bank.canImport(),
+            onOptionClick: this.props.openImportModal
+          }, _ref, jsx(View, {
+            as: "span",
+            margin: "0 0 0 x-small"
+          }, t('Import Content')))))
+        }, t('More Item Banking Actions'));
+      }
+
       return jsx(Menu, {
         trigger: jsx(IconButton, {
           renderIcon: IconMoreSolid,
@@ -52,7 +82,9 @@ export var HeaderMenu = (_dec = withStyle(generateStyle, generateComponentTheme)
     key: "render",
     value: function render() {
       var bank = this.props.bank;
-      return jsx("div", null, this.renderMenu(), jsx(QTIImportModal, {
+      return jsx("div", {
+        css: this.props.styles.container
+      }, this.renderMenu(), jsx(QTIImportModal, {
         parentId: bank.id,
         parentType: PARENT_TYPE_BANK,
         qtiImport: bank.getLatestImport(),
@@ -66,7 +98,14 @@ export var HeaderMenu = (_dec = withStyle(generateStyle, generateComponentTheme)
 }(Component), _class2.propTypes = {
   openImportModal: PropTypes.func.isRequired,
   bank: ImmutablePropTypes.record.isRequired,
+  iceTopNavBarEnabled: PropTypes.bool,
+  id: PropTypes.string,
+  renderIcon: PropTypes.element,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: PropTypes.object
+}, _class2.defaultProps = {
+  iceTopNavBarEnabled: false,
+  id: 'BankMenu',
+  renderIcon: jsx(IconMoreSolid, null)
 }, _temp)) || _class);
 export default HeaderMenu;

package/es/banks/components/HeaderMenu/styles.js

@@ -4,6 +4,9 @@ var generateStyle = function generateStyle(componentTheme) {
       verticalAlign: 'middle',
       marginRight: componentTheme.menuIconMargin,
       fontSize: componentTheme.menuIconFontSize
+    },
+    container: {
+      height: '100%'
     }
   };
 };

package/es/banks/components/NavWrapper/presenter.js

@@ -73,12 +73,15 @@ var NavWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
       if (!closeTray && returnToUrl) {
         return jsx(ReturnButton, {
           returnToUrl: returnToUrl,
+          id: "ReturnButton",
+          key: "ReturnButton",
           iceTopNavBarEnabled: iceTopNavBarEnabled
         });
       } else if (navigateToBuild) {
         if (iceTopNavBarEnabled) {
           return jsx(SecondaryNavBarButton, {
             id: "ReturnButton",
+            key: "ReturnButton",
             variant: "button",
             onClick: navigateToBuild
           }, t('Return'));
@@ -105,12 +108,14 @@ var NavWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
     key: "render",
     value: function render() {
       if (this.props.iceTopNavBarEnabled) {
+        var actionItems = [this.renderReturnButton()];
+        !this.props.isCompact && actionItems.push(this.props.renderHeaderMenu());
         return jsx(NavBar, {
           menuItems: [{
             path: this.props.menuItemPath,
             text: 'Item Banks'
           }],
-          actionItems: [this.renderReturnButton()]
+          actionItems: actionItems
         });
       }
 

package/es/banks/components/SharingModal/presenter.js

@@ -615,7 +615,7 @@ export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComp
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), jsx(ModalBody, null, !subAccountBankSharingEnabled && this.renderRootAccountSharing(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), jsx(ModalFooter, null, this.renderFooter()));
+      })), jsx(ModalBody, null, !subAccountBankSharingEnabled && this.renderRootAccountSharing(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size >= 0 ? this.renderEntitiesSection() : _ref7), jsx(ModalFooter, null, this.renderFooter()));
     }
   }]);
 

package/es/building/components/resources/quizEntry/QuizEntry/index.js

@@ -14,6 +14,7 @@ import { DropTargetCreator } from "../../../../../common/components/shared/drag_
 import { QuizEntry as QuizEntryPresenter } from "./presenter.js";
 import { SHOULD_CLONE_ITEM, QUIZ_ENTRY_GUID_SUFFIX, QUIZ_ENTRY_REF } from '@instructure/quiz-common';
 import { getActiveQuiz } from "../../../../../common/selectors/quizzes.js";
+import quizEntryPresenterWrapper from "./quizEntryPresenterWrapper.js";
 export var mapStateToProps = function mapStateToProps(state, props) {
   var activeQuiz = getActiveQuiz(state);
   var quizId = activeQuiz.id;
@@ -67,5 +68,5 @@ var dispatchToProps = {
   setUi: set,
   showError: showError
 };
-export var QuizEntry = compose(connect(mapStateToProps, dispatchToProps), makeEditable, DropTargetCreator(QUIZ_ENTRY_REF))(QuizEntryPresenter);
+export var QuizEntry = compose(connect(mapStateToProps, dispatchToProps), makeEditable, DropTargetCreator(QUIZ_ENTRY_REF))(quizEntryPresenterWrapper(QuizEntryPresenter));
 export default QuizEntry;

package/es/building/components/resources/quizEntry/QuizEntry/presenter.js

@@ -7,13 +7,14 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import pick from 'lodash/pick';
 import partial from 'lodash/partial';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import WarningWrapper from "../../../../../common/components/resources/WarningWrapper/index.js";
 import { propsForItemBankEntryEditPrompt, propsForStimulusBankEntryEditPrompt, propsForBankEntryUnauthorizedEdit, propsForItemVersioningWrapper, propsForBankEntryVersioningWrapper } from "../../../../../common/util/warningHelpers.js";
@@ -30,17 +31,9 @@ import { BUILD_TRAY_OPEN, PARENT_TYPE_QUIZ, REGRADE_MODAL, SHOULD_CLONE_ITEM } f
 import QuizEntryShow from "../QuizEntryShow/index.js";
 import QuizEntryEdit from "../QuizEntryEdit/index.js";
 import Stimulus from "../../../../../common/components/resources/stimulus/Stimulus/index.js";
-var styles = {
-  componentId: 'erzHq',
-  template: function template(theme) {
-    return "\n\n.erzHq_cjWK{border-top:".concat(theme.footerBorderWidth || 'inherit', " solid ").concat(theme.footerBorderColor || 'inherit', ";font-size:").concat(theme.footerFontSize || 'inherit', ";overflow:auto;padding:").concat(theme.footerPadding || 'inherit', "}\n\n.erzHq_fpkp{display:none}\n\n@media print{.erzHq_fpkp{display:inherit}.erzHq_dcyh{display:none}}");
-  },
-  'footer': 'erzHq_cjWK',
-  'sampleItems': 'erzHq_fpkp',
-  'bankItem': 'erzHq_dcyh'
-};
-import theme from "./theme.js";
-export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var QuizEntry = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntry, _Component);
 
   var _super = _createSuper(QuizEntry);
@@ -67,7 +60,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     };
 
     _this.renderItemBankingOptions = function () {
-      return /*#__PURE__*/React.createElement(AddToBankOptions, {
+      return jsx(AddToBankOptions, {
         displayPosition: _this.props.displayPosition,
         entryType: _this.props.quizEntry.entryType,
         guid: _this.props.guid,
@@ -99,10 +92,10 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         interactionTypeName: entryMutable.interactionType.name
       });
 
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: index,
-        className: styles.sampleItems
-      }, /*#__PURE__*/React.createElement(QuizEntryShow, overrideProps, /*#__PURE__*/React.createElement(ItemShow, _this.propsForItem(item))));
+        css: _this.props.styles.sampleItems
+      }, jsx(QuizEntryShow, overrideProps, jsx(ItemShow, _this.propsForItem(item))));
     };
 
     _this.bankEntryWarningWrapperProps = function () {
@@ -196,7 +189,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var quizEntryProps = this.quizEntryProps();
       var propsForWrapperFunc = quizEntry.isArchivedBankEntry ? propsForBankEntryVersioningWrapper : propsForItemVersioningWrapper;
       var propsForItemVersioning = propsForWrapperFunc(entry.isImmutable() || quizEntry.isArchivedBankEntry, shouldClone, partial(this.props.setUi, SHOULD_CLONE_ITEM), this.props.switchOffEditing, isEditing, quizEntry.isArchivedBankEntry ? 'info' : 'warning');
-      return /*#__PURE__*/React.createElement(QuizEntryComponent, quizEntryProps, /*#__PURE__*/React.createElement(WarningWrapper, propsForItemVersioning, /*#__PURE__*/React.createElement(ItemComponent, itemProps)));
+      return jsx(QuizEntryComponent, quizEntryProps, jsx(WarningWrapper, propsForItemVersioning, jsx(ItemComponent, itemProps)));
     }
   }, {
     key: "renderBank",
@@ -210,9 +203,9 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         name: bank.title
       };
       var sampleItems = this.props.quizEntry.sampleItems;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.bankItem
-      }, /*#__PURE__*/React.createElement(QuizEntryComponent, Object.assign({}, this.props, bankProps), /*#__PURE__*/React.createElement(QuizEntryBankComponent, Object.assign({}, this.props, bankProps)))), sampleItems.map(this.renderPrintableItemBankSample));
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.bankItem
+      }, jsx(QuizEntryComponent, Object.assign({}, this.props, bankProps), jsx(QuizEntryBankComponent, Object.assign({}, this.props, bankProps)))), sampleItems.map(this.renderPrintableItemBankSample));
     }
   }, {
     key: "isOverridable",
@@ -243,9 +236,9 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var itemProps = this.propsForItem();
       var mergedItem = this.isEditing() ? this.props.workingQuizEntry.getItem() : itemProps.entry;
       var ItemComponent = this.isOverriding() ? ItemOverride : ItemShow;
-      return /*#__PURE__*/React.createElement(QuizEntryComponent, quizEntryProps, /*#__PURE__*/React.createElement(WarningWrapper, Object.assign({}, bankEntryWarningWrapperProps, {
+      return jsx(QuizEntryComponent, quizEntryProps, jsx(WarningWrapper, Object.assign({}, bankEntryWarningWrapperProps, {
         disableChildren: this.isEditing() && !this.isOverridable()
-      }), /*#__PURE__*/React.createElement(ItemComponent, Object.assign({}, itemProps, {
+      }), jsx(ItemComponent, Object.assign({}, itemProps, {
         entry: mergedItem,
         quizEntry: this.props.quizEntry
       }))), this.renderFooter());
@@ -253,7 +246,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   }, {
     key: "renderStimulus",
     value: function renderStimulus(bankEntryWarningWrapperProps) {
-      return /*#__PURE__*/React.createElement(Stimulus, {
+      return jsx(Stimulus, {
         bankEntryWarningWrapperProps: bankEntryWarningWrapperProps,
         childEntries: this.props.childEntries,
         displayPosition: this.props.displayPosition,
@@ -281,7 +274,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   }, {
     key: "renderTags",
     value: function renderTags() {
-      return /*#__PURE__*/React.createElement(TagDisplay, {
+      return jsx(TagDisplay, {
         tagAssociations: this.props.tagAssociations
       });
     }
@@ -297,8 +290,8 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.footer
+      return jsx("div", {
+        css: this.props.styles.footer
       }, this.renderTags());
     }
   }, {
@@ -327,7 +320,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   }, {
     key: "render",
     value: function render() {
-      return this.props.connectDropTarget( /*#__PURE__*/React.createElement("div", {
+      return this.props.connectDropTarget(jsx("div", {
         tabIndex: "-1"
       }, this.renderQuizEntryByType()));
     }
@@ -378,7 +371,8 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     type: PropTypes.string,
     text: PropTypes.string
   }))),
-  stimulusOrientation: PropTypes.string
+  stimulusOrientation: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   childEntries: List(),
   draggingAboveHalf: false,

package/es/building/components/resources/quizEntry/QuizEntry/quizEntryPresenterWrapper.js

@@ -0,0 +1,39 @@
+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";
+import React from 'react';
+
+var isClassComponent = function isClassComponent(Component) {
+  return !!(typeof Component === 'function' && Component.prototype && Component.prototype.isReactComponent);
+};
+
+var quizEntryPresenterWrapper = function quizEntryPresenterWrapper(Component) {
+  if (isClassComponent(Component)) {
+    return Component;
+  }
+
+  return /*#__PURE__*/function (_React$Component) {
+    _inherits(ClassComponentWrapper, _React$Component);
+
+    var _super = _createSuper(ClassComponentWrapper);
+
+    function ClassComponentWrapper() {
+      _classCallCheck(this, ClassComponentWrapper);
+
+      return _super.apply(this, arguments);
+    }
+
+    _createClass(ClassComponentWrapper, [{
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(Component, this.props);
+      }
+    }]);
+
+    ClassComponentWrapper.displayName = "ClassComponentWrapper";
+    return ClassComponentWrapper;
+  }(React.Component);
+};
+
+export default quizEntryPresenterWrapper;

package/es/building/components/resources/quizEntry/QuizEntry/styles.js

@@ -0,0 +1,23 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mp = '@media print';
+  return {
+    footer: {
+      overflow: 'auto',
+      padding: componentTheme.footerPadding,
+      borderTop: "".concat(componentTheme.footerBorderWidth, " solid ").concat(componentTheme.footerBorderColor),
+      fontSize: componentTheme.footerFontSize
+    },
+    sampleItems: _defineProperty({
+      display: 'none'
+    }, mp, {
+      display: 'inherit'
+    }),
+    bankItem: _defineProperty({}, mp, {
+      display: 'none'
+    })
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quizEntry/QuizEntry/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       borders = _ref.borders,
@@ -9,4 +9,6 @@ export default function generator(_ref) {
     footerBorderColor: colors.tiara,
     footerFontSize: typography.fontSizeXSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/presenter.js

@@ -5,7 +5,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Grid } from '@instructure/ui-grid';
 import { View } from '@instructure/ui-view';
@@ -14,30 +15,20 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import NumberInput from '@instructure/quiz-number-input';
 import { Text } from '@instructure/ui-text';
 import { Alert } from '@instructure/ui-alerts';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import EntrySave from "../../../../../../common/components/resources/entry/EntrySave/index.js";
 import BankSelection from "../../../../../../common/components/resources/BankSelection/index.js";
 import QuizEntry from "../../../../../../common/records/QuizEntry.js";
 import Bank from "../../../../../../common/records/Bank.js";
-var styles = {
-  componentId: 'bRxwg',
-  template: function template(theme) {
-    return "\n\n.bRxwg_cTJN{margin:".concat(theme.marginAddMargin || 'inherit', "}\n\n.bRxwg_edMM{background-color:").concat(theme.quizEntryBankEditBackgroundColor || 'inherit', ";border:").concat(theme.quizEntryBankEditBorderSize || 'inherit', " dashed ").concat(theme.quizEntryBankEditBorderColor || 'inherit', ";margin:").concat(theme.quizEntryBankEditMargin || 'inherit', ";padding:").concat(theme.quizEntryBankEditPadding || 'inherit', "}\n\n.bRxwg_dpNC,[dir=ltr] .bRxwg_dpNC,[dir=rtl] .bRxwg_dpNC{text-align:left}\n\n.bRxwg_fGqX{display:inline-flex;font-size:").concat(theme.numberInputFontSize || 'inherit', ";padding:").concat(theme.numberInputPadding || 'inherit', ";padding-bottom:0;padding-left:").concat(theme.numberInputLeftPadding || 'inherit', "}\n\n.bRxwg_bRWN{border-bottom:solid ").concat(theme.borderLineBottomBorderSize || 'inherit', " ").concat(theme.borderLineBottomBorderColor || 'inherit', ";margin-bottom:").concat(theme.borderLineBottomMargin || 'inherit', ";margin-top:").concat(theme.borderLineTopMargin || 'inherit', "}");
-  },
-  'marginAdd': 'bRxwg_cTJN',
-  'quizEntryBankEdit': 'bRxwg_edMM',
-  'quizEntryBankText': 'bRxwg_dpNC',
-  'numberInput': 'bRxwg_fGqX',
-  'borderLine': 'bRxwg_bRWN'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 
-var _ref = /*#__PURE__*/React.createElement("br", null);
+var _ref = jsx("br", null);
 
-var _ref2 = /*#__PURE__*/React.createElement("br", null);
+var _ref2 = jsx("br", null);
 
-export var QuizEntryBankEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var QuizEntryBankEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryBankEdit, _Component);
 
   var _super = _createSuper(QuizEntryBankEdit);
@@ -127,14 +118,14 @@ export var QuizEntryBankEdit = (_dec = themeable(theme, styles), _dec(_class = (
     };
 
     _this.renderPointsPossibleRow = function () {
-      return /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Col, {
+      return jsx(Grid.Row, null, jsx(Grid.Col, {
         width: 3
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         color: "primary"
-      }, t('Points per question'))), /*#__PURE__*/React.createElement(Grid.Col, {
+      }, t('Points per question'))), jsx(Grid.Col, {
         width: 9
-      }, /*#__PURE__*/React.createElement(NumberInput, {
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Points per question')),
+      }, jsx(NumberInput, {
+        renderLabel: jsx(ScreenReaderContent, null, t('Points per question')),
         onChange: _this.handlePointsChange,
         onBlur: _this.handlePointsBlur,
         value: _this.state.rawPointsPossible,
@@ -150,16 +141,16 @@ export var QuizEntryBankEdit = (_dec = themeable(theme, styles), _dec(_class = (
   _createClass(QuizEntryBankEdit, [{
     key: "renderQuestionSelectRadioGroup",
     value: function renderQuestionSelectRadioGroup() {
-      return /*#__PURE__*/React.createElement(RadioInputGroup, {
+      return jsx(RadioInputGroup, {
         name: "questionSelect",
         description: t('Question selection'),
         defaultValue: this.props.questionSelection,
         onChange: this.handleQuestionChange
-      }, /*#__PURE__*/React.createElement(RadioInput, {
+      }, jsx(RadioInput, {
         key: "all",
         value: "all",
         label: t('Use all questions')
-      }), /*#__PURE__*/React.createElement(RadioInput, {
+      }), jsx(RadioInput, {
         key: "rand",
         value: "rand",
         label: t('Randomly select questions')
@@ -172,14 +163,14 @@ export var QuizEntryBankEdit = (_dec = themeable(theme, styles), _dec(_class = (
         return;
       }
 
-      return /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Col, {
+      return jsx(Grid.Row, null, jsx(Grid.Col, {
         width: 3
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         color: "primary"
-      }, t('Number of questions'))), /*#__PURE__*/React.createElement(Grid.Col, {
+      }, t('Number of questions'))), jsx(Grid.Col, {
         width: 9
-      }, /*#__PURE__*/React.createElement(NumberInput, {
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Number of questions')),
+      }, jsx(NumberInput, {
+        renderLabel: jsx(ScreenReaderContent, null, t('Number of questions')),
         onChange: this.handleSampleNumChange,
         value: this.props.sampleNum,
         min: 1,
@@ -191,7 +182,7 @@ export var QuizEntryBankEdit = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "renderQuestionNumberInputs",
     value: function renderQuestionNumberInputs() {
-      return /*#__PURE__*/React.createElement(Grid, {
+      return jsx(Grid, {
         vAlign: "middle",
         rowSpacing: "small"
       }, this.renderRandomQuestionSelectionRow(), this.renderPointsPossibleRow());
@@ -199,9 +190,9 @@ export var QuizEntryBankEdit = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.quizEntryBankText
-      }, /*#__PURE__*/React.createElement(BankSelection, {
+      return jsx("div", {
+        css: this.props.styles.quizEntryBankText
+      }, jsx(BankSelection, {
         label: t('Select the source bank'),
         selectedBank: this.props.workingBank,
         onBankSelection: this.onBankSelection
@@ -211,9 +202,9 @@ export var QuizEntryBankEdit = (_dec = themeable(theme, styles), _dec(_class = (
     key: "renderErrors",
     value: function renderErrors() {
       if (this.props.workingBank.archived) {
-        return /*#__PURE__*/React.createElement(Alert, {
+        return jsx(Alert, {
           variant: "error"
-        }, /*#__PURE__*/React.createElement(Text, {
+        }, jsx(Text, {
           color: "primary"
         }, t('Item bank no longer exists!')));
       }
@@ -221,13 +212,13 @@ export var QuizEntryBankEdit = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.quizEntryBankEdit
-      }, this.renderErrors(), this.renderContent(), /*#__PURE__*/React.createElement("div", {
-        className: styles.borderLine
-      }), /*#__PURE__*/React.createElement(View, {
+      return jsx("div", {
+        css: this.props.styles.quizEntryBankEdit
+      }, this.renderErrors(), this.renderContent(), jsx("div", {
+        css: this.props.styles.borderLine
+      }), jsx(View, {
         textAlign: "end"
-      }, /*#__PURE__*/React.createElement(EntrySave, {
+      }, jsx(EntrySave, {
         clearChanges: this.clearChanges,
         displayPosition: this.props.displayPosition,
         disableSubmit: !this.props.workingQuizEntry.isValid(),
@@ -255,7 +246,8 @@ export var QuizEntryBankEdit = (_dec = themeable(theme, styles), _dec(_class = (
   sampleNum: PropTypes.string,
   updateQuizEntry: PropTypes.func.isRequired,
   workingBank: PropTypes.instanceOf(Bank).isRequired,
-  workingQuizEntry: PropTypes.instanceOf(QuizEntry).isRequired
+  workingQuizEntry: PropTypes.instanceOf(QuizEntry).isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   sampleNum: void 0
 }, _temp)) || _class);

package/es/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/styles.js

@@ -0,0 +1,30 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    marginAdd: {
+      margin: componentTheme.marginAddMargin
+    },
+    quizEntryBankEdit: {
+      backgroundColor: componentTheme.quizEntryBankEditBackgroundColor,
+      border: "".concat(componentTheme.quizEntryBankEditBorderSize, " dashed ").concat(componentTheme.quizEntryBankEditBorderColor),
+      padding: componentTheme.quizEntryBankEditPadding,
+      margin: componentTheme.quizEntryBankEditMargin
+    },
+    quizEntryBankText: {
+      textAlign: 'left'
+    },
+    numberInput: {
+      fontSize: componentTheme.numberInputFontSize,
+      display: 'inline-flex',
+      padding: componentTheme.numberInputPadding,
+      paddingBottom: '0',
+      paddingLeft: componentTheme.numberInputLeftPadding
+    },
+    borderLine: {
+      marginTop: componentTheme.borderLineTopMargin,
+      marginBottom: componentTheme.borderLineBottomMargin,
+      borderBottom: "solid ".concat(componentTheme.borderLineBottomBorderSize, " ").concat(componentTheme.borderLineBottomBorderColor)
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -18,4 +18,6 @@ export default function generator(_ref) {
     borderLineBottomBorderSize: borders.widthSmall,
     borderLineBottomBorderColor: colors.ash
   };
-}
+};
+
+export default generateComponentTheme;