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

package/es/common/components/SDKApp/index.js

@@ -22,7 +22,7 @@ import { getLocale } from '@instructure/quiz-common';
 import { set } from "../../actions/ui.js";
 import { addAlert } from "../../actions/alerts.js";
 import { setAPIEndpoint, setCanvasOrigin, setUserToken } from "../../actions/config.js";
-import { setContextUuid, setOutcomesEndpoint, setOutcomesToken } from "../../actions/outcomes.js";
+import { setContextUuid, setOutcomesEndpoint, setOutcomesToken, setExternalAccountUuid } from "../../actions/outcomes.js";
 import { addFeatures, removeFeatures } from "../../actions/features.js";
 import { setGradeByQuestionEnabled } from "../../actions/grading.js";
 import { renderAlerts } from "../../util/renderAlerts.js";
@@ -81,7 +81,7 @@ export var SDKApp = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp
     value: function componentWillMount() {
       var _this$props$rceConfig;
 
-      this.store.dispatch([setAPIEndpoint(this.props.apiEndpoint), setCanvasOrigin((_this$props$rceConfig = this.props.rceConfig) === null || _this$props$rceConfig === void 0 ? void 0 : _this$props$rceConfig.canvasOrigin), this.setAppContainer(this.props.appContainer), setUserToken(this.props.userToken), setOutcomesEndpoint(this.props.outcomesEndpoint), setOutcomesToken(this.props.outcomesToken), setContextUuid(this.props.contextUuid)]);
+      this.store.dispatch([setAPIEndpoint(this.props.apiEndpoint), setCanvasOrigin((_this$props$rceConfig = this.props.rceConfig) === null || _this$props$rceConfig === void 0 ? void 0 : _this$props$rceConfig.canvasOrigin), this.setAppContainer(this.props.appContainer), setUserToken(this.props.userToken), setOutcomesEndpoint(this.props.outcomesEndpoint), setOutcomesToken(this.props.outcomesToken), setContextUuid(this.props.contextUuid), setExternalAccountUuid(this.props.externalAccountUuid)]);
 
       if (this.props.itemBankSharingEnabled) {
         this.store.dispatch(addFeatures('item_bank_sharing'));
@@ -139,6 +139,10 @@ export var SDKApp = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp
       if (newProps.gradeByQuestionEnabled !== this.props.gradeByQuestionEnabled && this.props.gradeByQuestionEnabled !== null) {
         this.store.dispatch(setGradeByQuestionEnabled(newProps.gradeByQuestionEnabled));
       }
+
+      if (newProps.externalAccountUuid !== this.props.externalAccountUuid) {
+        this.store.dispatch(setExternalAccountUuid(newProps.externalAccountUuid));
+      }
     }
   }, {
     key: "render",
@@ -167,6 +171,7 @@ export var SDKApp = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp
   appContainer: CustomPropTypes.selectors.isRequired,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   contextUuid: PropTypes.string,
+  externalAccountUuid: PropTypes.string,
   gradeByQuestionEnabled: PropTypes.bool,
   itemBankSharingEnabled: PropTypes.bool,
   // ESLint seems to this the "locale" prop is unused even though it definitely is
@@ -196,6 +201,7 @@ export var SDKApp = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp
   locale: PropTypes.string
 }, _class2.defaultProps = {
   contextUuid: '',
+  externalAccountUuid: '',
   gradeByQuestionEnabled: null,
   itemBankSharingEnabled: false,
   locale: null,

package/es/common/components/layout/navbar/SecondaryNavBarButton/index.js

@@ -54,7 +54,7 @@ export var SecondaryNavBarButton = (_dec = withStyle(generateStyle, generateComp
 
   SecondaryNavBarButton.displayName = "SecondaryNavBarButton";
   return SecondaryNavBarButton;
-}(Component), _class2.propTypes = {
+}(Component), _class2.displayName = 'TopNavBarItem', _class2.propTypes = {
   children: PropTypes.string.isRequired,
   styles: PropTypes.object,
   makeStyles: PropTypes.func

package/es/common/components/layout/navbar/index.js

@@ -1,39 +1,136 @@
-import { bindActionCreators } from 'redux';
-import partial from 'lodash/partial';
-import { connect } from "../../../../common/react-redux.js";
-import * as modalActions from "../../../../common/actions/modal.js";
-import { set as setUI } from "../../../../common/actions/ui.js";
-import { BUILD_TRAY_OPEN, BUILD_TRAY_BUTTON_REF } from '@instructure/quiz-common';
-import { generateImportModalId } from "../../ImportModal/index.js";
-import { NavBar as NavBarPresenter } from "./presenter.js";
-import { getActiveQuiz } from "../../../selectors/quizzes.js";
-import { featureOn } from "../../../util/featureCheck.js";
-import { startQuizExportJob } from "../../../actions/quizExport.js";
-import { addAlert, addInfo } from "../../../actions/alerts.js";
-export function mapStateToProps(state) {
-  var quiz = getActiveQuiz(state);
-  return {
-    activeQuizId: quiz.id,
-    canExport: !state.getIn(['quizExport', "activeQuiz".concat(quiz.id)]),
-    canImport: quiz.canImport(),
-    hasQuestions: quiz.hasQuestions(),
-    isEditing: state.get('editing') && state.get('editing').some(function (elem) {
-      return elem;
-    }),
-    printingEnabled: featureOn('printing')
-  };
-}
-
-var mapDispatchToProps = function mapDispatchToProps(dispatch) {
-  return {
-    addAlert: bindActionCreators(addAlert, dispatch),
-    addInfo: bindActionCreators(addInfo, dispatch),
-    openBanksTray: bindActionCreators(setUI.bind(void 0, BUILD_TRAY_OPEN, true), dispatch),
-    setBanksTrayButtonRef: bindActionCreators(partial(setUI, BUILD_TRAY_BUTTON_REF), dispatch),
-    startExport: bindActionCreators(startQuizExportJob, dispatch),
-    openModal: bindActionCreators(modalActions.openModal.bind(modalActions, generateImportModalId('qtiImport')), dispatch)
-  };
-};
-
-export var NavBar = connect(mapStateToProps, mapDispatchToProps)(NavBarPresenter);
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { TopNavBar } from '@instructure/ui-top-nav-bar';
+import { IconQuizLine } from '@instructure/ui-icons';
+import t from '@instructure/quiz-i18n/es/format-message';
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconQuizLine, {
+  color: "primary",
+  size: "small"
+});
+
+export var NavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(NavBar, _Component);
+
+  var _super = _createSuper(NavBar);
+
+  function NavBar() {
+    var _this;
+
+    _classCallCheck(this, NavBar);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.hiddenActionItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return t('{hiddenChildrenCount} more actions', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.hiddenMenuItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return t('{hiddenChildrenCount} More', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.renderBrand = function () {
+      return jsx(TopNavBar.Brand, {
+        screenReaderLabel: t('Quizzes'),
+        renderIcon: _ref
+      });
+    };
+
+    _this.renderMenuItems = function () {
+      return jsx(TopNavBar.MenuItems, {
+        listLabel: t('Page navigation'),
+        currentPageId: window.location.pathname,
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenMenuItemsMenuTriggerLabel
+      }, _this.props.menuItems.map(function (menuItem) {
+        return _this.renderMenuItem(menuItem);
+      }));
+    };
+
+    _this.renderMenuItem = function (menuItem) {
+      return jsx(TopNavBar.Item, {
+        id: menuItem.path,
+        key: menuItem.path,
+        onClick: function onClick() {
+          return _this.props.handleMenuItemChange(menuItem.path);
+        } // eslint-disable-line react/jsx-no-bind
+
+      }, menuItem.text);
+    };
+
+    _this.renderActionItems = function () {
+      return jsx(TopNavBar.ActionItems, {
+        listLabel: t('Actions'),
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenActionItemsMenuTriggerLabel
+      }, _toConsumableArray(_this.props.actionItems));
+    };
+
+    return _this;
+  }
+
+  _createClass(NavBar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return jsx(TopNavBar, {
+        breakpoint: this.props.styles.phoneBreakPoint,
+        mediaQueryMatch: "element",
+        inverseColor: true
+      }, function () {
+        return jsx(TopNavBar.Layout, {
+          themeOverride: {
+            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
+            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
+          },
+          navLabel: t('Quizzes navigation bar'),
+          desktopConfig: {
+            hideActionsUserSeparator: true
+          },
+          smallViewportConfig: {
+            dropdownMenuToggleButtonLabel: t('Toggle Menu'),
+            dropdownMenuLabel: t('Main Menu')
+          },
+          renderBrand: _this2.renderBrand(),
+          renderMenuItems: _this2.renderMenuItems(),
+          renderActionItems: _this2.renderActionItems()
+        });
+      });
+    }
+  }]);
+
+  NavBar.displayName = "NavBar";
+  return NavBar;
+}(Component), _class2.propTypes = {
+  menuItems: PropTypes.arrayOf(PropTypes.shape({
+    path: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired
+  })),
+  handleMenuItemChange: PropTypes.func,
+  actionItems: PropTypes.arrayOf(PropTypes.node),
+  styles: PropTypes.object
+}, _class2.defaultProps = {
+  menuItems: [],
+  handleMenuItemChange: function handleMenuItemChange() {},
+  actionItems: []
+}, _temp)) || _class);
 export default NavBar;

package/es/common/components/resources/item/ItemEdit/index.js

@@ -19,7 +19,8 @@ export function mapStateToProps(state, props) {
   var workingItem = props.entry.getWorkingInstance();
   var isValid = workingItem.isValid();
   var errorsShowing = state.get('errorsShowing', Map());
-  var errorsAreShowing = errorsShowing.get(props.guid);
+  var errorsAreShowing = errorsShowing.get(props.guid); // Null must always be passed to contextUuid when working with banks
+
   var contextUuid = props.contextUuid === void 0 ? state.getIn(['outcomes', 'contextUuid']) : props.contextUuid;
   return {
     answerFeedbackEnabled: featureOn('answer_level_feedback'),
@@ -37,7 +38,9 @@ export function mapStateToProps(state, props) {
     partialDeepScoringEnabled: featureOn('partial_deep_scoring'),
     partialScoringEnabled: featureOn('partial_scoring'),
     quizId: getActiveQuizId(state),
-    showCalculator: featureOn('calculator_per_question')
+    showCalculator: featureOn('calculator_per_question'),
+    scope: props.scope,
+    rootAccountUuid: state.getIn(['outcomes', 'externalAccountUuid'])
   };
 }
 

package/es/common/components/resources/item/ItemEdit/presenter.js

@@ -16,6 +16,7 @@ import t from '@instructure/quiz-i18n/es/format-message';
 import { propsForInteractionEdit } from "../../../../util/interactionTypePropsHelper.js";
 import elementsForSelectors from "../../../../../common/util/ElementsForSelectors.js";
 import { toErrors } from "../../../../util/instUIMessages.js";
+import { featureOn } from "../../../../../common/util/featureCheck.js";
 export var ItemEdit = /*#__PURE__*/function (_Component) {
   _inherits(ItemEdit, _Component);
 
@@ -73,27 +74,53 @@ export var ItemEdit = /*#__PURE__*/function (_Component) {
           workingItem = _this$props.workingItem;
       var itemId = guid || workingItem.get('id');
       var outcomeAlignmentSetGuid = workingItem.get('outcomeAlignmentSetGuid');
+      var launchContexts = [];
+      var rootAccountName = this.props.scope.root_account_name;
+      var launchContextUuid = this.props.scope.launch_context_uuid;
+      var launchContextTitle = this.props.scope.title; // If editing within a quiz, there is no account launch context
+
+      if (featureOn('sub_account_bank_sharing') && rootAccountName) {
+        launchContexts.push({
+          uuid: this.props.rootAccountUuid,
+          name: rootAccountName
+        }); // Add if it is a course or sub-account launch context
+
+        if (launchContextUuid && launchContextUuid !== this.props.rootAccountUuid) {
+          launchContexts.push({
+            uuid: launchContextUuid,
+            name: launchContextTitle
+          });
+        }
+      }
+
       var options = [];
 
       if (this.props.outcomesEndpoint) {
         options.push({
           key: 'outcomes',
-          title: /*#__PURE__*/React.createElement("span", null, t('Align to Outcomes'), " ", /*#__PURE__*/React.createElement(OutcomeCount, {
+          title: /*#__PURE__*/React.createElement("span", null, t('Align to Outcomes'), /*#__PURE__*/React.createElement(OutcomeCount, Object.assign({
             alignmentSetId: outcomeAlignmentSetGuid,
             artifactType: "quizEntry",
             artifactId: itemId,
-            contextUuid: this.props.contextUuid,
+            contextUuid: this.props.contextUuid // Both components need to be aware of the launch contexts
+
+          }, launchContexts.length > 0 && {
+            launchContexts: launchContexts
+          }, {
             host: this.props.outcomesEndpoint,
             jwt: this.props.outcomesToken,
             screenreaderNotification: this.props.screenreaderNotification,
             liveRegion: liveRegion
-          })),
-          component: /*#__PURE__*/React.createElement(OutcomeAlignments, {
+          }))),
+          component: /*#__PURE__*/React.createElement(OutcomeAlignments, Object.assign({
             artifactType: "quizEntry",
             artifactId: itemId,
             applicationElement: this.applicationElement,
             alignmentSetId: outcomeAlignmentSetGuid,
-            contextUuid: this.props.contextUuid,
+            contextUuid: this.props.contextUuid
+          }, launchContexts.length > 0 && {
+            launchContexts: launchContexts
+          }, {
             emptySetHeading: t('Align Institution outcomes to this question.'),
             host: this.props.outcomesEndpoint,
             jwt: this.props.outcomesToken,
@@ -102,7 +129,7 @@ export var ItemEdit = /*#__PURE__*/function (_Component) {
             onUpdate: this.onOutcomeAlignmentSetChange,
             screenreaderNotification: this.props.screenreaderNotification,
             liveRegion: liveRegion
-          })
+          }))
         });
       }
 
@@ -171,7 +198,15 @@ ItemEdit.propTypes = {
   validationErrorsFromApi: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.shape({
     type: PropTypes.string,
     text: PropTypes.string
-  })))
+  }))),
+  scope: PropTypes.shape({
+    type: PropTypes.string,
+    uuid: PropTypes.string,
+    title: PropTypes.string,
+    launch_context_uuid: PropTypes.string,
+    root_account_name: PropTypes.string
+  }),
+  rootAccountUuid: PropTypes.string
 };
 ItemEdit.defaultProps = {
   additionalOptions: [],
@@ -186,6 +221,8 @@ ItemEdit.defaultProps = {
   quizId: null,
   initialFocusId: null,
   showCalculator: false,
-  validationErrorsFromApi: {}
+  validationErrorsFromApi: {},
+  scope: {},
+  rootAccountUuid: null
 };
 export default ItemEdit;

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;