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

package/lib/common/components/resources/stimulus/Stimulus/presenter.js

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Stimulus = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,11 +23,9 @@ var _reactDnd = require("react-dnd");
 
 var _immutable = require("immutable");
 
-var _classnames4 = _interopRequireDefault(require("classnames"));
-
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../quiz/AddContent/Popover/index.js"));
 
@@ -43,31 +37,19 @@ var _index4 = _interopRequireDefault(require("../../../shared/drag_and_drop/Drag
 
 var _dragAndDropUtils = require("../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js");
 
-var _componentWithOutsideClick = _interopRequireDefault(require("../../../shared/functionality/componentWithOutsideClick.js"));
+var _componentWithOutsideClickEmotion = _interopRequireDefault(require("../../../shared/functionality/componentWithOutsideClickEmotion.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
 
 var _index5 = _interopRequireDefault(require("../../../../../building/components/resources/quizEntry/QuizEntry/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-var Stimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Stimulus = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Stimulus, _Component);
 
   var _super = (0, _createSuper2.default)(Stimulus);
@@ -99,6 +81,16 @@ var Stimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec
   }
 
   (0, _createClass2.default)(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,
@@ -123,12 +115,12 @@ var Stimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec
       return this.props.childEntries.toArray().map(function (childEntry, idx) {
         var displayPosition = nextDisplayPosition;
         nextDisplayPosition += childEntry.displayPositionSlots;
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.quizEntryWrapper,
+        return (0, _emotion.jsx)("div", {
+          css: _this2.props.styles.quizEntryWrapper,
           key: childEntry.id
-        }, /*#__PURE__*/_react.default.createElement(_index5.default, Object.assign({}, _this2.props.propsForQuizEntry(childEntry, displayPosition), {
+        }, (0, _emotion.jsx)(_index5.default, Object.assign({}, _this2.props.propsForQuizEntry(childEntry, displayPosition), {
           stimulusOrientation: _this2.props.stimulusOrientationEnabled ? _this2.props.stimulus.orientation : null
-        })), !_this2.props.draggingOnBuild && !_this2.isQuizContentLocked() && /*#__PURE__*/_react.default.createElement(_index.default, {
+        })), !_this2.props.draggingOnBuild && !_this2.isQuizContentLocked() && (0, _emotion.jsx)(_index.default, {
           allowStimulusCreation: false,
           stimulusId: _this2.props.stimulus.id,
           parentEntryId: _this2.props.quizEntry.id,
@@ -143,9 +135,9 @@ var Stimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec
     value: function renderStimulusPanel() {
       var StimulusComponent = this.props.isEditing ? _index2.default : _index3.default;
       var connectDragPreview = this.props.connectDragPreview;
-      return connectDragPreview( /*#__PURE__*/_react.default.createElement("div", {
+      return connectDragPreview((0, _emotion.jsx)("div", {
         "data-automation": "sdk-stimulus-LeftPanelShow"
-      }, /*#__PURE__*/_react.default.createElement(StimulusComponent, {
+      }, (0, _emotion.jsx)(StimulusComponent, {
         bankEntryWarningWrapperProps: this.props.bankEntryWarningWrapperProps,
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
@@ -169,25 +161,17 @@ var Stimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec
   }, {
     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 === _quizCommon.LEFT || !stimulusOrientationEnabled;
-      var stimulusPanelClass = (0, _classnames4.default)(styles.leftPanel, (0, _defineProperty2.default)({}, styles.horizontallyAligned, shouldSetHorizontalOrientation));
-      var itemsPanelClass = (0, _classnames4.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, styles.horizontallyAligned, shouldSetHorizontalOrientation), (0, _defineProperty2.default)(_classnames2, styles.hidden, stimulus.isTemporary()), (0, _defineProperty2.default)(_classnames2, styles.rightPanel, !stimulus.isTemporary()), _classnames2));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames4.default)((0, _defineProperty2.default)({}, styles.stimulus, shouldSetHorizontalOrientation)),
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.stimulus,
         ref: this.props.dndRef,
         "data-automation": "sdk-stimulus"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: stimulusPanelClass
-      }, this.renderStimulusPanel()), /*#__PURE__*/_react.default.createElement("div", {
-        className: itemsPanelClass
-      }, /*#__PURE__*/_react.default.createElement("div", null), this.renderChildQuizEntries(), /*#__PURE__*/_react.default.createElement(_index4.default, Object.assign({}, propsForDnDZone, {
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.leftPanel
+      }, this.renderStimulusPanel()), (0, _emotion.jsx)("div", {
+        css: this.props.styles.itemPanel
+      }, (0, _emotion.jsx)("div", null), this.renderChildQuizEntries(), (0, _emotion.jsx)(_index4.default, Object.assign({}, propsForDnDZone, {
         location: "in"
-      })), this.props.childEntries.size === 0 && !this.isQuizContentLocked() && /*#__PURE__*/_react.default.createElement(_index.default, {
+      })), this.props.childEntries.size === 0 && !this.isQuizContentLocked() && (0, _emotion.jsx)(_index.default, {
         allowStimulusCreation: false,
         stimulusId: this.props.stimulus.id,
         parentEntryId: this.props.quizEntry.id,
@@ -205,13 +189,13 @@ var Stimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec
         draggingAboveHalf: this.props.draggingAboveHalf,
         dropIntoEmptyStimulus: this.props.dropIntoEmptyStimulus
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         tabIndex: "-1"
-      }, /*#__PURE__*/_react.default.createElement(_index4.default, Object.assign({}, propsForDnDZone, {
+      }, (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_index4.default, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), this.renderPanels(propsForDnDZone), /*#__PURE__*/_react.default.createElement(_index4.default, Object.assign({}, propsForDnDZone, {
+      })), this.renderPanels(propsForDnDZone), (0, _emotion.jsx)(_index4.default, Object.assign({}, propsForDnDZone, {
         location: "below"
-      })));
+      }))));
     }
   }]);
   Stimulus.displayName = "Stimulus";
@@ -245,7 +229,9 @@ var Stimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec
   switchOffEditing: _propTypes.default.func.isRequired,
   onEditStimulusToggle: _propTypes.default.func.isRequired,
   editStimulusToggle: _propTypes.default.bool.isRequired,
-  stimulusOrientationEnabled: _propTypes.default.bool.isRequired
+  stimulusOrientationEnabled: _propTypes.default.bool.isRequired,
+  makeStyles: _propTypes.default.func,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   bankEntryWarningWrapperProps: function bankEntryWarningWrapperProps() {},
   childEntries: (0, _immutable.List)([]),
@@ -263,6 +249,6 @@ var Stimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec
 }, _temp)) || _class);
 exports.Stimulus = Stimulus;
 
-var _default = (0, _reactDnd.DragSource)(_dragAndDropUtils.ItemTypes.QUIZ_ENTRY, _dragAndDropUtils.dragSource, _dragAndDropUtils.collectDrag)((0, _componentWithOutsideClick.default)(Stimulus));
+var _default = (0, _reactDnd.DragSource)(_dragAndDropUtils.ItemTypes.QUIZ_ENTRY, _dragAndDropUtils.dragSource, _dragAndDropUtils.collectDrag)((0, _componentWithOutsideClickEmotion.default)(Stimulus));
 
 exports.default = _default;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var mp = '@media print';
+  var shouldSetHorizontalOrientation = props.stimulus.orientation === _quizCommon.LEFT || !props.stimulusOrientationEnabled;
+  return {
+    stimulus: (0, _objectSpread3.default)({}, shouldSetHorizontalOrientation && {
+      display: 'flex'
+    }),
+    leftPanel: (0, _objectSpread3.default)((0, _objectSpread3.default)({
+      boxSizing: 'border-box',
+      maxHeight: '105vh',
+      overflow: 'auto',
+      borderRight: "".concat(componentTheme.leftPanelBorderWidth, " solid ").concat(componentTheme.leftPanelBorderColor)
+    }, shouldSetHorizontalOrientation && {
+      width: '50%'
+    }), {}, (0, _defineProperty2.default)({}, mp, {
+      maxHeight: 'none'
+    })),
+    itemPanel: (0, _objectSpread3.default)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, shouldSetHorizontalOrientation && {
+      width: '50%'
+    }), props.stimulus.isTemporary() && {
+      display: 'none'
+    }), !props.stimulus.isTemporary() && (0, _defineProperty2.default)({
+      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%'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/stimulus/Stimulus/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors,
@@ -19,4 +19,7 @@ function generator(_ref) {
     dragAndDropHandleFontSize: typography.fontSizeMedium,
     dragAndDropHandleMargin: spacing.xSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,7 +19,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -35,7 +33,7 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiToggleDetails = require("@instructure/ui-toggle-details");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _quizCommon = require("@instructure/quiz-common");
 
@@ -55,31 +53,19 @@ var _index4 = _interopRequireDefault(require("../StimulusShowInfo/index.js"));
 
 var _index5 = _interopRequireDefault(require("../StimulusEditInfo/index.js"));
 
-var _componentWithOutsideClick = _interopRequireDefault(require("../../../shared/functionality/componentWithOutsideClick.js"));
+var _componentWithOutsideClickEmotion = _interopRequireDefault(require("../../../shared/functionality/componentWithOutsideClickEmotion.js"));
 
 var _index6 = _interopRequireDefault(require("../../../../../building/components/resources/ActionButtons/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: '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'
-};
-var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var StimulusEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(StimulusEdit, _Component);
 
   var _super = (0, _createSuper2.default)(StimulusEdit);
@@ -408,7 +394,7 @@ var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "renderAddToBankModal",
     value: function renderAddToBankModal() {
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         label: (0, _formatMessage.default)('Add to an Item Bank'),
         onAdd: this.handleAddToBank,
         onContinue: this.handleAddToBankContinue,
@@ -421,13 +407,13 @@ var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "renderAddToBankOptions",
     value: function renderAddToBankOptions() {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiToggleDetails.ToggleDetails, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
         variant: "filled",
         key: "itemBanking",
         summary: (0, _formatMessage.default)('Item Banking')
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.optionWrapper
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.optionWrapper
+      }, (0, _emotion.jsx)(_index2.default, {
         displayPosition: this.props.displayPosition,
         entryType: this.props.quizEntry.entryType,
         guid: this.props.guid,
@@ -440,13 +426,13 @@ var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "renderStimulusEdit",
     value: function renderStimulusEdit() {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.stimulus
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.header
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.stimulusLabel
-      }, (0, _formatMessage.default)('Stimulus')), /*#__PURE__*/_react.default.createElement(_index6.default, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.stimulus
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.header
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.stimulusLabel
+      }, (0, _formatMessage.default)('Stimulus')), (0, _emotion.jsx)(_index6.default, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.handleDeleteStimulus,
@@ -455,25 +441,27 @@ var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         shouldDisableDragHandle: true,
         shouldRenderEdit: false,
         shouldFocusOnMount: this.props.shouldFocusOnMount
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.stimulusContent
-      }, /*#__PURE__*/_react.default.createElement(_index5.default, {
+      })), (0, _emotion.jsx)("div", {
+        css: this.props.styles.stimulusContent
+      }, (0, _emotion.jsx)(_index5.default, {
         errorsShowing: this.props.errorsShowing,
         guid: this.props.guid,
         stimulus: this.props.stimulus,
         isBankedContent: this.props.isBankedContent,
         setTitleRef: this.setTitleRef
-      }), this.renderAddToBankOptions())), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.footer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.buttonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }), this.renderAddToBankOptions())), (0, _emotion.jsx)("div", {
+        className: "footer",
+        css: this.props.styles.footer
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.buttonWrapper
+      }, (0, _emotion.jsx)(_uiButtons.Button, {
         type: "button",
         onClick: this.onCancel,
         "data-automation": "sdk-stimulus-discardButton"
-      }, (0, _formatMessage.default)('Cancel'))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.buttonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }, (0, _formatMessage.default)('Cancel'))), (0, _emotion.jsx)("div", {
+        className: "submitButtonWrapper",
+        css: this.props.styles.buttonWrapper
+      }, (0, _emotion.jsx)(_uiButtons.Button, {
         type: "button",
         color: "primary",
         disabled: !this.state.canSubmit,
@@ -486,7 +474,7 @@ var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       this.stimulusEditInfoRef = null;
 
       if (this.props.isBankedContent) {
-        return /*#__PURE__*/_react.default.createElement(_index3.default, this.props.bankEntryWarningWrapperProps(), /*#__PURE__*/_react.default.createElement(_index4.default, this.props));
+        return (0, _emotion.jsx)(_index3.default, this.props.bankEntryWarningWrapperProps(), (0, _emotion.jsx)(_index4.default, this.props));
       }
 
       var _this$props4 = this.props,
@@ -496,7 +484,7 @@ var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var propForWrapperFunc = quizEntry.isArchivedBankEntry ? _warningHelpers.propsForBankEntryVersioningWrapper : _warningHelpers.propsForStimulusVersioningWrapper;
       var propsForStimulusVersioning = propForWrapperFunc(needsWarning, this.props.shouldClone, (0, _partial.default)(this.props.setUi, _quizCommon.SHOULD_CLONE_ITEM), this.props.switchOffEditing, true, quizEntry.isArchivedBankEntry ? 'info' : 'warning');
       var hasWarningWrapper = needsWarning && !this.props.shouldClone;
-      return /*#__PURE__*/_react.default.createElement(_index3.default, propsForStimulusVersioning, hasWarningWrapper ? /*#__PURE__*/_react.default.createElement(_index4.default, this.props) : this.renderStimulusEdit());
+      return (0, _emotion.jsx)(_index3.default, propsForStimulusVersioning, hasWarningWrapper ? (0, _emotion.jsx)(_index4.default, this.props) : this.renderStimulusEdit());
     }
   }]);
   StimulusEdit.displayName = "StimulusEdit";
@@ -540,7 +528,8 @@ var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   workingQuizEntry: _reactImmutableProptypes.default.record.isRequired,
   workingStimulus: _reactImmutableProptypes.default.record.isRequired,
   onEditToggle: _propTypes.default.func.isRequired,
-  shouldFocusOnMount: _propTypes.default.bool.isRequired
+  shouldFocusOnMount: _propTypes.default.bool.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   bankEntryWarningWrapperProps: function bankEntryWarningWrapperProps() {},
   errorsShowing: false,
@@ -549,6 +538,6 @@ var StimulusEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
 }, _temp)) || _class);
 exports.StimulusEdit = StimulusEdit;
 
-var _default = (0, _componentWithOutsideClick.default)(StimulusEdit);
+var _default = (0, _componentWithOutsideClickEmotion.default)(StimulusEdit);
 
 exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusEdit/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    stimulus: {
+      paddingTop: componentTheme.stimulusPadding,
+      paddingBottom: componentTheme.stimulusPadding
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'flex-end'
+    },
+    buttonWrapper: {
+      paddingLeft: componentTheme.buttonWrapperPadding
+    },
+    header: {
+      height: '1rem',
+      paddingLeft: componentTheme.headerPadding,
+      paddingRight: componentTheme.headerPadding,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    stimulusContent: {
+      height: '100%',
+      padding: componentTheme.stimulusContentPadding
+    },
+    stimulusLabel: {
+      color: componentTheme.stimulusLabelColor,
+      fontSize: componentTheme.stimulusLabelFontSize
+    },
+    stimulusButtons: {
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      textAlign: 'right',
+      zIndex: componentTheme.stimulusButtonsZIndex,
+      color: componentTheme.stimulusButtonsColor,
+      button: {
+        backgroundColor: 'initial'
+      }
+    },
+    optionWrapper: {
+      paddingTop: componentTheme.optionPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusEdit/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors;
@@ -21,4 +21,7 @@ function generator(_ref) {
     stimulusButtonsColor: colors.oxford,
     stimulusButtonsZIndex: '3333'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/shared/overlayEmotion/index.js

@@ -48,6 +48,7 @@ var OverlayEmotion = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
 
       return (0, _emotion.jsx)("div", {
         role: "presentation",
+        className: "overlay",
         css: this.props.styles.overlay,
         onClick: this.props.onClick,
         "data-automation": "sdk-overlay"
@@ -68,7 +69,6 @@ var OverlayEmotion = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
           }
         }
       }), (0, _emotion.jsx)("div", {
-        className: "overlay",
         css: [this.props.styles.root, wrapperStyles],
         "data-testid": "overlay-wrapper",
         tabIndex: tabIndex,

package/lib/common/components/shared/return_button/ReturnButton.js

@@ -46,7 +46,8 @@ var ReturnButton = /*#__PURE__*/function (_Component) {
 
       if (this.props.iceTopNavBarEnabled) {
         return /*#__PURE__*/_react.default.createElement(_index.SecondaryNavBarButton, {
-          id: "ReturnButton",
+          id: this.props.id,
+          key: this.props.id,
           variant: "button",
           "data-automation": "sdk-return-button",
           href: this.props.returnToUrl,
@@ -69,11 +70,13 @@ exports.ReturnButton = ReturnButton;
 ReturnButton.propTypes = {
   returnToUrl: _propTypes.default.string,
   text: _propTypes.default.string,
+  id: _propTypes.default.string,
   iceTopNavBarEnabled: _propTypes.default.bool
 };
 ReturnButton.defaultProps = {
   returnToUrl: void 0,
   text: (0, _formatMessage.default)('Return'),
+  id: 'ReturnButton',
   iceTopNavBarEnabled: false
 };
 var _default = ReturnButton;

package/lib/common/reducers/outcomes.js

@@ -12,7 +12,8 @@ var _quizCommon = require("@instructure/quiz-common");
 var defaultState = (0, _immutable.fromJS)({
   contextUuid: '',
   outcomesEndpoint: '',
-  outcomesToken: ''
+  outcomesToken: '',
+  externalAccountUuid: ''
 });
 
 var _default = function _default() {
@@ -29,6 +30,9 @@ var _default = function _default() {
     case _quizCommon.SET_OUTCOMES_TOKEN:
       return state.set('outcomesToken', action.payload);
 
+    case _quizCommon.SET_EXTERNAL_ACCOUNT_UUID:
+      return state.set('externalAccountUuid', action.payload);
+
     default:
       return state;
   }