@instructure/quiz-core 20.9.1-rc.4 → 20.9.1-rc.6

package/es/common/components/layout/sidebar/Stimulus/Summary/styles.js

@@ -0,0 +1,30 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    middleSection: {
+      flexGrow: '2'
+    },
+    endSection: {
+      flexGrow: '1',
+      textAlign: 'right'
+    },
+    questionCount: {
+      flexGrow: '1'
+    },
+    itemsContainer: {
+      color: componentTheme.itemContainerColor,
+      display: 'flex',
+      width: '100%',
+      padding: componentTheme.itemContainerPadding,
+      border: "dotted ".concat(componentTheme.itemContainerBorderWidth),
+      borderColor: componentTheme.itemContainerBorderColor
+    },
+    summary: {
+      margin: componentTheme.summaryMargin,
+      marginLeft: componentTheme.summaryMarginLeft,
+      display: 'flex',
+      flexGrow: '1'
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/sidebar/Stimulus/Summary/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       borders = _ref.borders;
@@ -10,4 +10,6 @@ export default function generator(_ref) {
     summaryMargin: spacing.small,
     summaryMarginLeft: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/reducers/ui.js

@@ -20,7 +20,7 @@ export default (function () {
       return state.mergeDeepIn([action.payload.key], action.payload.value);
 
     case SET_UI:
-      return state.set(action.payload.key, action.payload.value);
+      return state.setIn([action.payload.key].flat(), action.payload.value);
 
     case TOGGLE_UI:
       return toggle(state, action.payload);

package/lib/banks/components/{SharingModal/asyncSearch.js → AsyncSearch/index.js}

@@ -397,6 +397,10 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
   }, {
     key: "placeholder",
     value: function placeholder() {
+      if (this.props.placeholderLabel) {
+        return this.props.placeholderLabel;
+      }
+
       if (this.props.searchType === _quizCommon.SHARED_WITH_ACCOUNT) {
         return (0, _formatMessage.default)('Enter subaccount name');
       } else if (this.props.searchType === _quizCommon.SHARED_WITH_COURSE) {
@@ -413,7 +417,7 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
           isShowingOptions = _this$state.isShowingOptions;
       return /*#__PURE__*/_react.default.createElement(_uiSelect.Select, {
         "data-automation": "sdk-item-bank-share-input",
-        renderLabel: (0, _formatMessage.default)('Share With'),
+        renderLabel: this.props.searchLabel,
         placeholder: this.placeholder(),
         inputValue: inputValue,
         isShowingOptions: isShowingOptions,
@@ -439,9 +443,9 @@ AsyncSearch.propTypes = {
   improvedBankSharingEnabled: _propTypes.default.bool.isRequired,
   minChars: _propTypes.default.number,
   onSelectionChange: _propTypes.default.func.isRequired,
-  getShareableCourses: _propTypes.default.func.isRequired,
-  getShareableUsers: _propTypes.default.func.isRequired,
-  getShareableSubaccounts: _propTypes.default.func.isRequired,
+  getShareableCourses: _propTypes.default.func,
+  getShareableUsers: _propTypes.default.func,
+  getShareableSubaccounts: _propTypes.default.func,
   searchType: _propTypes.default.string,
   selectedOption: _propTypes.default.arrayOf(_propTypes.default.shape({
     avatar: _propTypes.default.string,
@@ -449,7 +453,9 @@ AsyncSearch.propTypes = {
     title: _propTypes.default.string,
     uuid: _propTypes.default.string.isRequired
   })).isRequired,
-  selectionFilter: _propTypes.default.func
+  selectionFilter: _propTypes.default.func,
+  searchLabel: _propTypes.default.string,
+  placeholderLabel: _propTypes.default.string
 };
 AsyncSearch.defaultProps = {
   debounceDelay: 500,
@@ -457,7 +463,12 @@ AsyncSearch.defaultProps = {
   searchType: null,
   selectionFilter: function selectionFilter(value) {
     return value;
-  }
+  },
+  getShareableCourses: null,
+  getShareableUsers: null,
+  getShareableSubaccounts: null,
+  searchLabel: (0, _formatMessage.default)('Share With'),
+  placeholder: null
 };
 var _default = AsyncSearch;
 exports.default = _default;

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

@@ -33,15 +33,18 @@ function mapStateToProps(state, props) {
   var sortBy = pageData.get('sortBy', 'name');
   var sortOrder = pageData.get('sortOrder', 'ascending');
   var searchTerms = pageData.get('searchTerms', null);
+  var searchSelection = pageData.get('searchSelection', []);
   return {
     itemBankSearchTableEnabled: (0, _featureCheck.featureOn)('item_bank_search_table'),
-    filtersEnabled: (0, _featureCheck.featureOn)('improved_bank_sharing'),
+    improvedBankSharingEnabled: (0, _featureCheck.featureOn)('improved_bank_sharing'),
     newItemBankFilterNamesEnabled: (0, _featureCheck.featureOn)('new_item_bank_filter_names'),
     usedByCourseEnabled: (0, _featureCheck.featureOn)('filter_item_banks_used_by_course'),
+    subAccountBankSharingEnabled: (0, _featureCheck.featureOn)('sub_account_bank_sharing'),
     scopeType: scopeType,
     sortBy: sortBy,
     sortOrder: sortOrder,
-    searchTerms: searchTerms
+    searchTerms: searchTerms,
+    searchSelection: searchSelection
   };
 }
 
@@ -51,7 +54,8 @@ function mapDispatchToProps(dispatch) {
     getBanks: (0, _redux.bindActionCreators)(_banks.getBanks, dispatch),
     openModal: (0, _redux.bindActionCreators)(modalActions.openModal, dispatch),
     clear: (0, _redux.bindActionCreators)(_ui.clear, dispatch),
-    merge: (0, _redux.bindActionCreators)(_ui.merge, dispatch)
+    merge: (0, _redux.bindActionCreators)(_ui.merge, dispatch),
+    setUI: (0, _redux.bindActionCreators)(_ui.set, dispatch)
   };
 }
 

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

@@ -23,6 +23,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
 var _uiHeading = require("@instructure/ui-heading");
 
 var _uiImg = require("@instructure/ui-img");
@@ -41,6 +43,10 @@ var _uiSimpleSelect = require("@instructure/ui-simple-select");
 
 var _emotion = require("@instructure/emotion");
 
+var _uiGrid = require("@instructure/ui-grid");
+
+var _uiView = require("@instructure/ui-view");
+
 var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
 
 var _index = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
@@ -63,6 +69,8 @@ var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _index6 = _interopRequireDefault(require("../AsyncSearch/index.js"));
+
 var _dec, _class, _class2, _temp;
 
 var sortOrderIcons = {
@@ -124,6 +132,12 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         params['search'] = _this.props.searchTerms;
       }
 
+      if (_this.props.searchSelection.length > 0) {
+        params['account_uuids'] = _this.props.searchSelection.map(function (account) {
+          return account.uuid;
+        });
+      }
+
       return params;
     };
 
@@ -201,6 +215,10 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       _this.search(value);
     };
 
+    _this.handleSearchSelectionChange = function (searchSelection) {
+      _this.props.setUI([_quizCommon.BANKS_BANK_FILTERS, 'searchSelection'], searchSelection);
+    };
+
     _this.renderRecords = function (recordIds) {
       return (0, _emotion.jsx)(_index3.default, {
         createBankButton: _this.createBankButton,
@@ -225,7 +243,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     };
 
     _this.emptyPage = function () {
-      if (_this.props.searchTerms) {
+      if (_this.props.searchTerms || _this.props.searchSelection.length > 0) {
         var message;
 
         if (_this.props.scopeType === 'course') {
@@ -259,7 +277,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   (0, _createClass2.default)(Banks, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType) {
+      if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType || !(0, _isEqual.default)(prevProps.searchSelection, this.props.searchSelection)) {
         this.props.clear(_quizCommon.BANKS_BANK_PAGINATION);
       }
     }
@@ -304,12 +322,20 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         display: false
       }];
       var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
-      var searchFilters = (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)("div", {
-        display: "inline-block"
+      var searchFilters = (0, _emotion.jsx)(_uiView.View, {
+        as: "div",
+        width: "100%"
+      }, (0, _emotion.jsx)(_uiGrid.Grid, {
+        startAt: "medium",
+        colSpacing: "small",
+        rowSpacing: "small",
+        vAlign: "bottom"
+      }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, {
+        width: "auto"
       }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
         onChange: this.handleBanksParentChange,
         value: this.props.scopeType,
-        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Bank scope')),
+        renderLabel: (0, _formatMessage.default)('Filter By'),
         width: "13rem"
       }, scopeOptions.map(function (option) {
         return (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
@@ -317,16 +343,27 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
           key: option.slug,
           value: option.slug
         }, option.translation);
-      }))), (0, _emotion.jsx)("div", {
-        css: this.props.styles.searchBarContainer
+      }))), (0, _emotion.jsx)(_uiGrid.Grid.Col, {
+        width: 4
       }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
-        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Search...')),
+        renderLabel: (0, _formatMessage.default)('Bank'),
         type: "search",
         value: this.state.searchTerms,
         onChange: this.handleSearchInputChange,
-        placeholder: (0, _formatMessage.default)('Search...'),
+        placeholder: (0, _formatMessage.default)('Search Banks'),
         "data-automation": "sdk-search-bank-textinput"
-      })));
+      })), this.props.subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiGrid.Grid.Col, {
+        width: 4
+      }, (0, _emotion.jsx)(_index6.default, {
+        getShareableSubaccounts: this.props.getShareableSubaccounts,
+        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
+        minChars: this.props.minChars,
+        onSelectionChange: this.handleSearchSelectionChange,
+        searchType: _quizCommon.SHARED_WITH_ACCOUNT,
+        selectedOption: this.props.searchSelection,
+        searchLabel: (0, _formatMessage.default)('Account'),
+        placeholderLabel: (0, _formatMessage.default)('Search Accounts')
+      })))));
       var sortingFiltersSelectOptionIdPrefix = 'banks-sorting-filters-select-option-';
       var sortingFilters = (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)("div", {
         display: "inline-block",
@@ -380,7 +417,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.filtersEnabled ? this.props.styles.borderedBottom : {}]
+        css: [this.props.styles.filters, !this.props.improvedBankSharingEnabled ? this.props.styles.borderedBottom : {}]
       }, (0, _emotion.jsx)(_uiHeading.Heading, {
         as: this.props.isCompact ? 'h2' : 'h1',
         level: "h1"
@@ -426,7 +463,7 @@ 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.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), (0, _emotion.jsx)(_index4.default, {
+      }, this.renderHeader(), this.props.improvedBankSharingEnabled && this.renderFilters(), this.renderBanksSearchResults(), (0, _emotion.jsx)(_index4.default, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -446,8 +483,8 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     account_name: _propTypes.default.string
   }),
   // from consumer
-  clear: _propTypes.default.func,
-  filtersEnabled: _propTypes.default.bool,
+  clear: _propTypes.default.func.isRequired,
+  improvedBankSharingEnabled: _propTypes.default.bool,
   getBanks: _propTypes.default.func.isRequired,
   getCourseInfo: _propTypes.default.func,
   // from consumer
@@ -483,10 +520,18 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }).isRequired,
   scopeType: _propTypes.default.string,
   searchTerms: _propTypes.default.string,
+  searchSelection: _propTypes.default.arrayOf(_propTypes.default.shape({
+    avatar: _propTypes.default.string,
+    fullName: _propTypes.default.string,
+    title: _propTypes.default.string,
+    uuid: _propTypes.default.string.isRequired
+  })),
   sortBy: _propTypes.default.string,
   sortOrder: _propTypes.default.string,
   usedByCourseEnabled: _propTypes.default.bool,
   itemBankSearchTableEnabled: _propTypes.default.bool,
+  setUI: _propTypes.default.func.isRequired,
+  subAccountBankSharingEnabled: _propTypes.default.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: _propTypes.default.object
 }, _class2.defaultProps = {
@@ -503,18 +548,18 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   isCompact: false,
   navigateToBuild: null,
   onShare: function onShare() {},
-  clear: function clear() {},
-  merge: function merge() {},
   scope: {},
   returnToUrl: null,
-  filtersEnabled: false,
+  improvedBankSharingEnabled: false,
   scopeType: 'user',
   sortBy: 'name',
   sortOrder: 'ascending',
   searchTerms: null,
+  searchSelection: [],
   newItemBankFilterNamesEnabled: false,
   usedByCourseEnabled: false,
-  itemBankSearchTableEnabled: false
+  itemBankSearchTableEnabled: false,
+  subAccountBankSharingEnabled: false
 }, _class2.contextTypes = {
   locale: _propTypes.default.string
 }, _temp)) || _class);

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

@@ -27,11 +27,6 @@ var generateStyle = function generateStyle(componentTheme) {
       marginTop: '1.5rem',
       display: 'flex',
       flexDirection: 'row'
-    },
-    searchBarContainer: {
-      flexGrow: 0.25,
-      padding: '0 1rem',
-      display: 'inline-block'
     }
   };
 };

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

@@ -63,7 +63,7 @@ var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/Cust
 
 var _index = _interopRequireDefault(require("./ShareList/index.js"));
 
-var _asyncSearch = _interopRequireDefault(require("./asyncSearch.js"));
+var _index2 = _interopRequireDefault(require("../AsyncSearch/index.js"));
 
 var _Spinner = _interopRequireDefault(require("../../../common/components/shared/spinner/Spinner.js"));
 
@@ -412,7 +412,7 @@ var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         return (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)(_uiGrid.Grid, {
           vAlign: "bottom",
           colSpacing: "small"
-        }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)(_asyncSearch.default, {
+        }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)(_index2.default, {
           getShareableCourses: _this.props.getShareableCourses,
           getShareableUsers: _this.props.getShareableUsers,
           getShareableSubaccounts: _this.props.getShareableSubaccounts,

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

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Page = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,28 +15,19 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _emotion = require("@instructure/emotion");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'KVDkV',
-  template: function template(theme) {
-    return "\n\n.KVDkV_gasz{display:flex;font-family:".concat(theme.fontFamily || 'inherit', ";height:100%;margin:0}\n\n@media screen and (--phoneBreakPoint){.KVDkV_caGd{-webkit-overflow-scrolling:touch}}\n\n.KVDkV_caGd{transition:").concat(theme.contentTransition || 'inherit', ";width:100%}\n\n.KVDkV_dxaC{overflow-x:hidden;overflow-y:auto}\n\n@media print{.KVDkV_gasz{display:block}}");
-  },
-  'wrapper': 'KVDkV_gasz',
-  'content': 'KVDkV_caGd',
-  'scrollable': 'KVDkV_dxaC'
-};
-var Page = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Page = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Page, _Component);
 
   var _super = (0, _createSuper2.default)(Page);
@@ -51,6 +38,16 @@ var Page = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   }
 
   (0, _createClass2.default)(Page, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "shouldRenderSidebar",
     value: function shouldRenderSidebar() {
       return this.props.sidebarComponent != null && this.props.sidebarOpen != null;
@@ -58,7 +55,7 @@ var Page = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   }, {
     key: "renderSidebar",
     value: function renderSidebar() {
-      return /*#__PURE__*/_react.default.createElement(this.props.sidebarComponent, {
+      return (0, _emotion.jsx)(this.props.sidebarComponent, {
         role: this.props.sidebarRole,
         sidebarOpen: this.props.sidebarOpen,
         toggleSidebar: this.props.toggleSidebar
@@ -67,15 +64,14 @@ var Page = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   }, {
     key: "render",
     value: function render() {
-      var childrenWrapperStyles = (0, _classnames2.default)(styles.content, (0, _defineProperty2.default)({}, styles.scrollable, this.shouldRenderSidebar()));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.wrapper
-      }, this.shouldRenderSidebar() ? this.renderSidebar() : null, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.wrapper
+      }, this.shouldRenderSidebar() ? this.renderSidebar() : null, (0, _emotion.jsx)("div", {
         // this component is focusable for SkipToContent
         tabIndex: "-1",
         ref: this.props.childrenWrapperRef,
         role: this.props.contentRole,
-        className: childrenWrapperStyles
+        css: this.props.styles.childrenWrapper
       }, this.props.children));
     }
   }]);
@@ -88,7 +84,9 @@ var Page = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   sidebarComponent: _propTypes.default.func,
   sidebarOpen: _propTypes.default.bool,
   sidebarRole: _propTypes.default.string,
-  toggleSidebar: _propTypes.default.func
+  toggleSidebar: _propTypes.default.func,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   childrenWrapperRef: function childrenWrapperRef() {},
   contentRole: 'main',

package/lib/common/components/layout/Page/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var printMq = '@media print';
+  var isScrollable = props.sidebarComponent != null && props.sidebarOpen != null;
+  return {
+    wrapper: (0, _defineProperty2.default)({
+      display: 'flex',
+      fontFamily: componentTheme.fontFamily,
+      height: '100%',
+      margin: '0'
+    }, printMq, {
+      display: 'block'
+    }),
+    childrenWrapper: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, isScrollable && {
+      overflowX: 'hidden',
+      overflowY: 'auto'
+    }), {}, {
+      transition: componentTheme.contentTransition,
+      width: '100%'
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/layout/Page/theme.js

@@ -3,15 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var typography = _ref.typography,
       breakpoints = _ref.breakpoints,
       transitions = _ref.transitions;
   return {
     fontFamily: typography.fontFamily,
-    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     contentTransition: "transform ".concat(transitions.duration)
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/layout/header/HeaderMenuButton/presenter.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,7 +17,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,26 +25,19 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'cUqra',
-  template: function template(theme) {
-    return "\n\n.cUqra_nvdO{display:none;height:inherit}\n\n@media screen and (--phoneBreakPoint){.cUqra_nvdO{align-items:center;display:flex}}\n\n.cUqra_cdzo{background:transparent;border:none;color:".concat(theme.menuButtonColor || 'inherit', ";font-size:").concat(theme.menuButtonFontSize || 'inherit', ";height:inherit}\n\n.cUqra_cdzo:hover{opacity:").concat(theme.menuButtonHoverOpacity || 'inherit', "}");
-  },
-  'title': 'cUqra_nvdO',
-  'menuButton': 'cUqra_cdzo'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconHamburgerLine, null);
+var _ref = (0, _emotion.jsx)(_uiIcons.IconHamburgerLine, null);
 
-var HeaderMenuButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var HeaderMenuButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(HeaderMenuButton, _Component);
 
   var _super = (0, _createSuper2.default)(HeaderMenuButton);
@@ -84,14 +75,14 @@ var HeaderMenuButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.title
-      }, /*#__PURE__*/_react.default.createElement("button", {
-        className: styles.menuButton,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.title
+      }, (0, _emotion.jsx)("button", {
+        css: this.props.styles.menuButton,
         onClick: this.toggleNavigator,
         tabIndex: "0",
         "data-automation": "sdk-hamburger-button"
-      }, _ref, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, sidebarOpen ? (0, _formatMessage.default)('Hide Question Navigator Menu') : (0, _formatMessage.default)('Show Question Navigator Menu'))));
+      }, _ref, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, sidebarOpen ? (0, _formatMessage.default)('Hide Question Navigator Menu') : (0, _formatMessage.default)('Show Question Navigator Menu'))));
     }
   }]);
   HeaderMenuButton.displayName = "HeaderMenuButton";
@@ -100,7 +91,8 @@ var HeaderMenuButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   sidebarMenuClick: _propTypes.default.func.isRequired,
   hidden: _propTypes.default.bool.isRequired,
   sidebarOpen: _propTypes.default.bool.isRequired,
-  screenreaderNotification: _propTypes.default.func.isRequired
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.HeaderMenuButton = HeaderMenuButton;
 var _default = HeaderMenuButton;

package/lib/common/components/layout/header/HeaderMenuButton/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    title: (0, _defineProperty2.default)({
+      /* default to none - since toggle moved to sidebar on non mobile */
+      display: 'none',
+      height: 'inherit'
+    }, mq, {
+      display: 'flex',
+      alignItems: 'center'
+    }),
+    menuButton: {
+      border: 'none',
+      fontSize: componentTheme.menuButtonFontSize,
+      color: componentTheme.menuButtonColor,
+      background: 'transparent',
+      height: 'inherit',
+      '&:hover': {
+        opacity: componentTheme.menuButtonHoverOpacity
+      }
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;