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

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [20.10.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.9.0...v20.10.0) (2024-03-12)
+
+
+### Bug Fixes
+
+* **AsyncSearch:** do not error on single result blur ([7d9df03](https://gerrit.instructure.com/quizzes-ui/commits/7d9df037951d6e2565087a758c70b5daafed5eed))
+
+
+### Features
+
+* **sub-account-bank-sharing:** Add account search to bank browsing page ([20c0e20](https://gerrit.instructure.com/quizzes-ui/commits/20c0e2073b0f835529113e082eadb37f25b68d8a))
+* **TopNavBar:** Add new TopNavBar to bank pages ([b9c04a9](https://gerrit.instructure.com/quizzes-ui/commits/b9c04a9078137128a8237c782958ab7c844c5367))
+
+
+
+
+
 # [20.9.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.8.0...v20.9.0) (2024-03-05)
 
 

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

@@ -23,6 +23,7 @@ import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { withStyle, jsx } from '@instructure/emotion';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { View } from '@instructure/ui-view';
+import { HeaderBreadCrumb } from "../HeaderBreadCrumb/index.js";
 import BankRecord from "../../../common/records/Bank.js";
 import Page from "../../../common/components/layout/Page/index.js";
 import PaginatedCollection from "../../../common/components/shared/PaginatedCollection/index.js";
@@ -75,6 +76,12 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       _this.createBankEntryButton = c;
     };
 
+    _this.renderBankBreadCrumbLink = function () {
+      return jsx(BreadcrumbLink, {
+        key: "bank"
+      }, _this.props.bank.title);
+    };
+
     _this.toggleCheckbox = function () {
       // disable until request resolves
       _this.setState({
@@ -310,10 +317,12 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         navigateToBuild: navigateToBuild,
         renderHeaderMenu: this.renderHeaderMenu,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
-        canvasReferrerLinkText: isScopeEmpty ? null : scope.title
-      }, jsx(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",
@@ -453,7 +462,14 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     value: function render() {
       return jsx(Page, null, this.renderModals(), this.renderNav(), jsx("div", {
         css: this.props.styles.content
-      }, this.renderName(), this.renderCheckbox(), jsx("div", {
+      }, this.props.iceTopNavBarEnabled && jsx("div", {
+        css: this.props.styles.breadcrumb
+      }, jsx(HeaderBreadCrumb, {
+        returnToUrl: this.props.returnToUrl,
+        scope: this.props.scope,
+        navigateToBanks: this.props.navigateToBanks,
+        navigateToBuild: this.props.navigateToBuild
+      }, this.renderBankBreadCrumbLink())), this.renderName(), this.renderCheckbox(), jsx("div", {
         css: this.props.styles.topMenu
       }, this.renderTopLeftMenu(), this.renderTopRightMenu()), this.renderSearch(), jsx(PaginatedCollection, {
         empty: this.emptyLoadText(),
@@ -505,6 +521,7 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   showShareBankFromTray: PropTypes.bool,
   updateSharedBankPermission: PropTypes.func.isRequired,
   withConfirm: PropTypes.func.isRequired,
+  iceTopNavBarEnabled: PropTypes.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: PropTypes.object
 }, _class2.defaultProps = {
@@ -522,6 +539,7 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   returnToUrl: null,
   isQuizContentLocked: false,
   showShareBankFromTray: false,
-  courseSharedBank: null
+  courseSharedBank: null,
+  iceTopNavBarEnabled: false
 }, _temp)) || _class);
 export default Bank;

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

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

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

@@ -4,9 +4,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/es/banks/components/BankEntry/presenter.js

@@ -27,6 +27,7 @@ import { IconDiscussionLine, IconDiscussionSolid } from '@instructure/ui-icons';
 import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { TextInput } from '@instructure/ui-text-input';
 import { withStyle, jsx } from '@instructure/emotion';
+import { HeaderBreadCrumb } from "../HeaderBreadCrumb/index.js";
 import EntrySave from "../../../common/components/resources/entry/EntrySave/index.js";
 import ItemEdit from "../../../common/components/resources/item/ItemEdit/index.js";
 import ItemFeedbackModal from "../../../building/components/resources/ItemFeedbackModal/index.js";
@@ -284,6 +285,22 @@ export var BankEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
         return this.isItemEntry() ? t('Edit Question') : t('Edit Stimulus');
       }
     }
+  }, {
+    key: "renderBankBreadCrumbLink",
+    value: function renderBankBreadCrumbLink() {
+      return jsx(BreadcrumbLink, {
+        key: "bank",
+        onClick: this.navigateToBank,
+        ref: this.setNavToBankRef
+      }, this.props.bank.title);
+    }
+  }, {
+    key: "renderBankEntryBreadCrumbLink",
+    value: function renderBankEntryBreadCrumbLink() {
+      return jsx(BreadcrumbLink, {
+        key: "bankEntry"
+      }, this.entryLinkName());
+    }
   }, {
     key: "renderNav",
     value: function renderNav() {
@@ -292,22 +309,19 @@ export var BankEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
           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 jsx(NavWrapper, {
         closeTray: closeTray,
         navigateToBanks: navigateToBanks,
         navigateToBuild: navigateToBuild,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
-        canvasReferrerLinkText: isScopeEmpty ? null : scope.title
-      }, jsx(BreadcrumbLink, {
-        key: "bank",
-        onClick: this.navigateToBank,
-        ref: this.setNavToBankRef
-      }, bank.title), jsx(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",
@@ -629,7 +643,14 @@ export var BankEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
 
       return jsx(Page, null, this.renderNav(), jsx("div", {
         css: this.props.styles.content
-      }, this.renderHeader(entry), this.renderEntry(entry), !this.props.isCompact && jsx(ItemFeedbackModal, {
+      }, this.props.iceTopNavBarEnabled && jsx("div", {
+        css: this.props.styles.breadcrumb
+      }, jsx(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 && jsx(ItemFeedbackModal, {
         parentId: this.props.bankId,
         parentType: PARENT_TYPE_BANK
       })));
@@ -683,6 +704,7 @@ export var BankEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
   updateItem: PropTypes.func.isRequired,
   updateStimulus: PropTypes.func.isRequired,
   useBankTags: PropTypes.bool,
+  iceTopNavBarEnabled: PropTypes.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: PropTypes.object
 }, _class2.defaultProps = {
@@ -696,6 +718,7 @@ export var BankEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
   pendingDeletionTags: Immutable.List(),
   tagAssociations: Immutable.List(),
   tagInput: null,
-  useBankTags: false
+  useBankTags: false,
+  iceTopNavBarEnabled: false
 }, _temp)) || _class);
 export default BankEntry;

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

@@ -10,6 +10,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/es/banks/components/BankEntry/theme.js

@@ -5,6 +5,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/es/banks/components/Banks/presenter.js

@@ -23,6 +23,7 @@ import { Grid } from '@instructure/ui-grid';
 import { View } from '@instructure/ui-view';
 import debounce from 'lodash/fp/debounce';
 import Page from "../../../common/components/layout/Page/index.js";
+import { HeaderBreadCrumb } from "../HeaderBreadCrumb/index.js";
 import PaginatedCollection from "../../../common/components/shared/PaginatedCollection/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { BANKS_BANK_FILTERS, BANKS_BANK_PAGINATION, CREATE_BANK_MODAL, SHARED_WITH_ACCOUNT } from '@instructure/quiz-common';
@@ -378,7 +379,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     key: "renderHeader",
     value: function renderHeader() {
       return 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 : {}]
       }, jsx(Heading, {
         as: this.props.isCompact ? 'h2' : 'h1',
         level: "h1"
@@ -406,7 +407,10 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         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"
       });
     }
   }, {
@@ -424,7 +428,13 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     value: function render() {
       return jsx(Page, null, this.renderNav(), jsx("div", {
         css: this.props.styles.content
-      }, this.renderHeader(), this.props.improvedBankSharingEnabled && this.renderFilters(), this.renderBanksSearchResults(), jsx(CreateBankModal, {
+      }, this.props.iceTopNavBarEnabled && jsx("div", {
+        css: this.props.styles.breadcrumb
+      }, jsx(HeaderBreadCrumb, {
+        returnToUrl: this.props.returnToUrl,
+        scope: this.props.scope,
+        navigateToBuild: this.props.navigateToBuild
+      })), this.renderHeader(), this.props.improvedBankSharingEnabled && this.renderFilters(), this.renderBanksSearchResults(), jsx(CreateBankModal, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -494,6 +504,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   itemBankSearchTableEnabled: PropTypes.bool,
   setUI: PropTypes.func.isRequired,
   subAccountBankSharingEnabled: PropTypes.bool,
+  iceTopNavBarEnabled: PropTypes.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: PropTypes.object
 }, _class2.defaultProps = {
@@ -521,7 +532,8 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   newItemBankFilterNamesEnabled: false,
   usedByCourseEnabled: false,
   itemBankSearchTableEnabled: false,
-  subAccountBankSharingEnabled: false
+  subAccountBankSharingEnabled: false,
+  iceTopNavBarEnabled: false
 }, _class2.contextTypes = {
   locale: PropTypes.string
 }, _temp)) || _class);

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

@@ -4,11 +4,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)
@@ -17,7 +20,6 @@ var generateStyle = function generateStyle(componentTheme) {
       paddingBottom: '2rem'
     },
     filtersRow: {
-      marginTop: '1.5rem',
       display: 'flex',
       flexDirection: 'row'
     }

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

@@ -4,9 +4,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/es/banks/components/HeaderBreadCrumb/index.js

@@ -0,0 +1,106 @@
+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, { Component } from 'react';
+import PropTypes from 'prop-types';
+import t from '@instructure/quiz-i18n/es/format-message';
+import { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb';
+import ReactDOM from 'react-dom';
+export var HeaderBreadCrumb = /*#__PURE__*/function (_Component) {
+  _inherits(HeaderBreadCrumb, _Component);
+
+  var _super = _createSuper(HeaderBreadCrumb);
+
+  function HeaderBreadCrumb() {
+    var _this;
+
+    _classCallCheck(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;
+  }
+
+  _createClass(HeaderBreadCrumb, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.navigateToBuild && this.props.navigateToBanks && this.itemBanksRef) {
+        ReactDOM.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.createElement(BreadcrumbLink, {
+        key: "Context",
+        href: returnToUrl,
+        target: "_top"
+      }, canvasReferrerLinkText);
+      var banksLink = /*#__PURE__*/React.createElement(BreadcrumbLink, {
+        key: "Banks",
+        onClick: navigateToBanks,
+        renderIcon: renderIcon,
+        ref: setItemBanksRef || this.setItemBanksRef
+      }, t('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.createElement(Breadcrumb, {
+        label: t('You are here:'),
+        size: this.props.isCompact ? 'small' : 'medium'
+      }, breadCrumbLinks);
+    }
+  }]);
+
+  HeaderBreadCrumb.displayName = "HeaderBreadCrumb";
+  return HeaderBreadCrumb;
+}(Component);
+HeaderBreadCrumb.propTypes = {
+  returnToUrl: PropTypes.string,
+  scope: PropTypes.objectOf(PropTypes.shape({
+    type: PropTypes.string,
+    uuid: PropTypes.string,
+    title: PropTypes.string
+  })),
+  navigateToBuild: PropTypes.func,
+  navigateToBanks: PropTypes.func,
+  isCompact: PropTypes.bool,
+  setItemBanksRef: PropTypes.func,
+  renderIcon: PropTypes.node,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+HeaderBreadCrumb.defaultProps = {
+  returnToUrl: null,
+  scope: {},
+  navigateToBuild: null,
+  navigateToBanks: null,
+  isCompact: false,
+  setItemBanksRef: null,
+  renderIcon: null,
+  children: null
+};
+export default HeaderBreadCrumb;

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

@@ -11,19 +11,17 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { Children } from '@instructure/ui-prop-types';
 import { ReturnButton } from "../../../common/components/shared/return_button/ReturnButton.js";
+import { NavBar } from "../../../common/components/layout/navbar/index.js";
+import { SecondaryNavBarButton } from "../../../common/components/layout/navbar/SecondaryNavBarButton/index.js";
+import { HeaderBreadCrumb } from "../HeaderBreadCrumb/index.js";
 import { CloseButton, Button } from '@instructure/ui-buttons';
-import { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb';
+import { BreadcrumbLink } from '@instructure/ui-breadcrumb';
 import { IconBankLine } from '@instructure/ui-icons';
 import { View } from '@instructure/ui-view';
 import { withStyle, jsx, Global } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-
-var _ref = jsx(IconBankLine, {
-  size: "x-small"
-});
-
 var NavWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NavWrapper, _Component);
 
@@ -63,43 +61,29 @@ var NavWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
         ReactDOM.findDOMNode(this.itemBanksRef).focus();
       }
     }
-  }, {
-    key: "renderBreadcrumbLinks",
-    value: function renderBreadcrumbLinks() {
-      var _this$props = this.props,
-          returnToUrl = _this$props.returnToUrl,
-          canvasReferrerLinkText = _this$props.canvasReferrerLinkText;
-      var canvasReferrerLink = returnToUrl && canvasReferrerLinkText && jsx(BreadcrumbLink, {
-        key: "Context",
-        href: returnToUrl,
-        target: "_top"
-      }, canvasReferrerLinkText);
-      var banksLinks = jsx(BreadcrumbLink, {
-        ref: this.setItemBanksRef,
-        renderIcon: _ref,
-        key: "Banks",
-        onClick: this.props.navigateToBanks
-      }, t('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 = [banksLinks];
-      if (this.props.children) breadCrumbLinks.push(this.props.children);
-      if (canvasReferrerLink) breadCrumbLinks.unshift(canvasReferrerLink);
-      return breadCrumbLinks;
-    }
   }, {
     key: "renderReturnButton",
     value: function renderReturnButton() {
-      var _this$props2 = this.props,
-          navigateToBuild = _this$props2.navigateToBuild,
-          closeTray = _this$props2.closeTray,
-          returnToUrl = _this$props2.returnToUrl;
+      var _this$props = this.props,
+          navigateToBuild = _this$props.navigateToBuild,
+          closeTray = _this$props.closeTray,
+          returnToUrl = _this$props.returnToUrl,
+          iceTopNavBarEnabled = _this$props.iceTopNavBarEnabled;
 
       if (!closeTray && returnToUrl) {
         return jsx(ReturnButton, {
-          returnToUrl: returnToUrl
+          returnToUrl: returnToUrl,
+          iceTopNavBarEnabled: iceTopNavBarEnabled
         });
       } else if (navigateToBuild) {
+        if (iceTopNavBarEnabled) {
+          return jsx(SecondaryNavBarButton, {
+            id: "ReturnButton",
+            variant: "button",
+            onClick: navigateToBuild
+          }, t('Return'));
+        }
+
         return jsx(Button, {
           onClick: navigateToBuild
         }, t('Return'));
@@ -120,6 +104,16 @@ var NavWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
   }, {
     key: "render",
     value: function render() {
+      if (this.props.iceTopNavBarEnabled) {
+        return jsx(NavBar, {
+          menuItems: [{
+            path: this.props.menuItemPath,
+            text: 'Item Banks'
+          }],
+          actionItems: [this.renderReturnButton()]
+        });
+      }
+
       return jsx(View, null, jsx(Global, {
         styles: {
           'body.tox-fullscreen .nav': {
@@ -130,10 +124,17 @@ var NavWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
         css: this.props.styles.nav
       }, this.renderCloseButton(), jsx("div", {
         css: this.props.styles.crumbs
-      }, jsx(Breadcrumb, {
-        size: "small",
-        label: t('You are here:')
-      }, this.renderBreadcrumbLinks())), this.renderReturnButton(), this.props.renderHeaderMenu()));
+      }, jsx(HeaderBreadCrumb, {
+        returnToUrl: this.props.returnToUrl,
+        navigateToBanks: this.props.navigateToBanks,
+        navigateToBuild: this.props.navigateToBuild,
+        scope: this.props.scope,
+        isCompact: this.props.isCompact,
+        setItemBanksRef: this.setItemBanksRef,
+        renderIcon: jsx(IconBankLine, {
+          size: this.props.isCompact ? 'x-small' : null
+        })
+      }, this.props.children)), this.renderReturnButton(), this.props.renderHeaderMenu()));
     }
   }]);
 
@@ -147,7 +148,14 @@ var NavWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
   renderHeaderMenu: PropTypes.func,
   trayOpen: PropTypes.bool.isRequired,
   returnToUrl: PropTypes.string,
-  canvasReferrerLinkText: PropTypes.string,
+  scope: PropTypes.shape({
+    type: PropTypes.string,
+    uuid: PropTypes.string,
+    title: PropTypes.string
+  }).isRequired,
+  isCompact: PropTypes.bool,
+  iceTopNavBarEnabled: PropTypes.bool,
+  menuItemPath: PropTypes.string,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: PropTypes.object
 }, _class2.defaultProps = {
@@ -157,6 +165,8 @@ var NavWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
   navigateToBuild: null,
   renderHeaderMenu: Function.prototype,
   returnToUrl: null,
-  canvasReferrerLinkText: null
+  isCompact: false,
+  iceTopNavBarEnabled: false,
+  menuItemPath: ''
 }, _temp)) || _class);
 export default NavWrapper;

package/es/common/components/shared/return_button/ReturnButton.js

@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@instructure/ui-buttons';
 import t from '@instructure/quiz-i18n/es/format-message';
+import { SecondaryNavBarButton } from "../../layout/navbar/SecondaryNavBarButton/index.js";
 export var ReturnButton = /*#__PURE__*/function (_Component) {
   _inherits(ReturnButton, _Component);
 
@@ -24,6 +25,16 @@ export var ReturnButton = /*#__PURE__*/function (_Component) {
         return null;
       }
 
+      if (this.props.iceTopNavBarEnabled) {
+        return /*#__PURE__*/React.createElement(SecondaryNavBarButton, {
+          id: "ReturnButton",
+          variant: "button",
+          "data-automation": "sdk-return-button",
+          href: this.props.returnToUrl,
+          target: "_top"
+        }, this.props.text);
+      }
+
       return /*#__PURE__*/React.createElement(Button, {
         "data-automation": "sdk-return-button",
         href: this.props.returnToUrl,
@@ -37,10 +48,12 @@ export var ReturnButton = /*#__PURE__*/function (_Component) {
 }(Component);
 ReturnButton.propTypes = {
   returnToUrl: PropTypes.string,
-  text: PropTypes.string
+  text: PropTypes.string,
+  iceTopNavBarEnabled: PropTypes.bool
 };
 ReturnButton.defaultProps = {
   returnToUrl: void 0,
-  text: t('Return')
+  text: t('Return'),
+  iceTopNavBarEnabled: false
 };
 export default ReturnButton;