@instructure/quiz-core 20.10.1-rc.7 → 20.11.0

package/lib/building/components/layout/header/BuildingButtons/presenter.js

@@ -25,6 +25,12 @@ var _uiMenu = require("@instructure/ui-menu");
 
 var _uiIcons = require("@instructure/ui-icons");
 
+var _uiView = require("@instructure/ui-view");
+
+var _uiDrilldown = require("@instructure/ui-drilldown");
+
+var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
+
 var _index = _interopRequireDefault(require("../../../../../common/components/shared/PrintTrigger/index.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
@@ -39,6 +45,8 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
+var _ref = (0, _emotion.jsx)(_uiIcons.IconSpeedGraderLine, null);
+
 var BuildingButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BuildingButtons, _Component);
 
@@ -95,6 +103,16 @@ var BuildingButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.de
   }
 
   (0, _createClass2.default)(BuildingButtons, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "renderSavingMessage",
     value: function renderSavingMessage() {
       if (this.props.quizSaving) {
@@ -108,6 +126,214 @@ var BuildingButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.de
     value: function isBuildingPage() {
       return 'building' === this.props.app;
     }
+  }, {
+    key: "renderSpeedGraderButton",
+    value: function renderSpeedGraderButton() {
+      var key = 'speedgrader';
+      var text = (0, _formatMessage.default)('Speedgrader');
+
+      if (this.props.iceTopNavBarEnabled) {
+        return (0, _emotion.jsx)(_uiDrilldown.Drilldown.Option, {
+          id: key,
+          key: key,
+          onOptionClick: this.openSpeedgraderLink
+        }, _ref, (0, _emotion.jsx)(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return (0, _emotion.jsx)(_uiMenu.Menu.Item, {
+        key: key,
+        onSelect: this.openSpeedgraderLink
+      }, (0, _emotion.jsx)(_uiIcons.IconSpeedGraderLine, {
+        css: this.props.styles.menuIcon
+      }), text);
+    }
+  }, {
+    key: "renderImportContentButton",
+    value: function renderImportContentButton() {
+      var key = 'import';
+      var text = (0, _formatMessage.default)('Import Content');
+      var onClick = this.props.openModal;
+      var disabled = !this.props.canImport;
+      var menuItemDataAutomation = 'sdk-import-content-menuitem';
+      var iconDataAutomation = 'sdk-import-content-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return (0, _emotion.jsx)(_uiDrilldown.Drilldown.Option, {
+          id: key,
+          key: key,
+          disabled: disabled,
+          onOptionClick: onClick,
+          "data-automation": menuItemDataAutomation
+        }, (0, _emotion.jsx)(_uiIcons.IconImportLine, {
+          "data-automation": iconDataAutomation
+        }), (0, _emotion.jsx)(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return (0, _emotion.jsx)(_uiMenu.Menu.Item, {
+        key: key,
+        disabled: disabled,
+        onSelect: onClick,
+        "data-automation": menuItemDataAutomation
+      }, (0, _emotion.jsx)(_uiIcons.IconImportLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
+  }, {
+    key: "renderContentExportButton",
+    value: function renderContentExportButton() {
+      var key = 'export';
+      var text = (0, _formatMessage.default)('Export Content');
+      var onClick = this.startQuizExportJob;
+      var disabled = !this.props.canExport;
+      var menuItemDataAutomation = 'sdk-export-content-menuitem';
+      var iconDataAutomation = 'sdk-export-content-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return (0, _emotion.jsx)(_uiDrilldown.Drilldown.Option, {
+          id: key,
+          key: key,
+          disabled: disabled,
+          onOptionClick: onClick,
+          "data-automation": menuItemDataAutomation
+        }, (0, _emotion.jsx)(_uiIcons.IconExportLine, {
+          "data-automation": iconDataAutomation
+        }), (0, _emotion.jsx)(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return (0, _emotion.jsx)(_uiMenu.Menu.Item, {
+        key: key,
+        disabled: disabled,
+        onSelect: onClick,
+        "data-automation": menuItemDataAutomation
+      }, (0, _emotion.jsx)(_uiIcons.IconExportLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
+  }, {
+    key: "renderManageItemBanksButton",
+    value: function renderManageItemBanksButton() {
+      var key = 'banks';
+      var text = (0, _formatMessage.default)('Manage Item Banks');
+      var onClick = this.props.navigateToBanks;
+      var menuItemDataAutomation = 'sdk-manage-item-banks-menuitem';
+      var iconDataAutomation = 'sdk-manage-item-banks-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return (0, _emotion.jsx)(_uiDrilldown.Drilldown.Option, {
+          id: key,
+          key: key,
+          onOptionClick: onClick,
+          "data-automation": menuItemDataAutomation
+        }, (0, _emotion.jsx)(_uiIcons.IconBankLine, {
+          "data-automation": iconDataAutomation
+        }), (0, _emotion.jsx)(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return (0, _emotion.jsx)(_uiMenu.Menu.Item, {
+        key: key,
+        onSelect: onClick,
+        "data-automation": menuItemDataAutomation
+      }, (0, _emotion.jsx)(_uiIcons.IconBankLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
+  }, {
+    key: "renderPrintKeyButton",
+    value: function renderPrintKeyButton(handlePrint) {
+      var key = 'printKey';
+      var text = (0, _formatMessage.default)('Print Key (With Answers)');
+
+      var onClick = function onClick() {
+        return handlePrint(_quizCommon.PRINT_CURRENT_PAGE);
+      };
+
+      var disabled = !this.props.hasQuestions || this.props.isEditing;
+      var menuItemDataAutomation = 'sdk-print-key-menuitem';
+      var iconDataAutomation = 'sdk-print-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return (0, _emotion.jsx)(_uiDrilldown.Drilldown.Option, {
+          id: key,
+          key: key,
+          disabled: disabled,
+          onOptionClick: onClick // eslint-disable-line react/jsx-no-bind
+          ,
+          "data-automation": menuItemDataAutomation
+        }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
+          "data-automation": iconDataAutomation
+        }), (0, _emotion.jsx)(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return (0, _emotion.jsx)(_uiMenu.Menu.Item, {
+        key: key,
+        disabled: disabled,
+        onSelect: onClick // eslint-disable-line react/jsx-no-bind
+        ,
+        "data-automation": menuItemDataAutomation
+      }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
+  }, {
+    key: "renderPrintBlankButton",
+    value: function renderPrintBlankButton(handlePrint) {
+      var key = 'printBlank';
+      var text = (0, _formatMessage.default)('Print Blank Quiz');
+
+      var onClick = function onClick() {
+        return handlePrint(_quizCommon.PRINT_BLANK);
+      };
+
+      var disabled = !this.props.hasQuestions || this.props.isEditing;
+      var menuItemDataAutomation = 'sdk-print-blank-menuitem';
+      var iconDataAutomation = 'sdk-print-blank-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return (0, _emotion.jsx)(_uiDrilldown.Drilldown.Option, {
+          id: key,
+          key: key,
+          disabled: disabled,
+          onOptionClick: onClick // eslint-disable-line react/jsx-no-bind
+          ,
+          "data-automation": menuItemDataAutomation
+        }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
+          "data-automation": iconDataAutomation
+        }), (0, _emotion.jsx)(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return (0, _emotion.jsx)(_uiMenu.Menu.Item, {
+        key: key,
+        disabled: disabled,
+        onSelect: onClick // eslint-disable-line react/jsx-no-bind
+        ,
+        "data-automation": menuItemDataAutomation
+      }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
   }, {
     key: "renderMenu",
     value: function renderMenu(handlePrint) {
@@ -115,79 +341,40 @@ var BuildingButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.de
       var menuItems = [];
 
       if (this.props.speedgraderLink) {
-        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
-          key: "speedgrader",
-          onSelect: this.openSpeedgraderLink
-        }, (0, _emotion.jsx)(_uiIcons.IconSpeedGraderLine, {
-          css: this.props.styles.menuIcon
-        }), (0, _formatMessage.default)('Speedgrader')));
+        menuItems.push(this.renderSpeedGraderButton());
       }
 
-      menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
-        key: "import",
-        disabled: !this.props.canImport,
-        onSelect: this.props.openModal,
-        "data-automation": "sdk-import-content-menuitem"
-      }, (0, _emotion.jsx)(_uiIcons.IconImportLine, {
-        css: this.props.styles.menuIcon,
-        "data-automation": "sdk-import-content-icon"
-      }), (0, _formatMessage.default)('Import Content')));
+      menuItems.push(this.renderImportContentButton());
 
       if (this.props.contentExportEnabled) {
-        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
-          key: "export",
-          disabled: !this.props.canExport,
-          onSelect: this.startQuizExportJob,
-          "data-automation": "sdk-export-content-menuitem"
-        }, (0, _emotion.jsx)(_uiIcons.IconExportLine, {
-          css: this.props.styles.menuIcon,
-          "data-automation": "sdk-export-content-icon"
-        }), (0, _formatMessage.default)('Export Content')));
+        menuItems.push(this.renderContentExportButton());
       }
 
       if (this.props.enableItemBanking) {
-        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
-          key: "banks",
-          onSelect: this.props.navigateToBanks,
-          "data-automation": "sdk-manage-item-banks-menuitem"
-        }, (0, _emotion.jsx)(_uiIcons.IconBankLine, {
-          css: this.props.styles.menuIcon,
-          "data-automation": "sdk-manage-item-banks-icon"
-        }), (0, _formatMessage.default)('Manage Item Banks')));
+        menuItems.push(this.renderManageItemBanksButton());
       }
 
       if (this.props.printingEnabled) {
-        {
-          /* eslint-disable react/jsx-no-bind */
-        }
-        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
-          key: "printKey",
-          disabled: !this.props.hasQuestions || this.props.isEditing,
-          onSelect: function onSelect() {
-            return handlePrint(_quizCommon.PRINT_CURRENT_PAGE);
-          },
-          "data-automation": "sdk-print-key-menuitem"
-        }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
-          css: this.props.styles.menuIcon,
-          "data-automation": "sdk-print-icon"
-        }), (0, _formatMessage.default)('Print Key (With Answers)')));
-        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
-          key: "printBlank",
-          disabled: !this.props.hasQuestions || this.props.isEditing,
-          onSelect: function onSelect() {
-            return handlePrint(_quizCommon.PRINT_BLANK);
-          },
-          "data-automation": "sdk-print-blank-menuitem"
-        }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
-          css: this.props.styles.menuIcon,
-          "data-automation": "sdk-print-blank-icon"
-        }), (0, _formatMessage.default)('Print Blank Quiz')));
-        {
-          /* eslint-enable react/jsx-no-bind */
-        }
+        menuItems.push(this.renderPrintKeyButton(handlePrint));
+        menuItems.push(this.renderPrintBlankButton(handlePrint));
       }
 
       if (menuItems.length < 1) return;
+
+      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"
+          }, menuItems))
+        }, (0, _formatMessage.default)('More'));
+      }
+
       return (0, _emotion.jsx)(_uiMenu.Menu, {
         trigger: (0, _emotion.jsx)(_uiButtons.IconButton, {
           renderIcon: _uiIcons.IconMoreSolid,
@@ -237,6 +424,10 @@ var BuildingButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.de
   speedgraderLink: _propTypes.default.string,
   startExport: _propTypes.default.func.isRequired,
   contextUuid: _propTypes.default.string,
+  iceTopNavBarEnabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  renderIcon: _propTypes.default.element,
+  makeStyles: _propTypes.default.func,
   styles: _propTypes.default.object
 }, _class2.defaultProps = {
   activeQuizId: null,
@@ -247,7 +438,10 @@ var BuildingButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.de
   enableItemBanking: true,
   quizSaving: false,
   speedgraderLink: null,
-  contextUuid: null
+  contextUuid: null,
+  iceTopNavBarEnabled: false,
+  id: 'MoreButton',
+  renderIcon: (0, _emotion.jsx)(_uiIcons.IconMoreSolid, null)
 }, _temp)) || _class);
 exports.BuildingButtons = BuildingButtons;
 var _default = BuildingButtons;

package/lib/building/components/layout/header/BuildingButtons/styles.js

@@ -1,22 +1,28 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var generateStyle = function generateStyle(componentTheme) {
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var iceTopNavBarEnabled = props.iceTopNavBarEnabled;
   return {
     quizSaving: {
       color: componentTheme.quizSavingColor,
       margin: componentTheme.quizSavingMargin
     },
-    buttonsHolder: {
-      height: '100%',
+    buttonsHolder: (0, _objectSpread2.default)({
+      height: '100%'
+    }, !iceTopNavBarEnabled && {
       marginRight: componentTheme.buttonsHolderMargin,
       display: 'flex',
       alignItems: 'center'
-    },
+    }),
     menuIcon: {
       verticalAlign: 'middle',
       marginRight: componentTheme.menuIconMargin,