@instructure/quiz-core 20.10.1-rc.5 → 20.10.1-rc.7

package/es/banks/components/Banks/index.js

@@ -16,6 +16,7 @@ function mapStateToProps(state, props) {
   var sortOrder = pageData.get('sortOrder', 'ascending');
   var searchTerms = pageData.get('searchTerms', null);
   var searchSelection = pageData.get('searchSelection', []);
+  var rootAccountUuid = state.getIn(['outcomes', 'contextUuid']);
   return {
     itemBankSearchTableEnabled: featureOn('item_bank_search_table'),
     improvedBankSharingEnabled: featureOn('improved_bank_sharing'),
@@ -26,7 +27,8 @@ function mapStateToProps(state, props) {
     sortBy: sortBy,
     sortOrder: sortOrder,
     searchTerms: searchTerms,
-    searchSelection: searchSelection
+    searchSelection: searchSelection,
+    rootAccountUuid: rootAccountUuid
   };
 }
 

package/es/banks/components/Banks/presenter.js

@@ -55,6 +55,10 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
 
     _this = _super.apply(this, arguments);
 
+    _this.hideAccountSearch = function () {
+      return _this.props.scopeType === 'account' && _this.props.scope.type === 'account' && _this.props.scope.launch_context_uuid && _this.props.rootAccountUuid && _this.props.scope.launch_context_uuid !== _this.props.rootAccountUuid;
+    };
+
     _this.onCreateBank = function () {
       _this.props.createBank({
         language: _this.context.locale
@@ -94,7 +98,9 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         params['search'] = _this.props.searchTerms;
       }
 
-      if (_this.props.searchSelection.length > 0) {
+      if (_this.props.subAccountBankSharingEnabled && _this.hideAccountSearch()) {
+        params['account_uuids'] = [_this.props.scope.launch_context_uuid];
+      } else if (_this.props.searchSelection.length > 0) {
         params['account_uuids'] = _this.props.searchSelection.map(function (account) {
           return account.uuid;
         });
@@ -125,6 +131,12 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       _this.props.merge(BANKS_BANK_FILTERS, {
         scopeType: scopeType
       });
+
+      if (scopeType === 'account') {
+        _this.setState({
+          hiddenAccountSearch: true
+        });
+      }
     };
 
     _this.getSortingOrderIcon = function () {
@@ -211,7 +223,11 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         if (_this.props.scopeType === 'course') {
           message = t("Your filter is set to \"Courses\" which will narrow what you can search for.\n          Try adjusting the filter to \"Institution\" or \"All My Banks\"");
         } else if (_this.props.scopeType === 'account') {
-          message = t("Your filter is set to \"Institution\" which will narrow what you can search for.\n          Try adjusting the filter to \"All My Banks\"");
+          if (_this.props.subAccountBankSharingEnabled && _this.hideAccountSearch()) {
+            message = t("Your filter is set to \"This Account\" which will narrow what you can search for.\n            Try adjusting the filter to \"All My Banks\"");
+          } else {
+            message = t("Your filter is set to \"Institution\" which will narrow what you can search for.\n            Try adjusting the filter to \"All My Banks\"");
+          }
         }
 
         return jsx(Billboard, {
@@ -242,7 +258,9 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType || !isEqual(prevProps.searchSelection, this.props.searchSelection)) {
         this.props.clear(BANKS_BANK_PAGINATION);
       }
-    }
+    } // When the launch is from a subaccount, we want to silently add the subaccount to the account search
+    // if the user is on the "This Account" filter
+
   }, {
     key: "renderFilters",
     value: function renderFilters() {
@@ -251,7 +269,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         translation: this.props.newItemBankFilterNamesEnabled ? t('All Banks') : t('All My Banks')
       }, {
         slug: 'account',
-        translation: t('Institution Banks')
+        translation: this.props.subAccountBankSharingEnabled && this.hideAccountSearch() ? t('This Account') : t('Institution Banks')
       }, {
         slug: 'courses',
         translation: this.props.newItemBankFilterNamesEnabled ? t('Banks Shared to Course') : t('All My Course Banks')
@@ -314,7 +332,7 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         onChange: this.handleSearchInputChange,
         placeholder: t('Search Banks'),
         "data-automation": "sdk-search-bank-textinput"
-      })), this.props.subAccountBankSharingEnabled && jsx(Grid.Col, {
+      })), this.props.subAccountBankSharingEnabled && !this.hideAccountSearch() && jsx(Grid.Col, {
         width: 4
       }, jsx(AsyncSearch, {
         getShareableSubaccounts: this.props.getShareableSubaccounts,
@@ -488,7 +506,9 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   scope: PropTypes.shape({
     type: PropTypes.string,
     uuid: PropTypes.string,
-    title: PropTypes.string
+    title: PropTypes.string,
+    launch_context_uuid: PropTypes.string,
+    root_account_name: PropTypes.string
   }).isRequired,
   scopeType: PropTypes.string,
   searchTerms: PropTypes.string,
@@ -506,7 +526,8 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   subAccountBankSharingEnabled: PropTypes.bool,
   iceTopNavBarEnabled: PropTypes.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
-  styles: PropTypes.object
+  styles: PropTypes.object,
+  rootAccountUuid: PropTypes.string
 }, _class2.defaultProps = {
   closeTray: null,
   currentUser: null,
@@ -533,7 +554,8 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   usedByCourseEnabled: false,
   itemBankSearchTableEnabled: false,
   subAccountBankSharingEnabled: false,
-  iceTopNavBarEnabled: false
+  iceTopNavBarEnabled: false,
+  rootAccountUuid: null
 }, _class2.contextTypes = {
   locale: PropTypes.string
 }, _temp)) || _class);

package/es/common/components/ImportModal/presenter.js

@@ -5,7 +5,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Alert } from '@instructure/ui-alerts';
@@ -16,19 +17,13 @@ import { Heading } from '@instructure/ui-heading';
 import { Tabs } from '@instructure/ui-tabs';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
 import { TextInput } from '@instructure/ui-text-input';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { ImportantModal, ModalHeader, ModalBody, ModalFooter, FILE_UPLOAD_SELECT, FILE_UPLOAD_IMPORTING, FILE_UPLOAD_SUCCESS, FILE_UPLOAD_FAILURE, FILE_UPLOAD_ERROR, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'ceoks',
-  template: function template(theme) {
-    return "\n\n.ceoks_bOkE{margin-top:".concat(theme.altTextMargin || 'inherit', "}");
-  },
-  'altTextWrapper': 'ceoks_bOkE'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import ImportFileSelector from "./ImportFileSelector/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var ImportModal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ImportModal, _Component);
 
   var _super = _createSuper(ImportModal);
@@ -168,7 +163,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "cancelButton",
     value: function cancelButton() {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         disabled: this.disableCancelButton(),
         onClick: this.cancelAction,
         margin: XSMALL_SIDE_MARGIN,
@@ -206,7 +201,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "continueButton",
     value: function continueButton() {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         onClick: this.continueAction,
         color: "primary",
         disabled: this.disableContinueButton(),
@@ -218,7 +213,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "renderErroredContent",
     value: function renderErroredContent() {
-      return /*#__PURE__*/React.createElement(Alert, {
+      return jsx(Alert, {
         variant: "error",
         ref: this.setRef('errorAlert')
       }, this.uploadStatusMessage());
@@ -226,41 +221,41 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "renderSelectingContent",
     value: function renderSelectingContent(fileType) {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, this.props.importMessage), /*#__PURE__*/React.createElement(ImportFileSelector, {
+      return jsx("div", null, jsx("div", null, this.props.importMessage), jsx(ImportFileSelector, {
         files: this.props.files,
         ref: this.setRef('fileSelector'),
         receiveFile: this.handleFile,
         acceptAttribute: fileType,
         "data-automation": "sdk-import-file-selector"
-      }), fileType === 'image/*' && /*#__PURE__*/React.createElement("div", {
-        className: styles.altTextWrapper
-      }, /*#__PURE__*/React.createElement(TextInput, {
+      }), fileType === 'image/*' && jsx("div", {
+        css: this.props.styles.altTextWrapper
+      }, jsx(TextInput, {
         ref: this.setRef('altTextInput'),
         onChange: this.onAltTextChange,
         value: this.props.altText,
-        renderLabel: /*#__PURE__*/React.createElement("div", null, t('alt text (optional)')),
+        renderLabel: jsx("div", null, t('alt text (optional)')),
         type: "text"
       })));
     }
   }, {
     key: "renderFailureContent",
     value: function renderFailureContent() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
+      return jsx("div", null, jsx(Alert, {
         variant: "error",
         ref: this.setRef('failureAlert'),
         "data-automation": "sdk-import-error-alert"
-      }, /*#__PURE__*/React.createElement("div", null, this.uploadStatusMessage(), /*#__PURE__*/React.createElement(ToggleDetails, {
-        summary: /*#__PURE__*/React.createElement(Text, {
+      }, jsx("div", null, this.uploadStatusMessage(), jsx(ToggleDetails, {
+        summary: jsx(Text, {
           size: "small"
         }, t('Error Details'))
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "small"
       }, this.props.failureMessage)))));
     }
   }, {
     key: "renderSuccessContent",
     value: function renderSuccessContent() {
-      return /*#__PURE__*/React.createElement(Alert, {
+      return jsx(Alert, {
         variant: "success",
         ref: this.setRef('successAlert'),
         "data-automation": "sdk-import-success-alert"
@@ -269,7 +264,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "renderImportingContent",
     value: function renderImportingContent() {
-      return /*#__PURE__*/React.createElement(ProgressBar, {
+      return jsx(ProgressBar, {
         screenReaderLabel: t('Import process completion'),
         valueNow: this.props.progressValue,
         ref: this.setRef('progressBar')
@@ -329,13 +324,13 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
       }
 
       var selectedIndex = this.state.selectedTabIndex;
-      return /*#__PURE__*/React.createElement(Tabs, {
+      return jsx(Tabs, {
         onRequestTabChange: this.handleTabChange,
         variant: "secondary"
       }, this.props.acceptFileType.map(function (_ref2, index) {
         var fileType = _ref2.fileType,
             title = _ref2.title;
-        return /*#__PURE__*/React.createElement(Tabs.Panel, {
+        return jsx(Tabs.Panel, {
           key: title,
           renderTitle: title,
           disabled: _this3.props.files.size > 0 && index !== selectedIndex,
@@ -346,7 +341,7 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(ImportantModal, {
+      return jsx(ImportantModal, {
         open: this.props.modalOpen,
         size: "small",
         onClose: this.props.onClose,
@@ -354,15 +349,15 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
         label: t('Import Content'),
         ref: this.setRef('modal'),
         "data-automation": "sdk-import-content-modal"
-      }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(ModalHeader, null, jsx(Heading, {
         level: "reset",
         as: "h2"
-      }, t('Import Content')), /*#__PURE__*/React.createElement(CloseButton, {
+      }, t('Import Content')), jsx(CloseButton, {
         onClick: this.cancelAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), /*#__PURE__*/React.createElement(ModalBody, null, this.renderContent()), /*#__PURE__*/React.createElement(ModalFooter, null, this.cancelButton(), this.continueButton()));
+      })), jsx(ModalBody, null, this.renderContent()), jsx(ModalFooter, null, this.cancelButton(), this.continueButton()));
     }
   }]);
 
@@ -401,8 +396,9 @@ export var ImportModal = (_dec = themeable(theme, styles), _dec(_class = (_temp
   // passed in by connect
   setUploadStatus: PropTypes.func.isRequired,
   // passed in by connect
-  uploadStatus: PropTypes.oneOf([FILE_UPLOAD_SELECT, FILE_UPLOAD_IMPORTING, FILE_UPLOAD_SUCCESS, FILE_UPLOAD_FAILURE, FILE_UPLOAD_ERROR]).isRequired // passed in by connect
-
+  uploadStatus: PropTypes.oneOf([FILE_UPLOAD_SELECT, FILE_UPLOAD_IMPORTING, FILE_UPLOAD_SUCCESS, FILE_UPLOAD_FAILURE, FILE_UPLOAD_ERROR]).isRequired,
+  // passed in by connect,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   closeOverride: null,
   disableConfirm: false,

package/es/common/components/ImportModal/styles.js

@@ -0,0 +1,9 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    altTextWrapper: {
+      marginTop: componentTheme.altTextMargin
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/ImportModal/theme.js

@@ -1,6 +1,8 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     altTextMargin: spacing.large
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,14 +5,16 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "import/no-webpack-loader-syntax": "warn" */
 
 /* eslint "import/no-unresolved": "warn" */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import HTML5Backend from 'react-dnd-html5-backend';
 import { DragDropContext } from 'react-dnd';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { ApplyLocale } from '@instructure/ui-i18n';
 import { Provider } from "../../react-redux.js";
 import store from "../../../reduxStore.js";
@@ -24,23 +26,16 @@ import { setContextUuid, setOutcomesEndpoint, setOutcomesToken } from "../../act
 import { addFeatures, removeFeatures } from "../../actions/features.js";
 import { setGradeByQuestionEnabled } from "../../actions/grading.js";
 import { renderAlerts } from "../../util/renderAlerts.js";
-var styles = {
-  componentId: 'fzweS',
-  template: function template(theme) {
-    return "\n\n.fzweS_dXHX{height:100%}";
-  },
-  'sdk': 'fzweS_dXHX'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
 import CustomPropTypes from "../../../common/util/CustomPropTypes.js";
 import ConfirmationModal from "../ConfirmationModal/index.js";
 import setupFormatMessage from '@instructure/quiz-i18n/es/util/setupFormatMessage';
 import RceConfigProvider from "../RceConfigProvider/index.js";
 import { ApiFeatureFlagInitializer } from "../ApiFeatureFlagInitializer/index.js";
 
-var _ref = /*#__PURE__*/React.createElement(ConfirmationModal, null);
+var _ref = jsx(ConfirmationModal, null);
 
-export var SDKApp = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var SDKApp = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(SDKApp, _Component);
 
   var _super = _createSuper(SDKApp);
@@ -151,13 +146,13 @@ export var SDKApp = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       var store = this.store,
           props = this.props,
           context = this.context;
-      return /*#__PURE__*/React.createElement(Provider, {
+      return jsx(Provider, {
         store: store
-      }, /*#__PURE__*/React.createElement(ApiFeatureFlagInitializer, null, /*#__PURE__*/React.createElement(RceConfigProvider, this.props.rceConfig, /*#__PURE__*/React.createElement(ApplyLocale, {
+      }, jsx(ApiFeatureFlagInitializer, null, jsx(RceConfigProvider, this.props.rceConfig, jsx(ApplyLocale, {
         locale: getLocale(props, context),
         timezone: props.timeZone
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.sdk,
+      }, jsx("div", {
+        css: this.props.styles.sdk,
         "data-automation": "sdk-app"
       }, _ref, typeof props.children === 'function' ? props.children({
         addAlert: this.addAlert
@@ -195,7 +190,8 @@ export var SDKApp = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     message: PropTypes.string
   })),
   userToken: PropTypes.string.isRequired,
-  disableAlertLiveRegion: PropTypes.bool
+  disableAlertLiveRegion: PropTypes.bool,
+  styles: PropTypes.object
 }, _class2.contextTypes = {
   locale: PropTypes.string
 }, _class2.defaultProps = {

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

@@ -0,0 +1,9 @@
+var generateStyle = function generateStyle() {
+  return {
+    sdk: {
+      height: '100%'
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/stimulus/StimulusShow/index.js

@@ -5,32 +5,24 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "jsx-a11y/click-events-have-key-events": "warn" */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconBankLine } from '@instructure/ui-icons';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import StimulusShowInfo from "../StimulusShowInfo/index.js";
-import Overlay from "../../../../../common/components/shared/overlay/Overlay.js";
 import ActionButtons from "../../../../../building/components/resources/ActionButtons/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'ceqOh',
-  template: function template(theme) {
-    return "\n\n.ceqOh_dRGY{padding-bottom:".concat(theme.stimulusPadding || 'inherit', ";padding-top:").concat(theme.stimulusPadding || 'inherit', "}\n\n.ceqOh_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.ceqOh_cKlw{display:flex;overflow:hidden}\n\n.ceqOh_ffXB{color:").concat(theme.stimulusLabelColor || 'inherit', ";font-size:").concat(theme.stimulusLabelFontSize || 'inherit', ";margin:0 ").concat(theme.stimulusLabelMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis}\n\n.ceqOh_dMwa{height:100%;padding:").concat(theme.stimulusContentPaddingTop || 'inherit', " ").concat(theme.stimulusContentPaddingLeftRight || 'inherit', " ").concat(theme.stimulusContentPaddingBottom || 'inherit', "}");
-  },
-  'stimulus': 'ceqOh_dRGY',
-  'header': 'ceqOh_fsuY',
-  'leftHeader': 'ceqOh_cKlw',
-  'stimulusLabel': 'ceqOh_ffXB',
-  'stimulusContent': 'ceqOh_dMwa'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+import OverlayEmotion from "../../../shared/overlayEmotion/index.js";
 
-var _ref = /*#__PURE__*/React.createElement(IconBankLine, null);
+var _ref = jsx(IconBankLine, null);
 
-export var StimulusShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var StimulusShow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(StimulusShow, _Component);
 
   var _super = _createSuper(StimulusShow);
@@ -63,20 +55,20 @@ export var StimulusShow = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Overlay, {
+      return jsx(OverlayEmotion, {
         onClick: this.switchOnEditing,
-        wrapperClassName: styles.stimulusWrapper,
+        wrapperStyles: this.props.styles.stimulusWrapper,
         tabIndex: "-1",
         hideOverlay: this.props.isQuizContentLocked
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulus
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.header
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.leftHeader
-      }, this.renderBankIcon(), /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulusLabel
-      }, t('Stimulus'))), /*#__PURE__*/React.createElement(ActionButtons, {
+      }, jsx("div", {
+        css: this.props.styles.stimulus
+      }, jsx("div", {
+        css: this.props.styles.header
+      }, jsx("div", {
+        css: this.props.styles.leftHeader
+      }, this.renderBankIcon(), jsx("div", {
+        css: this.props.styles.stimulusLabel
+      }, t('Stimulus'))), jsx(ActionButtons, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.props.openDeleteStimulusModal,
@@ -89,11 +81,12 @@ export var StimulusShow = (_dec = themeable(theme, styles), _dec(_class = (_temp
         shouldDisableCopy: this.props.isQuizContentLocked,
         shouldRenderEdit: !this.props.isQuizContentLocked,
         shouldRenderDelete: !this.props.isQuizContentLocked
-      })), /*#__PURE__*/React.createElement("div", {
+      })), jsx("div", {
         role: "presentation",
         onClick: this.props.isQuizContentLocked ? null : this.switchOnEditing,
-        className: styles.stimulusContent
-      }, /*#__PURE__*/React.createElement(StimulusShowInfo, {
+        css: this.props.styles.stimulusContent,
+        "data-testid": "stimulus-content"
+      }, jsx(StimulusShowInfo, {
         stimulus: this.props.stimulus
       }))));
     }
@@ -113,7 +106,8 @@ export var StimulusShow = (_dec = themeable(theme, styles), _dec(_class = (_temp
   shouldDisableDragHandle: PropTypes.bool,
   stimulus: ImmutablePropTypes.record.isRequired,
   switchOnEditing: PropTypes.func.isRequired,
-  shouldFocusOnMount: PropTypes.bool.isRequired
+  shouldFocusOnMount: PropTypes.bool.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   isBankedContent: false,
   isQuizContentLocked: false,

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

@@ -0,0 +1,33 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    stimulus: {
+      paddingTop: componentTheme.stimulusPadding,
+      paddingBottom: componentTheme.stimulusPadding
+    },
+    header: {
+      height: '1rem',
+      paddingLeft: componentTheme.headerPadding,
+      paddingRight: componentTheme.headerPadding,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    leftHeader: {
+      display: 'flex',
+      overflow: 'hidden'
+    },
+    stimulusLabel: {
+      color: componentTheme.stimulusLabelColor,
+      fontSize: componentTheme.stimulusLabelFontSize,
+      margin: "0 ".concat(componentTheme.stimulusLabelMargin),
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    stimulusContent: {
+      height: '10%0',
+      padding: "".concat(componentTheme.stimulusContentPaddingTop, " ").concat(componentTheme.stimulusContentPaddingLeftRight, " ").concat(componentTheme.stimulusContentPaddingBottom)
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/stimulus/StimulusShow/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) {
     stimulusContentPaddingBottom: spacing.small,
     stimulusContentPaddingLeftRight: spacing.small
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/banks/components/Banks/index.js

@@ -34,6 +34,7 @@ function mapStateToProps(state, props) {
   var sortOrder = pageData.get('sortOrder', 'ascending');
   var searchTerms = pageData.get('searchTerms', null);
   var searchSelection = pageData.get('searchSelection', []);
+  var rootAccountUuid = state.getIn(['outcomes', 'contextUuid']);
   return {
     itemBankSearchTableEnabled: (0, _featureCheck.featureOn)('item_bank_search_table'),
     improvedBankSharingEnabled: (0, _featureCheck.featureOn)('improved_bank_sharing'),
@@ -44,7 +45,8 @@ function mapStateToProps(state, props) {
     sortBy: sortBy,
     sortOrder: sortOrder,
     searchTerms: searchTerms,
-    searchSelection: searchSelection
+    searchSelection: searchSelection,
+    rootAccountUuid: rootAccountUuid
   };
 }
 

package/lib/banks/components/Banks/presenter.js

@@ -95,6 +95,10 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     (0, _classCallCheck2.default)(this, Banks);
     _this = _super.apply(this, arguments);
 
+    _this.hideAccountSearch = function () {
+      return _this.props.scopeType === 'account' && _this.props.scope.type === 'account' && _this.props.scope.launch_context_uuid && _this.props.rootAccountUuid && _this.props.scope.launch_context_uuid !== _this.props.rootAccountUuid;
+    };
+
     _this.onCreateBank = function () {
       _this.props.createBank({
         language: _this.context.locale
@@ -134,7 +138,9 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         params['search'] = _this.props.searchTerms;
       }
 
-      if (_this.props.searchSelection.length > 0) {
+      if (_this.props.subAccountBankSharingEnabled && _this.hideAccountSearch()) {
+        params['account_uuids'] = [_this.props.scope.launch_context_uuid];
+      } else if (_this.props.searchSelection.length > 0) {
         params['account_uuids'] = _this.props.searchSelection.map(function (account) {
           return account.uuid;
         });
@@ -165,6 +171,12 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       _this.props.merge(_quizCommon.BANKS_BANK_FILTERS, {
         scopeType: scopeType
       });
+
+      if (scopeType === 'account') {
+        _this.setState({
+          hiddenAccountSearch: true
+        });
+      }
     };
 
     _this.getSortingOrderIcon = function () {
@@ -251,7 +263,11 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         if (_this.props.scopeType === 'course') {
           message = (0, _formatMessage.default)("Your filter is set to \"Courses\" which will narrow what you can search for.\n          Try adjusting the filter to \"Institution\" or \"All My Banks\"");
         } else if (_this.props.scopeType === 'account') {
-          message = (0, _formatMessage.default)("Your filter is set to \"Institution\" which will narrow what you can search for.\n          Try adjusting the filter to \"All My Banks\"");
+          if (_this.props.subAccountBankSharingEnabled && _this.hideAccountSearch()) {
+            message = (0, _formatMessage.default)("Your filter is set to \"This Account\" which will narrow what you can search for.\n            Try adjusting the filter to \"All My Banks\"");
+          } else {
+            message = (0, _formatMessage.default)("Your filter is set to \"Institution\" which will narrow what you can search for.\n            Try adjusting the filter to \"All My Banks\"");
+          }
         }
 
         return (0, _emotion.jsx)(_uiBillboard.Billboard, {
@@ -282,7 +298,9 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType || !(0, _isEqual.default)(prevProps.searchSelection, this.props.searchSelection)) {
         this.props.clear(_quizCommon.BANKS_BANK_PAGINATION);
       }
-    }
+    } // When the launch is from a subaccount, we want to silently add the subaccount to the account search
+    // if the user is on the "This Account" filter
+
   }, {
     key: "renderFilters",
     value: function renderFilters() {
@@ -291,7 +309,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         translation: this.props.newItemBankFilterNamesEnabled ? (0, _formatMessage.default)('All Banks') : (0, _formatMessage.default)('All My Banks')
       }, {
         slug: 'account',
-        translation: (0, _formatMessage.default)('Institution Banks')
+        translation: this.props.subAccountBankSharingEnabled && this.hideAccountSearch() ? (0, _formatMessage.default)('This Account') : (0, _formatMessage.default)('Institution Banks')
       }, {
         slug: 'courses',
         translation: this.props.newItemBankFilterNamesEnabled ? (0, _formatMessage.default)('Banks Shared to Course') : (0, _formatMessage.default)('All My Course Banks')
@@ -354,7 +372,7 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
         onChange: this.handleSearchInputChange,
         placeholder: (0, _formatMessage.default)('Search Banks'),
         "data-automation": "sdk-search-bank-textinput"
-      })), this.props.subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiGrid.Grid.Col, {
+      })), this.props.subAccountBankSharingEnabled && !this.hideAccountSearch() && (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: 4
       }, (0, _emotion.jsx)(_index7.default, {
         getShareableSubaccounts: this.props.getShareableSubaccounts,
@@ -527,7 +545,9 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   scope: _propTypes.default.shape({
     type: _propTypes.default.string,
     uuid: _propTypes.default.string,
-    title: _propTypes.default.string
+    title: _propTypes.default.string,
+    launch_context_uuid: _propTypes.default.string,
+    root_account_name: _propTypes.default.string
   }).isRequired,
   scopeType: _propTypes.default.string,
   searchTerms: _propTypes.default.string,
@@ -545,7 +565,8 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   subAccountBankSharingEnabled: _propTypes.default.bool,
   iceTopNavBarEnabled: _propTypes.default.bool,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
-  styles: _propTypes.default.object
+  styles: _propTypes.default.object,
+  rootAccountUuid: _propTypes.default.string
 }, _class2.defaultProps = {
   closeTray: null,
   currentUser: null,
@@ -572,7 +593,8 @@ var Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   usedByCourseEnabled: false,
   itemBankSearchTableEnabled: false,
   subAccountBankSharingEnabled: false,
-  iceTopNavBarEnabled: false
+  iceTopNavBarEnabled: false,
+  rootAccountUuid: null
 }, _class2.contextTypes = {
   locale: _propTypes.default.string
 }, _temp)) || _class);

package/lib/common/components/ImportModal/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
 });
@@ -17,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"));
 
@@ -39,10 +37,12 @@ var _uiToggleDetails = require("@instructure/ui-toggle-details");
 
 var _uiTextInput = require("@instructure/ui-text-input");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _quizCommon = require("@instructure/quiz-common");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _index = _interopRequireDefault(require("./ImportFileSelector/index.js"));
@@ -51,14 +51,7 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'ceoks',
-  template: function template(theme) {
-    return "\n\n.ceoks_bOkE{margin-top:".concat(theme.altTextMargin || 'inherit', "}");
-  },
-  'altTextWrapper': 'ceoks_bOkE'
-};
-var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ImportModal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ImportModal, _Component);
 
   var _super = (0, _createSuper2.default)(ImportModal);
@@ -198,7 +191,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   }, {
     key: "cancelButton",
     value: function cancelButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         disabled: this.disableCancelButton(),
         onClick: this.cancelAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
@@ -236,7 +229,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   }, {
     key: "continueButton",
     value: function continueButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         onClick: this.continueAction,
         color: "primary",
         disabled: this.disableContinueButton(),
@@ -248,7 +241,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   }, {
     key: "renderErroredContent",
     value: function renderErroredContent() {
-      return /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+      return (0, _emotion.jsx)(_uiAlerts.Alert, {
         variant: "error",
         ref: this.setRef('errorAlert')
       }, this.uploadStatusMessage());
@@ -256,41 +249,41 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   }, {
     key: "renderSelectingContent",
     value: function renderSelectingContent(fileType) {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, this.props.importMessage), /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", null, this.props.importMessage), (0, _emotion.jsx)(_index.default, {
         files: this.props.files,
         ref: this.setRef('fileSelector'),
         receiveFile: this.handleFile,
         acceptAttribute: fileType,
         "data-automation": "sdk-import-file-selector"
-      }), fileType === 'image/*' && /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.altTextWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+      }), fileType === 'image/*' && (0, _emotion.jsx)("div", {
+        css: this.props.styles.altTextWrapper
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
         ref: this.setRef('altTextInput'),
         onChange: this.onAltTextChange,
         value: this.props.altText,
-        renderLabel: /*#__PURE__*/_react.default.createElement("div", null, (0, _formatMessage.default)('alt text (optional)')),
+        renderLabel: (0, _emotion.jsx)("div", null, (0, _formatMessage.default)('alt text (optional)')),
         type: "text"
       })));
     }
   }, {
     key: "renderFailureContent",
     value: function renderFailureContent() {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiAlerts.Alert, {
         variant: "error",
         ref: this.setRef('failureAlert'),
         "data-automation": "sdk-import-error-alert"
-      }, /*#__PURE__*/_react.default.createElement("div", null, this.uploadStatusMessage(), /*#__PURE__*/_react.default.createElement(_uiToggleDetails.ToggleDetails, {
-        summary: /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)("div", null, this.uploadStatusMessage(), (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
+        summary: (0, _emotion.jsx)(_uiText.Text, {
           size: "small"
         }, (0, _formatMessage.default)('Error Details'))
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
       }, this.props.failureMessage)))));
     }
   }, {
     key: "renderSuccessContent",
     value: function renderSuccessContent() {
-      return /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+      return (0, _emotion.jsx)(_uiAlerts.Alert, {
         variant: "success",
         ref: this.setRef('successAlert'),
         "data-automation": "sdk-import-success-alert"
@@ -299,7 +292,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   }, {
     key: "renderImportingContent",
     value: function renderImportingContent() {
-      return /*#__PURE__*/_react.default.createElement(_uiProgress.ProgressBar, {
+      return (0, _emotion.jsx)(_uiProgress.ProgressBar, {
         screenReaderLabel: (0, _formatMessage.default)('Import process completion'),
         valueNow: this.props.progressValue,
         ref: this.setRef('progressBar')
@@ -359,13 +352,13 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
       }
 
       var selectedIndex = this.state.selectedTabIndex;
-      return /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs, {
+      return (0, _emotion.jsx)(_uiTabs.Tabs, {
         onRequestTabChange: this.handleTabChange,
         variant: "secondary"
       }, this.props.acceptFileType.map(function (_ref2, index) {
         var fileType = _ref2.fileType,
             title = _ref2.title;
-        return /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
+        return (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
           key: title,
           renderTitle: title,
           disabled: _this3.props.files.size > 0 && index !== selectedIndex,
@@ -376,7 +369,7 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_quizCommon.ImportantModal, {
+      return (0, _emotion.jsx)(_quizCommon.ImportantModal, {
         open: this.props.modalOpen,
         size: "small",
         onClose: this.props.onClose,
@@ -384,15 +377,15 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
         label: (0, _formatMessage.default)('Import Content'),
         ref: this.setRef('modal'),
         "data-automation": "sdk-import-content-modal"
-      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2"
-      }, (0, _formatMessage.default)('Import Content')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+      }, (0, _formatMessage.default)('Import Content')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.cancelAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: (0, _formatMessage.default)('Close')
-      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.cancelButton(), this.continueButton()));
+      })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, this.renderContent()), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.cancelButton(), this.continueButton()));
     }
   }]);
   ImportModal.displayName = "ImportModal";
@@ -430,8 +423,9 @@ var ImportModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   // passed in by connect
   setUploadStatus: _propTypes.default.func.isRequired,
   // passed in by connect
-  uploadStatus: _propTypes.default.oneOf([_quizCommon.FILE_UPLOAD_SELECT, _quizCommon.FILE_UPLOAD_IMPORTING, _quizCommon.FILE_UPLOAD_SUCCESS, _quizCommon.FILE_UPLOAD_FAILURE, _quizCommon.FILE_UPLOAD_ERROR]).isRequired // passed in by connect
-
+  uploadStatus: _propTypes.default.oneOf([_quizCommon.FILE_UPLOAD_SELECT, _quizCommon.FILE_UPLOAD_IMPORTING, _quizCommon.FILE_UPLOAD_SUCCESS, _quizCommon.FILE_UPLOAD_FAILURE, _quizCommon.FILE_UPLOAD_ERROR]).isRequired,
+  // passed in by connect,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   closeOverride: null,
   disableConfirm: false,

package/lib/common/components/ImportModal/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    altTextWrapper: {
+      marginTop: componentTheme.altTextMargin
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/ImportModal/theme.js

@@ -3,11 +3,14 @@
 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;
   return {
     altTextMargin: spacing.large
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/SDKApp/index.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
 });
@@ -17,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"));
 
@@ -25,7 +23,7 @@ var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-back
 
 var _reactDnd = require("react-dnd");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiI18n = require("@instructure/ui-i18n");
 
@@ -49,7 +47,7 @@ var _grading = require("../../actions/grading.js");
 
 var _renderAlerts = require("../../util/renderAlerts.js");
 
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/CustomPropTypes.js"));
 
@@ -63,17 +61,9 @@ var _index3 = require("../ApiFeatureFlagInitializer/index.js");
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fzweS',
-  template: function template(theme) {
-    return "\n\n.fzweS_dXHX{height:100%}";
-  },
-  'sdk': 'fzweS_dXHX'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_index.default, null);
+var _ref = (0, _emotion.jsx)(_index.default, null);
 
-var SDKApp = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var SDKApp = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SDKApp, _Component);
 
   var _super = (0, _createSuper2.default)(SDKApp);
@@ -183,13 +173,13 @@ var SDKApp = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
       var store = this.store,
           props = this.props,
           context = this.context;
-      return /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+      return (0, _emotion.jsx)(_reactRedux.Provider, {
         store: store
-      }, /*#__PURE__*/_react.default.createElement(_index3.ApiFeatureFlagInitializer, null, /*#__PURE__*/_react.default.createElement(_index2.default, this.props.rceConfig, /*#__PURE__*/_react.default.createElement(_uiI18n.ApplyLocale, {
+      }, (0, _emotion.jsx)(_index3.ApiFeatureFlagInitializer, null, (0, _emotion.jsx)(_index2.default, this.props.rceConfig, (0, _emotion.jsx)(_uiI18n.ApplyLocale, {
         locale: (0, _quizCommon.getLocale)(props, context),
         timezone: props.timeZone
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.sdk,
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.sdk,
         "data-automation": "sdk-app"
       }, _ref, typeof props.children === 'function' ? props.children({
         addAlert: this.addAlert
@@ -226,7 +216,8 @@ var SDKApp = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
     message: _propTypes.default.string
   })),
   userToken: _propTypes.default.string.isRequired,
-  disableAlertLiveRegion: _propTypes.default.bool
+  disableAlertLiveRegion: _propTypes.default.bool,
+  styles: _propTypes.default.object
 }, _class2.contextTypes = {
   locale: _propTypes.default.string
 }, _class2.defaultProps = {

package/lib/common/components/SDKApp/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    sdk: {
+      height: '100%'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusShow/index.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
 });
@@ -17,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"));
 
@@ -25,35 +23,25 @@ var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-p
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../StimulusShowInfo/index.js"));
 
-var _Overlay = _interopRequireDefault(require("../../../../../common/components/shared/overlay/Overlay.js"));
-
 var _index2 = _interopRequireDefault(require("../../../../../building/components/resources/ActionButtons/index.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _index3 = _interopRequireDefault(require("../../../shared/overlayEmotion/index.js"));
+
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'ceqOh',
-  template: function template(theme) {
-    return "\n\n.ceqOh_dRGY{padding-bottom:".concat(theme.stimulusPadding || 'inherit', ";padding-top:").concat(theme.stimulusPadding || 'inherit', "}\n\n.ceqOh_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.ceqOh_cKlw{display:flex;overflow:hidden}\n\n.ceqOh_ffXB{color:").concat(theme.stimulusLabelColor || 'inherit', ";font-size:").concat(theme.stimulusLabelFontSize || 'inherit', ";margin:0 ").concat(theme.stimulusLabelMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis}\n\n.ceqOh_dMwa{height:100%;padding:").concat(theme.stimulusContentPaddingTop || 'inherit', " ").concat(theme.stimulusContentPaddingLeftRight || 'inherit', " ").concat(theme.stimulusContentPaddingBottom || 'inherit', "}");
-  },
-  'stimulus': 'ceqOh_dRGY',
-  'header': 'ceqOh_fsuY',
-  'leftHeader': 'ceqOh_cKlw',
-  'stimulusLabel': 'ceqOh_ffXB',
-  'stimulusContent': 'ceqOh_dMwa'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, null);
-
-var StimulusShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var _ref = (0, _emotion.jsx)(_uiIcons.IconBankLine, null);
+
+var StimulusShow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(StimulusShow, _Component);
 
   var _super = (0, _createSuper2.default)(StimulusShow);
@@ -86,20 +74,20 @@ var StimulusShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
+      return (0, _emotion.jsx)(_index3.default, {
         onClick: this.switchOnEditing,
-        wrapperClassName: styles.stimulusWrapper,
+        wrapperStyles: this.props.styles.stimulusWrapper,
         tabIndex: "-1",
         hideOverlay: this.props.isQuizContentLocked
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.stimulus
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.header
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.leftHeader
-      }, this.renderBankIcon(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.stimulusLabel
-      }, (0, _formatMessage.default)('Stimulus'))), /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }, (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.leftHeader
+      }, this.renderBankIcon(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.stimulusLabel
+      }, (0, _formatMessage.default)('Stimulus'))), (0, _emotion.jsx)(_index2.default, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.props.openDeleteStimulusModal,
@@ -112,11 +100,12 @@ var StimulusShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         shouldDisableCopy: this.props.isQuizContentLocked,
         shouldRenderEdit: !this.props.isQuizContentLocked,
         shouldRenderDelete: !this.props.isQuizContentLocked
-      })), /*#__PURE__*/_react.default.createElement("div", {
+      })), (0, _emotion.jsx)("div", {
         role: "presentation",
         onClick: this.props.isQuizContentLocked ? null : this.switchOnEditing,
-        className: styles.stimulusContent
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        css: this.props.styles.stimulusContent,
+        "data-testid": "stimulus-content"
+      }, (0, _emotion.jsx)(_index.default, {
         stimulus: this.props.stimulus
       }))));
     }
@@ -135,7 +124,8 @@ var StimulusShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   shouldDisableDragHandle: _propTypes.default.bool,
   stimulus: _reactImmutableProptypes.default.record.isRequired,
   switchOnEditing: _propTypes.default.func.isRequired,
-  shouldFocusOnMount: _propTypes.default.bool.isRequired
+  shouldFocusOnMount: _propTypes.default.bool.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   isBankedContent: false,
   isQuizContentLocked: false,

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

@@ -0,0 +1,41 @@
+"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
+    },
+    header: {
+      height: '1rem',
+      paddingLeft: componentTheme.headerPadding,
+      paddingRight: componentTheme.headerPadding,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    leftHeader: {
+      display: 'flex',
+      overflow: 'hidden'
+    },
+    stimulusLabel: {
+      color: componentTheme.stimulusLabelColor,
+      fontSize: componentTheme.stimulusLabelFontSize,
+      margin: "0 ".concat(componentTheme.stimulusLabelMargin),
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    stimulusContent: {
+      height: '10%0',
+      padding: "".concat(componentTheme.stimulusContentPaddingTop, " ").concat(componentTheme.stimulusContentPaddingLeftRight, " ").concat(componentTheme.stimulusContentPaddingBottom)
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusShow/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) {
     stimulusContentPaddingBottom: spacing.small,
     stimulusContentPaddingLeftRight: spacing.small
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.10.1-rc.5+000550e27",
+  "version": "20.10.1-rc.7+c0ed1ff3f",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.1.0",
-    "@instructure/quiz-common": "20.10.1-rc.5+000550e27",
-    "@instructure/quiz-i18n": "20.10.1-rc.5+000550e27",
-    "@instructure/quiz-interactions": "20.10.1-rc.5+000550e27",
-    "@instructure/quiz-number-input": "20.10.1-rc.5+000550e27",
-    "@instructure/quiz-rce": "20.10.1-rc.5+000550e27",
+    "@instructure/quiz-common": "20.10.1-rc.7+c0ed1ff3f",
+    "@instructure/quiz-i18n": "20.10.1-rc.7+c0ed1ff3f",
+    "@instructure/quiz-interactions": "20.10.1-rc.7+c0ed1ff3f",
+    "@instructure/quiz-number-input": "20.10.1-rc.7+c0ed1ff3f",
+    "@instructure/quiz-rce": "20.10.1-rc.7+c0ed1ff3f",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.10.1-rc.5+000550e27",
+    "instructure-validations": "20.10.1-rc.7+c0ed1ff3f",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -163,7 +163,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.10.1-rc.5+000550e27",
+    "quiz-presets": "20.10.1-rc.7+c0ed1ff3f",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "000550e2798491a2c0ecb006d4be4abc227fc685"
+  "gitHead": "c0ed1ff3f93fd948f16d8073e223cbb46dab4a74"
 }

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

@@ -1,3 +0,0 @@
-export default function generator() {
-  return {};
-}

package/lib/common/components/SDKApp/theme.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator() {
-  return {};
-}