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

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

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/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;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var breakpoints = _ref.breakpoints,
       colors = _ref.colors,
       typography = _ref.typography;
@@ -15,4 +15,7 @@ function generator(_ref) {
     menuButtonColor: colors.licorice,
     menuButtonHoverOpacity: '0.6'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/layout/sidebar/Stimulus/Summary/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
 });
@@ -17,34 +15,25 @@ 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 _uiText = require("@instructure/ui-text");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _presenter = require("../presenter.js");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-var Summary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Summary = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Summary, _Component);
 
   var _super = (0, _createSuper2.default)(Summary);
@@ -121,7 +110,7 @@ var Summary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
           isShowingItems = _this$props2.isShowingItems;
 
       if (!isDragging) {
-        return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        return (0, _emotion.jsx)(_uiText.Text, {
           size: "small",
           weight: "light"
         }, isShowingItems ? (0, _formatMessage.default)('Collapse') : (0, _formatMessage.default)('Expand'));
@@ -137,26 +126,29 @@ var Summary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
       }
 
       var id = "stimulus-summary-content-".concat(this.props.stimulusId);
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.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.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         id: id,
-        className: styles.itemsContainer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.questionCount
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        css: this.props.styles.itemsContainer,
+        "data-testid": "items-container"
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.questionCount,
+        "data-testid": "question-count"
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small",
         weight: "light"
-      }, this.getCountText())), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.middleSection
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.endSection
+      }, this.getCountText())), (0, _emotion.jsx)("div", {
+        css: this.props.styles.middleSection
+      }), (0, _emotion.jsx)("div", {
+        css: this.props.styles.endSection
       }, this.renderEndSectionContent())));
     }
   }]);
@@ -172,7 +164,8 @@ var Summary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   isShowingItems: _propTypes.default.bool,
   stimulusId: _propTypes.default.string.isRequired,
   // from connected component
-  setSidebarStimulusIsShowing: _propTypes.default.func.isRequired
+  setSidebarStimulusIsShowing: _propTypes.default.func.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   isDragging: false,
   isShowingItems: false

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       borders = _ref.borders;
@@ -17,4 +17,7 @@ function generator(_ref) {
     summaryMargin: spacing.small,
     summaryMarginLeft: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.9.1-rc.4+fe2d0e926",
+  "version": "20.9.1-rc.5+813bd63b2",
   "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.1.0",
-    "@instructure/quiz-common": "20.9.1-rc.4+fe2d0e926",
-    "@instructure/quiz-i18n": "20.9.1-rc.4+fe2d0e926",
-    "@instructure/quiz-interactions": "20.9.1-rc.4+fe2d0e926",
-    "@instructure/quiz-number-input": "20.9.1-rc.4+fe2d0e926",
-    "@instructure/quiz-rce": "20.9.1-rc.4+fe2d0e926",
+    "@instructure/quiz-common": "20.9.1-rc.5+813bd63b2",
+    "@instructure/quiz-i18n": "20.9.1-rc.5+813bd63b2",
+    "@instructure/quiz-interactions": "20.9.1-rc.5+813bd63b2",
+    "@instructure/quiz-number-input": "20.9.1-rc.5+813bd63b2",
+    "@instructure/quiz-rce": "20.9.1-rc.5+813bd63b2",
     "@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.9.1-rc.4+fe2d0e926",
+    "instructure-validations": "20.9.1-rc.5+813bd63b2",
     "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.9.1-rc.4+fe2d0e926",
+    "quiz-presets": "20.9.1-rc.5+813bd63b2",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fe2d0e92627e0007ea9061b9a804f68a2d1fcecc"
+  "gitHead": "813bd63b275ad613c4a995bae449c2e610fe1526"
 }