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

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

@@ -372,6 +372,10 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
   }, {
     key: "placeholder",
     value: function placeholder() {
+      if (this.props.placeholderLabel) {
+        return this.props.placeholderLabel;
+      }
+
       if (this.props.searchType === SHARED_WITH_ACCOUNT) {
         return t('Enter subaccount name');
       } else if (this.props.searchType === SHARED_WITH_COURSE) {
@@ -388,7 +392,7 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
           isShowingOptions = _this$state.isShowingOptions;
       return /*#__PURE__*/React.createElement(Select, {
         "data-automation": "sdk-item-bank-share-input",
-        renderLabel: t('Share With'),
+        renderLabel: this.props.searchLabel,
         placeholder: this.placeholder(),
         inputValue: inputValue,
         isShowingOptions: isShowingOptions,
@@ -413,9 +417,9 @@ AsyncSearch.propTypes = {
   improvedBankSharingEnabled: PropTypes.bool.isRequired,
   minChars: PropTypes.number,
   onSelectionChange: PropTypes.func.isRequired,
-  getShareableCourses: PropTypes.func.isRequired,
-  getShareableUsers: PropTypes.func.isRequired,
-  getShareableSubaccounts: PropTypes.func.isRequired,
+  getShareableCourses: PropTypes.func,
+  getShareableUsers: PropTypes.func,
+  getShareableSubaccounts: PropTypes.func,
   searchType: PropTypes.string,
   selectedOption: PropTypes.arrayOf(PropTypes.shape({
     avatar: PropTypes.string,
@@ -423,7 +427,9 @@ AsyncSearch.propTypes = {
     title: PropTypes.string,
     uuid: PropTypes.string.isRequired
   })).isRequired,
-  selectionFilter: PropTypes.func
+  selectionFilter: PropTypes.func,
+  searchLabel: PropTypes.string,
+  placeholderLabel: PropTypes.string
 };
 AsyncSearch.defaultProps = {
   debounceDelay: 500,
@@ -431,6 +437,11 @@ AsyncSearch.defaultProps = {
   searchType: null,
   selectionFilter: function selectionFilter(value) {
     return value;
-  }
+  },
+  getShareableCourses: null,
+  getShareableUsers: null,
+  getShareableSubaccounts: null,
+  searchLabel: t('Share With'),
+  placeholder: null
 };
 export default AsyncSearch;

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

@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { Map } from 'immutable';
 import { Banks as BanksPresenter } from "./presenter.js";
-import { clear, merge } from "../../../common/actions/ui.js";
+import { set as setUI, clear, merge } from "../../../common/actions/ui.js";
 import { connect } from "../../../common/react-redux.js";
 import { getBanks } from "../../../banks/api/banks.js";
 import * as modalActions from "../../../common/actions/modal.js";
@@ -15,15 +15,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: featureOn('item_bank_search_table'),
-    filtersEnabled: featureOn('improved_bank_sharing'),
+    improvedBankSharingEnabled: featureOn('improved_bank_sharing'),
     newItemBankFilterNamesEnabled: featureOn('new_item_bank_filter_names'),
     usedByCourseEnabled: featureOn('filter_item_banks_used_by_course'),
+    subAccountBankSharingEnabled: featureOn('sub_account_bank_sharing'),
     scopeType: scopeType,
     sortBy: sortBy,
     sortOrder: sortOrder,
-    searchTerms: searchTerms
+    searchTerms: searchTerms,
+    searchSelection: searchSelection
   };
 }
 
@@ -33,7 +36,8 @@ function mapDispatchToProps(dispatch) {
     getBanks: bindActionCreators(getBanks, dispatch),
     openModal: bindActionCreators(modalActions.openModal, dispatch),
     clear: bindActionCreators(clear, dispatch),
-    merge: bindActionCreators(merge, dispatch)
+    merge: bindActionCreators(merge, dispatch),
+    setUI: bindActionCreators(setUI, dispatch)
   };
 }
 

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

@@ -9,6 +9,7 @@ var _dec, _class, _class2, _temp;
 /** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
 import { Heading } from '@instructure/ui-heading';
 import { Img } from '@instructure/ui-img';
 import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -18,17 +19,20 @@ import { Button } from '@instructure/ui-buttons';
 import { TextInput } from '@instructure/ui-text-input';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { withStyle, jsx } from '@instructure/emotion';
+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 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 } from '@instructure/quiz-common';
+import { BANKS_BANK_FILTERS, BANKS_BANK_PAGINATION, CREATE_BANK_MODAL, SHARED_WITH_ACCOUNT } from '@instructure/quiz-common';
 import BanksList from "../../../banks/components/BanksList/index.js";
 import CreateBankModal from "../../../banks/components/CreateBankModal/index.js";
 import NavWrapper from "../NavWrapper/index.js";
 import noResults from '../noResults.svg';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import AsyncSearch from "../AsyncSearch/index.js";
 var sortOrderIcons = {
   ascending: IconArrowUpLine,
   descending: IconArrowDownLine
@@ -89,6 +93,12 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         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;
     };
 
@@ -166,6 +176,10 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       _this.search(value);
     };
 
+    _this.handleSearchSelectionChange = function (searchSelection) {
+      _this.props.setUI([BANKS_BANK_FILTERS, 'searchSelection'], searchSelection);
+    };
+
     _this.renderRecords = function (recordIds) {
       return jsx(BanksList, {
         createBankButton: _this.createBankButton,
@@ -190,7 +204,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     };
 
     _this.emptyPage = function () {
-      if (_this.props.searchTerms) {
+      if (_this.props.searchTerms || _this.props.searchSelection.length > 0) {
         var message;
 
         if (_this.props.scopeType === 'course') {
@@ -224,7 +238,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   _createClass(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 || !isEqual(prevProps.searchSelection, this.props.searchSelection)) {
         this.props.clear(BANKS_BANK_PAGINATION);
       }
     }
@@ -269,12 +283,20 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         display: false
       }];
       var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
-      var searchFilters = jsx(React.Fragment, null, jsx("div", {
-        display: "inline-block"
+      var searchFilters = jsx(View, {
+        as: "div",
+        width: "100%"
+      }, jsx(Grid, {
+        startAt: "medium",
+        colSpacing: "small",
+        rowSpacing: "small",
+        vAlign: "bottom"
+      }, jsx(Grid.Row, null, jsx(Grid.Col, {
+        width: "auto"
       }, jsx(SimpleSelect, {
         onChange: this.handleBanksParentChange,
         value: this.props.scopeType,
-        renderLabel: jsx(ScreenReaderContent, null, t('Bank scope')),
+        renderLabel: t('Filter By'),
         width: "13rem"
       }, scopeOptions.map(function (option) {
         return jsx(SimpleSelect.Option, {
@@ -282,16 +304,27 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
           key: option.slug,
           value: option.slug
         }, option.translation);
-      }))), jsx("div", {
-        css: this.props.styles.searchBarContainer
+      }))), jsx(Grid.Col, {
+        width: 4
       }, jsx(TextInput, {
-        renderLabel: jsx(ScreenReaderContent, null, t('Search...')),
+        renderLabel: t('Bank'),
         type: "search",
         value: this.state.searchTerms,
         onChange: this.handleSearchInputChange,
-        placeholder: t('Search...'),
+        placeholder: t('Search Banks'),
         "data-automation": "sdk-search-bank-textinput"
-      })));
+      })), this.props.subAccountBankSharingEnabled && jsx(Grid.Col, {
+        width: 4
+      }, jsx(AsyncSearch, {
+        getShareableSubaccounts: this.props.getShareableSubaccounts,
+        improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
+        minChars: this.props.minChars,
+        onSelectionChange: this.handleSearchSelectionChange,
+        searchType: SHARED_WITH_ACCOUNT,
+        selectedOption: this.props.searchSelection,
+        searchLabel: t('Account'),
+        placeholderLabel: t('Search Accounts')
+      })))));
       var sortingFiltersSelectOptionIdPrefix = 'banks-sorting-filters-select-option-';
       var sortingFilters = jsx(React.Fragment, null, jsx("div", {
         display: "inline-block",
@@ -345,7 +378,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     key: "renderHeader",
     value: function renderHeader() {
       return 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 : {}]
       }, jsx(Heading, {
         as: this.props.isCompact ? 'h2' : 'h1',
         level: "h1"
@@ -391,7 +424,7 @@ 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.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), jsx(CreateBankModal, {
+      }, this.renderHeader(), this.props.improvedBankSharingEnabled && this.renderFilters(), this.renderBanksSearchResults(), jsx(CreateBankModal, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -412,8 +445,8 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     account_name: PropTypes.string
   }),
   // from consumer
-  clear: PropTypes.func,
-  filtersEnabled: PropTypes.bool,
+  clear: PropTypes.func.isRequired,
+  improvedBankSharingEnabled: PropTypes.bool,
   getBanks: PropTypes.func.isRequired,
   getCourseInfo: PropTypes.func,
   // from consumer
@@ -449,10 +482,18 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   }).isRequired,
   scopeType: PropTypes.string,
   searchTerms: PropTypes.string,
+  searchSelection: PropTypes.arrayOf(PropTypes.shape({
+    avatar: PropTypes.string,
+    fullName: PropTypes.string,
+    title: PropTypes.string,
+    uuid: PropTypes.string.isRequired
+  })),
   sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
   usedByCourseEnabled: PropTypes.bool,
   itemBankSearchTableEnabled: PropTypes.bool,
+  setUI: PropTypes.func.isRequired,
+  subAccountBankSharingEnabled: PropTypes.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: PropTypes.object
 }, _class2.defaultProps = {
@@ -469,18 +510,18 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   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.string
 }, _temp)) || _class);

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

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

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

@@ -31,7 +31,7 @@ import { withStyle, jsx } from '@instructure/emotion';
 import elementsForSelectors from "../../../common/util/ElementsForSelectors.js";
 import CustomPropTypes from "../../../common/util/CustomPropTypes.js";
 import ShareList from "./ShareList/index.js";
-import AsyncSearch from "./asyncSearch.js";
+import AsyncSearch from "../AsyncSearch/index.js";
 import Spinner from "../../../common/components/shared/spinner/Spinner.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";

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

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -6,21 +5,13 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { themeable } from '@instructure/ui-themeable';
-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'
-};
-import theme from "./theme.js";
-export var Page = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var Page = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Page, _Component);
 
   var _super = _createSuper(Page);
@@ -32,6 +23,16 @@ export var Page = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   }
 
   _createClass(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;
@@ -39,7 +40,7 @@ export var Page = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   }, {
     key: "renderSidebar",
     value: function renderSidebar() {
-      return /*#__PURE__*/React.createElement(this.props.sidebarComponent, {
+      return jsx(this.props.sidebarComponent, {
         role: this.props.sidebarRole,
         sidebarOpen: this.props.sidebarOpen,
         toggleSidebar: this.props.toggleSidebar
@@ -48,15 +49,14 @@ export var Page = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   }, {
     key: "render",
     value: function render() {
-      var childrenWrapperStyles = classnames(styles.content, _defineProperty({}, styles.scrollable, this.shouldRenderSidebar()));
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.wrapper
-      }, this.shouldRenderSidebar() ? this.renderSidebar() : null, /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
+        css: this.props.styles.wrapper
+      }, this.shouldRenderSidebar() ? this.renderSidebar() : null, 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));
     }
   }]);
@@ -70,7 +70,9 @@ export var Page = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   sidebarComponent: PropTypes.func,
   sidebarOpen: PropTypes.bool,
   sidebarRole: PropTypes.string,
-  toggleSidebar: PropTypes.func
+  toggleSidebar: PropTypes.func,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   childrenWrapperRef: function childrenWrapperRef() {},
   contentRole: 'main',

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

@@ -0,0 +1,26 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var printMq = '@media print';
+  var isScrollable = props.sidebarComponent != null && props.sidebarOpen != null;
+  return {
+    wrapper: _defineProperty({
+      display: 'flex',
+      fontFamily: componentTheme.fontFamily,
+      height: '100%',
+      margin: '0'
+    }, printMq, {
+      display: 'block'
+    }),
+    childrenWrapper: _objectSpread(_objectSpread({}, isScrollable && {
+      overflowX: 'hidden',
+      overflowY: 'auto'
+    }), {}, {
+      transition: componentTheme.contentTransition,
+      width: '100%'
+    })
+  };
+};
+
+export default generateStyle;

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

@@ -1,10 +1,11 @@
-export default 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)
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -6,25 +6,19 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { IconHamburgerLine } from '@instructure/ui-icons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-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'
-};
-import theme from "./theme.js";
-
-var _ref = /*#__PURE__*/React.createElement(IconHamburgerLine, null);
-
-export var HeaderMenuButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconHamburgerLine, null);
+
+export var HeaderMenuButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(HeaderMenuButton, _Component);
 
   var _super = _createSuper(HeaderMenuButton);
@@ -62,14 +56,14 @@ export var HeaderMenuButton = (_dec = themeable(theme, styles), _dec(_class = (_
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.title
-      }, /*#__PURE__*/React.createElement("button", {
-        className: styles.menuButton,
+      return jsx("div", {
+        css: this.props.styles.title
+      }, jsx("button", {
+        css: this.props.styles.menuButton,
         onClick: this.toggleNavigator,
         tabIndex: "0",
         "data-automation": "sdk-hamburger-button"
-      }, _ref, /*#__PURE__*/React.createElement(ScreenReaderContent, null, sidebarOpen ? t('Hide Question Navigator Menu') : t('Show Question Navigator Menu'))));
+      }, _ref, jsx(ScreenReaderContent, null, sidebarOpen ? t('Hide Question Navigator Menu') : t('Show Question Navigator Menu'))));
     }
   }]);
 
@@ -79,6 +73,7 @@ export var HeaderMenuButton = (_dec = themeable(theme, styles), _dec(_class = (_
   sidebarMenuClick: PropTypes.func.isRequired,
   hidden: PropTypes.bool.isRequired,
   sidebarOpen: PropTypes.bool.isRequired,
-  screenreaderNotification: PropTypes.func.isRequired
+  screenreaderNotification: PropTypes.func.isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default HeaderMenuButton;

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

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    title: _defineProperty({
+      /* 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
+      }
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/header/HeaderMenuButton/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var breakpoints = _ref.breakpoints,
       colors = _ref.colors,
       typography = _ref.typography;
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     menuButtonColor: colors.licorice,
     menuButtonHoverOpacity: '0.6'
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,25 +5,16 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@instructure/ui-text';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { DISPLAY_AS_SUMMARY_LIMIT } from "../presenter.js";
-var styles = {
-  componentId: 'dhBxf',
-  template: function template(theme) {
-    return "\n\n.dhBxf_cltt{flex-grow:2}\n\n.dhBxf_eXht{flex-grow:1;text-align:right}\n\n[dir=ltr] .dhBxf_eXht,[dir=rtl] .dhBxf_eXht{text-align:right}\n\n.dhBxf_flYR{flex-grow:1}\n\n.dhBxf_dMbU{border:dotted ".concat(theme.itemContainerBorderWidth || 'inherit', ";border-color:").concat(theme.itemContainerBorderColor || 'inherit', ";color:").concat(theme.itemContainerColor || 'inherit', ";display:flex;padding:").concat(theme.itemContainerPadding || 'inherit', ";width:100%}\n\n.dhBxf_doNn{display:flex;flex-grow:1;margin:").concat(theme.summaryMargin || 'inherit', ";margin-left:").concat(theme.summaryMarginLeft || 'inherit', "}");
-  },
-  'middleSection': 'dhBxf_cltt',
-  'endSection': 'dhBxf_eXht',
-  'questionCount': 'dhBxf_flYR',
-  'itemsContainer': 'dhBxf_dMbU',
-  'summary': 'dhBxf_doNn'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-export var Summary = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var Summary = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Summary, _Component);
 
   var _super = _createSuper(Summary);
@@ -100,7 +91,7 @@ export var Summary = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
           isShowingItems = _this$props2.isShowingItems;
 
       if (!isDragging) {
-        return /*#__PURE__*/React.createElement(Text, {
+        return jsx(Text, {
           size: "small",
           weight: "light"
         }, isShowingItems ? t('Collapse') : t('Expand'));
@@ -116,26 +107,29 @@ export var Summary = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
       }
 
       var id = "stimulus-summary-content-".concat(this.props.stimulusId);
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         role: "button",
         tabIndex: "0",
         "aria-expanded": this.props.isShowingItems,
         "aria-controls": id,
-        className: styles.summary,
+        "data-testid": "summary",
+        css: this.props.styles.summary,
         onClick: this.handleShowItems,
         onKeyDown: this.handleKeyDown
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         id: id,
-        className: styles.itemsContainer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.questionCount
-      }, /*#__PURE__*/React.createElement(Text, {
+        css: this.props.styles.itemsContainer,
+        "data-testid": "items-container"
+      }, jsx("div", {
+        css: this.props.styles.questionCount,
+        "data-testid": "question-count"
+      }, jsx(Text, {
         size: "small",
         weight: "light"
-      }, this.getCountText())), /*#__PURE__*/React.createElement("div", {
-        className: styles.middleSection
-      }), /*#__PURE__*/React.createElement("div", {
-        className: styles.endSection
+      }, this.getCountText())), jsx("div", {
+        css: this.props.styles.middleSection
+      }), jsx("div", {
+        css: this.props.styles.endSection
       }, this.renderEndSectionContent())));
     }
   }]);
@@ -152,7 +146,8 @@ export var Summary = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   isShowingItems: PropTypes.bool,
   stimulusId: PropTypes.string.isRequired,
   // from connected component
-  setSidebarStimulusIsShowing: PropTypes.func.isRequired
+  setSidebarStimulusIsShowing: PropTypes.func.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   isDragging: false,
   isShowingItems: false