@instructure/quiz-core 17.19.2 → 17.20.0

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

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ItemFeedbackModal = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _quizRce = require("@instructure/quiz-rce");
+
+var _index = _interopRequireDefault(require("../../../../common/components/RichContentInput/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'esPWW',
+  template: function template(theme) {
+    return "\n\n.esPWW_hRNi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.esPWW_eCKf{font-size:".concat(theme.feedbackLabelFontSize || 'inherit', "}");
+  },
+  'itemStem': 'esPWW_hRNi',
+  'feedbackLabel': 'esPWW_eCKf'
+};
+
+var _ref2 = /*#__PURE__*/_react.default.createElement("br", null);
+
+var ItemFeedbackModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ItemFeedbackModal, _Component);
+
+  var _super = (0, _createSuper2.default)(ItemFeedbackModal);
+
+  function ItemFeedbackModal() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ItemFeedbackModal);
+
+    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.onFeedbackChange = function (e, _ref) {
+      var editorContent = _ref.editorContent;
+      var key = e.target.id;
+
+      var newFeedback = _this.props.feedback.set(key, editorContent);
+
+      _this.props.setUi(_quizCommon.ITEM_FEEDBACK_MODAL_FEEDBACK, newFeedback);
+    };
+
+    _this.continueAction = function () {
+      _this.props.changeItemFeedback(_this.props.item.id, _this.props.feedback);
+
+      _this.closeAction();
+    };
+
+    _this.closeAction = function () {
+      _this.props.modalTrigger && _this.props.modalTrigger.focus();
+
+      _this.props.closeModal();
+    };
+
+    _this.returnToFeedback = function () {
+      _this.props.openModal(_quizCommon.ITEM_FEEDBACK_MODAL, {
+        modalTrigger: _this.props.modalTrigger
+      });
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ItemFeedbackModal, [{
+    key: "cancelButton",
+    value: function cancelButton() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: this.closeAction,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN
+      }, (0, _formatMessage.default)('Cancel'));
+    }
+  }, {
+    key: "doneButton",
+    value: function doneButton() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "primary",
+        onClick: this.continueAction,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN
+      }, (0, _formatMessage.default)('Done'));
+    }
+  }, {
+    key: "renderRichContentInput",
+    value: function renderRichContentInput(key, label) {
+      return /*#__PURE__*/_react.default.createElement("div", null, _ref2, /*#__PURE__*/_react.default.createElement("label", {
+        className: styles.feedbackLabel,
+        htmlFor: key
+      }, label), /*#__PURE__*/_react.default.createElement(_index.default, {
+        label: "",
+        textareaId: key,
+        defaultContent: this.props.feedback.get(key),
+        onChange: this.onFeedbackChange,
+        parentType: this.props.parentType,
+        parentId: this.props.parentId,
+        importModalCloseOverride: this.returnToFeedback
+      }));
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+        customStyles: styles.itemStem,
+        content: this.props.item.itemBody
+      }), this.renderRichContentInput('correct', (0, _formatMessage.default)('For a correct answer')), this.renderRichContentInput('incorrect', (0, _formatMessage.default)('For an incorrect answer')), this.renderRichContentInput('neutral', (0, _formatMessage.default)('Provide general feedback (regardless of answer)')));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+        open: this.props.modalOpen || this.props.importModalOpen,
+        onClose: this.closeAction,
+        size: "large",
+        label: (0, _formatMessage.default)('Student Feedback'),
+        shouldCloseOnDocumentClick: false // must be false to allow interacting with RCE modals (such as embed media)
+        ,
+        shouldReturnFocus: false
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "reset",
+        as: "h2"
+      }, (0, _formatMessage.default)('Student Feedback')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        onClick: this.closeAction,
+        placement: "end",
+        offset: "medium",
+        screenReaderLabel: (0, _formatMessage.default)('Close')
+      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.cancelButton(), this.doneButton())));
+    }
+  }]);
+  ItemFeedbackModal.displayName = "ItemFeedbackModal";
+  return ItemFeedbackModal;
+}(_react.Component), _class2.propTypes = {
+  changeItemFeedback: _propTypes.default.func.isRequired,
+  closeModal: _propTypes.default.func.isRequired,
+  feedback: _reactImmutableProptypes.default.map.isRequired,
+  importModalOpen: _propTypes.default.bool.isRequired,
+  item: _reactImmutableProptypes.default.record.isRequired,
+  modalOpen: _propTypes.default.bool.isRequired,
+  openModal: _propTypes.default.func.isRequired,
+  parentId: _propTypes.default.string.isRequired,
+  parentType: _propTypes.default.string.isRequired,
+  setUi: _propTypes.default.func.isRequired,
+  modalTrigger: _propTypes.default.instanceOf(_react.Component)
+}, _class2.defaultProps = {
+  modalTrigger: null
+}, _temp)) || _class);
+exports.ItemFeedbackModal = ItemFeedbackModal;
+var _default = ItemFeedbackModal;
+exports.default = _default;

package/lib/building/components/resources/ItemFeedbackModal/theme.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var typography = _ref.typography;
+  return {
+    feedbackLabelFontSize: typography.fontSizeSmall
+  };
+}

package/lib/building/components/resources/MoveImmutableModal/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MoveImmutableModal = void 0;
+
+var _immutable = require("immutable");
+
+var _reactRedux = require("../../../../common/react-redux.js");
+
+var _modal = require("../../../../common/actions/modal.js");
+
+var _ui = require("../../../../common/actions/ui.js");
+
+var _QuizEntry = _interopRequireDefault(require("../../../../common/records/QuizEntry.js"));
+
+var _quizEntries = require("../../../api/quizEntries.js");
+
+var _presenter = require("./presenter.js");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+function mapStateToProps(state, props) {
+  var _state$getIn$toObject = state.getIn(['ui', _quizCommon.MOVE_IMMUTABLE_DATA], (0, _immutable.Map)()).toObject(),
+      movedInSidebar = _state$getIn$toObject.movedInSidebar,
+      quizId = _state$getIn$toObject.quizId,
+      position = _state$getIn$toObject.position,
+      stimulusQuizEntryId = _state$getIn$toObject.stimulusQuizEntryId,
+      quizEntryId = _state$getIn$toObject.quizEntryId;
+
+  var quizEntry = _QuizEntry.default.create(state.getIn(['quizEntries', quizEntryId]));
+
+  return {
+    modalOpen: state.getIn(['modal', 'isOpen']) === _quizCommon.MOVE_IMMUTABLE_MODAL,
+    movedInSidebar: movedInSidebar,
+    quizId: quizId,
+    position: position,
+    stimulusQuizEntryId: stimulusQuizEntryId,
+    quizEntry: quizEntry
+  };
+}
+
+var mapDispatchToProps = {
+  closeModal: _modal.closeModal,
+  moveImmutableQuizEntry: _quizEntries.moveImmutableQuizEntry,
+  setUI: _ui.set
+};
+var MoveImmutableModal = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.MoveImmutableModal);
+exports.MoveImmutableModal = MoveImmutableModal;
+var _default = MoveImmutableModal;
+exports.default = _default;

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

@@ -0,0 +1,140 @@
+"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.MoveImmutableModal = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var MoveImmutableModal = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MoveImmutableModal, _Component);
+
+  var _super = (0, _createSuper2.default)(MoveImmutableModal);
+
+  function MoveImmutableModal() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, MoveImmutableModal);
+
+    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.handleSubmit = function (e) {
+      var _this$props = _this.props,
+          quizId = _this$props.quizId,
+          position = _this$props.position,
+          stimulusQuizEntryId = _this$props.stimulusQuizEntryId,
+          quizEntry = _this$props.quizEntry;
+
+      _this.props.closeModal();
+
+      _this.props.setUI(_quizCommon.MOVED_IN_SIDEBAR, _this.props.movedInSidebar);
+
+      _this.props.moveImmutableQuizEntry(quizId, position, stimulusQuizEntryId, quizEntry.id);
+    };
+
+    _this.closeAction = function () {
+      _this.props.closeModal();
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(MoveImmutableModal, [{
+    key: "cancelButton",
+    value: function cancelButton() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: this.closeAction,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN
+      }, (0, _formatMessage.default)('Cancel'));
+    }
+  }, {
+    key: "doneButton",
+    value: function doneButton() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "primary",
+        onClick: this.handleSubmit,
+        margin: _quizCommon.XSMALL_SIDE_MARGIN
+      }, (0, _formatMessage.default)('Clone and Move'));
+    }
+  }, {
+    key: "renderBody",
+    value: function renderBody() {
+      return /*#__PURE__*/_react.default.createElement("div", null, (0, _formatMessage.default)('Moving to this position will clone the question and change ' + 'its associated stimulus as students have already begun to answer it.'));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+        open: this.props.modalOpen,
+        onDismiss: this.closeAction,
+        size: "small",
+        label: (0, _formatMessage.default)('Confirm Clone and Move')
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "reset",
+        as: "h2"
+      }, (0, _formatMessage.default)('Confirm Clone and Move')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        onClick: this.closeAction,
+        placement: "end",
+        offset: "medium",
+        screenReaderLabel: (0, _formatMessage.default)('Close')
+      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary"
+      }, this.renderBody())), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.cancelButton(), this.doneButton()));
+    }
+  }]);
+  MoveImmutableModal.displayName = "MoveImmutableModal";
+  return MoveImmutableModal;
+}(_react.Component);
+
+exports.MoveImmutableModal = MoveImmutableModal;
+MoveImmutableModal.propTypes = {
+  closeModal: _propTypes.default.func.isRequired,
+  modalOpen: _propTypes.default.bool.isRequired,
+  moveImmutableQuizEntry: _propTypes.default.func.isRequired,
+  movedInSidebar: _propTypes.default.bool,
+  position: _propTypes.default.number,
+  quizEntry: _reactImmutableProptypes.default.record,
+  quizId: _propTypes.default.string,
+  setUI: _propTypes.default.func.isRequired,
+  stimulusQuizEntryId: _propTypes.default.string
+};
+MoveImmutableModal.defaultProps = {
+  movedInSidebar: false,
+  position: void 0,
+  quizEntry: void 0,
+  quizId: void 0,
+  stimulusQuizEntryId: void 0
+};
+var _default = MoveImmutableModal;
+exports.default = _default;

package/lib/building/components/resources/quiz/editButton/EditButton.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _makeScrollable = _interopRequireDefault(require("../../../../../common/components/shared/functionality/makeScrollable.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiReactUtils = require("@instructure/ui-react-utils");
+
+var EditButton = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(EditButton, _Component);
+
+  var _super = (0, _createSuper2.default)(EditButton);
+
+  function EditButton() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, EditButton);
+
+    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.focus = function () {
+      _this.button.focus();
+    };
+
+    _this.handleButtonRef = function (node) {
+      return _this.button = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(EditButton, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, Object.assign({
+        ref: this.handleButtonRef,
+        variant: "icon",
+        size: "small",
+        icon: _uiIcons.IconEditLine,
+        onClick: this.props.onClick
+      }, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes)), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.screenreaderText));
+    }
+  }]);
+  EditButton.displayName = "EditButton";
+  return EditButton;
+}(_react.Component);
+
+EditButton.propTypes = {
+  onClick: _propTypes.default.func.isRequired,
+  screenreaderText: _propTypes.default.string
+};
+EditButton.defaultProps = {
+  screenreaderText: (0, _formatMessage.default)('Edit')
+};
+
+var _default = (0, _makeScrollable.default)(EditButton);
+
+exports.default = _default;

package/lib/building/components/resources/quiz/instructions/Edit/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactRedux = require("../../../../../../common/react-redux.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+function mapStateToProps(state, props) {
+  return {
+    appContainer: state.getIn(['ui', 'appContainer'])
+  };
+}
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_presenter.default);
+
+exports.default = _default;

package/lib/building/components/resources/quiz/instructions/Edit/presenter.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index = _interopRequireDefault(require("../../../../../../common/components/RichContentInput/index.js"));
+
+var _componentWithOutsideClick = _interopRequireDefault(require("../../../../../../common/components/shared/functionality/componentWithOutsideClick.js"));
+
+var _CustomPropTypes = _interopRequireDefault(require("../../../../../../common/util/CustomPropTypes.js"));
+
+var _ElementsForSelectors = _interopRequireDefault(require("../../../../../../common/util/ElementsForSelectors.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'evnrd',
+  template: function template(theme) {
+    return "\n\n.evnrd_dCmx{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:4rem;padding:".concat(theme.instructionsEditWrapperPadding || 'inherit', ";position:relative;width:100%}\n\n.evnrd_cjWK{display:flex;justify-content:flex-end;margin-top:").concat(theme.footerTopMargin || 'inherit', "}");
+  },
+  'instructionsEditWrapper': 'evnrd_dCmx',
+  'footer': 'evnrd_cjWK'
+};
+// ===================================
+// once editing is toggled this div
+// is rendered & has actions that
+// allow for canceling
+// ===================================
+var QuizInstructionsEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizInstructionsEdit, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizInstructionsEdit);
+
+  function QuizInstructionsEdit() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizInstructionsEdit);
+
+    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.handleRef = function (node) {
+      _this.rce = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuizInstructionsEdit, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.rce.getWrappedInstance().focus();
+    } // enabled by wrapWithOutsideClick
+
+  }, {
+    key: "clickedOutside",
+    value: function clickedOutside() {
+      this.props.saveAndPreview();
+    } // enabled by wrapWithOutsideClick
+
+  }, {
+    key: "ignoreClickOutsideIf",
+    value: function ignoreClickOutsideIf(e) {
+      var appNodes = (0, _ElementsForSelectors.default)(this.props.appContainer);
+      return appNodes.every(function (node) {
+        return node && !node.contains(e.target);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.instructionsEditWrapper
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        noParagraphMargins: true,
+        label: "",
+        ref: this.handleRef,
+        textareaId: _quizCommon.INSTRUCTIONS_EDIT_ID,
+        wrapperClassName: styles.instructionsEdit,
+        textareaClassName: styles.instructionsEditInput,
+        defaultContent: this.props.inputValue,
+        onKeyUp: this.props.onInputChange,
+        onChange: this.props.onInputChange,
+        parentType: _quizCommon.PARENT_TYPE_QUIZ,
+        parentId: this.props.quizId
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.footer
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        margin: "0 x-small",
+        onClick: this.props.endEditing
+      }, (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        variant: "primary",
+        onClick: this.props.saveAndPreview,
+        "data-automation": "instructions-done"
+      }, (0, _formatMessage.default)('Done'))));
+    }
+  }]);
+  QuizInstructionsEdit.displayName = "QuizInstructionsEdit";
+  return QuizInstructionsEdit;
+}(_react.Component), _class2.propTypes = {
+  endEditing: _propTypes.default.func.isRequired,
+  inputValue: _propTypes.default.string.isRequired,
+  onInputChange: _propTypes.default.func.isRequired,
+  quizId: _propTypes.default.string.isRequired,
+  saveAndPreview: _propTypes.default.func.isRequired,
+  appContainer: _CustomPropTypes.default.selectors.isRequired
+}, _temp)) || _class);
+
+var _default = (0, _componentWithOutsideClick.default)(QuizInstructionsEdit);
+
+exports.default = _default;

package/lib/building/components/resources/quiz/instructions/Edit/theme.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    instructionsEditWrapperPadding: spacing.large,
+    footerTopMargin: spacing.medium
+  };
+}