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

package/lib/reporting/components/itemAnalysis/ItemAnalysisRow/presenter.js

@@ -31,7 +31,7 @@ var _uiHeading = require("@instructure/ui-heading");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _quizRce = require("@instructure/quiz-rce");
 
@@ -55,37 +55,15 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _quizCommon = require("@instructure/quiz-common");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eCUxk',
-  template: function template(theme) {
-    return "\n\n.eCUxk_cQXk{margin-bottom:".concat(theme.itemAnalysisRowMargin || 'inherit', ";padding:").concat(theme.itemAnalysisRowPadding || 'inherit', ";position:relative}\n\n.eCUxk_dlpV{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between}\n\n.eCUxk_fAhB{color:").concat(theme.headerTextColor || 'inherit', ";font-size:").concat(theme.headerTextFontSize || 'inherit', "}\n\n.eCUxk_dzph{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;padding-bottom:").concat(theme.metricsRowLowerPadding || 'inherit', "}\n\n.eCUxk_dFNV{color:").concat(theme.metricNoteColor || 'inherit', ";font-size:").concat(theme.metricNoteFontSize || 'inherit', "}\n\n.eCUxk_cloC{flex:1 0 35%;font-size:").concat(theme.stemFontSize || 'inherit', ";line-height:").concat(theme.stemLineHeight || 'inherit', ";margin-bottom:").concat(theme.stemMargin || 'inherit', "}\n\n.eCUxk_cloC p{margin:0}\n\n.eCUxk_bQrf{flex:0 1 42rem}\n\n.eCUxk_eiMu{justify-content:center}\n\n.eCUxk_bwKH{color:").concat(theme.emptyTextColor || 'inherit', ";flex:0 1 42rem;padding:").concat(theme.emptyTextPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .eCUxk_bwKH,[dir=rtl] .eCUxk_bwKH{text-align:center}\n\n.eCUxk_sIdV{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0 -1rem}\n\n.eCUxk_dvfr{flex:10 1 45%}\n\n.eCUxk_dYYR{flex:1 1 auto;min-width:1%}\n\n.eCUxk_eFpQ{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:0 ").concat(theme.answerDistributionPadding || 'inherit', ";position:relative}\n\n.eCUxk_dFwC{padding:0 ").concat(theme.answerDistributionChartPadding || 'inherit', ";width:19rem}\n\n.eCUxk_bqaR{padding:0 ").concat(theme.answerDistributionLegendPadding || 'inherit', "}\n\n.eCUxk_RMvh{background-color:").concat(theme.answerDistributionSwatchColor || 'inherit', "}\n\n.eCUxk_dMVr{display:flex;margin:0 -1rem}\n\n@media screen and (--phoneBreakPoint){.eCUxk_eFpQ{padding:0}.eCUxk_eiMu{flex-basis:50%}}");
-  },
-  'itemAnalysisRow': 'eCUxk_cQXk',
-  'headerRow': 'eCUxk_dlpV',
-  'headerText': 'eCUxk_fAhB',
-  'metricsRow': 'eCUxk_dzph',
-  'metricNote': 'eCUxk_dFNV',
-  'stem': 'eCUxk_cloC',
-  'metrics': 'eCUxk_bQrf',
-  'metric': 'eCUxk_eiMu',
-  'emptyText': 'eCUxk_bwKH',
-  'answerAnalysis': 'eCUxk_sIdV',
-  'answerTableSection': 'eCUxk_dvfr',
-  'answerDistributionSection': 'eCUxk_dYYR',
-  'answerDistribution': 'eCUxk_eFpQ',
-  'answerDistributionChart': 'eCUxk_dFwC',
-  'answerDistributionLegend': 'eCUxk_bqaR',
-  'answerDistributionSwatch': 'eCUxk_RMvh',
-  'outcomeAlignments': 'eCUxk_dMVr'
-};
-
-var _ref2 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
-
-var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+var _ref2 = (0, _emotion.jsx)(_Spinner.default, null);
+
+var ItemAnalysisRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   (0, _inherits2.default)(ItemAnalysisRow, _withI18nSupport);
 
   var _super = (0, _createSuper2.default)(ItemAnalysisRow);
@@ -128,7 +106,7 @@ var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         position: position,
         expanded: expanded
       });
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)(_index2.default, {
         onClick: this.toggleExpanded,
         title: title,
         isExpanded: expanded,
@@ -142,74 +120,76 @@ var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var interactionType = this.props.itemAnalysis.interactionTypeName();
       var pointsPossible = this.props.itemAnalysis.pointsPossible;
       var separator = ' | ';
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.headerRow
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.headerText
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.headerRow
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.headerText
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h3"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Question {position, number}', {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Question {position, number}', {
         position: position
-      })), interactionType, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, separator), (0, _formatMessage.default)('{pointsPossible, number} points possible', {
+      })), interactionType, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, separator), (0, _formatMessage.default)('{pointsPossible, number} points possible', {
         pointsPossible: pointsPossible
       }))), this.props.itemAnalysis.isPresent() && this.renderExpandButton());
     }
   }, {
     key: "renderStem",
     value: function renderStem() {
-      return /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
-        customStyles: styles.stem,
+      return (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
+        customStyles: this.props.styles.stem,
         content: this.props.itemAnalysis.itemBody
       });
     }
   }, {
     key: "defaultMetricsList",
     value: function defaultMetricsList() {
+      var _this2 = this;
+
       var mean = _formatMessage.default.rich('{score}<0>/{possible, number} pts</0>', {
         0: function _(_ref) {
           var children = _ref.children;
-          return /*#__PURE__*/_react.default.createElement("span", {
+          return (0, _emotion.jsx)("span", {
             key: "mean",
-            className: styles.metricNote
+            css: _this2.props.styles.metricNote
           }, children);
         },
         score: this.props.itemAnalysis.meanScore(this.locale) || 0,
         possible: this.props.itemAnalysis.pointsPossible
       });
 
-      return /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_index7.default, {
+      return (0, _emotion.jsx)(_uiMetric.MetricGroup, null, (0, _emotion.jsx)(_index7.default, {
         key: "difficultyIndex",
         renderLabel: (0, _formatMessage.default)('Difficulty Index'),
         renderValue: this.props.itemAnalysis.difficultyIndex(this.locale),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/_react.default.createElement(_index7.default, {
+      }), (0, _emotion.jsx)(_index7.default, {
         key: "discriminationIndex",
         renderLabel: (0, _formatMessage.default)('Discrimination Index'),
         renderValue: this.props.itemAnalysis.discriminationIndex(this.locale),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/_react.default.createElement(_index7.default, {
+      }), (0, _emotion.jsx)(_index7.default, {
         key: "rpb",
         renderLabel: (0, _formatMessage.default)('RPB'),
         renderValue: this.props.itemAnalysis.pointBiserial(this.locale),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/_react.default.createElement(_index7.default, {
+      }), (0, _emotion.jsx)(_index7.default, {
         key: "meanEarnedScore",
         renderLabel: (0, _formatMessage.default)('Mean Earned Score'),
         renderValue: mean,
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
       }));
     }
   }, {
     key: "renderMetrics",
     value: function renderMetrics() {
-      var list = _react.default.Children.count(this.props.children) === 0 ? this.defaultMetricsList() : /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, this.props.children);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metrics
+      var list = _react.default.Children.count(this.props.children) === 0 ? this.defaultMetricsList() : (0, _emotion.jsx)(_uiMetric.MetricGroup, null, this.props.children);
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.metrics
       }, list);
     }
   }, {
@@ -219,11 +199,11 @@ var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.answerTableSection
-      }, /*#__PURE__*/_react.default.createElement(_index6.default, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.answerTableSection
+      }, (0, _emotion.jsx)(_index6.default, {
         text: (0, _formatMessage.default)('Answer Frequency Summary')
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+      }, (0, _emotion.jsx)(_index3.default, {
         itemAnalysis: this.props.itemAnalysis
       })));
     }
@@ -232,26 +212,26 @@ var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     value: function renderAnswerAnalysis() {
       if (this.props.expanded) {
         var quintile = this.props.itemAnalysis.quintile();
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.answerAnalysis
-        }, this.renderAnswerAnalysisChart(), /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.answerDistributionSection,
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.answerAnalysis
+        }, this.renderAnswerAnalysisChart(), (0, _emotion.jsx)("div", {
+          css: this.props.styles.answerDistributionSection,
           "data-automation": "sdk-reporting-answer-distribution"
-        }, /*#__PURE__*/_react.default.createElement(_index6.default, {
+        }, (0, _emotion.jsx)(_index6.default, {
           text: (0, _formatMessage.default)('Performance by Quintile')
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.answerDistribution
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.answerDistributionChart
-        }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+        }, (0, _emotion.jsx)("div", {
+          css: this.props.styles.answerDistribution
+        }, (0, _emotion.jsx)("div", {
+          css: this.props.styles.answerDistributionChart
+        }, (0, _emotion.jsx)(_index4.default, {
           visualDistribution: quintile,
           animateDelay: this.props.animateDelay,
           animateDuration: this.props.animateDuration
-        })), /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.answerDistributionLegend
-        }, /*#__PURE__*/_react.default.createElement(_index5.default, {
+        })), (0, _emotion.jsx)("div", {
+          css: this.props.styles.answerDistributionLegend
+        }, (0, _emotion.jsx)(_index5.default, {
           series: [{
-            className: styles.answerDistributionSwatch,
+            customStyles: this.props.styles.answerDistributionSwatch,
             label: (0, _formatMessage.default)('Number of Students')
           }]
         }))))));
@@ -267,11 +247,11 @@ var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           outcomesToken = _this$props3.outcomesToken;
 
       if (expanded && outcomesEndpoint && itemAnalysis.outcomeAlignmentSetGuid) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.outcomeAlignments
-        }, /*#__PURE__*/_react.default.createElement(_index6.default, {
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.outcomeAlignments
+        }, (0, _emotion.jsx)(_index6.default, {
           text: (0, _formatMessage.default)('Outcomes')
-        }, /*#__PURE__*/_react.default.createElement(_OutcomeList.default, {
+        }, (0, _emotion.jsx)(_OutcomeList.default, {
           artifactType: "quizzes.item",
           artifactId: itemAnalysis.itemId,
           alignmentSetId: itemAnalysis.outcomeAlignmentSetGuid,
@@ -286,8 +266,8 @@ var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "renderNotFound",
     value: function renderNotFound() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emptyText
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.emptyText
       }, (0, _formatMessage.default)('No submissions yet'));
     }
   }, {
@@ -298,11 +278,11 @@ var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }
 
       var present = this.props.itemAnalysis.isPresent();
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         key: this.props.itemId,
-        className: styles.itemAnalysisRow
-      }, this.renderHeader(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsRow
+        css: this.props.styles.itemAnalysisRow
+      }, this.renderHeader(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.metricsRow
       }, this.renderStem(), present ? this.renderMetrics() : this.renderNotFound()), present && this.renderAnswerAnalysis(), this.renderOutcomeAlignments());
     }
   }]);
@@ -320,7 +300,8 @@ var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   outcomesToken: _propTypes.default.string,
   screenreaderNotification: _propTypes.default.func.isRequired,
   children: _propTypes.default.arrayOf(_propTypes.default.node),
-  locale: _propTypes.default.string
+  locale: _propTypes.default.string,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   animateDelay: void 0,
   animateDuration: void 0,

package/lib/reporting/components/itemAnalysis/ItemAnalysisRow/styles.js

@@ -0,0 +1,110 @@
+"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 mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    itemAnalysisRow: {
+      padding: componentTheme.itemAnalysisRowPadding,
+      marginBottom: componentTheme.itemAnalysisRowMargin,
+      position: 'relative'
+    },
+    headerRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start'
+    },
+    headerText: {
+      color: componentTheme.headerTextColor,
+      fontSize: componentTheme.headerTextFontSize
+    },
+    metricsRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      paddingBottom: componentTheme.metricsRowLowerPadding
+    },
+    metricNote: {
+      fontSize: componentTheme.metricNoteFontSize,
+      color: componentTheme.metricNoteColor
+    },
+    stem: {
+      flex: '1 0 35%',
+      fontSize: componentTheme.stemFontSize,
+      lineHeight: componentTheme.stemLineHeight,
+      marginBottom: componentTheme.stemMargin,
+      '& p': {
+        margin: 0
+      }
+    },
+    metrics: {
+      flex: '0 1 42rem'
+    },
+    metric: (0, _defineProperty2.default)({
+      justifyContent: 'center'
+    }, mq, {
+      flexBasis: '50%'
+    }),
+    emptyText: {
+      flex: '0 1 42rem',
+      padding: componentTheme.emptyTextPadding,
+      textAlign: 'center',
+      color: componentTheme.emptyTextColor
+    },
+    answerAnalysis: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      margin: '0 -1rem'
+    },
+    answerTableSection: {
+      /* Explicit flex-basis is a workaround for https://bugs.webkit.org/show_bug.cgi?id=136041 */
+      flex: '10 1 45%'
+    },
+    answerDistributionSection: {
+      flex: '1 1 auto',
+
+      /* Non-zero width for IE11 flex-wrap */
+      minWidth: '1%'
+    },
+    answerDistribution: (0, _defineProperty2.default)({
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: "0 ".concat(componentTheme.answerDistributionPadding),
+      position: 'relative'
+    }, mq, {
+      padding: 0
+    }),
+    answerDistributionChart: {
+      width: '19rem',
+      padding: "0 ".concat(componentTheme.answerDistributionChartPadding)
+    },
+    answerDistributionLegend: {
+      padding: "0 ".concat(componentTheme.answerDistributionLegendPadding)
+    },
+    answerDistributionSwatch: {
+      backgroundColor: componentTheme.answerDistributionSwatchColor
+    },
+    outcomeAlignments: {
+      display: 'flex',
+      margin: '0 - 1rem'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/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
 });
@@ -19,13 +17,15 @@ 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 _styles = _interopRequireDefault(require("./styles.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _index = _interopRequireDefault(require("../../../../../common/components/shared/ExpandButton/index.js"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
@@ -49,20 +49,7 @@ var _popoverContent = require("./popoverContent.js");
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eHqQt',
-  template: function template(theme) {
-    return "\n\n.eHqQt_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.eHqQt_eKXQ{margin:").concat(theme.cardTopMargin || 'inherit', " auto ").concat(theme.cardBottomMargin || 'inherit', " auto;padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.eHqQt_dYbQ{align-items:center;display:flex;height:502px;justify-content:center;padding:").concat(theme.cardWrapperPadding || 'inherit', "}\n\n.eHqQt_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.eHqQt_bTHH{position:absolute;right:calc(").concat(theme.viewPaddingRight || 'inherit', " + ").concat(theme.viewPaddingRightAdjust || 'inherit', ");top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.eHqQt_dPzc,.eHqQt_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
-  },
-  'heading': 'eHqQt_eDnN',
-  'cardWrapper': 'eHqQt_eKXQ',
-  'skeletonCardWrapper': 'eHqQt_dYbQ',
-  'container': 'eHqQt_crZr',
-  'expandButtonContainer': 'eHqQt_bTHH',
-  'metricGroup': 'eHqQt_dPzc',
-  'metricsWrapper': 'eHqQt_cpZE'
-};
-var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var NewQuizAnalysis = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAnalysis, _Component);
 
   var _super = (0, _createSuper2.default)(NewQuizAnalysis);
@@ -89,16 +76,16 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
     _this.renderExpanded = function () {
       var scores = _this.props.quizAnalysis.scores;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.container
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricGroup
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.container
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricGroup
+      }, (0, _emotion.jsx)(_index3.default, {
         metricKey: "stddev",
         value: scores === null || scores === void 0 ? void 0 : scores.stddev,
         label: (0, _formatMessage.default)('Standard Deviation'),
         popoverDescription: _popoverContent.standardDeviation
-      }), /*#__PURE__*/_react.default.createElement(_index3.default, {
+      }), (0, _emotion.jsx)(_index3.default, {
         metricKey: "cronbachs_alpha",
         value: scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha,
         label: (0, _formatMessage.default)('Cronbach\'s Alpha'),
@@ -111,45 +98,45 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var scores = quizAnalysis.scores,
           attempts = quizAnalysis.attempts;
       var expanded = _this.state.expanded;
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
-        className: styles.cardWrapper
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricGroup
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+      return (0, _emotion.jsx)(_index2.default, {
+        css: _this.props.styles.cardWrapper
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricGroup
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricsWrapper
+      }, (0, _emotion.jsx)(_index4.default, {
         metricKey: "highscore",
         label: (0, _formatMessage.default)('High Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.max_percentage,
         suffix: "%"
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         metricKey: "lowscore",
         label: (0, _formatMessage.default)('Low Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.min_percentage,
         suffix: "%"
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         metricKey: "meanscore",
         label: (0, _formatMessage.default)('Mean Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.mean_percentage,
         suffix: "%"
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.metricsWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+      })), (0, _emotion.jsx)("div", {
+        css: _this.props.styles.metricsWrapper
+      }, (0, _emotion.jsx)(_index4.default, {
         metricKey: "median_percentage",
         label: (0, _formatMessage.default)('Median Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.median_percentage,
         suffix: "%"
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      }), (0, _emotion.jsx)(_index4.default, {
         metricKey: "mean_elapsed_sec",
         label: (0, _formatMessage.default)('Mean Elapsed Time'),
         value: (0, _formatTimespan.formatTimeToFullNumeric)(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec)
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.expandButtonContainer
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      })), (0, _emotion.jsx)("div", {
+        css: _this.props.styles.expandButtonContainer
+      }, (0, _emotion.jsx)(_index.default, {
         onClick: _this.handleToggle,
         title: expanded ? (0, _formatMessage.default)('collapse quiz analysis') : (0, _formatMessage.default)('expand quiz analysis'),
         isExpanded: expanded
-      }))), expanded && _this.renderExpanded(), /*#__PURE__*/_react.default.createElement(_presenter.ScoreDistribution, {
+      }))), expanded && _this.renderExpanded(), (0, _emotion.jsx)(_presenter.ScoreDistribution, {
         decileDistribution: _this.getPreparedDecileDistribution()
       }));
     };
@@ -180,9 +167,9 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var fetchInProgress = this.props.fetchInProgress;
 
       if (fetchInProgress) {
-        return /*#__PURE__*/_react.default.createElement(_index2.default, {
-          className: styles.skeletonCardWrapper
-        }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+        return (0, _emotion.jsx)(_index2.default, {
+          css: this.props.styles.skeletonCardWrapper
+        }, (0, _emotion.jsx)(_uiSpinner.Spinner, {
           renderTitle: (0, _formatMessage.default)('Loading quiz analysis data')
         }));
       } else {
@@ -194,7 +181,8 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   return NewQuizAnalysis;
 }(_react.Component), _class2.propTypes = {
   quizAnalysis: _propTypes.quizAnalysisPropType,
-  fetchInProgress: _propTypes2.default.bool
+  fetchInProgress: _propTypes2.default.bool,
+  styles: _propTypes2.default.object
 }.isRequired, _class2.defaultProps = {
   quizAnalysis: {}
 }, _temp)) || _class);

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/styles.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  var metric = {
+    flexWrap: 'wrap',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    columnGap: componentTheme.metricsColumnGap,
+    rowGap: '1.5rem'
+  };
+  return {
+    heading: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingBottom: componentTheme.headingPadding
+    },
+    cardWrapper: {
+      padding: componentTheme.cardWrapperPadding,
+      position: 'relative',
+      margin: "".concat(componentTheme.cardTopMargin, " auto ").concat(componentTheme.cardBottomMargin, " auto")
+    },
+    skeletonCardWrapper: {
+      padding: componentTheme.cardWrapperPadding,
+      height: '502px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    container: {
+      paddingTop: componentTheme.metricGroupPaddingTop
+    },
+    expandButtonContainer: {
+      position: 'absolute',
+      right: "calc(".concat(componentTheme.viewPaddingRight, " + ").concat(componentTheme.viewPaddingRightAdjust, ")"),
+      top: componentTheme.viewPaddingTop
+    },
+    metricsWrapper: metric,
+    metricGroup: metric
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/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;
   return {
     metricGroupPaddingTop: spacing.medium,
@@ -18,4 +18,7 @@ function generator(_ref) {
     cardWrapperPadding: spacing.medium,
     metricsColumnGap: '82px'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;