@instructure/quiz-core 20.8.1-rc.6 → 20.8.1-rc.7

package/es/common/components/shared/PaginatedCollection/presenter.js

@@ -8,11 +8,12 @@ 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 * as Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import Paginator from "../Paginator/index.js";
 import Spinner from "../spinner/Spinner.js";
 /**
@@ -29,18 +30,12 @@ import Spinner from "../spinner/Spinner.js";
  * `params` change.
  */
 
-var styles = {
-  componentId: 'wHCnH',
-  template: function template(theme) {
-    return "\n\n.wHCnH_eMrv{color:".concat(theme.emptyColor || 'inherit', ";font-size:").concat(theme.emptyFontSize || 'inherit', ";padding:").concat(theme.emptyPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .wHCnH_eMrv,[dir=rtl] .wHCnH_eMrv{text-align:center}");
-  },
-  'empty': 'wHCnH_eMrv'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref2 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref2 = jsx(Spinner, null);
 
-export var PaginatedCollection = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var PaginatedCollection = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(PaginatedCollection, _Component);
 
   var _super = _createSuper(PaginatedCollection);
@@ -160,8 +155,8 @@ export var PaginatedCollection = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "renderEmpty",
     value: function renderEmpty() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.empty
+      return jsx("div", {
+        css: this.props.styles.empty
       }, this.props.empty);
     }
   }, {
@@ -175,7 +170,7 @@ export var PaginatedCollection = (_dec = themeable(theme, styles), _dec(_class =
       var _this$props = this.props,
           currentPage = _this$props.currentPage,
           totalPages = _this$props.totalPages;
-      return /*#__PURE__*/React.createElement(Paginator, {
+      return jsx(Paginator, {
         currentPage: currentPage,
         onPageChange: this.onPageChange,
         totalPages: totalPages
@@ -195,7 +190,8 @@ export var PaginatedCollection = (_dec = themeable(theme, styles), _dec(_class =
   renderRecords: PropTypes.func.isRequired,
   set: PropTypes.func.isRequired,
   stateKey: PropTypes.string.isRequired,
-  totalPages: PropTypes.number.isRequired
+  totalPages: PropTypes.number.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   empty: null,
   params: Immutable.Map()

package/es/common/components/shared/PaginatedCollection/styles.js

@@ -0,0 +1,12 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    empty: {
+      padding: componentTheme.emptyPadding,
+      fontSize: componentTheme.emptyFontSize,
+      textAlign: 'center',
+      color: componentTheme.emptyColor
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/shared/PaginatedCollection/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       typography = _ref.typography,
       spacing = _ref.spacing;
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     emptyFontSize: typography.fontSizeLarge,
     emptyColor: colors.ash
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/overlayEmotion/index.js

@@ -0,0 +1,89 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+
+/* eslint "jsx-a11y/click-events-have-key-events": "warn" */
+
+/* eslint "jsx-a11y/no-static-element-interactions": "warn" */
+
+/* eslint-disable-next-line no-unused-vars */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+/*
+ * We might be able to do the mouse over stuff automatically inside of this
+ * component but it seems like this is the simplest and best choice for now.
+ */
+
+import { withStyle, jsx, Global } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+var OverlayEmotion = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(OverlayEmotion, _Component);
+
+  var _super = _createSuper(OverlayEmotion);
+
+  function OverlayEmotion() {
+    _classCallCheck(this, OverlayEmotion);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(OverlayEmotion, [{
+    key: "overlayDiv",
+    value: function overlayDiv() {
+      if (this.props.hideOverlay) {
+        return null;
+      }
+
+      return jsx("div", {
+        role: "presentation",
+        css: this.props.styles.overlay,
+        onClick: this.props.onClick,
+        "data-automation": "sdk-overlay"
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          wrapperStyles = _this$props.wrapperStyles,
+          children = _this$props.children,
+          tabIndex = _this$props.tabIndex,
+          ariaLabel = _this$props.ariaLabel;
+      return jsx(React.Fragment, null, jsx(Global, {
+        styles: {
+          'body.tox-fullscreen .overlay': {
+            'zIndex': '0'
+          }
+        }
+      }), jsx("div", {
+        css: [this.props.styles.root, wrapperStyles],
+        "data-testid": "overlay-wrapper",
+        tabIndex: tabIndex,
+        "aria-label": ariaLabel
+      }, this.overlayDiv(), children));
+    }
+  }]);
+
+  OverlayEmotion.displayName = "OverlayEmotion";
+  return OverlayEmotion;
+}(Component), _class2.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
+  hideOverlay: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  wrapperStyles: PropTypes.object,
+  tabIndex: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  styles: PropTypes.object
+}, _class2.defaultProps = {
+  hideOverlay: false,
+  tabIndex: '0',
+  wrapperStyles: {},
+  ariaLabel: void 0
+}, _temp)) || _class);
+export default OverlayEmotion;

package/es/common/components/shared/overlayEmotion/styles.js

@@ -0,0 +1,23 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    root: {
+      position: 'relative',
+      alignSelf: 'center'
+    },
+    overlay: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      cursor: 'pointer',
+      zIndex: componentTheme.overlayZIndex,
+      height: '100%',
+      width: '100%',
+      '&:hover': {
+        boxSizing: 'border-box',
+        borderLeft: "".concat(componentTheme.overlayBarSize, " solid ").concat(componentTheme.overlayBarColor)
+      }
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/shared/overlayEmotion/theme.js

@@ -0,0 +1,12 @@
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var colors = _ref.colors,
+      borders = _ref.borders,
+      spacing = _ref.spacing;
+  return {
+    overlayZIndex: '2222',
+    overlayBarColor: colors.electric,
+    overlayBarSize: '0.3rem'
+  };
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/spinner/Spinner.js

@@ -5,24 +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 { Spinner } from '@instructure/ui-spinner';
 import { PresentationContent } 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: 'cJgyM',
-  template: function template(theme) {
-    return "\n\n.cJgyM_gasz{align-items:center;column-gap:10px;display:inline-flex;flex:1 1 auto;height:100%;justify-content:center;width:100%}\n\n:root .cJgyM_gasz,_:-ms-fullscreen{height:10rem}\n\n.cJgyM_bZBM .cJgyM_qrQc{flex:1 1 auto}";
-  },
-  'wrapper': 'cJgyM_gasz',
-  'left': 'cJgyM_bZBM',
-  'right': 'cJgyM_qrQc'
-};
-import theme from "./theme.js";
-export var QuizzesSpinner = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+export var QuizzesSpinner = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizzesSpinner, _Component);
 
   var _super = _createSuper(QuizzesSpinner);
@@ -40,7 +32,7 @@ export var QuizzesSpinner = (_dec = themeable(theme, styles), _dec(_class = (_te
           color = _this$props.color,
           mainText = _this$props.mainText,
           fontSize = _this$props.fontSize;
-      return /*#__PURE__*/React.createElement(Text, {
+      return jsx(Text, {
         size: fontSize,
         color: color
       }, mainText || t('Loading...'));
@@ -51,19 +43,15 @@ export var QuizzesSpinner = (_dec = themeable(theme, styles), _dec(_class = (_te
       var _this$props2 = this.props,
           size = _this$props2.size,
           minHeight = _this$props2.minHeight;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.wrapper,
+      return jsx("div", {
+        css: this.props.styles.wrapper,
         style: {
           minHeight: minHeight
         }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.left
-      }, /*#__PURE__*/React.createElement(Spinner, {
+      }, jsx("div", null, jsx(Spinner, {
         renderTitle: this.mainText(),
         size: size
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.right
-      }, /*#__PURE__*/React.createElement(PresentationContent, null, this.mainText())));
+      })), jsx("div", null, jsx(PresentationContent, null, this.mainText())));
     }
   }]);
 
@@ -74,7 +62,8 @@ export var QuizzesSpinner = (_dec = themeable(theme, styles), _dec(_class = (_te
   fontSize: PropTypes.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
   size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
   color: PropTypes.string,
-  minHeight: PropTypes.string
+  minHeight: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   mainText: null,
   size: 'large',

package/es/common/components/shared/spinner/styles.js

@@ -0,0 +1,15 @@
+var generateStyle = function generateStyle() {
+  return {
+    wrapper: {
+      width: '100%',
+      height: '100%',
+      display: 'inline-flex',
+      flex: '1 1 auto',
+      alignItems: 'center',
+      justifyContent: 'center',
+      columnGap: '10px'
+    }
+  };
+};
+
+export default generateStyle;

package/lib/common/components/shared/PaginatedCollection/presenter.js

@@ -23,7 +23,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 Immutable = _interopRequireWildcard(require("immutable"));
 
@@ -31,40 +31,21 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../Paginator/index.js"));
 
 var _Spinner = _interopRequireDefault(require("../spinner/Spinner.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-/**
- * Renders pagination controls and manages state of page contents. `getPage`
- * will be called with the page number and any collection parameters, and should
- * return a promise that resolves to `{ records, totalPages }`, where `records`
- * is an array of arbitrary records, and `totalPages` is the total number of
- * pages. `renderRecords` will be called with `records` as returned from the
- * `getPage` function. It is the responsibility of that function to render the
- * page.
- *
- * This component assumes that changing collection `params` can change the
- * underlying collection that is fetched. It thus resets the page cache when
- * `params` change.
- */
-var styles = {
-  componentId: 'wHCnH',
-  template: function template(theme) {
-    return "\n\n.wHCnH_eMrv{color:".concat(theme.emptyColor || 'inherit', ";font-size:").concat(theme.emptyFontSize || 'inherit', ";padding:").concat(theme.emptyPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .wHCnH_eMrv,[dir=rtl] .wHCnH_eMrv{text-align:center}");
-  },
-  'empty': 'wHCnH_eMrv'
-};
-
-var _ref2 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
-
-var PaginatedCollection = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var _ref2 = (0, _emotion.jsx)(_Spinner.default, null);
+
+var PaginatedCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(PaginatedCollection, _Component);
 
   var _super = (0, _createSuper2.default)(PaginatedCollection);
@@ -184,8 +165,8 @@ var PaginatedCollection = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
   }, {
     key: "renderEmpty",
     value: function renderEmpty() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.empty
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.empty
       }, this.props.empty);
     }
   }, {
@@ -199,7 +180,7 @@ var PaginatedCollection = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
       var _this$props = this.props,
           currentPage = _this$props.currentPage,
           totalPages = _this$props.totalPages;
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         currentPage: currentPage,
         onPageChange: this.onPageChange,
         totalPages: totalPages
@@ -218,7 +199,8 @@ var PaginatedCollection = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
   renderRecords: _propTypes.default.func.isRequired,
   set: _propTypes.default.func.isRequired,
   stateKey: _propTypes.default.string.isRequired,
-  totalPages: _propTypes.default.number.isRequired
+  totalPages: _propTypes.default.number.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   empty: null,
   params: Immutable.Map()

package/lib/common/components/shared/PaginatedCollection/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    empty: {
+      padding: componentTheme.emptyPadding,
+      fontSize: componentTheme.emptyFontSize,
+      textAlign: 'center',
+      color: componentTheme.emptyColor
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/shared/PaginatedCollection/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,
       typography = _ref.typography,
       spacing = _ref.spacing;
@@ -14,4 +14,7 @@ function generator(_ref) {
     emptyFontSize: typography.fontSizeLarge,
     emptyColor: colors.ash
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/shared/overlayEmotion/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var OverlayEmotion = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(OverlayEmotion, _Component);
+
+  var _super = (0, _createSuper2.default)(OverlayEmotion);
+
+  function OverlayEmotion() {
+    (0, _classCallCheck2.default)(this, OverlayEmotion);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(OverlayEmotion, [{
+    key: "overlayDiv",
+    value: function overlayDiv() {
+      if (this.props.hideOverlay) {
+        return null;
+      }
+
+      return (0, _emotion.jsx)("div", {
+        role: "presentation",
+        css: this.props.styles.overlay,
+        onClick: this.props.onClick,
+        "data-automation": "sdk-overlay"
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          wrapperStyles = _this$props.wrapperStyles,
+          children = _this$props.children,
+          tabIndex = _this$props.tabIndex,
+          ariaLabel = _this$props.ariaLabel;
+      return (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)(_emotion.Global, {
+        styles: {
+          'body.tox-fullscreen .overlay': {
+            'zIndex': '0'
+          }
+        }
+      }), (0, _emotion.jsx)("div", {
+        css: [this.props.styles.root, wrapperStyles],
+        "data-testid": "overlay-wrapper",
+        tabIndex: tabIndex,
+        "aria-label": ariaLabel
+      }, this.overlayDiv(), children));
+    }
+  }]);
+  OverlayEmotion.displayName = "OverlayEmotion";
+  return OverlayEmotion;
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element)]).isRequired,
+  hideOverlay: _propTypes.default.bool,
+  onClick: _propTypes.default.func.isRequired,
+  wrapperStyles: _propTypes.default.object,
+  tabIndex: _propTypes.default.string,
+  ariaLabel: _propTypes.default.string,
+  styles: _propTypes.default.object
+}, _class2.defaultProps = {
+  hideOverlay: false,
+  tabIndex: '0',
+  wrapperStyles: {},
+  ariaLabel: void 0
+}, _temp)) || _class);
+var _default = OverlayEmotion;
+exports.default = _default;

package/lib/common/components/shared/overlayEmotion/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    root: {
+      position: 'relative',
+      alignSelf: 'center'
+    },
+    overlay: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      cursor: 'pointer',
+      zIndex: componentTheme.overlayZIndex,
+      height: '100%',
+      width: '100%',
+      '&:hover': {
+        boxSizing: 'border-box',
+        borderLeft: "".concat(componentTheme.overlayBarSize, " solid ").concat(componentTheme.overlayBarColor)
+      }
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/shared/overlayEmotion/theme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var colors = _ref.colors,
+      borders = _ref.borders,
+      spacing = _ref.spacing;
+  return {
+    overlayZIndex: '2222',
+    overlayBarColor: colors.electric,
+    overlayBarSize: '0.3rem'
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/shared/spinner/Spinner.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,7 +15,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,24 +25,15 @@ var _uiSpinner = require("@instructure/ui-spinner");
 
 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 _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'cJgyM',
-  template: function template(theme) {
-    return "\n\n.cJgyM_gasz{align-items:center;column-gap:10px;display:inline-flex;flex:1 1 auto;height:100%;justify-content:center;width:100%}\n\n:root .cJgyM_gasz,_:-ms-fullscreen{height:10rem}\n\n.cJgyM_bZBM .cJgyM_qrQc{flex:1 1 auto}";
-  },
-  'wrapper': 'cJgyM_gasz',
-  'left': 'cJgyM_bZBM',
-  'right': 'cJgyM_qrQc'
-};
-var QuizzesSpinner = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizzesSpinner = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizzesSpinner, _Component);
 
   var _super = (0, _createSuper2.default)(QuizzesSpinner);
@@ -61,7 +50,7 @@ var QuizzesSpinner = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
           color = _this$props.color,
           mainText = _this$props.mainText,
           fontSize = _this$props.fontSize;
-      return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      return (0, _emotion.jsx)(_uiText.Text, {
         size: fontSize,
         color: color
       }, mainText || (0, _formatMessage.default)('Loading...'));
@@ -72,19 +61,15 @@ var QuizzesSpinner = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
       var _this$props2 = this.props,
           size = _this$props2.size,
           minHeight = _this$props2.minHeight;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.wrapper,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.wrapper,
         style: {
           minHeight: minHeight
         }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.left
-      }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+      }, (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiSpinner.Spinner, {
         renderTitle: this.mainText(),
         size: size
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.right
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, this.mainText())));
+      })), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, this.mainText())));
     }
   }]);
   QuizzesSpinner.displayName = "QuizzesSpinner";
@@ -94,7 +79,8 @@ var QuizzesSpinner = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
   fontSize: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
   size: _propTypes.default.oneOf(['x-small', 'small', 'medium', 'large']),
   color: _propTypes.default.string,
-  minHeight: _propTypes.default.string
+  minHeight: _propTypes.default.string,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   mainText: null,
   size: 'large',

package/lib/common/components/shared/spinner/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    wrapper: {
+      width: '100%',
+      height: '100%',
+      display: 'inline-flex',
+      flex: '1 1 auto',
+      alignItems: 'center',
+      justifyContent: 'center',
+      columnGap: '10px'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.8.1-rc.6+d10ecab90",
+  "version": "20.8.1-rc.7+de8a0c6fd",
   "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.8.1-rc.6+d10ecab90",
-    "@instructure/quiz-i18n": "20.8.1-rc.6+d10ecab90",
-    "@instructure/quiz-interactions": "20.8.1-rc.6+d10ecab90",
-    "@instructure/quiz-number-input": "20.8.1-rc.6+d10ecab90",
-    "@instructure/quiz-rce": "20.8.1-rc.6+d10ecab90",
+    "@instructure/quiz-common": "20.8.1-rc.7+de8a0c6fd",
+    "@instructure/quiz-i18n": "20.8.1-rc.7+de8a0c6fd",
+    "@instructure/quiz-interactions": "20.8.1-rc.7+de8a0c6fd",
+    "@instructure/quiz-number-input": "20.8.1-rc.7+de8a0c6fd",
+    "@instructure/quiz-rce": "20.8.1-rc.7+de8a0c6fd",
     "@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.8.1-rc.6+d10ecab90",
+    "instructure-validations": "20.8.1-rc.7+de8a0c6fd",
     "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.8.1-rc.6+d10ecab90",
+    "quiz-presets": "20.8.1-rc.7+de8a0c6fd",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d10ecab901c9c9d64317e256c5e7b1a533b8d5b8"
+  "gitHead": "de8a0c6fd8ca971f496d689fa38d73ed6fa92a62"
 }

package/es/common/components/shared/spinner/theme.js

@@ -1,3 +0,0 @@
-export default function generator() {
-  return {};
-}

package/lib/common/components/shared/spinner/theme.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator() {
-  return {};
-}