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

package/es/common/components/resources/quiz/instructions/Instructions.js

@@ -5,26 +5,22 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "react/no-string-refs": "warn" */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { themeable } from '@instructure/ui-themeable';
-import { RichContentRenderer } from '@instructure/quiz-rce';
+import PropTypes from 'prop-types';
+import { withStyle, jsx } from '@instructure/emotion';
+import { RichContentRendererEmotion } from '@instructure/quiz-rce';
 import makeScrollable from "../../../shared/functionality/makeScrollable.js"; // ================================
 // 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'
-};
-import theme from "./theme.js";
-export var QuizInstructions = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizInstructions, _Component);
 
   var _super = _createSuper(QuizInstructions);
@@ -38,11 +34,12 @@ export var QuizInstructions = (_dec = themeable(theme, styles), _dec(_class = (_
   _createClass(QuizInstructions, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.wrapper,
+      return jsx("div", {
+        "data-testid": "instructionsWrapper",
+        css: this.props.styles.wrapper,
         tabIndex: "-1"
-      }, /*#__PURE__*/React.createElement(RichContentRenderer, {
-        customStyles: styles.text,
+      }, jsx(RichContentRendererEmotion, {
+        customStyles: this.props.styles.text,
         content: this.props.quiz.instructions
       }));
     }
@@ -51,6 +48,8 @@ export var QuizInstructions = (_dec = themeable(theme, styles), _dec(_class = (_
   QuizInstructions.displayName = "QuizInstructions";
   return QuizInstructions;
 }(Component), _class2.propTypes = {
-  quiz: ImmutablePropTypes.record.isRequired
+  quiz: ImmutablePropTypes.record.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default makeScrollable(QuizInstructions);

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

@@ -0,0 +1,21 @@
+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
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,8 +1,10 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography;
   return {
     wrapperPadding: spacing.large,
     textFontSize: typography.fontSizeMedium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/quiz/title/Title.js

@@ -5,25 +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 makeScrollable from "../../../shared/functionality/makeScrollable.js"; // ==========================
 // 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'
-};
-import theme from "./theme.js";
-export var QuizTitle = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var QuizTitle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizTitle, _Component);
 
   var _super = _createSuper(QuizTitle);
@@ -37,13 +32,13 @@ export var QuizTitle = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   _createClass(QuizTitle, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.wrapper,
+      return jsx("div", {
+        css: this.props.styles.wrapper,
         tabIndex: "-1"
-      }, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(Heading, {
         level: "h1"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.text,
+      }, jsx("span", {
+        css: this.props.styles.text,
         "data-automation": "sdk-quiz-title-text"
       }, this.props.quiz.title)));
     }
@@ -52,6 +47,8 @@ export var QuizTitle = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   QuizTitle.displayName = "QuizTitle";
   return QuizTitle;
 }(Component), _class2.propTypes = {
-  quiz: ImmutablePropTypes.record.isRequired
+  quiz: ImmutablePropTypes.record.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default makeScrollable(QuizTitle);

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

@@ -0,0 +1,19 @@
+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
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/quiz/title/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography;
   return {
@@ -6,4 +6,6 @@ export default function generator(_ref) {
     wrapperMargin: spacing.medium,
     textFontSize: typography.fontSizeXLarge
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/quizSessionResult/Header/index.js

@@ -5,27 +5,17 @@ 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 classNames from 'classnames';
 import { Heading } from '@instructure/ui-heading';
 import { Alert } from '@instructure/ui-alerts';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-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'
-};
-import theme from "./theme.js";
-export var QuizSessionResultHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var QuizSessionResultHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizSessionResultHeader, _Component);
 
   var _super = _createSuper(QuizSessionResultHeader);
@@ -47,7 +37,7 @@ export var QuizSessionResultHeader = (_dec = themeable(theme, styles), _dec(_cla
           return rsi.position;
         }).toJS().join(', ');
 
-        return /*#__PURE__*/React.createElement(Alert, {
+        return jsx(Alert, {
           variant: "warning"
         }, t("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,
@@ -67,19 +57,20 @@ export var QuizSessionResultHeader = (_dec = themeable(theme, styles), _dec(_cla
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.resultListHeading
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.resultListInfo
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.resultListTitle,
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.resultListHeading
+      }, jsx("div", {
+        css: this.props.styles.resultListInfo
+      }, jsx("div", {
+        css: this.props.styles.resultListTitle,
         "data-automation": "sdk-result-list-title"
-      }, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(Heading, {
         level: "h1"
-      }, t('Results'))), /*#__PURE__*/React.createElement("div", {
-        className: classNames('fs-mask', styles.resultListDescription)
-      }, this.props.studentDescription || this.studentName()))), /*#__PURE__*/React.createElement("div", {
-        className: styles.regradeAlert
+      }, t('Results'))), jsx("div", {
+        css: this.props.styles.resultListDescription,
+        className: "fs-mask"
+      }, this.props.studentDescription || this.studentName()))), jsx("div", {
+        css: this.props.styles.regradeAlert
       }, this.renderRegradeAlert()));
     }
   }]);
@@ -89,7 +80,9 @@ export var QuizSessionResultHeader = (_dec = themeable(theme, styles), _dec(_cla
 }(Component), _class2.propTypes = {
   quizSession: ImmutablePropTypes.record.isRequired,
   regradedSessionItemResults: ImmutablePropTypes.list,
-  studentDescription: PropTypes.node
+  studentDescription: PropTypes.node,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   regradedSessionItemResults: null,
   studentDescription: null

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

@@ -0,0 +1,29 @@
+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
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/quizSessionResult/Header/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography;
   return {
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     resultListTitleMargin: spacing.xSmall,
     regradeAlertPadding: spacing.xLarge
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/quizSessionResult/Info/index.js

@@ -6,39 +6,26 @@ 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 classNames from 'classnames';
 import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
 import { Text } from '@instructure/ui-text';
 import { ProgressCircle } from '@instructure/ui-progress';
 import { Heading } from '@instructure/ui-heading';
 import { View } from '@instructure/ui-view';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { scoreToLetterGrade } from '@instructure/grading-utils';
 import { withI18nSupport } from '@instructure/quiz-common';
 import FormattedDuration from "../../../shared/FormattedDuration/index.js";
 import { formatTime } from "../../../../util/formatTimespan.js";
-var styles = {
-  componentId: 'fhrSa',
-  template: function template(theme) {
-    return "\n\n.fhrSa_ekHz{align-items:center;display:flex;flex-direction:row;justify-content:center;margin-top:".concat(theme.alertWrapperMargin || 'inherit', "}\n\n.fhrSa_bANW{flex-grow:1;max-width:33rem}\n\n.fhrSa_gasz{margin:none;padding:none}\n\n.fhrSa_pypk,.fhrSa_gasz{align-items:center;display:flex;justify-content:center}\n\n.fhrSa_pypk{align-self:center;flex-wrap:wrap}\n\n.fhrSa_bCqi{flex-wrap:wrap;justify-content:flex-start}\n\n.fhrSa_frHB,.fhrSa_bCqi{align-items:center;display:flex;flex:1 1 auto}\n\n.fhrSa_frHB{height:150px;margin:").concat(theme.scoreMargin || 'inherit', ";width:150px;z-index:").concat(theme.scoreZIndex || 'inherit', "}\n\n.fhrSa_fkZg{font-size:").concat(theme.scorePercentageFontSize || 'inherit', ";font-weight:").concat(theme.scorePercentageFontWeight || 'inherit', "}\n\n.fhrSa_vsBM{flex:1 1 auto;margin:").concat(theme.infoWrapperMargin || 'inherit', ";padding-left:").concat(theme.inforWrapperPadding || 'inherit', "}");
-  },
-  'alertWrapper': 'fhrSa_ekHz',
-  'alertWidth': 'fhrSa_bANW',
-  'wrapper': 'fhrSa_gasz',
-  'info': 'fhrSa_pypk',
-  'scoreStats': 'fhrSa_bCqi',
-  'score': 'fhrSa_frHB',
-  'scorePercentage': 'fhrSa_fkZg',
-  'infoWrapper': 'fhrSa_vsBM'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 var unknownPercentageValue = 'UNKNOWN_PERCENTAGE';
-export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+export var Info = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   _inherits(Info, _withI18nSupport);
 
   var _super = _createSuper(Info);
@@ -74,8 +61,8 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         default: '?',
         description: 'placeholder for an unknown percentage value'
       }) : this.formatPercentMax2FractionDigits(valueNow);
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.scorePercentage,
+      return jsx("div", {
+        css: this.props.styles.scorePercentage,
         "data-automation": "sdk-quiz-score-percentage"
       }, valueToShow);
     }
@@ -93,7 +80,7 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
 
       if (quizSessionResult.isLoaded() && quizSessionResult.autogradingFailed()) {
         var msg = t('There was a grading problem. Please inform your instructor.');
-        alerts.push( /*#__PURE__*/React.createElement(Alert, {
+        alerts.push(jsx(Alert, {
           key: "autograding_failed",
           variant: "warning"
         }, msg));
@@ -103,17 +90,17 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         var ungradedText = t("{\n        count, plural,\n        one {# question requires grading}\n        other {# questions require grading}\n      }", {
           count: ungradedCount
         });
-        alerts.push( /*#__PURE__*/React.createElement(Alert, {
+        alerts.push(jsx(Alert, {
           key: "manual_grading",
           variant: "info"
         }, ungradedText));
       }
 
       if (alerts.length) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.alertWrapper
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.alertWidth,
+        return jsx("div", {
+          css: this.props.styles.alertWrapper
+        }, jsx("div", {
+          css: this.props.styles.alertWidth,
           "data-automation": "sdk-results-requires-grading"
         }, alerts));
       }
@@ -126,23 +113,23 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       var alt = t('Grade for this attempt: { grade }', {
         grade: letterGrade
       });
-      return /*#__PURE__*/React.createElement(AccessibleContent, {
+      return jsx(AccessibleContent, {
         alt: alt
-      }, /*#__PURE__*/React.createElement(View, {
+      }, jsx(View, {
         as: "div"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "xx-large",
         weight: "bold",
         color: "primary"
-      }, letterGrade)), /*#__PURE__*/React.createElement(Text, {
+      }, letterGrade)), jsx(Text, {
         color: "secondary"
       }, gradeText));
     }
   }, {
     key: "renderScoreStats",
     value: function renderScoreStats() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.scoreStats
+      return jsx("div", {
+        css: this.props.styles.scoreStats
       }, this.renderProgress(), this.renderPointsDisplay());
     }
   }, {
@@ -152,10 +139,10 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.score,
+      return jsx("div", {
+        css: this.props.styles.score,
         "data-automation": "sdk-info-score"
-      }, /*#__PURE__*/React.createElement(ProgressCircle, {
+      }, jsx(ProgressCircle, {
         shouldAnimateOnMount: true,
         size: "large",
         screenReaderLabel: t('Your Score'),
@@ -168,16 +155,16 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   }, {
     key: "renderPointsDisplay",
     value: function renderPointsDisplay() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.infoWrapper
-      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+      return jsx("div", {
+        css: this.props.styles.infoWrapper
+      }, jsx(AccessibleContent, {
         alt: this.pointsText
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         as: "div",
         color: "primary",
         size: "xx-large",
         weight: "bold"
-      }, this.mainPointsText), /*#__PURE__*/React.createElement(Text, {
+      }, this.mainPointsText), jsx(Text, {
         color: "secondary"
       }, this.subPointsText)));
     }
@@ -188,29 +175,30 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       var alt = t('Time for this attempt: { time }', {
         time: formatTime(this.props.quizSession.elapsedTime)
       });
-      return /*#__PURE__*/React.createElement(AccessibleContent, {
+      return jsx(AccessibleContent, {
         alt: alt
-      }, /*#__PURE__*/React.createElement(View, {
+      }, jsx(View, {
         as: "div"
-      }, /*#__PURE__*/React.createElement(FormattedDuration, {
+      }, jsx(FormattedDuration, {
         fontSize: "xx-large",
         fontWeight: "bold",
         seconds: this.props.quizSession.elapsedTime
-      })), /*#__PURE__*/React.createElement(Text, {
+      })), jsx(Text, {
         color: "secondary"
       }, attemptText));
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, this.renderAlert(), /*#__PURE__*/React.createElement("div", {
-        className: styles.wrapper
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames('fs-mask', styles.info)
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", null, this.renderAlert(), jsx("div", {
+        css: this.props.styles.wrapper
+      }, jsx("div", {
+        css: this.props.styles.info,
+        className: "fs-mask"
+      }, jsx(ScreenReaderContent, null, jsx(Heading, {
         level: "h2"
-      }, t('Assessment Statistics'))), this.props.restrictQuantitativeData ? this.renderLetterGrade() : this.renderScoreStats(), /*#__PURE__*/React.createElement("div", {
-        className: styles.infoWrapper
+      }, t('Assessment Statistics'))), this.props.restrictQuantitativeData ? this.renderLetterGrade() : this.renderScoreStats(), jsx("div", {
+        css: this.props.styles.infoWrapper
       }, this.renderTime()))));
     }
   }, {
@@ -316,7 +304,9 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   quizSession: ImmutablePropTypes.record.isRequired,
   quizSessionResult: ImmutablePropTypes.record.isRequired,
   restrictQuantitativeData: PropTypes.bool,
-  sessionItemResults: ImmutablePropTypes.list.isRequired
+  sessionItemResults: ImmutablePropTypes.list.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   gradingScheme: [],
   restrictQuantitativeData: false

package/es/common/components/resources/quizSessionResult/Info/styles.js

@@ -0,0 +1,61 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    alertWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: componentTheme.alertWrapperMargin
+    },
+    alertWidth: {
+      flexGrow: 1,
+      maxWidth: '33rem,'
+    },
+    wrapper: {
+      padding: 'none',
+      margin: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    info: {
+      alignSelf: 'center',
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    scoreStats: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      flex: '1 1 auto'
+    },
+    score: {
+      display: 'flex',
+      alignItems: 'center',
+      flex: '1 1 auto',
+      margin: componentTheme.scoreMargin,
+      height: '150px',
+      width: '150px',
+
+      /*
+        progress modal sets a -1 z-index on its content
+        and this raises it above the app background
+      */
+      zIndex: componentTheme.scoreZIndex
+    },
+    scorePercentage: {
+      fontSize: componentTheme.scorePercentageFontSize,
+      fontWeight: componentTheme.scorePercentageFontWeight
+    },
+    infoWrapper: {
+      flex: '1 1 auto',
+      margin: componentTheme.infoWrapperMargin,
+      paddingLeft: componentTheme.inforWrapperPadding
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/quizSessionResult/Info/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography;
   return {
@@ -10,4 +10,6 @@ export default function generator(_ref) {
     infoWrapperMargin: spacing.small,
     inforWrapperPadding: spacing.small
   };
-}
+};
+
+export default generateComponentTheme;