@instructure/quiz-core 17.19.2-rc.4 → 17.19.3-rc.1

package/lib/building/components/resources/quiz/instructions/Instructions/Instructions.examples.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _immutable = require("immutable");
+
+var _Quiz = _interopRequireDefault(require("../../../../../../common/records/Quiz.js"));
+
+var _default = {
+  propValues: {
+    isEditing: [true, false]
+  },
+  getComponentProps: function getComponentProps(props) {
+    return {
+      changeQuizInstructions: Function.prototype,
+      clearModifications: Function.prototype,
+      quiz: new _Quiz.default((0, _immutable.fromJS)({
+        id: 1,
+        instructions: 'These are some instructions'
+      })),
+      saveQuizChange: Function.prototype,
+      screenreaderNotification: Function.prototype,
+      scrollKey: 'scrollKey',
+      switchOffEditing: Function.prototype,
+      switchOnEditing: Function.prototype
+    };
+  }
+};
+exports.default = _default;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QuizInstructions = void 0;
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../../../../common/react-redux.js");
+
+var _alerts = require("../../../../../../common/actions/alerts.js");
+
+var _modifications = require("../../../../../../common/actions/modifications.js");
+
+var _quizzes = require("../../../../../api/quizzes.js");
+
+var _makeEditable = _interopRequireDefault(require("../../../../../../common/components/shared/functionality/makeEditable.js"));
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+function mapStateToProps(state) {
+  return {
+    errorsShowing: state.get('errorsShowing')
+  };
+}
+
+var mapDispatchToProps = {
+  changeQuizInstructions: _modifications.changeQuizInstructions,
+  clearModifications: _modifications.clearModifications,
+  saveQuizChange: _quizzes.saveQuizChange,
+  screenreaderNotification: _alerts.screenreaderNotification
+};
+var QuizInstructions = (0, _redux.compose)(_makeEditable.default, (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps))(_presenter.default);
+exports.QuizInstructions = QuizInstructions;
+var _default = QuizInstructions;
+exports.default = _default;

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

@@ -0,0 +1,223 @@
+"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.QuizInstructions = 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 _uiHeading = require("@instructure/ui-heading");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../Edit/index.js"));
+
+var _index2 = _interopRequireDefault(require("../Show/index.js"));
+
+var _EditButton = _interopRequireDefault(require("../../editButton/EditButton.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fFmWj',
+  template: function template(theme) {
+    return "\n\n.fFmWj_qYhL{display:flex;justify-content:space-between}\n\n.fFmWj_blJt{color:".concat(theme.labelColor || 'inherit', ";font-size:").concat(theme.labelFontSize || 'inherit', ";padding:").concat(theme.labelPadding || 'inherit', ";padding-bottom:").concat(theme.labelBottomPadding || 'inherit', ";padding-left:").concat(theme.labelLeftPadding || 'inherit', "}\n\n.fFmWj_UraS{align-self:flex-end;margin-right:").concat(theme.editButtonWrapperRightMargin || 'inherit', "}\n\n@media print{.fFmWj_qYhL{display:none}}");
+  },
+  'topRow': 'fFmWj_qYhL',
+  'label': 'fFmWj_blJt',
+  'editButtonWrapper': 'fFmWj_UraS'
+};
+// ======================================
+// renders the editable quiz instructions
+// input/display component
+// ======================================
+var QuizInstructions = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizInstructions, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizInstructions);
+
+  function QuizInstructions() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizInstructions);
+
+    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.workingInstructions = function () {
+      return _this.props.quiz.getWorkingInstance().instructions || '';
+    };
+
+    _this.updateWorkingInstructions = function (event, _ref) {
+      var editorContent = _ref.editorContent;
+
+      _this.props.changeQuizInstructions(_this.quizID(), editorContent);
+    };
+
+    _this.saveAndPreview = function () {
+      _this.saveWorkingInstructions();
+
+      _this.endEditing();
+    };
+
+    _this.endEditing = function () {
+      _this.props.switchOffEditing();
+
+      _this.props.clearModifications('quizzes', _this.quizID(), ['instructions']);
+    };
+
+    _this.toggleEditing = function () {
+      var msg;
+
+      if (_this.props.isEditing) {
+        msg = (0, _formatMessage.default)('Instructions edit mode off.');
+
+        _this.props.screenreaderNotification(msg);
+
+        _this.saveAndPreview();
+      } else {
+        msg = (0, _formatMessage.default)('Instructions switched to edit mode. Navigate down to access text editor.');
+
+        _this.props.screenreaderNotification(msg);
+
+        _this.props.switchOnEditing();
+      }
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuizInstructions, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
+      // Only focus if we switch from edit mode to show mode
+      if (prevProps.isEditing && !this.props.isEditing) {
+        // use setTimeout to break away from RCE destruction that loses focus
+        setTimeout(function () {
+          _this2.editButton.getWrappedInstance().setFocus();
+        }, 50);
+      }
+    } // ===========
+    //   helpers
+    // ===========
+
+  }, {
+    key: "quizID",
+    value: function quizID() {
+      return this.props.quiz.id;
+    }
+  }, {
+    key: "saveWorkingInstructions",
+    value: function saveWorkingInstructions() {
+      this.props.saveQuizChange(this.props.quiz.getWorkingInstance(), this.props.quiz);
+    }
+  }, {
+    key: "setRef",
+    value: function setRef(key) {
+      var _this3 = this;
+
+      return function (node) {
+        _this3[key] = node;
+      };
+    } // ===============
+    //    RENDERING
+    // ===============
+
+  }, {
+    key: "editingRender",
+    value: function editingRender() {
+      if (!this.props.isEditing) {
+        return;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        endEditing: this.endEditing,
+        inputValue: this.workingInstructions(),
+        onInputChange: this.updateWorkingInstructions,
+        ref: this.setRef('instructionsEdit'),
+        saveAndPreview: this.saveAndPreview,
+        quizId: this.props.quiz.id
+      });
+    }
+  }, {
+    key: "showRender",
+    value: function showRender() {
+      if (this.props.isEditing) {
+        return;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+        ref: this.setRef('instructionsPreview'),
+        instructions: this.props.quiz.instructions,
+        switchOnEditing: this.props.switchOnEditing
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        tabIndex: "-1"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.topRow
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.label
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h4",
+        as: "h2"
+      }, (0, _formatMessage.default)('Instructions'))), !this.props.isEditing && /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.editButtonWrapper
+      }, /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+        screenreaderText: (0, _formatMessage.default)('Edit Instructions'),
+        scrollKey: this.props.scrollKey,
+        onClick: this.toggleEditing,
+        ref: this.setRef('editButton')
+      }))), this.editingRender(), this.showRender());
+    }
+  }]);
+  QuizInstructions.displayName = "QuizInstructions";
+  return QuizInstructions;
+}(_react.Component), _class2.propTypes = {
+  changeQuizInstructions: _propTypes.default.func.isRequired,
+  clearModifications: _propTypes.default.func.isRequired,
+  isEditing: _propTypes.default.bool.isRequired,
+  // Injected by makeEditable
+  quiz: _reactImmutableProptypes.default.record.isRequired,
+  saveQuizChange: _propTypes.default.func.isRequired,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  scrollKey: _propTypes.default.string,
+  switchOffEditing: _propTypes.default.func.isRequired,
+  // Injected by makeEditable
+  switchOnEditing: _propTypes.default.func.isRequired // Injected by makeEditable
+
+}, _class2.defaultProps = {
+  scrollKey: void 0
+}, _temp)) || _class);
+exports.QuizInstructions = QuizInstructions;
+var _default = QuizInstructions;
+exports.default = _default;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      typography = _ref.typography;
+  return {
+    labelPadding: spacing.small,
+    labelLeftPadding: spacing.large,
+    labelBottomPadding: spacing.xxSmall,
+    labelFontSize: typography.fontSizeSmall,
+    labelColor: colors.slate,
+    editButtonWrapperRightMargin: spacing.large
+  };
+}

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

@@ -0,0 +1,97 @@
+"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.QuizInstructionsShow = 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 _uiThemeable = require("@instructure/ui-themeable");
+
+var _quizRce = require("@instructure/quiz-rce");
+
+var _Overlay = _interopRequireDefault(require("../../../../../../common/components/shared/overlay/Overlay.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cCwUt',
+  template: function template(theme) {
+    return "\n\n.cCwUt_edzr{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:4rem;padding:".concat(theme.instructionsShowWrapperPadding || 'inherit', ";position:relative;width:100%}\n\n.cCwUt_espM{font-size:").concat(theme.instructionsShowTextFontSize || 'inherit', ";overflow:hidden;white-space:normal}");
+  },
+  'instructionsShowWrapper': 'cCwUt_edzr',
+  'instructionsShowText': 'cCwUt_espM'
+};
+// ==========================================
+// this component shows the quiz instructions
+// has events that allow for toggling
+// editing and hover which shows an overlay
+// ==========================================
+var QuizInstructionsShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizInstructionsShow, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizInstructionsShow);
+
+  function QuizInstructionsShow() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizInstructionsShow);
+
+    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.switchOnEditing = function () {
+      _this.props.switchOnEditing();
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuizInstructionsShow, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        "data-automation": "sdk-quiz-instructions-show-wrapper"
+      }, /*#__PURE__*/_react.default.createElement(_Overlay.default, {
+        wrapperClassName: styles.instructionsShowWrapper,
+        onClick: this.switchOnEditing,
+        tabIndex: "-1"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        "data-automation": "instructions-show-text"
+      }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+        customStyles: styles.instructionsShowText,
+        content: this.props.instructions || (0, _formatMessage.default)('Add Instructions...')
+      }))));
+    }
+  }]);
+  QuizInstructionsShow.displayName = "QuizInstructionsShow";
+  return QuizInstructionsShow;
+}(_react.Component), _class2.propTypes = {
+  instructions: _propTypes.default.string.isRequired,
+  switchOnEditing: _propTypes.default.func.isRequired
+}, _temp)) || _class);
+exports.QuizInstructionsShow = QuizInstructionsShow;
+var _default = QuizInstructionsShow;
+exports.default = _default;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      typography = _ref.typography;
+  return {
+    instructionsShowWrapperPadding: spacing.large,
+    instructionsShowTextFontSize: typography.fontSizeMedium
+  };
+}

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

@@ -0,0 +1,214 @@
+"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.TitleEdit = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _defer = _interopRequireDefault(require("lodash/defer"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _Errors = _interopRequireDefault(require("../../../../../../common/components/shared/errors/Errors.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cgmZU',
+  template: function template(theme) {
+    return "\n\n.cgmZU_eqoe{border-bottom:solid;border-color:".concat(theme.titleEditWrapperBorderColor || 'inherit', ";border-width:").concat(theme.titleEditWrapperBorderWidth || 'inherit', ";box-sizing:border-box;display:flex;flex-direction:column;height:5rem;justify-content:center;padding-left:").concat(theme.titleEditWrapperLeftPadding || 'inherit', ";position:relative;width:100%}\n\n.cgmZU_dwFS{font-family:").concat(theme.titleEditInputFontFamily || 'inherit', ";font-size:").concat(theme.titleEditInputFontSize || 'inherit', ";width:80%}\n\n.cgmZU_dRxD,.cgmZU_dvSU{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;width:100%}\n\n.cgmZU_xXob{border:solid 1px ").concat(theme.errorBorderColor || 'inherit', ";border-radius:").concat(theme.errorBorderBorderRadius || 'inherit', ";margin:").concat(theme.errorBorderMargin || 'inherit', ";padding:").concat(theme.errorBorderPadding || 'inherit', "}");
+  },
+  'titleEditWrapper': 'cgmZU_eqoe',
+  'titleEditInput': 'cgmZU_dwFS',
+  'errorsWrapper': 'cgmZU_dRxD',
+  'inputWrapper': 'cgmZU_dvSU',
+  'errorBorder': 'cgmZU_xXob'
+};
+// =================================
+// once editing is toggled this div
+// is rendered & has actions that
+// allow for canceling
+// =================================
+var TitleEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(TitleEdit, _Component);
+
+  var _super = (0, _createSuper2.default)(TitleEdit);
+
+  function TitleEdit() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, TitleEdit);
+
+    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.defer = function (fn) {
+      // to enable syncronous testing
+      var deferFn = _this.props.deferMock || _defer.default;
+      deferFn(fn);
+    };
+
+    _this.switchOffEditing = function () {
+      var fromEnterPressed = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+
+      _this.ifValidElseError(function () {
+        _this.defer(function () {
+          if (fromEnterPressed) {
+            _this.props.saveAndPreview(fromEnterPressed);
+          } else {
+            // make sure they have actually left the component
+            if (document.activeElement !== _this.cancelButton && document.activeElement !== _this.input) {
+              _this.props.saveAndPreview();
+            }
+          }
+        });
+      });
+    };
+
+    _this.handleKeyUp = function (e) {
+      if (_this.enterPressed && e.keyCode === 13) {
+        return _this.switchOffEditing(true);
+      }
+    };
+
+    _this.handleKeyDown = function (e) {
+      if (!e.repeat && e.keyCode === 13) {
+        _this.enterPressed = true;
+      }
+    };
+
+    _this.handleBlur = function (e) {
+      _this.switchOffEditing(false);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(TitleEdit, [{
+    key: "componentDidMount",
+    // todo: extract this into a shared method
+    // to be used on many components
+    value: function componentDidMount() {
+      var input = _reactDom.default.findDOMNode(this.input); // some browsers add chars so * 2 to ensure at end
+
+
+      var valLength = input.value.length * 2;
+      input.focus();
+      input.setSelectionRange(valLength, valLength);
+    }
+  }, {
+    key: "ifValidElseError",
+    value: function ifValidElseError(cb) {
+      if (this.props.isValid) {
+        this.props.hideError();
+        cb();
+      } else {
+        this.props.showError();
+      }
+    }
+  }, {
+    key: "setRef",
+    value: function setRef(key) {
+      var _this2 = this;
+
+      return function (node) {
+        _this2[key] = node;
+      };
+    }
+  }, {
+    key: "hasErrors",
+    value: function hasErrors() {
+      return this.props.errorsAreShowing && this.props.errors.size > 0;
+    }
+  }, {
+    key: "renderErrors",
+    value: function renderErrors() {
+      if (this.hasErrors()) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.errorsWrapper
+        }, /*#__PURE__*/_react.default.createElement(_Errors.default, {
+          errorList: this.props.errors
+        }));
+      }
+    }
+  }, {
+    key: "inputClasses",
+    value: function inputClasses() {
+      var _classNames;
+
+      return (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.titleEditInput, true), (0, _defineProperty2.default)(_classNames, styles.errorBorder, this.hasErrors()), _classNames));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.setRef('wrapper'),
+        className: styles.titleEditWrapper,
+        onBlur: this.handleBlur,
+        "data-automation": "sdk-quiz-title-edit-wrapper"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.inputWrapper
+      }, /*#__PURE__*/_react.default.createElement("input", {
+        ref: this.setRef('input'),
+        type: "text",
+        "aria-label": (0, _formatMessage.default)('title'),
+        placeholder: (0, _formatMessage.default)('Add a Title...'),
+        value: this.props.value,
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
+        onChange: this.props.onInputChange,
+        className: this.inputClasses(),
+        "data-automation": "sdk-quiz-title-edit"
+      })), this.renderErrors());
+    }
+  }]);
+  TitleEdit.displayName = "TitleEdit";
+  return TitleEdit;
+}(_react.Component), _class2.propTypes = {
+  value: _propTypes.default.string.isRequired,
+  isValid: _propTypes.default.bool.isRequired,
+  showError: _propTypes.default.func.isRequired,
+  hideError: _propTypes.default.func.isRequired,
+  errors: _reactImmutableProptypes.default.list.isRequired,
+  errorsAreShowing: _propTypes.default.bool,
+  onInputChange: _propTypes.default.func.isRequired,
+  saveAndPreview: _propTypes.default.func.isRequired,
+  deferMock: _propTypes.default.func
+}, _class2.defaultProps = {
+  errorsAreShowing: false,
+  deferMock: _defer.default
+}, _temp)) || _class);
+exports.TitleEdit = TitleEdit;
+var _default = TitleEdit;
+exports.default = _default;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      typography = _ref.typography,
+      borders = _ref.borders;
+  return {
+    titleEditWrapperBorderWidth: borders.widthSmall,
+    titleEditWrapperBorderColor: colors.ash,
+    titleEditWrapperLeftPadding: spacing.large,
+    titleEditInputFontFamily: typography.fontFamily,
+    titleEditInputFontSize: typography.fontSizeXLarge,
+    errorBorderMargin: spacing.xxSmall,
+    errorBorderPadding: spacing.xxSmall,
+    errorBorderColor: colors.crimson,
+    errorBorderBorderRadius: borders.radiusSmall
+  };
+}