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

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/MatchingTypeTable/presenter.js

@@ -1,45 +1,33 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 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 { Flex } from '@instructure/ui-flex';
-var styles = {
-  componentId: 'bGeZS',
-  template: function template(theme) {
-    return "\n\n.bGeZS_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.bGeZS_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.bGeZS_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.bGeZS_EKAb svg{fill:#fff}\n\n.bGeZS_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.bGeZS_fvqY{border-radius:4px 4px 4px 4px;border-width:2px 2px 2px 2px}\n\n.bGeZS_tnta>span>span:nth-child(2){min-width:46px;padding:12px 12px 12px 12px}\n\n.bGeZS_bwoZ{max-width:100%;width:calc(25% + 350px)}\n\n.bGeZS_SVtU table tbody tr th{font-weight:400}");
-  },
-  'tableWrapper': 'bGeZS_rMrG',
-  'iconWrapper': 'bGeZS_cvRx',
-  'iconCorrect': 'bGeZS_EKAb',
-  'correctRowBorder': 'bGeZS_tnta',
-  'correctRowBorderRadius': 'bGeZS_fvqY',
-  'tableHalfWidth': 'bGeZS_bwoZ',
-  'tableContainer': 'bGeZS_SVtU'
-};
+import generateStyle from "./styles.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Table } from '@instructure/ui-table';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import PropTypes from 'prop-types';
 import { IconCheckSolid } from '@instructure/ui-icons';
 import { matchingTypeAnswerSummaryPropType } from "../../../propTypes.js";
 import MatchingTypeOrderer from "../utils/matchingTypeOrderer.js";
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
-import classNames from 'classnames';
-import theme from "./theme.js";
+import generateComponentTheme from "./theme.js";
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 
-var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
+var _ref = jsx(IconCheckSolid, null);
 
-var _ref2 = /*#__PURE__*/React.createElement(Flex.Item, {
+var _ref2 = jsx(Flex.Item, {
   width: "46px",
   textAlign: "center"
 });
 
-export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var MatchingTypeTable = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(MatchingTypeTable, _Component);
 
   var _super = _createSuper(MatchingTypeTable);
@@ -56,9 +44,8 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderIcon = function () {
-      var classes = classNames(styles.iconWrapper, styles.iconCorrect);
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes
+      return jsx("div", {
+        css: [_this.props.styles.iconWrapper, _this.props.styles.iconCorrect]
       }, _ref);
     };
 
@@ -71,16 +58,16 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
       var exampleAnswers = questions[questionKeys[0]].answers;
       var answer = exampleAnswers[key];
       var answerNumberHeaderId = "answer-number-header-".concat(key, "-").concat(itemId);
-      return /*#__PURE__*/React.createElement(Table.ColHeader, {
+      return jsx(Table.ColHeader, {
         id: answerNumberHeaderId,
         key: answerNumberHeaderId,
         themeOverride: {
           padding: '0 0 15px 0'
         },
         textAlign: "center"
-      }, /*#__PURE__*/React.createElement(Flex, {
+      }, jsx(Flex, {
         direction: "row"
-      }, _ref2, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, _ref2, jsx(Flex.Item, {
         shouldShrink: true,
         shouldGrow: true,
         textAlign: "center"
@@ -92,8 +79,6 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
     };
 
     _this.renderCell = function (questionKey, answerKey) {
-      var _classNames;
-
       var _this$props2 = _this.props,
           answerSummary = _this$props2.answerSummary,
           itemId = _this$props2.itemId;
@@ -103,24 +88,24 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
       var correct = answer.correct,
           count = answer.count;
       var answerNumberCellId = "answer-number-cell-".concat(questionKey, "-").concat(answerKey, "-").concat(itemId);
-      var containerClassNames = classNames((_classNames = {}, _defineProperty(_classNames, styles.correctRowBorder, answer.correct), _defineProperty(_classNames, styles.correctRowBorderRadius, answer.correct), _classNames));
-      return /*#__PURE__*/React.createElement(Table.Cell, {
+      var answerRowStyles = answer.correct ? _this.props.styles.correctAnswerRow : {};
+      return jsx(Table.Cell, {
         id: answerNumberCellId,
         key: answerNumberCellId,
         themeOverride: {
           padding: '0 0 0 0'
         }
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, correct ? "".concat(t('Correct answer'), ": ").concat(count) : count), /*#__PURE__*/React.createElement("div", {
+      }, jsx(ScreenReaderContent, null, correct ? "".concat(t('Correct answer'), ": ").concat(count) : count), jsx("div", {
         "aria-hidden": "true",
-        className: containerClassNames
-      }, /*#__PURE__*/React.createElement(Flex, {
+        css: answerRowStyles
+      }, jsx(Flex, {
         direction: "row",
         alignItems: "center"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         width: "46px",
         textAlign: "center",
         align: "stretch"
-      }, correct && _this.renderIcon()), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, correct && _this.renderIcon()), jsx(Flex.Item, {
         shouldShrink: true,
         shouldGrow: true,
         textAlign: "center"
@@ -134,9 +119,9 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
       var headerCells = orderedAnswerKeys.map(_this.renderHeaderCell);
       var categoryHeaderId = "category-header-".concat(itemId);
       var rowKey = "header-row-".concat(itemId);
-      return /*#__PURE__*/React.createElement(Table.Row, {
+      return jsx(Table.Row, {
         key: rowKey
-      }, /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx(Table.ColHeader, {
         id: categoryHeaderId,
         key: categoryHeaderId,
         themeOverride: {
@@ -161,9 +146,9 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
       var rowKey = "row-".concat(orderedQuestionKey, "-").concat(itemId);
       var extractedQuestionBody = extractTextFromHtml(question.body);
       var questionBody = extractedQuestionBody.trim().length > 0 ? extractedQuestionBody : firstColumnName;
-      return /*#__PURE__*/React.createElement(Table.Row, {
+      return jsx(Table.Row, {
         key: rowKey
-      }, /*#__PURE__*/React.createElement(Table.RowHeader, {
+      }, jsx(Table.RowHeader, {
         id: questionRowHeaderId,
         key: questionRowHeaderId,
         themeOverride: {
@@ -178,14 +163,13 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
       var questionKeys = Object.keys(questions);
       var exampleAnswers = questions[questionKeys[0]].answers;
       var answerKeys = Object.keys(exampleAnswers).sort();
-      var tableHalfWidth = answerKeys.length <= 3;
       var orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
       var orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.tableContainer, _defineProperty({}, styles.tableHalfWidth, tableHalfWidth))
-      }, /*#__PURE__*/React.createElement(Table, {
+      return jsx("div", {
+        css: _this.props.styles.tableContainer
+      }, jsx(Table, {
         caption: t('Answer Frequency Summary')
-      }, /*#__PURE__*/React.createElement(Table.Head, null, _this.renderHeaderRow(orderedAnswerKeys)), /*#__PURE__*/React.createElement(Table.Body, null, orderedQuestionKeys.map(function (orderedQuestionKey) {
+      }, jsx(Table.Head, null, _this.renderHeaderRow(orderedAnswerKeys)), jsx(Table.Body, null, orderedQuestionKeys.map(function (orderedQuestionKey) {
         return _this.renderRow(orderedQuestionKey, orderedAnswerKeys);
       }))));
     };
@@ -193,9 +177,23 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
     return _this;
   }
 
+  _createClass(MatchingTypeTable, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }]);
+
   return MatchingTypeTable;
 }(Component), _class2.propTypes = {
   itemId: PropTypes.number.isRequired,
   answerSummary: matchingTypeAnswerSummaryPropType.isRequired,
-  firstColumnName: PropTypes.string.isRequired
-}.isRequired, _temp)) || _class);
+  firstColumnName: PropTypes.string.isRequired,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/MatchingTypeTable/styles.js

@@ -0,0 +1,52 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var answerSummary = props.answerSummary;
+  var questions = answerSummary.questions;
+  var questionKeys = Object.keys(questions);
+  var exampleAnswers = questions[questionKeys[0]].answers;
+  var answerKeys = Object.keys(exampleAnswers).sort();
+  var tableHalfWidth = answerKeys.length <= 3;
+  return {
+    tableWrapper: {
+      display: 'flex',
+      flexBasis: '100%',
+      flexDirection: 'column',
+      paddingBottom: componentTheme.tableBottomPadding
+    },
+    iconWrapper: {
+      display: 'flex',
+      height: '100%',
+      minHeight: '47px',
+      width: '46px',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    iconCorrect: {
+      backgroundColor: componentTheme.colorGreen,
+      'svg': {
+        fill: 'white'
+      }
+    },
+    correctAnswerRow: {
+      borderColor: componentTheme.colorGreen,
+      borderStyle: 'solid',
+      '> span > span:nth-of-type(2)': {
+        minWidth: '46px',
+        padding: '12px 12px 12px 12px'
+      },
+      borderWidth: '2px 2px 2px 2px',
+      borderRadius: '4px 4px 4px 4px'
+    },
+    tableContainer: _objectSpread({
+      'table tbody tr th': {
+        fontWeight: '400'
+      }
+    }, tableHalfWidth && {
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%'
+    })
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/MatchingTypeTable/theme.js

@@ -1,7 +1,9 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     tableBottomPadding: spacing.medium,
     colorGreen: '#0b874b'
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/NumericType/ChoiceTypeWithInfo/presenter.js

@@ -30,11 +30,11 @@ export var ChoiceTypeWithInfo = /*#__PURE__*/function (_Component) {
           choices = _this$props.choices,
           index = _this$props.index;
       var tableId = "".concat(itemId, "_").concat(index, "_choiceGroup");
-      var tableContainerSizeClass = '';
+      var tableContainerSizeStyles = {};
       return /*#__PURE__*/React.createElement(ChoiceTypeTable, {
         itemId: tableId,
         choices: choices,
-        tableContainerSizeClass: tableContainerSizeClass
+        tableContainerStyles: tableContainerSizeStyles
       });
     };
 

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/NumericType/presenter.js

@@ -42,11 +42,11 @@ export var NumericType = (_dec = withStyle(generateStyle, generateComponentTheme
           answerSummary = _this$props.answerSummary;
       var incorrect_answer_choices = answerSummary.requirements.incorrect_answer_choices;
       var tableId = "".concat(itemId, "_incorrect_choices");
-      var tableContainerSizeClass = '';
+      var tableContainerStyles = {};
       return jsx(ChoiceTypeTable, {
         itemId: tableId,
         choices: incorrect_answer_choices,
-        tableContainerSizeClass: tableContainerSizeClass
+        tableContainerStyles: tableContainerStyles
       });
     };
 

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/ChoiceGroupTypeTable/presenter.js

@@ -78,11 +78,11 @@ export var ChoiceGroupTypeTable = (_dec = withStyle(generateStyle, generateCompo
           index = _this$props.index;
       var choices = blank.choices;
       var tableId = "".concat(itemId, "_").concat(index, "_choiceGroup");
-      var tableContainerSizeClass = '';
+      var tableContainerStyles = {};
       return jsx(ChoiceTypeTable, {
         itemId: tableId,
         choices: choices,
-        tableContainerSizeClass: tableContainerSizeClass
+        tableContainerStyles: tableContainerStyles
       });
     };
 

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/presenter.js

@@ -1,24 +1,19 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
+/* eslint-disable-next-line no-unused-vars */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'DjkQc',
-  template: function template(theme) {
-    return "\n\n.DjkQc_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.DjkQc_ellB{margin-top:".concat(theme.marginOfTables || 'inherit', "}");
-  },
-  'tableContainer': 'DjkQc_SVtU',
-  'aggregateContainer': 'DjkQc_ellB'
-};
-import classNames from 'classnames';
-import theme from "./theme.js";
-export var AfsPartsContainer = (_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 AfsPartsContainer = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AfsPartsContainer, _Component);
 
   var _super = _createSuper(AfsPartsContainer);
@@ -35,34 +30,45 @@ export var AfsPartsContainer = (_dec = themeable(theme, styles), _dec(_class = (
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderAggregationTable = function () {
-      var _this$props = _this.props,
-          afsTable = _this$props.afsTable,
-          aggregationTable = _this$props.aggregationTable;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.tableContainer, _defineProperty({}, styles.aggregateContainer, afsTable))
-      }, aggregationTable);
+      return jsx("div", {
+        css: _this.props.styles.tableContainer
+      }, _this.props.aggregationTable);
     };
 
     _this.renderAfsTable = function () {
       var afsTable = _this.props.afsTable;
-      return /*#__PURE__*/React.createElement("div", null, afsTable);
+      return jsx("div", null, afsTable);
     };
 
     _this.render = function () {
-      var _this$props2 = _this.props,
-          afsTable = _this$props2.afsTable,
-          aggregationTable = _this$props2.aggregationTable;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
+      var _this$props = _this.props,
+          afsTable = _this$props.afsTable,
+          aggregationTable = _this$props.aggregationTable;
+      return jsx(React.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
     };
 
     return _this;
   }
 
+  _createClass(AfsPartsContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }]);
+
   return AfsPartsContainer;
 }(Component), _class2.propTypes = {
   afsTable: PropTypes.node,
-  aggregationTable: PropTypes.node
-}.isRequired, _class2.defaultProps = {
+  aggregationTable: PropTypes.node,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
+}, _class2.defaultProps = {
   afsTable: null,
   aggregationTable: null
 }, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/styles.js

@@ -0,0 +1,14 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  return {
+    tableContainer: _objectSpread({
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%'
+    }, props.afsTable && {
+      marginTop: componentTheme.marginOfTables
+    })
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AfsPartsContainer/theme.js

@@ -1,6 +1,8 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     marginOfTables: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/presenter.js

@@ -4,51 +4,32 @@ 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 t from '@instructure/quiz-i18n/es/format-message';
 import { Table } from '@instructure/ui-table';
 import { onlyAggregatePropType } from "../../../propTypes.js";
 import PropTypes from 'prop-types';
 import { IconCheckSolid, IconXSolid, IconNoSolid, IconGradebookSolid } from '@instructure/ui-icons';
-import { themeable } from '@instructure/ui-themeable';
-import theme from "./theme.js";
-var styles = {
-  componentId: 'fMmrG',
-  template: function template(theme) {
-    return "\n\n.fMmrG_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.fMmrG_fPIL{min-width:500px}\n\n.fMmrG_fPIL table{border-collapse:separate;border-spacing:0 12px}\n\n.fMmrG_fPIL thead th{border-color:".concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.fMmrG_fPIL table tbody tr td{border-style:solid;border-width:2px 0 2px 0;width:33.33%}\n\n.fMmrG_fPIL table tbody tr th:first-child{border-radius:4px 0 0 4px;border-style:solid;border-width:2px 0 2px 2px;font-weight:400}\n\n.fMmrG_fPIL table tbody tr td:last-child{border-radius:0 4px 4px 0;border-style:solid;border-width:2px 2px 2px 0}\n\n.fMmrG_dzqP table tbody tr:first-child td,.fMmrG_dzqP table tbody tr:first-child th{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fMmrG_fZpZ table tbody tr:first-child td,.fMmrG_fZpZ table tbody tr:first-child th{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fMmrG_fZpZ table tbody tr:nth-child(2) td,.fMmrG_fZpZ table tbody tr:nth-child(2) th{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fMmrG_dgTJ table tbody tr:first-child td,.fMmrG_dgTJ table tbody tr:first-child th{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fMmrG_dgTJ table tbody tr:nth-child(2) td,.fMmrG_dgTJ table tbody tr:nth-child(2) th{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fMmrG_dgTJ table tbody tr:nth-child(3) td,.fMmrG_dgTJ table tbody tr:nth-child(3) th{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fMmrG_bYLj table tbody tr:first-child td,.fMmrG_bYLj table tbody tr:first-child th{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fMmrG_bYLj table tbody tr:nth-child(2) td,.fMmrG_bYLj table tbody tr:nth-child(2) th{border-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fMmrG_bYLj table tbody tr:nth-child(3) td,.fMmrG_bYLj table tbody tr:nth-child(3) th{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fMmrG_bYLj table tbody tr:nth-child(4) td,.fMmrG_bYLj table tbody tr:nth-child(4) th{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fMmrG_bvau{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fMmrG_cxOH{background-color:").concat(theme.colorRed || 'inherit', "}\n\n.fMmrG_dsqS{background-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fMmrG_eKcq{background-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fMmrG_euQM{padding:12px 0 12px 10px}\n\n.fMmrG_fuuc{padding-left:45px}\n\n.fMmrG_vDgC svg{fill:#fff}\n\n.fMmrG_fHMm{border-color:").concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}");
-  },
-  'iconWrapper': 'fMmrG_cvRx',
-  'collapsingTable': 'fMmrG_fPIL',
-  'onlyNoanswer': 'fMmrG_dzqP',
-  'correctIncorrect': 'fMmrG_fZpZ',
-  'correctIncorrectNoanswer': 'fMmrG_dgTJ',
-  'correctIncorrectNoanswerGraded': 'fMmrG_bYLj',
-  'correctBackground': 'fMmrG_bvau',
-  'incorrectBackground': 'fMmrG_cxOH',
-  'gradedBackground': 'fMmrG_dsqS',
-  'noAnswerBackground': 'fMmrG_eKcq',
-  'labelWrapper': 'fMmrG_euQM',
-  'firstHeaderCell': 'fMmrG_fuuc',
-  'iconWhite': 'fMmrG_vDgC',
-  'headerCell': 'fMmrG_fHMm'
-};
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "./theme.js";
+import generateStyle from "./styles.js";
 import { Flex } from '@instructure/ui-flex';
-import classNames from 'classnames';
 import { Text } from '@instructure/ui-text';
 var noAnswerKey = 'noAnswer';
 var incorrectKey = 'incorrect';
 var correctKey = 'correct';
 var gradedKey = 'graded';
 
-var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
+var _ref = jsx(IconCheckSolid, null);
 
-var _ref2 = /*#__PURE__*/React.createElement(IconGradebookSolid, null);
+var _ref2 = jsx(IconGradebookSolid, null);
 
-var _ref3 = /*#__PURE__*/React.createElement(IconXSolid, null);
+var _ref3 = jsx(IconXSolid, null);
 
-var _ref4 = /*#__PURE__*/React.createElement(IconNoSolid, null);
+var _ref4 = jsx(IconNoSolid, null);
 
-export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var AggregationTable = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AggregationTable, _Component);
 
   var _super = _createSuper(AggregationTable);
@@ -70,52 +51,54 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
       var answerHeaderId = "answer-frequency-summary-aggregate-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-aggregate-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-aggregate-percentage-".concat(itemId);
-      return /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+      return jsx(Table.Head, null, jsx(Table.Row, null, jsx(Table.ColHeader, {
         id: answerHeaderId
-      }, /*#__PURE__*/React.createElement("span", {
-        className: classNames(styles.firstHeaderCell)
-      }, t('Result'))), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx("span", {
+        css: _this.props.styles.firstHeaderCell
+      }, t('Result'))), jsx(Table.ColHeader, {
         id: respondentsHeaderId,
         textAlign: "center"
-      }, t('Respondents')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Respondents')), jsx(Table.ColHeader, {
         id: percentageHeaderId,
         textAlign: "center"
       }, t('Percentage'))));
     };
 
     _this.renderRow = function (key, icon, label, count, percentage) {
-      var backgroundColor = styles["".concat(key, "Background")];
+      var backgroundColor = _this.props.styles["".concat(key, "Background")];
+
       var concatenatedPercentage = "".concat(percentage, "%");
-      return /*#__PURE__*/React.createElement(Table.Row, {
+      return jsx(Table.Row, {
         key: key
-      }, /*#__PURE__*/React.createElement(Table.RowHeader, {
+      }, jsx(Table.RowHeader, {
         themeOverride: {
           padding: '0px'
         }
-      }, /*#__PURE__*/React.createElement(Flex, {
+      }, jsx(Flex, {
         direction: "row",
         alignItems: "center"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         width: "46px",
         textAlign: "center",
         align: "stretch"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.iconWrapper, styles.iconWhite, backgroundColor)
-      }, icon)), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx("div", {
+        css: [_this.props.styles.iconWrapper, backgroundColor]
+      }, icon)), jsx(Flex.Item, {
         shouldShrink: true
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.labelWrapper)
-      }, /*#__PURE__*/React.createElement(Text, null, label))))), /*#__PURE__*/React.createElement(Table.Cell, {
+      }, jsx("div", {
+        "data-testid": "label-wrapper",
+        css: _this.props.styles.labelWrapper
+      }, jsx(Text, null, label))))), jsx(Table.Cell, {
         themeOverride: {
           padding: '0px'
         },
         textAlign: "center"
-      }, /*#__PURE__*/React.createElement(Text, null, count)), /*#__PURE__*/React.createElement(Table.Cell, {
+      }, jsx(Text, null, count)), jsx(Table.Cell, {
         themeOverride: {
           padding: '0px'
         },
         textAlign: "center"
-      }, /*#__PURE__*/React.createElement(Text, null, concatenatedPercentage)));
+      }, jsx(Text, null, concatenatedPercentage)));
     };
 
     _this.gradedExist = function () {
@@ -192,11 +175,12 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
 
     _this.render = function () {
       var popover = !_this.noAnswerExist();
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.collapsingTable, styles[_this.getColorProfile()])
-      }, /*#__PURE__*/React.createElement(Table, {
+      var tableStyles = [_this.props.styles.collapsingTable, _this.props.styles[_this.getColorProfile()]];
+      return jsx("div", {
+        css: tableStyles
+      }, jsx(Table, {
         caption: t('Answer Frequency Summary Aggregates')
-      }, _this.renderHeaderRow(popover), /*#__PURE__*/React.createElement(Table.Body, null, _this.correctExist() && _this.renderCorrect(), _this.gradedExist() && _this.renderGraded(), _this.incorrectExist() && _this.renderIncorrect(), _this.noAnswerExist() && _this.renderNoAnswer())));
+      }, _this.renderHeaderRow(popover), jsx(Table.Body, null, _this.correctExist() && _this.renderCorrect(), _this.gradedExist() && _this.renderGraded(), _this.incorrectExist() && _this.renderIncorrect(), _this.noAnswerExist() && _this.renderNoAnswer())));
     };
 
     return _this;
@@ -205,5 +189,6 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
   return AggregationTable;
 }(Component), _class2.propTypes = {
   itemId: PropTypes.number.isRequired,
-  answerSummary: onlyAggregatePropType
-}.isRequired, _temp)) || _class);
+  answerSummary: onlyAggregatePropType.isRequired,
+  styles: PropTypes.object
+}, _temp)) || _class);