@instructure/quiz-core 20.11.3-rc.8 → 20.11.3

package/es/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -7,14 +7,15 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import first from 'lodash/first';
 import partial from 'lodash/partial';
 import { Button } from '@instructure/ui-buttons';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { FILE_UPLOAD_SUCCESS, SHOULD_CLONE_ITEM, DELETED_QUIZ_ENTRY } from '@instructure/quiz-common';
 import { propsForStimulusVersioningWrapper, propsForBankEntryVersioningWrapper } from "../../../../util/warningHelpers.js";
 import AddToBankModal from "../../../../../banks/components/AddToBankModal/index.js";
@@ -24,25 +25,12 @@ import CustomPropTypes from "../../../../../common/util/CustomPropTypes.js";
 import elementsForSelectors from "../../../../../common/util/ElementsForSelectors.js";
 import StimulusShowInfo from "../StimulusShowInfo/index.js";
 import StimulusEditInfo from "../StimulusEditInfo/index.js";
-import wrapWithOutsideClick from "../../../shared/functionality/componentWithOutsideClick.js";
+import wrapWithOutsideClickEmotion from "../../../shared/functionality/componentWithOutsideClickEmotion.js";
 import ActionButtons from "../../../../../building/components/resources/ActionButtons/index.js";
-var styles = {
-  componentId: 'eCUGW',
-  template: function template(theme) {
-    return "\n\n.eCUGW_dRGY{padding-bottom:".concat(theme.stimulusPadding || 'inherit', ";padding-top:").concat(theme.stimulusPadding || 'inherit', "}\n\n.eCUGW_cjWK{display:flex;justify-content:flex-end}\n\n.eCUGW_nqth{padding-left:").concat(theme.buttonWrapperPadding || 'inherit', "}\n\n.eCUGW_fsuY{align-items:center;display:flex;height:1rem;justify-content:space-between;padding-left:").concat(theme.headerPadding || 'inherit', ";padding-right:").concat(theme.headerPadding || 'inherit', "}\n\n.eCUGW_dMwa{height:100%;padding:").concat(theme.stimulusContentPadding || 'inherit', "}\n\n.eCUGW_ffXB{color:").concat(theme.stimulusLabelColor || 'inherit', ";font-size:").concat(theme.stimulusLabelFontSize || 'inherit', "}\n\n.eCUGW_fjJt{color:").concat(theme.stimulusButtonsColor || 'inherit', ";display:inline-flex;flex:0 0 auto;text-align:right;z-index:").concat(theme.stimulusButtonsZIndex || 'inherit', "}\n\n[dir=ltr] .eCUGW_fjJt,[dir=rtl] .eCUGW_fjJt{text-align:right}\n\n.eCUGW_fjJt button{background-color:transparent;background-color:initial}\n\n.eCUGW_fBJf{padding-top:").concat(theme.optionPadding || 'inherit', "}");
-  },
-  'stimulus': 'eCUGW_dRGY',
-  'footer': 'eCUGW_cjWK',
-  'buttonWrapper': 'eCUGW_nqth',
-  'header': 'eCUGW_fsuY',
-  'stimulusContent': 'eCUGW_dMwa',
-  'stimulusLabel': 'eCUGW_ffXB',
-  'stimulusButtons': 'eCUGW_fjJt',
-  'optionWrapper': 'eCUGW_fBJf'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var StimulusEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(StimulusEdit, _Component);
 
   var _super = _createSuper(StimulusEdit);
@@ -371,7 +359,7 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "renderAddToBankModal",
     value: function renderAddToBankModal() {
-      return /*#__PURE__*/React.createElement(AddToBankModal, {
+      return jsx(AddToBankModal, {
         label: t('Add to an Item Bank'),
         onAdd: this.handleAddToBank,
         onContinue: this.handleAddToBankContinue,
@@ -384,13 +372,13 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "renderAddToBankOptions",
     value: function renderAddToBankOptions() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToggleDetails, {
+      return jsx("div", null, jsx(ToggleDetails, {
         variant: "filled",
         key: "itemBanking",
         summary: t('Item Banking')
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.optionWrapper
-      }, /*#__PURE__*/React.createElement(AddToBankOptions, {
+      }, jsx("div", {
+        css: this.props.styles.optionWrapper
+      }, jsx(AddToBankOptions, {
         displayPosition: this.props.displayPosition,
         entryType: this.props.quizEntry.entryType,
         guid: this.props.guid,
@@ -403,13 +391,13 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "renderStimulusEdit",
     value: function renderStimulusEdit() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulus
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.header
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulusLabel
-      }, t('Stimulus')), /*#__PURE__*/React.createElement(ActionButtons, {
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.stimulus
+      }, jsx("div", {
+        css: this.props.styles.header
+      }, jsx("div", {
+        css: this.props.styles.stimulusLabel
+      }, t('Stimulus')), jsx(ActionButtons, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.handleDeleteStimulus,
@@ -418,25 +406,27 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
         shouldDisableDragHandle: true,
         shouldRenderEdit: false,
         shouldFocusOnMount: this.props.shouldFocusOnMount
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulusContent
-      }, /*#__PURE__*/React.createElement(StimulusEditInfo, {
+      })), jsx("div", {
+        css: this.props.styles.stimulusContent
+      }, jsx(StimulusEditInfo, {
         errorsShowing: this.props.errorsShowing,
         guid: this.props.guid,
         stimulus: this.props.stimulus,
         isBankedContent: this.props.isBankedContent,
         setTitleRef: this.setTitleRef
-      }), this.renderAddToBankOptions())), /*#__PURE__*/React.createElement("div", {
-        className: styles.footer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.buttonWrapper
-      }, /*#__PURE__*/React.createElement(Button, {
+      }), this.renderAddToBankOptions())), jsx("div", {
+        className: "footer",
+        css: this.props.styles.footer
+      }, jsx("div", {
+        css: this.props.styles.buttonWrapper
+      }, jsx(Button, {
         type: "button",
         onClick: this.onCancel,
         "data-automation": "sdk-stimulus-discardButton"
-      }, t('Cancel'))), /*#__PURE__*/React.createElement("div", {
-        className: styles.buttonWrapper
-      }, /*#__PURE__*/React.createElement(Button, {
+      }, t('Cancel'))), jsx("div", {
+        className: "submitButtonWrapper",
+        css: this.props.styles.buttonWrapper
+      }, jsx(Button, {
         type: "button",
         color: "primary",
         disabled: !this.state.canSubmit,
@@ -449,7 +439,7 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
       this.stimulusEditInfoRef = null;
 
       if (this.props.isBankedContent) {
-        return /*#__PURE__*/React.createElement(WarningWrapper, this.props.bankEntryWarningWrapperProps(), /*#__PURE__*/React.createElement(StimulusShowInfo, this.props));
+        return jsx(WarningWrapper, this.props.bankEntryWarningWrapperProps(), jsx(StimulusShowInfo, this.props));
       }
 
       var _this$props4 = this.props,
@@ -459,7 +449,7 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var propForWrapperFunc = quizEntry.isArchivedBankEntry ? propsForBankEntryVersioningWrapper : propsForStimulusVersioningWrapper;
       var propsForStimulusVersioning = propForWrapperFunc(needsWarning, this.props.shouldClone, partial(this.props.setUi, SHOULD_CLONE_ITEM), this.props.switchOffEditing, true, quizEntry.isArchivedBankEntry ? 'info' : 'warning');
       var hasWarningWrapper = needsWarning && !this.props.shouldClone;
-      return /*#__PURE__*/React.createElement(WarningWrapper, propsForStimulusVersioning, hasWarningWrapper ? /*#__PURE__*/React.createElement(StimulusShowInfo, this.props) : this.renderStimulusEdit());
+      return jsx(WarningWrapper, propsForStimulusVersioning, hasWarningWrapper ? jsx(StimulusShowInfo, this.props) : this.renderStimulusEdit());
     }
   }]);
 
@@ -504,11 +494,12 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
   workingQuizEntry: ImmutablePropTypes.record.isRequired,
   workingStimulus: ImmutablePropTypes.record.isRequired,
   onEditToggle: PropTypes.func.isRequired,
-  shouldFocusOnMount: PropTypes.bool.isRequired
+  shouldFocusOnMount: PropTypes.bool.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   bankEntryWarningWrapperProps: function bankEntryWarningWrapperProps() {},
   errorsShowing: false,
   isBankedContent: false,
   nextQuizEntry: null
 }, _temp)) || _class);
-export default wrapWithOutsideClick(StimulusEdit);
+export default wrapWithOutsideClickEmotion(StimulusEdit);

package/es/common/components/resources/stimulus/StimulusEdit/styles.js

@@ -0,0 +1,46 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    stimulus: {
+      paddingTop: componentTheme.stimulusPadding,
+      paddingBottom: componentTheme.stimulusPadding
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'flex-end'
+    },
+    buttonWrapper: {
+      paddingLeft: componentTheme.buttonWrapperPadding
+    },
+    header: {
+      height: '1rem',
+      paddingLeft: componentTheme.headerPadding,
+      paddingRight: componentTheme.headerPadding,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    stimulusContent: {
+      height: '100%',
+      padding: componentTheme.stimulusContentPadding
+    },
+    stimulusLabel: {
+      color: componentTheme.stimulusLabelColor,
+      fontSize: componentTheme.stimulusLabelFontSize
+    },
+    stimulusButtons: {
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      textAlign: 'right',
+      zIndex: componentTheme.stimulusButtonsZIndex,
+      color: componentTheme.stimulusButtonsColor,
+      button: {
+        backgroundColor: 'initial'
+      }
+    },
+    optionWrapper: {
+      paddingTop: componentTheme.optionPadding
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/stimulus/StimulusEdit/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors;
@@ -14,4 +14,6 @@ export default function generator(_ref) {
     stimulusButtonsColor: colors.oxford,
     stimulusButtonsZIndex: '3333'
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/overlayEmotion/index.js

@@ -42,6 +42,7 @@ var OverlayEmotion = (_dec = withStyle(generateStyle, generateComponentTheme), _
 
       return jsx("div", {
         role: "presentation",
+        className: "overlay",
         css: this.props.styles.overlay,
         onClick: this.props.onClick,
         "data-automation": "sdk-overlay"
@@ -62,7 +63,6 @@ var OverlayEmotion = (_dec = withStyle(generateStyle, generateComponentTheme), _
           }
         }
       }), jsx("div", {
-        className: "overlay",
         css: [this.props.styles.root, wrapperStyles],
         "data-testid": "overlay-wrapper",
         tabIndex: tabIndex,

package/es/common/components/shared/return_button/ReturnButton.js

@@ -27,7 +27,8 @@ export var ReturnButton = /*#__PURE__*/function (_Component) {
 
       if (this.props.iceTopNavBarEnabled) {
         return /*#__PURE__*/React.createElement(SecondaryNavBarButton, {
-          id: "ReturnButton",
+          id: this.props.id,
+          key: this.props.id,
           variant: "button",
           "data-automation": "sdk-return-button",
           href: this.props.returnToUrl,
@@ -49,11 +50,13 @@ export var ReturnButton = /*#__PURE__*/function (_Component) {
 ReturnButton.propTypes = {
   returnToUrl: PropTypes.string,
   text: PropTypes.string,
+  id: PropTypes.string,
   iceTopNavBarEnabled: PropTypes.bool
 };
 ReturnButton.defaultProps = {
   returnToUrl: void 0,
   text: t('Return'),
+  id: 'ReturnButton',
   iceTopNavBarEnabled: false
 };
 export default ReturnButton;

package/es/common/reducers/outcomes.js

@@ -1,9 +1,10 @@
 import { fromJS } from 'immutable';
-import { SET_CONTEXT_UUID, SET_OUTCOMES_ENDPOINT, SET_OUTCOMES_TOKEN } from '@instructure/quiz-common';
+import { SET_CONTEXT_UUID, SET_OUTCOMES_ENDPOINT, SET_OUTCOMES_TOKEN, SET_EXTERNAL_ACCOUNT_UUID } from '@instructure/quiz-common';
 var defaultState = fromJS({
   contextUuid: '',
   outcomesEndpoint: '',
-  outcomesToken: ''
+  outcomesToken: '',
+  externalAccountUuid: ''
 });
 export default (function () {
   var state = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultState;
@@ -19,6 +20,9 @@ export default (function () {
     case SET_OUTCOMES_TOKEN:
       return state.set('outcomesToken', action.payload);
 
+    case SET_EXTERNAL_ACCOUNT_UUID:
+      return state.set('externalAccountUuid', action.payload);
+
     default:
       return state;
   }

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/LegacyChoiceType/presenter.js

@@ -5,26 +5,19 @@ 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 { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import PropTypes from 'prop-types';
 import ChoiceTypeTableRow from "./ChoiceTypeTableRow/index.js";
 import { choiceTypeAnswerSummaryPropType } from "../../propTypes.js";
-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'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
-import classNames from 'classnames';
-export var LegacyChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var LegacyChoiceType = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(LegacyChoiceType, _Component);
 
   var _super = _createSuper(LegacyChoiceType);
@@ -41,7 +34,7 @@ export var LegacyChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderRow = function (choice, choiceIndex) {
-      return /*#__PURE__*/React.createElement(ChoiceTypeTableRow, {
+      return jsx(ChoiceTypeTableRow, {
         key: choiceIndex,
         choice: choice,
         choiceIndex: choiceIndex
@@ -55,7 +48,7 @@ export var LegacyChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_
         correct: false,
         count: payload.count
       };
-      return /*#__PURE__*/React.createElement(ChoiceTypeTableRow, {
+      return jsx(ChoiceTypeTableRow, {
         key: choiceIndex,
         choice: asChoice,
         choiceIndex: choiceIndex
@@ -78,30 +71,31 @@ export var LegacyChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_
       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.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.tableContainer)
-      }, /*#__PURE__*/React.createElement(Table, {
+      return jsx(AfsTableWrapper, null, jsx("div", {
+        css: this.props.styles.tableContainer
+      }, jsx(Table, {
         caption: t('Answer Frequency Summary')
-      }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx(Table.Head, null, jsx(Table.Row, null, jsx(Table.ColHeader, {
         id: spacingHeaderId,
         width: "46px"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Answer correctness'))), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx(ScreenReaderContent, null, t('Answer correctness'))), jsx(Table.ColHeader, {
         id: answerHeaderId,
         height: "47px"
-      }, t('Answer')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Answer')), jsx(Table.ColHeader, {
         id: respondentsHeaderId,
         height: "47px"
-      }, t('Respondents')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Respondents')), jsx(Table.ColHeader, {
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, t('Percentage')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))));
+      }, t('Percentage')))), jsx(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))));
     }
   }]);
 
   LegacyChoiceType.displayName = "LegacyChoiceType";
   return LegacyChoiceType;
 }(Component), _class2.propTypes = {
-  itemId: PropTypes.number,
-  answerSummary: choiceTypeAnswerSummaryPropType
-}.isRequired, _temp)) || _class);
+  itemId: PropTypes.number.isRequired,
+  answerSummary: choiceTypeAnswerSummaryPropType.isRequired,
+  styles: PropTypes.object
+}, _temp)) || _class);

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

@@ -0,0 +1,19 @@
+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'
+      }
+    }
+  };
+};
+
+export default generateStyle;

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

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