@instructure/quiz-core 20.11.3-rc.19 → 20.11.3-rc.20

package/es/building/components/resources/quizEntry/QuizEntry/index.js

@@ -14,6 +14,7 @@ import { DropTargetCreator } from "../../../../../common/components/shared/drag_
 import { QuizEntry as QuizEntryPresenter } from "./presenter.js";
 import { SHOULD_CLONE_ITEM, QUIZ_ENTRY_GUID_SUFFIX, QUIZ_ENTRY_REF } from '@instructure/quiz-common';
 import { getActiveQuiz } from "../../../../../common/selectors/quizzes.js";
+import quizEntryPresenterWrapper from "./quizEntryPresenterWrapper.js";
 export var mapStateToProps = function mapStateToProps(state, props) {
   var activeQuiz = getActiveQuiz(state);
   var quizId = activeQuiz.id;
@@ -67,5 +68,5 @@ var dispatchToProps = {
   setUi: set,
   showError: showError
 };
-export var QuizEntry = compose(connect(mapStateToProps, dispatchToProps), makeEditable, DropTargetCreator(QUIZ_ENTRY_REF))(QuizEntryPresenter);
+export var QuizEntry = compose(connect(mapStateToProps, dispatchToProps), makeEditable, DropTargetCreator(QUIZ_ENTRY_REF))(quizEntryPresenterWrapper(QuizEntryPresenter));
 export default QuizEntry;

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

@@ -7,13 +7,14 @@ 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 { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import pick from 'lodash/pick';
 import partial from 'lodash/partial';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import WarningWrapper from "../../../../../common/components/resources/WarningWrapper/index.js";
 import { propsForItemBankEntryEditPrompt, propsForStimulusBankEntryEditPrompt, propsForBankEntryUnauthorizedEdit, propsForItemVersioningWrapper, propsForBankEntryVersioningWrapper } from "../../../../../common/util/warningHelpers.js";
@@ -30,17 +31,9 @@ import { BUILD_TRAY_OPEN, PARENT_TYPE_QUIZ, REGRADE_MODAL, SHOULD_CLONE_ITEM } f
 import QuizEntryShow from "../QuizEntryShow/index.js";
 import QuizEntryEdit from "../QuizEntryEdit/index.js";
 import Stimulus from "../../../../../common/components/resources/stimulus/Stimulus/index.js";
-var styles = {
-  componentId: 'erzHq',
-  template: function template(theme) {
-    return "\n\n.erzHq_cjWK{border-top:".concat(theme.footerBorderWidth || 'inherit', " solid ").concat(theme.footerBorderColor || 'inherit', ";font-size:").concat(theme.footerFontSize || 'inherit', ";overflow:auto;padding:").concat(theme.footerPadding || 'inherit', "}\n\n.erzHq_fpkp{display:none}\n\n@media print{.erzHq_fpkp{display:inherit}.erzHq_dcyh{display:none}}");
-  },
-  'footer': 'erzHq_cjWK',
-  'sampleItems': 'erzHq_fpkp',
-  'bankItem': 'erzHq_dcyh'
-};
-import theme from "./theme.js";
-export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var QuizEntry = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntry, _Component);
 
   var _super = _createSuper(QuizEntry);
@@ -67,7 +60,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     };
 
     _this.renderItemBankingOptions = function () {
-      return /*#__PURE__*/React.createElement(AddToBankOptions, {
+      return jsx(AddToBankOptions, {
         displayPosition: _this.props.displayPosition,
         entryType: _this.props.quizEntry.entryType,
         guid: _this.props.guid,
@@ -99,10 +92,10 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         interactionTypeName: entryMutable.interactionType.name
       });
 
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: index,
-        className: styles.sampleItems
-      }, /*#__PURE__*/React.createElement(QuizEntryShow, overrideProps, /*#__PURE__*/React.createElement(ItemShow, _this.propsForItem(item))));
+        css: _this.props.styles.sampleItems
+      }, jsx(QuizEntryShow, overrideProps, jsx(ItemShow, _this.propsForItem(item))));
     };
 
     _this.bankEntryWarningWrapperProps = function () {
@@ -196,7 +189,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var quizEntryProps = this.quizEntryProps();
       var propsForWrapperFunc = quizEntry.isArchivedBankEntry ? propsForBankEntryVersioningWrapper : propsForItemVersioningWrapper;
       var propsForItemVersioning = propsForWrapperFunc(entry.isImmutable() || quizEntry.isArchivedBankEntry, shouldClone, partial(this.props.setUi, SHOULD_CLONE_ITEM), this.props.switchOffEditing, isEditing, quizEntry.isArchivedBankEntry ? 'info' : 'warning');
-      return /*#__PURE__*/React.createElement(QuizEntryComponent, quizEntryProps, /*#__PURE__*/React.createElement(WarningWrapper, propsForItemVersioning, /*#__PURE__*/React.createElement(ItemComponent, itemProps)));
+      return jsx(QuizEntryComponent, quizEntryProps, jsx(WarningWrapper, propsForItemVersioning, jsx(ItemComponent, itemProps)));
     }
   }, {
     key: "renderBank",
@@ -210,9 +203,9 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         name: bank.title
       };
       var sampleItems = this.props.quizEntry.sampleItems;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.bankItem
-      }, /*#__PURE__*/React.createElement(QuizEntryComponent, Object.assign({}, this.props, bankProps), /*#__PURE__*/React.createElement(QuizEntryBankComponent, Object.assign({}, this.props, bankProps)))), sampleItems.map(this.renderPrintableItemBankSample));
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.bankItem
+      }, jsx(QuizEntryComponent, Object.assign({}, this.props, bankProps), jsx(QuizEntryBankComponent, Object.assign({}, this.props, bankProps)))), sampleItems.map(this.renderPrintableItemBankSample));
     }
   }, {
     key: "isOverridable",
@@ -243,9 +236,9 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var itemProps = this.propsForItem();
       var mergedItem = this.isEditing() ? this.props.workingQuizEntry.getItem() : itemProps.entry;
       var ItemComponent = this.isOverriding() ? ItemOverride : ItemShow;
-      return /*#__PURE__*/React.createElement(QuizEntryComponent, quizEntryProps, /*#__PURE__*/React.createElement(WarningWrapper, Object.assign({}, bankEntryWarningWrapperProps, {
+      return jsx(QuizEntryComponent, quizEntryProps, jsx(WarningWrapper, Object.assign({}, bankEntryWarningWrapperProps, {
         disableChildren: this.isEditing() && !this.isOverridable()
-      }), /*#__PURE__*/React.createElement(ItemComponent, Object.assign({}, itemProps, {
+      }), jsx(ItemComponent, Object.assign({}, itemProps, {
         entry: mergedItem,
         quizEntry: this.props.quizEntry
       }))), this.renderFooter());
@@ -253,7 +246,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   }, {
     key: "renderStimulus",
     value: function renderStimulus(bankEntryWarningWrapperProps) {
-      return /*#__PURE__*/React.createElement(Stimulus, {
+      return jsx(Stimulus, {
         bankEntryWarningWrapperProps: bankEntryWarningWrapperProps,
         childEntries: this.props.childEntries,
         displayPosition: this.props.displayPosition,
@@ -281,7 +274,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   }, {
     key: "renderTags",
     value: function renderTags() {
-      return /*#__PURE__*/React.createElement(TagDisplay, {
+      return jsx(TagDisplay, {
         tagAssociations: this.props.tagAssociations
       });
     }
@@ -297,8 +290,8 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.footer
+      return jsx("div", {
+        css: this.props.styles.footer
       }, this.renderTags());
     }
   }, {
@@ -327,7 +320,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   }, {
     key: "render",
     value: function render() {
-      return this.props.connectDropTarget( /*#__PURE__*/React.createElement("div", {
+      return this.props.connectDropTarget(jsx("div", {
         tabIndex: "-1"
       }, this.renderQuizEntryByType()));
     }
@@ -378,7 +371,8 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     type: PropTypes.string,
     text: PropTypes.string
   }))),
-  stimulusOrientation: PropTypes.string
+  stimulusOrientation: PropTypes.string,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   childEntries: List(),
   draggingAboveHalf: false,

package/es/building/components/resources/quizEntry/QuizEntry/quizEntryPresenterWrapper.js

@@ -0,0 +1,39 @@
+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";
+import React from 'react';
+
+var isClassComponent = function isClassComponent(Component) {
+  return !!(typeof Component === 'function' && Component.prototype && Component.prototype.isReactComponent);
+};
+
+var quizEntryPresenterWrapper = function quizEntryPresenterWrapper(Component) {
+  if (isClassComponent(Component)) {
+    return Component;
+  }
+
+  return /*#__PURE__*/function (_React$Component) {
+    _inherits(ClassComponentWrapper, _React$Component);
+
+    var _super = _createSuper(ClassComponentWrapper);
+
+    function ClassComponentWrapper() {
+      _classCallCheck(this, ClassComponentWrapper);
+
+      return _super.apply(this, arguments);
+    }
+
+    _createClass(ClassComponentWrapper, [{
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(Component, this.props);
+      }
+    }]);
+
+    ClassComponentWrapper.displayName = "ClassComponentWrapper";
+    return ClassComponentWrapper;
+  }(React.Component);
+};
+
+export default quizEntryPresenterWrapper;

package/es/building/components/resources/quizEntry/QuizEntry/styles.js

@@ -0,0 +1,23 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mp = '@media print';
+  return {
+    footer: {
+      overflow: 'auto',
+      padding: componentTheme.footerPadding,
+      borderTop: "".concat(componentTheme.footerBorderWidth, " solid ").concat(componentTheme.footerBorderColor),
+      fontSize: componentTheme.footerFontSize
+    },
+    sampleItems: _defineProperty({
+      display: 'none'
+    }, mp, {
+      display: 'inherit'
+    }),
+    bankItem: _defineProperty({}, mp, {
+      display: 'none'
+    })
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quizEntry/QuizEntry/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       borders = _ref.borders,
@@ -9,4 +9,6 @@ export default function generator(_ref) {
     footerBorderColor: colors.tiara,
     footerFontSize: typography.fontSizeXSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/stimulus/Stimulus/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,37 +5,24 @@ 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 { DragSource } from 'react-dnd';
 import { List, Map } from 'immutable';
-import classnames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import AddContentPopover from "../../quiz/AddContent/Popover/index.js";
 import StimulusEdit from "../StimulusEdit/index.js";
 import StimulusShow from "../StimulusShow/index.js";
 import DragAndDropZone from "../../../shared/drag_and_drop/DragAndDropZone/index.js";
 import { ItemTypes, dragSource, collectDrag } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
-import wrapWithOutsideClick from "../../../shared/functionality/componentWithOutsideClick.js";
-import { DELETE_STIMULUS_DATA, LEFT } from '@instructure/quiz-common';
+import wrapWithOutsideClickEmotion from "../../../shared/functionality/componentWithOutsideClickEmotion.js";
+import { DELETE_STIMULUS_DATA } from '@instructure/quiz-common';
 import ConnectedQuizEntry from "../../../../../building/components/resources/quizEntry/QuizEntry/index.js";
-var styles = {
-  componentId: 'fEUId',
-  template: function template(theme) {
-    return "\n\n.fEUId_dRGY{display:flex}\n\n.fEUId_cZDz{border-right:".concat(theme.leftPanelBorderWidth || 'inherit', " solid ").concat(theme.leftPanelBorderColor || 'inherit', "}\n\n.fEUId_cZDz,.fEUId_AmHx{box-sizing:border-box;max-height:105vh;overflow:auto}\n\n.fEUId_AmHx{margin-left:calc(").concat(theme.rightPanelPadding || 'inherit', "*-1);padding-left:").concat(theme.rightPanelPadding || 'inherit', "}\n\n.fEUId_duqv{display:none}\n\n.fEUId_ehcZ{transform:translateZ(0)}\n\n.fEUId_fPOQ{background-color:transparent;border:none;color:inherit;cursor:move;font-size:").concat(theme.dragAndDropHandleFontSize || 'inherit', ";height:0;margin:").concat(theme.dragAndDropHandleMargin || 'inherit', ";margin-top:0;position:relative;z-index:").concat(theme.dragAndDropHandleZIndex || 'inherit', "}\n\n.fEUId_eLmg{width:100%}\n\n.fEUId_dORw{width:50%}\n\n@media print{.fEUId_cZDz,.fEUId_AmHx{max-height:none}}");
-  },
-  'stimulus': 'fEUId_dRGY',
-  'leftPanel': 'fEUId_cZDz',
-  'rightPanel': 'fEUId_AmHx',
-  'hidden': 'fEUId_duqv',
-  'stimulusWrapper': 'fEUId_ehcZ',
-  'dragAndDropHandle': 'fEUId_fPOQ',
-  'quizEntryWrapper': 'fEUId_eLmg',
-  'horizontallyAligned': 'fEUId_dORw'
-};
-import theme from "./theme.js";
-export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var Stimulus = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Stimulus, _Component);
 
   var _super = _createSuper(Stimulus);
@@ -68,6 +54,16 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   }
 
   _createClass(Stimulus, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "shouldDisableDragHandle",
     value: function shouldDisableDragHandle() {
       var _this$props = this.props,
@@ -92,12 +88,12 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
       return this.props.childEntries.toArray().map(function (childEntry, idx) {
         var displayPosition = nextDisplayPosition;
         nextDisplayPosition += childEntry.displayPositionSlots;
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.quizEntryWrapper,
+        return jsx("div", {
+          css: _this2.props.styles.quizEntryWrapper,
           key: childEntry.id
-        }, /*#__PURE__*/React.createElement(ConnectedQuizEntry, Object.assign({}, _this2.props.propsForQuizEntry(childEntry, displayPosition), {
+        }, jsx(ConnectedQuizEntry, Object.assign({}, _this2.props.propsForQuizEntry(childEntry, displayPosition), {
           stimulusOrientation: _this2.props.stimulusOrientationEnabled ? _this2.props.stimulus.orientation : null
-        })), !_this2.props.draggingOnBuild && !_this2.isQuizContentLocked() && /*#__PURE__*/React.createElement(AddContentPopover, {
+        })), !_this2.props.draggingOnBuild && !_this2.isQuizContentLocked() && jsx(AddContentPopover, {
           allowStimulusCreation: false,
           stimulusId: _this2.props.stimulus.id,
           parentEntryId: _this2.props.quizEntry.id,
@@ -112,9 +108,9 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     value: function renderStimulusPanel() {
       var StimulusComponent = this.props.isEditing ? StimulusEdit : StimulusShow;
       var connectDragPreview = this.props.connectDragPreview;
-      return connectDragPreview( /*#__PURE__*/React.createElement("div", {
+      return connectDragPreview(jsx("div", {
         "data-automation": "sdk-stimulus-LeftPanelShow"
-      }, /*#__PURE__*/React.createElement(StimulusComponent, {
+      }, jsx(StimulusComponent, {
         bankEntryWarningWrapperProps: this.props.bankEntryWarningWrapperProps,
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
@@ -138,25 +134,17 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   }, {
     key: "renderPanels",
     value: function renderPanels(propsForDnDZone) {
-      var _classnames2;
-
-      var _this$props3 = this.props,
-          stimulus = _this$props3.stimulus,
-          stimulusOrientationEnabled = _this$props3.stimulusOrientationEnabled;
-      var shouldSetHorizontalOrientation = stimulus.orientation === LEFT || !stimulusOrientationEnabled;
-      var stimulusPanelClass = classnames(styles.leftPanel, _defineProperty({}, styles.horizontallyAligned, shouldSetHorizontalOrientation));
-      var itemsPanelClass = classnames((_classnames2 = {}, _defineProperty(_classnames2, styles.horizontallyAligned, shouldSetHorizontalOrientation), _defineProperty(_classnames2, styles.hidden, stimulus.isTemporary()), _defineProperty(_classnames2, styles.rightPanel, !stimulus.isTemporary()), _classnames2));
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(_defineProperty({}, styles.stimulus, shouldSetHorizontalOrientation)),
+      return jsx("div", {
+        css: this.props.styles.stimulus,
         ref: this.props.dndRef,
         "data-automation": "sdk-stimulus"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: stimulusPanelClass
-      }, this.renderStimulusPanel()), /*#__PURE__*/React.createElement("div", {
-        className: itemsPanelClass
-      }, /*#__PURE__*/React.createElement("div", null), this.renderChildQuizEntries(), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      }, jsx("div", {
+        css: this.props.styles.leftPanel
+      }, this.renderStimulusPanel()), jsx("div", {
+        css: this.props.styles.itemPanel
+      }, jsx("div", null), this.renderChildQuizEntries(), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "in"
-      })), this.props.childEntries.size === 0 && !this.isQuizContentLocked() && /*#__PURE__*/React.createElement(AddContentPopover, {
+      })), this.props.childEntries.size === 0 && !this.isQuizContentLocked() && jsx(AddContentPopover, {
         allowStimulusCreation: false,
         stimulusId: this.props.stimulus.id,
         parentEntryId: this.props.quizEntry.id,
@@ -174,13 +162,13 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         draggingAboveHalf: this.props.draggingAboveHalf,
         dropIntoEmptyStimulus: this.props.dropIntoEmptyStimulus
       };
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         tabIndex: "-1"
-      }, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      }, jsx("div", null, jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), this.renderPanels(propsForDnDZone), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      })), this.renderPanels(propsForDnDZone), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "below"
-      })));
+      }))));
     }
   }]);
 
@@ -215,7 +203,9 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   switchOffEditing: PropTypes.func.isRequired,
   onEditStimulusToggle: PropTypes.func.isRequired,
   editStimulusToggle: PropTypes.bool.isRequired,
-  stimulusOrientationEnabled: PropTypes.bool.isRequired
+  stimulusOrientationEnabled: PropTypes.bool.isRequired,
+  makeStyles: PropTypes.func,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   bankEntryWarningWrapperProps: function bankEntryWarningWrapperProps() {},
   childEntries: List([]),
@@ -231,4 +221,4 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   scrollKey: '',
   isContentLockedByBlueprint: false
 }, _temp)) || _class);
-export default DragSource(ItemTypes.QUIZ_ENTRY, dragSource, collectDrag)(wrapWithOutsideClick(Stimulus));
+export default DragSource(ItemTypes.QUIZ_ENTRY, dragSource, collectDrag)(wrapWithOutsideClickEmotion(Stimulus));

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

@@ -0,0 +1,58 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { LEFT } from '@instructure/quiz-common';
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var mp = '@media print';
+  var shouldSetHorizontalOrientation = props.stimulus.orientation === LEFT || !props.stimulusOrientationEnabled;
+  return {
+    stimulus: _objectSpread({}, shouldSetHorizontalOrientation && {
+      display: 'flex'
+    }),
+    leftPanel: _objectSpread(_objectSpread({
+      boxSizing: 'border-box',
+      maxHeight: '105vh',
+      overflow: 'auto',
+      borderRight: "".concat(componentTheme.leftPanelBorderWidth, " solid ").concat(componentTheme.leftPanelBorderColor)
+    }, shouldSetHorizontalOrientation && {
+      width: '50%'
+    }), {}, _defineProperty({}, mp, {
+      maxHeight: 'none'
+    })),
+    itemPanel: _objectSpread(_objectSpread(_objectSpread({}, shouldSetHorizontalOrientation && {
+      width: '50%'
+    }), props.stimulus.isTemporary() && {
+      display: 'none'
+    }), !props.stimulus.isTemporary() && _defineProperty({
+      boxSizing: 'border-box',
+      maxHeight: '105vh',
+      overflow: 'auto',
+      paddingLeft: componentTheme.rightPanelPadding,
+      marginLeft: "calc(".concat(componentTheme.rightPanelPadding, " * -1)")
+    }, mp, {
+      maxHeight: 'none'
+    })),
+    stimulusWrapper: {
+      transform: 'translate3d(0, 0, 0)'
+      /* for drag and drop preview to work */
+
+    },
+    dragAndDropHandle: {
+      cursor: 'move',
+      height: '0',
+      zIndex: componentTheme.dragAndDropHandleZIndex,
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: 'inherit',
+      fontSize: componentTheme.dragAndDropHandleFontSize,
+      margin: componentTheme.dragAndDropHandleMargin,
+      marginTop: '0',
+      position: 'relative'
+    },
+    quizEntryWrapper: {
+      width: '100%'
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/stimulus/Stimulus/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,
@@ -12,4 +12,6 @@ export default function generator(_ref) {
     dragAndDropHandleFontSize: typography.fontSizeMedium,
     dragAndDropHandleMargin: spacing.xSmall
   };
-}
+};
+
+export default generateComponentTheme;

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);