@instructure/quiz-core 20.36.1 → 20.37.1

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

@@ -15,9 +15,9 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _partial = _interopRequireDefault(require("lodash/partial"));
+var _uiText = require("@instructure/ui-text");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _uiButtons = require("@instructure/ui-buttons");
-var _uiTextInput = require("@instructure/ui-text-input");
 var _emotion = require("@instructure/emotion");
 var _quizInteractions = require("@instructure/quiz-interactions");
 var _uiIcons = require("@instructure/ui-icons");
@@ -29,6 +29,7 @@ var _index = _interopRequireDefault(require("../../../ActionButtons/index.js"));
 var _quizCommon = require("@instructure/quiz-common");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
+var _uiView = require("@instructure/ui-view");
 var _dec, _class, _QuizEntryHeader;
 /** @jsx jsx */
 var _ref2 = (0, _emotion.jsx)(_uiIcons.IconBankLine, null);
@@ -189,16 +190,19 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
   }, {
     key: "renderName",
     value: function renderName() {
-      if (this.props.quizEntry.isBank && this.props.newActiveBank) {
-        return (0, _emotion.jsx)(_uiButtons.CondensedButton, {
+      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",
-          margin: "0 0 0 x-small",
-          onClick: this.handleBankClick,
-          "data-automation": "sdk-quiz-entry-interaction-type"
+          weight: "normal",
+          "data-automation": dataAutomation
         }, this.props.name);
       }
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.interactionType,
+      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);
     }
@@ -218,20 +222,22 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         questionNumber: displayPosition,
         interactionType: entry.getInteractionType().name
       });
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.titleHolder
-      }, (0, _emotion.jsx)("span", {
-        css: this.props.styles.titleInput
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+      return (0, _emotion.jsx)(_quizCommon.TextInput, {
         ref: this.storeTitleRef,
-        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, titleLabelText),
+        renderLabel: (0, _emotion.jsx)(_quizCommon.Flex, {
+          direction: "column",
+          gap: "small"
+        }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+          "aria-hidden": true
+        }, this.renderName()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+          "aria-hidden": true
+        }, (0, _formatMessage.default)('Question Title')), (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, titleLabelText)),
         type: "text",
-        placeholder: (0, _formatMessage.default)('Question Title'),
         onChange: this.handleTitleChange,
         value: workingEntry.title || '',
         interaction: disabled ? 'disabled' : 'enabled',
         "data-automation": "sdk-question-title-textinput"
-      })));
+      });
     }
   }, {
     key: "renderLeftHeader",
@@ -240,14 +246,16 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         position: this.props.displayPosition
       });
       var position = this.props.disabledForRegrade ? this.props.displayPosition : this.props.quizEntry.positionToDisplay(this.props.displayPosition);
-      return (0, _emotion.jsx)("div", {
+      return (0, _emotion.jsx)(_quizCommon.Flex, {
         className: "leftHeader",
-        css: this.props.styles.leftHeader
+        direction: "row",
+        justifyItems: "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(), this.renderName(), (0, _emotion.jsx)("div", {
+      }), this.renderBankedContent(), (0, _emotion.jsx)("div", {
         css: this.props.styles.dividingLine
       }), this.renderTitleHolder());
     }
@@ -267,12 +275,21 @@ var QuizEntryHeader = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         shouldDisableDeleteButton: this.props.disabledForRegrade,
         shouldRenderEdit: false
       };
-      return (0, _emotion.jsx)("div", {
+      return (0, _emotion.jsx)(_uiView.View, {
+        as: "div",
         className: "header",
-        css: this.props.styles.header
+        background: "secondary",
+        padding: "small"
       }, (0, _emotion.jsx)(_emotion.Global, {
         styles: this.props.styles.globalStyles
-      }), this.renderLeftHeader(), (0, _emotion.jsx)(_index.default, actionButtonProps));
+      }), (0, _emotion.jsx)(_quizCommon.Flex, {
+        className: "header",
+        direction: "row",
+        gap: "small"
+      }, (0, _emotion.jsx)(_quizCommon.Flex.Item, {
+        shouldShrink: false,
+        shouldGrow: true
+      }, this.renderLeftHeader()), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, (0, _emotion.jsx)(_index.default, actionButtonProps))));
     }
   }]);
   QuizEntryHeader.displayName = "QuizEntryHeader";

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

@@ -14,39 +14,11 @@ var generateStyle = function generateStyle(componentTheme) {
     },
     header: {
       backgroundColor: componentTheme.headerBackgroundColor,
-      color: componentTheme.headerColor,
-      padding: componentTheme.headerPadding,
-      display: 'flex',
-      justifyContent: 'space-between',
-      verticalAlign: 'middle',
-      alignItems: 'center'
-    },
-    leftHeader: {
-      flex: '8 0 0',
-      display: 'inline-flex',
-      flexWrap: 'nowrap',
-      alignItems: 'center',
-      /* fix for ie11 */
-      width: '100%'
-    },
-    interactionType: {
-      fontSize: componentTheme.interactionTypeFontSize,
-      marginLeft: componentTheme.interactionTypeLeftMargin,
-      marginRight: componentTheme.interactionTypeRightMargin
+      color: componentTheme.headerColor
     },
     dividingLine: {
       width: '0',
       borderLeft: componentTheme.dividingLineLeftBorder
-    },
-    titleHolder: {
-      display: 'flex',
-      flex: '1 1 auto'
-    },
-    titleInput: {
-      flex: '1 1 auto',
-      fontSize: componentTheme.titleInputFontSize,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
     }
   };
 };

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

@@ -11,11 +11,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     headerBackgroundColor: colors.porcelain,
     headerColor: colors.oxford,
-    headerPadding: "".concat(spacing.xSmall, " ").concat(spacing.small),
-    interactionTypeFontSize: typography.fontSizeSmall,
-    interactionTypeLeftMargin: spacing.xSmall,
-    interactionTypeRightMargin: spacing.xSmall,
-    titleInputFontSize: typography.fontSizeMedium
+    headerPadding: "".concat(spacing.xSmall, " ").concat(spacing.small)
   };
 };
 var _default = generateComponentTheme;

package/lib/common/components/AccessCodeTextInput/AccessCodeTextInput.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.whenRendered = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+var _default = {
+  title: _index.AccessCodeTextInput.name
+};
+exports.default = _default;
+var _ref = /*#__PURE__*/_react.default.createElement(_index.AccessCodeTextInput, {
+  value: "Is it secret? Is it safe?"
+});
+var whenRendered = function whenRendered() {
+  return _ref;
+};
+exports.whenRendered = whenRendered;

package/lib/common/components/AccessCodeTextInput/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AccessCodeTextInput = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = _interopRequireDefault(require("../MaskedTextInput/index.js"));
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+var AccessCodeTextInput = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AccessCodeTextInput, _Component);
+  var _super = (0, _createSuper2.default)(AccessCodeTextInput);
+  function AccessCodeTextInput() {
+    var _this;
+    (0, _classCallCheck2.default)(this, AccessCodeTextInput);
+    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 = {
+      masked: true
+    };
+    _this.handleMaskedChange = function () {
+      _this.setState(function (state) {
+        return {
+          masked: !state.masked
+        };
+      });
+    };
+    return _this;
+  }
+  (0, _createClass2.default)(AccessCodeTextInput, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Access Code')),
+        display: "inline-block",
+        type: "text",
+        onMaskedChange: this.handleMaskedChange,
+        masked: this.state.masked,
+        checkboxLabel: (0, _formatMessage.default)('Show access code')
+      }, this.props));
+    }
+  }]);
+  AccessCodeTextInput.displayName = "AccessCodeTextInput";
+  return AccessCodeTextInput;
+}(_react.Component);
+exports.AccessCodeTextInput = AccessCodeTextInput;
+var _default = AccessCodeTextInput;
+exports.default = _default;

package/lib/common/components/ImportModal/presenter.js

@@ -19,7 +19,6 @@ var _uiProgress = require("@instructure/ui-progress");
 var _uiHeading = require("@instructure/ui-heading");
 var _uiTabs = require("@instructure/ui-tabs");
 var _uiToggleDetails = require("@instructure/ui-toggle-details");
-var _uiTextInput = require("@instructure/ui-text-input");
 var _emotion = require("@instructure/emotion");
 var _quizCommon = require("@instructure/quiz-common");
 var _styles = _interopRequireDefault(require("./styles.js"));
@@ -200,7 +199,7 @@ var ImportModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _
         "data-automation": "sdk-import-file-selector"
       }), fileType === 'image/*' && (0, _emotion.jsx)("div", {
         css: this.props.styles.altTextWrapper
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
         ref: this.setRef('altTextInput'),
         onChange: this.onAltTextChange,
         value: this.props.altText,

package/lib/common/components/MaskedTextInput/MaskedTextInput.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.whenUnmasked = exports.whenMasked = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+var props = {
+  renderLabel: 'Example of a masked text input',
+  checkboxLabel: 'Select to show the current value',
+  value: 'Is it secret? Is it safe?',
+  onMaskedChange: Function.prototype
+};
+var _default = {
+  title: _index.MaskedTextInput.name
+};
+exports.default = _default;
+var whenMasked = function whenMasked() {
+  return /*#__PURE__*/_react.default.createElement(_index.MaskedTextInput, props);
+};
+exports.whenMasked = whenMasked;
+var whenUnmasked = function whenUnmasked() {
+  return /*#__PURE__*/_react.default.createElement(_index.MaskedTextInput, Object.assign({}, props, {
+    masked: false
+  }));
+};
+exports.whenUnmasked = whenUnmasked;

package/lib/common/components/MaskedTextInput/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MaskedTextInput = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _uiView = require("@instructure/ui-view");
+var _uiCheckbox = require("@instructure/ui-checkbox");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _quizCommon = require("@instructure/quiz-common");
+var maskedTextInputPropTypes = {
+  /**
+   * The label to be used for the checkbox that controls whether the input is masked
+   */
+  checkboxLabel: _propTypes.default.string.isRequired,
+  /**
+   * Whether or not the input text is masked
+   */
+  masked: _propTypes.default.bool,
+  /**
+   * The function to call when the user clicks the checkbox to either mask or unmask the input
+   */
+  onMaskedChange: _propTypes.default.func
+};
+var MaskedTextInput = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MaskedTextInput, _Component);
+  var _super = (0, _createSuper2.default)(MaskedTextInput);
+  function MaskedTextInput() {
+    (0, _classCallCheck2.default)(this, MaskedTextInput);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(MaskedTextInput, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        checkboxLabel = _this$props.checkboxLabel,
+        masked = _this$props.masked,
+        onMaskedChange = _this$props.onMaskedChange,
+        type = _this$props.type;
+      var textInputProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _uiReactUtils.omitProps)(this.props, maskedTextInputPropTypes)), {}, {
+        type: masked ? 'password' : type
+      });
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div"
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.TextInput, textInputProps), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        margin: "small 0"
+      }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+        label: checkboxLabel,
+        checked: !masked,
+        onChange: onMaskedChange
+      })));
+    }
+  }]);
+  MaskedTextInput.displayName = "MaskedTextInput";
+  return MaskedTextInput;
+}(_react.Component);
+exports.MaskedTextInput = MaskedTextInput;
+MaskedTextInput.propTypes = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, maskedTextInputPropTypes), _quizCommon.TextInput.propTypes);
+MaskedTextInput.defaultProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _quizCommon.TextInput.defaultProps), {}, {
+  masked: true,
+  onMaskedChange: Function.prototype
+});
+var _default = MaskedTextInput;
+exports.default = _default;

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

@@ -24,16 +24,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
       overflowY: 'auto'
     }), {}, {
       transition: componentTheme.contentTransition,
-      width: '100%',
-      '.user_content p': {
-        margin: componentTheme.userContentMargin,
-        '&:first-of-type': {
-          marginTop: componentTheme.userContentZeroMargin
-        },
-        '&:last-child': {
-          marginBottom: componentTheme.userContentZeroMargin
-        }
-      }
+      width: '100%'
     })
   };
 };

package/lib/common/components/layout/navbar/externalStyles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateExternalStyle = void 0;
+var generateExternalStyle = function generateExternalStyle() {
+  return {
+    showBrandIcon: true,
+    desktopBottomBorder: true,
+    desktopBottomBorderInverse: true
+  };
+};
+exports.generateExternalStyle = generateExternalStyle;

package/lib/common/components/layout/navbar/styles.js

@@ -1,17 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _externalStyles = require("./externalStyles.js");
 var generateStyle = function generateStyle(componentTheme) {
-  return {
-    showBrandIcon: true,
-    desktopBottomBorder: true,
-    desktopBottomBorderInverse: true,
+  return (0, _objectSpread2.default)({
     backgroundColor: componentTheme.backgroundColor,
     phoneBreakPoint: componentTheme.phoneBreakPoint
-  };
+  }, (0, _externalStyles.generateExternalStyle)());
 };
 var _default = generateStyle;
 exports.default = _default;

package/lib/common/components/layout/sidebar/Sidebar/externalStyles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateExternalStyle = void 0;
+var generateExternalStyle = function generateExternalStyle(componentTheme) {
+  return {
+    sidebar: {
+      borderTop: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      borderRight: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      borderBottom: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      borderLeft: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor)
+    }
+  };
+};
+exports.generateExternalStyle = generateExternalStyle;

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

@@ -7,19 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _externalStyles = require("./externalStyles.js");
 var generateStyle = function generateStyle(componentTheme, props) {
   var _commonContainer;
   var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
   var mp = '@media print';
-  return {
+  return (0, _merge.default)({
     sidebar: (0, _objectSpread3.default)((0, _objectSpread3.default)((0, _defineProperty2.default)({
       boxSizing: 'border-box',
       width: componentTheme.sidebarWidthClosed,
       backgroundColor: componentTheme.sidebarBackgroundColor,
-      borderTop: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
-      borderRight: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
-      borderBottom: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
-      borderLeft: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
       color: componentTheme.sidebarColor,
       height: '100%',
       overflow: 'hidden',
@@ -118,7 +116,7 @@ var generateStyle = function generateStyle(componentTheme, props) {
     }), (0, _defineProperty2.default)(_commonContainer, mp, {
       display: 'none'
     }), _commonContainer)
-  };
+  }, (0, _externalStyles.generateExternalStyle)(componentTheme));
 };
 var _default = generateStyle;
 exports.default = _default;

package/lib/common/components/resources/item/ItemEdit/presenter.js

@@ -15,7 +15,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _OutcomeAlignments = _interopRequireDefault(require("@instructure/outcomes-ui/es/containers/OutcomeAlignments"));
 var _OutcomeCount = _interopRequireDefault(require("@instructure/outcomes-ui/es/containers/OutcomeCount"));
-var _uiFormField = require("@instructure/ui-form-field");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../common/util/CustomPropTypes.js"));
 var _componentForItem = _interopRequireDefault(require("../../../../util/componentForItem.js"));
@@ -24,7 +23,6 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _interactionTypePropsHelper = require("../../../../util/interactionTypePropsHelper.js");
 var _ElementsForSelectors = _interopRequireDefault(require("../../../../../common/util/ElementsForSelectors.js"));
 var _instUIMessages = require("../../../../util/instUIMessages.js");
-var _featureCheck = require("../../../../../common/util/featureCheck.js");
 var ItemEdit = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ItemEdit, _Component);
   var _super = (0, _createSuper2.default)(ItemEdit);
@@ -72,7 +70,7 @@ var ItemEdit = /*#__PURE__*/function (_Component) {
       var launchContextUuid = this.props.scope.launch_context_uuid;
       var launchContextTitle = this.props.scope.title;
       // If editing within a quiz, there is no account launch context
-      if ((0, _featureCheck.featureOn)('sub_account_bank_sharing') && rootAccountName) {
+      if (rootAccountName) {
         launchContexts.push({
           uuid: this.props.rootAccountUuid,
           name: rootAccountName
@@ -136,7 +134,7 @@ var ItemEdit = /*#__PURE__*/function (_Component) {
       var interactionType = item.getInteractionType().slug;
       var Interaction = (0, _componentForItem.default)(interactionType, _quizCommon.COMPONENT_EDIT);
       var propsForInteraction = (0, _interactionTypePropsHelper.propsForInteractionEdit)(this.props, this.additionalEditOptions());
-      return /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
+      return /*#__PURE__*/_react.default.createElement(_quizCommon.FormFieldGroup, {
         messages: this.getError('onSelf'),
         description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit question:')),
         name: "edit_item_".concat(this.props.guid)

package/lib/common/components/resources/quiz/instructions/styles.js

@@ -10,20 +10,19 @@ var generateStyle = function generateStyle(componentTheme) {
       position: 'relative',
       width: '100%',
       boxSizing: 'border-box',
-      paddingLeft: componentTheme.wrapperPadding,
-      paddingRight: componentTheme.wrapperPadding,
+      padding: "0 ".concat(componentTheme.wrapperPadding, " ").concat(componentTheme.wrapperPadding),
       '&::after': {
         clear: 'both',
         content: '""',
         display: 'table'
       },
       '.user_content p': {
-        margin: componentTheme.userContentMargin,
+        margin: "".concat(componentTheme.userContentMargin, " 0"),
         '&:first-of-type': {
-          marginTop: componentTheme.userContentZeroMargin
+          margin: "0 0 ".concat(componentTheme.userContentMargin)
         },
         '&:last-child': {
-          marginBottom: componentTheme.userContentMargin
+          margin: "".concat(componentTheme.userContentMargin, " 0 0")
         }
       }
     },

package/lib/common/components/resources/quiz/instructions/theme.js

@@ -10,8 +10,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     wrapperPadding: spacing.large,
     textFontSize: typography.fontSizeMedium,
-    userContentMargin: spacing.mediumSmall,
-    userContentZeroMargin: 0
+    userContentMargin: spacing.mediumSmall
   };
 };
 var _default = generateComponentTheme;

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

@@ -13,13 +13,10 @@ var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _uiA11yContent = require("@instructure/ui-a11y-content");
-var _uiTextInput = require("@instructure/ui-text-input");
-var _uiFormField = require("@instructure/ui-form-field");
 var _emotion = require("@instructure/emotion");
 var _uiHeading = require("@instructure/ui-heading");
 var _quizRce = require("@instructure/quiz-rce");
 var _instUIMessages = require("../../../../util/instUIMessages.js");
-var _uiSimpleSelect = require("@instructure/ui-simple-select");
 var _uiIcons = require("@instructure/ui-icons");
 var _uiToggleDetails = require("@instructure/ui-toggle-details");
 var _quizCommon = require("@instructure/quiz-common");
@@ -85,18 +82,18 @@ var StimulusEditInfo = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defau
       var stimulusOrientation = this.props.workingStimulus.get('orientation');
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
+      }, (0, _emotion.jsx)(_quizCommon.SimpleSelect, {
         renderLabel: (0, _formatMessage.default)('Orientation'),
         onChange: this.onOrientationChange,
         value: stimulusOrientation,
         renderBeforeInput: (0, _emotion.jsx)(_uiIcons.IconUpdownLine, {
           rotate: stimulusOrientation === _quizCommon.TOP ? '0' : '90'
         })
-      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
+      }, (0, _emotion.jsx)(_quizCommon.SimpleSelect.Option, {
         renderBeforeLabel: _ref3,
         id: "stimulus-orientation-select-option-left",
         value: "left"
-      }, (0, _formatMessage.default)('Questions to the right')), (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
+      }, (0, _formatMessage.default)('Questions to the right')), (0, _emotion.jsx)(_quizCommon.SimpleSelect.Option, {
         renderBeforeLabel: _ref4,
         id: "stimulus-orientation-select-option-top",
         value: "top"
@@ -108,7 +105,7 @@ var StimulusEditInfo = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defau
       var stimulus = this.props.workingStimulus;
       var textAreaId = "stimulusBodyEdit_".concat(stimulus.id, "_").concat(this.props.isBankedContent);
       var stimulusBodyId = "stimulusBodyEdit_".concat(stimulus.id, "_body");
-      return (0, _emotion.jsx)(_uiFormField.FormFieldGroup, {
+      return (0, _emotion.jsx)(_quizCommon.FormFieldGroup, {
         messages: this.inputErrors('onSelf'),
         description: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit Stimulus'))
       }, (0, _emotion.jsx)(_uiHeading.Heading, {
@@ -116,9 +113,10 @@ var StimulusEditInfo = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defau
         as: "h2"
       }, this.headerText()), (0, _emotion.jsx)("div", {
         css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
         messages: this.inputErrors('title'),
         renderLabel: (0, _formatMessage.default)('Title'),
+        isRequired: true,
         type: "text",
         ref: this.props.setTitleRef,
         onChange: this.onTextInputChange('title'),
@@ -126,7 +124,7 @@ var StimulusEditInfo = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defau
         "data-automation": "sdk-stimulus-title-input"
       })), (0, _emotion.jsx)("div", {
         css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
         renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Instructions')),
         type: "text",
         onChange: this.onTextInputChange('instructions'),
@@ -134,14 +132,13 @@ var StimulusEditInfo = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defau
         "data-automation": "sdk-stimulus-instructions-input"
       })), (0, _emotion.jsx)("div", {
         css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiFormField.FormField, {
-        id: stimulusBodyId,
-        label: (0, _formatMessage.default)('Content')
+      }, (0, _emotion.jsx)(_quizCommon.FormField, {
+        id: stimulusBodyId
       }, (0, _emotion.jsx)(_quizRce.RichContentInput, {
         actsAsInput: true,
-        label: "",
+        label: (0, _formatMessage.default)('Content'),
+        isRequired: true,
         messages: this.inputErrors('body'),
-        placeholder: (0, _formatMessage.default)('Add Stimulus Content...'),
         textareaId: textAreaId,
         defaultContent: stimulus.get('body'),
         onKeyUp: this.onBodyChange,
@@ -157,7 +154,7 @@ var StimulusEditInfo = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defau
         summary: (0, _formatMessage.default)('Options')
       }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, (0, _emotion.jsx)("div", {
         css: this.props.styles.section
-      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
         renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Source URL'), (0, _formatMessage.default)('(optional - not visible to students)')),
         type: "text",
         onChange: this.onTextInputChange('sourceUrl'),