@instructure/quiz-core 20.9.1-rc.0 → 20.9.1-rc.2

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

@@ -5,7 +5,8 @@ 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 partial from 'lodash/partial';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -13,27 +14,18 @@ import { IconClockLine, IconClockSolid, IconArrowOpenStartLine } from '@instruct
 import { Button } from '@instructure/ui-buttons';
 import { TopNavBar } from '@instructure/ui-top-nav-bar';
 import { View } from '@instructure/ui-view';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import FormattedDuration from "../../../shared/FormattedDuration/index.js";
 import { formatTime } from "../../../../util/formatTimespan.js";
-var styles = {
-  componentId: 'fBhoO',
-  template: function template(theme) {
-    return "\n\n.fBhoO_dAhe{flex-direction:row;font-size:".concat(theme.timerFontSize || 'inherit', ";justify-content:center;line-height:1rem}\n\n.fBhoO_dAhe,.fBhoO_Swlx{align-items:center;display:flex}\n\n.fBhoO_Swlx{flex-direction:column-reverse}\n\n.fBhoO_dkDW{padding:").concat(theme.timerRightPadding || 'inherit', "}\n\n.fBhoO_bYJj{font-size:").concat(theme.timeRemainingLabelFontSize || 'inherit', ";text-align:center;width:100%}\n\n[dir=ltr] .fBhoO_bYJj,[dir=rtl] .fBhoO_bYJj{text-align:center}");
-  },
-  'timer': 'fBhoO_dAhe',
-  'timerLeft': 'fBhoO_Swlx',
-  'timerRight': 'fBhoO_dkDW',
-  'timeRemainingLabel': 'fBhoO_bYJj'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 
-var _ref = /*#__PURE__*/React.createElement(IconClockLine, null);
+var _ref = jsx(IconClockLine, null);
 
-var _ref2 = /*#__PURE__*/React.createElement(IconClockSolid, null);
+var _ref2 = jsx(IconClockSolid, null);
 
-export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var Timer = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Timer, _Component);
 
   var _super = _createSuper(Timer);
@@ -119,13 +111,13 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
   }, {
     key: "renderHelpScreenreaderText",
     value: function renderHelpScreenreaderText() {
-      return /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('During the quiz, press Alt+Shift+T to have the remaining time read'));
+      return jsx(ScreenReaderContent, null, t('During the quiz, press Alt+Shift+T to have the remaining time read'));
     }
   }, {
     key: "renderMinimizedTimer",
     value: function renderMinimizedTimer() {
       if (this.props.iceTopNavBarEnabled) {
-        return /*#__PURE__*/React.createElement(TopNavBar.Item, {
+        return jsx(TopNavBar.Item, {
           id: "TimerButton",
           onClick: partial(this.props.updateTimerMinimized, false),
           variant: "icon",
@@ -136,20 +128,20 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
         }, t('Show Timer'));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.timer
-      }, this.renderHelpScreenreaderText(), /*#__PURE__*/React.createElement(Button, {
+      return jsx("div", {
+        css: this.props.styles.timer
+      }, this.renderHelpScreenreaderText(), jsx(Button, {
         "aria-expanded": "false",
         ref: this.showTimerRef,
         renderIcon: IconClockLine,
         onClick: partial(this.props.updateTimerMinimized, false)
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Show Timer'))));
+      }, jsx(ScreenReaderContent, null, t('Show Timer'))));
     }
   }, {
     key: "renderMaximizedTimer",
     value: function renderMaximizedTimer() {
       if (this.props.iceTopNavBarEnabled) {
-        return /*#__PURE__*/React.createElement(TopNavBar.Item, {
+        return jsx(TopNavBar.Item, {
           id: "TimerButton",
           onClick: partial(this.props.updateTimerMinimized, true),
           variant: "forceIconWithLabel",
@@ -157,29 +149,29 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
           tooltip: t('Hide Timer'),
           "aria-expanded": "true",
           itemRef: this.hideTimerRef
-        }, /*#__PURE__*/React.createElement(FormattedDuration, {
+        }, jsx(FormattedDuration, {
           seconds: this.props.timeLeftInSeconds
         }));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.timer
-      }, this.renderHelpScreenreaderText(), /*#__PURE__*/React.createElement(View, {
+      return jsx("div", {
+        css: this.props.styles.timer
+      }, this.renderHelpScreenreaderText(), jsx(View, {
         as: "div"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.timerLeft
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.timeRemainingLabel
-      }, t('Time Remaining')), /*#__PURE__*/React.createElement(FormattedDuration, {
+      }, jsx("div", {
+        css: this.props.styles.timerLeft
+      }, jsx("div", {
+        css: this.props.styles.timeRemainingLabel
+      }, t('Time Remaining')), jsx(FormattedDuration, {
         seconds: this.props.timeLeftInSeconds
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: styles.timerRight
-      }, /*#__PURE__*/React.createElement(Button, {
+      }))), jsx("div", {
+        css: this.props.styles.timerRight
+      }, jsx(Button, {
         "aria-expanded": "true",
         ref: this.hideTimerRef,
         renderIcon: IconArrowOpenStartLine,
         onClick: partial(this.props.updateTimerMinimized, true)
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Hide Timer')))));
+      }, jsx(ScreenReaderContent, null, t('Hide Timer')))));
     }
   }, {
     key: "render",
@@ -204,7 +196,8 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
   timerRunning: PropTypes.bool,
   updateTimerMinimized: PropTypes.func.isRequired,
   iceTopNavBarEnabled: PropTypes.bool,
-  setTimerEnabled: PropTypes.func
+  setTimerEnabled: PropTypes.func,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   timerRunning: false,
   timeLeftInSeconds: 0,

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

@@ -0,0 +1,27 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    timer: {
+      lineHeight: '1rem',
+      fontSize: componentTheme.timerFontSize,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    timerLeft: {
+      display: 'flex',
+      flexDirection: 'column-reverse',
+      alignItems: 'center'
+    },
+    timerRight: {
+      padding: componentTheme.timerRightPadding
+    },
+    timeRemainingLabel: {
+      fontSize: componentTheme.timeRemainingLabelFontSize,
+      width: '100%',
+      textAlign: 'center'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       borders = _ref.borders,
       colors = _ref.colors,
@@ -15,4 +15,6 @@ export default function generator(_ref) {
     timerRightPadding: spacing.xxSmall,
     timeRemainingLabelFontSize: typography.fontSizeXSmall
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,12 +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 ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
 import { List } from 'immutable';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { Button } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
 import { IconPlusLine } from '@instructure/ui-icons';
@@ -18,17 +19,9 @@ import { Grid } from '@instructure/ui-grid';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import { interactionTypeMetadata } from "../../../util/interactionTypeMetadata.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'bLlES',
-  template: function template(theme) {
-    return "\n\n.bLlES_cvRx{padding-right:0.25rem}\n\n.bLlES_dsOT{width:10rem}\n\n.bLlES_cFIX{border-top:".concat(theme.stimulusDividerBorderWidth || 'inherit', " solid ").concat(theme.stimulusDividerBorderColor || 'inherit', ";margin-bottom:").concat(theme.stimulusDividerMarginBottom || 'inherit', ";margin-top:").concat(theme.stimulusDividerMarginTop || 'inherit', "}");
-  },
-  'iconWrapper': 'bLlES_cvRx',
-  'textWrapper': 'bLlES_dsOT',
-  'stimulusDivider': 'bLlES_cFIX'
-};
-import theme from "./theme.js";
-export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var InteractionTypes = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(InteractionTypes, _Component);
 
   var _super = _createSuper(InteractionTypes);
@@ -64,7 +57,7 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
         automation = "sdk-interaction-button-".concat(intType.slug);
       }
 
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         key: intType.slug,
         margin: "0 0 xx-small",
         onClick: onClick,
@@ -72,20 +65,20 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
         "data-automation": automation,
         display: "block",
         textAlign: "start"
-      }, /*#__PURE__*/React.createElement(Grid, {
+      }, jsx(Grid, {
         colSpacing: "none",
         vAlign: "middle"
-      }, /*#__PURE__*/React.createElement(Grid.Row, {
+      }, jsx(Grid.Row, {
         key: "iconrow"
-      }, /*#__PURE__*/React.createElement(Grid.Col, {
+      }, jsx(Grid.Col, {
         width: "auto"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.iconWrapper
-      }, /*#__PURE__*/React.createElement(Icon, {
+      }, jsx("div", {
+        css: _this.props.styles.iconWrapper
+      }, jsx(Icon, {
         title: title
-      }))), /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement("div", {
-        className: styles.textWrapper
-      }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Text, {
+      }))), jsx(Grid.Col, null, jsx("div", {
+        css: _this.props.styles.textWrapper
+      }, jsx(PresentationContent, null, jsx(Text, {
         color: "primary"
       }, name)))))));
     };
@@ -103,7 +96,7 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
           buttons[Math.floor(i / _this.props.columns)] = [];
         }
 
-        buttons[Math.floor(i / _this.props.columns)].push( /*#__PURE__*/React.createElement(Grid.Col, {
+        buttons[Math.floor(i / _this.props.columns)].push(jsx(Grid.Col, {
           width: 12 / _this.props.columns,
           key: intType.slug
         }, button));
@@ -112,7 +105,7 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
         var key = gridCols.map(function (gridCol) {
           return gridCol.key;
         }).join('-');
-        return /*#__PURE__*/React.createElement(Grid.Row, {
+        return jsx(Grid.Row, {
           key: key
         }, gridCols);
       });
@@ -120,16 +113,16 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
 
     _this.renderStimulusTypeButton = function () {
       if (_this.props.allowStimulusCreation) {
-        var dividerRow = /*#__PURE__*/React.createElement(Grid.Row, {
+        var dividerRow = jsx(Grid.Row, {
           key: "divider"
-        }, /*#__PURE__*/React.createElement(Grid.Col, {
+        }, jsx(Grid.Col, {
           key: "divider"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.stimulusDivider
+        }, jsx("div", {
+          css: _this.props.styles.stimulusDivider
         })));
-        var stimulusRow = /*#__PURE__*/React.createElement(Grid.Row, {
+        var stimulusRow = jsx(Grid.Row, {
           key: "stimulus"
-        }, /*#__PURE__*/React.createElement(Grid.Col, {
+        }, jsx(Grid.Col, {
           width: 12 / _this.props.columns,
           key: "stimulus"
         }, _this.renderInteractionTypeButton({
@@ -146,7 +139,7 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
   _createClass(InteractionTypes, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Grid, {
+      return jsx(Grid, {
         rowSpacing: "none",
         colSpacing: "small",
         startAt: "medium"
@@ -161,7 +154,8 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
   addItem: PropTypes.func.isRequired,
   addStimulus: PropTypes.func.isRequired,
   allowStimulusCreation: PropTypes.bool,
-  types: ImmutablePropTypes.list
+  types: ImmutablePropTypes.list,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   allowStimulusCreation: true,
   types: List()

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

@@ -0,0 +1,17 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    iconWrapper: {
+      paddingRight: '0.25rem'
+    },
+    textWrapper: {
+      width: '10rem'
+    },
+    stimulusDivider: {
+      borderTop: "".concat(componentTheme.stimulusDividerBorderWidth, " solid ").concat(componentTheme.stimulusDividerBorderColor),
+      marginTop: componentTheme.stimulusDividerMarginTop,
+      marginBottom: componentTheme.stimulusDividerMarginBottom
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     stimulusDividerMarginTop: spacing.xSmall,
     stimulusDividerMarginBottom: spacing.small
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/file_selector/FileSelector.js

@@ -6,20 +6,15 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import { List } from 'immutable';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'flcWS',
-  template: function template(theme) {
-    return "\n\n.flcWS_emRR{background-color:".concat(theme.dropzoneBackgroundColor || 'inherit', ";border:").concat(theme.dropzoneBorderWidth || 'inherit', " dashed ").concat(theme.dropzoneBorderColor || 'inherit', ";cursor:pointer;padding:").concat(theme.dropzonePadding || 'inherit', "}");
-  },
-  'dropzone': 'flcWS_emRR'
-};
-import theme from "./theme.js";
-export var FileSelector = (_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 FileSelector = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(FileSelector, _Component);
 
   var _super = _createSuper(FileSelector);
@@ -47,8 +42,9 @@ export var FileSelector = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropzone, {
-        className: styles.dropzone,
+      return jsx("div", null, jsx(Dropzone, {
+        "data-testid": "file-dropzone",
+        css: this.props.styles.dropzone,
         multiple: this.props.multiple,
         onDrop: this.onDrop,
         accept: this.props.acceptAttribute
@@ -62,7 +58,8 @@ export var FileSelector = (_dec = themeable(theme, styles), _dec(_class = (_temp
   acceptAttribute: PropTypes.string.isRequired,
   content: PropTypes.node.isRequired,
   fileHandler: PropTypes.func.isRequired,
-  multiple: PropTypes.bool
+  multiple: PropTypes.bool,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   multiple: false
 }, _temp)) || _class);

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

@@ -0,0 +1,12 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    dropzone: {
+      backgroundColor: componentTheme.dropzoneBackgroundColor,
+      border: "".concat(componentTheme.dropzoneBorderWidth, " dashed ").concat(componentTheme.dropzoneBorderColor),
+      cursor: 'pointer',
+      padding: componentTheme.dropzonePadding
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/shared/file_selector/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;
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     dropzoneBorderColor: colors.ash,
     dropzonePadding: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/common/components/layout/header/Timer/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,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"));
 
@@ -33,34 +31,25 @@ var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
 
 var _uiView = require("@instructure/ui-view");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../../shared/FormattedDuration/index.js"));
 
 var _formatTimespan = require("../../../../util/formatTimespan.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: 'fBhoO',
-  template: function template(theme) {
-    return "\n\n.fBhoO_dAhe{flex-direction:row;font-size:".concat(theme.timerFontSize || 'inherit', ";justify-content:center;line-height:1rem}\n\n.fBhoO_dAhe,.fBhoO_Swlx{align-items:center;display:flex}\n\n.fBhoO_Swlx{flex-direction:column-reverse}\n\n.fBhoO_dkDW{padding:").concat(theme.timerRightPadding || 'inherit', "}\n\n.fBhoO_bYJj{font-size:").concat(theme.timeRemainingLabelFontSize || 'inherit', ";text-align:center;width:100%}\n\n[dir=ltr] .fBhoO_bYJj,[dir=rtl] .fBhoO_bYJj{text-align:center}");
-  },
-  'timer': 'fBhoO_dAhe',
-  'timerLeft': 'fBhoO_Swlx',
-  'timerRight': 'fBhoO_dkDW',
-  'timeRemainingLabel': 'fBhoO_bYJj'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconClockLine, null);
+var _ref = (0, _emotion.jsx)(_uiIcons.IconClockLine, null);
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconClockSolid, null);
+var _ref2 = (0, _emotion.jsx)(_uiIcons.IconClockSolid, null);
 
-var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Timer = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Timer, _Component);
 
   var _super = (0, _createSuper2.default)(Timer);
@@ -146,13 +135,13 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   }, {
     key: "renderHelpScreenreaderText",
     value: function renderHelpScreenreaderText() {
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('During the quiz, press Alt+Shift+T to have the remaining time read'));
+      return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('During the quiz, press Alt+Shift+T to have the remaining time read'));
     }
   }, {
     key: "renderMinimizedTimer",
     value: function renderMinimizedTimer() {
       if (this.props.iceTopNavBarEnabled) {
-        return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Item, {
+        return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, {
           id: "TimerButton",
           onClick: (0, _partial.default)(this.props.updateTimerMinimized, false),
           variant: "icon",
@@ -163,20 +152,20 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
         }, (0, _formatMessage.default)('Show Timer'));
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.timer
-      }, this.renderHelpScreenreaderText(), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.timer
+      }, this.renderHelpScreenreaderText(), (0, _emotion.jsx)(_uiButtons.Button, {
         "aria-expanded": "false",
         ref: this.showTimerRef,
         renderIcon: _uiIcons.IconClockLine,
         onClick: (0, _partial.default)(this.props.updateTimerMinimized, false)
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Show Timer'))));
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Show Timer'))));
     }
   }, {
     key: "renderMaximizedTimer",
     value: function renderMaximizedTimer() {
       if (this.props.iceTopNavBarEnabled) {
-        return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Item, {
+        return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, {
           id: "TimerButton",
           onClick: (0, _partial.default)(this.props.updateTimerMinimized, true),
           variant: "forceIconWithLabel",
@@ -184,29 +173,29 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
           tooltip: (0, _formatMessage.default)('Hide Timer'),
           "aria-expanded": "true",
           itemRef: this.hideTimerRef
-        }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        }, (0, _emotion.jsx)(_index.default, {
           seconds: this.props.timeLeftInSeconds
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.timer
-      }, this.renderHelpScreenreaderText(), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.timer
+      }, this.renderHelpScreenreaderText(), (0, _emotion.jsx)(_uiView.View, {
         as: "div"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.timerLeft
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.timeRemainingLabel
-      }, (0, _formatMessage.default)('Time Remaining')), /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.timerLeft
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.timeRemainingLabel
+      }, (0, _formatMessage.default)('Time Remaining')), (0, _emotion.jsx)(_index.default, {
         seconds: this.props.timeLeftInSeconds
-      }))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.timerRight
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.timerRight
+      }, (0, _emotion.jsx)(_uiButtons.Button, {
         "aria-expanded": "true",
         ref: this.hideTimerRef,
         renderIcon: _uiIcons.IconArrowOpenStartLine,
         onClick: (0, _partial.default)(this.props.updateTimerMinimized, true)
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Hide Timer')))));
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Hide Timer')))));
     }
   }, {
     key: "render",
@@ -230,7 +219,8 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   timerRunning: _propTypes.default.bool,
   updateTimerMinimized: _propTypes.default.func.isRequired,
   iceTopNavBarEnabled: _propTypes.default.bool,
-  setTimerEnabled: _propTypes.default.func
+  setTimerEnabled: _propTypes.default.func,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   timerRunning: false,
   timeLeftInSeconds: 0,

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    timer: {
+      lineHeight: '1rem',
+      fontSize: componentTheme.timerFontSize,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    timerLeft: {
+      display: 'flex',
+      flexDirection: 'column-reverse',
+      alignItems: 'center'
+    },
+    timerRight: {
+      padding: componentTheme.timerRightPadding
+    },
+    timeRemainingLabel: {
+      fontSize: componentTheme.timeRemainingLabelFontSize,
+      width: '100%',
+      textAlign: 'center'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/layout/header/Timer/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 spacing = _ref.spacing,
       borders = _ref.borders,
       colors = _ref.colors,
@@ -22,4 +22,7 @@ function generator(_ref) {
     timerRightPadding: spacing.xxSmall,
     timeRemainingLabelFontSize: typography.fontSizeXSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/shared/InteractionTypes/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,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,7 +25,7 @@ var _partial = _interopRequireDefault(require("lodash/partial"));
 
 var _immutable = require("immutable");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiButtons = require("@instructure/ui-buttons");
 
@@ -43,20 +41,13 @@ var _interactionTypeMetadata = require("../../../util/interactionTypeMetadata.js
 
 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: 'bLlES',
-  template: function template(theme) {
-    return "\n\n.bLlES_cvRx{padding-right:0.25rem}\n\n.bLlES_dsOT{width:10rem}\n\n.bLlES_cFIX{border-top:".concat(theme.stimulusDividerBorderWidth || 'inherit', " solid ").concat(theme.stimulusDividerBorderColor || 'inherit', ";margin-bottom:").concat(theme.stimulusDividerMarginBottom || 'inherit', ";margin-top:").concat(theme.stimulusDividerMarginTop || 'inherit', "}");
-  },
-  'iconWrapper': 'bLlES_cvRx',
-  'textWrapper': 'bLlES_dsOT',
-  'stimulusDivider': 'bLlES_cFIX'
-};
-var InteractionTypes = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var InteractionTypes = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(InteractionTypes, _Component);
 
   var _super = (0, _createSuper2.default)(InteractionTypes);
@@ -92,7 +83,7 @@ var InteractionTypes = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         automation = "sdk-interaction-button-".concat(intType.slug);
       }
 
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         key: intType.slug,
         margin: "0 0 xx-small",
         onClick: onClick,
@@ -100,20 +91,20 @@ var InteractionTypes = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         "data-automation": automation,
         display: "block",
         textAlign: "start"
-      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+      }, (0, _emotion.jsx)(_uiGrid.Grid, {
         colSpacing: "none",
         vAlign: "middle"
-      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, {
+      }, (0, _emotion.jsx)(_uiGrid.Grid.Row, {
         key: "iconrow"
-      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+      }, (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: "auto"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.iconWrapper
-      }, /*#__PURE__*/_react.default.createElement(Icon, {
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.iconWrapper
+      }, (0, _emotion.jsx)(Icon, {
         title: title
-      }))), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.textWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }))), (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.textWrapper
+      }, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary"
       }, name)))))));
     };
@@ -131,7 +122,7 @@ var InteractionTypes = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
           buttons[Math.floor(i / _this.props.columns)] = [];
         }
 
-        buttons[Math.floor(i / _this.props.columns)].push( /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        buttons[Math.floor(i / _this.props.columns)].push((0, _emotion.jsx)(_uiGrid.Grid.Col, {
           width: 12 / _this.props.columns,
           key: intType.slug
         }, button));
@@ -140,7 +131,7 @@ var InteractionTypes = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         var key = gridCols.map(function (gridCol) {
           return gridCol.key;
         }).join('-');
-        return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, {
+        return (0, _emotion.jsx)(_uiGrid.Grid.Row, {
           key: key
         }, gridCols);
       });
@@ -148,24 +139,22 @@ var InteractionTypes = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
 
     _this.renderStimulusTypeButton = function () {
       if (_this.props.allowStimulusCreation) {
-        var dividerRow = /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, {
+        var dividerRow = (0, _emotion.jsx)(_uiGrid.Grid.Row, {
           key: "divider"
-        }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        }, (0, _emotion.jsx)(_uiGrid.Grid.Col, {
           key: "divider"
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.stimulusDivider
+        }, (0, _emotion.jsx)("div", {
+          css: _this.props.styles.stimulusDivider
         })));
-
-        var stimulusRow = /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, {
+        var stimulusRow = (0, _emotion.jsx)(_uiGrid.Grid.Row, {
           key: "stimulus"
-        }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        }, (0, _emotion.jsx)(_uiGrid.Grid.Col, {
           width: 12 / _this.props.columns,
           key: "stimulus"
         }, _this.renderInteractionTypeButton({
           name: 'Stimulus',
           slug: 'stimulus'
         })));
-
         return [dividerRow, stimulusRow];
       }
     };
@@ -176,7 +165,7 @@ var InteractionTypes = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   (0, _createClass2.default)(InteractionTypes, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+      return (0, _emotion.jsx)(_uiGrid.Grid, {
         rowSpacing: "none",
         colSpacing: "small",
         startAt: "medium"
@@ -190,7 +179,8 @@ var InteractionTypes = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   addItem: _propTypes.default.func.isRequired,
   addStimulus: _propTypes.default.func.isRequired,
   allowStimulusCreation: _propTypes.default.bool,
-  types: _reactImmutableProptypes.default.list
+  types: _reactImmutableProptypes.default.list,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   allowStimulusCreation: true,
   types: (0, _immutable.List)()

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    iconWrapper: {
+      paddingRight: '0.25rem'
+    },
+    textWrapper: {
+      width: '10rem'
+    },
+    stimulusDivider: {
+      borderTop: "".concat(componentTheme.stimulusDividerBorderWidth, " solid ").concat(componentTheme.stimulusDividerBorderColor),
+      marginTop: componentTheme.stimulusDividerMarginTop,
+      marginBottom: componentTheme.stimulusDividerMarginBottom
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/shared/InteractionTypes/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,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -15,4 +15,7 @@ function generator(_ref) {
     stimulusDividerMarginTop: spacing.xSmall,
     stimulusDividerMarginBottom: spacing.small
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/shared/file_selector/FileSelector.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
 });
@@ -21,26 +19,21 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _immutable = require("immutable");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'flcWS',
-  template: function template(theme) {
-    return "\n\n.flcWS_emRR{background-color:".concat(theme.dropzoneBackgroundColor || 'inherit', ";border:").concat(theme.dropzoneBorderWidth || 'inherit', " dashed ").concat(theme.dropzoneBorderColor || 'inherit', ";cursor:pointer;padding:").concat(theme.dropzonePadding || 'inherit', "}");
-  },
-  'dropzone': 'flcWS_emRR'
-};
-var FileSelector = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var FileSelector = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(FileSelector, _Component);
 
   var _super = (0, _createSuper2.default)(FileSelector);
@@ -67,8 +60,9 @@ var FileSelector = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactDropzone.default, {
-        className: styles.dropzone,
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_reactDropzone.default, {
+        "data-testid": "file-dropzone",
+        css: this.props.styles.dropzone,
         multiple: this.props.multiple,
         onDrop: this.onDrop,
         accept: this.props.acceptAttribute
@@ -81,7 +75,8 @@ var FileSelector = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   acceptAttribute: _propTypes.default.string.isRequired,
   content: _propTypes.default.node.isRequired,
   fileHandler: _propTypes.default.func.isRequired,
-  multiple: _propTypes.default.bool
+  multiple: _propTypes.default.bool,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   multiple: false
 }, _temp)) || _class);

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    dropzone: {
+      backgroundColor: componentTheme.dropzoneBackgroundColor,
+      border: "".concat(componentTheme.dropzoneBorderWidth, " dashed ").concat(componentTheme.dropzoneBorderColor),
+      cursor: 'pointer',
+      padding: componentTheme.dropzonePadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/shared/file_selector/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;
@@ -15,4 +15,7 @@ function generator(_ref) {
     dropzoneBorderColor: colors.ash,
     dropzonePadding: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.9.1-rc.0+d9dc8264c",
+  "version": "20.9.1-rc.2+8bde7436e",
   "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.0+d9dc8264c",
-    "@instructure/quiz-i18n": "20.9.1-rc.0+d9dc8264c",
-    "@instructure/quiz-interactions": "20.9.1-rc.0+d9dc8264c",
-    "@instructure/quiz-number-input": "20.9.1-rc.0+d9dc8264c",
-    "@instructure/quiz-rce": "20.9.1-rc.0+d9dc8264c",
+    "@instructure/quiz-common": "20.9.1-rc.2+8bde7436e",
+    "@instructure/quiz-i18n": "20.9.1-rc.2+8bde7436e",
+    "@instructure/quiz-interactions": "20.9.1-rc.2+8bde7436e",
+    "@instructure/quiz-number-input": "20.9.1-rc.2+8bde7436e",
+    "@instructure/quiz-rce": "20.9.1-rc.2+8bde7436e",
     "@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.0+d9dc8264c",
+    "instructure-validations": "20.9.1-rc.2+8bde7436e",
     "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.0+d9dc8264c",
+    "quiz-presets": "20.9.1-rc.2+8bde7436e",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d9dc8264ca923c12f59f6f2288e9f36f2825e2f2"
+  "gitHead": "8bde7436e92e7b7a7050d0383999bc8702ad9905"
 }