@instructure/quiz-core 20.37.1 → 20.38.0

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

@@ -12,7 +12,6 @@ import { IconPlusLine } from '@instructure/ui-icons';
 import { Button, CondensedButton } from '@instructure/ui-buttons';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { View } from '@instructure/ui-view';
-import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { jsx } from '@instructure/emotion';
@@ -21,7 +20,7 @@ import TagSuggestSelect from "../../../common/components/shared/TagSuggestSelect
 import { interactionTypesNameDictionary } from "../../../common/util/interactionTypeMetadata.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-import { TextInput, withStyleOverrides } from '@instructure/quiz-common';
+import { Flex, TextInput, withStyleOverrides } from '@instructure/quiz-common';
 var tagShape = PropTypes.shape({
   tag: PropTypes.shape({
     id: PropTypes.string,

package/es/building/api/stimuli.js

@@ -21,7 +21,8 @@ export function createStimulus(stimulus, parentId, parentType) {
     parent_stimulus_id: parentStimulusId,
     source_url: stimulus.sourceUrl,
     stimulus_type: stimulus.stimulusType,
-    title: stimulus.title
+    title: stimulus.title,
+    passage: stimulus.passage
   };
   var requestBody = JSON.stringify({
     stimulus: stimulusParams

package/es/building/components/resources/DeleteStimulusModal/presenter.js

@@ -114,6 +114,12 @@ export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, gener
         cancelText: t('Cancel')
       };
     }
+  }, {
+    key: "isPassage",
+    value: function isPassage() {
+      var _this$props$stimulusE;
+      return (_this$props$stimulusE = this.props.stimulusEntry) === null || _this$props$stimulusE === void 0 ? void 0 : _this$props$stimulusE.getEntry().passage;
+    }
   }, {
     key: "anyImmutableKeepers",
     value: function anyImmutableKeepers() {
@@ -142,8 +148,8 @@ export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, gener
       return jsx(Button, {
         onClick: this.closeAction,
         margin: XSMALL_SIDE_MARGIN,
-        "data-automation": "sdk-keep-stimulus-button"
-      }, t('Keep Stimulus'));
+        "data-automation": "sdk-keep-".concat(this.isPassage() ? 'passage' : 'stimulus', "-button")
+      }, this.isPassage() ? t('Keep Passage') : t('Keep Stimulus'));
     }
   }, {
     key: "doneButton",
@@ -157,8 +163,8 @@ export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, gener
         color: "primary",
         onClick: this.handleSubmit,
         margin: XSMALL_SIDE_MARGIN,
-        "data-automation": "sdk-remove-stimulus-button"
-      }, t('Remove Stimulus'));
+        "data-automation": "sdk-remove-".concat(this.isPassage() ? 'passage' : 'stimulus', "-button")
+      }, this.isPassage() ? t('Remove Passage') : t('Remove Stimulus'));
     }
   }, {
     key: "renderChooseWhich",
@@ -199,7 +205,8 @@ export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, gener
   }, {
     key: "renderContent",
     value: function renderContent() {
-      var content = this.props.childEntries.size === 0 ? jsx("span", null, t('Are you sure you want to remove this stimulus?')) : this.renderMainMenu();
+      var message = this.isPassage() ? t('Are you sure you want to remove this passage?') : t('Are you sure you want to remove this stimulus?');
+      var content = this.props.childEntries.size === 0 ? jsx("span", null, message) : this.renderMainMenu();
       var stimulusTitle = this.props.stimulusEntry && this.props.stimulusEntry.getEntry().title;
       return jsx("div", {
         className: "deleteStimulusModal",
@@ -215,11 +222,11 @@ export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, gener
         open: this.props.modalOpen,
         onDismiss: this.closeAction,
         size: "small",
-        label: t('Confirm Stimulus Removal')
+        label: this.isPassage() ? t('Confirm Passage Removal') : t('Confirm Stimulus Removal')
       }, jsx(ModalHeader, null, jsx(Heading, {
         level: "reset",
         as: "h2"
-      }, t('Confirm Stimulus Removal')), jsx(CloseButton, {
+      }, this.isPassage() ? t('Confirm Passage Removal') : t('Confirm Stimulus Removal')), jsx(CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",

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

@@ -38,10 +38,10 @@ export var QuizEntry = (_dec = withStyleOverrides(generateStyle, generateCompone
   function QuizEntry() {
     var _this;
     _classCallCheck(this, QuizEntry);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call.apply(_super, [this].concat(_args));
     _this.itemOverrideTypes = function () {
       return ['choice'].concat(_toConsumableArray(_this.props.partialScoringEnabled ? ['multi-answer'] : []), _toConsumableArray(_this.props.partialDeepScoringEnabled ? ['matching'] : []));
     };
@@ -96,7 +96,14 @@ export var QuizEntry = (_dec = withStyleOverrides(generateStyle, generateCompone
     };
     _this.bankEntryWarningWrapperProps = function () {
       if (_this.props.quizEntry.entryEditable) {
-        var propsFunc = _this.props.quizEntry.hasStimulus ? propsForStimulusBankEntryEditPrompt : propsForItemBankEntryEditPrompt;
+        var _this$props$entry;
+        var isPassage = (_this$props$entry = _this.props.entry) === null || _this$props$entry === void 0 ? void 0 : _this$props$entry.passage;
+        var propsFunc = _this.props.quizEntry.hasStimulus ? function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+          return propsForStimulusBankEntryEditPrompt.apply(void 0, [isPassage].concat(args));
+        } : propsForItemBankEntryEditPrompt;
         return propsFunc(_this.isEditing(), _this.props.switchOffEditing, function () {
           var bankEntry = _this.props.quizEntry.getEntry();
           _this.props.setUi(BUILD_TRAY_OPEN, true);

package/es/building/components/resources/quizEntry/QuizEntryEdit/Footer/presenter.js

@@ -9,7 +9,6 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { View } from '@instructure/ui-view';
-import { Flex } from '@instructure/ui-flex';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Text } from '@instructure/ui-text';
 import NumberInput from '@instructure/quiz-number-input';
@@ -19,7 +18,7 @@ import { IconDiscussionLine, IconDiscussionSolid } from '@instructure/ui-icons';
 import { interactionPoints } from '@instructure/quiz-interactions';
 import t from '@instructure/quiz-i18n/es/format-message';
 import EntrySave from "../../../../../../common/components/resources/entry/EntrySave/index.js";
-import { ITEM_FEEDBACK_MODAL, ITEM_FEEDBACK_MODAL_ITEM, ITEM_FEEDBACK_MODAL_FEEDBACK, withStyleOverrides } from '@instructure/quiz-common';
+import { Flex, ITEM_FEEDBACK_MODAL, ITEM_FEEDBACK_MODAL_ITEM, ITEM_FEEDBACK_MODAL_FEEDBACK, withStyleOverrides } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 function pointsAsFloat(pointsString) {

package/es/common/actions/modifications.js

@@ -474,13 +474,14 @@ export function clearTemporaryBankItem(bankId) {
 // =====================
 // =====================
 
-export function createStimulus(quizId, position) {
+export function createStimulus(quizId, position, isPassage) {
   return function (dispatch, getState) {
     dispatch({
       type: CREATE_TEMPORARY_STIMULUS,
       payload: {
         quizId: quizId,
-        position: position
+        position: position,
+        isPassage: isPassage
       }
     });
   };

package/es/common/components/layout/Page/styles.js

@@ -17,7 +17,19 @@ var generateStyle = function generateStyle(componentTheme, props) {
       overflowY: 'auto'
     }), {}, {
       transition: componentTheme.contentTransition,
-      width: '100%'
+      width: '100%',
+      '.user_content p': {
+        margin: "".concat(componentTheme.userContentMargin, " 0"),
+        '&:first-of-type': {
+          margin: "0 0 ".concat(componentTheme.userContentMargin)
+        },
+        '&:last-of-type': {
+          margin: "".concat(componentTheme.userContentMargin, " 0 0")
+        },
+        '&:only-child': {
+          margin: 0
+        }
+      }
     })
   };
 };

package/es/common/components/layout/Page/theme.js

@@ -6,8 +6,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     fontFamily: typography.fontFamily,
     contentTransition: "transform ".concat(transitions.duration),
-    userContentMargin: spacing.mediumSmall,
-    userContentZeroMargin: 0
+    userContentMargin: spacing.mediumSmall
   };
 };
 export default generateComponentTheme;

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

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconMoveStartLine, IconMoveEndLine, IconPinSolid, IconQuizInstructionsLine, IconQuizTitleLine } from '@instructure/ui-icons';
-import { AccessibleContent, ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
+import { AccessibleContent, PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { Link } from '@instructure/ui-link';
 import { Text } from '@instructure/ui-text';
@@ -19,6 +19,7 @@ import { View } from '@instructure/ui-view';
 import { jsx, Global } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/es/format-message';
+import { Tooltip } from '@instructure/ui-tooltip';
 import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
 import { onPhone } from "../../../../util/windowChecks.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
@@ -101,12 +102,19 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
   }, {
     key: "renderTitle",
     value: function renderTitle() {
+      var navigationText = t('Navigate to title');
       if (this.props.grading) {
         return;
       }
       return jsx("div", {
         css: this.props.styles.sidebar.actionableInfo,
         className: END_EDITING_TRIGGER_CLASSNAME
+      }, jsx(Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : jsx("span", {
+          "aria-hidden": "true"
+        }, navigationText),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['focus', 'hover']
       }, jsx(Link, {
         href: "#",
         margin: "small",
@@ -114,7 +122,7 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
         onClick: this.scrollToTitle,
         renderIcon: _ref,
         "data-automation": "sidebar-title-button"
-      }, jsx(ScreenReaderContent, null, t('Navigate to title'))), jsx(PresentationContent, null, jsx("span", {
+      }, jsx(ScreenReaderContent, null, navigationText))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-title-text",
         onClick: this.scrollToTitle,
@@ -124,12 +132,19 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
   }, {
     key: "renderInstructions",
     value: function renderInstructions() {
+      var navigationText = t('Navigate to instructions');
       if (this.props.grading) {
         return;
       }
       return jsx("div", {
         css: this.props.styles.sidebar.actionableInfo,
         className: END_EDITING_TRIGGER_CLASSNAME
+      }, jsx(Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : jsx("span", {
+          "aria-hidden": "true"
+        }, navigationText),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['focus', 'hover']
       }, jsx(Link, {
         href: "#",
         margin: "small",
@@ -137,7 +152,7 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
         onClick: this.scrollToInfo,
         renderIcon: _ref2,
         "data-automation": "sidebar-instructions-button"
-      }, jsx(ScreenReaderContent, null, t('Navigate to instructions'))), jsx(PresentationContent, null, jsx("span", {
+      }, jsx(ScreenReaderContent, null, navigationText))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-instructions-text",
         onClick: this.scrollToInfo,
@@ -147,11 +162,18 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
   }, {
     key: "renderResults",
     value: function renderResults() {
+      var navigationText = t('Navigate to results');
       if (!this.props.grading) {
         return;
       }
       return jsx("div", {
         css: this.props.styles.sidebar.actionableInfo
+      }, jsx(Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : jsx("span", {
+          "aria-hidden": "true"
+        }, navigationText),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['focus', 'hover']
       }, jsx(Link, {
         href: "#",
         margin: "small",
@@ -159,7 +181,7 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
         onClick: this.scrollToResults,
         renderIcon: _ref3,
         "data-automation": "sidebar-results-button"
-      }, jsx(ScreenReaderContent, null, t('Navigate to results'))), jsx(PresentationContent, null, jsx("span", {
+      }, jsx(ScreenReaderContent, null, navigationText))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-results-text",
         onClick: this.scrollToResults,

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

@@ -7,16 +7,16 @@ var _dec, _class, _SidebarItem;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { Link } from '@instructure/ui-link';
-import { Flex } from '@instructure/ui-flex';
 import { jsx } from '@instructure/emotion';
 import PositionSummary from "../PositionSummary/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+import { Flex, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
 export var SidebarItem = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
   _inherits(SidebarItem, _Component);
   var _super = _createSuper(SidebarItem);
@@ -89,12 +89,18 @@ export var SidebarItem = (_dec = withStyleOverrides(generateStyle, generateCompo
         displayPosition = _this$props2.displayPosition,
         itemId = _this$props2.itemId,
         isAnswered = _this$props2.isAnswered;
-      var screenReaderContent = !isAnswered && isAnswered !== null ? t('Navigate to question at position {displayPosition}, unanswered', {
+      var content = !isAnswered && isAnswered !== null ? t('Navigate to question at position {displayPosition}, unanswered', {
         displayPosition: displayPosition
       }) : t('Navigate to question at position {displayPosition}', {
         displayPosition: displayPosition
       });
-      return jsx(Link, {
+      return jsx(Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : jsx("span", {
+          "aria-hidden": "true"
+        }, content),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['hover', 'focus']
+      }, jsx(Link, {
         href: "#",
         size: "small",
         margin: "0 small",
@@ -104,8 +110,8 @@ export var SidebarItem = (_dec = withStyleOverrides(generateStyle, generateCompo
         "data-automation-item-id": itemId,
         "data-automation": "sdk-sidebar-item-button"
       }, jsx(AccessibleContent, {
-        alt: screenReaderContent
-      }, this.renderPosition()));
+        alt: content
+      }, this.renderPosition())));
     }
   }, {
     key: "renderClosed",

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

@@ -10,15 +10,15 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconTextLeftLine } from '@instructure/ui-icons';
 import { jsx } from '@instructure/emotion';
 import { Link } from '@instructure/ui-link';
-import { Flex } from '@instructure/ui-flex';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import Collection from "./Collection/index.js";
 import Title from "./Title/index.js";
 import Summary from "./Summary/index.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+import { Flex, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 export var DISPLAY_AS_SUMMARY_LIMIT = 5;
 var _ref = jsx(IconTextLeftLine, {
   color: "primary"
@@ -78,16 +78,23 @@ export var SidebarStimulus = (_dec = withStyleOverrides(generateStyle, generateC
     key: "renderButton",
     value: function renderButton() {
       var displayPosition = this.props.displayPosition;
-      return jsx(Link, {
+      var textForNavigation = t('Navigate to stimulus at position {displayPosition}', {
+        displayPosition: displayPosition
+      });
+      return jsx(Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : jsx("span", {
+          "aria-hidden": "true"
+        }, textForNavigation),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['hover', 'focus']
+      }, jsx(Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToItem,
         renderIcon: _ref,
         className: END_EDITING_TRIGGER_CLASSNAME
-      }, jsx(ScreenReaderContent, null, t('Navigate to stimulus at position { displayPosition }', {
-        displayPosition: displayPosition
-      })));
+      }, jsx(ScreenReaderContent, null, textForNavigation)));
     }
   }, {
     key: "renderClosed",

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

@@ -39,11 +39,11 @@ export var AddContentBody = (_dec = withStyleOverrides(generateStyle, generateCo
       _this.props.setUi(BUILD_TRAY_POSITION, _this.props.position);
       _this.props.setUi(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/es/common/components/resources/quiz/instructions/styles.js

@@ -4,7 +4,7 @@ var generateStyle = function generateStyle(componentTheme) {
       position: 'relative',
       width: '100%',
       boxSizing: 'border-box',
-      padding: "0 ".concat(componentTheme.wrapperPadding, " ").concat(componentTheme.wrapperPadding),
+      padding: componentTheme.wrapperPadding,
       '&::after': {
         clear: 'both',
         content: '""',
@@ -15,8 +15,11 @@ var generateStyle = function generateStyle(componentTheme) {
         '&:first-of-type': {
           margin: "0 0 ".concat(componentTheme.userContentMargin)
         },
-        '&:last-child': {
+        '&:last-of-type': {
           margin: "".concat(componentTheme.userContentMargin, " 0 0")
+        },
+        '&:only-child': {
+          margin: 0
         }
       }
     },

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

@@ -121,6 +121,7 @@ export var Stimulus = (_dec = withStyleOverrides(generateStyle, generateComponen
   }, {
     key: "renderPanels",
     value: function renderPanels(propsForDnDZone) {
+      var isPassage = this.props.stimulus.passage;
       return jsx("div", {
         css: this.props.styles.stimulus,
         ref: this.props.dndRef,
@@ -129,9 +130,9 @@ export var Stimulus = (_dec = withStyleOverrides(generateStyle, generateComponen
         css: this.props.styles.leftPanel
       }, this.renderStimulusPanel()), jsx("div", {
         css: this.props.styles.itemPanel
-      }, jsx("div", null), this.renderChildQuizEntries(), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      }, jsx("div", null), this.renderChildQuizEntries(), !isPassage && jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "in"
-      })), this.props.childEntries.size === 0 && !this.isQuizContentLocked() && jsx(AddContentPopover, {
+      })), this.props.childEntries.size === 0 && !this.isQuizContentLocked() && !isPassage && jsx(AddContentPopover, {
         allowStimulusCreation: false,
         stimulusId: this.props.stimulus.id,
         parentEntryId: this.props.quizEntry.id,

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

@@ -15,6 +15,8 @@ import ReactDOM from 'react-dom';
 import { Button } from '@instructure/ui-buttons';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
 import { jsx } from '@instructure/emotion';
+import { Text } from '@instructure/ui-text';
+import { View } from '@instructure/ui-view';
 import { FILE_UPLOAD_SUCCESS, SHOULD_CLONE_ITEM, DELETED_QUIZ_ENTRY, withStyleOverrides } from '@instructure/quiz-common';
 import { propsForStimulusVersioningWrapper, propsForBankEntryVersioningWrapper } from "../../../../util/warningHelpers.js";
 import AddToBankModal from "../../../../../banks/components/AddToBankModal/index.js";
@@ -318,7 +320,13 @@ export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComp
   }, {
     key: "renderAddToBankOptions",
     value: function renderAddToBankOptions() {
-      return jsx("div", null, jsx(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 jsx(View, Object.assign({
+        as: "div"
+      }, paddingTopStyle), jsx(ToggleDetails, {
         variant: "filled",
         key: "itemBanking",
         summary: t('Item Banking')
@@ -338,14 +346,16 @@ export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComp
   }, {
     key: "renderStimulusEdit",
     value: function renderStimulusEdit() {
+      var stimulusLabel = this.props.stimulus.passage ? t('Passage') : t('Stimulus');
       return jsx("div", null, jsx("div", {
         css: this.props.styles.stimulus,
         ref: this.handleRef
       }, jsx("div", {
         css: this.props.styles.header
-      }, jsx("div", {
-        css: this.props.styles.stimulusLabel
-      }, t('Stimulus')), jsx(ActionButtons, {
+      }, jsx(Text, {
+        size: "small",
+        color: "secondary"
+      }, stimulusLabel), jsx(ActionButtons, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.handleDeleteStimulus,

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

@@ -1,4 +1,4 @@
-var generateStyle = function generateStyle(componentTheme) {
+var generateStyle = function generateStyle(componentTheme, props) {
   return {
     stimulus: {
       paddingTop: componentTheme.stimulusPadding,
@@ -23,10 +23,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/es/common/components/resources/stimulus/StimulusEdit/theme.js

@@ -9,8 +9,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/es/common/components/resources/stimulus/StimulusEditInfo/presenter.js

@@ -58,8 +58,12 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
   }
   _createClass(StimulusEditInfo, [{
     key: "headerText",
-    value: function headerText() {
-      return this.props.stimulus.isTemporary() ? t('Add Stimulus') : t('Edit Stimulus');
+    value: function headerText(stimulus) {
+      if (stimulus.isTemporary()) {
+        return stimulus.passage ? t('Add Passage') : t('Add Stimulus');
+      } else {
+        return stimulus.passage ? t('Edit Passage') : t('Edit Stimulus');
+      }
     }
   }, {
     key: "renderOptionalLabel",
@@ -92,6 +96,43 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
         value: "top"
       }, t('Questions below'))));
     }
+  }, {
+    key: "renderInstructions",
+    value: function renderInstructions(stimulus) {
+      if (stimulus.passage) {
+        return null;
+      }
+      return jsx("div", {
+        css: this.props.styles.section
+      }, jsx(TextInput, {
+        renderLabel: this.renderOptionalLabel(t('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 jsx("div", {
+        css: this.props.styles.section
+      }, jsx(ToggleDetails, {
+        defaultExpanded: true,
+        variant: "filled",
+        key: "options",
+        summary: t('Options')
+      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, jsx("div", {
+        css: this.props.styles.section
+      }, jsx(TextInput, {
+        renderLabel: this.renderOptionalLabel(t('Source URL'), t('(optional - not visible to students)')),
+        onChange: this.onTextInputChange('sourceUrl'),
+        value: stimulus.get('sourceUrl'),
+        "data-automation": "sdk-source-url-input"
+      }))));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -104,26 +145,17 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
       }, jsx(Heading, {
         level: "h3",
         as: "h2"
-      }, this.headerText()), jsx("div", {
+      }, this.headerText(stimulus)), jsx("div", {
         css: this.props.styles.section
       }, jsx(TextInput, {
         messages: this.inputErrors('title'),
         renderLabel: t('Title'),
         isRequired: true,
-        type: "text",
         ref: this.props.setTitleRef,
         onChange: this.onTextInputChange('title'),
         value: stimulus.get('title'),
         "data-automation": "sdk-stimulus-title-input"
-      })), jsx("div", {
-        css: this.props.styles.section
-      }, jsx(TextInput, {
-        renderLabel: this.renderOptionalLabel(t('Instructions')),
-        type: "text",
-        onChange: this.onTextInputChange('instructions'),
-        value: stimulus.get('instructions'),
-        "data-automation": "sdk-stimulus-instructions-input"
-      })), jsx("div", {
+      })), this.renderInstructions(stimulus), jsx("div", {
         css: this.props.styles.section
       }, jsx(FormField, {
         id: stimulusBodyId
@@ -138,22 +170,7 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
         onBlur: this.onBodyChange,
         onChange: this.onBodyChange,
         height: RCE_SINGLE_LINE_HEIGHT
-      }))), jsx("div", {
-        css: this.props.styles.section
-      }, jsx(ToggleDetails, {
-        defaultExpanded: true,
-        variant: "filled",
-        key: "options",
-        summary: t('Options')
-      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, jsx("div", {
-        css: this.props.styles.section
-      }, jsx(TextInput, {
-        renderLabel: this.renderOptionalLabel(t('Source URL'), t('(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";