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

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

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/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: (0, _objectSpread2.default)({
+      'table tbody tr th': {
+        fontWeight: '400'
+      }
+    }, tableHalfWidth && {
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%'
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,12 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     tableBottomPadding: spacing.medium,
     colorGreen: '#0b874b'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

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

@@ -51,11 +51,11 @@ 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.default.createElement(_index.default, {
         itemId: tableId,
         choices: choices,
-        tableContainerSizeClass: tableContainerSizeClass
+        tableContainerStyles: tableContainerSizeStyles
       });
     };
 

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

@@ -67,11 +67,11 @@ var NumericType = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
           answerSummary = _this$props.answerSummary;
       var incorrect_answer_choices = answerSummary.requirements.incorrect_answer_choices;
       var tableId = "".concat(itemId, "_incorrect_choices");
-      var tableContainerSizeClass = '';
+      var tableContainerStyles = {};
       return (0, _emotion.jsx)(_index4.default, {
         itemId: tableId,
         choices: incorrect_answer_choices,
-        tableContainerSizeClass: tableContainerSizeClass
+        tableContainerStyles: tableContainerStyles
       });
     };
 

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

@@ -100,11 +100,11 @@ var ChoiceGroupTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _the
           index = _this$props.index;
       var choices = blank.choices;
       var tableId = "".concat(itemId, "_").concat(index, "_choiceGroup");
-      var tableContainerSizeClass = '';
+      var tableContainerStyles = {};
       return (0, _emotion.jsx)(_index.default, {
         itemId: tableId,
         choices: choices,
-        tableContainerSizeClass: tableContainerSizeClass
+        tableContainerStyles: tableContainerStyles
       });
     };
 

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

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AfsPartsContainer = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
@@ -21,23 +21,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-var AfsPartsContainer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AfsPartsContainer = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AfsPartsContainer, _Component);
 
   var _super = (0, _createSuper2.default)(AfsPartsContainer);
@@ -54,34 +46,44 @@ var AfsPartsContainer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     _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.default.createElement("div", {
-        className: (0, _classnames.default)(styles.tableContainer, (0, _defineProperty2.default)({}, styles.aggregateContainer, afsTable))
-      }, aggregationTable);
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.tableContainer
+      }, _this.props.aggregationTable);
     };
 
     _this.renderAfsTable = function () {
       var afsTable = _this.props.afsTable;
-      return /*#__PURE__*/_react.default.createElement("div", null, afsTable);
+      return (0, _emotion.jsx)("div", null, afsTable);
     };
 
     _this.render = function () {
-      var _this$props2 = _this.props,
-          afsTable = _this$props2.afsTable,
-          aggregationTable = _this$props2.aggregationTable;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
+      var _this$props = _this.props,
+          afsTable = _this$props.afsTable,
+          aggregationTable = _this$props.aggregationTable;
+      return (0, _emotion.jsx)(_react.default.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
     };
 
     return _this;
   }
 
+  (0, _createClass2.default)(AfsPartsContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }]);
   return AfsPartsContainer;
 }(_react.Component), _class2.propTypes = {
   afsTable: _propTypes.default.node,
-  aggregationTable: _propTypes.default.node
-}.isRequired, _class2.defaultProps = {
+  aggregationTable: _propTypes.default.node,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
+}, _class2.defaultProps = {
   afsTable: null,
   aggregationTable: null
 }, _temp)) || _class);

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  return {
+    tableContainer: (0, _objectSpread2.default)({
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%'
+    }, props.afsTable && {
+      marginTop: componentTheme.marginOfTables
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,11 +3,14 @@
 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 {
     marginOfTables: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/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
 });
@@ -15,7 +13,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -27,52 +25,32 @@ var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
-var _uiFlex = require("@instructure/ui-flex");
+var _styles = _interopRequireDefault(require("./styles.js"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _uiFlex = require("@instructure/ui-flex");
 
 var _uiText = require("@instructure/ui-text");
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
 var noAnswerKey = 'noAnswer';
 var incorrectKey = 'incorrect';
 var correctKey = 'correct';
 var gradedKey = 'graded';
 
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
+var _ref = (0, _emotion.jsx)(_uiIcons.IconCheckSolid, null);
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconGradebookSolid, null);
+var _ref2 = (0, _emotion.jsx)(_uiIcons.IconGradebookSolid, null);
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconXSolid, null);
+var _ref3 = (0, _emotion.jsx)(_uiIcons.IconXSolid, null);
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconNoSolid, null);
+var _ref4 = (0, _emotion.jsx)(_uiIcons.IconNoSolid, null);
 
-var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AggregationTable = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AggregationTable, _Component);
 
   var _super = (0, _createSuper2.default)(AggregationTable);
@@ -94,52 +72,54 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       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.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      return (0, _emotion.jsx)(_uiTable.Table.Head, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: answerHeaderId
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _classnames.default)(styles.firstHeaderCell)
-      }, (0, _formatMessage.default)('Result'))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _emotion.jsx)("span", {
+        css: _this.props.styles.firstHeaderCell
+      }, (0, _formatMessage.default)('Result'))), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: respondentsHeaderId,
         textAlign: "center"
-      }, (0, _formatMessage.default)('Respondents')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Respondents')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: percentageHeaderId,
         textAlign: "center"
       }, (0, _formatMessage.default)('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.default.createElement(_uiTable.Table.Row, {
+      return (0, _emotion.jsx)(_uiTable.Table.Row, {
         key: key
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
+      }, (0, _emotion.jsx)(_uiTable.Table.RowHeader, {
         themeOverride: {
           padding: '0px'
         }
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row",
         alignItems: "center"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         width: "46px",
         textAlign: "center",
         align: "stretch"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.iconWrapper, styles.iconWhite, backgroundColor)
-      }, icon)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)("div", {
+        css: [_this.props.styles.iconWrapper, backgroundColor]
+      }, icon)), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.labelWrapper)
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, label))))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, (0, _emotion.jsx)("div", {
+        "data-testid": "label-wrapper",
+        css: _this.props.styles.labelWrapper
+      }, (0, _emotion.jsx)(_uiText.Text, null, label))))), (0, _emotion.jsx)(_uiTable.Table.Cell, {
         themeOverride: {
           padding: '0px'
         },
         textAlign: "center"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, count)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, (0, _emotion.jsx)(_uiText.Text, null, count)), (0, _emotion.jsx)(_uiTable.Table.Cell, {
         themeOverride: {
           padding: '0px'
         },
         textAlign: "center"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, concatenatedPercentage)));
+      }, (0, _emotion.jsx)(_uiText.Text, null, concatenatedPercentage)));
     };
 
     _this.gradedExist = function () {
@@ -216,11 +196,12 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
 
     _this.render = function () {
       var popover = !_this.noAnswerExist();
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.collapsingTable, styles[_this.getColorProfile()])
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      var tableStyles = [_this.props.styles.collapsingTable, _this.props.styles[_this.getColorProfile()]];
+      return (0, _emotion.jsx)("div", {
+        css: tableStyles
+      }, (0, _emotion.jsx)(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary Aggregates')
-      }, _this.renderHeaderRow(popover), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, _this.correctExist() && _this.renderCorrect(), _this.gradedExist() && _this.renderGraded(), _this.incorrectExist() && _this.renderIncorrect(), _this.noAnswerExist() && _this.renderNoAnswer())));
+      }, _this.renderHeaderRow(popover), (0, _emotion.jsx)(_uiTable.Table.Body, null, _this.correctExist() && _this.renderCorrect(), _this.gradedExist() && _this.renderGraded(), _this.incorrectExist() && _this.renderIncorrect(), _this.noAnswerExist() && _this.renderNoAnswer())));
     };
 
     return _this;
@@ -229,6 +210,7 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   return AggregationTable;
 }(_react.Component), _class2.propTypes = {
   itemId: _propTypes2.default.number.isRequired,
-  answerSummary: _propTypes.onlyAggregatePropType
-}.isRequired, _temp)) || _class);
+  answerSummary: _propTypes.onlyAggregatePropType.isRequired,
+  styles: _propTypes2.default.object
+}, _temp)) || _class);
 exports.AggregationTable = AggregationTable;

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

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-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;'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;