@instructure/quiz-core 20.11.3-rc.18 → 20.11.3-rc.19

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/ChoiceTypeTableRow/presenter.js

@@ -1,36 +1,27 @@
-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 { Table } from '@instructure/ui-table';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
-import theme from "./theme.js";
-var styles = {
-  componentId: 'cInnW',
-  template: function template(theme) {
-    return "\n\n.cInnW_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.cInnW_EKAb{background-color:".concat(theme.colorGreen || 'inherit', ";border-radius:4px 0 0 4px}\n\n.cInnW_EKAb svg{fill:#fff}\n\n.cInnW_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0;padding:").concat(theme.cellPadding || 'inherit', "}\n\n.cInnW_fvqY{border-radius:0 4px 4px 0;border-width:2px 2px 2px 0}");
-  },
-  'iconWrapper': 'cInnW_cvRx',
-  'iconCorrect': 'cInnW_EKAb',
-  'correctRowBorder': 'cInnW_tnta',
-  'correctRowBorderRadius': 'cInnW_fvqY'
-};
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "./theme.js";
+import generateStyle from "./styles.js";
 import PropTypes from 'prop-types';
 import { IconXSolid, IconCheckSolid } from '@instructure/ui-icons';
-import classNames from 'classnames';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
 import t from '@instructure/quiz-i18n/es/format-message';
 
-var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
+var _ref = jsx(IconCheckSolid, null);
 
-var _ref2 = /*#__PURE__*/React.createElement(IconXSolid, null);
+var _ref2 = jsx(IconXSolid, null);
 
-export var ChoiceTypeTableRow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var ChoiceTypeTableRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ChoiceTypeTableRow, _Component);
 
   var _super = _createSuper(ChoiceTypeTableRow);
@@ -46,26 +37,21 @@ export var ChoiceTypeTableRow = (_dec = themeable(theme, styles), _dec(_class =
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _this.renderIcon = function (correct) {
-      var className = classNames(styles.iconWrapper, _defineProperty({}, styles.iconCorrect, correct));
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, correct ? _ref : _ref2);
+    _this.renderIcon = function () {
+      return jsx("div", {
+        css: _this.props.styles.iconWrapper
+      }, _this.props.choice.correct ? _ref : _ref2);
     };
 
-    _this.renderMiddleCell = function (correct, content) {
-      var className = classNames(_defineProperty({}, styles.correctRowBorder, correct));
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
+    _this.renderMiddleCell = function (content) {
+      return jsx("div", {
+        css: _this.props.styles.correctRowBorder
       }, content);
     };
 
-    _this.renderLastCell = function (correct, content) {
-      var _classNames3;
-
-      var className = classNames((_classNames3 = {}, _defineProperty(_classNames3, styles.correctRowBorder, correct), _defineProperty(_classNames3, styles.correctRowBorderRadius, correct), _classNames3));
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
+    _this.renderLastCell = function (content) {
+      return jsx("div", {
+        css: _this.props.styles.lastRowBorder
       }, content);
     };
 
@@ -82,32 +68,44 @@ export var ChoiceTypeTableRow = (_dec = themeable(theme, styles), _dec(_class =
     _this.render = function () {
       var correct = _this.props.choice.correct;
       var choiceBody = _this.props.choice.body;
-      var cellPadding = correct ? '0' : _this.theme.cellPadding;
-      return /*#__PURE__*/React.createElement(Table.Row, {
+      var cellPadding = correct ? '0' : _this.props.styles.cellPadding;
+      return jsx(Table.Row, {
         key: _this.props.choiceIndex
-      }, /*#__PURE__*/React.createElement(Table.Cell, {
+      }, jsx(Table.Cell, {
         themeOverride: {
           padding: '0px'
         }
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, _this.answerLabel(correct)), _this.renderIcon(correct)), /*#__PURE__*/React.createElement(Table.RowHeader, {
+      }, jsx(ScreenReaderContent, null, _this.answerLabel(correct)), _this.renderIcon()), jsx(Table.RowHeader, {
         themeOverride: {
           padding: cellPadding
         }
-      }, _this.renderMiddleCell(correct, _this.extractChoiceText(choiceBody, correct))), /*#__PURE__*/React.createElement(Table.Cell, {
+      }, _this.renderMiddleCell(_this.extractChoiceText(choiceBody, correct))), jsx(Table.Cell, {
         themeOverride: {
           padding: cellPadding
         }
-      }, _this.renderMiddleCell(correct, _this.props.choice.count)), /*#__PURE__*/React.createElement(Table.Cell, {
+      }, _this.renderMiddleCell(_this.props.choice.count)), jsx(Table.Cell, {
         themeOverride: {
           padding: cellPadding
         },
         textAlign: "center"
-      }, _this.renderLastCell(correct, "".concat(_this.props.choice.percentage, "%"))));
+      }, _this.renderLastCell("".concat(_this.props.choice.percentage, "%"))));
     };
 
     return _this;
   }
 
+  _createClass(ChoiceTypeTableRow, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }]);
+
   return ChoiceTypeTableRow;
 }(Component), _class2.displayName = 'Row', _class2.propTypes = {
   choice: PropTypes.shape({
@@ -115,6 +113,8 @@ export var ChoiceTypeTableRow = (_dec = themeable(theme, styles), _dec(_class =
     correct: PropTypes.bool,
     count: PropTypes.number,
     percentage: PropTypes.number
-  }),
-  choiceIndex: PropTypes.number
-}.isRequired, _temp)) || _class);
+  }).isRequired,
+  choiceIndex: PropTypes.number.isRequired,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/ChoiceTypeTableRow/styles.js

@@ -0,0 +1,41 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var correctRowBorderStyles = {
+    borderColor: componentTheme.colorGreen,
+    borderWidth: '2px 0',
+    borderStyle: 'solid',
+    padding: componentTheme.cellPadding
+  };
+  return {
+    iconWrapper: _objectSpread({
+      display: 'flex',
+      height: '48px',
+      width: '46px',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }, props.choice.correct && {
+      backgroundColor: componentTheme.colorGreen,
+      borderRadius: '4px 0 0 4px',
+      'svg': {
+        fill: 'white'
+      }
+    }),
+    correctRowBorder: _objectSpread({
+      borderWidth: '0'
+    }, props.choice.correct && correctRowBorderStyles),
+    correctRowBorderRadius: {
+      borderWidth: '2px 2px 2px 0',
+      borderRadius: '0 4px 4px 0'
+    },
+    lastRowBorder: _objectSpread({
+      borderWidth: '0'
+    }, props.choice.correct && _objectSpread(_objectSpread({}, correctRowBorderStyles), {}, {
+      borderWidth: '2px 2px 2px 0',
+      borderRadius: '0 4px 4px 0'
+    })),
+    cellPadding: componentTheme.cellPadding
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/ChoiceTypeTableRow/theme.js

@@ -1,6 +1,9 @@
-export default function generator() {
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var colors = _ref.colors;
   return {
-    colorGreen: '#0b874b',
+    colorGreen: colors.shamrock,
     cellPadding: '0.75rem 0.75rem'
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -31,7 +31,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
     correctAnswerRow: {
       borderColor: componentTheme.colorGreen,
       borderStyle: 'solid',
-      '> span > span:nth-child(2)': {
+      '> span > span:nth-of-type(2)': {
         minWidth: '46px',
         padding: '12px 12px 12px 12px'
       },

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

@@ -64,8 +64,8 @@ export var AfsPartsContainer = (_dec = withStyle(generateStyle, generateComponen
 
   return AfsPartsContainer;
 }(Component), _class2.propTypes = {
-  afsTable: PropTypes.node.isRequired,
-  aggregationTable: PropTypes.node.isRequired,
+  afsTable: PropTypes.node,
+  aggregationTable: PropTypes.node,
   styles: PropTypes.object,
   makeStyles: PropTypes.func
 }, _class2.defaultProps = {

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);

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

@@ -0,0 +1,141 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    iconWrapper: {
+      display: 'flex',
+      height: '100%',
+      minHeight: '47px',
+      width: '46px',
+      justifyContent: 'center',
+      alignItems: 'center',
+      'svg': {
+        fill: 'white'
+      }
+    },
+    collapsingTable: {
+      minWidth: '500px',
+      'table': {
+        borderCollapse: 'separate',
+        borderSpacing: '0 12px'
+      },
+      'thead th': {
+        borderWidth: '0 0 1px 0',
+        borderStyle: 'solid',
+        borderColor: componentTheme.colorHeaderBottomBorder
+      },
+      'table tbody tr td': {
+        width: '33.33%',
+        borderStyle: 'solid',
+        borderWidth: '2px 0 2px 0'
+      },
+      'table tbody tr th:first-of-type': {
+        borderStyle: 'solid',
+        borderRadius: '4px 0 0 4px',
+        borderWidth: '2px 0 2px 2px',
+        fontWeight: '400'
+      },
+      'table tbody tr td:last-child': {
+        borderStyle: 'solid',
+        borderWidth: '2px 2px 2px 0',
+        borderRadius: '0 4px 4px 0'
+      }
+    },
+    onlyNoanswer: {
+      'tbody tr:nth-of-type(1) td': {
+        borderColor: componentTheme.colorGrey
+      },
+      'table tbody tr:nth-of-type(1) th': {
+        borderColor: componentTheme.colorGrey
+      }
+    },
+    correctIncorrect: {
+      'table tbody tr:nth-of-type(1) td': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(1) th': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(2) td': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(2) th': {
+        borderColor: componentTheme.colorRed
+      }
+    },
+    correctIncorrectNoanswer: {
+      'table tbody tr:nth-of-type(1) td': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(1) th': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(2) td': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(2) th': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(3) td': {
+        borderColor: componentTheme.colorGrey
+      },
+      'table tbody tr:nth-of-type(3) th': {
+        borderColor: componentTheme.colorGrey
+      }
+    },
+    correctIncorrectNoanswerGraded: {
+      'table tbody tr:nth-of-type(1) td': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(1) th': {
+        borderColor: componentTheme.colorGreen
+      },
+      'table tbody tr:nth-of-type(2) td': {
+        borderColor: componentTheme.colorBlue
+      },
+      'table tbody tr:nth-of-type(2) th': {
+        borderColor: componentTheme.colorBlue
+      },
+      'table tbody tr:nth-of-type(3) td': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(3) th': {
+        borderColor: componentTheme.colorRed
+      },
+      'table tbody tr:nth-of-type(4) td': {
+        borderColor: componentTheme.colorGrey
+      },
+      'table tbody tr:nth-of-type(4) th': {
+        borderColor: componentTheme.colorGrey
+      }
+    },
+    correctBackground: {
+      backgroundColor: componentTheme.colorGreen
+    },
+    incorrectBackground: {
+      backgroundColor: componentTheme.colorRed
+    },
+    gradedBackground: {
+      backgroundColor: componentTheme.colorBlue
+    },
+    noAnswerBackground: {
+      backgroundColor: componentTheme.colorGrey
+    },
+    labelWrapper: {
+      padding: '12px 0 12px 10px'
+    },
+    firstHeaderCell: {
+      paddingLeft: '45px'
+    },
+    iconWhite: {
+      'svg': {
+        fill: 'white'
+      }
+    },
+    headerCell: {
+      borderWidth: '0 0 1px 0',
+      borderStyle: 'solid',
+      borderColor: componentTheme.colorHeaderBottomBorder
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,10 +1,13 @@
-export default function generator() {
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var colors = _ref.colors;
   return {
-    colorGreen: '#0b874b',
-    colorBlue: '#0574b5',
-    colorRed: '#e0061f',
-    colorGrey: '#6b7780',
-    colorHeaderBottomBorder: '#c7cdd1',
+    colorGreen: colors.shamrock,
+    colorBlue: colors.brand,
+    colorRed: colors.crimson,
+    colorGrey: colors.ash,
+    colorHeaderBottomBorder: colors.tiara,
     cellPadding: '13.5px 13.5px;'
   };
-}
+};
+
+export default generateComponentTheme;