@instructure/quiz-core 20.4.2-rc.1 → 20.4.2-rc.3

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/BlankIcon/styles.js

@@ -0,0 +1,17 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    blankSpace: {
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: componentTheme.blankHeight,
+      minWidth: componentTheme.blankMinWidth,
+      verticalAlign: 'middle',
+      border: "1px solid ".concat(componentTheme.blankBorderColor),
+      borderRadius: componentTheme.blankBorderRadius,
+      padding: '2px 2px'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/BlankIcon/theme.js

@@ -0,0 +1,11 @@
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var colors = _ref.colors;
+  return {
+    blankBorderColor: colors.tiara,
+    blankBorderRadius: '14px',
+    blankMinWidth: '20px',
+    blankHeight: '20px'
+  };
+};
+
+export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/index.js

@@ -14,7 +14,8 @@ function mapStateToProps(_state) {
       categorizationEnabled: featureOn('ia_categorization_afs'),
       trueFalseEnabled: featureOn('ia_true_false_afs'),
       choiceEnabled: featureOn('ia_choice_afs'),
-      multiAnswerEnabled: featureOn('ia_multi_answer_afs')
+      multiAnswerEnabled: featureOn('ia_multi_answer_afs'),
+      fillInTheBlankEnabled: featureOn('ia_rich_fill_blank_afs')
     }
   };
 }

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/presenter.js

@@ -10,20 +10,21 @@ import { Heading } from '@instructure/ui-heading';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import React, { Component } from 'react';
 var styles = {
-  componentId: 'ewlJT',
+  componentId: 'eObAE',
   template: function template(theme) {
-    return "\n\n.ewlJT_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.ewlJT_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.ewlJT_bwlc,.ewlJT_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.ewlJT_bqdH{row-gap:24px}\n\n.ewlJT_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.ewlJT_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.ewlJT_fFDJ{display:none}\n\n.ewlJT_fxkJ{margin-top:-8px}\n\n.ewlJT_esVF{min-height:48px}\n\n.ewlJT_eTZq{position:relative}\n\n.ewlJT_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.ewlJT_cVld{max-width:100%;width:calc(25% + 350px)}");
+    return "\n\n.eObAE_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.eObAE_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.eObAE_bwlc,.eObAE_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.eObAE_bqdH{row-gap:24px}\n\n.eObAE_eTaq{align-items:center;border:1px solid ").concat(theme.blankBorderColor || 'inherit', ";border-radius:").concat(theme.blankBorderRadius || 'inherit', ";display:inline-flex;height:").concat(theme.blankHeight || 'inherit', ";justify-content:center;min-width:").concat(theme.blankMinWidth || 'inherit', ";padding:2px 2px;vertical-align:middle}\n\n.eObAE_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.eObAE_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.eObAE_fFDJ{display:none}\n\n.eObAE_fxkJ{margin-top:-8px}\n\n.eObAE_esVF{min-height:48px}\n\n.eObAE_eTZq{position:relative}\n\n.eObAE_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.eObAE_cVld{max-width:100%;width:calc(25% + 350px)}");
   },
-  'cardWrapper': 'ewlJT_eKXQ',
-  'itemCardInnerContainer': 'ewlJT_bwlc',
-  'metricsContainer': 'ewlJT_bqdH',
-  'itemCardToggleButtonWrapper': 'ewlJT_NpIG',
-  'metricNumberContext': 'ewlJT_eoBe',
-  'hiddenMetrics': 'ewlJT_fFDJ',
-  'itemBodyToggleButtonWrapper': 'ewlJT_fxkJ',
-  'itemBody': 'ewlJT_esVF',
-  'hiddenItemBody': 'ewlJT_eTZq',
-  'answerFrequencySummaryContainer': 'ewlJT_cVld'
+  'cardWrapper': 'eObAE_eKXQ',
+  'itemCardInnerContainer': 'eObAE_bwlc',
+  'metricsContainer': 'eObAE_bqdH',
+  'blankSpace': 'eObAE_eTaq',
+  'itemCardToggleButtonWrapper': 'eObAE_NpIG',
+  'metricNumberContext': 'eObAE_eoBe',
+  'hiddenMetrics': 'eObAE_fFDJ',
+  'itemBodyToggleButtonWrapper': 'eObAE_fxkJ',
+  'itemBody': 'eObAE_esVF',
+  'hiddenItemBody': 'eObAE_eTZq',
+  'answerFrequencySummaryContainer': 'eObAE_cVld'
 };
 import t from '@instructure/quiz-i18n/es/format-message';
 import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
@@ -42,6 +43,10 @@ import { Flex } from '@instructure/ui-flex';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import { ensureRCEContentIsLoaded } from "../../../../../common/util/rceChecker.js";
 import { PropTypes } from '@instructure/quiz-interactions';
+import { RICH_FILL_BLANK_SLUG } from '@instructure/quiz-common';
+var parser = new DOMParser();
+var parsererrorElement = 'parsererror';
+var parseType = 'text/html';
 export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewItemAnalysis, _Component);
 
@@ -113,6 +118,34 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       }, _this.mapInteractionTypeToTranslation(interactionType));
     };
 
+    _this.isBlank = function (element) {
+      if (element.textContent) return false;
+      if (!element.hasAttribute('id')) return false;
+      var regex = new RegExp('^blank_.+$');
+      return regex.test(element.getAttribute('id'));
+    };
+
+    _this.enhanceItemBody = function (itemBody) {
+      var tempDoc = parser.parseFromString(itemBody, parseType);
+      var errorNode = tempDoc.querySelector(parsererrorElement);
+
+      if (errorNode) {
+        // eslint-disable-next-line no-console
+        console.error('Parsing failed: ', errorNode);
+        return itemBody;
+      }
+
+      Array.from(tempDoc.querySelectorAll('span')).filter(function (span) {
+        return _this.isBlank(span);
+      }).forEach(function (span, index) {
+        var newSpan = span.cloneNode();
+        newSpan.setAttribute('class', styles.blankSpace);
+        newSpan.innerHTML = "".concat(index + 1);
+        span.replaceWith(newSpan);
+      });
+      return tempDoc.querySelector('body').innerHTML;
+    };
+
     _this.renderRichContent = function (itemBody, itemBodyClass, itemId) {
       return /*#__PURE__*/React.createElement(Flex, {
         direction: "row",
@@ -203,6 +236,14 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       })));
     };
 
+    _this.shouldEnhanceItemBody = function () {
+      var _this$props = _this.props,
+          itemAnalysis = _this$props.itemAnalysis,
+          afsFlags = _this$props.afsFlags;
+      var metadata = itemAnalysis.metadata;
+      return afsFlags.fillInTheBlankEnabled && metadata.interaction_type === RICH_FILL_BLANK_SLUG && metadata.item_body;
+    };
+
     return _this;
   }
 
@@ -243,10 +284,10 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
     value: function render() {
       var _metadata$item_title;
 
-      var _this$props = this.props,
-          showFrequencyTable = _this$props.showFrequencyTable,
-          itemAnalysis = _this$props.itemAnalysis,
-          afsFlags = _this$props.afsFlags;
+      var _this$props2 = this.props,
+          showFrequencyTable = _this$props2.showFrequencyTable,
+          itemAnalysis = _this$props2.itemAnalysis,
+          afsFlags = _this$props2.afsFlags;
       var answer_summary = itemAnalysis.answer_summary,
           metadata = itemAnalysis.metadata,
           scores = itemAnalysis.scores;
@@ -255,6 +296,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       var metricsClass = classnames(_defineProperty({}, styles.hiddenMetrics, !this.state.metricsExpanded));
       var itemBodyClass = classnames(styles.itemBody, _defineProperty({}, styles.hiddenItemBody, this.isBodyHigherThanContainer() && !this.state.bodyExpanded));
       var title = (_metadata$item_title = metadata.item_title) !== null && _metadata$item_title !== void 0 ? _metadata$item_title : t('Untitled item');
+      var itemBodyEnhanced = this.shouldEnhanceItemBody() ? this.enhanceItemBody(metadata.item_body) : metadata.item_body;
       return /*#__PURE__*/React.createElement(Card, {
         className: styles.cardWrapper
       }, /*#__PURE__*/React.createElement(Flex, {
@@ -275,7 +317,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         padding: "small xx-small none none",
         overflowY: "hidden",
         size: !this.state.bodyExpanded ? '60px' : void 0
-      }, this.renderRichContent(metadata.item_body, itemBodyClass, itemId)))), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType, afsFlags)));
+      }, this.renderRichContent(itemBodyEnhanced, itemBodyClass, itemId)))), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType, afsFlags)));
     }
   }]);
 

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js

@@ -1,12 +1,17 @@
 export default function generator(_ref) {
   var spacing = _ref.spacing,
       breakpoints = _ref.breakpoints,
-      typography = _ref.typography;
+      typography = _ref.typography,
+      colors = _ref.colors;
   return {
     tabletBreakPoint: "max-width: ".concat(breakpoints.large),
     cardWrapperPadding: spacing.medium,
     viewPaddingRight: spacing.xxSmall,
     metricNumberContextFontSize: typography.fontSizeMedium,
-    metricNumberContextFontWeight: typography.fontWeightNormal
+    metricNumberContextFontWeight: typography.fontWeightNormal,
+    blankBorderColor: colors.tiara,
+    blankBorderRadius: '14px',
+    blankMinWidth: '20px',
+    blankHeight: '20px'
   };
 }

package/es/reporting/components/resources/NewQuizAndItemAnalysis/propTypes.js

@@ -90,5 +90,6 @@ export var afsFlags = PropTypes.shape({
   categorizationEnabled: PropTypes.bool.isRequired,
   trueFalseEnabled: PropTypes.bool.isRequired,
   choiceEnabled: PropTypes.bool.isRequired,
-  multiAnswerEnabled: PropTypes.bool.isRequired
+  multiAnswerEnabled: PropTypes.bool.isRequired,
+  fillInTheBlankEnabled: PropTypes.bool.isRequired
 });

package/lib/common/components/resources/quiz/instructions/Instructions.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,33 +15,25 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _emotion = require("@instructure/emotion");
 
 var _quizRce = require("@instructure/quiz-rce");
 
 var _makeScrollable = _interopRequireDefault(require("../../../shared/functionality/makeScrollable.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-// ================================
-// renders the quiz instructions on
-// the Preview and Take pages
-// ================================
-var styles = {
-  componentId: 'eLFCb',
-  template: function template(theme) {
-    return "\n\n.eLFCb_gasz{box-sizing:border-box;padding-left:".concat(theme.wrapperPadding || 'inherit', ";padding-right:").concat(theme.wrapperPadding || 'inherit', ";position:relative;width:100%}\n\n.eLFCb_gasz:after{clear:both;content:\"\";display:table}\n\n[dir=ltr] .eLFCb_gasz:after,[dir=rtl] .eLFCb_gasz:after{clear:both}\n\n.eLFCb_eWKC{font-size:").concat(theme.textFontSize || 'inherit', "}");
-  },
-  'wrapper': 'eLFCb_gasz',
-  'text': 'eLFCb_eWKC'
-};
-var QuizInstructions = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizInstructions = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizInstructions, _Component);
 
   var _super = (0, _createSuper2.default)(QuizInstructions);
@@ -56,11 +46,12 @@ var QuizInstructions = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   (0, _createClass2.default)(QuizInstructions, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.wrapper,
+      return (0, _emotion.jsx)("div", {
+        "data-testid": "instructionsWrapper",
+        css: this.props.styles.wrapper,
         tabIndex: "-1"
-      }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
-        customStyles: styles.text,
+      }, (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+        customStyles: this.props.styles.text,
         content: this.props.quiz.instructions
       }));
     }
@@ -68,7 +59,9 @@ var QuizInstructions = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   QuizInstructions.displayName = "QuizInstructions";
   return QuizInstructions;
 }(_react.Component), _class2.propTypes = {
-  quiz: _reactImmutableProptypes.default.record.isRequired
+  quiz: _reactImmutableProptypes.default.record.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.QuizInstructions = QuizInstructions;
 

package/lib/common/components/resources/quiz/instructions/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    wrapper: {
+      position: 'relative',
+      width: '100%',
+      boxSizing: 'border-box',
+      paddingLeft: componentTheme.wrapperPadding,
+      paddingRight: componentTheme.wrapperPadding,
+      '&::after': {
+        clear: 'both',
+        content: '""',
+        display: 'table'
+      }
+    },
+    text: {
+      fontSize: componentTheme.textFontSize
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/quiz/instructions/theme.js

@@ -3,13 +3,16 @@
 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,
       typography = _ref.typography;
   return {
     wrapperPadding: spacing.large,
     textFontSize: typography.fontSizeMedium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/resources/quiz/title/Title.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,33 +15,25 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _makeScrollable = _interopRequireDefault(require("../../../shared/functionality/makeScrollable.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-// ==========================
-// renders the quiz title on
-// the Preview and Take pages
-// ==========================
-var styles = {
-  componentId: 'cBDEG',
-  template: function template(theme) {
-    return "\n\n.cBDEG_gasz{align-items:center;box-sizing:border-box;display:flex;margin-bottom:".concat(theme.wrapperMargin || 'inherit', ";padding-left:").concat(theme.wrapperPadding || 'inherit', ";padding-top:").concat(theme.wrapperPadding || 'inherit', ";position:relative;width:100%}\n\n.cBDEG_eWKC{font-size:").concat(theme.textFontSize || 'inherit', "}");
-  },
-  'wrapper': 'cBDEG_gasz',
-  'text': 'cBDEG_eWKC'
-};
-var QuizTitle = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizTitle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizTitle, _Component);
 
   var _super = (0, _createSuper2.default)(QuizTitle);
@@ -56,13 +46,13 @@ var QuizTitle = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
   (0, _createClass2.default)(QuizTitle, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.wrapper,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.wrapper,
         tabIndex: "-1"
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h1"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.text,
+      }, (0, _emotion.jsx)("span", {
+        css: this.props.styles.text,
         "data-automation": "sdk-quiz-title-text"
       }, this.props.quiz.title)));
     }
@@ -70,7 +60,9 @@ var QuizTitle = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
   QuizTitle.displayName = "QuizTitle";
   return QuizTitle;
 }(_react.Component), _class2.propTypes = {
-  quiz: _reactImmutableProptypes.default.record.isRequired
+  quiz: _reactImmutableProptypes.default.record.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.QuizTitle = QuizTitle;
 

package/lib/common/components/resources/quiz/title/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    wrapper: {
+      position: 'relative',
+      width: '100%',
+      boxSizing: 'border-box',
+      marginBottom: componentTheme.wrapperMargin,
+      display: 'flex',
+      alignItems: 'center',
+      paddingTop: componentTheme.wrapperPadding,
+      paddingLeft: componentTheme.wrapperPadding
+    },
+    text: {
+      fontSize: componentTheme.textFontSize
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/quiz/title/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,
       typography = _ref.typography;
   return {
@@ -13,4 +13,7 @@ function generator(_ref) {
     wrapperMargin: spacing.medium,
     textFontSize: typography.fontSizeXLarge
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/resources/quizSessionResult/Header/index.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,38 +15,27 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _uiHeading = require("@instructure/ui-heading");
 
 var _uiAlerts = require("@instructure/ui-alerts");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eSNUQ',
-  template: function template(theme) {
-    return "\n\n.eSNUQ_cgjN,.eSNUQ_dmuJ{display:flex;justify-content:flex-start}\n\n.eSNUQ_dmuJ{align-items:center;flex-wrap:wrap;margin:".concat(theme.resultListInfoMargin || 'inherit', "}\n\n.eSNUQ_dHwi{font-size:").concat(theme.resultListTitleFontSize || 'inherit', ";margin:").concat(theme.resultListTitleMargin || 'inherit', " 0;width:100%}\n\n.eSNUQ_dTyP{width:100%}\n\n.eSNUQ_dkVT{padding-left:").concat(theme.regradeAlertPadding || 'inherit', ";padding-right:").concat(theme.regradeAlertPadding || 'inherit', "}");
-  },
-  'resultListHeading': 'eSNUQ_cgjN',
-  'resultListInfo': 'eSNUQ_dmuJ',
-  'resultListTitle': 'eSNUQ_dHwi',
-  'resultListDescription': 'eSNUQ_dTyP',
-  'regradeAlert': 'eSNUQ_dkVT'
-};
-var QuizSessionResultHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizSessionResultHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizSessionResultHeader, _Component);
 
   var _super = (0, _createSuper2.default)(QuizSessionResultHeader);
@@ -70,7 +57,7 @@ var QuizSessionResultHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default
           return rsi.position;
         }).toJS().join(', ');
 
-        return /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        return (0, _emotion.jsx)(_uiAlerts.Alert, {
           variant: "warning"
         }, (0, _formatMessage.default)("This assessment has been regraded. {\n              numRegradedSI, plural,\n                   =1 {Question {questions} has been affected.}\n                other {Questions {questions} have been affected.}\n              }", {
           questions: questions,
@@ -90,19 +77,20 @@ var QuizSessionResultHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.resultListHeading
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.resultListInfo
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.resultListTitle,
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.resultListHeading
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.resultListInfo
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.resultListTitle,
         "data-automation": "sdk-result-list-title"
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h1"
-      }, (0, _formatMessage.default)('Results'))), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('fs-mask', styles.resultListDescription)
-      }, this.props.studentDescription || this.studentName()))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.regradeAlert
+      }, (0, _formatMessage.default)('Results'))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.resultListDescription,
+        className: "fs-mask"
+      }, this.props.studentDescription || this.studentName()))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.regradeAlert
       }, this.renderRegradeAlert()));
     }
   }]);
@@ -111,7 +99,9 @@ var QuizSessionResultHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default
 }(_react.Component), _class2.propTypes = {
   quizSession: _reactImmutableProptypes.default.record.isRequired,
   regradedSessionItemResults: _reactImmutableProptypes.default.list,
-  studentDescription: _propTypes.default.node
+  studentDescription: _propTypes.default.node,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   regradedSessionItemResults: null,
   studentDescription: null

package/lib/common/components/resources/quizSessionResult/Header/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    resultListHeading: {
+      display: 'flex',
+      justifyContent: 'flex-start'
+    },
+    resultListInfo: {
+      margin: componentTheme.resultListInfoMargin,
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'flex-start',
+      alignItems: 'center'
+    },
+    resultListTitle: {
+      width: '100%',
+      fontSize: componentTheme.resultListTitleFontSize,
+      margin: "".concat(componentTheme.resultListTitleMargin, " 0")
+    },
+    resultListDescription: {
+      width: '100%'
+    },
+    regradeAlert: {
+      paddingLeft: componentTheme.regradeAlertPadding,
+      paddingRight: componentTheme.regradeAlertPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/quizSessionResult/Header/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,
       typography = _ref.typography;
   return {
@@ -14,4 +14,7 @@ function generator(_ref) {
     resultListTitleMargin: spacing.xSmall,
     regradeAlertPadding: spacing.xLarge
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;