@instructure/quiz-core 21.0.1-rc.14 → 21.0.1-rc.17

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

@@ -9,7 +9,7 @@ var _dec, _class, _DeleteStimulusModal;
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
@@ -26,19 +26,31 @@ import { Modal, ModalHeader, ModalBody, ModalFooter, DELETE_STIMULUS_MODAL_SELEC
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_DeleteStimulusModal = /*#__PURE__*/function (_Component) {
-  function DeleteStimulusModal() {
+  function DeleteStimulusModal(props) {
     var _this;
     _classCallCheck(this, DeleteStimulusModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DeleteStimulusModal, [].concat(args));
+    _this = _callSuper(this, DeleteStimulusModal, [props]);
+    /**
+     * @type {React.RefObject<RadioInput> | null}
+     */
+    _defineProperty(_this, "radioInputRef", null);
     _defineProperty(_this, "handleSubmit", function (e) {
-      _this.closeAction();
       var _this$props = _this.props,
         quizId = _this$props.quizId,
         stimulusEntry = _this$props.stimulusEntry,
         childEntries = _this$props.childEntries;
+      if (!_this.props.deletionMode && childEntries.size > 0) {
+        var _this$radioInputRef;
+        (_this$radioInputRef = _this.radioInputRef) === null || _this$radioInputRef === void 0 || (_this$radioInputRef = _this$radioInputRef.current) === null || _this$radioInputRef === void 0 || _this$radioInputRef.focus();
+        _this.setState({
+          validationError: [{
+            text: t('Please choose a deletion mode.'),
+            type: 'newError'
+          }]
+        });
+        return;
+      }
+      _this.closeAction();
       if (_this.props.deletionMode === 'chooseWhich') {
         _this.removeStimulus(_this.props.selectedChildren.toArray());
       } else if (_this.props.deletionMode === 'deleteAll') {
@@ -51,8 +63,17 @@ export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, gener
       _this.props.closeModal();
       _this.props.setUi(DELETE_STIMULUS_MODAL_DELETION_MODE, null);
       _this.props.setUi(DELETE_STIMULUS_MODAL_SELECTED_CHILDREN, Set.of());
+      _this.clearValidationError();
+    });
+    _defineProperty(_this, "clearValidationError", function () {
+      if (_this.state.validationError) {
+        _this.setState({
+          validationError: null
+        });
+      }
     });
     _defineProperty(_this, "setDeletionMode", function (event, value) {
+      _this.clearValidationError();
       _this.props.setUi(DELETE_STIMULUS_MODAL_DELETION_MODE, value);
     });
     _defineProperty(_this, "toggleChildSelected", function (childEntry) {
@@ -96,6 +117,10 @@ export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, gener
         css: _this.props.styles.checkboxesWrapper
       }, jsx(PresentationContent, null, jsx("hr", null)), checkboxes, jsx(PresentationContent, null, jsx("hr", null)));
     });
+    _this.state = {
+      validationError: null
+    };
+    _this.radioInputRef = React.createRef();
     return _this;
   }
   _inherits(DeleteStimulusModal, _Component);
@@ -156,12 +181,7 @@ export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, gener
   }, {
     key: "doneButton",
     value: function doneButton() {
-      var _this$props3 = this.props,
-        deletionMode = _this$props3.deletionMode,
-        childEntries = _this$props3.childEntries;
-      var disabled = !deletionMode && childEntries.size > 0;
       return jsx(Button, {
-        disabled: disabled,
         color: "primary",
         onClick: this.handleSubmit,
         margin: XSMALL_SIDE_MARGIN,
@@ -189,8 +209,10 @@ export var DeleteStimulusModal = (_dec = withStyleOverrides(generateStyle, gener
         name: "deletionMode",
         defaultValue: this.props.deletionMode,
         onChange: this.setDeletionMode,
-        description: jsx(ScreenReaderContent, null, t('Stimulus Removal Mode'))
+        description: jsx(ScreenReaderContent, null, t('Stimulus Removal Mode')),
+        messages: this.state.validationError
       }, jsx(RadioInput, {
+        ref: this.radioInputRef,
         key: "deleteAll",
         value: "deleteAll",
         label: jsx("div", {

package/es/building/components/resources/quizEntry/QuizEntryEdit/Header/index.js

@@ -160,6 +160,16 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         cancelText: t('Keep Question')
       };
     }
+  }, {
+    key: "isActiveBank",
+    get: function get() {
+      return this.props.quizEntry.isBank && this.props.newActiveBank;
+    }
+  }, {
+    key: "isBankEntry",
+    get: function get() {
+      return this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry;
+    }
   }, {
     key: "getVOText",
     value: function getVOText(verb, displayPosition) {
@@ -174,27 +184,19 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
       });
     }
   }, {
-    key: "renderBankedContent",
-    value: function renderBankedContent() {
-      if (this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry) {
-        return jsx(IconBankLine, null);
-      }
+    key: "renderItemName",
+    value: function renderItemName() {
+      return jsx(Text, {
+        size: "small",
+        weight: "normal",
+        "data-automation": "sdk-quiz-entry-interaction-type"
+      }, this.props.name);
     }
   }, {
-    key: "renderName",
-    value: function renderName() {
-      var isBank = this.props.quizEntry.isBank && this.props.newActiveBank;
-      var dataAutomation = 'sdk-quiz-entry-interaction-type';
-      if (!isBank) {
-        return jsx(Text, {
-          size: "small",
-          weight: "normal",
-          "data-automation": dataAutomation
-        }, this.props.name);
-      }
+    key: "renderBankNameButton",
+    value: function renderBankNameButton() {
       return jsx(CondensedButton, {
         size: "small",
-        margin: "0 0 0 x-small",
         onClick: this.handleBankClick,
         "data-automation": "sdk-quiz-entry-interaction-type"
       }, this.props.name);
@@ -220,14 +222,14 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         renderLabel: jsx(Flex, {
           direction: "column",
           gap: "small"
-        }, jsx(Flex.Item, {
+        }, !this.isBankEntry && jsx(Flex.Item, {
           "aria-hidden": true
-        }, this.renderName()), jsx(Flex.Item, {
+        }, this.renderItemName()), jsx(Flex.Item, {
           "aria-hidden": true
         }, t('Question Title')), jsx(ScreenReaderContent, null, titleLabelText)),
         type: "text",
         onChange: this.handleTitleChange,
-        value: workingEntry.title || '',
+        defaultValue: workingEntry.title || '',
         interaction: disabled ? 'disabled' : 'enabled',
         "data-automation": "sdk-question-title-textinput"
       });
@@ -242,15 +244,27 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
       return jsx(Flex, {
         className: "leftHeader",
         direction: "row",
-        justifyItems: "center",
+        alignItems: "center",
         "data-automation": "sdk-quiz-entry-left-header"
       }, jsx(PositionBox, {
         position: position,
         headingText: positionText,
         "data-automation": "sdk-quiz-entry-positionbox"
-      }), this.renderBankedContent(), jsx("div", {
-        css: this.props.styles.dividingLine
-      }), this.renderTitleHolder());
+      }), jsx(Flex.Item, {
+        shouldShrink: this.isActiveBank,
+        shouldGrow: !this.isActiveBank
+      }, jsx(Flex, {
+        direction: "row",
+        gap: this.isActiveBank ? 'x-small' : 'medium',
+        themeOverride: {
+          gapMedium: '1.25rem'
+        },
+        alignItems: "center"
+      }, this.isBankEntry && jsx(Flex.Item, null, jsx(IconBankLine, null)), this.isActiveBank ? jsx(Flex.Item, {
+        shouldShrink: true
+      }, this.renderBankNameButton()) : jsx(Flex.Item, {
+        shouldGrow: true
+      }, this.renderTitleHolder()))));
     }
   }, {
     key: "render",
@@ -278,11 +292,15 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
       }), jsx(Flex, {
         className: "header",
         direction: "row",
-        gap: "small"
+        alignItems: this.isActiveBank ? 'center' : 'end',
+        gap: "small",
+        justifyItems: "space-between"
       }, jsx(Flex.Item, {
-        shouldShrink: false,
+        shouldShrink: this.isActiveBank,
         shouldGrow: true
-      }, this.renderLeftHeader()), jsx(Flex.Item, null, jsx(ActionButtons, actionButtonProps))));
+      }, this.renderLeftHeader()), jsx(Flex.Item, {
+        padding: this.isActiveBank ? '0' : '0 0 xx-small'
+      }, jsx(ActionButtons, actionButtonProps))));
     }
   }]);
 }(Component), _defineProperty(_QuizEntryHeader, "displayName", 'QuizEntryHeader'), _defineProperty(_QuizEntryHeader, "componentId", "Quizzes".concat(_QuizEntryHeader.displayName)), _defineProperty(_QuizEntryHeader, "propTypes", {

package/es/common/components/resources/sessionItemResult/ResultStimulus/index.js

@@ -76,7 +76,7 @@ export var ResultStimulus = (_dec = withStyleOverrides(generateStyle, generateCo
         css: this.props.styles.stimulusGroup
       }, jsx("div", {
         css: this.props.styles.stimulusInfo
-      }, this.renderStimulusInfo()), jsx("div", {
+      }, this.renderStimulusInfo()), this.props.stimulus.isPassage === false && jsx("div", {
         css: this.props.styles.items
       }, this.renderStimulusItems()))));
     }

package/es/common/components/resources/sessionItemResult/ResultStimulus/styles.js

@@ -16,7 +16,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
   };
   return {
     root: {
-      borderBottom: "".concat(componentTheme.rootBorderWidth, " solid ").concat(componentTheme.rootBorderColor),
+      borderTop: "".concat(componentTheme.rootBorderWidth, " solid ").concat(componentTheme.rootBorderColor),
       overflow: 'hidden'
     },
     instructions: _defineProperty({
@@ -31,9 +31,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
     },
     info: _defineProperty({
       padding: "".concat(componentTheme.infoPaddingTopBottom, " ").concat(componentTheme.infoPaddingLeftRight),
-      backgroundColor: componentTheme.infoBackgroundColor,
-      height: '100%',
-      overflow: 'scroll'
+      height: '100%'
     }, mq, {
       padding: componentTheme.phoneInfoPadding
     }),

package/es/common/components/resources/sessionItemResult/ResultStimulus/theme.js

@@ -6,7 +6,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     breakpoints = _ref.breakpoints;
   return {
     rootBorderWidth: borders.widthSmall,
-    rootBorderColor: colors.porcelain,
+    rootBorderColor: colors.tiara,
     instructionsPaddingTopBottom: spacing.medium,
     instructionsPaddingLeftRight: spacing.large,
     instructionsBorderWidth: borders.widthSmall,

package/es/common/records/Stimulus.js

@@ -22,6 +22,11 @@ export var Stimulus = /*#__PURE__*/function (_ReduxRecord) {
     get: function get() {
       return true;
     }
+  }, {
+    key: "isPassage",
+    get: function get() {
+      return this.passage;
+    }
   }, {
     key: "isLoaded",
     value: function isLoaded() {

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

@@ -12,7 +12,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _partial = _interopRequireDefault(require("lodash/partial"));
@@ -30,22 +30,36 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _dec, _class, _DeleteStimulusModal;
 /** @jsx jsx */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_DeleteStimulusModal = /*#__PURE__*/function (_Component) {
-  function DeleteStimulusModal() {
+  function DeleteStimulusModal(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, DeleteStimulusModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DeleteStimulusModal, [].concat(args));
+    _this = _callSuper(this, DeleteStimulusModal, [props]);
+    /**
+     * @type {React.RefObject<RadioInput> | null}
+     */
+    (0, _defineProperty2["default"])(_this, "radioInputRef", null);
     (0, _defineProperty2["default"])(_this, "handleSubmit", function (e) {
-      _this.closeAction();
       var _this$props = _this.props,
         quizId = _this$props.quizId,
         stimulusEntry = _this$props.stimulusEntry,
         childEntries = _this$props.childEntries;
+      if (!_this.props.deletionMode && childEntries.size > 0) {
+        var _this$radioInputRef;
+        (_this$radioInputRef = _this.radioInputRef) === null || _this$radioInputRef === void 0 || (_this$radioInputRef = _this$radioInputRef.current) === null || _this$radioInputRef === void 0 || _this$radioInputRef.focus();
+        _this.setState({
+          validationError: [{
+            text: (0, _formatMessage["default"])('Please choose a deletion mode.'),
+            type: 'newError'
+          }]
+        });
+        return;
+      }
+      _this.closeAction();
       if (_this.props.deletionMode === 'chooseWhich') {
         _this.removeStimulus(_this.props.selectedChildren.toArray());
       } else if (_this.props.deletionMode === 'deleteAll') {
@@ -58,8 +72,17 @@ var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.
       _this.props.closeModal();
       _this.props.setUi(_quizCommon.DELETE_STIMULUS_MODAL_DELETION_MODE, null);
       _this.props.setUi(_quizCommon.DELETE_STIMULUS_MODAL_SELECTED_CHILDREN, _immutable.Set.of());
+      _this.clearValidationError();
+    });
+    (0, _defineProperty2["default"])(_this, "clearValidationError", function () {
+      if (_this.state.validationError) {
+        _this.setState({
+          validationError: null
+        });
+      }
     });
     (0, _defineProperty2["default"])(_this, "setDeletionMode", function (event, value) {
+      _this.clearValidationError();
       _this.props.setUi(_quizCommon.DELETE_STIMULUS_MODAL_DELETION_MODE, value);
     });
     (0, _defineProperty2["default"])(_this, "toggleChildSelected", function (childEntry) {
@@ -103,6 +126,10 @@ var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.
         css: _this.props.styles.checkboxesWrapper
       }, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("hr", null)), checkboxes, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("hr", null)));
     });
+    _this.state = {
+      validationError: null
+    };
+    _this.radioInputRef = _react["default"].createRef();
     return _this;
   }
   (0, _inherits2["default"])(DeleteStimulusModal, _Component);
@@ -163,12 +190,7 @@ var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.
   }, {
     key: "doneButton",
     value: function doneButton() {
-      var _this$props3 = this.props,
-        deletionMode = _this$props3.deletionMode,
-        childEntries = _this$props3.childEntries;
-      var disabled = !deletionMode && childEntries.size > 0;
       return (0, _emotion.jsx)(_uiButtons.Button, {
-        disabled: disabled,
         color: "primary",
         onClick: this.handleSubmit,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
@@ -196,8 +218,10 @@ var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.
         name: "deletionMode",
         defaultValue: this.props.deletionMode,
         onChange: this.setDeletionMode,
-        description: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Stimulus Removal Mode'))
+        description: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Stimulus Removal Mode')),
+        messages: this.state.validationError
       }, (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
+        ref: this.radioInputRef,
         key: "deleteAll",
         value: "deleteAll",
         label: (0, _emotion.jsx)("div", {

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/index.js

@@ -167,6 +167,16 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
         cancelText: (0, _formatMessage["default"])('Keep Question')
       };
     }
+  }, {
+    key: "isActiveBank",
+    get: function get() {
+      return this.props.quizEntry.isBank && this.props.newActiveBank;
+    }
+  }, {
+    key: "isBankEntry",
+    get: function get() {
+      return this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry;
+    }
   }, {
     key: "getVOText",
     value: function getVOText(verb, displayPosition) {
@@ -181,27 +191,19 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
       });
     }
   }, {
-    key: "renderBankedContent",
-    value: function renderBankedContent() {
-      if (this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry) {
-        return (0, _emotion.jsx)(_uiIcons.IconBankLine, null);
-      }
+    key: "renderItemName",
+    value: function renderItemName() {
+      return (0, _emotion.jsx)(_uiText.Text, {
+        size: "small",
+        weight: "normal",
+        "data-automation": "sdk-quiz-entry-interaction-type"
+      }, this.props.name);
     }
   }, {
-    key: "renderName",
-    value: function renderName() {
-      var isBank = this.props.quizEntry.isBank && this.props.newActiveBank;
-      var dataAutomation = 'sdk-quiz-entry-interaction-type';
-      if (!isBank) {
-        return (0, _emotion.jsx)(_uiText.Text, {
-          size: "small",
-          weight: "normal",
-          "data-automation": dataAutomation
-        }, this.props.name);
-      }
+    key: "renderBankNameButton",
+    value: function renderBankNameButton() {
       return (0, _emotion.jsx)(_uiButtons.CondensedButton, {
         size: "small",
-        margin: "0 0 0 x-small",
         onClick: this.handleBankClick,
         "data-automation": "sdk-quiz-entry-interaction-type"
       }, this.props.name);
@@ -227,14 +229,14 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
         renderLabel: (0, _emotion.jsx)(_quizCommon.Flex, {
           direction: "column",
           gap: "small"
-        }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        }, !this.isBankEntry && (0, _emotion.jsx)(_quizCommon.Flex.Item, {
           "aria-hidden": true
-        }, this.renderName()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        }, this.renderItemName()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
           "aria-hidden": true
         }, (0, _formatMessage["default"])('Question Title')), (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, titleLabelText)),
         type: "text",
         onChange: this.handleTitleChange,
-        value: workingEntry.title || '',
+        defaultValue: workingEntry.title || '',
         interaction: disabled ? 'disabled' : 'enabled',
         "data-automation": "sdk-question-title-textinput"
       });
@@ -249,15 +251,27 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
       return (0, _emotion.jsx)(_quizCommon.Flex, {
         className: "leftHeader",
         direction: "row",
-        justifyItems: "center",
+        alignItems: "center",
         "data-automation": "sdk-quiz-entry-left-header"
       }, (0, _emotion.jsx)(_PositionBox["default"], {
         position: position,
         headingText: positionText,
         "data-automation": "sdk-quiz-entry-positionbox"
-      }), this.renderBankedContent(), (0, _emotion.jsx)("div", {
-        css: this.props.styles.dividingLine
-      }), this.renderTitleHolder());
+      }), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        shouldShrink: this.isActiveBank,
+        shouldGrow: !this.isActiveBank
+      }, (0, _emotion.jsx)(_quizCommon.Flex, {
+        direction: "row",
+        gap: this.isActiveBank ? 'x-small' : 'medium',
+        themeOverride: {
+          gapMedium: '1.25rem'
+        },
+        alignItems: "center"
+      }, this.isBankEntry && (0, _emotion.jsx)(_quizCommon.Flex.Item, null, (0, _emotion.jsx)(_uiIcons.IconBankLine, null)), this.isActiveBank ? (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        shouldShrink: true
+      }, this.renderBankNameButton()) : (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        shouldGrow: true
+      }, this.renderTitleHolder()))));
     }
   }, {
     key: "render",
@@ -285,11 +299,15 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["defau
       }), (0, _emotion.jsx)(_quizCommon.Flex, {
         className: "header",
         direction: "row",
-        gap: "small"
+        alignItems: this.isActiveBank ? 'center' : 'end',
+        gap: "small",
+        justifyItems: "space-between"
       }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
-        shouldShrink: false,
+        shouldShrink: this.isActiveBank,
         shouldGrow: true
-      }, this.renderLeftHeader()), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, (0, _emotion.jsx)(_ActionButtons["default"], actionButtonProps))));
+      }, this.renderLeftHeader()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        padding: this.isActiveBank ? '0' : '0 0 xx-small'
+      }, (0, _emotion.jsx)(_ActionButtons["default"], actionButtonProps))));
     }
   }]);
 }(_react.Component), (0, _defineProperty2["default"])(_QuizEntryHeader, "displayName", 'QuizEntryHeader'), (0, _defineProperty2["default"])(_QuizEntryHeader, "componentId", "Quizzes".concat(_QuizEntryHeader.displayName)), (0, _defineProperty2["default"])(_QuizEntryHeader, "propTypes", {

package/lib/common/components/resources/sessionItemResult/ResultStimulus/index.js

@@ -83,7 +83,7 @@ var ResultStimulus = exports.ResultStimulus = (_dec = (0, _quizCommon.withStyleO
         css: this.props.styles.stimulusGroup
       }, (0, _emotion.jsx)("div", {
         css: this.props.styles.stimulusInfo
-      }, this.renderStimulusInfo()), (0, _emotion.jsx)("div", {
+      }, this.renderStimulusInfo()), this.props.stimulus.isPassage === false && (0, _emotion.jsx)("div", {
         css: this.props.styles.items
       }, this.renderStimulusItems()))));
     }

package/lib/common/components/resources/sessionItemResult/ResultStimulus/styles.js

@@ -23,7 +23,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
   };
   return {
     root: {
-      borderBottom: "".concat(componentTheme.rootBorderWidth, " solid ").concat(componentTheme.rootBorderColor),
+      borderTop: "".concat(componentTheme.rootBorderWidth, " solid ").concat(componentTheme.rootBorderColor),
       overflow: 'hidden'
     },
     instructions: (0, _defineProperty2["default"])({
@@ -38,9 +38,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
     },
     info: (0, _defineProperty2["default"])({
       padding: "".concat(componentTheme.infoPaddingTopBottom, " ").concat(componentTheme.infoPaddingLeftRight),
-      backgroundColor: componentTheme.infoBackgroundColor,
-      height: '100%',
-      overflow: 'scroll'
+      height: '100%'
     }, mq, {
       padding: componentTheme.phoneInfoPadding
     }),

package/lib/common/components/resources/sessionItemResult/ResultStimulus/theme.js

@@ -12,7 +12,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     breakpoints = _ref.breakpoints;
   return {
     rootBorderWidth: borders.widthSmall,
-    rootBorderColor: colors.porcelain,
+    rootBorderColor: colors.tiara,
     instructionsPaddingTopBottom: spacing.medium,
     instructionsPaddingLeftRight: spacing.large,
     instructionsBorderWidth: borders.widthSmall,

package/lib/common/records/Stimulus.js

@@ -29,6 +29,11 @@ var Stimulus = exports.Stimulus = /*#__PURE__*/function (_ReduxRecord) {
     get: function get() {
       return true;
     }
+  }, {
+    key: "isPassage",
+    get: function get() {
+      return this.passage;
+    }
   }, {
     key: "isLoaded",
     value: function isLoaded() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "21.0.1-rc.14+44accedcc",
+  "version": "21.0.1-rc.17+438073fcc",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -46,11 +46,11 @@
     "@instructure/emotion": "^9.11.1",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.2.2",
-    "@instructure/quiz-common": "21.0.1-rc.14+44accedcc",
-    "@instructure/quiz-i18n": "21.0.1-rc.14+44accedcc",
-    "@instructure/quiz-interactions": "21.0.1-rc.14+44accedcc",
-    "@instructure/quiz-number-input": "21.0.1-rc.14+44accedcc",
-    "@instructure/quiz-rce": "21.0.1-rc.14+44accedcc",
+    "@instructure/quiz-common": "21.0.1-rc.17+438073fcc",
+    "@instructure/quiz-i18n": "21.0.1-rc.17+438073fcc",
+    "@instructure/quiz-interactions": "21.0.1-rc.17+438073fcc",
+    "@instructure/quiz-number-input": "21.0.1-rc.17+438073fcc",
+    "@instructure/quiz-rce": "21.0.1-rc.17+438073fcc",
     "@instructure/ui-a11y-content": "^9.11.1",
     "@instructure/ui-alerts": "^9.11.1",
     "@instructure/ui-avatar": "^9.11.1",
@@ -109,7 +109,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "21.0.1-rc.14+44accedcc",
+    "instructure-validations": "21.0.1-rc.17+438073fcc",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -158,7 +158,7 @@
     "jquery": "^2.2.3",
     "karma-junit-reporter": "^2.0.1",
     "most-subject": "^5.3.0",
-    "quiz-presets": "21.0.1-rc.14+44accedcc",
+    "quiz-presets": "21.0.1-rc.17+438073fcc",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -174,5 +174,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44accedcc802e28cd10d7d87532b5564ff1073c2"
+  "gitHead": "438073fcc6b0f4a678ce5cf06aa1b8511cb351e4"
 }