@instructure/quiz-core 20.5.1 → 20.5.2-rc.1

package/es/common/components/resources/sessionItemResult/ResultStimulus/index.js

@@ -5,31 +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 ImmutablePropTypes from 'react-immutable-proptypes';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'fcFqb',
-  template: function template(theme) {
-    return "\n\n.fcFqb_bGBk{border-bottom:".concat(theme.rootBorderWidth || 'inherit', " solid ").concat(theme.rootBorderColor || 'inherit', ";overflow:hidden}\n\n.fcFqb_pJNU{border:").concat(theme.instructionsBorderWidth || 'inherit', " solid ").concat(theme.instructionsBorderColor || 'inherit', ";padding:").concat(theme.instructionsPaddingTopBottom || 'inherit', " ").concat(theme.instructionsPaddingLeftRight || 'inherit', "}\n\n.fcFqb_dEpm{font-weight:").concat(theme.instructionsHeaderFontWeight || 'inherit', ";padding-bottom:").concat(theme.instructionsHeaderPadding || 'inherit', "}\n\n.fcFqb_pypk{background-color:").concat(theme.infoBackgroundColor || 'inherit', ";height:100%;overflow:scroll;padding:").concat(theme.infoPaddingTopBottom || 'inherit', " ").concat(theme.infoPaddingLeftRight || 'inherit', "}\n\n.fcFqb_fsuY{padding-bottom:").concat(theme.headerPaddingBottom || 'inherit', ";padding-top:").concat(theme.headerPaddingTop || 'inherit', "}\n\n.fcFqb_nvdO{font-size:").concat(theme.titleFontSize || 'inherit', ";font-weight:").concat(theme.titleFontWeight || 'inherit', "}\n\n.fcFqb_JelF{padding:").concat(theme.itemsPadding || 'inherit', ";width:50%}\n\n.fcFqb_boAJ{flex:1 1 auto}\n\n.fcFqb_bbyJ{display:flex;flex-direction:row}\n\n.fcFqb_eNQJ{width:50%}\n\n@media screen and (--phoneBreakPoint){.fcFqb_bbyJ{flex-direction:column}.fcFqb_JelF,.fcFqb_eNQJ{width:100%}.fcFqb_pJNU{padding:").concat(theme.phoneInstructionsPaddingTopBottom || 'inherit', " ").concat(theme.phoneInstructionsPaddingLeftRight || 'inherit', "}.fcFqb_pypk{padding:").concat(theme.phoneInfoPadding || 'inherit', "}.fcFqb_eGWt{border-bottom:").concat(theme.phoneConnectingLinesBorderWidth || 'inherit', " dotted;border-color:").concat(theme.phoneConnectingLinesBorderColor || 'inherit', ";border-left:").concat(theme.phoneConnectingLinesBorderWidth || 'inherit', " dotted;flex:0 0 1rem;height:2rem;margin-right:").concat(theme.phoneConnectingLinesMargin || 'inherit', ";margin-top:").concat(theme.phoneConnectingLinesMargin || 'inherit', ";width:1.5rem}}");
-  },
-  'root': 'fcFqb_bGBk',
-  'instructions': 'fcFqb_pJNU',
-  'instructionsHeader': 'fcFqb_dEpm',
-  'info': 'fcFqb_pypk',
-  'header': 'fcFqb_fsuY',
-  'title': 'fcFqb_nvdO',
-  'items': 'fcFqb_JelF',
-  'stimulusItem': 'fcFqb_boAJ',
-  'stimulusGroup': 'fcFqb_bbyJ',
-  'stimulusInfo': 'fcFqb_eNQJ',
-  'connectingLines': 'fcFqb_eGWt'
-};
-import theme from "./theme.js";
-export var ResultStimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var ResultStimulus = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ResultStimulus, _Component);
 
   var _super = _createSuper(ResultStimulus);
@@ -46,11 +31,12 @@ export var ResultStimulus = (_dec = themeable(theme, styles), _dec(_class = (_te
       var instructions = this.props.stimulus.instructions;
 
       if (instructions) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.instructions
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.instructionsHeader
-        }, t('Instructions')), /*#__PURE__*/React.createElement("div", null, instructions));
+        return jsx("div", {
+          "data-testId": "instructions",
+          css: this.props.styles.instructions
+        }, jsx("div", {
+          css: this.props.styles.instructionsHeader
+        }, t('Instructions')), jsx("div", null, instructions));
       }
     }
   }, {
@@ -58,13 +44,13 @@ export var ResultStimulus = (_dec = themeable(theme, styles), _dec(_class = (_te
     value: function renderStimulusInfo() {
       var title = this.props.stimulus.title;
       var body = this.props.stimulus.body;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.info
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.header
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.title
-      }, title)), /*#__PURE__*/React.createElement(RichContentRenderer, {
+      return jsx("div", {
+        css: this.props.styles.info
+      }, jsx("div", {
+        css: this.props.styles.header
+      }, jsx("div", {
+        css: this.props.styles.title
+      }, title)), jsx(RichContentRenderer, {
         content: body
       }));
     }
@@ -74,26 +60,27 @@ export var ResultStimulus = (_dec = themeable(theme, styles), _dec(_class = (_te
       var _this = this;
 
       return this.props.sessionItem.getNestedEntries().toArray().map(function (sessionItem, i) {
-        return /*#__PURE__*/React.createElement("div", {
+        return jsx("div", {
           key: sessionItem.position
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.connectingLines
-        }), /*#__PURE__*/React.createElement("div", {
-          className: styles.stimulusItem
+        }, jsx("div", {
+          css: _this.props.styles.connectingLines
+        }), jsx("div", {
+          "data-testid": "stimulus-item",
+          css: _this.props.styles.stimulusItem
         }, _this.props.renderItem(sessionItem, i !== 0)));
       });
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.root
-      }, this.renderStimulusInstructions(), /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulusGroup
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulusInfo
-      }, this.renderStimulusInfo()), /*#__PURE__*/React.createElement("div", {
-        className: styles.items
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.root
+      }, this.renderStimulusInstructions(), jsx("div", {
+        css: this.props.styles.stimulusGroup
+      }, jsx("div", {
+        css: this.props.styles.stimulusInfo
+      }, this.renderStimulusInfo()), jsx("div", {
+        css: this.props.styles.items
       }, this.renderStimulusItems()))));
     }
   }]);
@@ -103,6 +90,8 @@ export var ResultStimulus = (_dec = themeable(theme, styles), _dec(_class = (_te
 }(Component), _class2.propTypes = {
   stimulus: ImmutablePropTypes.record.isRequired,
   sessionItem: ImmutablePropTypes.record.isRequired,
-  renderItem: PropTypes.func.isRequired
+  renderItem: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default ResultStimulus;

package/es/common/components/resources/sessionItemResult/ResultStimulus/styles.js

@@ -0,0 +1,69 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    root: {
+      borderBottom: "".concat(componentTheme.rootBorderWidth, " solid ").concat(componentTheme.rootBorderColor),
+      overflow: 'hidden'
+    },
+    instructions: _defineProperty({
+      padding: "".concat(componentTheme.instructionsPaddingTopBottom, " ").concat(componentTheme.instructionsPaddingLeftRight),
+      border: "".concat(componentTheme.instructionsBorderWidth, " solid ").concat(componentTheme.instructionsBorderColor)
+    }, mq, {
+      padding: "".concat(componentTheme.phoneInstructionsPaddingTopBottom, " ").concat(componentTheme.phoneInstructionsPaddingLeftRight)
+    }),
+    instructionsHeader: {
+      paddingBottom: componentTheme.instructionsHeaderPadding,
+      fontWeight: componentTheme.instructionsHeaderFontWeight
+    },
+    info: _defineProperty({
+      padding: "".concat(componentTheme.infoPaddingTopBottom, " ").concat(componentTheme.infoPaddingLeftRight),
+      backgroundColor: componentTheme.infoBackgroundColor,
+      height: '100%',
+      overflow: 'scroll'
+    }, mq, {
+      padding: componentTheme.phoneInfoPadding
+    }),
+    header: {
+      paddingTop: componentTheme.headerPaddingTop,
+      paddingBottom: componentTheme.headerPaddingBottom
+    },
+    title: {
+      fontSize: componentTheme.titleFontSize,
+      fontWeight: componentTheme.titleFontWeight
+    },
+    items: _defineProperty({
+      padding: componentTheme.itemsPadding,
+      width: '50%'
+    }, mq, {
+      width: '100%'
+    }),
+    stimulusItem: {
+      flex: '1 1 auto'
+    },
+    stimulusGroup: _defineProperty({
+      display: 'flex',
+      flexDirection: 'row'
+    }, mq, {
+      flexDirection: 'column'
+    }),
+    stimulusInfo: _defineProperty({
+      width: '50%'
+    }, mq, {
+      width: '100%'
+    }),
+    connectingLines: _defineProperty({}, mq, {
+      flex: '0 0 1rem',
+      borderLeft: "".concat(componentTheme.phoneConnectingLinesBorderWidth, " dotted"),
+      borderBottom: "".concat(componentTheme.phoneConnectingLinesBorderWidth, " dotted"),
+      borderColor: componentTheme.phoneConnectingLinesBorderColor,
+      marginrTop: componentTheme.phoneConnectingLinesMargin,
+      marginRight: componentTheme.phoneConnectingLinesMargin,
+      height: '2rem',
+      width: '1.5rem'
+    })
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/sessionItemResult/ResultStimulus/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       borders = _ref.borders,
@@ -29,4 +29,6 @@ export default function generator(_ref) {
     phoneConnectingLinesBorderColor: colors.tiara,
     phoneConnectingLinesMargin: spacing.small
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/sessionItemResult/SessionItemResult/presenter.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,42 +5,28 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "jsx-a11y/click-events-have-key-events": "warn" */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import classNames from 'classnames';
 import { Alert } from '@instructure/ui-alerts';
 import { Text } from '@instructure/ui-text';
 import { Heading } from '@instructure/ui-heading';
 import { View } from '@instructure/ui-view';
 import { PresentationContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
-import { RichContentRenderer } from '@instructure/quiz-rce';
+import { withStyle, jsx } from '@instructure/emotion';
+import { RichContentRendererEmotion } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/es/format-message';
 import PositionBox from "../../positionBox/PositionBox.js";
 import { COMPONENT_RESULT } from '@instructure/quiz-common';
 import componentForItem from "../../../../util/componentForItem.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import keyboardClickable from "../../../../util/keyboardClickable.js";
-var styles = {
-  componentId: 'cQHeE',
-  template: function template(theme) {
-    return "\n\n.cQHeE_bvdE{padding:".concat(theme.sessionItemResultPadding || 'inherit', "}\n\n.cQHeE_ebwZ{border-top:solid ").concat(theme.topBorderWidth || 'inherit', " ").concat(theme.topBorderColor || 'inherit', "}\n\n.cQHeE_czRh{margin:").concat(theme.resultMargin || 'inherit', "}\n\n.cQHeE_cwte{color:").concat(theme.pointsColor || 'inherit', ";font-size:").concat(theme.pointFontSize || 'inherit', "}\n\n.cQHeE_cSuF{font-size:").concat(theme.questionFontSize || 'inherit', "}\n\n.cQHeE_fqsT{align-items:center;display:flex}\n\n.cQHeE_cgkp{border-color:").concat(theme.itemFeedbackWrapperBorderColor || 'inherit', ";border-radius:").concat(theme.itemFeedbackWrapperBorderRadius || 'inherit', ";border-style:").concat(theme.itemFeedbackWrapperStyle || 'inherit', ";border-width:").concat(theme.itemFeedbackWrapperBorderWidth || 'inherit', ";font-size:").concat(theme.itemFeedbackWrapperFontSize || 'inherit', ";margin-top:").concat(theme.itemFeedbackWrapperMargin || 'inherit', ";padding:").concat(theme.itemFeedbackWrapperPadding || 'inherit', ";white-space:pre-wrap}\n\n.cQHeE_dpDn{padding-bottom:").concat(theme.textPaddingBottom || 'inherit', ";padding-left:").concat(theme.textPaddingLeft || 'inherit', "}\n\n.cQHeE_couS{color:").concat(theme.itemFeedbackLabelColor || 'inherit', ";font-size:").concat(theme.itemFeedbackLabelFontSize || 'inherit', ";margin-bottom:").concat(theme.itemFeedbackMargin || 'inherit', "}\n\n.cQHeE_bcAI{font-size:").concat(theme.itemFeedbackTextSize || 'inherit', ";margin-top:").concat(theme.itemFeedbackTextMargin || 'inherit', "}");
-  },
-  'sessionItemResult': 'cQHeE_bvdE',
-  'topBorder': 'cQHeE_ebwZ',
-  'result': 'cQHeE_czRh',
-  'points': 'cQHeE_cwte',
-  'question': 'cQHeE_cSuF',
-  'sessionItemResultHeader': 'cQHeE_fqsT',
-  'itemFeedbackWrapper': 'cQHeE_cgkp',
-  'textPadding': 'cQHeE_dpDn',
-  'itemFeedbackLabel': 'cQHeE_couS',
-  'itemFeedbackText': 'cQHeE_bcAI'
-};
-import theme from "./theme.js";
-export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var SessionItemResult = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(SessionItemResult, _Component);
 
   var _super = _createSuper(SessionItemResult);
@@ -71,6 +56,16 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
   }
 
   _createClass(SessionItemResult, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "position",
     value: function position() {
       return this.props.sessionItem.position;
@@ -93,38 +88,38 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "renderRegradeAlert",
     value: function renderRegradeAlert() {
-      return /*#__PURE__*/React.createElement(Alert, {
+      return jsx(Alert, {
         variant: "warning",
         margin: "medium"
-      }, /*#__PURE__*/React.createElement(PresentationContent, null, t('This question has been regraded.')));
+      }, jsx(PresentationContent, null, t('This question has been regraded.')));
     }
   }, {
     key: "renderUnscorableAlert",
     value: function renderUnscorableAlert() {
       // If they can edit grader feedback they should see the teacher message
       var message = this.props.editGraderFeedback ? t('There was a problem grading this question.') : t('There was a problem grading this question. Please inform your instructor.');
-      return /*#__PURE__*/React.createElement(Alert, {
+      return jsx(Alert, {
         variant: "warning",
         margin: "medium"
-      }, /*#__PURE__*/React.createElement(PresentationContent, null, message));
+      }, jsx(PresentationContent, null, message));
     }
   }, {
     key: "renderRegradePoints",
     value: function renderRegradePoints() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(View, {
+      return jsx("div", null, jsx(View, {
         as: "span",
         size: "small",
         margin: "small"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         color: "secondary"
       }, t("Previous score { possible, plural,\n              one   {{points, number} / # point}\n              other {{points, number} / # points}\n            }", {
         points: this.props.sessionItemResult.regradeInfo.get('originalScore') || 0,
         possible: this.props.sessionItemResult.regradeInfo.get('originalPointsPossible')
-      }))), /*#__PURE__*/React.createElement(View, {
+      }))), jsx(View, {
         as: "span",
         size: "small",
         margin: "small"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         color: "warning"
       }, t("Regrade score { possible, plural,\n              one   {{points, number} / # point}\n              other {{points, number} / # points}\n            }", {
         points: this.props.sessionItemResult.regradeInfo.get('newScore') || 0,
@@ -134,8 +129,8 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "renderHeader",
     value: function renderHeader() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.sessionItemResultHeader
+      return jsx("div", {
+        css: this.props.styles.sessionItemResultHeader
       }, this.renderResultPosition(), !this.props.restrictQuantitativeData && (this.hasRegradeInfo() ? this.renderRegradePoints() : this.renderPoints()));
     }
   }, {
@@ -166,7 +161,7 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
         });
       }
 
-      return /*#__PURE__*/React.createElement(PositionBox, {
+      return jsx(PositionBox, {
         position: position,
         headingLevel: "h3",
         headingText: positionText
@@ -175,21 +170,22 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "renderPoints",
     value: function renderPoints() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames('fs-mask', styles.points)
+      return jsx("div", {
+        css: this.props.styles.points,
+        className: "fs-mask"
       }, this.pointsDisplayText);
     }
   }, {
     key: "renderFeedbackBox",
     value: function renderFeedbackBox(feedbackContent, formattedFeedbackTitle) {
       if (feedbackContent) {
-        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+        return jsx("div", null, jsx(Heading, {
           level: "h4",
           margin: "xx-small small"
-        }, formattedFeedbackTitle), /*#__PURE__*/React.createElement("div", {
-          className: styles.textPadding
-        }, /*#__PURE__*/React.createElement(RichContentRenderer, {
-          customStyles: styles.itemFeedbackText,
+        }, formattedFeedbackTitle), jsx("div", {
+          css: this.props.styles.textPadding
+        }, jsx(RichContentRendererEmotion, {
+          customStyles: this.props.styles.itemFeedbackText,
           content: feedbackContent
         })));
       }
@@ -207,12 +203,12 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
       var showFeedback = correctFeedback || incorrectFeedback || neutralFeedback || graderFeedback;
 
       if (showAnswerFeedback || showFeedback) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.itemFeedbackWrapper
-        }, /*#__PURE__*/React.createElement(Heading, {
+        return jsx("div", {
+          css: this.props.styles.itemFeedbackWrapper
+        }, jsx(Heading, {
           level: "h3",
           margin: "xx-small small medium"
-        }, t('Feedback')), /*#__PURE__*/React.createElement("div", {
+        }, t('Feedback')), jsx("div", {
           "data-automation": "sdk-answer-feedback-results-view"
         }, this.props.shouldRenderAnswerFeedback && answerFeedback), correctFeedback, incorrectFeedback, neutralFeedback, graderFeedback);
       }
@@ -224,16 +220,16 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
 
       if (!this.props.hideGraderFeedback && graderFeedback.content) {
         if (this.props.editGraderFeedback) {
-          return /*#__PURE__*/React.createElement("div", {
+          return jsx("div", {
             role: "button",
             onClick: this.props.editGraderFeedback,
             onKeyDown: keyboardClickable,
-            className: styles.itemFeedbackWrapper,
+            css: this.props.styles.itemFeedbackWrapper,
             tabIndex: "0"
-          }, /*#__PURE__*/React.createElement("div", {
-            className: styles.itemFeedbackLabel
-          }, t('Feedback from grader')), /*#__PURE__*/React.createElement(RichContentRenderer, {
-            customStyles: styles.itemFeedbackText,
+          }, jsx("div", {
+            css: this.props.styles.itemFeedbackLabel
+          }, t('Feedback from grader')), jsx(RichContentRendererEmotion, {
+            customStyles: this.props.styles.itemFeedbackText,
             content: graderFeedback.content
           }));
         } else {
@@ -261,11 +257,11 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
       var simpleResultsModifications = itemResultsModifications && itemResultsModifications.toJS() || {};
       var simpleSessionItem = sessionItem.toJS();
       var simpleSessionItemResult = sessionItemResult.toJS();
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.result
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.question
-      }, /*#__PURE__*/React.createElement(ResultInteraction, {
+      return jsx("div", {
+        css: this.props.styles.result
+      }, jsx("div", {
+        css: this.props.styles.question
+      }, jsx(ResultInteraction, {
         appContainer: appContainer,
         itemBody: simpleItem.itemBody,
         itemId: simpleSessionItem.id // needed for input group name
@@ -280,11 +276,8 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "render",
     value: function render() {
-      var _classNames;
-
-      var classes = classNames((_classNames = {}, _defineProperty(_classNames, styles.sessionItemResult, true), _defineProperty(_classNames, styles.topBorder, this.props.shouldRenderTopBorder), _classNames));
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes
+      return jsx("div", {
+        css: this.props.styles.sessionItemResult
       }, this.regraded() ? this.renderRegradeAlert() : null, this.unscorable() ? this.renderUnscorableAlert() : null, this.renderHeader(), this.renderSessionItemResult());
     }
   }, {
@@ -349,7 +342,12 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
   sessionItem: ImmutablePropTypes.record.isRequired,
   sessionItemResult: ImmutablePropTypes.record.isRequired,
   shouldRenderAnswerFeedback: PropTypes.bool,
-  shouldRenderTopBorder: PropTypes.bool
+  // eslint-disable-next-line react/no-unused-prop-types
+  shouldRenderTopBorder: PropTypes.bool,
+  // used in styles.js
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   editGraderFeedback: null,
   hideGraderFeedback: false,

package/es/common/components/resources/sessionItemResult/SessionItemResult/styles.js

@@ -0,0 +1,50 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  return {
+    sessionItemResult: _objectSpread({
+      padding: componentTheme.sessionItemResultPadding
+    }, props.shouldRenderTopBorder && {
+      borderTop: "solid ".concat(componentTheme.topBorderWidth, " ").concat(componentTheme.topBorderColor)
+    }),
+    result: {
+      margin: componentTheme.resultMargin
+    },
+    points: {
+      color: componentTheme.pointsColor,
+      fontSize: componentTheme.pointFontSize
+    },
+    question: {
+      fontSize: componentTheme.questionFontSize
+    },
+    sessionItemResultHeader: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    itemFeedbackWrapper: {
+      marginTop: componentTheme.itemFeedbackWrapperMargin,
+      padding: componentTheme.itemFeedbackWrapperPadding,
+      borderRadius: componentTheme.itemFeedbackWrapperBorderRadius,
+      fontSize: componentTheme.itemFeedbackWrapperFontSize,
+      whiteSpace: 'pre-wrap',
+      borderStyle: componentTheme.itemFeedbackWrapperStyle,
+      borderWidth: componentTheme.itemFeedbackWrapperBorderWidth,
+      borderColor: componentTheme.itemFeedbackWrapperBorderColor
+    },
+    textPadding: {
+      paddingLeft: componentTheme.textPaddingLeft,
+      paddingBottom: componentTheme.textPaddingBottom
+    },
+    itemFeedbackLabel: {
+      color: componentTheme.itemFeedbackLabelColor,
+      fontSize: componentTheme.itemFeedbackLabelFontSize,
+      marginBottom: componentTheme.itemFeedbackMargin
+    },
+    itemFeedbackText: {
+      marginTop: componentTheme.itemFeedbackTextMargin,
+      fontSize: componentTheme.itemFeedbackTextSize
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/sessionItemResult/SessionItemResult/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors,
@@ -27,4 +27,6 @@ export default function generator(_ref) {
     textPaddingLeft: spacing.small,
     textPaddingBottom: spacing.small
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/sessionItemResult/SessionItemResultsList/index.js

@@ -5,27 +5,20 @@ 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 { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import SessionItemResult from "../SessionItemResult/index.js";
 import ResultStimulus from "../ResultStimulus/index.js";
 import generateDisplayPositions from "../../../../util/generateDisplayPositions.js";
-var styles = {
-  componentId: 'tONnG',
-  template: function template(theme) {
-    return "\n\n.tONnG_fnuh{margin:".concat(theme.sessionItemResultsListHeaderWrapperMarginTopBottom || 'inherit', " ").concat(theme.sessionItemResultsListHeaderWrapperMarginLeftRight || 'inherit', ";text-align:left}\n\n[dir=ltr] .tONnG_fnuh,[dir=rtl] .tONnG_fnuh{text-align:left}\n\n.tONnG_crKU{font-size:").concat(theme.sessionItemResultsListHeaderFontSize || 'inherit', "}\n\n.tONnG_cMxE{border-bottom:solid ").concat(theme.sessionItemResultsListBorderWidth || 'inherit', " ").concat(theme.sessionItemResultsListBorderColor || 'inherit', ";margin-top:").concat(theme.sessionItemResultsListMargin || 'inherit', "}");
-  },
-  'sessionItemResultsListHeaderWrapper': 'tONnG_fnuh',
-  'sessionItemResultsListHeader': 'tONnG_crKU',
-  'sessionItemResultsList': 'tONnG_cMxE'
-};
-import theme from "./theme.js";
-export var SessionItemResultsList = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var SessionItemResultsList = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(SessionItemResultsList, _Component);
 
   var _super = _createSuper(SessionItemResultsList);
@@ -42,7 +35,7 @@ export var SessionItemResultsList = (_dec = themeable(theme, styles), _dec(_clas
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderSessionItem = function (sessionItem, shouldRenderTopBorder) {
-      return /*#__PURE__*/React.createElement(SessionItemResult, {
+      return jsx(SessionItemResult, {
         appContainer: _this.props.appContainer,
         key: sessionItem.id,
         restrictQuantitativeData: _this.props.restrictQuantitativeData,
@@ -65,7 +58,7 @@ export var SessionItemResultsList = (_dec = themeable(theme, styles), _dec(_clas
     key: "renderItem",
     value: function renderItem(sessionItem) {
       if (sessionItem.isStimulus) {
-        return /*#__PURE__*/React.createElement(ResultStimulus, {
+        return jsx(ResultStimulus, {
           key: sessionItem.id,
           renderItem: this.renderSessionItem,
           stimulus: sessionItem.stimulusRecord,
@@ -78,15 +71,15 @@ export var SessionItemResultsList = (_dec = themeable(theme, styles), _dec(_clas
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.sessionItemResultsListHeaderWrapper
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.sessionItemResultsListHeader,
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.sessionItemResultsListHeaderWrapper
+      }, jsx("div", {
+        css: this.props.styles.sessionItemResultsListHeader,
         "data-automation": "sdk-session-item-results-list-header"
-      }, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(Heading, {
         level: "h2"
-      }, t('Your Answers:')))), /*#__PURE__*/React.createElement("div", {
-        className: styles.sessionItemResultsList
+      }, t('Your Answers:')))), jsx("div", {
+        css: this.props.styles.sessionItemResultsList
       }, this.renderItems()));
     }
   }]);
@@ -96,7 +89,9 @@ export var SessionItemResultsList = (_dec = themeable(theme, styles), _dec(_clas
 }(Component), _class2.propTypes = {
   appContainer: CustomPropTypes.selectors.isRequired,
   restrictQuantitativeData: PropTypes.bool,
-  sessionItems: ImmutablePropTypes.list.isRequired
+  sessionItems: ImmutablePropTypes.list.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   restrictQuantitativeData: false
 }, _temp)) || _class);

package/es/common/components/resources/sessionItemResult/SessionItemResultsList/styles.js

@@ -0,0 +1,17 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    sessionItemResultsListHeaderWrapper: {
+      textAlign: 'left',
+      margin: "".concat(componentTheme.sessionItemResultsListHeaderWrapperMarginTopBottom, " ").concat(componentTheme.sessionItemResultsListHeaderWrapperMarginLeftRight)
+    },
+    sessionItemResultsListHeader: {
+      fontSize: componentTheme.sessionItemResultsListHeaderFontSize
+    },
+    sessionItemResultsList: {
+      marginTop: componentTheme.sessionItemResultsListMargin,
+      borderBottom: "solid ".concat(componentTheme.sessionItemResultsListBorderWidth, " ").concat(componentTheme.sessionItemResultsListBorderColor)
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/sessionItemResult/SessionItemResultsList/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors,
@@ -11,4 +11,6 @@ export default function generator(_ref) {
     sessionItemResultsListBorderColor: colors.tiara,
     sessionItemResultsListBorderWidth: borders.widthSmall
   };
-}
+};
+
+export default generateComponentTheme;