@instructure/quiz-core 20.9.1-rc.7 → 20.10.0

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

@@ -51,11 +51,13 @@ var _uiCheckbox = require("@instructure/ui-checkbox");
 
 var _uiView = require("@instructure/ui-view");
 
+var _index = require("../HeaderBreadCrumb/index.js");
+
 var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
 
-var _index = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
+var _index2 = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
 
-var _index2 = _interopRequireDefault(require("../../../common/components/shared/PaginatedCollection/index.js"));
+var _index3 = _interopRequireDefault(require("../../../common/components/shared/PaginatedCollection/index.js"));
 
 var _QuizEntry = _interopRequireDefault(require("../../../common/records/QuizEntry.js"));
 
@@ -63,15 +65,15 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _debounceLatestPromise = _interopRequireDefault(require("../../../common/util/debounceLatestPromise.js"));
 
-var _index3 = _interopRequireDefault(require("../../../banks/components/AddBankEntryModal/index.js"));
+var _index4 = _interopRequireDefault(require("../../../banks/components/AddBankEntryModal/index.js"));
 
-var _index4 = _interopRequireDefault(require("../../../banks/components/BankEntriesList/index.js"));
+var _index5 = _interopRequireDefault(require("../../../banks/components/BankEntriesList/index.js"));
 
-var _index5 = _interopRequireDefault(require("../../../banks/components/BankSearch/index.js"));
+var _index6 = _interopRequireDefault(require("../../../banks/components/BankSearch/index.js"));
 
-var _index6 = _interopRequireDefault(require("../../../banks/components/HeaderMenu/index.js"));
+var _index7 = _interopRequireDefault(require("../../../banks/components/HeaderMenu/index.js"));
 
-var _index7 = _interopRequireDefault(require("../NavWrapper/index.js"));
+var _index8 = _interopRequireDefault(require("../NavWrapper/index.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
 
@@ -109,7 +111,7 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
 
     _this.renderHeaderMenu = function () {
       if (!_this.props.isCompact) {
-        return (0, _emotion.jsx)(_index6.default, {
+        return (0, _emotion.jsx)(_index7.default, {
           bank: _this.props.bank
         });
       }
@@ -119,6 +121,12 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       _this.createBankEntryButton = c;
     };
 
+    _this.renderBankBreadCrumbLink = function () {
+      return (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
+        key: "bank"
+      }, _this.props.bank.title);
+    };
+
     _this.toggleCheckbox = function () {
       // disable until request resolves
       _this.setState({
@@ -266,7 +274,7 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
 
     _this.renderRecords = function (recordIds) {
       var addEntryFunc = _this.props.isCompact && _this.props.addEntryToQuiz || null;
-      return (0, _emotion.jsx)(_index4.default, {
+      return (0, _emotion.jsx)(_index5.default, {
         addEntryToQuiz: addEntryFunc,
         bank: _this.props.bank,
         navigateToBankEntry: _this.props.navigateToBankEntry,
@@ -348,16 +356,18 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           navigateToBuild = _this$props3.navigateToBuild,
           returnToUrl = _this$props3.returnToUrl;
       var isScopeEmpty = !Object.keys(scope).length;
-      return (0, _emotion.jsx)(_index7.default, {
+      return (0, _emotion.jsx)(_index8.default, {
         closeTray: closeTray,
         navigateToBanks: navigateToBanks,
         navigateToBuild: navigateToBuild,
         renderHeaderMenu: this.renderHeaderMenu,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
-        canvasReferrerLinkText: isScopeEmpty ? null : scope.title
-      }, (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
-        key: "bank"
-      }, this.props.bank.title));
+        scope: scope,
+        isCompact: this.props.isCompact,
+        iceTopNavBarEnabled: this.props.iceTopNavBarEnabled,
+        menuItemPath: "/banks/".concat(this.props.bankId) // eslint-disable-line react/jsx-no-literals
+
+      }, this.renderBankBreadCrumbLink());
     }
   }, {
     key: "renderName",
@@ -372,7 +382,7 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     key: "renderAddBankEntryModal",
     value: function renderAddBankEntryModal() {
       if (!this.props.isCompact) {
-        return (0, _emotion.jsx)(_index3.default, {
+        return (0, _emotion.jsx)(_index4.default, {
           bankId: this.props.bankId,
           navigateToBankEntry: this.props.navigateToBankEntry
         });
@@ -469,7 +479,7 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       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)(_index5.default, {
+        return (0, _emotion.jsx)(_index6.default, {
           interactionTypes: its,
           tags: tags,
           pageStateKey: this.stateKey(),
@@ -495,11 +505,18 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }, {
     key: "render",
     value: function render() {
-      return (0, _emotion.jsx)(_index.default, null, this.renderModals(), this.renderNav(), (0, _emotion.jsx)("div", {
+      return (0, _emotion.jsx)(_index2.default, null, this.renderModals(), this.renderNav(), (0, _emotion.jsx)("div", {
         css: this.props.styles.content
-      }, this.renderName(), this.renderCheckbox(), (0, _emotion.jsx)("div", {
+      }, this.props.iceTopNavBarEnabled && (0, _emotion.jsx)("div", {
+        css: this.props.styles.breadcrumb
+      }, (0, _emotion.jsx)(_index.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)(_index2.default, {
+      }, this.renderTopLeftMenu(), this.renderTopRightMenu()), this.renderSearch(), (0, _emotion.jsx)(_index3.default, {
         empty: this.emptyLoadText(),
         params: this.props.search,
         getPage: this.getPageDebounced,
@@ -548,6 +565,7 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   showShareBankFromTray: _propTypes.default.bool,
   updateSharedBankPermission: _propTypes.default.func.isRequired,
   withConfirm: _propTypes.default.func.isRequired,
+  iceTopNavBarEnabled: _propTypes.default.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: _propTypes.default.object
 }, _class2.defaultProps = {
@@ -565,7 +583,8 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   returnToUrl: null,
   isQuizContentLocked: false,
   showShareBankFromTray: false,
-  courseSharedBank: null
+  courseSharedBank: null,
+  iceTopNavBarEnabled: false
 }, _temp)) || _class);
 exports.Bank = Bank;
 var _default = Bank;

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

@@ -25,6 +25,9 @@ var generateStyle = function generateStyle(componentTheme) {
     }, mq, {
       padding: "".concat(componentTheme.phoneContentPadding, " 0")
     }),
+    breadcrumb: {
+      marginBottom: "".concat(componentTheme.breadCrumbMarginBottom)
+    },
     topMenu: menuStyles,
     topLeftMenu: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, menuStyles), {}, {
       flex: '50%'

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

@@ -11,9 +11,10 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
       breakpoints = _ref.breakpoints;
   return {
     contentBackgroundColor: colors.white,
-    contentPaddingTopBottom: spacing.small,
+    contentPaddingTopBottom: spacing.medium,
     contentPaddingLeftRight: spacing.medium,
-    bankNamePaddingBottom: spacing.small,
+    breadCrumbMarginBottom: spacing.large,
+    bankNamePaddingBottom: spacing.large,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     phoneContentPadding: spacing.small,
     filtersMarginTop: spacing.large

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

@@ -57,25 +57,27 @@ var _uiTextInput = require("@instructure/ui-text-input");
 
 var _emotion = require("@instructure/emotion");
 
-var _index = _interopRequireDefault(require("../../../common/components/resources/entry/EntrySave/index.js"));
+var _index = require("../HeaderBreadCrumb/index.js");
 
-var _index2 = _interopRequireDefault(require("../../../common/components/resources/item/ItemEdit/index.js"));
+var _index2 = _interopRequireDefault(require("../../../common/components/resources/entry/EntrySave/index.js"));
 
-var _index3 = _interopRequireDefault(require("../../../building/components/resources/ItemFeedbackModal/index.js"));
+var _index3 = _interopRequireDefault(require("../../../common/components/resources/item/ItemEdit/index.js"));
 
-var _index4 = _interopRequireDefault(require("../../../common/components/resources/item/ItemShow/index.js"));
+var _index4 = _interopRequireDefault(require("../../../building/components/resources/ItemFeedbackModal/index.js"));
 
-var _index5 = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
+var _index5 = _interopRequireDefault(require("../../../common/components/resources/item/ItemShow/index.js"));
+
+var _index6 = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
 
 var _Spinner = _interopRequireDefault(require("../../../common/components/shared/spinner/Spinner.js"));
 
-var _index6 = _interopRequireDefault(require("../../../common/components/resources/stimulus/StimulusEditInfo/index.js"));
+var _index7 = _interopRequireDefault(require("../../../common/components/resources/stimulus/StimulusEditInfo/index.js"));
 
-var _index7 = _interopRequireDefault(require("../../../common/components/resources/stimulus/StimulusShowInfo/index.js"));
+var _index8 = _interopRequireDefault(require("../../../common/components/resources/stimulus/StimulusShowInfo/index.js"));
 
-var _index8 = _interopRequireDefault(require("../../../common/components/shared/TagSuggestSelect/index.js"));
+var _index9 = _interopRequireDefault(require("../../../common/components/shared/TagSuggestSelect/index.js"));
 
-var _index9 = _interopRequireDefault(require("../../../common/components/resources/WarningWrapper/index.js"));
+var _index10 = _interopRequireDefault(require("../../../common/components/resources/WarningWrapper/index.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -85,7 +87,7 @@ var _stimuli = require("../../../building/api/stimuli.js");
 
 var _warningHelpers = require("../../../common/util/warningHelpers.js");
 
-var _index10 = _interopRequireDefault(require("../NavWrapper/index.js"));
+var _index11 = _interopRequireDefault(require("../NavWrapper/index.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
 
@@ -333,6 +335,22 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
         return this.isItemEntry() ? (0, _formatMessage.default)('Edit Question') : (0, _formatMessage.default)('Edit Stimulus');
       }
     }
+  }, {
+    key: "renderBankBreadCrumbLink",
+    value: function renderBankBreadCrumbLink() {
+      return (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
+        key: "bank",
+        onClick: this.navigateToBank,
+        ref: this.setNavToBankRef
+      }, this.props.bank.title);
+    }
+  }, {
+    key: "renderBankEntryBreadCrumbLink",
+    value: function renderBankEntryBreadCrumbLink() {
+      return (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
+        key: "bankEntry"
+      }, this.entryLinkName());
+    }
   }, {
     key: "renderNav",
     value: function renderNav() {
@@ -341,22 +359,19 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
           closeTray = _this$props.closeTray,
           navigateToBanks = _this$props.navigateToBanks,
           navigateToBuild = _this$props.navigateToBuild,
-          returnToUrl = _this$props.returnToUrl,
-          bank = _this$props.bank;
+          returnToUrl = _this$props.returnToUrl;
       var isScopeEmpty = !Object.keys(scope).length;
-      return (0, _emotion.jsx)(_index10.default, {
+      return (0, _emotion.jsx)(_index11.default, {
         closeTray: closeTray,
         navigateToBanks: navigateToBanks,
         navigateToBuild: navigateToBuild,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
-        canvasReferrerLinkText: isScopeEmpty ? null : scope.title
-      }, (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
-        key: "bank",
-        onClick: this.navigateToBank,
-        ref: this.setNavToBankRef
-      }, bank.title), (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
-        key: "bankEntry"
-      }, this.entryLinkName()));
+        scope: scope,
+        isCompact: this.props.isCompact,
+        iceTopNavBarEnabled: this.props.iceTopNavBarEnabled,
+        menuItemPath: "/banks/".concat(this.props.bankId, "/bank_entries/").concat(this.props.bankEntryId || 'new') // eslint-disable-line react/jsx-no-literals
+
+      }, this.renderBankBreadCrumbLink(), this.renderBankEntryBreadCrumbLink());
     }
   }, {
     key: "renderTitle",
@@ -396,7 +411,7 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
         as: "h2"
       }, entryName, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, separator), itemIdentifier))), this.renderTitle(entry), (0, _emotion.jsx)("div", {
         css: this.props.styles.rightHeader
-      }, (0, _emotion.jsx)(_index.default, props)));
+      }, (0, _emotion.jsx)(_index2.default, props)));
     }
   }, {
     key: "hasPendingTagModifications",
@@ -634,14 +649,14 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       var propsFunc = this.isItemEntry() ? _warningHelpers.propsForItemVersioningWrapper : _warningHelpers.propsForStimulusVersioningWrapper;
       var versioningProps = propsFunc(entry.isImmutable(), this.props.shouldClone, this.props.setShouldClone, this.navigateToBank, true);
       var canEdit = !entry.isImmutable() || this.props.shouldClone;
-      var ItemComponent = canEdit ? _index2.default : _index4.default;
-      var StimulusComponent = canEdit ? _index6.default : _index7.default;
+      var ItemComponent = canEdit ? _index3.default : _index5.default;
+      var StimulusComponent = canEdit ? _index7.default : _index8.default;
       var EntryComponent = this.isItemEntry() ? ItemComponent : StimulusComponent;
       var entryType = bankEntry.entryType;
       var entryId = this.getBankEntryId(bankEntry);
 
       var tags = function tags() {
-        return (0, _emotion.jsx)(_index8.default, {
+        return (0, _emotion.jsx)(_index9.default, {
           allowNewTags: true,
           noMatchText: (0, _formatMessage.default)('Enter a tag to find or create'),
           parentType: entryType,
@@ -654,7 +669,7 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       var editWarning = this.isItemEntry() ? (0, _formatMessage.default)('Edits made here will appear on any assessment using this question.') : (0, _formatMessage.default)('Edits made here will appear on any assessment using this stimulus.');
       return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
         css: this.props.styles.entryEdit
-      }, (0, _emotion.jsx)(_index9.default, versioningProps, canEdit && (0, _emotion.jsx)(_uiAlerts.Alert, {
+      }, (0, _emotion.jsx)(_index10.default, versioningProps, canEdit && (0, _emotion.jsx)(_uiAlerts.Alert, {
         renderCloseButtonLabel: (0, _formatMessage.default)('Dismiss'),
         margin: "0 0 medium 0"
       }, (0, _emotion.jsx)(_uiText.Text, {
@@ -665,7 +680,7 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
         css: this.props.styles.leftFooter
       }, this.renderFeedbackSection()), (0, _emotion.jsx)("div", {
         css: this.props.styles.rightFooter
-      }, (0, _emotion.jsx)(_index.default, props))));
+      }, (0, _emotion.jsx)(_index2.default, props))));
     }
   }, {
     key: "render",
@@ -676,9 +691,16 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
         return _ref3;
       }
 
-      return (0, _emotion.jsx)(_index5.default, null, this.renderNav(), (0, _emotion.jsx)("div", {
+      return (0, _emotion.jsx)(_index6.default, null, this.renderNav(), (0, _emotion.jsx)("div", {
         css: this.props.styles.content
-      }, this.renderHeader(entry), this.renderEntry(entry), !this.props.isCompact && (0, _emotion.jsx)(_index3.default, {
+      }, this.props.iceTopNavBarEnabled && (0, _emotion.jsx)("div", {
+        css: this.props.styles.breadcrumb
+      }, (0, _emotion.jsx)(_index.HeaderBreadCrumb, {
+        returnToUrl: this.props.returnToUrl,
+        scope: this.props.scope,
+        navigateToBanks: this.props.navigateToBanks,
+        navigateToBuild: this.props.navigateToBuild
+      }, this.renderBankBreadCrumbLink(), this.renderBankEntryBreadCrumbLink())), this.renderHeader(entry), this.renderEntry(entry), !this.props.isCompact && (0, _emotion.jsx)(_index4.default, {
         parentId: this.props.bankId,
         parentType: _quizCommon.PARENT_TYPE_BANK
       })));
@@ -731,6 +753,7 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   updateItem: _propTypes.default.func.isRequired,
   updateStimulus: _propTypes.default.func.isRequired,
   useBankTags: _propTypes.default.bool,
+  iceTopNavBarEnabled: _propTypes.default.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: _propTypes.default.object
 }, _class2.defaultProps = {
@@ -744,7 +767,8 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   pendingDeletionTags: _immutable.default.List(),
   tagAssociations: _immutable.default.List(),
   tagInput: null,
-  useBankTags: false
+  useBankTags: false,
+  iceTopNavBarEnabled: false
 }, _temp)) || _class);
 exports.BankEntry = BankEntry;
 var _default = BankEntry;

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

@@ -19,6 +19,9 @@ var generateStyle = function generateStyle(componentTheme) {
       padding: "".concat(componentTheme.contentPaddingTopBottom, " ").concat(componentTheme.contentPaddingLeftRight),
       backgroundColor: componentTheme.contentBackgroundColor
     },
+    breadcrumb: {
+      marginBottom: "".concat(componentTheme.breadCrumbMarginBottom)
+    },
     entryRow: {
       marginBottom: componentTheme.entryRowMargin
     },

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

@@ -12,6 +12,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
       borders = _ref.borders;
   return {
     contentBackgroundColor: colors.white,
+    contentPaddingTopBottom: 0,
+    contentPaddingLeftRight: 0,
+    breadCrumbMarginBottom: spacing.large,
     entryRowMargin: spacing.small,
     headerRowColor: colors.ash,
     headerRowPadding: spacing.small,

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

@@ -51,17 +51,19 @@ var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
 
 var _index = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
 
-var _index2 = _interopRequireDefault(require("../../../common/components/shared/PaginatedCollection/index.js"));
+var _index2 = require("../HeaderBreadCrumb/index.js");
+
+var _index3 = _interopRequireDefault(require("../../../common/components/shared/PaginatedCollection/index.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _quizCommon = require("@instructure/quiz-common");
 
-var _index3 = _interopRequireDefault(require("../../../banks/components/BanksList/index.js"));
+var _index4 = _interopRequireDefault(require("../../../banks/components/BanksList/index.js"));
 
-var _index4 = _interopRequireDefault(require("../../../banks/components/CreateBankModal/index.js"));
+var _index5 = _interopRequireDefault(require("../../../banks/components/CreateBankModal/index.js"));
 
-var _index5 = _interopRequireDefault(require("../NavWrapper/index.js"));
+var _index6 = _interopRequireDefault(require("../NavWrapper/index.js"));
 
 var _noResults = _interopRequireDefault(require("../noResults.svg"));
 
@@ -69,7 +71,7 @@ var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
-var _index6 = _interopRequireDefault(require("../AsyncSearch/index.js"));
+var _index7 = _interopRequireDefault(require("../AsyncSearch/index.js"));
 
 var _dec, _class, _class2, _temp;
 
@@ -220,7 +222,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     };
 
     _this.renderRecords = function (recordIds) {
-      return (0, _emotion.jsx)(_index3.default, {
+      return (0, _emotion.jsx)(_index4.default, {
         createBankButton: _this.createBankButton,
         currentUser: _this.props.currentUser,
         focusCreateBankButton: _this.focusCreateBankButton,
@@ -354,7 +356,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         "data-automation": "sdk-search-bank-textinput"
       })), this.props.subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: 4
-      }, (0, _emotion.jsx)(_index6.default, {
+      }, (0, _emotion.jsx)(_index7.default, {
         getShareableSubaccounts: this.props.getShareableSubaccounts,
         improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
         minChars: this.props.minChars,
@@ -417,7 +419,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     key: "renderHeader",
     value: function renderHeader() {
       return (0, _emotion.jsx)("div", {
-        css: [this.props.styles.filters, !this.props.improvedBankSharingEnabled ? this.props.styles.borderedBottom : {}]
+        css: [this.props.styles.header, !this.props.improvedBankSharingEnabled ? this.props.styles.borderedBottom : {}]
       }, (0, _emotion.jsx)(_uiHeading.Heading, {
         as: this.props.isCompact ? 'h2' : 'h1',
         level: "h1"
@@ -441,17 +443,20 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
           navigateToBuild = _this$props.navigateToBuild,
           returnToUrl = _this$props.returnToUrl;
       var isScopeEmpty = !Object.keys(scope).length;
-      return (0, _emotion.jsx)(_index5.default, {
+      return (0, _emotion.jsx)(_index6.default, {
         closeTray: closeTray,
         navigateToBuild: navigateToBuild,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
-        canvasReferrerLinkText: isScopeEmpty ? null : scope.title
+        scope: scope,
+        isCompact: this.props.isCompact,
+        iceTopNavBarEnabled: this.props.iceTopNavBarEnabled,
+        menuItemPath: "/banks"
       });
     }
   }, {
     key: "renderBanksSearchResults",
     value: function renderBanksSearchResults() {
-      return (0, _emotion.jsx)(_index2.default, {
+      return (0, _emotion.jsx)(_index3.default, {
         empty: this.emptyPage(),
         getPage: this.getPage,
         renderRecords: this.renderRecords,
@@ -463,7 +468,13 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     value: function render() {
       return (0, _emotion.jsx)(_index.default, null, this.renderNav(), (0, _emotion.jsx)("div", {
         css: this.props.styles.content
-      }, this.renderHeader(), this.props.improvedBankSharingEnabled && this.renderFilters(), this.renderBanksSearchResults(), (0, _emotion.jsx)(_index4.default, {
+      }, this.props.iceTopNavBarEnabled && (0, _emotion.jsx)("div", {
+        css: this.props.styles.breadcrumb
+      }, (0, _emotion.jsx)(_index2.HeaderBreadCrumb, {
+        returnToUrl: this.props.returnToUrl,
+        scope: this.props.scope,
+        navigateToBuild: this.props.navigateToBuild
+      })), this.renderHeader(), this.props.improvedBankSharingEnabled && this.renderFilters(), this.renderBanksSearchResults(), (0, _emotion.jsx)(_index5.default, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -532,6 +543,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   itemBankSearchTableEnabled: _propTypes.default.bool,
   setUI: _propTypes.default.func.isRequired,
   subAccountBankSharingEnabled: _propTypes.default.bool,
+  iceTopNavBarEnabled: _propTypes.default.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: _propTypes.default.object
 }, _class2.defaultProps = {
@@ -559,7 +571,8 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   newItemBankFilterNamesEnabled: false,
   usedByCourseEnabled: false,
   itemBankSearchTableEnabled: false,
-  subAccountBankSharingEnabled: false
+  subAccountBankSharingEnabled: false,
+  iceTopNavBarEnabled: false
 }, _class2.contextTypes = {
   locale: _propTypes.default.string
 }, _temp)) || _class);

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

@@ -11,11 +11,14 @@ var generateStyle = function generateStyle(componentTheme) {
       padding: "".concat(componentTheme.contentPaddingTopBottom, " ").concat(componentTheme.contentPaddingLeftRight),
       backgroundColor: componentTheme.contentBackgroundColor
     },
+    breadcrumb: {
+      marginBottom: "".concat(componentTheme.breadCrumbMarginBottom)
+    },
     header: {
       display: 'flex',
       flexDirection: 'row',
-      paddingBottom: componentTheme.headerPadding,
-      justifyContent: 'space-between'
+      justifyContent: 'space-between',
+      paddingBottom: "".concat(componentTheme.headerPaddingBottom)
     },
     borderedBottom: {
       borderBottom: "".concat(componentTheme.headerBorderWidth, " solid ").concat(componentTheme.headerBorderColor)
@@ -24,7 +27,6 @@ var generateStyle = function generateStyle(componentTheme) {
       paddingBottom: '2rem'
     },
     filtersRow: {
-      marginTop: '1.5rem',
       display: 'flex',
       flexDirection: 'row'
     }

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

@@ -11,9 +11,10 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
       borders = _ref.borders;
   return {
     contentBackgroundColor: colors.white,
-    contentPaddingTopBottom: spacing.small,
+    contentPaddingTopBottom: spacing.medium,
     contentPaddingLeftRight: spacing.xLarge,
-    headerPadding: spacing.small,
+    breadCrumbMarginBottom: spacing.large,
+    headerPaddingBottom: spacing.large,
     headerBorderWidth: borders.widthSmall,
     headerBorderColor: colors.tiara
   };

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

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HeaderBreadCrumb = 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 _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiBreadcrumb = require("@instructure/ui-breadcrumb");
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var HeaderBreadCrumb = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(HeaderBreadCrumb, _Component);
+
+  var _super = (0, _createSuper2.default)(HeaderBreadCrumb);
+
+  function HeaderBreadCrumb() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HeaderBreadCrumb);
+
+    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.setItemBanksRef = function (node) {
+      _this.itemBanksRef = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(HeaderBreadCrumb, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.navigateToBuild && this.props.navigateToBanks && this.itemBanksRef) {
+        _reactDom.default.findDOMNode(this.itemBanksRef).focus();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          returnToUrl = _this$props.returnToUrl,
+          scope = _this$props.scope,
+          navigateToBanks = _this$props.navigateToBanks,
+          renderIcon = _this$props.renderIcon,
+          setItemBanksRef = _this$props.setItemBanksRef,
+          children = _this$props.children;
+      var isScopeEmpty = !Object.keys(scope).length;
+      var canvasReferrerLinkText = isScopeEmpty ? null : scope.title;
+
+      var canvasReferrerLink = returnToUrl && canvasReferrerLinkText && /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+        key: "Context",
+        href: returnToUrl,
+        target: "_top"
+      }, canvasReferrerLinkText);
+
+      var banksLink = /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+        key: "Banks",
+        onClick: navigateToBanks,
+        renderIcon: renderIcon,
+        ref: setItemBanksRef || this.setItemBanksRef
+      }, (0, _formatMessage.default)('Item Banks')); // If Breadcrumb has multiple children (even if 2nd is null), it will
+      // render the `>` icon, which we don't want if there are no children.
+
+
+      var breadCrumbLinks = [banksLink];
+
+      if (children) {
+        breadCrumbLinks = breadCrumbLinks.concat(children);
+      }
+
+      if (canvasReferrerLink) breadCrumbLinks.unshift(canvasReferrerLink);
+      return /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.Breadcrumb, {
+        label: (0, _formatMessage.default)('You are here:'),
+        size: this.props.isCompact ? 'small' : 'medium'
+      }, breadCrumbLinks);
+    }
+  }]);
+  HeaderBreadCrumb.displayName = "HeaderBreadCrumb";
+  return HeaderBreadCrumb;
+}(_react.Component);
+
+exports.HeaderBreadCrumb = HeaderBreadCrumb;
+HeaderBreadCrumb.propTypes = {
+  returnToUrl: _propTypes.default.string,
+  scope: _propTypes.default.objectOf(_propTypes.default.shape({
+    type: _propTypes.default.string,
+    uuid: _propTypes.default.string,
+    title: _propTypes.default.string
+  })),
+  navigateToBuild: _propTypes.default.func,
+  navigateToBanks: _propTypes.default.func,
+  isCompact: _propTypes.default.bool,
+  setItemBanksRef: _propTypes.default.func,
+  renderIcon: _propTypes.default.node,
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node])
+};
+HeaderBreadCrumb.defaultProps = {
+  returnToUrl: null,
+  scope: {},
+  navigateToBuild: null,
+  navigateToBanks: null,
+  isCompact: false,
+  setItemBanksRef: null,
+  renderIcon: null,
+  children: null
+};
+var _default = HeaderBreadCrumb;
+exports.default = _default;