@instructure/quiz-core 17.17.3-rc.0 → 17.17.4-rc.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [17.17.3](https://gerrit.instructure.com/quizzes-ui/compare/v17.17.2...v17.17.3) (2021-10-06)
+
+**Note:** Version bump only for package @instructure/quiz-core
+
+
+
+
+
 ## [17.17.2](https://gerrit.instructure.com/quizzes-ui/compare/v17.17.1...v17.17.2) (2021-09-22)
 
 **Note:** Version bump only for package @instructure/quiz-core

package/es/building/api/stimuli.js

@@ -13,6 +13,7 @@ export function createStimulus(stimulus, parentId, parentType) {
   var resource = parentType === 'bank' ? 'banks' : 'quizzes';
   var url = "/api/".concat(resource, "/").concat(parentId, "/stimuli");
   var stimulusParams = {
+    orientation: stimulus.orientation,
     body: stimulus.body,
     instructions: stimulus.instructions,
     parent_stimulus_id: parentStimulusId,
@@ -48,6 +49,7 @@ export function updateStimulus(stimulus, parentId, parentType) {
   var resource = parentType === 'bank' ? 'banks' : 'quizzes';
   var url = "/api/".concat(resource, "/").concat(parentId, "/stimuli/").concat(stimulus.id);
   var stimulusData = {
+    orientation: stimulus.orientation,
     title: stimulus.title,
     instructions: stimulus.instructions,
     body: stimulus.body,

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

@@ -174,7 +174,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         handleValidationErrorsFromApi: this.props.handleValidationErrorsFromApi,
         clearValidationErrorsFromApi: this.props.clearValidationErrorsFromApi,
         haveValidationErrorsFromApi: Boolean(Object.values(this.props.validationErrorsFromApi).length)
-      }, pick(this.props, ['displayPosition', 'guid', 'draggingOnBuild', 'newHoverPosition', 'quizEntry', 'quizEntries', 'quizId', 'setUi', 'switchOffEditing', 'switchOnEditing', 'shouldClone', 'scrollKey', 'editQuizEntryToggle', 'onEditQuizEntryToggle']));
+      }, pick(this.props, ['displayPosition', 'guid', 'draggingOnBuild', 'newHoverPosition', 'quizEntry', 'quizEntries', 'quizId', 'setUi', 'switchOffEditing', 'switchOnEditing', 'shouldClone', 'scrollKey', 'editQuizEntryToggle', 'onEditQuizEntryToggle', 'stimulusOrientation']));
     }
   }, {
     key: "isEditing",
@@ -373,7 +373,8 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   validationErrorsFromApi: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.shape({
     type: PropTypes.string,
     text: PropTypes.string
-  })))
+  }))),
+  stimulusOrientation: PropTypes.string
 }, _class2.defaultProps = {
   childEntries: List(),
   draggingAboveHalf: false,
@@ -386,6 +387,7 @@ export var QuizEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   shouldClone: false,
   tagAssociations: List(),
   useBankTags: false,
-  validationErrorsFromApi: {}
+  validationErrorsFromApi: {},
+  stimulusOrientation: null
 }, _temp)) || _class);
 export default QuizEntry;

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

@@ -13,6 +13,7 @@ import { DragSource } from 'react-dnd';
 import { IconBankLine } from '@instructure/ui-icons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { themeable } from '@instructure/ui-themeable';
+import { TOP } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
 import Item from "../../../../../common/records/Item.js";
 import Overlay from "../../../../../common/components/shared/overlay/Overlay.js";
@@ -21,22 +22,23 @@ import { ItemTypes, dragSource, collectDrag } from "../../../../../common/compon
 import PositionBox from "../../../../../common/components/resources/positionBox/PositionBox.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
 var styles = {
-  componentId: 'cAGiw',
+  componentId: 'fohHO',
   template: function template(theme) {
-    return "\n\n.cAGiw_eLmg{transform:translateZ(0)}\n\n.cAGiw_TMNr{background-color:".concat(theme.quizEntryShowBackgroundColor || 'inherit', ";padding:").concat(theme.quizEntryShowPadding || 'inherit', "}\n\n.cAGiw_fsuY{align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;height:").concat(theme.headerHeight || 'inherit', ";padding-right:").concat(theme.headerRightPadding || 'inherit', "}\n\n.cAGiw_bscQ{border:").concat(theme.dndBorder || 'inherit', "}\n\n.cAGiw_cKlw{align-items:center;display:inline-flex;flex:8 0 0;overflow:hidden}\n\n.cAGiw_IoDT{color:").concat(theme.rightHeaderColor || 'inherit', ";display:inline-flex;flex:0 0 auto;text-align:right;z-index:").concat(theme.rightHeaderZIndex || 'inherit', "}\n\n[dir=ltr] .cAGiw_IoDT,[dir=rtl] .cAGiw_IoDT{text-align:right}\n\n.cAGiw_IoDT button{background-color:transparent;background-color:initial}\n\n.cAGiw_eCZW,.cAGiw_cwte,.cAGiw_nvdO{color:").concat(theme.titleInteractionTypeNamePointsColor || 'inherit', ";font-size:").concat(theme.titleInteractionTypeNamePointsFontSize || 'inherit', ";margin-left:").concat(theme.titleInteractionTypeNamePointsLeftMargin || 'inherit', ";margin-right:").concat(theme.titleInteractionTypeNamePointsRightMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.cAGiw_csjx{margin:").concat(theme.itemHolderMargin || 'inherit', "}\n\n.cAGiw_fPOQ,.cAGiw_gaTA{background-color:transparent;border:none;color:inherit;font-size:").concat(theme.optionsButtonDragDropHandleFontSize || 'inherit', ";margin:").concat(theme.optionsButtonDragDropHandleMargin || 'inherit', "}\n\n.cAGiw_gaTA{cursor:pointer}\n\n@media print{.cAGiw_eLmg{page-break-inside:avoid}}");
+    return "\n\n.fohHO_eLmg{transform:translateZ(0)}\n\n.fohHO_TMNr{background-color:".concat(theme.quizEntryShowBackgroundColor || 'inherit', ";padding:").concat(theme.quizEntryShowPadding || 'inherit', "}\n\n.fohHO_fsuY{align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;height:").concat(theme.headerHeight || 'inherit', ";padding-right:").concat(theme.headerRightPadding || 'inherit', "}\n\n.fohHO_bscQ{border:").concat(theme.dndBorder || 'inherit', "}\n\n.fohHO_cKlw{align-items:center;display:inline-flex;flex:8 0 0;overflow:hidden}\n\n.fohHO_eGWt{border-bottom:").concat(theme.phoneConnectingLinesBorderWidth || 'inherit', " dotted;border-color:").concat(theme.phoneConnectingLinesBorderColor || 'inherit', ";border-left:").concat(theme.phoneConnectingLinesBorderWidth || 'inherit', " dotted;height:2rem;margin-right:1.2rem;margin-top:-0.8rem;width:1.2rem}\n\n.fohHO_eGWt,.fohHO_IoDT{display:inline-flex;flex:0 0 auto}\n\n.fohHO_IoDT{color:").concat(theme.rightHeaderColor || 'inherit', ";text-align:right;z-index:").concat(theme.rightHeaderZIndex || 'inherit', "}\n\n[dir=ltr] .fohHO_IoDT,[dir=rtl] .fohHO_IoDT{text-align:right}\n\n.fohHO_IoDT button{background-color:transparent;background-color:initial}\n\n.fohHO_eCZW,.fohHO_cwte,.fohHO_nvdO{color:").concat(theme.titleInteractionTypeNamePointsColor || 'inherit', ";font-size:").concat(theme.titleInteractionTypeNamePointsFontSize || 'inherit', ";margin-left:").concat(theme.titleInteractionTypeNamePointsLeftMargin || 'inherit', ";margin-right:").concat(theme.titleInteractionTypeNamePointsRightMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.fohHO_csjx{margin:").concat(theme.itemHolderMargin || 'inherit', "}\n\n.fohHO_fPOQ,.fohHO_gaTA{background-color:transparent;border:none;color:inherit;font-size:").concat(theme.optionsButtonDragDropHandleFontSize || 'inherit', ";margin:").concat(theme.optionsButtonDragDropHandleMargin || 'inherit', "}\n\n.fohHO_gaTA{cursor:pointer}\n\n@media print{.fohHO_eLmg{page-break-inside:avoid}}");
   },
-  'quizEntryWrapper': 'cAGiw_eLmg',
-  'quizEntryShow': 'cAGiw_TMNr',
-  'header': 'cAGiw_fsuY',
-  'dndBorder': 'cAGiw_bscQ',
-  'leftHeader': 'cAGiw_cKlw',
-  'rightHeader': 'cAGiw_IoDT',
-  'interactionTypeName': 'cAGiw_eCZW',
-  'points': 'cAGiw_cwte',
-  'title': 'cAGiw_nvdO',
-  'itemHolder': 'cAGiw_csjx',
-  'dragAndDropHandle': 'cAGiw_fPOQ',
-  'optionsButton': 'cAGiw_gaTA'
+  'quizEntryWrapper': 'fohHO_eLmg',
+  'quizEntryShow': 'fohHO_TMNr',
+  'header': 'fohHO_fsuY',
+  'dndBorder': 'fohHO_bscQ',
+  'leftHeader': 'fohHO_cKlw',
+  'connectingLines': 'fohHO_eGWt',
+  'rightHeader': 'fohHO_IoDT',
+  'interactionTypeName': 'fohHO_eCZW',
+  'points': 'fohHO_cwte',
+  'title': 'fohHO_nvdO',
+  'itemHolder': 'fohHO_csjx',
+  'dragAndDropHandle': 'fohHO_fPOQ',
+  'optionsButton': 'fohHO_gaTA'
 };
 import theme from "./theme.js";
 
@@ -251,7 +253,9 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
           connectDragPreview = _this$props2.connectDragPreview,
           displayPosition = _this$props2.displayPosition,
           draggingOver = _this$props2.draggingOver,
-          draggingAboveHalf = _this$props2.draggingAboveHalf;
+          draggingAboveHalf = _this$props2.draggingAboveHalf,
+          quizEntry = _this$props2.quizEntry,
+          stimulusOrientation = _this$props2.stimulusOrientation;
       var positionToDisplay = this.props.quizEntry.positionToDisplay(displayPosition);
       var positionText = t('Preview of item at position {position}', {
         position: positionToDisplay
@@ -275,7 +279,9 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
         "data-automation-item-id": this.props.quizEntry.id
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.header
-      }, /*#__PURE__*/React.createElement(PositionBox, {
+      }, quizEntry.isInStimulus && stimulusOrientation === TOP && /*#__PURE__*/React.createElement("div", {
+        className: styles.connectingLines
+      }), /*#__PURE__*/React.createElement(PositionBox, {
         position: positionToDisplay,
         headingText: positionText
       }), this.renderLeftHeader(), /*#__PURE__*/React.createElement(ActionButtons, {
@@ -328,7 +334,8 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   editQuizEntryToggle: PropTypes.bool.isRequired,
   haveValidationErrorsFromApi: PropTypes.bool,
   // only used in index.js
-  interactionTypeName: PropTypes.string
+  interactionTypeName: PropTypes.string,
+  stimulusOrientation: PropTypes.string
 }, _class2.defaultProps = {
   children: null,
   draggingOver: false,
@@ -337,7 +344,8 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   scrollKey: void 0,
   editQuizEntryToggle: false,
   haveValidationErrorsFromApi: false,
-  interactionTypeName: null
+  interactionTypeName: null,
+  stimulusOrientation: null
 }, _temp)) || _class);
 export var QuizEntryShowRaw = QuizEntryShow;
 export var QuizEntryShowPresenter = DragSource(ItemTypes.QUIZ_ENTRY, dragSource, collectDrag)(QuizEntryShow);

package/es/building/components/resources/quizEntry/QuizEntryShow/theme.js

@@ -2,7 +2,8 @@ export default function generator(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
-      borders = _ref.borders;
+      borders = _ref.borders,
+      breakpoints = _ref.breakpoints;
   return {
     quizEntryShowPadding: "".concat(spacing.large, " ").concat(spacing.small),
     quizEntryShowBackgroundColor: colors.white,
@@ -17,6 +18,9 @@ export default function generator(_ref) {
     titleInteractionTypeNamePointsRightMargin: spacing.xSmall,
     itemHolderMargin: spacing.xSmall,
     optionsButtonDragDropHandleFontSize: typography.fontSizeMedium,
-    optionsButtonDragDropHandleMargin: spacing.xSmall
+    optionsButtonDragDropHandleMargin: spacing.xSmall,
+    phoneConnectingLinesBorderWidth: borders.widthSmall,
+    phoneConnectingLinesBorderColor: colors.ash,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
 }

package/es/common/components/resources/quiz/AddContent/Button/theme.js

@@ -14,7 +14,7 @@ export default function generator(_ref) {
     newItemButtonFocusOutline: "2px solid ".concat(colors.brand),
     newItemButtonFontSize: typography.fontSizeMedium,
     newItemButtonFontWeight: typography.fontWeightBold,
-    newItemButtonZIndex: '2222',
+    newItemButtonZIndex: '4444',
     newItemButtonBoxShadow: '2px 2px 3px #ddd',
     newItemButtonEditingBackgroundColor: colors.crimson,
     newItemButtonHolderZIndex: '2222',

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

@@ -2,6 +2,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from "../../../../react-redux.js";
 import { openDeleteStimulusModal } from "../../../../actions/modal.js";
 import { set } from "../../../../actions/ui.js";
+import { featureOn } from "../../../../../common/util/featureCheck.js";
 import WrappedStimulus from "./presenter.js";
 
 var mapStateToProps = function mapStateToProps(state, props) {
@@ -13,7 +14,8 @@ var mapStateToProps = function mapStateToProps(state, props) {
     childEntries: props.quizEntry.getNestedEntries(),
     dropIntoEmptyStimulus: draggingOver && dropIntoEmptyStimulus,
     draggingOver: draggingOver,
-    draggingAboveHalf: draggingOver && draggingAboveHalf
+    draggingAboveHalf: draggingOver && draggingAboveHalf,
+    stimulusOrientationEnabled: featureOn('customizable_stimulus_orientation')
   };
 };
 

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

@@ -19,20 +19,21 @@ import StimulusShow from "../StimulusShow/index.js";
 import DragAndDropZone from "../../../shared/drag_and_drop/DragAndDropZone/index.js";
 import { ItemTypes, dragSource, collectDrag } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import wrapWithOutsideClick from "../../../shared/functionality/componentWithOutsideClick.js";
-import { DELETE_STIMULUS_DATA } from '@instructure/quiz-common';
+import { DELETE_STIMULUS_DATA, LEFT } from '@instructure/quiz-common';
 import ConnectedQuizEntry from "../../../../../building/components/resources/quizEntry/QuizEntry/index.js";
 var styles = {
-  componentId: 'fsSBy',
+  componentId: 'fEUId',
   template: function template(theme) {
-    return "\n\n.fsSBy_dRGY{display:flex}\n\n.fsSBy_cZDz{border-right:".concat(theme.leftPanelBorderWidth || 'inherit', " solid ").concat(theme.leftPanelBorderColor || 'inherit', "}\n\n.fsSBy_cZDz,.fsSBy_AmHx{box-sizing:border-box;max-height:90vh;overflow:auto;width:50%}\n\n.fsSBy_AmHx{margin-left:calc(").concat(theme.rightPanelPadding || 'inherit', "*-1);padding-left:").concat(theme.rightPanelPadding || 'inherit', "}\n\n.fsSBy_duqv{display:none}\n\n.fsSBy_ehcZ{transform:translateZ(0)}\n\n.fsSBy_fPOQ{background-color:transparent;border:none;color:inherit;cursor:move;font-size:").concat(theme.dragAndDropHandleFontSize || 'inherit', ";height:0;margin:").concat(theme.dragAndDropHandleMargin || 'inherit', ";margin-top:0;position:relative;z-index:").concat(theme.dragAndDropHandleZIndex || 'inherit', "}\n\n.fsSBy_eLmg{width:100%}\n\n@media print{.fsSBy_cZDz,.fsSBy_AmHx{max-height:none}}");
+    return "\n\n.fEUId_dRGY{display:flex}\n\n.fEUId_cZDz{border-right:".concat(theme.leftPanelBorderWidth || 'inherit', " solid ").concat(theme.leftPanelBorderColor || 'inherit', "}\n\n.fEUId_cZDz,.fEUId_AmHx{box-sizing:border-box;max-height:105vh;overflow:auto}\n\n.fEUId_AmHx{margin-left:calc(").concat(theme.rightPanelPadding || 'inherit', "*-1);padding-left:").concat(theme.rightPanelPadding || 'inherit', "}\n\n.fEUId_duqv{display:none}\n\n.fEUId_ehcZ{transform:translateZ(0)}\n\n.fEUId_fPOQ{background-color:transparent;border:none;color:inherit;cursor:move;font-size:").concat(theme.dragAndDropHandleFontSize || 'inherit', ";height:0;margin:").concat(theme.dragAndDropHandleMargin || 'inherit', ";margin-top:0;position:relative;z-index:").concat(theme.dragAndDropHandleZIndex || 'inherit', "}\n\n.fEUId_eLmg{width:100%}\n\n.fEUId_dORw{width:50%}\n\n@media print{.fEUId_cZDz,.fEUId_AmHx{max-height:none}}");
   },
-  'stimulus': 'fsSBy_dRGY',
-  'leftPanel': 'fsSBy_cZDz',
-  'rightPanel': 'fsSBy_AmHx',
-  'hidden': 'fsSBy_duqv',
-  'stimulusWrapper': 'fsSBy_ehcZ',
-  'dragAndDropHandle': 'fsSBy_fPOQ',
-  'quizEntryWrapper': 'fsSBy_eLmg'
+  'stimulus': 'fEUId_dRGY',
+  'leftPanel': 'fEUId_cZDz',
+  'rightPanel': 'fEUId_AmHx',
+  'hidden': 'fEUId_duqv',
+  'stimulusWrapper': 'fEUId_ehcZ',
+  'dragAndDropHandle': 'fEUId_fPOQ',
+  'quizEntryWrapper': 'fEUId_eLmg',
+  'horizontallyAligned': 'fEUId_dORw'
 };
 import theme from "./theme.js";
 export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
@@ -86,7 +87,9 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
         return /*#__PURE__*/React.createElement("div", {
           className: styles.quizEntryWrapper,
           key: childEntry.id
-        }, /*#__PURE__*/React.createElement(ConnectedQuizEntry, _this2.props.propsForQuizEntry(childEntry, displayPosition)), !_this2.props.draggingOnBuild && /*#__PURE__*/React.createElement(AddContentPopover, {
+        }, /*#__PURE__*/React.createElement(ConnectedQuizEntry, Object.assign({}, _this2.props.propsForQuizEntry(childEntry, displayPosition), {
+          stimulusOrientation: _this2.props.stimulusOrientationEnabled ? _this2.props.stimulus.orientation : null
+        })), !_this2.props.draggingOnBuild && /*#__PURE__*/React.createElement(AddContentPopover, {
           allowStimulusCreation: false,
           stimulusId: _this2.props.stimulus.id,
           parentEntryId: _this2.props.quizEntry.id,
@@ -97,8 +100,8 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
       });
     }
   }, {
-    key: "renderLeftPanel",
-    value: function renderLeftPanel() {
+    key: "renderStimulusPanel",
+    value: function renderStimulusPanel() {
       var StimulusComponent = this.props.isEditing ? StimulusEdit : StimulusShow;
       var connectDragPreview = this.props.connectDragPreview;
       return connectDragPreview( /*#__PURE__*/React.createElement("div", {
@@ -126,18 +129,22 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   }, {
     key: "renderPanels",
     value: function renderPanels(propsForDnDZone) {
-      var _classnames;
+      var _classnames2;
 
-      var stimulus = this.props.stimulus;
-      var rightPanelClass = classnames((_classnames = {}, _defineProperty(_classnames, styles.hidden, stimulus.isTemporary()), _defineProperty(_classnames, styles.rightPanel, !stimulus.isTemporary()), _classnames));
+      var _this$props2 = this.props,
+          stimulus = _this$props2.stimulus,
+          stimulusOrientationEnabled = _this$props2.stimulusOrientationEnabled;
+      var shouldSetHorizontalOrientation = stimulus.orientation === LEFT || !stimulusOrientationEnabled;
+      var stimulusPanelClass = classnames(styles.leftPanel, _defineProperty({}, styles.horizontallyAligned, shouldSetHorizontalOrientation));
+      var itemsPanelClass = classnames((_classnames2 = {}, _defineProperty(_classnames2, styles.horizontallyAligned, shouldSetHorizontalOrientation), _defineProperty(_classnames2, styles.hidden, stimulus.isTemporary()), _defineProperty(_classnames2, styles.rightPanel, !stimulus.isTemporary()), _classnames2));
       return /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulus,
+        className: classnames(_defineProperty({}, styles.stimulus, shouldSetHorizontalOrientation)),
         ref: this.props.dndRef,
         "data-automation": "sdk-stimulus"
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.leftPanel
-      }, this.renderLeftPanel()), /*#__PURE__*/React.createElement("div", {
-        className: rightPanelClass
+        className: stimulusPanelClass
+      }, this.renderStimulusPanel()), /*#__PURE__*/React.createElement("div", {
+        className: itemsPanelClass
       }, /*#__PURE__*/React.createElement("div", null), this.renderChildQuizEntries(), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "in"
       })), this.props.childEntries.size === 0 && /*#__PURE__*/React.createElement(AddContentPopover, {
@@ -196,7 +203,8 @@ export var Stimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   switchOnEditing: PropTypes.func.isRequired,
   switchOffEditing: PropTypes.func.isRequired,
   onEditStimulusToggle: PropTypes.func.isRequired,
-  editStimulusToggle: PropTypes.bool.isRequired
+  editStimulusToggle: PropTypes.bool.isRequired,
+  stimulusOrientationEnabled: PropTypes.bool.isRequired
 }, _class2.defaultProps = {
   bankEntryWarningWrapperProps: function bankEntryWarningWrapperProps() {},
   childEntries: List([]),

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

@@ -1,12 +1,14 @@
 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";
 
 function mapStateToProps(state, props) {
   return {
     workingStimulus: props.stimulus.getWorkingInstance(),
-    errorsShowing: state.getIn(['errorsShowing', props.guid], props.errorsShowing || false)
+    errorsShowing: state.getIn(['errorsShowing', props.guid], props.errorsShowing || false),
+    stimulusOrientationEnabled: featureOn('customizable_stimulus_orientation')
   };
 }
 

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

@@ -17,6 +17,10 @@ import { Heading } from '@instructure/ui-heading';
 import RichContentInput from "../../../RichContentInput/index.js";
 import { toErrors } from "../../../../util/instUIMessages.js";
 import Errors from "../../../shared/errors/Errors.js";
+import { SimpleSelect } from '@instructure/ui-simple-select';
+import { IconUpdownLine } from '@instructure/ui-icons';
+import { ToggleDetails } from '@instructure/ui-toggle-details';
+import { TOP } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
 var styles = {
   componentId: 'doNBF',
@@ -27,6 +31,13 @@ var styles = {
   'optionalLabel': 'doNBF_fvFs'
 };
 import theme from "./theme.js";
+
+var _ref3 = /*#__PURE__*/React.createElement(IconUpdownLine, {
+  rotate: "90"
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(IconUpdownLine, null);
+
 export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(StimulusEditInfo, _Component);
 
@@ -50,6 +61,14 @@ export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_
       }
     };
 
+    _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) {
       return function (e) {
         var newData = _this.props.workingStimulus.set(field, e.target.value);
@@ -58,8 +77,8 @@ export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_
       };
     };
 
-    _this.onBodyChange = function (e, _ref) {
-      var editorContent = _ref.editorContent;
+    _this.onBodyChange = function (e, _ref2) {
+      var editorContent = _ref2.editorContent;
 
       var newData = _this.props.workingStimulus.set('body', editorContent);
 
@@ -98,6 +117,29 @@ export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_
         className: styles.optionalLabel
       }, optionalText));
     }
+  }, {
+    key: "renderStimulusOrientationSelect",
+    value: function renderStimulusOrientationSelect() {
+      var stimulusOrientation = this.props.workingStimulus.get('orientation');
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.section
+      }, /*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: t('Orientation'),
+        onChange: this.onOrientationChange,
+        value: stimulusOrientation,
+        renderBeforeInput: /*#__PURE__*/React.createElement(IconUpdownLine, {
+          rotate: stimulusOrientation === TOP ? '0' : '90'
+        })
+      }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+        renderBeforeLabel: _ref3,
+        id: "stimulus-orientation-select-option-left",
+        value: "left"
+      }, t('Questions to the right')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+        renderBeforeLabel: _ref4,
+        id: "stimulus-orientation-select-option-top",
+        value: "top"
+      }, t('Questions below'))));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -137,12 +179,19 @@ export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_
         errorList: this.errorsList('body')
       })), /*#__PURE__*/React.createElement("div", {
         className: styles.section
+      }, /*#__PURE__*/React.createElement(ToggleDetails, {
+        defaultExpanded: true,
+        variant: "filled",
+        key: "options",
+        summary: t('Options')
+      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, /*#__PURE__*/React.createElement("div", {
+        className: styles.section
       }, /*#__PURE__*/React.createElement(TextInput, {
         renderLabel: this.renderOptionalLabel(t('Source URL'), t('(optional - not visible to students)')),
         type: "text",
         onChange: this.onTextInputChange('sourceUrl'),
         value: stimulus.get('sourceUrl')
-      })));
+      })))));
     }
   }]);
 
@@ -156,7 +205,8 @@ export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_
   modifyStimulus: PropTypes.func.isRequired,
   parentId: PropTypes.string.isRequired,
   parentType: PropTypes.string.isRequired,
-  setTitleRef: PropTypes.func
+  setTitleRef: PropTypes.func,
+  stimulusOrientationEnabled: PropTypes.bool.isRequired
 }, _class2.defaultProps = {
   isBankedContent: false,
   setTitleRef: function setTitleRef() {}

package/es/common/records/Stimulus.js

@@ -75,6 +75,7 @@ export var Stimulus = /*#__PURE__*/function (_ReduxRecord) {
   instructions: '',
   body: '',
   sourceUrl: '',
-  status: 'mutable'
+  status: 'mutable',
+  orientation: 'left'
 }));
 export default Stimulus;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "17.17.3-rc.0+18853503d",
+  "version": "17.17.4-rc.1+fcf2046a3",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -40,12 +40,12 @@
     "lib"
   ],
   "dependencies": {
-    "@instructure/outcomes-ui": "^1.1.11",
-    "@instructure/quiz-common": "17.17.3-rc.0+18853503d",
-    "@instructure/quiz-i18n": "17.17.3-rc.0+18853503d",
-    "@instructure/quiz-interactions": "17.17.3-rc.0+18853503d",
-    "@instructure/quiz-number-input": "17.17.3-rc.0+18853503d",
-    "@instructure/quiz-rce": "17.17.3-rc.0+18853503d",
+    "@instructure/outcomes-ui": "^2.0.0",
+    "@instructure/quiz-common": "17.17.4-rc.1+fcf2046a3",
+    "@instructure/quiz-i18n": "17.17.4-rc.1+fcf2046a3",
+    "@instructure/quiz-interactions": "17.17.4-rc.1+fcf2046a3",
+    "@instructure/quiz-number-input": "17.17.4-rc.1+fcf2046a3",
+    "@instructure/quiz-rce": "17.17.4-rc.1+fcf2046a3",
     "@instructure/ui-a11y-content": "^7.11.0",
     "@instructure/ui-alerts": "^7.11.0",
     "@instructure/ui-avatar": "^7.11.0",
@@ -106,7 +106,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "17.17.3-rc.0+18853503d",
+    "instructure-validations": "17.17.4-rc.1+fcf2046a3",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -137,7 +137,7 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "@instructure/quiz-scripts": "17.17.3-rc.0+18853503d",
+    "@instructure/quiz-scripts": "17.17.4-rc.1+fcf2046a3",
     "@instructure/ui-axe-check": "^7.11.0",
     "@instructure/ui-babel-preset": "^7.11.0",
     "@instructure/ui-karma-config": "^7.11.0",
@@ -156,7 +156,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "17.17.3-rc.0+18853503d",
+    "quiz-presets": "17.17.4-rc.1+fcf2046a3",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -172,5 +172,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "18853503d243825abe0984367e2201d7c71af822"
+  "gitHead": "fcf2046a3612c26ef19c93fd0a3007f34ecccf7d"
 }