@instructure/quiz-core 21.0.1-rc.0 → 21.0.1-rc.13

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

@@ -1,10 +1,14 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class, _StimulusEdit;
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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 PropTypes from 'prop-types';
@@ -18,46 +22,44 @@ 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";
-import AddToBankOptions from "../../../../../building/components/resources/AddToBankOptions/index.js";
-import WarningWrapper from "../../WarningWrapper/index.js";
-import CustomPropTypes from "../../../../../common/util/CustomPropTypes.js";
-import { checkClickedNode } from "../../../../../common/util/clickHandlers.js";
-import StimulusShowInfo from "../StimulusShowInfo/index.js";
-import StimulusEditInfo from "../StimulusEditInfo/index.js";
-import wrapWithOutsideClickEmotion from "../../../shared/functionality/componentWithOutsideClickEmotion.js";
-import ActionButtons from "../../../../../building/components/resources/ActionButtons/index.js";
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
+import { propsForStimulusVersioningWrapper, propsForBankEntryVersioningWrapper } from '../../../../util/warningHelpers';
+import AddToBankModal from '../../../../../banks/components/AddToBankModal';
+import AddToBankOptions from '../../../../../building/components/resources/AddToBankOptions';
+import WarningWrapper from '../../WarningWrapper';
+import CustomPropTypes from '../../../../../common/util/CustomPropTypes';
+import { checkClickedNode } from '../../../../../common/util/clickHandlers';
+import StimulusShowInfo from '../StimulusShowInfo';
+import StimulusEditInfo from '../StimulusEditInfo';
+import wrapWithOutsideClickEmotion from '../../../shared/functionality/componentWithOutsideClickEmotion';
+import ActionButtons from '../../../../../building/components/resources/ActionButtons';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
 import t from '@instructure/quiz-i18n/es/format-message';
 export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_StimulusEdit = /*#__PURE__*/function (_Component) {
-  _inherits(StimulusEdit, _Component);
-  var _super = _createSuper(StimulusEdit);
   function StimulusEdit() {
     var _this;
     _classCallCheck(this, StimulusEdit);
     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.state = {
+    _this = _callSuper(this, StimulusEdit, [].concat(args));
+    _defineProperty(_this, "state", {
       canSubmit: true
-    };
-    _this.clearModifications = function () {
+    });
+    _defineProperty(_this, "clearModifications", function () {
       _this.props.clearModifications('stimuli', _this.props.stimulus.id);
       _this.props.clearModifications('quizEntries', _this.props.quizEntry.id);
       if (_this.props.stimulus.isTemporary()) {
         _this.props.clearTemporaryStimulus(_this.props.quizId);
       }
-    };
-    _this.onCancel = function (e) {
+    });
+    _defineProperty(_this, "onCancel", function (e) {
       _this.props.hideError(_this.props.guid);
       _this.props.switchOffEditing();
       _this.clearModifications();
       _this.props.setUi(SHOULD_CLONE_ITEM, false);
-    };
-    _this.handleDeleteTemporary = function () {
+    });
+    _defineProperty(_this, "handleDeleteTemporary", function () {
       var isPassage = _this.isPassage();
       _this.props.withConfirm(function () {
         _this.onCancel();
@@ -72,42 +74,40 @@ export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComp
         cancelText: isPassage ? t('Keep Passage ') : t('Keep Stimulus'),
         automationPrefix: isPassage ? 'passage' : 'stimulus'
       });
-    };
-    _this.handleDeleteStimulus = function () {
+    });
+    _defineProperty(_this, "handleDeleteStimulus", function () {
       if (_this.props.stimulus.isTemporary()) {
         _this.handleDeleteTemporary();
       } else {
         _this.props.openDeleteStimulusModal();
       }
-    };
-    _this.handleStimulusCreated = /*#__PURE__*/function () {
+    });
+    _defineProperty(_this, "handleStimulusCreated", /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(stimulusData) {
         var _this$props, quizId, quizEntry, mods;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$props = _this.props, quizId = _this$props.quizId, quizEntry = _this$props.quizEntry;
-                mods = Object.assign({}, quizEntry.toJS(), {
-                  entryId: stimulusData.id,
-                  entryType: 'Stimulus'
-                });
-                _context.next = 4;
-                return _this.props.updateQuizEntry(quizId, quizEntry.id, mods);
-              case 4:
-                _this.props.getQuizEntries(quizId);
-              case 5:
-              case "end":
-                return _context.stop();
-            }
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, quizId = _this$props.quizId, quizEntry = _this$props.quizEntry;
+              mods = Object.assign({}, quizEntry.toJS(), {
+                entryId: stimulusData.id,
+                entryType: 'Stimulus'
+              });
+              _context.next = 4;
+              return _this.props.updateQuizEntry(quizId, quizEntry.id, mods);
+            case 4:
+              _this.props.getQuizEntries(quizId);
+            case 5:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }));
       return function (_x) {
         return _ref.apply(this, arguments);
       };
-    }();
-    _this.createNextQuizEntry = function () {
+    }());
+    _defineProperty(_this, "createNextQuizEntry", function () {
       var _this$props$nextQuizE = _this.props.nextQuizEntry,
         interactionTypeData = _this$props$nextQuizE.interactionTypeData,
         quizId = _this$props$nextQuizE.quizId,
@@ -130,102 +130,100 @@ export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComp
         }, parentEntryId, stimulusId);
       }
       _this.props.clearNextQuizEntry();
-    };
-    _this.onSubmit = /*#__PURE__*/function () {
+    });
+    _defineProperty(_this, "onSubmit", /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
         var _this$props2, stimulus, workingStimulus, quizId, quizEntry, stimulusData;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _this$props2 = _this.props, stimulus = _this$props2.stimulus, workingStimulus = _this$props2.workingStimulus, quizId = _this$props2.quizId, quizEntry = _this$props2.quizEntry;
-                if (workingStimulus.isValid()) {
-                  _context2.next = 8;
-                  break;
-                }
-                _context2.next = 4;
-                return _this.props.showError(_this.props.guid);
-              case 4:
-                _this.props.screenreaderNotification(t('Simulus not saved due to validation errors with the data.'));
-                _this.props.clearNextQuizEntry();
-                _this.focusFirstErrorField();
-                return _context2.abrupt("return");
-              case 8:
-                _this.setState({
-                  canSubmit: false
-                });
-                _this.props.hideError(_this.props.guid);
-                _context2.prev = 10;
-                if (!stimulus.isTemporary()) {
-                  _context2.next = 17;
-                  break;
-                }
-                _context2.next = 14;
-                return _this.props.createStimulusAndQuizEntry(quizId, workingStimulus.toJS(), quizEntry);
-              case 14:
-                _this.props.clearTemporaryStimulus(quizId);
-                _context2.next = 28;
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _this$props2 = _this.props, stimulus = _this$props2.stimulus, workingStimulus = _this$props2.workingStimulus, quizId = _this$props2.quizId, quizEntry = _this$props2.quizEntry;
+              if (workingStimulus.isValid()) {
+                _context2.next = 8;
                 break;
-              case 17:
-                if (!_this.props.shouldClone) {
-                  _context2.next = 26;
-                  break;
-                }
-                _context2.next = 20;
-                return _this.props.createStimulus(workingStimulus, _this.props.quizId, 'quiz', workingStimulus.id);
-              case 20:
-                stimulusData = _context2.sent;
-                _context2.next = 23;
-                return _this.handleStimulusCreated(stimulusData);
-              case 23:
-                _this.props.clearTemporaryStimulus(quizId);
-                _context2.next = 28;
+              }
+              _context2.next = 4;
+              return _this.props.showError(_this.props.guid);
+            case 4:
+              _this.props.screenreaderNotification(t('Simulus not saved due to validation errors with the data.'));
+              _this.props.clearNextQuizEntry();
+              _this.focusFirstErrorField();
+              return _context2.abrupt("return");
+            case 8:
+              _this.setState({
+                canSubmit: false
+              });
+              _this.props.hideError(_this.props.guid);
+              _context2.prev = 10;
+              if (!stimulus.isTemporary()) {
+                _context2.next = 17;
                 break;
-              case 26:
-                _context2.next = 28;
-                return _this.props.updateStimulus(workingStimulus.toJS(), quizId);
-              case 28:
-                _context2.next = 34;
+              }
+              _context2.next = 14;
+              return _this.props.createStimulusAndQuizEntry(quizId, workingStimulus.toJS(), quizEntry);
+            case 14:
+              _this.props.clearTemporaryStimulus(quizId);
+              _context2.next = 28;
+              break;
+            case 17:
+              if (!_this.props.shouldClone) {
+                _context2.next = 26;
                 break;
-              case 30:
-                _context2.prev = 30;
-                _context2.t0 = _context2["catch"](10);
-                _this.setState({
-                  canSubmit: true
-                });
-                throw _context2.t0;
-              case 34:
-                _this.afterSubmit();
-              case 35:
-              case "end":
-                return _context2.stop();
-            }
+              }
+              _context2.next = 20;
+              return _this.props.createStimulus(workingStimulus, _this.props.quizId, 'quiz', workingStimulus.id);
+            case 20:
+              stimulusData = _context2.sent;
+              _context2.next = 23;
+              return _this.handleStimulusCreated(stimulusData);
+            case 23:
+              _this.props.clearTemporaryStimulus(quizId);
+              _context2.next = 28;
+              break;
+            case 26:
+              _context2.next = 28;
+              return _this.props.updateStimulus(workingStimulus.toJS(), quizId);
+            case 28:
+              _context2.next = 34;
+              break;
+            case 30:
+              _context2.prev = 30;
+              _context2.t0 = _context2["catch"](10);
+              _this.setState({
+                canSubmit: true
+              });
+              throw _context2.t0;
+            case 34:
+              _this.afterSubmit();
+            case 35:
+            case "end":
+              return _context2.stop();
           }
         }, _callee2, null, [[10, 30]]);
       }));
       return function (_x2) {
         return _ref2.apply(this, arguments);
       };
-    }();
-    _this.focusFirstErrorField = function () {
+    }());
+    _defineProperty(_this, "focusFirstErrorField", function () {
       if (_this.stimulusEditArea) {
         var editArea = ReactDOM.findDOMNode(_this.stimulusEditArea);
         var firstErrorField = editArea === null || editArea === void 0 ? void 0 : editArea.querySelector('[aria-invalid="true"]');
         firstErrorField && firstErrorField.focus();
       }
-    };
-    _this.handleRef = function (node) {
+    });
+    _defineProperty(_this, "handleRef", function (node) {
       _this.stimulusEditArea = node;
-    };
-    _this.onSuccess = function (url) {
+    });
+    _defineProperty(_this, "onSuccess", function (url) {
       _this.props.setUploadStatus(FILE_UPLOAD_SUCCESS);
-    };
-    _this.handleAddToBankContinue = function () {
+    });
+    _defineProperty(_this, "handleAddToBankContinue", function () {
       _this.setState({
         canSubmit: false
       });
-    };
-    _this.handleAddToBank = function (bankEntry) {
+    });
+    _defineProperty(_this, "handleAddToBank", function (bankEntry) {
       if (_this.props.workingQuizEntry.isTemporary) {
         _this.props.createQuizEntry(_this.props.quizId, bankEntry.id, 'BankEntry', _this.props.workingQuizEntry.getProperties());
         _this.props.clearTemporaryStimulus(_this.props.quizId);
@@ -237,8 +235,8 @@ export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComp
           entryType: 'BankEntry'
         });
       }
-    };
-    _this.getEntryForBank = function () {
+    });
+    _defineProperty(_this, "getEntryForBank", function () {
       var _this$props3 = _this.props,
         stimulus = _this$props3.stimulus,
         workingStimulus = _this$props3.workingStimulus,
@@ -255,13 +253,14 @@ export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComp
       } else {
         return Promise.resolve(stimulus);
       }
-    };
-    _this.setTitleRef = function (elem) {
+    });
+    _defineProperty(_this, "setTitleRef", function (elem) {
       _this.stimulusEditTitleRef = elem;
-    };
+    });
     return _this;
   }
-  _createClass(StimulusEdit, [{
+  _inherits(StimulusEdit, _Component);
+  return _createClass(StimulusEdit, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (!this.props.nextQuizEntry) {
@@ -417,9 +416,7 @@ export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComp
       return jsx(WarningWrapper, propsForStimulusVersioning, hasWarningWrapper ? jsx(StimulusShowInfo, this.props) : this.renderStimulusEdit());
     }
   }]);
-  StimulusEdit.displayName = "StimulusEdit";
-  return StimulusEdit;
-}(Component), _StimulusEdit.displayName = 'StimulusEdit', _StimulusEdit.componentId = "Quizzes".concat(_StimulusEdit.displayName), _StimulusEdit.propTypes = {
+}(Component), _defineProperty(_StimulusEdit, "displayName", 'StimulusEdit'), _defineProperty(_StimulusEdit, "componentId", "Quizzes".concat(_StimulusEdit.displayName)), _defineProperty(_StimulusEdit, "propTypes", {
   addContentPopoverOpen: PropTypes.bool.isRequired,
   appContainer: CustomPropTypes.selectors.isRequired,
   bankEntryWarningWrapperProps: PropTypes.func,
@@ -460,10 +457,10 @@ export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComp
   onEditToggle: PropTypes.func.isRequired,
   shouldFocusOnMount: PropTypes.bool.isRequired,
   styles: PropTypes.object
-}, _StimulusEdit.defaultProps = {
+}), _defineProperty(_StimulusEdit, "defaultProps", {
   bankEntryWarningWrapperProps: function bankEntryWarningWrapperProps() {},
   errorsShowing: false,
   isBankedContent: false,
   nextQuizEntry: null
-}, _StimulusEdit)) || _class);
+}), _StimulusEdit)) || _class);
 export default wrapWithOutsideClickEmotion(StimulusEdit);

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

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     optionPadding: spacing.small,
     stimulusContentPadding: spacing.small,
     stimulusContentPaddingBottom: spacing.small,
-    stimulusButtonsColor: colors.contrasts.grey100100,
+    stimulusButtonsColor: colors.oxford,
     stimulusButtonsZIndex: '3333'
   };
 };

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

@@ -1,13 +1,17 @@
 import { bindActionCreators } from 'redux';
-import { connect } from "../../../../react-redux.js";
-import * as modificationActions from "../../../../actions/modifications.js";
-import { featureOn } from "../../../../../common/util/featureCheck.js";
-import StimulusEditInfo from "./presenter.js";
+import { connect } from '../../../../react-redux';
+import * as modificationActions from '../../../../actions/modifications';
+import { featureOn } from '../../../../../common/util/featureCheck';
+import { getActiveQuizId, getQuizById } from '../../../../../common/selectors/quizzes';
+import StimulusEditInfo from './presenter';
 function mapStateToProps(state, props) {
+  var quizId = getActiveQuizId(state);
+  var quiz = getQuizById(state, quizId);
   return {
     workingStimulus: props.stimulus.getWorkingInstance(),
     errorsShowing: state.getIn(['errorsShowing', props.guid], props.errorsShowing || false),
-    stimulusOrientationEnabled: featureOn('customizable_stimulus_orientation')
+    stimulusOrientationEnabled: featureOn('customizable_stimulus_orientation'),
+    shuffleQuestionsEnabled: quiz.shuffleQuestions
   };
 }
 function mapDispatchToProps(dispatch) {

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

@@ -1,8 +1,12 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class, _StimulusEditInfo;
+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 PropTypes from 'prop-types';
@@ -11,52 +15,48 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { jsx } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import { RichContentInput, RCE_SINGLE_LINE_HEIGHT } from '@instructure/quiz-rce';
-import { toErrors } from "../../../../util/instUIMessages.js";
+import { toErrors } from '../../../../util/instUIMessages';
 import { IconUpdownLine } from '@instructure/ui-icons';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
 import { SimpleSelect, TextInput, TOP, withStyleOverrides, FormFieldGroup, FormField } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-var _ref3 = jsx(IconUpdownLine, {
-  rotate: "90"
-});
-var _ref4 = jsx(IconUpdownLine, null);
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import { Alert } from '@instructure/ui-alerts';
 export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_StimulusEditInfo = /*#__PURE__*/function (_Component) {
-  _inherits(StimulusEditInfo, _Component);
-  var _super = _createSuper(StimulusEditInfo);
   function StimulusEditInfo() {
     var _this;
     _classCallCheck(this, StimulusEditInfo);
     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.inputErrors = function (field) {
+    _this = _callSuper(this, StimulusEditInfo, [].concat(args));
+    _defineProperty(_this, "inputErrors", function (field) {
       if (_this.props.errorsShowing) {
         var errorMap = _this.props.workingStimulus.getErrors().toJS() || {};
         return toErrors(errorMap[field] || []);
       }
-    };
-    _this.onOrientationChange = function (e, _ref) {
+    });
+    _defineProperty(_this, "onOrientationChange", function (e, _ref) {
       var value = _ref.value;
       var newData = _this.props.workingStimulus.set('orientation', value);
       _this.props.modifyStimulus(newData);
-    };
-    _this.onTextInputChange = function (field) {
+    });
+    _defineProperty(_this, "onTextInputChange", function (field) {
       return function (e) {
         var newData = _this.props.workingStimulus.set(field, e.target.value);
         _this.props.modifyStimulus(newData);
       };
-    };
-    _this.onBodyChange = function (e, _ref2) {
+    });
+    _defineProperty(_this, "onBodyChange", function (e, _ref2) {
       var editorContent = _ref2.editorContent;
       var newData = _this.props.workingStimulus.set('body', editorContent);
       _this.props.modifyStimulus(newData);
-    };
+    });
     return _this;
   }
-  _createClass(StimulusEditInfo, [{
+  _inherits(StimulusEditInfo, _Component);
+  return _createClass(StimulusEditInfo, [{
     key: "headerText",
     value: function headerText(stimulus) {
       if (stimulus.isTemporary()) {
@@ -68,7 +68,7 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
   }, {
     key: "renderOptionalLabel",
     value: function renderOptionalLabel(labelName) {
-      var optionalText = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : t('(optional)');
+      var optionalText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : t('(optional)');
       return jsx("div", null, jsx("span", null, labelName), jsx("span", {
         css: this.props.styles.optionalLabel
       }, optionalText));
@@ -87,15 +87,27 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
           rotate: stimulusOrientation === TOP ? '0' : '90'
         })
       }, jsx(SimpleSelect.Option, {
-        renderBeforeLabel: _ref3,
+        renderBeforeLabel: jsx(IconUpdownLine, {
+          rotate: "90"
+        }),
         id: "stimulus-orientation-select-option-left",
         value: "left"
       }, t('Questions to the right')), jsx(SimpleSelect.Option, {
-        renderBeforeLabel: _ref4,
+        renderBeforeLabel: jsx(IconUpdownLine, null),
         id: "stimulus-orientation-select-option-top",
         value: "top"
       }, t('Questions below'))));
     }
+  }, {
+    key: "renderPassageAlert",
+    value: function renderPassageAlert(stimulus) {
+      if (!stimulus.passage || !this.props.shuffleQuestionsEnabled) {
+        return null;
+      }
+      return jsx(Alert, {
+        variant: "warning"
+      }, t('The passage sections may not appear in their original order due to the shuffle setting.'));
+    }
   }, {
     key: "renderInstructions",
     value: function renderInstructions(stimulus) {
@@ -146,7 +158,7 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
       }, jsx(Heading, {
         level: "h3",
         as: "h2"
-      }, this.headerText(stimulus)), jsx("div", {
+      }, this.headerText(stimulus)), this.renderPassageAlert(stimulus), jsx("div", {
         css: this.props.styles.section
       }, jsx(TextInput, {
         messages: this.inputErrors('title'),
@@ -174,9 +186,7 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
       }))), this.renderOptions(stimulus));
     }
   }]);
-  StimulusEditInfo.displayName = "StimulusEditInfo";
-  return StimulusEditInfo;
-}(Component), _StimulusEditInfo.displayName = 'StimulusEditInfo', _StimulusEditInfo.componentId = "Quizzes".concat(_StimulusEditInfo.displayName), _StimulusEditInfo.propTypes = {
+}(Component), _defineProperty(_StimulusEditInfo, "displayName", 'StimulusEditInfo'), _defineProperty(_StimulusEditInfo, "componentId", "Quizzes".concat(_StimulusEditInfo.displayName)), _defineProperty(_StimulusEditInfo, "propTypes", {
   isBankedContent: PropTypes.bool,
   stimulus: ImmutablePropTypes.record.isRequired,
   workingStimulus: ImmutablePropTypes.record.isRequired,
@@ -184,9 +194,11 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
   modifyStimulus: PropTypes.func.isRequired,
   setTitleRef: PropTypes.func,
   stimulusOrientationEnabled: PropTypes.bool.isRequired,
-  styles: PropTypes.object
-}, _StimulusEditInfo.defaultProps = {
+  styles: PropTypes.object,
+  shuffleQuestionsEnabled: PropTypes.bool
+}), _defineProperty(_StimulusEditInfo, "defaultProps", {
   isBankedContent: false,
+  shuffleQuestionsEnabled: false,
   setTitleRef: function setTitleRef() {}
-}, _StimulusEditInfo)) || _class);
+}), _StimulusEditInfo)) || _class);
 export default StimulusEditInfo;

package/es/common/components/resources/stimulus/StimulusEditInfo/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     sectionPadding: spacing.small,
-    optionalLabelColor: colors.contrasts.grey4570,
+    optionalLabelColor: colors.ash,
     optionalLabelFontSize: typography.fontSizeXSmall,
     urlLabelMargin: spacing.xSmall
   };