@instructure/quiz-core 20.9.0 → 20.9.1-rc.0

package/es/building/components/resources/ActionButtons/presenter.js

@@ -1,4 +1,3 @@
-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";
@@ -6,29 +5,21 @@ 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 classnames from 'classnames';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconEditLine, IconTrashLine, IconDuplicateLine } from '@instructure/ui-icons';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, Global } from '@instructure/emotion';
 import DragHandle from "../../../../common/components/shared/drag_and_drop/DragHandle/index.js";
 import makeScrollable from "../../../../common/components/shared/functionality/makeScrollable.js";
 import noop from "../../../../common/util/noop.js";
 import { EDIT, REMOVE, COPY } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'gEXZO',
-  template: function template(theme) {
-    return "\n\n.gEXZO_exDh{color:".concat(theme.buttonsColor || 'inherit', ";display:inline-flex;flex:0 0 auto;font-size:1.1rem;padding:0 ").concat(theme.buttonsPadding || 'inherit', ";text-align:right;z-index:").concat(theme.buttonsZIndex || 'inherit', "}\n\n[dir=ltr] .gEXZO_exDh,[dir=rtl] .gEXZO_exDh{text-align:right}\n\n.gEXZO_fwKS.gEXZO_bBLs,body.tox-fullscreen .gEXZO_exDh{display:none}\n\n@media print{.gEXZO_exDh{display:none}}");
-  },
-  'buttons': 'gEXZO_exDh',
-  'edit': 'gEXZO_fwKS',
-  'hide': 'gEXZO_bBLs'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 var ScrollTargetButton = makeScrollable(IconButton);
-export var ActionButtons = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var ActionButtons = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ActionButtons, _Component);
 
   var _super = _createSuper(ActionButtons);
@@ -73,6 +64,11 @@ export var ActionButtons = (_dec = themeable(theme, styles), _dec(_class = (_tem
     value: function shouldFocusOnMount() {
       return this.props.shouldFocusOnMount && !this.props.editingAddContentPopover;
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -84,20 +80,24 @@ export var ActionButtons = (_dec = themeable(theme, styles), _dec(_class = (_tem
           _this2.editButton && _this2.editButton.getWrappedInstance().setFocus();
         }, 50);
       }
+
+      this.props.makeStyles();
     }
   }, {
     key: "render",
     value: function render() {
-      var _classnames;
-
-      var editClasses = classnames((_classnames = {}, _defineProperty(_classnames, styles.edit, true), _defineProperty(_classnames, styles.hide, !this.props.shouldRenderEdit), _classnames));
-      return /*#__PURE__*/React.createElement("div", {
+      var hideClass = !this.props.shouldRenderEdit ? 'hide' : '';
+      return jsx("div", {
+        className: "buttons",
         tabIndex: "-1",
         onFocus: this.onButtonFocus,
-        className: styles.buttons
-      }, /*#__PURE__*/React.createElement("div", {
-        className: editClasses
-      }, /*#__PURE__*/React.createElement(ScrollTargetButton, {
+        css: this.props.styles.buttons
+      }, jsx(Global, {
+        styles: this.props.styles.globalStyles
+      }), jsx("div", {
+        className: hideClass,
+        css: this.props.styles.edit
+      }, jsx(ScrollTargetButton, {
         as: "div",
         onClick: this.switchOnEditing,
         scrollKey: this.props.scrollKey,
@@ -109,7 +109,7 @@ export var ActionButtons = (_dec = themeable(theme, styles), _dec(_class = (_tem
         shouldFocusOnMount: this.shouldFocusOnMount(),
         screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, EDIT),
         ref: this.setEditRef
-      })), this.props.questionCopyEnabled && this.props.onCopy && /*#__PURE__*/React.createElement(IconButton, {
+      })), this.props.questionCopyEnabled && this.props.onCopy && jsx(IconButton, {
         as: "div",
         onClick: this.props.onCopy,
         disabled: this.props.shouldDisableCopy,
@@ -119,12 +119,12 @@ export var ActionButtons = (_dec = themeable(theme, styles), _dec(_class = (_tem
         size: "small",
         "data-automation": "sdk-copy-question-button",
         screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, COPY)
-      }), this.connectDragSource( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DragHandle, {
+      }), this.connectDragSource(jsx("div", null, jsx(DragHandle, {
         displayPosition: this.props.displayPosition,
         quizEntry: this.props.quizEntry,
         quizEntries: this.props.quizEntries,
         disabled: this.props.shouldDisableDragHandle
-      }))), this.props.shouldRenderDelete && /*#__PURE__*/React.createElement(IconButton, {
+      }))), this.props.shouldRenderDelete && jsx(IconButton, {
         as: "div",
         onClick: this.props.onDelete,
         disabled: this.props.shouldDisableDeleteButton,
@@ -156,7 +156,9 @@ export var ActionButtons = (_dec = themeable(theme, styles), _dec(_class = (_tem
   shouldRenderEdit: PropTypes.bool,
   shouldRenderDelete: PropTypes.bool,
   switchOnEditing: PropTypes.func,
-  shouldFocusOnMount: PropTypes.bool
+  shouldFocusOnMount: PropTypes.bool,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   onCopy: null,
   scrollKey: void 0,

package/es/building/components/resources/ActionButtons/styles.js

@@ -0,0 +1,33 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var mq = '@media print';
+  return {
+    buttons: _defineProperty({
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      textAlign: 'right',
+      zIndex: componentTheme.buttonsZIndex,
+      color: componentTheme.buttonsColor,
+      fontSize: '1.1rem',
+      padding: "0 ".concat(componentTheme.buttonsPadding)
+    }, mq, {
+      display: 'none'
+    }),
+
+    /* Hide buttons when the RCE editor is in fullscreen mode */
+    edit: _objectSpread({
+      display: 'inline'
+    }, !props.shouldRenderEdit && {
+      display: 'none'
+    }),
+    globalStyles: {
+      'body.tox-fullscreen .buttons': {
+        display: 'none'
+      }
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/ActionButtons/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors;
   return {
@@ -6,4 +6,6 @@ export default function generator(_ref) {
     buttonsColor: colors.oxford,
     buttonsPadding: spacing.xSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/AddToBankOptions/index.js

@@ -5,22 +5,17 @@ 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 { CondensedButton } from '@instructure/ui-buttons';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { ADD_TO_BANK_MODAL } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'bsvMb',
-  template: function template(theme) {
-    return "\n\n.bsvMb_dNGs{background-color:".concat(theme.addToBankBackgroundColor || 'inherit', ";border:1px dashed ").concat(theme.addToBankBorderColor || 'inherit', ";text-align:center}\n\n[dir=ltr] .bsvMb_dNGs,[dir=rtl] .bsvMb_dNGs{text-align:center}");
-  },
-  'addToBank': 'bsvMb_dNGs'
-};
-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 AddToBankOptions = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var AddToBankOptions = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AddToBankOptions, _Component);
 
   var _super = _createSuper(AddToBankOptions);
@@ -65,10 +60,10 @@ export var AddToBankOptions = (_dec = themeable(theme, styles), _dec(_class = (_
   _createClass(AddToBankOptions, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(View, {
+      return jsx("div", null, jsx(View, {
         as: "div",
-        className: styles.addToBank
-      }, /*#__PURE__*/React.createElement(CondensedButton, {
+        css: this.props.styles.addToBank
+      }, jsx(CondensedButton, {
         color: "primary",
         ref: this.storeAddToBankLinkRef,
         onClick: this.openAddToBankModal,
@@ -87,6 +82,7 @@ export var AddToBankOptions = (_dec = themeable(theme, styles), _dec(_class = (_
   isValid: PropTypes.bool.isRequired,
   openModal: PropTypes.func.isRequired,
   screenreaderNotification: PropTypes.func.isRequired,
-  showError: PropTypes.func.isRequired
+  showError: PropTypes.func.isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default AddToBankOptions;

package/es/building/components/resources/AddToBankOptions/styles.js

@@ -0,0 +1,11 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    addToBank: {
+      backgroundColor: componentTheme.addToBankBackgroundColor,
+      border: "1px dashed ".concat(componentTheme.addToBankBorderColor),
+      textAlign: 'center'
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/AddToBankOptions/theme.js

@@ -1,8 +1,10 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors;
   return {
     addToBankBackgroundColor: colors.porcelain,
     addToBankBorderColor: colors.oxford
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/DeleteStimulusModal/presenter.js

@@ -5,7 +5,8 @@ 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';
@@ -15,27 +16,18 @@ import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { RadioInputGroup, RadioInput } from '@instructure/ui-radio-input';
 import { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
 import { Modal, ModalHeader, ModalBody, ModalFooter, DELETE_STIMULUS_MODAL_SELECTED_CHILDREN, DELETE_STIMULUS_MODAL_DELETION_MODE, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'cbBqk',
-  template: function template(theme) {
-    return "\n\n.cbBqk_UaUO{padding:".concat(theme.checkboxWrapperPadding || 'inherit', " 0}\n\n.cbBqk_eoFP{margin-left:auto;width:95%}\n\n.cbBqk_fJZN{font-size:").concat(theme.stimulusTitleFontSize || 'inherit', ";padding-bottom:").concat(theme.stimulusTitleBottomPadding || 'inherit', "}\n\n.cbBqk_fuUc{padding-bottom:").concat(theme.radioSpaceBottomPadding || 'inherit', "}");
-  },
-  'checkboxWrapper': 'cbBqk_UaUO',
-  'checkboxesWrapper': 'cbBqk_eoFP',
-  'stimulusTitle': 'cbBqk_fJZN',
-  'radioSpace': 'cbBqk_fuUc'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref = /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("hr", null));
+var _ref = jsx(PresentationContent, null, jsx("hr", null));
 
-var _ref2 = /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("hr", null));
+var _ref2 = jsx(PresentationContent, null, jsx("hr", null));
 
-export var DeleteStimulusModal = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var DeleteStimulusModal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(DeleteStimulusModal, _Component);
 
   var _super = _createSuper(DeleteStimulusModal);
@@ -112,10 +104,10 @@ export var DeleteStimulusModal = (_dec = themeable(theme, styles), _dec(_class =
           });
         }
 
-        return /*#__PURE__*/React.createElement("div", {
+        return jsx("div", {
           key: childEntry.id,
-          className: styles.checkboxWrapper
-        }, /*#__PURE__*/React.createElement(Checkbox, {
+          css: _this.props.styles.checkboxWrapper
+        }, jsx(Checkbox, {
           checked: isChecked,
           label: extractTextFromHtml(itemBody),
           onChange: _this.toggleChildSelected(childEntry),
@@ -124,9 +116,9 @@ export var DeleteStimulusModal = (_dec = themeable(theme, styles), _dec(_class =
         }));
       });
 
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: "checkboxes",
-        className: styles.checkboxesWrapper
+        css: _this.props.styles.checkboxesWrapper
       }, _ref, checkboxes, _ref2);
     };
 
@@ -176,7 +168,7 @@ export var DeleteStimulusModal = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "cancelButton",
     value: function cancelButton() {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         onClick: this.closeAction,
         margin: XSMALL_SIDE_MARGIN
       }, t('Keep Stimulus'));
@@ -188,7 +180,7 @@ export var DeleteStimulusModal = (_dec = themeable(theme, styles), _dec(_class =
           deletionMode = _this$props3.deletionMode,
           childEntries = _this$props3.childEntries;
       var disabled = !deletionMode && childEntries.size > 0;
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         disabled: disabled,
         color: "primary",
         onClick: this.handleSubmit,
@@ -203,64 +195,65 @@ export var DeleteStimulusModal = (_dec = themeable(theme, styles), _dec(_class =
         return;
       }
 
-      return /*#__PURE__*/React.createElement(RadioInput, {
+      return jsx(RadioInput, {
         key: "chooseWhich",
         value: "chooseWhich",
-        label: /*#__PURE__*/React.createElement("div", {
-          className: styles.radioSpace
+        label: jsx("div", {
+          css: this.props.styles.radioSpace
         }, t('Remove stimulus and choose which questions to remove.'), this.renderCheckboxes())
       });
     }
   }, {
     key: "renderMainMenu",
     value: function renderMainMenu() {
-      return /*#__PURE__*/React.createElement(RadioInputGroup, {
+      return jsx(RadioInputGroup, {
         name: "deletionMode",
         defaultValue: this.props.deletionMode,
         onChange: this.setDeletionMode,
-        description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Stimulus Removal Mode'))
-      }, /*#__PURE__*/React.createElement(RadioInput, {
+        description: jsx(ScreenReaderContent, null, t('Stimulus Removal Mode'))
+      }, jsx(RadioInput, {
         key: "deleteAll",
         value: "deleteAll",
-        label: /*#__PURE__*/React.createElement("div", {
-          className: styles.radioSpace
+        label: jsx("div", {
+          css: this.props.styles.radioSpace
         }, t('Remove stimulus and all attached questions.'))
-      }), this.renderChooseWhich(), /*#__PURE__*/React.createElement(RadioInput, {
+      }), this.renderChooseWhich(), jsx(RadioInput, {
         key: "deleteNone",
         value: "deleteNone",
-        label: /*#__PURE__*/React.createElement("div", {
-          className: styles.radioSpace
+        label: jsx("div", {
+          css: this.props.styles.radioSpace
         }, t('Remove stimulus only. Questions will be released into assessment.'))
       }));
     }
   }, {
     key: "renderContent",
     value: function renderContent() {
-      var content = this.props.childEntries.size === 0 ? /*#__PURE__*/React.createElement("span", null, t('Are you sure you want to remove this stimulus?')) : this.renderMainMenu();
+      var content = this.props.childEntries.size === 0 ? jsx("span", null, t('Are you sure you want to remove this stimulus?')) : this.renderMainMenu();
       var stimulusTitle = this.props.stimulusEntry && this.props.stimulusEntry.getEntry().title;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.deleteStimulusModal
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulusTitle
+      return jsx("div", {
+        className: "deleteStimulusModal",
+        css: this.props.styles.deleteStimulusModal
+      }, jsx("div", {
+        css: this.props.styles.deleteStimulusModal.stimulusTitle
       }, stimulusTitle), content);
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Modal, {
+      return jsx(Modal, {
         open: this.props.modalOpen,
         onDismiss: this.closeAction,
         size: "small",
         label: t('Confirm Stimulus Removal')
-      }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(ModalHeader, null, jsx(Heading, {
         level: "reset",
         as: "h2"
-      }, t('Confirm Stimulus Removal')), /*#__PURE__*/React.createElement(CloseButton, {
+      }, t('Confirm Stimulus Removal')), jsx(CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), /*#__PURE__*/React.createElement(ModalBody, null, this.renderContent()), /*#__PURE__*/React.createElement(ModalFooter, null, this.cancelButton(), this.doneButton()));
+      })), jsx(ModalBody, null, this.renderContent()), jsx(ModalFooter, null, this.cancelButton(), this.doneButton()));
     }
   }]);
 
@@ -276,7 +269,8 @@ export var DeleteStimulusModal = (_dec = themeable(theme, styles), _dec(_class =
   setUi: PropTypes.func.isRequired,
   withConfirm: PropTypes.func.isRequired,
   stimulusEntry: ImmutablePropTypes.record,
-  quizId: PropTypes.string
+  quizId: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   selectedChildren: Set.of(),
   deletionMode: '',

package/es/building/components/resources/DeleteStimulusModal/styles.js

@@ -0,0 +1,22 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    checkboxWrapper: {
+      padding: "".concat(componentTheme.checkboxWrapperPadding, " 0")
+    },
+    checkboxesWrapper: {
+      width: '95%',
+      marginLeft: 'auto'
+    },
+    deleteStimulusModal: {
+      stimulusTitle: {
+        paddingBottom: componentTheme.stimulusTitleBottomPadding,
+        fontSize: componentTheme.stimulusTitleFontSize
+      }
+    },
+    radioSpace: {
+      paddingBottom: componentTheme.radioSpaceBottomPadding
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/DeleteStimulusModal/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography;
   return {
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     stimulusTitleFontSize: typography.fontSizeLarge,
     radioSpaceBottomPadding: spacing.xSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/es/building/components/resources/ItemFeedbackModal/presenter.js

@@ -5,28 +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 ImmutablePropTypes from 'react-immutable-proptypes';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
-import { RichContentRenderer, RichContentInput, RCE_THREE_LINES_HEIGHT } from '@instructure/quiz-rce';
+import { withStyle, jsx } from '@instructure/emotion';
+import { RichContentRendererEmotion, RichContentInput, RCE_THREE_LINES_HEIGHT } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Modal, ModalHeader, ModalBody, ModalFooter, ITEM_FEEDBACK_MODAL_FEEDBACK, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'esPWW',
-  template: function template(theme) {
-    return "\n\n.esPWW_hRNi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.esPWW_eCKf{font-size:".concat(theme.feedbackLabelFontSize || 'inherit', "}");
-  },
-  'itemStem': 'esPWW_hRNi',
-  'feedbackLabel': 'esPWW_eCKf'
-};
-import theme from "./theme.js";
-
-var _ref = /*#__PURE__*/React.createElement("br", null);
-
-export var ItemFeedbackModal = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx("br", null);
+
+export var ItemFeedbackModal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ItemFeedbackModal, _Component);
 
   var _super = _createSuper(ItemFeedbackModal);
@@ -72,7 +66,7 @@ export var ItemFeedbackModal = (_dec = themeable(theme, styles), _dec(_class = (
   _createClass(ItemFeedbackModal, [{
     key: "cancelButton",
     value: function cancelButton() {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         onClick: this.closeAction,
         margin: XSMALL_SIDE_MARGIN
       }, t('Cancel'));
@@ -80,7 +74,7 @@ export var ItemFeedbackModal = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "doneButton",
     value: function doneButton() {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         color: "primary",
         onClick: this.continueAction,
         margin: XSMALL_SIDE_MARGIN
@@ -89,10 +83,10 @@ export var ItemFeedbackModal = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "renderRichContentInput",
     value: function renderRichContentInput(key, label) {
-      return /*#__PURE__*/React.createElement("div", null, _ref, /*#__PURE__*/React.createElement("label", {
-        className: styles.feedbackLabel,
+      return jsx("div", null, _ref, jsx("label", {
+        css: this.props.styles.feedbackLabel,
         htmlFor: key
-      }, label), /*#__PURE__*/React.createElement(RichContentInput, {
+      }, label), jsx(RichContentInput, {
         label: "",
         textareaId: key,
         defaultContent: this.props.feedback.get(key),
@@ -103,15 +97,15 @@ export var ItemFeedbackModal = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RichContentRenderer, {
-        customStyles: styles.itemStem,
+      return jsx("div", null, jsx(RichContentRendererEmotion, {
+        customStyles: this.props.styles.itemStem,
         content: this.props.item.itemBody
       }), this.renderRichContentInput('correct', t('For a correct answer')), this.renderRichContentInput('incorrect', t('For an incorrect answer')), this.renderRichContentInput('neutral', t('Provide general feedback (regardless of answer)')));
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
+      return jsx("div", null, jsx(Modal, {
         open: this.props.modalOpen || this.props.importModalOpen,
         onClose: this.closeAction,
         size: "large",
@@ -119,15 +113,15 @@ export var ItemFeedbackModal = (_dec = themeable(theme, styles), _dec(_class = (
         shouldCloseOnDocumentClick: false // must be false to allow interacting with RCE modals (such as embed media)
         ,
         shouldReturnFocus: false
-      }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(ModalHeader, null, jsx(Heading, {
         level: "reset",
         as: "h2"
-      }, t('Student Feedback')), /*#__PURE__*/React.createElement(CloseButton, {
+      }, t('Student Feedback')), jsx(CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), /*#__PURE__*/React.createElement(ModalBody, null, this.renderContent()), /*#__PURE__*/React.createElement(ModalFooter, null, this.cancelButton(), this.doneButton())));
+      })), jsx(ModalBody, null, this.renderContent()), jsx(ModalFooter, null, this.cancelButton(), this.doneButton())));
     }
   }]);
 
@@ -141,7 +135,8 @@ export var ItemFeedbackModal = (_dec = themeable(theme, styles), _dec(_class = (
   item: ImmutablePropTypes.record.isRequired,
   modalOpen: PropTypes.bool.isRequired,
   setUi: PropTypes.func.isRequired,
-  modalTrigger: PropTypes.instanceOf(Component)
+  modalTrigger: PropTypes.instanceOf(Component),
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   modalTrigger: null
 }, _temp)) || _class);

package/es/building/components/resources/ItemFeedbackModal/styles.js

@@ -0,0 +1,14 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    itemStem: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    feedbackLabel: {
+      fontSize: componentTheme.feedbackLabelFontSize
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/ItemFeedbackModal/theme.js

@@ -1,6 +1,8 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var typography = _ref.typography;
   return {
     feedbackLabelFontSize: typography.fontSizeSmall
   };
-}
+};
+
+export default generateComponentTheme;