@instructure/quiz-core 20.11.3-rc.2 → 20.11.3-rc.21

package/lib/moderating/components/resources/ModerateTableRow/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"));
 
@@ -43,7 +41,7 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiButtons = require("@instructure/ui-buttons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -51,23 +49,14 @@ var _quizCommon = require("@instructure/quiz-common");
 
 var _index = _interopRequireDefault(require("../../../../common/components/shared/FormattedDuration/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'FXOGU',
-  template: function template(theme) {
-    return "\n\n.FXOGU_ffXX,[dir=ltr] .FXOGU_ffXX,[dir=rtl] .FXOGU_ffXX{float:right}\n\n.FXOGU_clcl{max-width:15rem}\n\n.FXOGU_ecVa{align-items:center;display:flex}\n\n.FXOGU_eTxg{font-weight:400;margin-left:".concat(theme.avatarNameMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.FXOGU_cCBI:not(:first-child){padding-top:").concat(theme.tableDataItemPadding || 'inherit', "}");
-  },
-  'moderateButton': 'FXOGU_ffXX',
-  'tableData': 'FXOGU_clcl',
-  'avatarRow': 'FXOGU_ecVa',
-  'avatarName': 'FXOGU_eTxg',
-  'tableDataItem': 'FXOGU_cCBI'
-};
 var DASHES = '---';
-var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+var ModerateTableRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   (0, _inherits2.default)(ModerateTableRow, _withI18nSupport);
 
   var _super = (0, _createSuper2.default)(ModerateTableRow);
@@ -99,19 +88,19 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       var iconTitle = (0, _formatMessage.default)('Autograde error on attempt { attemptNumber }.', {
         attemptNumber: attemptNumber
       });
-      var link = autogradefailed ? /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      var link = autogradefailed ? (0, _emotion.jsx)(_uiLink.Link, {
         onClick: _this.onResultsLinkClick(quizSessionId),
-        icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningLine, {
+        icon: (0, _emotion.jsx)(_uiIcons.IconWarningLine, {
           color: "warning",
           title: iconTitle
         }),
         iconPlacement: "end"
-      }, message) : /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+      }, message) : (0, _emotion.jsx)(_uiLink.Link, {
         onClick: _this.onResultsLinkClick(quizSessionId)
       }, message);
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         key: quizSessionId,
-        className: styles.tableDataItem
+        css: _this.props.styles.tableDataItem
       }, link);
     };
 
@@ -119,14 +108,14 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       var iconTitle = (0, _formatMessage.default)('Autograde error on attempt { attemptNumber }.', {
         attemptNumber: attemptNumber
       });
-      var icon = autogradefailed ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningLine, {
+      var icon = autogradefailed ? (0, _emotion.jsx)(_uiIcons.IconWarningLine, {
         color: "warning",
         title: iconTitle
       }) : null;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         key: quizSessionId,
-        className: styles.tableDataItem
-      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        css: _this.props.styles.tableDataItem
+      }, (0, _emotion.jsx)(_uiView.View, {
         margin: "0 x-small 0 0"
       }, message), icon);
     };
@@ -158,12 +147,11 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
     value: function renderScores(quizSessions) {
       var _this3 = this;
 
-      var noScore = /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.tableDataItem
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      var noScore = (0, _emotion.jsx)("div", {
+        css: this.props.styles.tableDataItem
+      }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: (0, _formatMessage.default)('No Score')
       }, DASHES));
-
       if (!quizSessions.length) return noScore;
       return quizSessions.reduce(function (renderedScores, quizSession) {
         var result = quizSession.findAuthoritativeResult();
@@ -189,14 +177,14 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
 
         if (quizSession.inProgress() || quizSession.reopeningGraded()) {
           var alt = (0, _formatMessage.default)('In progress, score not available');
-          message = /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+          message = (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
             alt: alt
           }, DASHES);
         }
 
-        renderedScores.push( /*#__PURE__*/_react.default.createElement("div", {
+        renderedScores.push((0, _emotion.jsx)("div", {
           key: result.get('id'),
-          className: styles.tableDataItem
+          css: _this3.props.styles.tableDataItem
         }, message));
         return renderedScores;
       }, []);
@@ -227,9 +215,9 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       var maxAttempts = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : quizSessions.length;
 
       if (!quizSessions.length) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.tableDataItem
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.tableDataItem
+        }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
           alt: (0, _formatMessage.default)('No Attempt')
         }, DASHES));
       }
@@ -250,39 +238,43 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   }, {
     key: "renderTimes",
     value: function renderTimes(quizSessions) {
+      var _this5 = this;
+
       if (!quizSessions.length) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.tableDataItem
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.tableDataItem
+        }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
           alt: (0, _formatMessage.default)('No Time')
         }, DASHES));
       }
 
       return quizSessions.map(function (quizSession, idx) {
-        var message = /*#__PURE__*/_react.default.createElement(_index.default, {
+        var message = (0, _emotion.jsx)(_index.default, {
           seconds: quizSession.elapsedTime
         });
 
         if (quizSession.inProgress() || quizSession.reopeningGraded()) {
           var alt = (0, _formatMessage.default)('In progress, time not available');
-          message = /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+          message = (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
             alt: alt
           }, DASHES);
         }
 
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return (0, _emotion.jsx)("div", {
           key: quizSession.get('id'),
-          className: styles.tableDataItem
+          css: _this5.props.styles.tableDataItem
         }, message);
       });
     }
   }, {
     key: "renderLogLinks",
     value: function renderLogLinks(quizSessions) {
+      var _this6 = this;
+
       if (!quizSessions.length) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.tableDataItem
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.tableDataItem
+        }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
           alt: (0, _formatMessage.default)('No Log')
         }, DASHES));
       }
@@ -302,10 +294,10 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
           });
         }
 
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return (0, _emotion.jsx)("div", {
           key: quizSessionId,
-          className: styles.tableDataItem
-        }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+          css: _this6.props.styles.tableDataItem
+        }, (0, _emotion.jsx)(_uiLink.Link, {
           onClick: onClick
         }, message));
       });
@@ -318,16 +310,16 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         var displayContent;
 
         if (!accommodations || accommodations.length === 0) {
-          displayContent = /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          displayContent = (0, _emotion.jsx)(_uiText.Text, {
             color: "secondary"
           }, (0, _formatMessage.default)('None'));
         } else {
-          displayContent = /*#__PURE__*/_react.default.createElement(_uiList.List, {
+          displayContent = (0, _emotion.jsx)(_uiList.List, {
             isUnstyled: true
           }, accommodations.map(function (elem) {
-            return /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
+            return (0, _emotion.jsx)(_uiList.List.Item, {
               key: elem.name
-            }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+            }, (0, _emotion.jsx)(_uiText.Text, {
               color: "primary"
             }, (0, _formatMessage.default)('{ name }: { value }', elem)));
           }));
@@ -335,13 +327,13 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         // so that the screen reader will read the accommodations first, and then the button
 
 
-        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        return (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _emotion.jsx)(_uiFlex.Flex, {
           direction: "row-reverse",
           justifyItems: "end"
-        }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
           shouldShrink: true,
           "data-automation": "sdk-moderate-accommodations-text"
-        }, displayContent), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+        }, displayContent), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)(_uiButtons.IconButton, {
           margin: "0 x-small 0 0",
           withBackground: false,
           withBorder: false,
@@ -356,9 +348,9 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
     key: "renderModerate",
     value: function renderModerate() {
       if (this.props.shouldRenderModerateButton) {
-        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.moderateButton
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        return (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _emotion.jsx)("div", {
+          css: this.props.styles.moderateButton
+        }, (0, _emotion.jsx)(_uiButtons.Button, {
           size: "small",
           onClick: this.onModerateButtonClick,
           ref: this.handleModerateRef,
@@ -375,20 +367,18 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
           avatarUrl = _this$props$rowData.avatar,
           maxAttempts = _this$props$rowData.maxAttempts,
           accommodations = _this$props$rowData.accommodations;
-      var tableData = styles.tableData,
-          avatarRow = styles.avatarRow,
-          avatarName = styles.avatarName;
-      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
-        className: tableData
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: avatarRow
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_uiAvatar.Avatar, {
+      var _this$props$styles = this.props.styles,
+          avatarRow = _this$props$styles.avatarRow,
+          avatarName = _this$props$styles.avatarName;
+      return (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.RowHeader, null, (0, _emotion.jsx)("span", {
+        css: avatarRow
+      }, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)(_uiAvatar.Avatar, {
         name: name,
         src: avatarUrl,
         size: "small"
-      })), /*#__PURE__*/_react.default.createElement("span", {
-        className: avatarName
-      }, name))), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.renderAttempts(quizSessions, maxAttempts)), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.renderScores(quizSessions)), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.renderTimes(quizSessions)), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.renderLogLinks(quizSessions)), !this.props.anonymousGrading && this.renderAccommodations(accommodations), this.renderModerate());
+      })), (0, _emotion.jsx)("span", {
+        css: avatarName
+      }, name))), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderAttempts(quizSessions, maxAttempts)), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderScores(quizSessions)), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderTimes(quizSessions)), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderLogLinks(quizSessions)), !this.props.anonymousGrading && this.renderAccommodations(accommodations), this.renderModerate());
     }
   }]);
   ModerateTableRow.displayName = "ModerateTableRow";
@@ -414,7 +404,8 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
     }))
   }).isRequired,
   shouldRenderModerateButton: _propTypes.default.bool,
-  focusTarget: _propTypes.default.string
+  focusTarget: _propTypes.default.string,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   displayScoreAsPercentage: true,
   shouldRenderModerateButton: true,

package/lib/moderating/components/resources/ModerateTableRow/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    moderateButton: {
+      float: 'right'
+    },
+    avatarRow: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    avatarName: {
+      marginLeft: componentTheme.avatarNameMargin,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontWeight: 'initial'
+    },
+    tableDataItem: {
+      ':not(:first-child)': {
+        paddingTop: componentTheme.tableDataItemPadding
+      }
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/moderating/components/resources/ModerateTableRow/theme.js

@@ -3,12 +3,15 @@
 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;
   return {
     avatarNameMargin: spacing.xSmall,
     tableDataItemPadding: spacing.xxSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/quizAnalysis/QuizAnalysisOverview.js

@@ -29,7 +29,7 @@ var _uiMetric = require("@instructure/ui-metric");
 
 var _uiText = require("@instructure/ui-text");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../../common/components/shared/FormattedDuration/index.js"));
 
@@ -43,26 +43,17 @@ var _index3 = _interopRequireDefault(require("../charts/CentileDistribution/inde
 
 var _index4 = _interopRequireDefault(require("../MetricsListItem/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fOAfX',
-  template: function template(theme) {
-    return "\n\n.fOAfX_bGBk{padding:".concat(theme.rootPadding || 'inherit', "}\n\n.fOAfX_CIyo{padding-bottom:").concat(theme.metricWrapperPadding || 'inherit', "}\n\n.fOAfX_CIyo,.fOAfX_gasz{margin-top:").concat(theme.wrapperMargin || 'inherit', "}\n\n@media screen and (--tabletBreakPoint){.fOAfX_eiMu{flex-basis:33.3%}}\n\n@media screen and (--phoneBreakPoint){.fOAfX_eiMu{flex-basis:50%}}");
-  },
-  'root': 'fOAfX_bGBk',
-  'metricWrapper': 'fOAfX_CIyo',
-  'wrapper': 'fOAfX_gasz',
-  'metric': 'fOAfX_eiMu'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+var _ref = (0, _emotion.jsx)("br", null);
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+var _ref2 = (0, _emotion.jsx)(_Spinner.default, null);
 
-var QuizAnalysisOverview = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizAnalysisOverview = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizAnalysisOverview, _Component);
 
   var _super = (0, _createSuper2.default)(QuizAnalysisOverview);
@@ -81,10 +72,10 @@ var QuizAnalysisOverview = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
     _this.renderBatchTimestamp = function () {
       if (_this.props.quizAnalysis.batchTimestamp) {
         var timestamp = Date.parse(_this.props.quizAnalysis.batchTimestamp);
-        return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        return (0, _emotion.jsx)(_uiText.Text, {
           color: "secondary",
           size: "x-small"
-        }, _ref, /*#__PURE__*/_react.default.createElement("b", null, (0, _formatMessage.default)('Data Last Updated:')), "\xA0", _formatMessage.default.date(timestamp, 'medium'));
+        }, _ref, (0, _emotion.jsx)("b", null, (0, _formatMessage.default)('Data Last Updated:')), "\xA0", _formatMessage.default.date(timestamp, 'medium'));
       }
     };
 
@@ -95,49 +86,47 @@ var QuizAnalysisOverview = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
     key: "defaulMetrics",
     value: function defaulMetrics() {
       var quizAnalysis = this.props.quizAnalysis;
-
-      var formattedElapsedTime = /*#__PURE__*/_react.default.createElement(_index.default, {
+      var formattedElapsedTime = (0, _emotion.jsx)(_index.default, {
         fontSize: "x-large",
         seconds: quizAnalysis.meanElapsedTime()
       });
-
-      return /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_index4.default, {
+      return (0, _emotion.jsx)(_uiMetric.MetricGroup, null, (0, _emotion.jsx)(_index4.default, {
         key: "highScore",
         renderLabel: (0, _formatMessage.default)('High Score'),
         renderValue: quizAnalysis.highScore(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         key: "lowScore",
         renderLabel: (0, _formatMessage.default)('Low Score'),
         renderValue: quizAnalysis.lowScore(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         key: "meanScore",
         renderLabel: (0, _formatMessage.default)('Mean Score'),
         renderValue: quizAnalysis.meanScore(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         key: "standardDeviation",
         renderLabel: (0, _formatMessage.default)('Standard Deviation'),
         renderValue: quizAnalysis.standardDeviation(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         key: "meanElapsedTime",
         renderLabel: (0, _formatMessage.default)('Mean Elapsed Time'),
-        renderValue: /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        renderValue: (0, _emotion.jsx)(_uiText.Text, {
           size: "x-large"
         }, formattedElapsedTime),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         key: "cronbachsAlpha",
         renderLabel: (0, _formatMessage.default)('Cronbach\'s Alpha'),
         renderValue: quizAnalysis.cronbachsAlpha(),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
       }));
     }
@@ -150,18 +139,18 @@ var QuizAnalysisOverview = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
           quizAnalysis = _this$props.quizAnalysis,
           quizTitle = _this$props.quizTitle;
       if (!quizAnalysis.isLoaded()) return _ref2;
-      var list = _react.default.Children.count(this.props.children) === 0 ? this.defaulMetrics() : /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, this.props.children);
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
-        className: styles.root
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      var list = _react.default.Children.count(this.props.children) === 0 ? this.defaulMetrics() : (0, _emotion.jsx)(_uiMetric.MetricGroup, null, this.props.children);
+      return (0, _emotion.jsx)(_index2.default, {
+        css: this.props.styles.root
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h4",
         as: "h2",
         color: "primary"
-      }, quizTitle), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricWrapper
-      }, list), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.wrapper
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+      }, quizTitle), (0, _emotion.jsx)("div", {
+        css: this.props.styles.metricWrapper
+      }, list), (0, _emotion.jsx)("div", {
+        css: this.props.styles.wrapper
+      }, (0, _emotion.jsx)(_index3.default, {
         animateDelay: animateDelay,
         animateDuration: animateDuration,
         summaryDistribution: quizAnalysis.decileDistribution(),
@@ -176,7 +165,8 @@ var QuizAnalysisOverview = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
   animateDuration: _propTypes.default.number,
   quizAnalysis: _reactImmutableProptypes.default.record.isRequired,
   quizTitle: _propTypes.default.string.isRequired,
-  children: _propTypes.default.arrayOf(_propTypes.default.node)
+  children: _propTypes.default.arrayOf(_propTypes.default.node),
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   animateDelay: void 0,
   animateDuration: void 0,

package/lib/reporting/components/quizAnalysis/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme) {
+  var _metric;
+
+  var tabletBreakPoint = "@media screen and (".concat(componentTheme.tabletBreakPoint, ")");
+  var phoneBreakPoint = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    root: {
+      padding: componentTheme.rootPadding
+    },
+    metricWrapper: {
+      marginTop: componentTheme.wrapperMargin,
+      paddingBottom: componentTheme.metricWrapperPadding
+    },
+    wrapper: {
+      marginTop: componentTheme.wrapperMargin
+    },
+    metric: (_metric = {}, (0, _defineProperty2.default)(_metric, tabletBreakPoint, {
+      flexBasis: '33.3%'
+    }), (0, _defineProperty2.default)(_metric, phoneBreakPoint, {
+      flexBasis: '50%'
+    }), _metric)
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/quizAnalysis/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,
       colors = _ref.colors,
@@ -17,4 +17,7 @@ function generator(_ref) {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     tabletBreakPoint: "max-width: ".concat(breakpoints.large)
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;