@instructure/quiz-core 21.1.1 → 22.0.0

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

@@ -1,18 +1,18 @@
 "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.Bank = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports["default"] = exports.Bank = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var immutable = _interopRequireWildcard(require("immutable"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -27,155 +27,165 @@ var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _emotion = require("@instructure/emotion");
 var _uiCheckbox = require("@instructure/ui-checkbox");
 var _uiView = require("@instructure/ui-view");
-var _index = require("../HeaderBreadCrumb/index.js");
-var _Bank2 = _interopRequireDefault(require("../../../common/records/Bank.js"));
-var _index2 = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
-var _index3 = _interopRequireDefault(require("../../../common/components/shared/PaginatedCollection/index.js"));
-var _QuizEntry = _interopRequireDefault(require("../../../common/records/QuizEntry.js"));
+var _HeaderBreadCrumb = require("../HeaderBreadCrumb");
+var _Bank2 = _interopRequireDefault(require("../../../common/records/Bank"));
+var _Page = _interopRequireDefault(require("../../../common/components/layout/Page"));
+var _PaginatedCollection = _interopRequireDefault(require("../../../common/components/shared/PaginatedCollection"));
+var _QuizEntry = _interopRequireDefault(require("../../../common/records/QuizEntry"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-var _debounceLatestPromise = _interopRequireDefault(require("../../../common/util/debounceLatestPromise.js"));
-var _index4 = _interopRequireDefault(require("../../../banks/components/AddBankEntryModal/index.js"));
-var _index5 = _interopRequireDefault(require("../../../banks/components/BankEntriesList/index.js"));
-var _index6 = _interopRequireDefault(require("../../../banks/components/BankSearch/index.js"));
-var _index7 = _interopRequireDefault(require("../../../banks/components/HeaderMenu/index.js"));
-var _index8 = _interopRequireDefault(require("../NavWrapper/index.js"));
+var _debounceLatestPromise = _interopRequireDefault(require("../../../common/util/debounceLatestPromise"));
+var _AddBankEntryModal = _interopRequireDefault(require("../../../banks/components/AddBankEntryModal"));
+var _BankEntriesList = _interopRequireDefault(require("../../../banks/components/BankEntriesList"));
+var _BankSearch = _interopRequireDefault(require("../../../banks/components/BankSearch"));
+var _HeaderMenu = _interopRequireDefault(require("../../../banks/components/HeaderMenu"));
+var _NavWrapper = _interopRequireDefault(require("../NavWrapper"));
 var _quizCommon = require("@instructure/quiz-common");
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
 var _dec, _class, _Bank;
 /** @jsx jsx */
-var _ref = (0, _emotion.jsx)(_uiIcons.IconMoreSolid, null);
-var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_Bank = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Bank, _Component);
-  var _super = (0, _createSuper2.default)(Bank);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
+var Bank = exports.Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_Bank = /*#__PURE__*/function (_Component) {
   function Bank() {
-    var _this;
-    (0, _classCallCheck2.default)(this, Bank);
+    var _this2;
+    (0, _classCallCheck2["default"])(this, Bank);
     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.state = {
+    _this2 = _callSuper(this, Bank, [].concat(_args));
+    (0, _defineProperty2["default"])(_this2, "state", {
       sharedWithCourse: false,
       shareWithCourseCheckboxDisabled: true
-    };
-    _this.openAddBankEntryModal = function () {
-      _this.props.openModal(_quizCommon.ADD_BANK_ENTRY_MODAL, {
-        modalTrigger: _this.createBankEntryButton
+    });
+    (0, _defineProperty2["default"])(_this2, "openAddBankEntryModal", function () {
+      _this2.props.openModal(_quizCommon.ADD_BANK_ENTRY_MODAL, {
+        modalTrigger: _this2.createBankEntryButton
       });
-    };
-    _this.renderHeaderMenu = function () {
-      if (!_this.props.isCompact) {
-        return (0, _emotion.jsx)(_index7.default, {
-          bank: _this.props.bank,
-          iceTopNavBarEnabled: _this.props.iceTopNavBarEnabled,
+    });
+    (0, _defineProperty2["default"])(_this2, "renderHeaderMenu", function () {
+      if (!_this2.props.isCompact) {
+        return (0, _emotion.jsx)(_HeaderMenu["default"], {
+          bank: _this2.props.bank,
+          iceTopNavBarEnabled: _this2.props.iceTopNavBarEnabled,
           id: "BankMenu",
-          renderIcon: _ref
+          renderIcon: (0, _emotion.jsx)(_uiIcons.IconMoreSolid, null)
         });
       }
-    };
-    _this.storeCreateBankEntryButtonRef = function (c) {
-      _this.createBankEntryButton = c;
-    };
-    _this.renderBankBreadCrumbLink = function () {
+    });
+    (0, _defineProperty2["default"])(_this2, "storeCreateBankEntryButtonRef", function (c) {
+      _this2.createBankEntryButton = c;
+    });
+    (0, _defineProperty2["default"])(_this2, "renderBankBreadCrumbLink", function () {
       return (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
         key: "bank"
-      }, _this.props.bank.title);
-    };
-    _this.toggleCheckbox = function () {
+      }, _this2.props.bank.title);
+    });
+    (0, _defineProperty2["default"])(_this2, "toggleCheckbox", function () {
       // disable until request resolves
-      _this.setState({
+      _this2.setState({
         shareWithCourseCheckboxDisabled: true
       });
-      _this.changeSharedPermissions();
-    };
-    _this.unshareBankWithCourse = /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(sharedBank) {
-        var _this$props, updateSharedBankPermission, bankId, getSharedBank, scope;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$props = _this.props, updateSharedBankPermission = _this$props.updateSharedBankPermission, bankId = _this$props.bankId, getSharedBank = _this$props.getSharedBank, scope = _this$props.scope;
-                _context.next = 3;
-                return updateSharedBankPermission(bankId, sharedBank.get('id'), _quizCommon.REMOVED_ACCESS);
-              case 3:
-                getSharedBank(bankId, scope.type, scope.uuid).catch(function (err) {
-                  // make sure the user still has access to the bank
-                  if (err.response.status === 401) {
-                    _this.props.navigateToBanks();
-                  }
-                });
-              case 4:
-              case "end":
-                return _context.stop();
-            }
+      _this2.changeSharedPermissions();
+    });
+    (0, _defineProperty2["default"])(_this2, "unshareBankWithCourse", /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(sharedBank) {
+        var _this2$props, updateSharedBankPermission, bankId, getSharedBank, scope;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this2$props = _this2.props, updateSharedBankPermission = _this2$props.updateSharedBankPermission, bankId = _this2$props.bankId, getSharedBank = _this2$props.getSharedBank, scope = _this2$props.scope;
+              _context.next = 3;
+              return updateSharedBankPermission(bankId, sharedBank.get('id'), _quizCommon.REMOVED_ACCESS);
+            case 3:
+              getSharedBank(bankId, scope.type, scope.uuid)["catch"](function (err) {
+                // make sure the user still has access to the bank
+                if (err.response.status === 401) {
+                  _this2.props.navigateToBanks();
+                }
+              });
+            case 4:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));
       return function (_x) {
-        return _ref2.apply(this, arguments);
+        return _ref.apply(this, arguments);
       };
-    }();
-    _this.translatedPermissionLevel = function (permission) {
-      var _CAN_EDIT$READ_ONLY$p;
-      return (_CAN_EDIT$READ_ONLY$p = {}, (0, _defineProperty2.default)(_CAN_EDIT$READ_ONLY$p, _quizCommon.CAN_EDIT, (0, _formatMessage.default)('edit')), (0, _defineProperty2.default)(_CAN_EDIT$READ_ONLY$p, _quizCommon.READ_ONLY, (0, _formatMessage.default)('view')), _CAN_EDIT$READ_ONLY$p)[permission];
-    };
-    _this.confirmUnshareBankWithCourse = function () {
-      var confirmText = (0, _formatMessage.default)('You are about to remove { accessLevel } access for { entityTitle } to this bank.', {
-        accessLevel: _this.translatedPermissionLevel(_this.props.courseSharedBank.get('permission')),
-        entityTitle: _this.props.scope.title
+    }());
+    (0, _defineProperty2["default"])(_this2, "translatedPermissionLevel", function (permission) {
+      return (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _quizCommon.CAN_EDIT, (0, _formatMessage["default"])('edit')), _quizCommon.READ_ONLY, (0, _formatMessage["default"])('view'))[permission];
+    });
+    (0, _defineProperty2["default"])(_this2, "confirmUnshareBankWithCourse", function () {
+      var confirmText = (0, _formatMessage["default"])('You are about to remove { accessLevel } access for { entityTitle } to this bank.', {
+        accessLevel: _this2.translatedPermissionLevel(_this2.props.courseSharedBank.get('permission')),
+        entityTitle: _this2.props.scope.title
       });
-      _this.props.withConfirm((0, _partial.default)(_this.unshareBankWithCourse, _this.props.courseSharedBank), {
-        title: (0, _formatMessage.default)('Unshare Bank with Course'),
+      _this2.props.withConfirm((0, _partial["default"])(_this2.unshareBankWithCourse, _this2.props.courseSharedBank), {
+        title: (0, _formatMessage["default"])('Unshare Bank with Course'),
         text: confirmText,
-        continueText: (0, _formatMessage.default)('Confirm'),
-        onCancel: _this.onCancelUnshareBankWithCourse
+        continueText: (0, _formatMessage["default"])('Confirm'),
+        onCancel: _this2.onCancelUnshareBankWithCourse
       });
-    };
-    _this.onCancelUnshareBankWithCourse = function () {
-      _this.setState({
+    });
+    (0, _defineProperty2["default"])(_this2, "onCancelUnshareBankWithCourse", function () {
+      _this2.setState({
         shareWithCourseCheckboxDisabled: false
       });
-    };
-    _this.addBankToQuiz = function () {
-      var newEntry = _QuizEntry.default.create({
-        entryId: _this.props.bankId,
+    });
+    (0, _defineProperty2["default"])(_this2, "addBankToQuiz", function () {
+      var newEntry = _QuizEntry["default"].create({
+        entryId: _this2.props.bankId,
         entryType: 'Bank',
-        position: _this.props.position,
-        stimulusQuizEntryId: _this.props.stimulusId
+        position: _this2.props.position,
+        stimulusQuizEntryId: _this2.props.stimulusId
       });
-      _this.props.addEntryToQuiz(_this.props.activeQuizId, newEntry.entryId, newEntry.entryType, newEntry.getProperties(), false).then(function () {
-        _this.props.screenreaderNotification((0, _formatMessage.default)('Bank was successfully added to the quiz'));
+      _this2.props.addEntryToQuiz(_this2.props.activeQuizId, newEntry.entryId, newEntry.entryType, newEntry.getProperties(), false).then(function () {
+        _this2.props.screenreaderNotification((0, _formatMessage["default"])('Bank was successfully added to the quiz'));
       });
-    };
-    _this.renderTopLeftMenu = function () {
+    });
+    (0, _defineProperty2["default"])(_this2, "renderTopLeftMenu", function () {
       return (0, _emotion.jsx)("div", {
-        css: _this.props.styles.topLeftMenu
-      }, _this.renderMultiAdd());
-    };
-    _this.renderTopRightMenu = function () {
+        css: _this2.props.styles.topLeftMenu
+      }, _this2.renderMultiAdd());
+    });
+    (0, _defineProperty2["default"])(_this2, "renderTopRightMenu", function () {
       return (0, _emotion.jsx)("div", {
-        css: _this.props.styles.topRightMenu
-      }, _this.renderNewBankEntryButton());
-    };
-    _this.announceResults = function (_ref3) {
-      var totalPages = _ref3.totalPages;
-      var message = (0, _formatMessage.default)("{\n      count, plural,\n         =0 {No search results found}\n        one {Displaying one page of results}\n      other {Displaying # pages of results}\n    }", {
+        css: _this2.props.styles.topRightMenu
+      }, _this2.renderNewBankEntryButton());
+    });
+    (0, _defineProperty2["default"])(_this2, "announceResults", function (_ref2) {
+      var totalPages = _ref2.totalPages;
+      var message = (0, _formatMessage["default"])("{\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.
       // We debounce using a larger interval for a11y, so that the user isn't
       // flooded with "Search results ready" messages every time they type a
       // character
-      _this.props.screenreaderNotification(message);
-    };
-    _this.debouncedAnnounceResults = (0, _debounce.default)(_this.announceResults, 1000);
-    _this.getPage = function (page, search) {
-      var _this$props2 = _this.props,
-        getBankEntries = _this$props2.getBankEntries,
-        bankId = _this$props2.bankId,
-        useBankSearch = _this$props2.useBankSearch;
+      _this2.props.screenreaderNotification(message);
+    });
+    (0, _defineProperty2["default"])(_this2, "debouncedAnnounceResults", (0, _debounce["default"])(_this2.announceResults, 1000));
+    (0, _defineProperty2["default"])(_this2, "getPage", function (page, search) {
+      var _this2$props2 = _this2.props,
+        getBankEntries = _this2$props2.getBankEntries,
+        bankId = _this2$props2.bankId,
+        useBankSearch = _this2$props2.useBankSearch;
       var text = search.get('text');
       var interactionTypes = search.get('interactionTypes', immutable.Set()).toJS();
       var tagIds = search.get('tags', []).map(function (tag) {
@@ -193,37 +203,38 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
       var resultPage = getBankEntries(bankId, useBankSearch, params);
       if (resultPage) {
         return resultPage.then(function (results) {
-          _this.debouncedAnnounceResults(results);
+          _this2.debouncedAnnounceResults(results);
           return results;
         });
       } else {
         return Promise.resolve(null);
       }
-    };
-    _this.getPageDebounced = (0, _debounceLatestPromise.default)(function () {
-      var _this2;
-      return (_this2 = _this).getPage.apply(_this2, arguments);
-    }, 100);
-    _this.renderRecords = function (recordIds) {
-      var addEntryFunc = _this.props.isCompact && _this.props.addEntryToQuiz || null;
-      return (0, _emotion.jsx)(_index5.default, {
+    });
+    (0, _defineProperty2["default"])(_this2, "getPageDebounced", (0, _debounceLatestPromise["default"])(function () {
+      var _this3;
+      return (_this3 = _this2).getPage.apply(_this3, arguments);
+    }, 100));
+    (0, _defineProperty2["default"])(_this2, "renderRecords", function (recordIds) {
+      var addEntryFunc = _this2.props.isCompact && _this2.props.addEntryToQuiz || null;
+      return (0, _emotion.jsx)(_BankEntriesList["default"], {
         addEntryToQuiz: addEntryFunc,
-        bank: _this.props.bank,
-        navigateToBankEntry: _this.props.navigateToBankEntry,
+        bank: _this2.props.bank,
+        navigateToBankEntry: _this2.props.navigateToBankEntry,
         recordIds: recordIds,
-        isQuizContentLocked: _this.props.isQuizContentLocked
+        isQuizContentLocked: _this2.props.isQuizContentLocked
       });
-    };
-    return _this;
+    });
+    return _this2;
   }
-  (0, _createClass2.default)(Bank, [{
+  (0, _inherits2["default"])(Bank, _Component);
+  return (0, _createClass2["default"])(Bank, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.resetSearch(this.props.bankId);
       if (this.props.onError) {
-        this.props.getBank(this.props.bankId).catch(this.props.onError);
+        this.props.getBank(this.props.bankId)["catch"](this.props.onError);
         if (this.shouldRenderShareWithCourseCheckbox()) {
-          this.props.getSharedBank(this.props.bankId, this.props.scope.type, this.props.scope.uuid).catch(this.props.onError);
+          this.props.getSharedBank(this.props.bankId, this.props.scope.type, this.props.scope.uuid)["catch"](this.props.onError);
         }
       } else {
         this.props.getBank(this.props.bankId);
@@ -274,14 +285,14 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
   }, {
     key: "renderNav",
     value: function renderNav() {
-      var _this$props3 = this.props,
-        scope = _this$props3.scope,
-        closeTray = _this$props3.closeTray,
-        navigateToBanks = _this$props3.navigateToBanks,
-        navigateToBuild = _this$props3.navigateToBuild,
-        returnToUrl = _this$props3.returnToUrl;
+      var _this$props = this.props,
+        scope = _this$props.scope,
+        closeTray = _this$props.closeTray,
+        navigateToBanks = _this$props.navigateToBanks,
+        navigateToBuild = _this$props.navigateToBuild,
+        returnToUrl = _this$props.returnToUrl;
       var isScopeEmpty = !Object.keys(scope).length;
-      return (0, _emotion.jsx)(_index8.default, {
+      return (0, _emotion.jsx)(_NavWrapper["default"], {
         closeTray: closeTray,
         navigateToBanks: navigateToBanks,
         navigateToBuild: navigateToBuild,
@@ -300,13 +311,13 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
         css: this.props.styles.bankName
       }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h1"
-      }, this.props.bank.title || (0, _formatMessage.default)('Bank')));
+      }, this.props.bank.title || (0, _formatMessage["default"])('Bank')));
     }
   }, {
     key: "renderAddBankEntryModal",
     value: function renderAddBankEntryModal() {
       if (!this.props.isCompact) {
-        return (0, _emotion.jsx)(_index4.default, {
+        return (0, _emotion.jsx)(_AddBankEntryModal["default"], {
           bankId: this.props.bankId,
           navigateToBankEntry: this.props.navigateToBankEntry
         });
@@ -342,7 +353,7 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
       if (!this.shouldRenderShareWithCourseCheckbox()) {
         return null;
       }
-      var label = (0, _formatMessage.default)('Share with { courseName }', {
+      var label = (0, _formatMessage["default"])('Share with { courseName }', {
         courseName: this.props.scope.title
       });
       return (0, _emotion.jsx)(_uiView.View, {
@@ -373,8 +384,8 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
           "data-automation": "sdk-new-bank-entry-button",
           renderIcon: _uiIcons.IconPlusLine
         }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
-          alt: (0, _formatMessage.default)('Create Bank Entry')
-        }, (0, _formatMessage.default)('New')));
+          alt: (0, _formatMessage["default"])('Create Bank Entry')
+        }, (0, _formatMessage["default"])('New')));
       }
     }
   }, {
@@ -388,8 +399,8 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
           renderIcon: _uiIcons.IconPlusLine,
           "data-automation": "sdk-add-bank-to-quiz-button"
         }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
-          alt: (0, _formatMessage.default)('Add this bank to quiz')
-        }, (0, _formatMessage.default)('All / Random')));
+          alt: (0, _formatMessage["default"])('Add this bank to quiz')
+        }, (0, _formatMessage["default"])('All / Random')));
       }
     }
   }, {
@@ -403,7 +414,7 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
       if (this.props.bank.filters !== null && this.props.useBankSearch) {
         var its = this.props.bank.filters.interaction_types;
         var tags = this.props.bank.filters.tags;
-        return (0, _emotion.jsx)(_index6.default, {
+        return (0, _emotion.jsx)(_BankSearch["default"], {
           interactionTypes: its,
           tags: tags,
           pageStateKey: this.stateKey(),
@@ -416,28 +427,28 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
     value: function emptyLoadText() {
       var noFilters = this.props.bank.filters === null;
       var noQuestions = function noQuestions() {
-        return (0, _formatMessage.default)('There are no questions in this bank yet.');
+        return (0, _formatMessage["default"])('There are no questions in this bank yet.');
       };
       var noResults = function noResults() {
-        return (0, _formatMessage.default)('The search returned no results.');
+        return (0, _formatMessage["default"])('The search returned no results.');
       };
       return noFilters ? noQuestions() : noResults();
     }
   }, {
     key: "render",
     value: function render() {
-      return (0, _emotion.jsx)(_index2.default, null, this.renderModals(), this.renderNav(), (0, _emotion.jsx)("div", {
+      return (0, _emotion.jsx)(_Page["default"], null, this.renderModals(), this.renderNav(), (0, _emotion.jsx)("div", {
         css: this.props.styles.content
       }, this.props.iceTopNavBarEnabled && (0, _emotion.jsx)("div", {
         css: this.props.styles.breadcrumb
-      }, (0, _emotion.jsx)(_index.HeaderBreadCrumb, {
+      }, (0, _emotion.jsx)(_HeaderBreadCrumb.HeaderBreadCrumb, {
         returnToUrl: this.props.returnToUrl,
         scope: this.props.scope,
         navigateToBanks: this.props.navigateToBanks,
         navigateToBuild: this.props.navigateToBuild
       }, this.renderBankBreadCrumbLink())), this.renderName(), this.renderCheckbox(), (0, _emotion.jsx)("div", {
         css: this.props.styles.topMenu
-      }, this.renderTopLeftMenu(), this.renderTopRightMenu()), this.renderSearch(), (0, _emotion.jsx)(_index3.default, {
+      }, this.renderTopLeftMenu(), this.renderTopRightMenu()), this.renderSearch(), (0, _emotion.jsx)(_PaginatedCollection["default"], {
         empty: this.emptyLoadText(),
         params: this.props.search,
         getPage: this.getPageDebounced,
@@ -446,51 +457,49 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
       })));
     }
   }]);
-  Bank.displayName = "Bank";
-  return Bank;
-}(_react.Component), _Bank.displayName = 'Bank', _Bank.componentId = "Quizzes".concat(_Bank.displayName), _Bank.propTypes = {
-  activeQuizId: _propTypes.default.string,
-  addEntryToQuiz: _propTypes.default.func,
-  bankId: _propTypes.default.string.isRequired,
-  bank: _propTypes.default.instanceOf(_Bank2.default).isRequired,
-  useBankSearch: _propTypes.default.bool,
-  closeTray: _propTypes.default.func,
-  getBank: _propTypes.default.func.isRequired,
-  getBankEntries: _propTypes.default.func.isRequired,
-  getSharedBank: _propTypes.default.func.isRequired,
-  isCompact: _propTypes.default.bool,
-  isQuizContentLocked: _propTypes.default.bool.isRequired,
-  navigateToBanks: _propTypes.default.func.isRequired,
+}(_react.Component), (0, _defineProperty2["default"])(_Bank, "displayName", 'Bank'), (0, _defineProperty2["default"])(_Bank, "componentId", "Quizzes".concat(_Bank.displayName)), (0, _defineProperty2["default"])(_Bank, "propTypes", {
+  activeQuizId: _propTypes["default"].string,
+  addEntryToQuiz: _propTypes["default"].func,
+  bankId: _propTypes["default"].string.isRequired,
+  bank: _propTypes["default"].instanceOf(_Bank2["default"]).isRequired,
+  useBankSearch: _propTypes["default"].bool,
+  closeTray: _propTypes["default"].func,
+  getBank: _propTypes["default"].func.isRequired,
+  getBankEntries: _propTypes["default"].func.isRequired,
+  getSharedBank: _propTypes["default"].func.isRequired,
+  isCompact: _propTypes["default"].bool,
+  isQuizContentLocked: _propTypes["default"].bool.isRequired,
+  navigateToBanks: _propTypes["default"].func.isRequired,
   // can be from consumer
-  navigateToBankEntry: _propTypes.default.func.isRequired,
+  navigateToBankEntry: _propTypes["default"].func.isRequired,
   // can be from consumer
-  navigateToBuild: _propTypes.default.func,
+  navigateToBuild: _propTypes["default"].func,
   // from consumer
-  scope: _propTypes.default.shape({
-    type: _propTypes.default.string,
-    uuid: _propTypes.default.string,
-    title: _propTypes.default.string,
-    launch_context_uuid: _propTypes.default.string,
-    root_account_name: _propTypes.default.string
+  scope: _propTypes["default"].shape({
+    type: _propTypes["default"].string,
+    uuid: _propTypes["default"].string,
+    title: _propTypes["default"].string,
+    launch_context_uuid: _propTypes["default"].string,
+    root_account_name: _propTypes["default"].string
   }),
-  courseSharedBank: _reactImmutableProptypes.default.map,
-  returnToUrl: _propTypes.default.string,
+  courseSharedBank: _reactImmutableProptypes["default"].map,
+  returnToUrl: _propTypes["default"].string,
   // from consumer
-  onError: _propTypes.default.func,
-  openModal: _propTypes.default.func.isRequired,
-  position: _propTypes.default.number,
-  removeSharedBank: _propTypes.default.func.isRequired,
-  resetSearch: _propTypes.default.func.isRequired,
-  screenreaderNotification: _propTypes.default.func.isRequired,
-  search: _reactImmutableProptypes.default.map.isRequired,
-  shareBank: _propTypes.default.func.isRequired,
-  stimulusId: _propTypes.default.string,
-  showShareBankFromTray: _propTypes.default.bool,
-  updateSharedBankPermission: _propTypes.default.func.isRequired,
-  withConfirm: _propTypes.default.func.isRequired,
-  iceTopNavBarEnabled: _propTypes.default.bool,
-  styles: _propTypes.default.object
-}, _Bank.defaultProps = {
+  onError: _propTypes["default"].func,
+  openModal: _propTypes["default"].func.isRequired,
+  position: _propTypes["default"].number,
+  removeSharedBank: _propTypes["default"].func.isRequired,
+  resetSearch: _propTypes["default"].func.isRequired,
+  screenreaderNotification: _propTypes["default"].func.isRequired,
+  search: _reactImmutableProptypes["default"].map.isRequired,
+  shareBank: _propTypes["default"].func.isRequired,
+  stimulusId: _propTypes["default"].string,
+  showShareBankFromTray: _propTypes["default"].bool,
+  updateSharedBankPermission: _propTypes["default"].func.isRequired,
+  withConfirm: _propTypes["default"].func.isRequired,
+  iceTopNavBarEnabled: _propTypes["default"].bool,
+  styles: _propTypes["default"].object
+}), (0, _defineProperty2["default"])(_Bank, "defaultProps", {
   activeQuizId: null,
   addEntryToQuiz: null,
   closeTray: function closeTray() {},
@@ -507,7 +516,5 @@ var Bank = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.d
   showShareBankFromTray: false,
   courseSharedBank: null,
   iceTopNavBarEnabled: false
-}, _Bank)) || _class);
-exports.Bank = Bank;
-var _default = Bank;
-exports.default = _default;
+}), _Bank)) || _class);
+var _default = exports["default"] = Bank;

package/lib/banks/components/Bank/styles.js

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var generateStyle = function generateStyle(componentTheme) {
   var menuStyles = {
     display: 'flex',
@@ -15,7 +16,7 @@ var generateStyle = function generateStyle(componentTheme) {
   };
   var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
   return {
-    content: (0, _defineProperty2.default)({
+    content: (0, _defineProperty2["default"])({
       padding: "".concat(componentTheme.contentPaddingTopBottom, " ").concat(componentTheme.contentPaddingLeftRight),
       backgroundColor: componentTheme.contentBackgroundColor
     }, mq, {
@@ -25,10 +26,10 @@ var generateStyle = function generateStyle(componentTheme) {
       marginBottom: "".concat(componentTheme.breadCrumbMarginBottom)
     },
     topMenu: menuStyles,
-    topLeftMenu: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, menuStyles), {}, {
+    topLeftMenu: _objectSpread(_objectSpread({}, menuStyles), {}, {
       flex: '50%'
     }),
-    topRightMenu: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, menuStyles), {}, {
+    topRightMenu: _objectSpread(_objectSpread({}, menuStyles), {}, {
       justifyContent: 'flex-end',
       flex: '50%'
     }),
@@ -41,5 +42,4 @@ var generateStyle = function generateStyle(componentTheme) {
     }
   };
 };
-var _default = generateStyle;
-exports.default = _default;
+var _default = exports["default"] = generateStyle;

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
     colors = _ref.colors,
     breakpoints = _ref.breakpoints;
   return {
-    contentBackgroundColor: colors.white,
+    contentBackgroundColor: colors.contrasts.white1010,
     contentPaddingTopBottom: spacing.medium,
     contentPaddingLeftRight: spacing.medium,
     breadCrumbMarginBottom: spacing.large,
@@ -19,5 +19,4 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     filtersMarginTop: spacing.large
   };
 };
-var _default = generateComponentTheme;
-exports.default = _default;
+var _default = exports["default"] = generateComponentTheme;