@instructure/quiz-core 22.0.0 → 22.2.0

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

@@ -40,17 +40,27 @@ function _callSuper(_this, derived, args) {
   return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
 }
 var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
-  function CopyMoveBankEntryModal() {
+  function CopyMoveBankEntryModal(props) {
     var _this2;
     (0, _classCallCheck2["default"])(this, CopyMoveBankEntryModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this2 = _callSuper(this, CopyMoveBankEntryModal, [].concat(args));
+    _this2 = _callSuper(this, CopyMoveBankEntryModal, [props]);
+    /**
+     * @type {React.RefObject<RadioInput> | null}
+     */
+    (0, _defineProperty2["default"])(_this2, "radioInputRef", null);
+    /**
+     * @type {React.RefObject<TextInput> | null}
+     */
+    (0, _defineProperty2["default"])(_this2, "textInputRef", null);
     (0, _defineProperty2["default"])(_this2, "state", {
       bankType: 'existing',
       newBankTitle: '',
-      selectedBank: null
+      selectedBank: null,
+      radioValidationError: null,
+      selectValidationError: null
+    });
+    (0, _defineProperty2["default"])(_this2, "setBankInputRef", function (ref) {
+      _this2.bankSelectionInputRef = ref;
     });
     (0, _defineProperty2["default"])(_this2, "copyOrMove", function (newBankId) {
       if (_this2.props.keepCopy) {
@@ -60,7 +70,55 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
       }
       _this2.closeAction();
     });
+    (0, _defineProperty2["default"])(_this2, "clearValidationErrors", function () {
+      _this2.setState({
+        radioValidationError: null,
+        selectValidationError: null
+      });
+    });
+    (0, _defineProperty2["default"])(_this2, "validateAction", function () {
+      var _this2$state = _this2.state,
+        bankType = _this2$state.bankType,
+        newBankTitle = _this2$state.newBankTitle,
+        selectedBank = _this2$state.selectedBank;
+      if (!bankType) {
+        var _this2$radioInputRef;
+        (_this2$radioInputRef = _this2.radioInputRef) === null || _this2$radioInputRef === void 0 || (_this2$radioInputRef = _this2$radioInputRef.current) === null || _this2$radioInputRef === void 0 || _this2$radioInputRef.focus();
+        _this2.setState({
+          radioValidationError: [{
+            text: (0, _formatMessage["default"])('Please choose a Copy/Move option'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      if (bankType === 'existing' && !selectedBank) {
+        _this2.bankSelectionInputRef.focus();
+        _this2.setState({
+          selectValidationError: [{
+            text: (0, _formatMessage["default"])('Please select a bank'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      if (bankType === 'new' && (!newBankTitle || !newBankTitle.trim())) {
+        var _this2$textInputRef;
+        (_this2$textInputRef = _this2.textInputRef) === null || _this2$textInputRef === void 0 || (_this2$textInputRef = _this2$textInputRef.current) === null || _this2$textInputRef === void 0 || _this2$textInputRef.focus();
+        _this2.setState({
+          selectValidationError: [{
+            text: (0, _formatMessage["default"])('Please enter a new bank title'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      return true;
+    });
     (0, _defineProperty2["default"])(_this2, "continueAction", function () {
+      if (!_this2.validateAction()) {
+        return;
+      }
       if (_this2.state.bankType === 'new') {
         var newBank = _Bank["default"].create({
           title: _this2.state.newBankTitle,
@@ -101,12 +159,14 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
       return _this2.initiateCopy(newBankId).then(_this2.props.onAdd);
     });
     (0, _defineProperty2["default"])(_this2, "closeAction", function () {
+      _this2.clearValidationErrors();
       if (_this2.props.modalTrigger) {
         _this2.props.modalTrigger.focus();
       }
       _this2.props.closeModal();
     });
     (0, _defineProperty2["default"])(_this2, "onBankSelection", function (e, option) {
+      _this2.clearValidationErrors();
       _this2.setState({
         selectedBank: new _Bank["default"](option)
       });
@@ -115,15 +175,20 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
       _this2.props.uiSet(_quizCommon.COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, e.target.checked);
     });
     (0, _defineProperty2["default"])(_this2, "handleRadioChange", function (event, value) {
+      _this2.clearValidationErrors();
       _this2.setState({
         bankType: value
       });
     });
     (0, _defineProperty2["default"])(_this2, "onTitleChange", function (e) {
+      _this2.clearValidationErrors();
       _this2.setState({
         newBankTitle: e.target.value
       });
     });
+    _this2.radioInputRef = _react["default"].createRef();
+    _this2.textInputRef = _react["default"].createRef();
+    _this2.bankSelectionInputRef = _react["default"].createRef();
     return _this2;
   }
   (0, _inherits2["default"])(CopyMoveBankEntryModal, _Component);
@@ -138,14 +203,9 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
   }, {
     key: "addToBankButton",
     value: function addToBankButton() {
-      var _this$state = this.state,
-        bankType = _this$state.bankType,
-        newBankTitle = _this$state.newBankTitle;
-      var disabled = bankType === 'existing' && !this.state.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim());
       return /*#__PURE__*/_react["default"].createElement(_uiButtons.Button, {
         color: "primary",
         onClick: this.continueAction,
-        disabled: disabled,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-add-to-bank-button"
       }, (0, _formatMessage["default"])('Add'));
@@ -155,16 +215,22 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
     value: function renderBankTypeContent() {
       if (this.state.bankType === 'existing') {
         return /*#__PURE__*/_react["default"].createElement(_presenter["default"], {
+          inputRef: this.setBankInputRef,
           onBankSelection: this.onBankSelection,
           selectedBank: this.state.selectedBank,
-          "data-automation": "sdk-bank-selection"
+          "data-automation": "sdk-bank-selection",
+          externalError: this.state.selectValidationError,
+          isRequired: true
         });
       }
       return /*#__PURE__*/_react["default"].createElement(_quizCommon.TextInput, {
         onChange: this.onTitleChange,
         value: this.state.newBankTitle,
         renderLabel: (0, _formatMessage["default"])('New Bank Title'),
-        type: "text"
+        type: "text",
+        messages: this.state.selectValidationError,
+        ref: this.textInputRef,
+        isRequired: true
       });
     }
   }, {
@@ -174,10 +240,13 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
         onChange: this.handleRadioChange,
         name: (0, _formatMessage["default"])('Bank Type'),
         defaultValue: this.state.bankType,
-        description: /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Bank Type'))
+        description: /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Bank Type')),
+        messages: this.state.radioValidationError,
+        isRequired: true
       }, /*#__PURE__*/_react["default"].createElement(_uiRadioInput.RadioInput, {
         value: "existing",
-        label: (0, _formatMessage["default"])('Existing item bank')
+        label: (0, _formatMessage["default"])('Existing item bank'),
+        ref: this.radioInputRef
       }), /*#__PURE__*/_react["default"].createElement(_uiRadioInput.RadioInput, {
         value: "new",
         label: (0, _formatMessage["default"])('New item bank')

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

@@ -165,8 +165,14 @@ var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.
   }, {
     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;
+      var _this$props$stimulusE, _this$props$stimulusE3;
+      if (((_this$props$stimulusE = this.props.stimulusEntry) === null || _this$props$stimulusE === void 0 ? void 0 : _this$props$stimulusE.entryType) === 'BankEntry') {
+        var _this$props$stimulusE2;
+        var bankEntry = (_this$props$stimulusE2 = this.props.stimulusEntry) === null || _this$props$stimulusE2 === void 0 ? void 0 : _this$props$stimulusE2.getEntry();
+        var stimulusEntry = bankEntry === null || bankEntry === void 0 ? void 0 : bankEntry.getEntry();
+        return stimulusEntry === null || stimulusEntry === void 0 ? void 0 : stimulusEntry.isPassage;
+      }
+      return (_this$props$stimulusE3 = this.props.stimulusEntry) === null || _this$props$stimulusE3 === void 0 ? void 0 : _this$props$stimulusE3.getEntry().passage;
     }
   }, {
     key: "anyImmutableKeepers",
@@ -197,7 +203,7 @@ var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.
         onClick: this.closeAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-keep-".concat(this.isPassage() ? 'passage' : 'stimulus', "-button")
-      }, this.isPassage() ? (0, _formatMessage["default"])('Keep Passage') : (0, _formatMessage["default"])('Keep Stimulus'));
+      }, this.isPassage() ? (0, _formatMessage["default"])('Keep Text Block') : (0, _formatMessage["default"])('Keep Stimulus'));
     }
   }, {
     key: "doneButton",
@@ -207,7 +213,7 @@ var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.
         onClick: this.handleSubmit,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-remove-".concat(this.isPassage() ? 'passage' : 'stimulus', "-button")
-      }, this.isPassage() ? (0, _formatMessage["default"])('Remove Passage') : (0, _formatMessage["default"])('Remove Stimulus'));
+      }, this.isPassage() ? (0, _formatMessage["default"])('Remove Text Block') : (0, _formatMessage["default"])('Remove Stimulus'));
     }
   }, {
     key: "renderChooseWhich",
@@ -250,7 +256,7 @@ var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.
   }, {
     key: "renderContent",
     value: function renderContent() {
-      var message = this.isPassage() ? (0, _formatMessage["default"])('Are you sure you want to remove this passage?') : (0, _formatMessage["default"])('Are you sure you want to remove this stimulus?');
+      var message = this.isPassage() ? (0, _formatMessage["default"])('Are you sure you want to remove this text block?') : (0, _formatMessage["default"])('Are you sure you want to remove this stimulus?');
       var content = this.props.childEntries.size === 0 ? (0, _emotion.jsx)("span", null, message) : this.renderMainMenu();
       var stimulusTitle = this.props.stimulusEntry && this.props.stimulusEntry.getEntry().title;
       return (0, _emotion.jsx)("div", {
@@ -267,11 +273,11 @@ var DeleteStimulusModal = exports.DeleteStimulusModal = (_dec = (0, _quizCommon.
         open: this.props.modalOpen,
         onDismiss: this.closeAction,
         size: "small",
-        label: this.isPassage() ? (0, _formatMessage["default"])('Confirm Passage Removal') : (0, _formatMessage["default"])('Confirm Stimulus Removal')
+        label: this.isPassage() ? (0, _formatMessage["default"])('Confirm Text Block Removal') : (0, _formatMessage["default"])('Confirm Stimulus Removal')
       }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2"
-      }, this.isPassage() ? (0, _formatMessage["default"])('Confirm Passage Removal') : (0, _formatMessage["default"])('Confirm Stimulus Removal')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
+      }, this.isPassage() ? (0, _formatMessage["default"])('Confirm Text Block Removal') : (0, _formatMessage["default"])('Confirm Stimulus Removal')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",

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

@@ -96,6 +96,7 @@ var Collection = exports.Collection = (_dec = (0, _quizCommon.withStyleOverrides
         }, _this3.props.renderSidebarItem(item, displayPosition, sidebarOpen));
       });
       var transitionType = isShowingItems ? 'slide-down' : 'slide-up';
+      var screenReaderText = this.props.isPassage ? (0, _formatMessage["default"])('Collapse text block questions') : (0, _formatMessage["default"])('Collapse stimulus questions');
       return (0, _emotion.jsx)(_uiMotion.Transition, {
         "in": isShowingItems || this.shouldDisplayAllItems(),
         type: transitionType
@@ -107,7 +108,7 @@ var Collection = exports.Collection = (_dec = (0, _quizCommon.withStyleOverrides
         withBackground: false,
         withBorder: false,
         renderIcon: _uiIcons.IconArrowOpenUpLine,
-        screenReaderLabel: (0, _formatMessage["default"])('Collapse stimulus questions')
+        screenReaderLabel: screenReaderText
       })), (0, _emotion.jsx)("div", null, itemComponents)));
     }
   }, {
@@ -118,6 +119,7 @@ var Collection = exports.Collection = (_dec = (0, _quizCommon.withStyleOverrides
         itemCollection = _this$props2.itemCollection,
         isShowingItems = _this$props2.isShowingItems;
       var transitionType = !isShowingItems ? 'slide-up' : 'slide-down';
+      var screenReaderText = this.props.isPassage ? (0, _formatMessage["default"])('Expand text block questions') : (0, _formatMessage["default"])('Expand stimulus questions');
       return (0, _emotion.jsx)(_uiMotion.Transition, {
         "in": !isShowingItems,
         type: transitionType
@@ -131,7 +133,7 @@ var Collection = exports.Collection = (_dec = (0, _quizCommon.withStyleOverrides
         withBackground: false,
         withBorder: false,
         renderIcon: _uiIcons.IconArrowOpenDownLine,
-        screenReaderLabel: (0, _formatMessage["default"])('Expand stimulus questions')
+        screenReaderLabel: screenReaderText
       })));
     }
   }, {
@@ -162,7 +164,8 @@ var Collection = exports.Collection = (_dec = (0, _quizCommon.withStyleOverrides
   // set in connect
   setSidebarStimulusIsShowing: _propTypes["default"].func.isRequired,
   styles: _propTypes["default"].object,
-  makeStyles: _propTypes["default"].func
+  makeStyles: _propTypes["default"].func,
+  isPassage: _propTypes["default"].bool
 }), (0, _defineProperty2["default"])(_Collection, "defaultProps", {
   isShowingItems: false
 }), _Collection)) || _class);

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

@@ -26,6 +26,8 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _quizCommon = require("@instructure/quiz-common");
 var _uiTooltip = require("@instructure/ui-tooltip");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
+var _uiView = require("@instructure/ui-view");
+var _uiText = require("@instructure/ui-text");
 var _dec, _class, _SidebarStimulus;
 /** @jsx jsx */
 function _callSuper(_this, derived, args) {
@@ -71,18 +73,26 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
     value: function componentDidUpdate() {
       this.props.makeStyles();
     }
+  }, {
+    key: "stimulusIsPassage",
+    value: function stimulusIsPassage() {
+      var _this$props$stimulus;
+      return (_this$props$stimulus = this.props.stimulus) === null || _this$props$stimulus === void 0 ? void 0 : _this$props$stimulus.isPassage;
+    }
   }, {
     key: "renderCollection",
     value: function renderCollection() {
-      if (this.props.isDragging) {
-        return;
-      }
+      var _this$props$stimulus2;
       var _this$props = this.props,
         displayPosition = _this$props.displayPosition,
         isOver = _this$props.isOver,
         isShowingItems = _this$props.isShowingItems,
         renderSidebarItem = _this$props.renderSidebarItem,
-        sidebarOpen = _this$props.sidebarOpen;
+        sidebarOpen = _this$props.sidebarOpen,
+        isDragging = _this$props.isDragging;
+      if (this.stimulusIsPassage() || isDragging) {
+        return null;
+      }
       return (0, _emotion.jsx)(_Collection["default"], {
         firstPosition: displayPosition,
         isOver: isOver,
@@ -90,22 +100,33 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
         itemCollection: this.props.childEntries,
         renderSidebarItem: renderSidebarItem,
         sidebarOpen: sidebarOpen,
-        stimulusId: this.props.stimulus.id
+        stimulusId: this.props.stimulus.id,
+        isPassage: (_this$props$stimulus2 = this.props.stimulus) === null || _this$props$stimulus2 === void 0 ? void 0 : _this$props$stimulus2.isPassage
       });
     }
   }, {
     key: "renderButton",
     value: function renderButton() {
-      var displayPosition = this.props.displayPosition;
-      var textForNavigation = (0, _formatMessage["default"])('Navigate to stimulus at position {displayPosition}', {
-        displayPosition: displayPosition
-      });
+      var _this$props2 = this.props,
+        displayPosition = _this$props2.displayPosition,
+        sidebarOpen = _this$props2.sidebarOpen;
+      var textForNavigation;
+      if (this.stimulusIsPassage()) {
+        textForNavigation = (0, _formatMessage["default"])('Navigate to text block');
+      } else {
+        textForNavigation = (0, _formatMessage["default"])('Navigate to stimulus at position {displayPosition}', {
+          displayPosition: displayPosition
+        });
+      }
+      var content = sidebarOpen ? '' : textForNavigation;
+      var tip = (0, _emotion.jsx)(_uiText.Text, {
+        "aria-hidden": !sidebarOpen,
+        "aria-label": content
+      }, content);
       return (0, _emotion.jsx)(_uiTooltip.Tooltip, {
-        renderTip: this.props.sidebarOpen ? '' : (0, _emotion.jsx)("span", {
-          "aria-hidden": "true"
-        }, textForNavigation),
+        renderTip: tip,
         placement: "start",
-        on: this.props.sidebarOpen ? [] : ['hover', 'focus']
+        on: sidebarOpen ? [] : ['hover', 'focus']
       }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
@@ -117,33 +138,82 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
         className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, textForNavigation)));
     }
+  }, {
+    key: "infoHeaderLabel",
+    value: function infoHeaderLabel() {
+      return this.stimulusIsPassage() ? (0, _formatMessage["default"])('Text Block') : (0, _formatMessage["default"])('Stimulus');
+    }
+  }, {
+    key: "renderSummary",
+    value: function renderSummary() {
+      var _this$props3 = this.props,
+        displayPosition = _this$props3.displayPosition,
+        isDragging = _this$props3.isDragging,
+        isShowingItems = _this$props3.isShowingItems,
+        sidebarOpen = _this$props3.sidebarOpen,
+        stimulus = _this$props3.stimulus;
+      if (this.stimulusIsPassage()) {
+        return null;
+      }
+      return (0, _emotion.jsx)(_Summary["default"], {
+        startPosition: displayPosition,
+        isDragging: isDragging,
+        isShowingItems: isShowingItems,
+        stimulusId: stimulus.id,
+        sidebarOpen: sidebarOpen,
+        numberOfItems: this.props.childEntries.size
+      });
+    }
+  }, {
+    key: "stimulusHoverCss",
+    value: function stimulusHoverCss() {
+      return {
+        // TODO: figure out how to get rid of the last of these styles.
+        ':hover': this.props.styles.onHover
+      };
+    }
   }, {
     key: "renderClosed",
     value: function renderClosed() {
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebarItem
-      }, (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebarItemClosedButton
+      return (0, _emotion.jsx)(_uiView.View, {
+        borderWidth: "0 0 small 0",
+        borderColor: "primary",
+        as: "div"
+      }, (0, _emotion.jsx)(_uiView.View, {
+        textAlign: "center",
+        padding: "xx-small 0",
+        borderWidth: "none large none none",
+        borderColor: "transparent",
+        css: this.stimulusHoverCss(),
+        as: "div"
       }, this.renderButton()), this.renderCollection());
     }
   }, {
     key: "renderOpen",
     value: function renderOpen() {
-      var _this$props2 = this.props,
-        children = _this$props2.children,
-        displayPosition = _this$props2.displayPosition,
-        isDragging = _this$props2.isDragging,
-        isShowingItems = _this$props2.isShowingItems,
-        sidebarOpen = _this$props2.sidebarOpen,
-        stimulus = _this$props2.stimulus;
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebarItem
-      }, (0, _emotion.jsx)("div", {
-        css: this.props.styles.stimulusHeader
-      }, (0, _emotion.jsx)("div", {
-        css: this.props.styles.infoHeader
-      }, (0, _formatMessage["default"])('Stimulus')), (0, _emotion.jsx)("div", {
-        css: this.props.styles.stimulusBody
+      var _this$props4 = this.props,
+        stimulus = _this$props4.stimulus,
+        children = _this$props4.children;
+      return (0, _emotion.jsx)(_uiView.View, {
+        borderWidth: "0 0 small 0",
+        borderColor: "primary",
+        as: "div"
+      }, (0, _emotion.jsx)(_uiView.View, {
+        padding: "small 0",
+        borderWidth: "none large none none",
+        borderColor: "transparent",
+        css: this.stimulusHoverCss(),
+        as: "div"
+      }, (0, _emotion.jsx)(_uiView.View, {
+        margin: "auto auto x-small x-small",
+        padding: "auto auto auto x-small",
+        as: "div"
+      }, (0, _emotion.jsx)(_uiText.Text, {
+        size: "x-small",
+        color: "secondary"
+      }, this.infoHeaderLabel())), (0, _emotion.jsx)(_uiView.View, {
+        margin: "auto auto auto small",
+        as: "div"
       }, (0, _emotion.jsx)(_quizCommon.Flex, {
         justifyItems: "space-between"
       }, (0, _emotion.jsx)(_quizCommon.Flex.Item, null, this.renderButton()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
@@ -153,14 +223,7 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
         tabIndex: "-1"
       }, (0, _emotion.jsx)(_Title["default"], {
         title: stimulus.title
-      })), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, children)), (0, _emotion.jsx)(_Summary["default"], {
-        startPosition: displayPosition,
-        isDragging: isDragging,
-        isShowingItems: isShowingItems,
-        sidebarOpen: sidebarOpen,
-        stimulusId: stimulus.id,
-        numberOfItems: this.props.childEntries.size
-      }))), this.renderCollection());
+      })), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, children)), this.renderSummary())), this.renderCollection());
     }
   }, {
     key: "render",

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

@@ -6,32 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var generateStyle = function generateStyle(componentTheme) {
   return {
-    sidebarItem: {
-      borderBottom: "".concat(componentTheme.sidebarItemBorderWidth, " solid ").concat(componentTheme.sidebarItemBorderColor)
-    },
-    sidebarItemClosedButton: {
-      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
-      padding: componentTheme.sidebarClosedButtonPadding,
-      textAlign: 'center',
-      '&:hover': {
-        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
-      }
-    },
-    stimulusHeader: {
-      padding: "".concat(componentTheme.sidebarHeaderPadding, " 0"),
-      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
-      '&:hover:': {
-        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
-      }
-    },
-    stimulusBody: {
-      marginLeft: '5%'
-    },
-    infoHeader: {
-      fontSize: componentTheme.sidebarIsOpenInfoHeaderFontSize,
-      color: componentTheme.sidebarIsOpenInfoHeaderColor,
-      marginBottom: componentTheme.sidebarIsOpenInfoHeaderMargin,
-      paddingLeft: componentTheme.sidebarIsOpenInfoHeaderPadding
+    onHover: {
+      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
     }
   };
 };

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

@@ -11,16 +11,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     typography = _ref.typography;
   return {
     borderColor: colors.contrasts.white1010,
-    hoverBorderColor: colors.contrasts.blue4570,
-    hoverBorderWidth: borders.widthLarge,
-    sidebarClosedButtonPadding: "".concat(spacing.xxSmall, " 0"),
-    sidebarHeaderPadding: spacing.small,
-    sidebarItemBorderWidth: borders.widthSmall,
-    sidebarItemBorderColor: colors.contrasts.grey1214,
-    sidebarIsOpenInfoHeaderFontSize: typography.fontSizeXSmall,
-    sidebarIsOpenInfoHeaderPadding: spacing.xSmall,
-    sidebarIsOpenInfoHeaderMargin: spacing.xSmall,
-    sidebarIsOpenInfoHeaderColor: colors.contrasts.grey4570
+    hoverBorderColor: colors.contrasts.blue4570
   };
 };
 var _default = exports["default"] = generateComponentTheme;

package/lib/common/components/resources/BankSelection/presenter.js

@@ -36,13 +36,15 @@ function _callSuper(_this, derived, args) {
   return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
 }
 var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
-  function BankSelection() {
+  function BankSelection(props) {
     var _this2;
     (0, _classCallCheck2["default"])(this, BankSelection);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this2 = _callSuper(this, BankSelection, [].concat(args));
+    _this2 = _callSuper(this, BankSelection, [props]);
+    (0, _defineProperty2["default"])(_this2, "setInputRef", function (ref) {
+      var _this2$props$inputRef, _this2$props;
+      _this2.inputRef = ref;
+      (_this2$props$inputRef = (_this2$props = _this2.props).inputRef) === null || _this2$props$inputRef === void 0 || _this2$props$inputRef.call(_this2$props, ref);
+    });
     (0, _defineProperty2["default"])(_this2, "searchBanks", function (search) {
       return _this2.props.simpleFetchBanks({
         search: search
@@ -65,18 +67,31 @@ var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
         archived: bankOption.archived
       });
     });
+    _this2.inputRef = null;
     return _this2;
   }
   (0, _inherits2["default"])(BankSelection, _Component);
   return (0, _createClass2["default"])(BankSelection, [{
+    key: "focusSelectField",
+    value: function focusSelectField() {
+      if (this.inputRef) {
+        this.inputRef.focus();
+      }
+    }
+  }, {
     key: "getErrors",
     value: function getErrors() {
       var selectedBank = this.props.selectedBank;
       if (selectedBank && selectedBank.archived) {
+        this.focusSelectField();
         return (0, _instUIMessages.toErrors)([(0, _formatMessage["default"])('The item bank "{ bankTitle }" no longer exists. Please select a valid bank.', {
           bankTitle: selectedBank.title
         })]);
       }
+      if (this.props.externalError) {
+        this.focusSelectField();
+        return this.props.externalError;
+      }
     }
   }, {
     key: "selectedOption",
@@ -92,13 +107,15 @@ var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react["default"].createElement(_GenericAsyncSearch.GenericAsyncSearch, {
+        inputRef: this.setInputRef,
         onSelectionChange: this.onSelect,
         label: this.props.label || (0, _formatMessage["default"])('Select the destination bank'),
         placeholder: (0, _formatMessage["default"])('Search for a bank'),
         selectedOption: this.selectedOption(),
         getOptions: this.searchBanks,
         messages: this.getErrors(),
-        selectAutomation: 'sdk-item-bank-modal'
+        selectAutomation: 'sdk-item-bank-modal',
+        isRequired: this.props.isRequired
       });
     }
   }]);
@@ -107,12 +124,18 @@ var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
   label: _propTypes["default"].string,
   onBankSelection: _propTypes["default"].func,
   selectedBank: _reactImmutableProptypes["default"].record,
-  simpleFetchBanks: _propTypes["default"].func
+  simpleFetchBanks: _propTypes["default"].func,
+  externalError: _reactImmutableProptypes["default"].record,
+  inputRef: _propTypes["default"].func,
+  isRequired: _propTypes["default"].bool
 });
 (0, _defineProperty2["default"])(BankSelection, "defaultProps", {
   label: null,
   onBankSelection: function onBankSelection() {},
   selectedBank: null,
-  simpleFetchBanks: _banks.simpleFetchBanks
+  simpleFetchBanks: _banks.simpleFetchBanks,
+  externalError: null,
+  inputRef: function inputRef() {},
+  isRequired: false
 });
 var _default = exports["default"] = BankSelection;