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

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/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,7 +15,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 _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -35,7 +33,7 @@ var _uiText = require("@instructure/ui-text");
 
 var _uiAlerts = require("@instructure/ui-alerts");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../../../../../common/components/resources/entry/EntrySave/index.js"));
 
@@ -45,29 +43,19 @@ var _QuizEntry = _interopRequireDefault(require("../../../../../../common/record
 
 var _Bank = _interopRequireDefault(require("../../../../../../common/records/Bank.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bRxwg',
-  template: function template(theme) {
-    return "\n\n.bRxwg_cTJN{margin:".concat(theme.marginAddMargin || 'inherit', "}\n\n.bRxwg_edMM{background-color:").concat(theme.quizEntryBankEditBackgroundColor || 'inherit', ";border:").concat(theme.quizEntryBankEditBorderSize || 'inherit', " dashed ").concat(theme.quizEntryBankEditBorderColor || 'inherit', ";margin:").concat(theme.quizEntryBankEditMargin || 'inherit', ";padding:").concat(theme.quizEntryBankEditPadding || 'inherit', "}\n\n.bRxwg_dpNC,[dir=ltr] .bRxwg_dpNC,[dir=rtl] .bRxwg_dpNC{text-align:left}\n\n.bRxwg_fGqX{display:inline-flex;font-size:").concat(theme.numberInputFontSize || 'inherit', ";padding:").concat(theme.numberInputPadding || 'inherit', ";padding-bottom:0;padding-left:").concat(theme.numberInputLeftPadding || 'inherit', "}\n\n.bRxwg_bRWN{border-bottom:solid ").concat(theme.borderLineBottomBorderSize || 'inherit', " ").concat(theme.borderLineBottomBorderColor || 'inherit', ";margin-bottom:").concat(theme.borderLineBottomMargin || 'inherit', ";margin-top:").concat(theme.borderLineTopMargin || 'inherit', "}");
-  },
-  'marginAdd': 'bRxwg_cTJN',
-  'quizEntryBankEdit': 'bRxwg_edMM',
-  'quizEntryBankText': 'bRxwg_dpNC',
-  'numberInput': 'bRxwg_fGqX',
-  'borderLine': 'bRxwg_bRWN'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+var _ref = (0, _emotion.jsx)("br", null);
 
-var _ref2 = /*#__PURE__*/_react.default.createElement("br", null);
+var _ref2 = (0, _emotion.jsx)("br", null);
 
-var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizEntryBankEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizEntryBankEdit, _Component);
 
   var _super = (0, _createSuper2.default)(QuizEntryBankEdit);
@@ -157,14 +145,14 @@ var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     };
 
     _this.renderPointsPossibleRow = function () {
-      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+      return (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: 3
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary"
-      }, (0, _formatMessage.default)('Points per question'))), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+      }, (0, _formatMessage.default)('Points per question'))), (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: 9
-      }, /*#__PURE__*/_react.default.createElement(_quizNumberInput.default, {
-        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Points per question')),
+      }, (0, _emotion.jsx)(_quizNumberInput.default, {
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Points per question')),
         onChange: _this.handlePointsChange,
         onBlur: _this.handlePointsBlur,
         value: _this.state.rawPointsPossible,
@@ -180,16 +168,16 @@ var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   (0, _createClass2.default)(QuizEntryBankEdit, [{
     key: "renderQuestionSelectRadioGroup",
     value: function renderQuestionSelectRadioGroup() {
-      return /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInputGroup, {
+      return (0, _emotion.jsx)(_uiRadioInput.RadioInputGroup, {
         name: "questionSelect",
         description: (0, _formatMessage.default)('Question selection'),
         defaultValue: this.props.questionSelection,
         onChange: this.handleQuestionChange
-      }, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+      }, (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
         key: "all",
         value: "all",
         label: (0, _formatMessage.default)('Use all questions')
-      }), /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+      }), (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
         key: "rand",
         value: "rand",
         label: (0, _formatMessage.default)('Randomly select questions')
@@ -202,14 +190,14 @@ var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+      return (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: 3
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary"
-      }, (0, _formatMessage.default)('Number of questions'))), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+      }, (0, _formatMessage.default)('Number of questions'))), (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: 9
-      }, /*#__PURE__*/_react.default.createElement(_quizNumberInput.default, {
-        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Number of questions')),
+      }, (0, _emotion.jsx)(_quizNumberInput.default, {
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Number of questions')),
         onChange: this.handleSampleNumChange,
         value: this.props.sampleNum,
         min: 1,
@@ -221,7 +209,7 @@ var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   }, {
     key: "renderQuestionNumberInputs",
     value: function renderQuestionNumberInputs() {
-      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+      return (0, _emotion.jsx)(_uiGrid.Grid, {
         vAlign: "middle",
         rowSpacing: "small"
       }, this.renderRandomQuestionSelectionRow(), this.renderPointsPossibleRow());
@@ -229,9 +217,9 @@ var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.quizEntryBankText
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.quizEntryBankText
+      }, (0, _emotion.jsx)(_index2.default, {
         label: (0, _formatMessage.default)('Select the source bank'),
         selectedBank: this.props.workingBank,
         onBankSelection: this.onBankSelection
@@ -241,9 +229,9 @@ var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     key: "renderErrors",
     value: function renderErrors() {
       if (this.props.workingBank.archived) {
-        return /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        return (0, _emotion.jsx)(_uiAlerts.Alert, {
           variant: "error"
-        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }, (0, _emotion.jsx)(_uiText.Text, {
           color: "primary"
         }, (0, _formatMessage.default)('Item bank no longer exists!')));
       }
@@ -251,13 +239,13 @@ var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.quizEntryBankEdit
-      }, this.renderErrors(), this.renderContent(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.borderLine
-      }), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.quizEntryBankEdit
+      }, this.renderErrors(), this.renderContent(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.borderLine
+      }), (0, _emotion.jsx)(_uiView.View, {
         textAlign: "end"
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, (0, _emotion.jsx)(_index.default, {
         clearChanges: this.clearChanges,
         displayPosition: this.props.displayPosition,
         disableSubmit: !this.props.workingQuizEntry.isValid(),
@@ -284,7 +272,8 @@ var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   sampleNum: _propTypes.default.string,
   updateQuizEntry: _propTypes.default.func.isRequired,
   workingBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
-  workingQuizEntry: _propTypes.default.instanceOf(_QuizEntry.default).isRequired
+  workingQuizEntry: _propTypes.default.instanceOf(_QuizEntry.default).isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   sampleNum: void 0
 }, _temp)) || _class);

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/styles.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    marginAdd: {
+      margin: componentTheme.marginAddMargin
+    },
+    quizEntryBankEdit: {
+      backgroundColor: componentTheme.quizEntryBankEditBackgroundColor,
+      border: "".concat(componentTheme.quizEntryBankEditBorderSize, " dashed ").concat(componentTheme.quizEntryBankEditBorderColor),
+      padding: componentTheme.quizEntryBankEditPadding,
+      margin: componentTheme.quizEntryBankEditMargin
+    },
+    quizEntryBankText: {
+      textAlign: 'left'
+    },
+    numberInput: {
+      fontSize: componentTheme.numberInputFontSize,
+      display: 'inline-flex',
+      padding: componentTheme.numberInputPadding,
+      paddingBottom: '0',
+      paddingLeft: componentTheme.numberInputLeftPadding
+    },
+    borderLine: {
+      marginTop: componentTheme.borderLineTopMargin,
+      marginBottom: componentTheme.borderLineBottomMargin,
+      borderBottom: "solid ".concat(componentTheme.borderLineBottomBorderSize, " ").concat(componentTheme.borderLineBottomBorderColor)
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/theme.js

@@ -3,9 +3,9 @@
 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,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -25,4 +25,7 @@ function generator(_ref) {
     borderLineBottomBorderSize: borders.widthSmall,
     borderLineBottomBorderColor: colors.ash
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankShow/index.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,7 +15,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 _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,31 +25,23 @@ var _uiAlerts = require("@instructure/ui-alerts");
 
 var _uiText = require("@instructure/ui-text");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _Bank = _interopRequireDefault(require("../../../../../../common/records/Bank.js"));
 
 var _QuizEntry = _interopRequireDefault(require("../../../../../../common/records/QuizEntry.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'BXWam',
-  template: function template(theme) {
-    return "\n\n.BXWam_cLXE{background-color:".concat(theme.quizEntryBankBackgroundColor || 'inherit', ";border:").concat(theme.quizEntryBankBorderSize || 'inherit', " dashed ").concat(theme.quizEntryBankBorderColor || 'inherit', ";cursor:pointer;margin-top:").concat(theme.quizEntryBankTopMargin || 'inherit', ";padding:").concat(theme.quizEntryBankPadding || 'inherit', "}\n\n.BXWam_dpNC,[dir=ltr] .BXWam_dpNC,[dir=rtl] .BXWam_dpNC{text-align:left}\n\n.BXWam_ekHz{margin-bottom:").concat(theme.alertWrapperMargin || 'inherit', "}");
-  },
-  'quizEntryBank': 'BXWam_cLXE',
-  'quizEntryBankText': 'BXWam_dpNC',
-  'alertWrapper': 'BXWam_ekHz'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+var _ref = (0, _emotion.jsx)("br", null);
 
-var QuizEntryBank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizEntryBank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizEntryBank, _Component);
 
   var _super = (0, _createSuper2.default)(QuizEntryBank);
@@ -64,24 +54,24 @@ var QuizEntryBank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   (0, _createClass2.default)(QuizEntryBank, [{
     key: "renderSampleError",
     value: function renderSampleError() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.alertWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.alertWrapper
+      }, (0, _emotion.jsx)(_uiAlerts.Alert, {
         variant: "error"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary"
-      }, /*#__PURE__*/_react.default.createElement("b", null, (0, _formatMessage.default)('Max number of bank questions exceeded! ')), (0, _formatMessage.default)("{ number, plural,\n                  one {This bank contains 1 question.}\n                  other {This bank contains # questions.}\n                } ", {
+      }, (0, _emotion.jsx)("b", null, (0, _formatMessage.default)('Max number of bank questions exceeded! ')), (0, _formatMessage.default)("{ number, plural,\n                  one {This bank contains 1 question.}\n                  other {This bank contains # questions.}\n                } ", {
         number: this.props.entry.itemEntryCount
       }))));
     }
   }, {
     key: "renderDeletedError",
     value: function renderDeletedError() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.alertWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.alertWrapper
+      }, (0, _emotion.jsx)(_uiAlerts.Alert, {
         variant: "error"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary"
       }, (0, _formatMessage.default)('Item bank no longer exists!'))));
     }
@@ -105,22 +95,22 @@ var QuizEntryBank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     value: function renderContent() {
       var sampleNum = this.props.quizEntry.sampleNum;
       if (!sampleNum) sampleNum = 0;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.quizEntryBankText
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.quizEntryBankText
+      }, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary"
       }, (0, _formatMessage.default)("{ number, plural,\n                =0 { All questions pulled from bank: }\n                one {# question pulled randomly from bank: }\n                other {# questions pulled randomly from bank: }\n              } ", {
         number: sampleNum
-      }), /*#__PURE__*/_react.default.createElement("b", null, this.props.entry.title), _ref, (0, _formatMessage.default)("{ number, plural,\n                one {# point per question }\n                other {# points per question }\n              }", {
+      }), (0, _emotion.jsx)("b", null, this.props.entry.title), _ref, (0, _formatMessage.default)("{ number, plural,\n                one {# point per question }\n                other {# points per question }\n              }", {
         number: this.props.quizEntry.pointsPossible
       })));
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.quizEntryBank
-      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.quizEntryBank
+      }, (0, _emotion.jsx)(_uiView.View, {
         size: "medium",
         textAlign: "center",
         margin: "0 auto",
@@ -132,7 +122,8 @@ var QuizEntryBank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   return QuizEntryBank;
 }(_react.Component), _class2.propTypes = {
   entry: _propTypes.default.instanceOf(_Bank.default).isRequired,
-  quizEntry: _propTypes.default.instanceOf(_QuizEntry.default).isRequired
+  quizEntry: _propTypes.default.instanceOf(_QuizEntry.default).isRequired,
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.QuizEntryBank = QuizEntryBank;
 var _default = QuizEntryBank;

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankShow/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    quizEntryBank: {
+      backgroundColor: componentTheme.quizEntryBankBackgroundColor,
+      border: "".concat(componentTheme.quizEntryBankBorderSize, " dashed ").concat(componentTheme.quizEntryBankBorderColor),
+      cursor: 'pointer',
+      padding: componentTheme.quizEntryBankPadding,
+      marginTop: componentTheme.quizEntryBankTopMargin
+    },
+    quizEntryBankText: {
+      textAlign: 'left'
+    },
+    alertWrapper: {
+      marginBottom: componentTheme.alertWrapperMargin
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankShow/theme.js

@@ -3,9 +3,9 @@
 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,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -17,4 +17,7 @@ function generator(_ref) {
     quizEntryBankTopMargin: spacing.small,
     alertWrapperMargin: spacing.small
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/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
 });
@@ -19,7 +17,7 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -37,7 +35,7 @@ var _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-
 
 var _uiButtons = require("@instructure/ui-buttons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiIcons = require("@instructure/ui-icons");
 
@@ -49,21 +47,12 @@ var _index = _interopRequireDefault(require("../../../../../../common/components
 
 var _quizCommon = require("@instructure/quiz-common");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'kXHyM',
-  template: function template(theme) {
-    return "\n\n.kXHyM_bVuu{align-items:center;display:inline-flex;flex-wrap:nowrap}\n\n.kXHyM_fsXS,.kXHyM_djwg{align-items:center;display:flex}\n\n.kXHyM_fsXS{margin-left:".concat(theme.feedbackSectionLeftMargin || 'inherit', "}\n\n.kXHyM_duRV{display:inline-flex;font-size:").concat(theme.pointsInputFontSize || 'inherit', ";width:6.1rem}");
-  },
-  'leftFooter': 'kXHyM_bVuu',
-  'feedbackSection': 'kXHyM_fsXS',
-  'pointsSection': 'kXHyM_djwg',
-  'pointsInput': 'kXHyM_duRV'
-};
-
 function pointsAsFloat(pointsString) {
   return parseFloat(pointsString) || 0;
 }
@@ -79,7 +68,7 @@ function countDecimals(normalizedPointsString) {
   return decimals ? decimals.length : 0;
 }
 
-var QuizEntryEditFooter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizEntryEditFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizEntryEditFooter, _Component);
 
   var _super = (0, _createSuper2.default)(QuizEntryEditFooter);
@@ -192,10 +181,11 @@ var QuizEntryEditFooter = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
         text = (0, _formatMessage.default)('Edit Question Level Feedback');
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.feedbackSection,
+      return (0, _emotion.jsx)("div", {
+        className: "feedbackSection",
+        css: this.props.styles.feedbackSection,
         "data-automation": "sdk-quiz-entry-edit-footer-feedback-section"
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      }, (0, _emotion.jsx)(_uiButtons.IconButton, {
         onClick: this.openFeedbackModal,
         withBackground: false,
         withBorder: false,
@@ -209,28 +199,28 @@ var QuizEntryEditFooter = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
   }, {
     key: "renderPointsSection",
     value: function renderPointsSection() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.pointsSection
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.pointsInput
-      }, /*#__PURE__*/_react.default.createElement(_quizNumberInput.default, {
-        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Points Possible Input')),
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.pointsSection
+      }, (0, _emotion.jsx)("span", {
+        css: this.props.styles.pointsInput
+      }, (0, _emotion.jsx)(_quizNumberInput.default, {
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Points Possible Input')),
         onChange: this.handlePointsChange,
         onBlur: this.handlePointsBlur,
         value: this.state.points,
         disabled: this.pointsDisabled(),
         "data-automation": "sdk-points-possible-numberinput"
-      })), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      })), (0, _emotion.jsx)(_uiView.View, {
         margin: "none none none x-small"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
       }, (0, _formatMessage.default)('Points'))));
     }
   }, {
     key: "renderLeftFooter",
     value: function renderLeftFooter() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.leftFooter
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.leftFooter
       }, this.renderPointsSection(), this.renderFeedbackSection());
     }
   }, {
@@ -240,7 +230,7 @@ var QuizEntryEditFooter = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
         return this.props.alternativeRightFooter();
       }
 
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         clearChanges: this.props.clearChanges,
         disableSubmit: this.props.disableSubmit,
         displayPosition: this.props.displayPosition,
@@ -254,17 +244,17 @@ var QuizEntryEditFooter = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      return (0, _emotion.jsx)(_uiView.View, {
         as: "div",
         background: "secondary",
         padding: "xx-small none"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         wrap: "wrap",
         justifyItems: "space-between",
         alignItems: "center"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         padding: "xx-small small"
-      }, this.renderLeftFooter()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, this.renderLeftFooter()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         padding: "xx-small small"
       }, this.renderRightFooter())));
     }
@@ -289,7 +279,8 @@ var QuizEntryEditFooter = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
   workingEntry: _reactImmutableProptypes.default.record.isRequired,
   // This prop is flagged as unused, but it is actually used
   // eslint-disable-next-line react/no-unused-prop-types
-  workingQuizEntry: _reactImmutableProptypes.default.record.isRequired
+  workingQuizEntry: _reactImmutableProptypes.default.record.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   alternativeRightFooter: null,
   disableSubmit: false,

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/styles.js

@@ -0,0 +1,38 @@
+"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) {
+  var sectionStyle = {
+    display: 'flex',
+    alignItems: 'center'
+  };
+  return {
+    leftFooter: {
+      display: 'inline-flex',
+      flexWrap: 'nowrap',
+      alignItems: 'center'
+    },
+    pointsSection: sectionStyle,
+    feedbackSection: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sectionStyle), {}, {
+      marginLeft: componentTheme.feedbackSectionLeftMarg
+    }),
+    pointsInput: {
+      width: '6.1rem',
+
+      /* wide enough to fit 3 decimal places (i.e. 8.888) */
+      fontSize: componentTheme.pointsInputFontSize,
+      display: 'inline-flex'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/theme.js

@@ -3,9 +3,9 @@
 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,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -14,4 +14,7 @@ function generator(_ref) {
     feedbackSectionLeftMargin: spacing.xSmall,
     pointsInputFontSize: typography.fontSizeMedium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;