@instructure/quiz-core 20.11.3-rc.11 → 20.11.3-rc.13

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

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

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

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

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

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

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

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

package/es/common/components/layout/navbar/SecondaryNavBarButton/index.js

@@ -54,7 +54,7 @@ export var SecondaryNavBarButton = (_dec = withStyle(generateStyle, generateComp
 
   SecondaryNavBarButton.displayName = "SecondaryNavBarButton";
   return SecondaryNavBarButton;
-}(Component), _class2.propTypes = {
+}(Component), _class2.displayName = 'TopNavBarItem', _class2.propTypes = {
   children: PropTypes.string.isRequired,
   styles: PropTypes.object,
   makeStyles: PropTypes.func

package/es/common/components/layout/navbar/index.js

@@ -1,39 +1,136 @@
-import { bindActionCreators } from 'redux';
-import partial from 'lodash/partial';
-import { connect } from "../../../../common/react-redux.js";
-import * as modalActions from "../../../../common/actions/modal.js";
-import { set as setUI } from "../../../../common/actions/ui.js";
-import { BUILD_TRAY_OPEN, BUILD_TRAY_BUTTON_REF } from '@instructure/quiz-common';
-import { generateImportModalId } from "../../ImportModal/index.js";
-import { NavBar as NavBarPresenter } from "./presenter.js";
-import { getActiveQuiz } from "../../../selectors/quizzes.js";
-import { featureOn } from "../../../util/featureCheck.js";
-import { startQuizExportJob } from "../../../actions/quizExport.js";
-import { addAlert, addInfo } from "../../../actions/alerts.js";
-export function mapStateToProps(state) {
-  var quiz = getActiveQuiz(state);
-  return {
-    activeQuizId: quiz.id,
-    canExport: !state.getIn(['quizExport', "activeQuiz".concat(quiz.id)]),
-    canImport: quiz.canImport(),
-    hasQuestions: quiz.hasQuestions(),
-    isEditing: state.get('editing') && state.get('editing').some(function (elem) {
-      return elem;
-    }),
-    printingEnabled: featureOn('printing')
-  };
-}
-
-var mapDispatchToProps = function mapDispatchToProps(dispatch) {
-  return {
-    addAlert: bindActionCreators(addAlert, dispatch),
-    addInfo: bindActionCreators(addInfo, dispatch),
-    openBanksTray: bindActionCreators(setUI.bind(void 0, BUILD_TRAY_OPEN, true), dispatch),
-    setBanksTrayButtonRef: bindActionCreators(partial(setUI, BUILD_TRAY_BUTTON_REF), dispatch),
-    startExport: bindActionCreators(startQuizExportJob, dispatch),
-    openModal: bindActionCreators(modalActions.openModal.bind(modalActions, generateImportModalId('qtiImport')), dispatch)
-  };
-};
-
-export var NavBar = connect(mapStateToProps, mapDispatchToProps)(NavBarPresenter);
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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";
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { TopNavBar } from '@instructure/ui-top-nav-bar';
+import { IconQuizLine } from '@instructure/ui-icons';
+import t from '@instructure/quiz-i18n/es/format-message';
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconQuizLine, {
+  color: "primary",
+  size: "small"
+});
+
+export var NavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(NavBar, _Component);
+
+  var _super = _createSuper(NavBar);
+
+  function NavBar() {
+    var _this;
+
+    _classCallCheck(this, NavBar);
+
+    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.hiddenActionItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return t('{hiddenChildrenCount} more actions', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.hiddenMenuItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return t('{hiddenChildrenCount} More', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.renderBrand = function () {
+      return jsx(TopNavBar.Brand, {
+        screenReaderLabel: t('Quizzes'),
+        renderIcon: _ref
+      });
+    };
+
+    _this.renderMenuItems = function () {
+      return jsx(TopNavBar.MenuItems, {
+        listLabel: t('Page navigation'),
+        currentPageId: window.location.pathname,
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenMenuItemsMenuTriggerLabel
+      }, _this.props.menuItems.map(function (menuItem) {
+        return _this.renderMenuItem(menuItem);
+      }));
+    };
+
+    _this.renderMenuItem = function (menuItem) {
+      return jsx(TopNavBar.Item, {
+        id: menuItem.path,
+        key: menuItem.path,
+        onClick: function onClick() {
+          return _this.props.handleMenuItemChange(menuItem.path);
+        } // eslint-disable-line react/jsx-no-bind
+
+      }, menuItem.text);
+    };
+
+    _this.renderActionItems = function () {
+      return jsx(TopNavBar.ActionItems, {
+        listLabel: t('Actions'),
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenActionItemsMenuTriggerLabel
+      }, _toConsumableArray(_this.props.actionItems));
+    };
+
+    return _this;
+  }
+
+  _createClass(NavBar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return jsx(TopNavBar, {
+        breakpoint: this.props.styles.phoneBreakPoint,
+        mediaQueryMatch: "element",
+        inverseColor: true
+      }, function () {
+        return jsx(TopNavBar.Layout, {
+          themeOverride: {
+            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
+            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
+          },
+          navLabel: t('Quizzes navigation bar'),
+          desktopConfig: {
+            hideActionsUserSeparator: true
+          },
+          smallViewportConfig: {
+            dropdownMenuToggleButtonLabel: t('Toggle Menu'),
+            dropdownMenuLabel: t('Main Menu')
+          },
+          renderBrand: _this2.renderBrand(),
+          renderMenuItems: _this2.renderMenuItems(),
+          renderActionItems: _this2.renderActionItems()
+        });
+      });
+    }
+  }]);
+
+  NavBar.displayName = "NavBar";
+  return NavBar;
+}(Component), _class2.propTypes = {
+  menuItems: PropTypes.arrayOf(PropTypes.shape({
+    path: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired
+  })),
+  handleMenuItemChange: PropTypes.func,
+  actionItems: PropTypes.arrayOf(PropTypes.node),
+  styles: PropTypes.object
+}, _class2.defaultProps = {
+  menuItems: [],
+  handleMenuItemChange: function handleMenuItemChange() {},
+  actionItems: []
+}, _temp)) || _class);
 export default NavBar;

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

@@ -27,7 +27,8 @@ export var ReturnButton = /*#__PURE__*/function (_Component) {
 
       if (this.props.iceTopNavBarEnabled) {
         return /*#__PURE__*/React.createElement(SecondaryNavBarButton, {
-          id: "ReturnButton",
+          id: this.props.id,
+          key: this.props.id,
           variant: "button",
           "data-automation": "sdk-return-button",
           href: this.props.returnToUrl,
@@ -49,11 +50,13 @@ export var ReturnButton = /*#__PURE__*/function (_Component) {
 ReturnButton.propTypes = {
   returnToUrl: PropTypes.string,
   text: PropTypes.string,
+  id: PropTypes.string,
   iceTopNavBarEnabled: PropTypes.bool
 };
 ReturnButton.defaultProps = {
   returnToUrl: void 0,
   text: t('Return'),
+  id: 'ReturnButton',
   iceTopNavBarEnabled: false
 };
 export default ReturnButton;

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

@@ -83,6 +83,8 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
+var _ref = (0, _emotion.jsx)(_uiIcons.IconMoreSolid, null);
+
 var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Bank, _Component);
 
@@ -112,7 +114,10 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     _this.renderHeaderMenu = function () {
       if (!_this.props.isCompact) {
         return (0, _emotion.jsx)(_index7.default, {
-          bank: _this.props.bank
+          bank: _this.props.bank,
+          iceTopNavBarEnabled: _this.props.iceTopNavBarEnabled,
+          id: "BankMenu",
+          renderIcon: _ref
         });
       }
     };
@@ -137,7 +142,7 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     };
 
     _this.unshareBankWithCourse = /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(sharedBank) {
+      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) {
@@ -165,7 +170,7 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       }));
 
       return function (_x) {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }();
 
@@ -220,8 +225,8 @@ var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       }, _this.renderNewBankEntryButton());
     };
 
-    _this.announceResults = function (_ref2) {
-      var totalPages = _ref2.totalPages;
+    _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    }", {
         count: totalPages
       }); // Audibly announce when search results are ready.

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

@@ -21,10 +21,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
+var _uiView = require("@instructure/ui-view");
+
 var _uiMenu = require("@instructure/ui-menu");
 
 var _uiButtons = require("@instructure/ui-buttons");
 
+var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
+
+var _uiDrilldown = require("@instructure/ui-drilldown");
+
 var _uiIcons = require("@instructure/ui-icons");
 
 var _emotion = require("@instructure/emotion");
@@ -41,6 +47,10 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _dec, _class, _class2, _temp;
 
+var _ref = (0, _emotion.jsx)(_uiIcons.IconImportLine, {
+  "data-automation": "sdk-headermenu-import-content"
+});
+
 var HeaderMenu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(HeaderMenu, _Component);
 
@@ -54,6 +64,28 @@ var HeaderMenu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   (0, _createClass2.default)(HeaderMenu, [{
     key: "renderMenu",
     value: function renderMenu() {
+      if (this.props.iceTopNavBarEnabled) {
+        return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, {
+          id: this.props.id,
+          variant: "icon",
+          renderIcon: this.props.renderIcon,
+          showSubmenuChevron: false,
+          renderSubmenu: (0, _emotion.jsx)(_uiDrilldown.Drilldown, {
+            rootPageId: "root"
+          }, (0, _emotion.jsx)(_uiDrilldown.Drilldown.Page, {
+            id: "root"
+          }, (0, _emotion.jsx)(_uiDrilldown.Drilldown.Option, {
+            id: "import",
+            key: "import",
+            disabled: !this.props.bank.canImport(),
+            onOptionClick: this.props.openImportModal
+          }, _ref, (0, _emotion.jsx)(_uiView.View, {
+            as: "span",
+            margin: "0 0 0 x-small"
+          }, (0, _formatMessage.default)('Import Content')))))
+        }, (0, _formatMessage.default)('More Item Banking Actions'));
+      }
+
       return (0, _emotion.jsx)(_uiMenu.Menu, {
         trigger: (0, _emotion.jsx)(_uiButtons.IconButton, {
           renderIcon: _uiIcons.IconMoreSolid,
@@ -74,7 +106,9 @@ var HeaderMenu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     key: "render",
     value: function render() {
       var bank = this.props.bank;
-      return (0, _emotion.jsx)("div", null, this.renderMenu(), (0, _emotion.jsx)(_index.default, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.container
+      }, this.renderMenu(), (0, _emotion.jsx)(_index.default, {
         parentId: bank.id,
         parentType: _quizCommon.PARENT_TYPE_BANK,
         qtiImport: bank.getLatestImport(),
@@ -87,8 +121,15 @@ var HeaderMenu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
 }(_react.Component), _class2.propTypes = {
   openImportModal: _propTypes.default.func.isRequired,
   bank: _reactImmutableProptypes.default.record.isRequired,
+  iceTopNavBarEnabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  renderIcon: _propTypes.default.element,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: _propTypes.default.object
+}, _class2.defaultProps = {
+  iceTopNavBarEnabled: false,
+  id: 'BankMenu',
+  renderIcon: (0, _emotion.jsx)(_uiIcons.IconMoreSolid, null)
 }, _temp)) || _class);
 exports.HeaderMenu = HeaderMenu;
 var _default = HeaderMenu;

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

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

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

@@ -100,12 +100,15 @@ var NavWrapper = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       if (!closeTray && returnToUrl) {
         return (0, _emotion.jsx)(_ReturnButton.ReturnButton, {
           returnToUrl: returnToUrl,
+          id: "ReturnButton",
+          key: "ReturnButton",
           iceTopNavBarEnabled: iceTopNavBarEnabled
         });
       } else if (navigateToBuild) {
         if (iceTopNavBarEnabled) {
           return (0, _emotion.jsx)(_index2.SecondaryNavBarButton, {
             id: "ReturnButton",
+            key: "ReturnButton",
             variant: "button",
             onClick: navigateToBuild
           }, (0, _formatMessage.default)('Return'));
@@ -132,12 +135,14 @@ var NavWrapper = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     key: "render",
     value: function render() {
       if (this.props.iceTopNavBarEnabled) {
+        var actionItems = [this.renderReturnButton()];
+        !this.props.isCompact && actionItems.push(this.props.renderHeaderMenu());
         return (0, _emotion.jsx)(_index.NavBar, {
           menuItems: [{
             path: this.props.menuItemPath,
             text: 'Item Banks'
           }],
-          actionItems: [this.renderReturnButton()]
+          actionItems: actionItems
         });
       }
 

package/lib/common/components/layout/navbar/SecondaryNavBarButton/index.js

@@ -70,7 +70,7 @@ var SecondaryNavBarButton = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   }]);
   SecondaryNavBarButton.displayName = "SecondaryNavBarButton";
   return SecondaryNavBarButton;
-}(_react.Component), _class2.propTypes = {
+}(_react.Component), _class2.displayName = 'TopNavBarItem', _class2.propTypes = {
   children: _propTypes.default.string.isRequired,
   styles: _propTypes.default.object,
   makeStyles: _propTypes.default.func

package/lib/common/components/layout/navbar/index.js

@@ -1,65 +1,156 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mapStateToProps = mapStateToProps;
 exports.default = exports.NavBar = void 0;
 
-var _redux = require("redux");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _partial = _interopRequireDefault(require("lodash/partial"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _reactRedux = require("../../../../common/react-redux.js");
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var modalActions = _interopRequireWildcard(require("../../../../common/actions/modal.js"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _ui = require("../../../../common/actions/ui.js");
+var _react = require("react");
 
-var _quizCommon = require("@instructure/quiz-common");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _index = require("../../ImportModal/index.js");
+var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
 
-var _presenter = require("./presenter.js");
+var _uiIcons = require("@instructure/ui-icons");
 
-var _quizzes = require("../../../selectors/quizzes.js");
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _featureCheck = require("../../../util/featureCheck.js");
+var _emotion = require("@instructure/emotion");
 
-var _quizExport = require("../../../actions/quizExport.js");
+var _styles = _interopRequireDefault(require("./styles.js"));
 
-var _alerts = require("../../../actions/alerts.js");
+var _theme = _interopRequireDefault(require("./theme.js"));
 
-function mapStateToProps(state) {
-  var quiz = (0, _quizzes.getActiveQuiz)(state);
-  return {
-    activeQuizId: quiz.id,
-    canExport: !state.getIn(['quizExport', "activeQuiz".concat(quiz.id)]),
-    canImport: quiz.canImport(),
-    hasQuestions: quiz.hasQuestions(),
-    isEditing: state.get('editing') && state.get('editing').some(function (elem) {
-      return elem;
-    }),
-    printingEnabled: (0, _featureCheck.featureOn)('printing')
-  };
-}
+var _dec, _class, _class2, _temp;
 
-var mapDispatchToProps = function mapDispatchToProps(dispatch) {
-  return {
-    addAlert: (0, _redux.bindActionCreators)(_alerts.addAlert, dispatch),
-    addInfo: (0, _redux.bindActionCreators)(_alerts.addInfo, dispatch),
-    openBanksTray: (0, _redux.bindActionCreators)(_ui.set.bind(void 0, _quizCommon.BUILD_TRAY_OPEN, true), dispatch),
-    setBanksTrayButtonRef: (0, _redux.bindActionCreators)((0, _partial.default)(_ui.set, _quizCommon.BUILD_TRAY_BUTTON_REF), dispatch),
-    startExport: (0, _redux.bindActionCreators)(_quizExport.startQuizExportJob, dispatch),
-    openModal: (0, _redux.bindActionCreators)(modalActions.openModal.bind(modalActions, (0, _index.generateImportModalId)('qtiImport')), dispatch)
-  };
-};
+var _ref = (0, _emotion.jsx)(_uiIcons.IconQuizLine, {
+  color: "primary",
+  size: "small"
+});
 
-var NavBar = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.NavBar);
+var NavBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(NavBar, _Component);
+
+  var _super = (0, _createSuper2.default)(NavBar);
+
+  function NavBar() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, NavBar);
+
+    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.hiddenActionItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return (0, _formatMessage.default)('{hiddenChildrenCount} more actions', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.hiddenMenuItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return (0, _formatMessage.default)('{hiddenChildrenCount} More', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.renderBrand = function () {
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Brand, {
+        screenReaderLabel: (0, _formatMessage.default)('Quizzes'),
+        renderIcon: _ref
+      });
+    };
+
+    _this.renderMenuItems = function () {
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.MenuItems, {
+        listLabel: (0, _formatMessage.default)('Page navigation'),
+        currentPageId: window.location.pathname,
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenMenuItemsMenuTriggerLabel
+      }, _this.props.menuItems.map(function (menuItem) {
+        return _this.renderMenuItem(menuItem);
+      }));
+    };
+
+    _this.renderMenuItem = function (menuItem) {
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, {
+        id: menuItem.path,
+        key: menuItem.path,
+        onClick: function onClick() {
+          return _this.props.handleMenuItemChange(menuItem.path);
+        } // eslint-disable-line react/jsx-no-bind
+
+      }, menuItem.text);
+    };
+
+    _this.renderActionItems = function () {
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.ActionItems, {
+        listLabel: (0, _formatMessage.default)('Actions'),
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenActionItemsMenuTriggerLabel
+      }, (0, _toConsumableArray2.default)(_this.props.actionItems));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(NavBar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar, {
+        breakpoint: this.props.styles.phoneBreakPoint,
+        mediaQueryMatch: "element",
+        inverseColor: true
+      }, function () {
+        return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Layout, {
+          themeOverride: {
+            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
+            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
+          },
+          navLabel: (0, _formatMessage.default)('Quizzes navigation bar'),
+          desktopConfig: {
+            hideActionsUserSeparator: true
+          },
+          smallViewportConfig: {
+            dropdownMenuToggleButtonLabel: (0, _formatMessage.default)('Toggle Menu'),
+            dropdownMenuLabel: (0, _formatMessage.default)('Main Menu')
+          },
+          renderBrand: _this2.renderBrand(),
+          renderMenuItems: _this2.renderMenuItems(),
+          renderActionItems: _this2.renderActionItems()
+        });
+      });
+    }
+  }]);
+  NavBar.displayName = "NavBar";
+  return NavBar;
+}(_react.Component), _class2.propTypes = {
+  menuItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    path: _propTypes.default.string.isRequired,
+    text: _propTypes.default.string.isRequired
+  })),
+  handleMenuItemChange: _propTypes.default.func,
+  actionItems: _propTypes.default.arrayOf(_propTypes.default.node),
+  styles: _propTypes.default.object
+}, _class2.defaultProps = {
+  menuItems: [],
+  handleMenuItemChange: function handleMenuItemChange() {},
+  actionItems: []
+}, _temp)) || _class);
 exports.NavBar = NavBar;
 var _default = NavBar;
 exports.default = _default;

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

@@ -46,7 +46,8 @@ var ReturnButton = /*#__PURE__*/function (_Component) {
 
       if (this.props.iceTopNavBarEnabled) {
         return /*#__PURE__*/_react.default.createElement(_index.SecondaryNavBarButton, {
-          id: "ReturnButton",
+          id: this.props.id,
+          key: this.props.id,
           variant: "button",
           "data-automation": "sdk-return-button",
           href: this.props.returnToUrl,
@@ -69,11 +70,13 @@ exports.ReturnButton = ReturnButton;
 ReturnButton.propTypes = {
   returnToUrl: _propTypes.default.string,
   text: _propTypes.default.string,
+  id: _propTypes.default.string,
   iceTopNavBarEnabled: _propTypes.default.bool
 };
 ReturnButton.defaultProps = {
   returnToUrl: void 0,
   text: (0, _formatMessage.default)('Return'),
+  id: 'ReturnButton',
   iceTopNavBarEnabled: false
 };
 var _default = ReturnButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.11.3-rc.11+9ba5b2201",
+  "version": "20.11.3-rc.13+af44749c7",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.2.0",
-    "@instructure/quiz-common": "20.11.3-rc.11+9ba5b2201",
-    "@instructure/quiz-i18n": "20.11.3-rc.11+9ba5b2201",
-    "@instructure/quiz-interactions": "20.11.3-rc.11+9ba5b2201",
-    "@instructure/quiz-number-input": "20.11.3-rc.11+9ba5b2201",
-    "@instructure/quiz-rce": "20.11.3-rc.11+9ba5b2201",
+    "@instructure/quiz-common": "20.11.3-rc.13+af44749c7",
+    "@instructure/quiz-i18n": "20.11.3-rc.13+af44749c7",
+    "@instructure/quiz-interactions": "20.11.3-rc.13+af44749c7",
+    "@instructure/quiz-number-input": "20.11.3-rc.13+af44749c7",
+    "@instructure/quiz-rce": "20.11.3-rc.13+af44749c7",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.11.3-rc.11+9ba5b2201",
+    "instructure-validations": "20.11.3-rc.13+af44749c7",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -163,7 +163,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.11.3-rc.11+9ba5b2201",
+    "quiz-presets": "20.11.3-rc.13+af44749c7",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9ba5b22017f1c5d4255fd022b1c3cfcdcbc137f7"
+  "gitHead": "af44749c73185aa77fc58e463f82651aaa1e6e92"
 }

package/es/common/components/layout/navbar/presenter.js

@@ -1,120 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-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";
-
-var _dec, _class, _class2, _temp;
-
-/** @jsx jsx */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { TopNavBar } from '@instructure/ui-top-nav-bar';
-import { IconQuizLine } from '@instructure/ui-icons';
-import t from '@instructure/quiz-i18n/es/format-message';
-import { withStyle, jsx } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-
-var _ref = jsx(IconQuizLine, {
-  color: "primary",
-  size: "small"
-});
-
-export var NavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  _inherits(NavBar, _Component);
-
-  var _super = _createSuper(NavBar);
-
-  function NavBar() {
-    var _this;
-
-    _classCallCheck(this, NavBar);
-
-    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.hiddenActionItemsMenuTriggerLabel = function (hiddenChildrenCount) {
-      return t('{hiddenChildrenCount} more actions', {
-        hiddenChildrenCount: hiddenChildrenCount
-      });
-    };
-
-    _this.hiddenMenuItemsMenuTriggerLabel = function (hiddenChildrenCount) {
-      return t('{hiddenChildrenCount} More', {
-        hiddenChildrenCount: hiddenChildrenCount
-      });
-    };
-
-    return _this;
-  }
-
-  _createClass(NavBar, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      return jsx(TopNavBar, {
-        breakpoint: this.props.styles.phoneBreakPoint,
-        mediaQueryMatch: "element",
-        inverseColor: true
-      }, function () {
-        return jsx(TopNavBar.Layout, {
-          themeOverride: {
-            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
-            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
-          },
-          navLabel: t('Quizzes navigation bar'),
-          desktopConfig: {
-            hideActionsUserSeparator: true
-          },
-          smallViewportConfig: {
-            dropdownMenuToggleButtonLabel: t('Toggle Menu'),
-            dropdownMenuLabel: t('Main Menu')
-          },
-          renderBrand: jsx(TopNavBar.Brand, {
-            screenReaderLabel: t('Quizzes'),
-            renderIcon: _ref
-          }),
-          renderMenuItems: jsx(TopNavBar.MenuItems, {
-            listLabel: t('Page navigation'),
-            currentPageId: window.location.pathname,
-            renderHiddenItemsMenuTriggerLabel: _this2.hiddenMenuItemsMenuTriggerLabel
-          }, _this2.props.menuItems.map(function (menuItem) {
-            return jsx(TopNavBar.Item, {
-              id: menuItem.path,
-              key: menuItem.path,
-              onClick: function onClick() {
-                return _this2.props.handleMenuItemChange(menuItem.path);
-              } // eslint-disable-line react/jsx-no-bind
-
-            }, menuItem.text);
-          })),
-          renderActionItems: jsx(TopNavBar.ActionItems, {
-            listLabel: t('Actions'),
-            renderHiddenItemsMenuTriggerLabel: _this2.hiddenActionItemsMenuTriggerLabel
-          }, _toConsumableArray(_this2.props.actionItems))
-        });
-      });
-    }
-  }]);
-
-  NavBar.displayName = "NavBar";
-  return NavBar;
-}(Component), _class2.propTypes = {
-  menuItems: PropTypes.arrayOf(PropTypes.shape({
-    path: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired
-  })),
-  handleMenuItemChange: PropTypes.func,
-  actionItems: PropTypes.arrayOf(PropTypes.node),
-  styles: PropTypes.object
-}, _class2.defaultProps = {
-  menuItems: [],
-  handleMenuItemChange: function handleMenuItemChange() {},
-  actionItems: []
-}, _temp)) || _class);
-export default NavBar;

package/lib/common/components/layout/navbar/presenter.js

@@ -1,140 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.NavBar = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-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 = require("react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
-
-var _uiIcons = require("@instructure/ui-icons");
-
-var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-
-var _emotion = require("@instructure/emotion");
-
-var _styles = _interopRequireDefault(require("./styles.js"));
-
-var _theme = _interopRequireDefault(require("./theme.js"));
-
-var _dec, _class, _class2, _temp;
-
-var _ref = (0, _emotion.jsx)(_uiIcons.IconQuizLine, {
-  color: "primary",
-  size: "small"
-});
-
-var NavBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(NavBar, _Component);
-
-  var _super = (0, _createSuper2.default)(NavBar);
-
-  function NavBar() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, NavBar);
-
-    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.hiddenActionItemsMenuTriggerLabel = function (hiddenChildrenCount) {
-      return (0, _formatMessage.default)('{hiddenChildrenCount} more actions', {
-        hiddenChildrenCount: hiddenChildrenCount
-      });
-    };
-
-    _this.hiddenMenuItemsMenuTriggerLabel = function (hiddenChildrenCount) {
-      return (0, _formatMessage.default)('{hiddenChildrenCount} More', {
-        hiddenChildrenCount: hiddenChildrenCount
-      });
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(NavBar, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar, {
-        breakpoint: this.props.styles.phoneBreakPoint,
-        mediaQueryMatch: "element",
-        inverseColor: true
-      }, function () {
-        return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Layout, {
-          themeOverride: {
-            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
-            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
-          },
-          navLabel: (0, _formatMessage.default)('Quizzes navigation bar'),
-          desktopConfig: {
-            hideActionsUserSeparator: true
-          },
-          smallViewportConfig: {
-            dropdownMenuToggleButtonLabel: (0, _formatMessage.default)('Toggle Menu'),
-            dropdownMenuLabel: (0, _formatMessage.default)('Main Menu')
-          },
-          renderBrand: (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Brand, {
-            screenReaderLabel: (0, _formatMessage.default)('Quizzes'),
-            renderIcon: _ref
-          }),
-          renderMenuItems: (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.MenuItems, {
-            listLabel: (0, _formatMessage.default)('Page navigation'),
-            currentPageId: window.location.pathname,
-            renderHiddenItemsMenuTriggerLabel: _this2.hiddenMenuItemsMenuTriggerLabel
-          }, _this2.props.menuItems.map(function (menuItem) {
-            return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, {
-              id: menuItem.path,
-              key: menuItem.path,
-              onClick: function onClick() {
-                return _this2.props.handleMenuItemChange(menuItem.path);
-              } // eslint-disable-line react/jsx-no-bind
-
-            }, menuItem.text);
-          })),
-          renderActionItems: (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.ActionItems, {
-            listLabel: (0, _formatMessage.default)('Actions'),
-            renderHiddenItemsMenuTriggerLabel: _this2.hiddenActionItemsMenuTriggerLabel
-          }, (0, _toConsumableArray2.default)(_this2.props.actionItems))
-        });
-      });
-    }
-  }]);
-  NavBar.displayName = "NavBar";
-  return NavBar;
-}(_react.Component), _class2.propTypes = {
-  menuItems: _propTypes.default.arrayOf(_propTypes.default.shape({
-    path: _propTypes.default.string.isRequired,
-    text: _propTypes.default.string.isRequired
-  })),
-  handleMenuItemChange: _propTypes.default.func,
-  actionItems: _propTypes.default.arrayOf(_propTypes.default.node),
-  styles: _propTypes.default.object
-}, _class2.defaultProps = {
-  menuItems: [],
-  handleMenuItemChange: function handleMenuItemChange() {},
-  actionItems: []
-}, _temp)) || _class);
-exports.NavBar = NavBar;
-var _default = NavBar;
-exports.default = _default;