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

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

@@ -2,59 +2,46 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChoiceTypeTableRow = 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"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _uiTable = require("@instructure/ui-table");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _quizInteractions = require("@instructure/quiz-interactions");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
+var _ref = (0, _emotion.jsx)(_uiIcons.IconCheckSolid, null);
 
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
+var _ref2 = (0, _emotion.jsx)(_uiIcons.IconXSolid, null);
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconXSolid, null);
-
-var ChoiceTypeTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ChoiceTypeTableRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ChoiceTypeTableRow, _Component);
 
   var _super = (0, _createSuper2.default)(ChoiceTypeTableRow);
@@ -70,26 +57,21 @@ var ChoiceTypeTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _this.renderIcon = function (correct) {
-      var className = (0, _classnames.default)(styles.iconWrapper, (0, _defineProperty2.default)({}, styles.iconCorrect, correct));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className
-      }, correct ? _ref : _ref2);
+    _this.renderIcon = function () {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.iconWrapper
+      }, _this.props.choice.correct ? _ref : _ref2);
     };
 
-    _this.renderMiddleCell = function (correct, content) {
-      var className = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.correctRowBorder, correct));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className
+    _this.renderMiddleCell = function (content) {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.correctRowBorder
       }, content);
     };
 
-    _this.renderLastCell = function (correct, content) {
-      var _classNames3;
-
-      var className = (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, styles.correctRowBorder, correct), (0, _defineProperty2.default)(_classNames3, styles.correctRowBorderRadius, correct), _classNames3));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className
+    _this.renderLastCell = function (content) {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.lastRowBorder
       }, content);
     };
 
@@ -106,32 +88,43 @@ var ChoiceTypeTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
     _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.default.createElement(_uiTable.Table.Row, {
+      var cellPadding = correct ? '0' : _this.props.styles.cellPadding;
+      return (0, _emotion.jsx)(_uiTable.Table.Row, {
         key: _this.props.choiceIndex
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, (0, _emotion.jsx)(_uiTable.Table.Cell, {
         themeOverride: {
           padding: '0px'
         }
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, _this.answerLabel(correct)), _this.renderIcon(correct)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, _this.answerLabel(correct)), _this.renderIcon()), (0, _emotion.jsx)(_uiTable.Table.RowHeader, {
         themeOverride: {
           padding: cellPadding
         }
-      }, _this.renderMiddleCell(correct, _this.extractChoiceText(choiceBody, correct))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, _this.renderMiddleCell(_this.extractChoiceText(choiceBody, correct))), (0, _emotion.jsx)(_uiTable.Table.Cell, {
         themeOverride: {
           padding: cellPadding
         }
-      }, _this.renderMiddleCell(correct, _this.props.choice.count)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, _this.renderMiddleCell(_this.props.choice.count)), (0, _emotion.jsx)(_uiTable.Table.Cell, {
         themeOverride: {
           padding: cellPadding
         },
         textAlign: "center"
-      }, _this.renderLastCell(correct, "".concat(_this.props.choice.percentage, "%"))));
+      }, _this.renderLastCell("".concat(_this.props.choice.percentage, "%"))));
     };
 
     return _this;
   }
 
+  (0, _createClass2.default)(ChoiceTypeTableRow, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }]);
   return ChoiceTypeTableRow;
 }(_react.Component), _class2.displayName = 'Row', _class2.propTypes = {
   choice: _propTypes.default.shape({
@@ -139,7 +132,9 @@ var ChoiceTypeTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
     correct: _propTypes.default.bool,
     count: _propTypes.default.number,
     percentage: _propTypes.default.number
-  }),
-  choiceIndex: _propTypes.default.number
-}.isRequired, _temp)) || _class);
+  }).isRequired,
+  choiceIndex: _propTypes.default.number.isRequired,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
+}, _temp)) || _class);
 exports.ChoiceTypeTableRow = ChoiceTypeTableRow;

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

@@ -0,0 +1,51 @@
+"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 correctRowBorderStyles = {
+    borderColor: componentTheme.colorGreen,
+    borderWidth: '2px 0',
+    borderStyle: 'solid',
+    padding: componentTheme.cellPadding
+  };
+  return {
+    iconWrapper: (0, _objectSpread2.default)({
+      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: (0, _objectSpread2.default)({
+      borderWidth: '0'
+    }, props.choice.correct && correctRowBorderStyles),
+    correctRowBorderRadius: {
+      borderWidth: '2px 2px 2px 0',
+      borderRadius: '0 4px 4px 0'
+    },
+    lastRowBorder: (0, _objectSpread2.default)({
+      borderWidth: '0'
+    }, props.choice.correct && (0, _objectSpread2.default)((0, _objectSpread2.default)({}, correctRowBorderStyles), {}, {
+      borderWidth: '2px 2px 2px 0',
+      borderRadius: '0 4px 4px 0'
+    })),
+    cellPadding: componentTheme.cellPadding
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,11 +3,15 @@
 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',
+    colorGreen: colors.shamrock,
     cellPadding: '0.75rem 0.75rem'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/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
 });
@@ -17,13 +15,13 @@ 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"));
 
 var _uiTable = require("@instructure/ui-table");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
@@ -33,23 +31,15 @@ var _index = _interopRequireDefault(require("./ChoiceTypeTableRow/index.js"));
 
 var _propTypes2 = require("../../propTypes.js");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _index2 = _interopRequireDefault(require("../shared/AfsTableWrapper/index.js"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fxQkB',
-  template: function template(theme) {
-    return "\n\n.fxQkB_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.fxQkB_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.fxQkB_SVtU table tbody tr th{font-weight:400}");
-  },
-  'tableWrapper': 'fxQkB_rMrG',
-  'tableContainer': 'fxQkB_SVtU'
-};
-var LegacyChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var LegacyChoiceType = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(LegacyChoiceType, _Component);
 
   var _super = (0, _createSuper2.default)(LegacyChoiceType);
@@ -66,7 +56,7 @@ var LegacyChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderRow = function (choice, choiceIndex) {
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         key: choiceIndex,
         choice: choice,
         choiceIndex: choiceIndex
@@ -80,7 +70,7 @@ var LegacyChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         correct: false,
         count: payload.count
       };
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         key: choiceIndex,
         choice: asChoice,
         choiceIndex: choiceIndex
@@ -103,30 +93,31 @@ var LegacyChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
-      return /*#__PURE__*/_react.default.createElement(_index2.default, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.tableContainer)
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      return (0, _emotion.jsx)(_index2.default, null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.tableContainer
+      }, (0, _emotion.jsx)(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary')
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _emotion.jsx)(_uiTable.Table.Head, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: spacingHeaderId,
         width: "46px"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Answer correctness'))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Answer correctness'))), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: answerHeaderId,
         height: "47px"
-      }, (0, _formatMessage.default)('Answer')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Answer')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: respondentsHeaderId,
         height: "47px"
-      }, (0, _formatMessage.default)('Respondents')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Respondents')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, (0, _formatMessage.default)('Percentage')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))));
+      }, (0, _formatMessage.default)('Percentage')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))));
     }
   }]);
   LegacyChoiceType.displayName = "LegacyChoiceType";
   return LegacyChoiceType;
 }(_react.Component), _class2.propTypes = {
-  itemId: _propTypes.default.number,
-  answerSummary: _propTypes2.choiceTypeAnswerSummaryPropType
-}.isRequired, _temp)) || _class);
+  itemId: _propTypes.default.number.isRequired,
+  answerSummary: _propTypes2.choiceTypeAnswerSummaryPropType.isRequired,
+  styles: _propTypes.default.object
+}, _temp)) || _class);
 exports.LegacyChoiceType = LegacyChoiceType;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    tableWrapper: {
+      display: 'flex',
+      flexBasis: '100%',
+      flexDirection: 'column',
+      paddingBottom: componentTheme.tableBottomPadding
+    },
+    tableContainer: {
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%',
+      'table tbody tr th': {
+        fontWeight: '400'
+      }
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/LegacyChoiceType/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 {
     tableBottomPadding: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

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

@@ -2,30 +2,30 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MatchingTypeTable = 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"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _uiFlex = require("@instructure/ui-flex");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _uiTable = require("@instructure/ui-table");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -37,36 +37,20 @@ var _matchingTypeOrderer = _interopRequireDefault(require("../utils/matchingType
 
 var _quizInteractions = require("@instructure/quiz-interactions");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
-
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+var _ref = (0, _emotion.jsx)(_uiIcons.IconCheckSolid, null);
+
+var _ref2 = (0, _emotion.jsx)(_uiFlex.Flex.Item, {
   width: "46px",
   textAlign: "center"
 });
 
-var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var MatchingTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(MatchingTypeTable, _Component);
 
   var _super = (0, _createSuper2.default)(MatchingTypeTable);
@@ -83,9 +67,8 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderIcon = function () {
-      var classes = (0, _classnames.default)(styles.iconWrapper, styles.iconCorrect);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classes
+      return (0, _emotion.jsx)("div", {
+        css: [_this.props.styles.iconWrapper, _this.props.styles.iconCorrect]
       }, _ref);
     };
 
@@ -98,16 +81,16 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       var exampleAnswers = questions[questionKeys[0]].answers;
       var answer = exampleAnswers[key];
       var answerNumberHeaderId = "answer-number-header-".concat(key, "-").concat(itemId);
-      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      return (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: answerNumberHeaderId,
         key: answerNumberHeaderId,
         themeOverride: {
           padding: '0 0 15px 0'
         },
         textAlign: "center"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row"
-      }, _ref2, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, _ref2, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: true,
         shouldGrow: true,
         textAlign: "center"
@@ -119,8 +102,6 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     };
 
     _this.renderCell = function (questionKey, answerKey) {
-      var _classNames;
-
       var _this$props2 = _this.props,
           answerSummary = _this$props2.answerSummary,
           itemId = _this$props2.itemId;
@@ -130,24 +111,24 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       var correct = answer.correct,
           count = answer.count;
       var answerNumberCellId = "answer-number-cell-".concat(questionKey, "-").concat(answerKey, "-").concat(itemId);
-      var containerClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.correctRowBorder, answer.correct), (0, _defineProperty2.default)(_classNames, styles.correctRowBorderRadius, answer.correct), _classNames));
-      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      var answerRowStyles = answer.correct ? _this.props.styles.correctAnswerRow : {};
+      return (0, _emotion.jsx)(_uiTable.Table.Cell, {
         id: answerNumberCellId,
         key: answerNumberCellId,
         themeOverride: {
           padding: '0 0 0 0'
         }
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, correct ? "".concat((0, _formatMessage.default)('Correct answer'), ": ").concat(count) : count), /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, correct ? "".concat((0, _formatMessage.default)('Correct answer'), ": ").concat(count) : count), (0, _emotion.jsx)("div", {
         "aria-hidden": "true",
-        className: containerClassNames
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        css: answerRowStyles
+      }, (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"
-      }, correct && _this.renderIcon()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, correct && _this.renderIcon()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: true,
         shouldGrow: true,
         textAlign: "center"
@@ -161,9 +142,9 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       var headerCells = orderedAnswerKeys.map(_this.renderHeaderCell);
       var categoryHeaderId = "category-header-".concat(itemId);
       var rowKey = "header-row-".concat(itemId);
-      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+      return (0, _emotion.jsx)(_uiTable.Table.Row, {
         key: rowKey
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: categoryHeaderId,
         key: categoryHeaderId,
         themeOverride: {
@@ -188,9 +169,9 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       var rowKey = "row-".concat(orderedQuestionKey, "-").concat(itemId);
       var extractedQuestionBody = (0, _quizInteractions.extractTextFromHtml)(question.body);
       var questionBody = extractedQuestionBody.trim().length > 0 ? extractedQuestionBody : firstColumnName;
-      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+      return (0, _emotion.jsx)(_uiTable.Table.Row, {
         key: rowKey
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
+      }, (0, _emotion.jsx)(_uiTable.Table.RowHeader, {
         id: questionRowHeaderId,
         key: questionRowHeaderId,
         themeOverride: {
@@ -205,17 +186,16 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       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.default.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
 
       var orderedQuestionKeys = _matchingTypeOrderer.default.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.tableContainer, (0, _defineProperty2.default)({}, styles.tableHalfWidth, tableHalfWidth))
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.tableContainer
+      }, (0, _emotion.jsx)(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary')
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, _this.renderHeaderRow(orderedAnswerKeys)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, orderedQuestionKeys.map(function (orderedQuestionKey) {
+      }, (0, _emotion.jsx)(_uiTable.Table.Head, null, _this.renderHeaderRow(orderedAnswerKeys)), (0, _emotion.jsx)(_uiTable.Table.Body, null, orderedQuestionKeys.map(function (orderedQuestionKey) {
         return _this.renderRow(orderedQuestionKey, orderedAnswerKeys);
       }))));
     };
@@ -223,10 +203,23 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     return _this;
   }
 
+  (0, _createClass2.default)(MatchingTypeTable, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }]);
   return MatchingTypeTable;
 }(_react.Component), _class2.propTypes = {
   itemId: _propTypes.default.number.isRequired,
   answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType.isRequired,
-  firstColumnName: _propTypes.default.string.isRequired
-}.isRequired, _temp)) || _class);
+  firstColumnName: _propTypes.default.string.isRequired,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
+}, _temp)) || _class);
 exports.MatchingTypeTable = MatchingTypeTable;