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

package/es/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankShow/index.js

@@ -5,29 +5,22 @@ 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 { View } from '@instructure/ui-view';
 import { Alert } from '@instructure/ui-alerts';
 import { Text } from '@instructure/ui-text';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import Bank from "../../../../../../common/records/Bank.js";
 import QuizEntry from "../../../../../../common/records/QuizEntry.js";
-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'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 
-var _ref = /*#__PURE__*/React.createElement("br", null);
+var _ref = jsx("br", null);
 
-export var QuizEntryBank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var QuizEntryBank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryBank, _Component);
 
   var _super = _createSuper(QuizEntryBank);
@@ -41,24 +34,24 @@ export var QuizEntryBank = (_dec = themeable(theme, styles), _dec(_class = (_tem
   _createClass(QuizEntryBank, [{
     key: "renderSampleError",
     value: function renderSampleError() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.alertWrapper
-      }, /*#__PURE__*/React.createElement(Alert, {
+      return jsx("div", {
+        css: this.props.styles.alertWrapper
+      }, jsx(Alert, {
         variant: "error"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         color: "primary"
-      }, /*#__PURE__*/React.createElement("b", null, t('Max number of bank questions exceeded! ')), t("{ number, plural,\n                  one {This bank contains 1 question.}\n                  other {This bank contains # questions.}\n                } ", {
+      }, jsx("b", null, t('Max number of bank questions exceeded! ')), t("{ 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.createElement("div", {
-        className: styles.alertWrapper
-      }, /*#__PURE__*/React.createElement(Alert, {
+      return jsx("div", {
+        css: this.props.styles.alertWrapper
+      }, jsx(Alert, {
         variant: "error"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         color: "primary"
       }, t('Item bank no longer exists!'))));
     }
@@ -82,22 +75,22 @@ export var QuizEntryBank = (_dec = themeable(theme, styles), _dec(_class = (_tem
     value: function renderContent() {
       var sampleNum = this.props.quizEntry.sampleNum;
       if (!sampleNum) sampleNum = 0;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.quizEntryBankText
-      }, /*#__PURE__*/React.createElement(Text, {
+      return jsx("div", {
+        css: this.props.styles.quizEntryBankText
+      }, jsx(Text, {
         color: "primary"
       }, t("{ 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.createElement("b", null, this.props.entry.title), _ref, t("{ number, plural,\n                one {# point per question }\n                other {# points per question }\n              }", {
+      }), jsx("b", null, this.props.entry.title), _ref, t("{ 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.createElement("div", {
-        className: styles.quizEntryBank
-      }, /*#__PURE__*/React.createElement(View, {
+      return jsx("div", {
+        css: this.props.styles.quizEntryBank
+      }, jsx(View, {
         size: "medium",
         textAlign: "center",
         margin: "0 auto",
@@ -110,6 +103,7 @@ export var QuizEntryBank = (_dec = themeable(theme, styles), _dec(_class = (_tem
   return QuizEntryBank;
 }(Component), _class2.propTypes = {
   entry: PropTypes.instanceOf(Bank).isRequired,
-  quizEntry: PropTypes.instanceOf(QuizEntry).isRequired
+  quizEntry: PropTypes.instanceOf(QuizEntry).isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default QuizEntryBank;

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

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

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -10,4 +10,6 @@ export default function generator(_ref) {
     quizEntryBankTopMargin: spacing.small,
     alertWrapperMargin: spacing.small
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/quizEntry/QuizEntryEdit/Footer/presenter.js

@@ -6,7 +6,8 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 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 { View } from '@instructure/ui-view';
@@ -15,23 +16,14 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Text } from '@instructure/ui-text';
 import NumberInput from '@instructure/quiz-number-input';
 import { IconButton } from '@instructure/ui-buttons';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { IconDiscussionLine, IconDiscussionSolid } from '@instructure/ui-icons';
 import { interactionPoints } from '@instructure/quiz-interactions';
 import t from '@instructure/quiz-i18n/es/format-message';
 import EntrySave from "../../../../../../common/components/resources/entry/EntrySave/index.js";
 import { ITEM_FEEDBACK_MODAL, ITEM_FEEDBACK_MODAL_ITEM, ITEM_FEEDBACK_MODAL_FEEDBACK } from '@instructure/quiz-common';
-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'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
 function pointsAsFloat(pointsString) {
   return parseFloat(pointsString) || 0;
@@ -48,7 +40,7 @@ function countDecimals(normalizedPointsString) {
   return decimals ? decimals.length : 0;
 }
 
-export var QuizEntryEditFooter = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var QuizEntryEditFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryEditFooter, _Component);
 
   var _super = _createSuper(QuizEntryEditFooter);
@@ -162,10 +154,11 @@ export var QuizEntryEditFooter = (_dec = themeable(theme, styles), _dec(_class =
         text = t('Edit Question Level Feedback');
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.feedbackSection,
+      return jsx("div", {
+        className: "feedbackSection",
+        css: this.props.styles.feedbackSection,
         "data-automation": "sdk-quiz-entry-edit-footer-feedback-section"
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, jsx(IconButton, {
         onClick: this.openFeedbackModal,
         withBackground: false,
         withBorder: false,
@@ -179,28 +172,28 @@ export var QuizEntryEditFooter = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "renderPointsSection",
     value: function renderPointsSection() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.pointsSection
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.pointsInput
-      }, /*#__PURE__*/React.createElement(NumberInput, {
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Points Possible Input')),
+      return jsx("div", {
+        css: this.props.styles.pointsSection
+      }, jsx("span", {
+        css: this.props.styles.pointsInput
+      }, jsx(NumberInput, {
+        renderLabel: jsx(ScreenReaderContent, null, t('Points Possible Input')),
         onChange: this.handlePointsChange,
         onBlur: this.handlePointsBlur,
         value: this.state.points,
         disabled: this.pointsDisabled(),
         "data-automation": "sdk-points-possible-numberinput"
-      })), /*#__PURE__*/React.createElement(View, {
+      })), jsx(View, {
         margin: "none none none x-small"
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "small"
       }, t('Points'))));
     }
   }, {
     key: "renderLeftFooter",
     value: function renderLeftFooter() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.leftFooter
+      return jsx("div", {
+        css: this.props.styles.leftFooter
       }, this.renderPointsSection(), this.renderFeedbackSection());
     }
   }, {
@@ -210,7 +203,7 @@ export var QuizEntryEditFooter = (_dec = themeable(theme, styles), _dec(_class =
         return this.props.alternativeRightFooter();
       }
 
-      return /*#__PURE__*/React.createElement(EntrySave, {
+      return jsx(EntrySave, {
         clearChanges: this.props.clearChanges,
         disableSubmit: this.props.disableSubmit,
         displayPosition: this.props.displayPosition,
@@ -224,17 +217,17 @@ export var QuizEntryEditFooter = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(View, {
+      return jsx(View, {
         as: "div",
         background: "secondary",
         padding: "xx-small none"
-      }, /*#__PURE__*/React.createElement(Flex, {
+      }, jsx(Flex, {
         wrap: "wrap",
         justifyItems: "space-between",
         alignItems: "center"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, {
         padding: "xx-small small"
-      }, this.renderLeftFooter()), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, this.renderLeftFooter()), jsx(Flex.Item, {
         padding: "xx-small small"
       }, this.renderRightFooter())));
     }
@@ -260,7 +253,8 @@ export var QuizEntryEditFooter = (_dec = themeable(theme, styles), _dec(_class =
   workingEntry: ImmutablePropTypes.record.isRequired,
   // This prop is flagged as unused, but it is actually used
   // eslint-disable-next-line react/no-unused-prop-types
-  workingQuizEntry: ImmutablePropTypes.record.isRequired
+  workingQuizEntry: ImmutablePropTypes.record.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   alternativeRightFooter: null,
   disableSubmit: false,

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

@@ -0,0 +1,28 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var sectionStyle = {
+    display: 'flex',
+    alignItems: 'center'
+  };
+  return {
+    leftFooter: {
+      display: 'inline-flex',
+      flexWrap: 'nowrap',
+      alignItems: 'center'
+    },
+    pointsSection: sectionStyle,
+    feedbackSection: _objectSpread(_objectSpread({}, 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'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     feedbackSectionLeftMargin: spacing.xSmall,
     pointsInputFontSize: typography.fontSizeMedium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/quizEntry/QuizEntryEdit/Header/index.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 partial from 'lodash/partial';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { CondensedButton } from '@instructure/ui-buttons';
 import { TextInput } from '@instructure/ui-text-input';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, Global } from '@instructure/emotion';
 import { FillBlankInteractionType } from '@instructure/quiz-interactions';
 import { IconBankLine } from '@instructure/ui-icons';
 import t from '@instructure/quiz-i18n/es/format-message';
@@ -23,23 +24,12 @@ import PositionBox from "../../../../../../common/components/resources/positionB
 import Item from "../../../../../../common/records/Item.js";
 import ActionButtons from "../../../ActionButtons/index.js";
 import { DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, BUILD_TRAY_OPEN } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'cCKjK',
-  template: function template(theme) {
-    return "\n\n.cCKjK_fsuY{align-items:center;background-color:".concat(theme.headerBackgroundColor || 'inherit', ";color:").concat(theme.headerColor || 'inherit', ";display:flex;justify-content:space-between;padding:").concat(theme.headerPadding || 'inherit', ";vertical-align:middle}\n\n.cCKjK_cKlw{align-items:center;display:inline-flex;flex:8 0 0;flex-wrap:nowrap;width:100%}\n\nbody.tox-fullscreen .cCKjK_cKlw{display:none}\n\n.cCKjK_ecuB{font-size:").concat(theme.interactionTypeFontSize || 'inherit', ";margin-left:").concat(theme.interactionTypeLeftMargin || 'inherit', ";margin-right:").concat(theme.interactionTypeRightMargin || 'inherit', "}\n\n.cCKjK_epFc{border-left:").concat(theme.dividingLineLeftBorder || 'inherit', ";width:0}\n\n.cCKjK_dFsQ{display:flex;flex:1 1 auto}\n\n.cCKjK_eGPC{flex:1 1 auto;font-size:").concat(theme.titleInputFontSize || 'inherit', ";text-overflow:ellipsis;white-space:nowrap}");
-  },
-  'header': 'cCKjK_fsuY',
-  'leftHeader': 'cCKjK_cKlw',
-  'interactionType': 'cCKjK_ecuB',
-  'dividingLine': 'cCKjK_epFc',
-  'titleHolder': 'cCKjK_dFsQ',
-  'titleInput': 'cCKjK_eGPC'
-};
-import theme from "./theme.js";
-
-var _ref2 = /*#__PURE__*/React.createElement(IconBankLine, null);
-
-var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref2 = jsx(IconBankLine, null);
+
+var QuizEntryHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryHeader, _Component);
 
   var _super = _createSuper(QuizEntryHeader);
@@ -239,7 +229,7 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     key: "renderName",
     value: function renderName() {
       if (this.props.quizEntry.isBank && this.props.newActiveBank) {
-        return /*#__PURE__*/React.createElement(CondensedButton, {
+        return jsx(CondensedButton, {
           size: "small",
           margin: "0 0 0 x-small",
           onClick: this.handleBankClick,
@@ -247,8 +237,8 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         }, this.props.name);
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.interactionType,
+      return jsx("div", {
+        css: this.props.styles.interactionType,
         "data-automation": "sdk-quiz-entry-interaction-type"
       }, this.props.name);
     }
@@ -268,13 +258,13 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         questionNumber: displayPosition,
         interactionType: entry.getInteractionType().name
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.titleHolder
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.titleInput
-      }, /*#__PURE__*/React.createElement(TextInput, {
+      return jsx("div", {
+        css: this.props.styles.titleHolder
+      }, jsx("span", {
+        css: this.props.styles.titleInput
+      }, jsx(TextInput, {
         ref: this.storeTitleRef,
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, titleLabelText),
+        renderLabel: jsx(ScreenReaderContent, null, titleLabelText),
         type: "text",
         placeholder: t('Question Title'),
         onChange: this.handleTitleChange,
@@ -290,14 +280,15 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         position: this.props.displayPosition
       });
       var position = this.props.disabledForRegrade ? this.props.displayPosition : this.props.quizEntry.positionToDisplay(this.props.displayPosition);
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.leftHeader
-      }, /*#__PURE__*/React.createElement(PositionBox, {
+      return jsx("div", {
+        className: "leftHeader",
+        css: this.props.styles.leftHeader
+      }, jsx(PositionBox, {
         position: position,
         headingText: positionText,
         "data-automation": "sdk-quiz-entry-positionbox"
-      }), this.renderBankedContent(), this.renderName(), /*#__PURE__*/React.createElement("div", {
-        className: styles.dividingLine
+      }), this.renderBankedContent(), this.renderName(), jsx("div", {
+        css: this.props.styles.dividingLine
       }), this.renderTitleHolder());
     }
   }, {
@@ -316,9 +307,12 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         shouldDisableDeleteButton: this.props.disabledForRegrade,
         shouldRenderEdit: false
       };
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.header
-      }, this.renderLeftHeader(), /*#__PURE__*/React.createElement(ActionButtons, actionButtonProps));
+      return jsx("div", {
+        className: "header",
+        css: this.props.styles.header
+      }, jsx(Global, {
+        styles: this.props.styles.globalStyles
+      }), this.renderLeftHeader(), jsx(ActionButtons, actionButtonProps));
     }
   }]);
 
@@ -360,7 +354,8 @@ var QuizEntryHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   successfulSubmit: PropTypes.func.isRequired,
   withConfirm: PropTypes.func.isRequired,
   workingEntry: ImmutablePropTypes.record.isRequired,
-  workingQuizEntry: ImmutablePropTypes.record.isRequired
+  workingQuizEntry: ImmutablePropTypes.record.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   disabledForRegrade: false,
   initialFocusId: null,

package/es/building/components/resources/quizEntry/QuizEntryEdit/Header/styles.js

@@ -0,0 +1,49 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    /* Hide left header when the RCE editor is in fullscreen mode */
+    globalStyles: {
+      'body.tox-fullscreen .leftHeader': {
+        display: 'none'
+      }
+    },
+    header: {
+      backgroundColor: componentTheme.headerBackgroundColor,
+      color: componentTheme.headerColor,
+      padding: componentTheme.headerPadding,
+      display: 'flex',
+      justifyContent: 'space-between',
+      verticalAlign: 'middle',
+      alignItems: 'center'
+    },
+    leftHeader: {
+      flex: '8 0 0',
+      display: 'inline-flex',
+      flexWrap: 'nowrap',
+      alignItems: 'center',
+
+      /* fix for ie11 */
+      width: '100%'
+    },
+    interactionType: {
+      fontSize: componentTheme.interactionTypeFontSize,
+      marginLeft: componentTheme.interactionTypeLeftMargin,
+      marginRight: componentTheme.interactionTypeRightMargin
+    },
+    dividingLine: {
+      width: '0',
+      borderLeft: componentTheme.dividingLineLeftBorder
+    },
+    titleHolder: {
+      display: 'flex',
+      flex: '1 1 auto'
+    },
+    titleInput: {
+      flex: '1 1 auto',
+      fontSize: componentTheme.titleInputFontSize,
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quizEntry/QuizEntryEdit/Header/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography;
@@ -11,4 +11,6 @@ export default function generator(_ref) {
     interactionTypeRightMargin: spacing.xSmall,
     titleInputFontSize: typography.fontSizeMedium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/quizEntry/QuizEntryEdit/presenter.js

@@ -7,32 +7,29 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/* eslint-disable no-unused-vars */
+
+/** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { DragSource } from 'react-dnd';
 import pick from 'lodash/pick';
 import first from 'lodash/first';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, Global } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CustomPropTypes from "../../../../../common/util/CustomPropTypes.js";
 import elementsForSelectors from "../../../../../common/util/ElementsForSelectors.js";
 import AddToBankModal from "../../../../../banks/components/AddToBankModal/index.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
-import wrapWithOutsideClick from "../../../../../common/components/shared/functionality/componentWithOutsideClick.js";
+import wrapWithOutsideClickEmotion from "../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js";
 import QuizEntryEditHeader from "./Header/index.js";
 import QuizEntryEditFooter from "./Footer/index.js";
 import { SHOULD_CLONE_ITEM, TEMPORARY_ITEM_ID, DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, CLEAR_ALL_INPUT_VALIDATION_ERRORS, PARENT_TYPE_ADDING_TO_BANK } from '@instructure/quiz-common';
 import { ItemTypes, dragSource, collectDrag } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
-var styles = {
-  componentId: 'bZuQH',
-  template: function template(theme) {
-    return "\n\n.bZuQH_qRLg{font-size:".concat(theme.quizEntryEditFontSize || 'inherit', ";margin:").concat(theme.quizEntryEditMargin || 'inherit', " 0;position:relative;transform:translateZ(0);z-index:3333}\n\nbody.tox-fullscreen .bZuQH_qRLg{transform:none;z-index:6666}");
-  },
-  'quizEntryEdit': 'bZuQH_qRLg'
-};
-import theme from "./theme.js";
-var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+var QuizEntryEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryEdit, _Component);
 
   var _super = _createSuper(QuizEntryEdit);
@@ -323,9 +320,9 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
         draggingOver: draggingOver,
         draggingAboveHalf: draggingAboveHalf
       };
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      return jsx("div", null, jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), connectDragPreview(_this.renderForm()), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      })), connectDragPreview(_this.renderForm()), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "below"
       })));
     };
@@ -374,7 +371,7 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       var isItemOrBankEntry = this.props.quizEntry.isItem || this.props.quizEntry.isBankEntry;
       if (!(isItemOrBankEntry || this.props.disabledForRegrade)) return;
       var footerProps = pick(this.props, ['alternativeRightFooter', 'changeQuizEntryPoints', 'clearTemporaryItem', 'displayPosition', 'entry', 'guid', 'initialFocusId', 'openModal', 'quizEntry', 'setUi', 'shouldClone', 'workingQuizEntry']);
-      return /*#__PURE__*/React.createElement(QuizEntryEditFooter, Object.assign({
+      return jsx(QuizEntryEditFooter, Object.assign({
         clearChanges: this.clearChanges,
         isValid: this.isValid(),
         successfulSubmit: this.successfulSubmit,
@@ -385,7 +382,7 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     key: "renderAddToBankModal",
     value: function renderAddToBankModal() {
       if (!this.props.quizEntry.isItem) return;
-      return /*#__PURE__*/React.createElement(AddToBankModal, {
+      return jsx(AddToBankModal, {
         label: t('Add to an Item Bank'),
         onContinue: this.handleAddToBankContinue,
         onAdd: this.handleAddToBank,
@@ -400,7 +397,7 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     key: "renderHeader",
     value: function renderHeader() {
       var headerProps = pick(this.props, ['changeItemTitle', 'clearModifications', 'clearTemporaryItem', 'connectDragSource', 'createTempItem', 'disabledForRegrade', 'displayPosition', 'entry', 'guid', 'hideError', 'initialFocusId', 'name', 'newActiveBank', 'quizEntries', 'quizEntry', 'quizId', 'removeQuizEntry', 'richFITBEnabled', 'richFITBInteractionID', 'screenreaderNotification', 'setUi', 'shouldClone', 'showError', 'withConfirm', 'workingEntry', 'workingQuizEntry']);
-      return /*#__PURE__*/React.createElement(QuizEntryEditHeader, Object.assign({
+      return jsx(QuizEntryEditHeader, Object.assign({
         isValid: this.isValid(),
         successfulSubmit: this.successfulSubmit,
         disableSubmit: this.shouldDisableSubmit()
@@ -409,17 +406,19 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   }, {
     key: "renderForm",
     value: function renderForm() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.quizEntryEdit,
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.quizEntryEdit,
         "data-automation": "sdk-quiz-entry-edit-div"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         role: "form"
-      }, this.renderHeader(), this.props.children, this.renderFooter()), this.renderAddToBankModal());
+      }, this.renderHeader(), this.props.children, this.renderFooter()), this.renderAddToBankModal()));
     }
   }, {
     key: "render",
     value: function render() {
-      return this.props.disabledForRegrade ? this.renderForm() : this.renderDraggable();
+      return jsx(React.Fragment, null, jsx(Global, {
+        styles: this.props.styles.globalStyles
+      }), this.props.disabledForRegrade ? this.renderForm() : this.renderDraggable());
     }
   }]);
 
@@ -493,7 +492,8 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   // from connected component
   withConfirm: PropTypes.func.isRequired,
   workingEntry: ImmutablePropTypes.record.isRequired,
-  workingQuizEntry: ImmutablePropTypes.record.isRequired
+  workingQuizEntry: ImmutablePropTypes.record.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   alternativeRightFooter: null,
   children: null,
@@ -510,5 +510,5 @@ var QuizEntryEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   shouldClone: false
 }, _temp)) || _class);
 export var UndecoratedQuizEntryEdit = QuizEntryEdit;
-export var QuizEntryEditRaw = wrapWithOutsideClick(QuizEntryEdit);
+export var QuizEntryEditRaw = wrapWithOutsideClickEmotion(QuizEntryEdit);
 export default DragSource(ItemTypes.QUIZ_ENTRY, dragSource, collectDrag)(QuizEntryEditRaw);