@instructure/quiz-core 20.36.2 → 20.38.0

package/lib/common/components/layout/sidebar/Sidebar/index.js

@@ -23,6 +23,7 @@ var _uiView = require("@instructure/ui-view");
 var _emotion = require("@instructure/emotion");
 var _uiHeading = require("@instructure/ui-heading");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+var _uiTooltip = require("@instructure/ui-tooltip");
 var _quizCommon = require("@instructure/quiz-common");
 var _windowChecks = require("../../../../util/windowChecks.js");
 var _CustomPropTypes = _interopRequireDefault(require("../../../../util/CustomPropTypes.js"));
@@ -108,12 +109,19 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
   }, {
     key: "renderTitle",
     value: function renderTitle() {
+      var navigationText = (0, _formatMessage.default)('Navigate to title');
       if (this.props.grading) {
         return;
       }
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.sidebar.actionableInfo,
         className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
+      }, (0, _emotion.jsx)(_uiTooltip.Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : (0, _emotion.jsx)("span", {
+          "aria-hidden": "true"
+        }, navigationText),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['focus', 'hover']
       }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
@@ -121,7 +129,7 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         onClick: this.scrollToTitle,
         renderIcon: _ref,
         "data-automation": "sidebar-title-button"
-      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to title'))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, navigationText))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-title-text",
         onClick: this.scrollToTitle,
@@ -131,12 +139,19 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
   }, {
     key: "renderInstructions",
     value: function renderInstructions() {
+      var navigationText = (0, _formatMessage.default)('Navigate to instructions');
       if (this.props.grading) {
         return;
       }
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.sidebar.actionableInfo,
         className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
+      }, (0, _emotion.jsx)(_uiTooltip.Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : (0, _emotion.jsx)("span", {
+          "aria-hidden": "true"
+        }, navigationText),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['focus', 'hover']
       }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
@@ -144,7 +159,7 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         onClick: this.scrollToInfo,
         renderIcon: _ref2,
         "data-automation": "sidebar-instructions-button"
-      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to instructions'))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, navigationText))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-instructions-text",
         onClick: this.scrollToInfo,
@@ -154,11 +169,18 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
   }, {
     key: "renderResults",
     value: function renderResults() {
+      var navigationText = (0, _formatMessage.default)('Navigate to results');
       if (!this.props.grading) {
         return;
       }
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.sidebar.actionableInfo
+      }, (0, _emotion.jsx)(_uiTooltip.Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : (0, _emotion.jsx)("span", {
+          "aria-hidden": "true"
+        }, navigationText),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['focus', 'hover']
       }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
@@ -166,7 +188,7 @@ var Sidebar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _them
         onClick: this.scrollToResults,
         renderIcon: _ref3,
         "data-automation": "sidebar-results-button"
-      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to results'))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, navigationText))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-results-text",
         onClick: this.scrollToResults,

package/lib/common/components/layout/sidebar/Sidebar/styles.js

@@ -7,19 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _externalStyles = require("./externalStyles.js");
 var generateStyle = function generateStyle(componentTheme, props) {
   var _commonContainer;
   var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
   var mp = '@media print';
-  return {
+  return (0, _merge.default)({
     sidebar: (0, _objectSpread3.default)((0, _objectSpread3.default)((0, _defineProperty2.default)({
       boxSizing: 'border-box',
       width: componentTheme.sidebarWidthClosed,
       backgroundColor: componentTheme.sidebarBackgroundColor,
-      borderTop: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
-      borderRight: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
-      borderBottom: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
-      borderLeft: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
       color: componentTheme.sidebarColor,
       height: '100%',
       overflow: 'hidden',
@@ -118,7 +116,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
     }), (0, _defineProperty2.default)(_commonContainer, mp, {
       display: 'none'
     }), _commonContainer)
-  };
+  }, (0, _externalStyles.generateExternalStyle)(componentTheme));
 };
 var _default = generateStyle;
 exports.default = _default;

package/lib/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -12,9 +12,7 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
-var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _uiLink = require("@instructure/ui-link");
-var _uiFlex = require("@instructure/ui-flex");
 var _emotion = require("@instructure/emotion");
 var _index = _interopRequireDefault(require("../PositionSummary/index.js"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -22,6 +20,8 @@ var _quizRce = require("@instructure/quiz-rce");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
 var _quizCommon = require("@instructure/quiz-common");
+var _uiTooltip = require("@instructure/ui-tooltip");
+var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _dec, _class, _SidebarItem;
 /** @jsx jsx */
 var SidebarItem = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
@@ -96,12 +96,18 @@ var SidebarItem = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _
         displayPosition = _this$props2.displayPosition,
         itemId = _this$props2.itemId,
         isAnswered = _this$props2.isAnswered;
-      var screenReaderContent = !isAnswered && isAnswered !== null ? (0, _formatMessage.default)('Navigate to question at position {displayPosition}, unanswered', {
+      var content = !isAnswered && isAnswered !== null ? (0, _formatMessage.default)('Navigate to question at position {displayPosition}, unanswered', {
         displayPosition: displayPosition
       }) : (0, _formatMessage.default)('Navigate to question at position {displayPosition}', {
         displayPosition: displayPosition
       });
-      return (0, _emotion.jsx)(_uiLink.Link, {
+      return (0, _emotion.jsx)(_uiTooltip.Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : (0, _emotion.jsx)("span", {
+          "aria-hidden": "true"
+        }, content),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['hover', 'focus']
+      }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         size: "small",
         margin: "0 small",
@@ -111,8 +117,8 @@ var SidebarItem = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _
         "data-automation-item-id": itemId,
         "data-automation": "sdk-sidebar-item-button"
       }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
-        alt: screenReaderContent
-      }, this.renderPosition()));
+        alt: content
+      }, this.renderPosition())));
     }
   }, {
     key: "renderClosed",
@@ -134,9 +140,9 @@ var SidebarItem = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _
       return (0, _emotion.jsx)("div", {
         className: parentDivClass,
         css: styles.sidebarItem
-      }, (0, _emotion.jsx)(_uiFlex.Flex, {
+      }, (0, _emotion.jsx)(_quizCommon.Flex, {
         justifyItems: "space-between"
-      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, null, this.renderButton()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_quizCommon.Flex.Item, null, this.renderButton()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
         shouldGrow: true,
         shouldShrink: true,
         onClick: this.scrollToItem,
@@ -155,7 +161,7 @@ var SidebarItem = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _
         css: this.props.styles.itemBody
       }, (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
         content: this.props.itemBody
-      })))), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)("div", {
+      })))), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, (0, _emotion.jsx)("div", {
         css: this.props.styles.pinWrapper
       }, children))));
     }

package/lib/common/components/layout/sidebar/Stimulus/presenter.js

@@ -15,8 +15,6 @@ var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-p
 var _uiIcons = require("@instructure/ui-icons");
 var _emotion = require("@instructure/emotion");
 var _uiLink = require("@instructure/ui-link");
-var _uiFlex = require("@instructure/ui-flex");
-var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _index = _interopRequireDefault(require("./Collection/index.js"));
 var _index2 = _interopRequireDefault(require("./Title/index.js"));
 var _index3 = _interopRequireDefault(require("./Summary/index.js"));
@@ -24,6 +22,8 @@ var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _quizCommon = require("@instructure/quiz-common");
+var _uiTooltip = require("@instructure/ui-tooltip");
+var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _dec, _class, _SidebarStimulus;
 /** @jsx jsx */
 var DISPLAY_AS_SUMMARY_LIMIT = 5;
@@ -86,16 +86,23 @@ var SidebarStimulus = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
     key: "renderButton",
     value: function renderButton() {
       var displayPosition = this.props.displayPosition;
-      return (0, _emotion.jsx)(_uiLink.Link, {
+      var textForNavigation = (0, _formatMessage.default)('Navigate to stimulus at position {displayPosition}', {
+        displayPosition: displayPosition
+      });
+      return (0, _emotion.jsx)(_uiTooltip.Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : (0, _emotion.jsx)("span", {
+          "aria-hidden": "true"
+        }, textForNavigation),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['hover', 'focus']
+      }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToItem,
         renderIcon: _ref,
         className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
-      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to stimulus at position { displayPosition }', {
-        displayPosition: displayPosition
-      })));
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, textForNavigation)));
     }
   }, {
     key: "renderClosed",
@@ -124,16 +131,16 @@ var SidebarStimulus = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         css: this.props.styles.infoHeader
       }, (0, _formatMessage.default)('Stimulus')), (0, _emotion.jsx)("div", {
         css: this.props.styles.stimulusBody
-      }, (0, _emotion.jsx)(_uiFlex.Flex, {
+      }, (0, _emotion.jsx)(_quizCommon.Flex, {
         justifyItems: "space-between"
-      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, null, this.renderButton()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_quizCommon.Flex.Item, null, this.renderButton()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
         shouldGrow: true,
         shouldShrink: true,
         onClick: this.scrollToItem,
         tabIndex: "-1"
       }, (0, _emotion.jsx)(_index2.default, {
         title: stimulus.title
-      })), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, children)), (0, _emotion.jsx)(_index3.default, {
+      })), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, children)), (0, _emotion.jsx)(_index3.default, {
         startPosition: displayPosition,
         isDragging: isDragging,
         isShowingItems: isShowingItems,

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

@@ -15,7 +15,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _OutcomeAlignments = _interopRequireDefault(require("@instructure/outcomes-ui/es/containers/OutcomeAlignments"));
 var _OutcomeCount = _interopRequireDefault(require("@instructure/outcomes-ui/es/containers/OutcomeCount"));
-var _uiFormField = require("@instructure/ui-form-field");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../common/util/CustomPropTypes.js"));
 var _componentForItem = _interopRequireDefault(require("../../../../util/componentForItem.js"));
@@ -24,7 +23,6 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _interactionTypePropsHelper = require("../../../../util/interactionTypePropsHelper.js");
 var _ElementsForSelectors = _interopRequireDefault(require("../../../../../common/util/ElementsForSelectors.js"));
 var _instUIMessages = require("../../../../util/instUIMessages.js");
-var _featureCheck = require("../../../../../common/util/featureCheck.js");
 var ItemEdit = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ItemEdit, _Component);
   var _super = (0, _createSuper2.default)(ItemEdit);
@@ -72,7 +70,7 @@ var ItemEdit = /*#__PURE__*/function (_Component) {
       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 ((0, _featureCheck.featureOn)('sub_account_bank_sharing') && rootAccountName) {
+      if (rootAccountName) {
         launchContexts.push({
           uuid: this.props.rootAccountUuid,
           name: rootAccountName
@@ -136,7 +134,7 @@ var ItemEdit = /*#__PURE__*/function (_Component) {
       var interactionType = item.getInteractionType().slug;
       var Interaction = (0, _componentForItem.default)(interactionType, _quizCommon.COMPONENT_EDIT);
       var propsForInteraction = (0, _interactionTypePropsHelper.propsForInteractionEdit)(this.props, this.additionalEditOptions());
-      return /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
+      return /*#__PURE__*/_react.default.createElement(_quizCommon.FormFieldGroup, {
         messages: this.getError('onSelf'),
         description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit question:')),
         name: "edit_item_".concat(this.props.guid)

package/lib/common/components/resources/quiz/AddContent/Body/presenter.js

@@ -46,11 +46,11 @@ var AddContentBody = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default
       _this.props.setUi(_quizCommon.BUILD_TRAY_POSITION, _this.props.position);
       _this.props.setUi(_quizCommon.BUILD_TRAY_STIMULUS_ID, _this.props.parentEntryId);
     };
-    _this.addStimulus = function () {
+    _this.addStimulus = function (isPassage) {
       if (_this.props.editingQuizEntry) {
         _this.props.setNextQuizEntry(null, _this.props.quizId, _this.props.position);
       } else {
-        _this.props.createStimulus(_this.props.quizId, _this.props.position);
+        _this.props.createStimulus(_this.props.quizId, _this.props.position, isPassage);
       }
       _this.props.onAddItem();
     };

package/lib/common/components/resources/quiz/instructions/styles.js

@@ -10,20 +10,22 @@ var generateStyle = function generateStyle(componentTheme) {
       position: 'relative',
       width: '100%',
       boxSizing: 'border-box',
-      paddingLeft: componentTheme.wrapperPadding,
-      paddingRight: componentTheme.wrapperPadding,
+      padding: componentTheme.wrapperPadding,
       '&::after': {
         clear: 'both',
         content: '""',
         display: 'table'
       },
       '.user_content p': {
-        margin: componentTheme.userContentMargin,
+        margin: "".concat(componentTheme.userContentMargin, " 0"),
         '&:first-of-type': {
-          marginTop: componentTheme.userContentZeroMargin
+          margin: "0 0 ".concat(componentTheme.userContentMargin)
         },
-        '&:last-child': {
-          marginBottom: componentTheme.userContentMargin
+        '&:last-of-type': {
+          margin: "".concat(componentTheme.userContentMargin, " 0 0")
+        },
+        '&:only-child': {
+          margin: 0
         }
       }
     },

package/lib/common/components/resources/quiz/instructions/theme.js

@@ -10,8 +10,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     wrapperPadding: spacing.large,
     textFontSize: typography.fontSizeMedium,
-    userContentMargin: spacing.mediumSmall,
-    userContentZeroMargin: 0
+    userContentMargin: spacing.mediumSmall
   };
 };
 var _default = generateComponentTheme;

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

@@ -128,6 +128,7 @@ var Stimulus = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _the
   }, {
     key: "renderPanels",
     value: function renderPanels(propsForDnDZone) {
+      var isPassage = this.props.stimulus.passage;
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.stimulus,
         ref: this.props.dndRef,
@@ -136,9 +137,9 @@ var Stimulus = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _the
         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, {
+      }, (0, _emotion.jsx)("div", null), this.renderChildQuizEntries(), !isPassage && (0, _emotion.jsx)(_index4.default, Object.assign({}, propsForDnDZone, {
         location: "in"
-      })), this.props.childEntries.size === 0 && !this.isQuizContentLocked() && (0, _emotion.jsx)(_index.default, {
+      })), this.props.childEntries.size === 0 && !this.isQuizContentLocked() && !isPassage && (0, _emotion.jsx)(_index.default, {
         allowStimulusCreation: false,
         stimulusId: this.props.stimulus.id,
         parentEntryId: this.props.quizEntry.id,

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

@@ -20,6 +20,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uiButtons = require("@instructure/ui-buttons");
 var _uiToggleDetails = require("@instructure/ui-toggle-details");
 var _emotion = require("@instructure/emotion");
+var _uiText = require("@instructure/ui-text");
+var _uiView = require("@instructure/ui-view");
 var _quizCommon = require("@instructure/quiz-common");
 var _warningHelpers = require("../../../../util/warningHelpers.js");
 var _index = _interopRequireDefault(require("../../../../../banks/components/AddToBankModal/index.js"));
@@ -325,7 +327,13 @@ var StimulusEdit = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   }, {
     key: "renderAddToBankOptions",
     value: function renderAddToBankOptions() {
-      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
+      var _this$props$stimulus;
+      var paddingTopStyle = ((_this$props$stimulus = this.props.stimulus) === null || _this$props$stimulus === void 0 ? void 0 : _this$props$stimulus.passage) ? {
+        padding: 'small 0 0'
+      } : {};
+      return (0, _emotion.jsx)(_uiView.View, Object.assign({
+        as: "div"
+      }, paddingTopStyle), (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
         variant: "filled",
         key: "itemBanking",
         summary: (0, _formatMessage.default)('Item Banking')
@@ -345,14 +353,16 @@ var StimulusEdit = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   }, {
     key: "renderStimulusEdit",
     value: function renderStimulusEdit() {
+      var stimulusLabel = this.props.stimulus.passage ? (0, _formatMessage.default)('Passage') : (0, _formatMessage.default)('Stimulus');
       return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
         css: this.props.styles.stimulus,
         ref: this.handleRef
       }, (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, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
+        size: "small",
+        color: "secondary"
+      }, stimulusLabel), (0, _emotion.jsx)(_index6.default, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.handleDeleteStimulus,

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var generateStyle = function generateStyle(componentTheme) {
+var generateStyle = function generateStyle(componentTheme, props) {
   return {
     stimulus: {
       paddingTop: componentTheme.stimulusPadding,
@@ -29,10 +29,6 @@ var generateStyle = function generateStyle(componentTheme) {
       height: '100%',
       padding: componentTheme.stimulusContentPadding
     },
-    stimulusLabel: {
-      color: componentTheme.stimulusLabelColor,
-      fontSize: componentTheme.stimulusLabelFontSize
-    },
     stimulusButtons: {
       flex: '0 0 auto',
       display: 'inline-flex',

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

@@ -15,8 +15,6 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     optionPadding: spacing.small,
     stimulusContentPadding: spacing.small,
     stimulusContentPaddingBottom: spacing.small,
-    stimulusLabelColor: colors.ash,
-    stimulusLabelFontSize: typography.fontSizeSmall,
     stimulusButtonsColor: colors.oxford,
     stimulusButtonsZIndex: '3333'
   };

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

@@ -13,13 +13,10 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _uiA11yContent = require("@instructure/ui-a11y-content");
-var _uiTextInput = require("@instructure/ui-text-input");
-var _uiFormField = require("@instructure/ui-form-field");
 var _emotion = require("@instructure/emotion");
 var _uiHeading = require("@instructure/ui-heading");
 var _quizRce = require("@instructure/quiz-rce");
 var _instUIMessages = require("../../../../util/instUIMessages.js");
-var _uiSimpleSelect = require("@instructure/ui-simple-select");
 var _uiIcons = require("@instructure/ui-icons");
 var _uiToggleDetails = require("@instructure/ui-toggle-details");
 var _quizCommon = require("@instructure/quiz-common");
@@ -68,8 +65,12 @@ var StimulusEditInfo = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defau
   }
   (0, _createClass2.default)(StimulusEditInfo, [{
     key: "headerText",
-    value: function headerText() {
-      return this.props.stimulus.isTemporary() ? (0, _formatMessage.default)('Add Stimulus') : (0, _formatMessage.default)('Edit Stimulus');
+    value: function headerText(stimulus) {
+      if (stimulus.isTemporary()) {
+        return stimulus.passage ? (0, _formatMessage.default)('Add Passage') : (0, _formatMessage.default)('Add Stimulus');
+      } else {
+        return stimulus.passage ? (0, _formatMessage.default)('Edit Passage') : (0, _formatMessage.default)('Edit Stimulus');
+      }
     }
   }, {
     key: "renderOptionalLabel",
@@ -85,85 +86,98 @@ var StimulusEditInfo = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defau
       var stimulusOrientation = this.props.workingStimulus.get('orientation');
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
+      }, (0, _emotion.jsx)(_quizCommon.SimpleSelect, {
         renderLabel: (0, _formatMessage.default)('Orientation'),
         onChange: this.onOrientationChange,
         value: stimulusOrientation,
         renderBeforeInput: (0, _emotion.jsx)(_uiIcons.IconUpdownLine, {
           rotate: stimulusOrientation === _quizCommon.TOP ? '0' : '90'
         })
-      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
+      }, (0, _emotion.jsx)(_quizCommon.SimpleSelect.Option, {
         renderBeforeLabel: _ref3,
         id: "stimulus-orientation-select-option-left",
         value: "left"
-      }, (0, _formatMessage.default)('Questions to the right')), (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
+      }, (0, _formatMessage.default)('Questions to the right')), (0, _emotion.jsx)(_quizCommon.SimpleSelect.Option, {
         renderBeforeLabel: _ref4,
         id: "stimulus-orientation-select-option-top",
         value: "top"
       }, (0, _formatMessage.default)('Questions below'))));
     }
+  }, {
+    key: "renderInstructions",
+    value: function renderInstructions(stimulus) {
+      if (stimulus.passage) {
+        return null;
+      }
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.section
+      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
+        renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Instructions')),
+        onChange: this.onTextInputChange('instructions'),
+        value: stimulus.get('instructions'),
+        "data-automation": "sdk-stimulus-instructions-input"
+      }));
+    }
+  }, {
+    key: "renderOptions",
+    value: function renderOptions(stimulus) {
+      if (stimulus.passage) {
+        return null;
+      }
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.section
+      }, (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
+        defaultExpanded: true,
+        variant: "filled",
+        key: "options",
+        summary: (0, _formatMessage.default)('Options')
+      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.section
+      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
+        renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Source URL'), (0, _formatMessage.default)('(optional - not visible to students)')),
+        onChange: this.onTextInputChange('sourceUrl'),
+        value: stimulus.get('sourceUrl'),
+        "data-automation": "sdk-source-url-input"
+      }))));
+    }
   }, {
     key: "render",
     value: function render() {
       var stimulus = this.props.workingStimulus;
       var textAreaId = "stimulusBodyEdit_".concat(stimulus.id, "_").concat(this.props.isBankedContent);
       var stimulusBodyId = "stimulusBodyEdit_".concat(stimulus.id, "_body");
-      return (0, _emotion.jsx)(_uiFormField.FormFieldGroup, {
+      return (0, _emotion.jsx)(_quizCommon.FormFieldGroup, {
         messages: this.inputErrors('onSelf'),
         description: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit Stimulus'))
       }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h3",
         as: "h2"
-      }, this.headerText()), (0, _emotion.jsx)("div", {
+      }, this.headerText(stimulus)), (0, _emotion.jsx)("div", {
         css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
         messages: this.inputErrors('title'),
         renderLabel: (0, _formatMessage.default)('Title'),
-        type: "text",
+        isRequired: true,
         ref: this.props.setTitleRef,
         onChange: this.onTextInputChange('title'),
         value: stimulus.get('title'),
         "data-automation": "sdk-stimulus-title-input"
-      })), (0, _emotion.jsx)("div", {
+      })), this.renderInstructions(stimulus), (0, _emotion.jsx)("div", {
         css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
-        renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Instructions')),
-        type: "text",
-        onChange: this.onTextInputChange('instructions'),
-        value: stimulus.get('instructions'),
-        "data-automation": "sdk-stimulus-instructions-input"
-      })), (0, _emotion.jsx)("div", {
-        css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiFormField.FormField, {
-        id: stimulusBodyId,
-        label: (0, _formatMessage.default)('Content')
+      }, (0, _emotion.jsx)(_quizCommon.FormField, {
+        id: stimulusBodyId
       }, (0, _emotion.jsx)(_quizRce.RichContentInput, {
         actsAsInput: true,
-        label: "",
+        label: (0, _formatMessage.default)('Content'),
+        isRequired: true,
         messages: this.inputErrors('body'),
-        placeholder: (0, _formatMessage.default)('Add Stimulus Content...'),
         textareaId: textAreaId,
         defaultContent: stimulus.get('body'),
         onKeyUp: this.onBodyChange,
         onBlur: this.onBodyChange,
         onChange: this.onBodyChange,
         height: _quizRce.RCE_SINGLE_LINE_HEIGHT
-      }))), (0, _emotion.jsx)("div", {
-        css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
-        defaultExpanded: true,
-        variant: "filled",
-        key: "options",
-        summary: (0, _formatMessage.default)('Options')
-      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, (0, _emotion.jsx)("div", {
-        css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
-        renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Source URL'), (0, _formatMessage.default)('(optional - not visible to students)')),
-        type: "text",
-        onChange: this.onTextInputChange('sourceUrl'),
-        value: stimulus.get('sourceUrl'),
-        "data-automation": "sdk-source-url-input"
-      })))));
+      }))), this.renderOptions(stimulus));
     }
   }]);
   StimulusEditInfo.displayName = "StimulusEditInfo";

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

@@ -14,6 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _uiIcons = require("@instructure/ui-icons");
 var _emotion = require("@instructure/emotion");
+var _uiText = require("@instructure/ui-text");
 var _index = _interopRequireDefault(require("../StimulusShowInfo/index.js"));
 var _index2 = _interopRequireDefault(require("../../../../../building/components/resources/ActionButtons/index.js"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -50,6 +51,7 @@ var StimulusShow = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   }, {
     key: "render",
     value: function render() {
+      var stimulusLabel = this.props.stimulus.passage ? (0, _formatMessage.default)('Passage') : (0, _formatMessage.default)('Stimulus');
       return (0, _emotion.jsx)(_index3.default, {
         onClick: this.switchOnEditing,
         wrapperStyles: this.props.styles.stimulusWrapper,
@@ -61,9 +63,13 @@ var StimulusShow = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
         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, {
+      }, this.renderBankIcon(), (0, _emotion.jsx)(_quizCommon.Flex, {
+        margin: "0 x-small"
+      }, (0, _emotion.jsx)(_uiText.Text, {
+        size: "small",
+        color: "secondary",
+        margin: "0 x-small"
+      }, stimulusLabel))), (0, _emotion.jsx)(_index2.default, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.props.openDeleteStimulusModal,