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

package/es/reporting/components/Caption/index.js

@@ -5,20 +5,14 @@ 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 { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'bEEaV',
-  template: function template(theme) {
-    return "\n\n.bEEaV_caGd{margin:".concat(theme.contentMargin || 'inherit', "}\n\n.bEEaV_biBD{padding-top:").concat(theme.childrenPadding || 'inherit', "}");
-  },
-  'content': 'bEEaV_caGd',
-  'children': 'bEEaV_biBD'
-};
-import theme from "./theme.js";
-export var Caption = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var Caption = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Caption, _Component);
 
   var _super = _createSuper(Caption);
@@ -32,15 +26,15 @@ export var Caption = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   _createClass(Caption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.content
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", {
+        css: this.props.styles.content
+      }, jsx(Heading, {
         level: "reset",
         as: "h2",
         border: "bottom",
         color: "primary"
-      }, this.props.text), /*#__PURE__*/React.createElement("div", {
-        className: styles.children
+      }, this.props.text), jsx("div", {
+        css: this.props.styles.children
       }, this.props.children));
     }
   }]);
@@ -49,7 +43,8 @@ export var Caption = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   return Caption;
 }(Component), _class2.propTypes = {
   text: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)])
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   text: void 0,
   children: void 0

package/es/reporting/components/Caption/styles.js

@@ -0,0 +1,12 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    content: {
+      margin: componentTheme.contentMargin
+    },
+    children: {
+      paddingTop: componentTheme.childrenPadding
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/Caption/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       borders = _ref.borders,
       colors = _ref.colors;
@@ -6,4 +6,6 @@ export default function generator(_ref) {
     contentMargin: spacing.small,
     childrenPadding: spacing.xSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/charts/Legend/index.js

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -5,25 +6,14 @@ 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 { PresentationContent } from '@instructure/ui-a11y-content';
-import classnames from 'classnames';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'gafaO',
-  template: function template(theme) {
-    return "\n\n.gafaO_fEOG{border:".concat(theme.containerBorderWidth || 'inherit', " solid ").concat(theme.containerBorderColor || 'inherit', "}\n\n.gafaO_dWcO{margin:0 calc(-1*").concat(theme.seriesContainerRowMargin || 'inherit', ")}\n\n.gafaO_czwp{align-items:center;flex-direction:row;margin:").concat(theme.seriesContainerMargin || 'inherit', "}\n\n.gafaO_fEOG .gafaO_czwp{display:flex}\n\n.gafaO_dWcO .gafaO_czwp{display:inline-flex;padding:0 ").concat(theme.seriesContainerRowMargin || 'inherit', "}\n\n.gafaO_crhW{display:flex;height:1.2rem;margin-right:").concat(theme.seriesSwatchMargin || 'inherit', ";width:1.2rem}\n\n.gafaO_fAPS{flex:1}\n\n.gafaO_eVVT{color:").concat(theme.seriesLabelColor || 'inherit', ";font-family:").concat(theme.seriesLabelFontFamily || 'inherit', ";font-size:").concat(theme.seriesLabelFontSize || 'inherit', ";white-space:nowrap}");
-  },
-  'containerColumn': 'gafaO_fEOG',
-  'containerRow': 'gafaO_dWcO',
-  'seriesContainer': 'gafaO_czwp',
-  'seriesSwatchContainer': 'gafaO_crhW',
-  'seriesSwatch': 'gafaO_fAPS',
-  'seriesLabel': 'gafaO_eVVT'
-};
-import theme from "./theme.js";
-export var Legend = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var Legend = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Legend, _Component);
 
   var _super = _createSuper(Legend);
@@ -35,27 +25,47 @@ export var Legend = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   }
 
   _createClass(Legend, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "renderSeries",
-    value: function renderSeries(series, index) {
-      return /*#__PURE__*/React.createElement("div", {
+    value: function renderSeries(series, index, styles) {
+      var customStyles = series.customStyles ? series.customStyles : {};
+      return jsx("div", {
         key: index,
-        className: styles.seriesContainer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.seriesSwatchContainer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classnames([styles.seriesSwatch, series.className])
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.seriesLabel
+        className: "seriesContainer",
+        css: styles.seriesContainer
+      }, jsx("div", {
+        css: styles.seriesSwatchContainer
+      }, jsx("div", {
+        css: _objectSpread(_objectSpread({}, styles.seriesSwatch), customStyles)
+      })), jsx("div", {
+        css: styles.seriesLabel
       }, series.label));
     }
   }, {
     key: "render",
     value: function render() {
-      var variant = this.props.variant;
-      var containerClass = variant === 'row' ? styles.containerRow : styles.containerColumn;
-      return /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("div", {
-        className: containerClass
-      }, this.props.series.map(this.renderSeries)));
+      var _this = this;
+
+      var _this$props = this.props,
+          variant = _this$props.variant,
+          series = _this$props.series,
+          styles = _this$props.styles;
+      var containerClass = variant === 'row' ? 'containerRow' : 'containerColumn';
+      return jsx(PresentationContent, null, jsx("div", {
+        className: containerClass,
+        css: styles.containerStyle
+      }, series.map(function (s, i) {
+        return _this.renderSeries(s, i, styles);
+      })));
     }
   }]);
 
@@ -64,9 +74,11 @@ export var Legend = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
 }(Component), _class2.propTypes = {
   series: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string.isRequired,
-    className: PropTypes.string.isRequired
+    customStyles: PropTypes.object.isRequired
   })),
-  variant: PropTypes.oneOf(['column', 'row'])
+  variant: PropTypes.oneOf(['column', 'row']),
+  makeStyles: PropTypes.func,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   series: [],
   variant: 'column'

package/es/reporting/components/charts/Legend/styles.js

@@ -0,0 +1,44 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var containerVariant = {
+    row: {
+      margin: "0 calc(-1 * ".concat(componentTheme.seriesContainerRowMargin, ")"),
+      '.seriesContainer': {
+        display: 'inline-flex',
+        padding: "0 ".concat(componentTheme.seriesContainerRowMargin)
+      }
+    },
+    column: {
+      border: "".concat(componentTheme.containerBorderWidth, " solid ").concat(componentTheme.containerBorderColor),
+      '.seriesContainer': {
+        display: 'flex'
+      }
+    }
+  };
+  return {
+    seriesContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      margin: componentTheme.seriesContainerMargin
+    },
+    containerStyle: _objectSpread({}, containerVariant[props.variant]),
+    seriesSwatchContainer: {
+      width: '1.2rem',
+      height: '1.2rem',
+      marginRight: componentTheme.seriesSwatchMargin,
+      display: 'flex'
+    },
+    seriesSwatch: {
+      flex: 1
+    },
+    seriesLabel: {
+      fontFamily: componentTheme.seriesLabelFontFamily,
+      fontSize: componentTheme.seriesLabelFontSize,
+      whiteSpace: 'nowrap',
+      color: componentTheme.seriesLabelColor
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/charts/Legend/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var borders = _ref.borders,
       spacing = _ref.spacing,
       colors = _ref.colors,
@@ -14,4 +14,6 @@ export default function generator(_ref) {
     seriesLabelFontSize: typography.fontSizeXSmall,
     seriesLabelColor: colors.textDarkest
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,6 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -12,7 +13,7 @@ import OutcomeList from '@instructure/outcomes-ui/es/containers/OutcomeList';
 import { MetricGroup } from '@instructure/ui-metric';
 import { Heading } from '@instructure/ui-heading';
 import { ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import Card from "../../../../common/components/shared/Card/index.js";
 import ExpandButton from "../../../../common/components/shared/ExpandButton/index.js";
@@ -24,34 +25,12 @@ import Caption from "../../Caption/index.js";
 import MetricsListItem from "../../MetricsListItem/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { liveRegion, withI18nSupport } from '@instructure/quiz-common';
-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'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref2 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref2 = jsx(Spinner, null);
 
-export var ItemAnalysisRow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+export var ItemAnalysisRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   _inherits(ItemAnalysisRow, _withI18nSupport);
 
   var _super = _createSuper(ItemAnalysisRow);
@@ -94,7 +73,7 @@ export var ItemAnalysisRow = (_dec = themeable(theme, styles), _dec(_class = (_t
         position: position,
         expanded: expanded
       });
-      return /*#__PURE__*/React.createElement(ExpandButton, {
+      return jsx(ExpandButton, {
         onClick: this.toggleExpanded,
         title: title,
         isExpanded: expanded,
@@ -108,73 +87,75 @@ export var ItemAnalysisRow = (_dec = themeable(theme, styles), _dec(_class = (_t
       var interactionType = this.props.itemAnalysis.interactionTypeName();
       var pointsPossible = this.props.itemAnalysis.pointsPossible;
       var separator = ' | ';
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.headerRow
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.headerText
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", {
+        css: this.props.styles.headerRow
+      }, jsx("div", {
+        css: this.props.styles.headerText
+      }, jsx(Heading, {
         level: "reset",
         as: "h3"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Question {position, number}', {
+      }, jsx(ScreenReaderContent, null, t('Question {position, number}', {
         position: position
-      })), interactionType, /*#__PURE__*/React.createElement(PresentationContent, null, separator), t('{pointsPossible, number} points possible', {
+      })), interactionType, jsx(PresentationContent, null, separator), t('{pointsPossible, number} points possible', {
         pointsPossible: pointsPossible
       }))), this.props.itemAnalysis.isPresent() && this.renderExpandButton());
     }
   }, {
     key: "renderStem",
     value: function renderStem() {
-      return /*#__PURE__*/React.createElement(RichContentRenderer, {
-        customStyles: styles.stem,
+      return jsx(RichContentRenderer, {
+        customStyles: this.props.styles.stem,
         content: this.props.itemAnalysis.itemBody
       });
     }
   }, {
     key: "defaultMetricsList",
     value: function defaultMetricsList() {
+      var _this2 = this;
+
       var mean = t.rich('{score}<0>/{possible, number} pts</0>', {
         0: function _(_ref) {
           var children = _ref.children;
-          return /*#__PURE__*/React.createElement("span", {
+          return 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.createElement(MetricGroup, null, /*#__PURE__*/React.createElement(MetricsListItem, {
+      return jsx(MetricGroup, null, jsx(MetricsListItem, {
         key: "difficultyIndex",
         renderLabel: t('Difficulty Index'),
         renderValue: this.props.itemAnalysis.difficultyIndex(this.locale),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/React.createElement(MetricsListItem, {
+      }), jsx(MetricsListItem, {
         key: "discriminationIndex",
         renderLabel: t('Discrimination Index'),
         renderValue: this.props.itemAnalysis.discriminationIndex(this.locale),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/React.createElement(MetricsListItem, {
+      }), jsx(MetricsListItem, {
         key: "rpb",
         renderLabel: t('RPB'),
         renderValue: this.props.itemAnalysis.pointBiserial(this.locale),
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
-      }), /*#__PURE__*/React.createElement(MetricsListItem, {
+      }), jsx(MetricsListItem, {
         key: "meanEarnedScore",
         renderLabel: t('Mean Earned Score'),
         renderValue: mean,
-        className: styles.metric,
+        css: this.props.styles.metric,
         isGroupChild: true
       }));
     }
   }, {
     key: "renderMetrics",
     value: function renderMetrics() {
-      var list = React.Children.count(this.props.children) === 0 ? this.defaultMetricsList() : /*#__PURE__*/React.createElement(MetricGroup, null, this.props.children);
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.metrics
+      var list = React.Children.count(this.props.children) === 0 ? this.defaultMetricsList() : jsx(MetricGroup, null, this.props.children);
+      return jsx("div", {
+        css: this.props.styles.metrics
       }, list);
     }
   }, {
@@ -184,11 +165,11 @@ export var ItemAnalysisRow = (_dec = themeable(theme, styles), _dec(_class = (_t
         return;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.answerTableSection
-      }, /*#__PURE__*/React.createElement(Caption, {
+      return jsx("div", {
+        css: this.props.styles.answerTableSection
+      }, jsx(Caption, {
         text: t('Answer Frequency Summary')
-      }, /*#__PURE__*/React.createElement(AnswerFrequencySummary, {
+      }, jsx(AnswerFrequencySummary, {
         itemAnalysis: this.props.itemAnalysis
       })));
     }
@@ -197,26 +178,26 @@ export var ItemAnalysisRow = (_dec = themeable(theme, styles), _dec(_class = (_t
     value: function renderAnswerAnalysis() {
       if (this.props.expanded) {
         var quintile = this.props.itemAnalysis.quintile();
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.answerAnalysis
-        }, this.renderAnswerAnalysisChart(), /*#__PURE__*/React.createElement("div", {
-          className: styles.answerDistributionSection,
+        return jsx("div", {
+          css: this.props.styles.answerAnalysis
+        }, this.renderAnswerAnalysisChart(), jsx("div", {
+          css: this.props.styles.answerDistributionSection,
           "data-automation": "sdk-reporting-answer-distribution"
-        }, /*#__PURE__*/React.createElement(Caption, {
+        }, jsx(Caption, {
           text: t('Performance by Quintile')
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.answerDistribution
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.answerDistributionChart
-        }, /*#__PURE__*/React.createElement(QuintileDistribution, {
+        }, jsx("div", {
+          css: this.props.styles.answerDistribution
+        }, jsx("div", {
+          css: this.props.styles.answerDistributionChart
+        }, jsx(QuintileDistribution, {
           visualDistribution: quintile,
           animateDelay: this.props.animateDelay,
           animateDuration: this.props.animateDuration
-        })), /*#__PURE__*/React.createElement("div", {
-          className: styles.answerDistributionLegend
-        }, /*#__PURE__*/React.createElement(Legend, {
+        })), jsx("div", {
+          css: this.props.styles.answerDistributionLegend
+        }, jsx(Legend, {
           series: [{
-            className: styles.answerDistributionSwatch,
+            customStyles: this.props.styles.answerDistributionSwatch,
             label: t('Number of Students')
           }]
         }))))));
@@ -232,11 +213,11 @@ export var ItemAnalysisRow = (_dec = themeable(theme, styles), _dec(_class = (_t
           outcomesToken = _this$props3.outcomesToken;
 
       if (expanded && outcomesEndpoint && itemAnalysis.outcomeAlignmentSetGuid) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.outcomeAlignments
-        }, /*#__PURE__*/React.createElement(Caption, {
+        return jsx("div", {
+          css: this.props.styles.outcomeAlignments
+        }, jsx(Caption, {
           text: t('Outcomes')
-        }, /*#__PURE__*/React.createElement(OutcomeList, {
+        }, jsx(OutcomeList, {
           artifactType: "quizzes.item",
           artifactId: itemAnalysis.itemId,
           alignmentSetId: itemAnalysis.outcomeAlignmentSetGuid,
@@ -251,8 +232,8 @@ export var ItemAnalysisRow = (_dec = themeable(theme, styles), _dec(_class = (_t
   }, {
     key: "renderNotFound",
     value: function renderNotFound() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.emptyText
+      return jsx("div", {
+        css: this.props.styles.emptyText
       }, t('No submissions yet'));
     }
   }, {
@@ -263,11 +244,11 @@ export var ItemAnalysisRow = (_dec = themeable(theme, styles), _dec(_class = (_t
       }
 
       var present = this.props.itemAnalysis.isPresent();
-      return /*#__PURE__*/React.createElement(Card, {
+      return jsx(Card, {
         key: this.props.itemId,
-        className: styles.itemAnalysisRow
-      }, this.renderHeader(), /*#__PURE__*/React.createElement("div", {
-        className: styles.metricsRow
+        css: this.props.styles.itemAnalysisRow
+      }, this.renderHeader(), jsx("div", {
+        css: this.props.styles.metricsRow
       }, this.renderStem(), present ? this.renderMetrics() : this.renderNotFound()), present && this.renderAnswerAnalysis(), this.renderOutcomeAlignments());
     }
   }]);
@@ -286,7 +267,8 @@ export var ItemAnalysisRow = (_dec = themeable(theme, styles), _dec(_class = (_t
   outcomesToken: PropTypes.string,
   screenreaderNotification: PropTypes.func.isRequired,
   children: PropTypes.arrayOf(PropTypes.node),
-  locale: PropTypes.string
+  locale: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: void 0,
   animateDuration: void 0,

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

@@ -0,0 +1,100 @@
+import _defineProperty from "@babel/runtime/helpers/esm/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: _defineProperty({
+      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: _defineProperty({
+      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'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/itemAnalysis/ItemAnalysisRow/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -22,4 +22,6 @@ export default function generator(_ref) {
     answerDistributionSwatchColor: colors.electric,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
-}
+};
+
+export default generateComponentTheme;