@instructure/quiz-core 17.19.2 → 17.20.0

package/lib/building/components/resources/quiz/title/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.QuizTitleShow = 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 _uiTruncateText = require("@instructure/ui-truncate-text");
+
+var _uiText = require("@instructure/ui-text");
+
+var _Overlay = _interopRequireDefault(require("../../../../../../common/components/shared/overlay/Overlay.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'eDyPC',
+  template: function template(theme) {
+    return "\n\n.eDyPC_VGME{border-bottom:".concat(theme.titleShowWrapperBottomBorder || 'inherit', ";box-sizing:border-box;display:flex;flex-direction:column;height:5rem;justify-content:center;padding-left:").concat(theme.titleShowWrapperLeftPadding || 'inherit', ";position:relative;width:100%}");
+  },
+  'titleShowWrapper': 'eDyPC_VGME'
+};
+// ====================================
+// this component shows the quiz title
+// has events that allow for toggling
+// editing and hover which shows an
+// overlay
+// ====================================
+var QuizTitleShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizTitleShow, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizTitleShow);
+
+  function QuizTitleShow() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizTitleShow);
+
+    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)(QuizTitleShow, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        "data-automation": "sdk-quiz-title-show-wrapper"
+      }, /*#__PURE__*/_react.default.createElement(_Overlay.default, {
+        wrapperClassName: styles.titleShowWrapper,
+        onClick: this.switchOnEditing,
+        tabIndex: "-1"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary",
+        size: "x-large"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        "data-automation": "sdk-quiz-title-show-title"
+      }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, null, this.props.defaultTitle)))));
+    }
+  }]);
+  QuizTitleShow.displayName = "QuizTitleShow";
+  return QuizTitleShow;
+}(_react.Component), _class2.propTypes = {
+  defaultTitle: _propTypes.default.string.isRequired,
+  switchOnEditing: _propTypes.default.func.isRequired
+}, _temp)) || _class);
+exports.QuizTitleShow = QuizTitleShow;
+var _default = QuizTitleShow;
+exports.default = _default;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var borders = _ref.borders,
+      colors = _ref.colors,
+      spacing = _ref.spacing;
+  return {
+    titleShowWrapperBottomBorder: "".concat(borders.widthMedium, " ").concat(borders.style, " ").concat(colors.porcelain),
+    titleShowWrapperLeftPadding: spacing.large
+  };
+}

package/lib/building/components/resources/quiz/title/Title/Title.examples.js

@@ -0,0 +1,51 @@
+"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],
+    errorsShowing: [true, false],
+    errors: [[], ['This is bad']]
+  },
+  getComponentProps: function getComponentProps(props) {
+    var quiz = new _Quiz.default((0, _immutable.fromJS)({
+      id: 1,
+      title: 'My Super Duper Quiz',
+      errors: {
+        title: props.errors
+      }
+    }));
+    return {
+      changeQuizTitle: Function.prototype,
+      errorsShowing: (0, _immutable.fromJS)({
+        quiz_title_edit: props.errorsShowing
+      }),
+      hideError: Function.prototype,
+      onQuizUpdated: Function.prototype,
+      saveQuizChange: Function.prototype,
+      screenreaderNotification: Function.prototype,
+      scrollKey: 'scrollKey',
+      showError: Function.prototype,
+      switchOffEditing: Function.prototype,
+      // injected by makeEditable
+      switchOnEditing: Function.prototype,
+      // injected by makeEditable
+      quiz: quiz,
+      workingQuiz: quiz
+    };
+  },
+  filter: function filter(props) {
+    return props.errorsShowing == false && props.errors.length > 0 || props.isEditing == false && (props.errorsShowing || props.errors.length > 0);
+  }
+};
+exports.default = _default;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QuizTitle = void 0;
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../../../../common/react-redux.js");
+
+var _alerts = require("../../../../../../common/actions/alerts.js");
+
+var _errorsShowing = require("../../../../../../common/actions/errorsShowing.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 = {
+  changeQuizTitle: _modifications.changeQuizTitle,
+  hideError: _errorsShowing.hideError,
+  saveQuizChange: _quizzes.saveQuizChange,
+  screenreaderNotification: _alerts.screenreaderNotification,
+  showError: _errorsShowing.showError
+};
+var QuizTitle = (0, _redux.compose)(_makeEditable.default, (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps))(_presenter.default);
+exports.QuizTitle = QuizTitle;
+var _default = QuizTitle;
+exports.default = _default;

package/lib/building/components/resources/quiz/title/Title/presenter.js

@@ -0,0 +1,217 @@
+"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.QuizTitlePresenter = 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 _partial = _interopRequireDefault(require("lodash/partial"));
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _EditButton = _interopRequireDefault(require("../../editButton/EditButton.js"));
+
+var _index = _interopRequireDefault(require("../Edit/index.js"));
+
+var _index2 = _interopRequireDefault(require("../Show/index.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 title
+// input/display component
+// ================================
+var QuizTitlePresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizTitlePresenter, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizTitlePresenter);
+
+  function QuizTitlePresenter() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizTitlePresenter);
+
+    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.workingTitle = function () {
+      return _this.props.workingQuiz.title;
+    };
+
+    _this.saveAndPreview = function () {
+      var fromEnterPressed = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+
+      _this.saveWorkingTitle();
+
+      _this.props.onQuizUpdated({
+        id: _this.quizID(),
+        title: _this.props.workingQuiz.title
+      });
+
+      _this.props.switchOffEditing();
+
+      if (fromEnterPressed && _this.editButton) {
+        _this.editButton.wrappedInstance.setFocus();
+      }
+    };
+
+    _this.updateWorkingTitle = function (e) {
+      _this.props.changeQuizTitle(_this.quizID(), e.target.value);
+    };
+
+    _this.toggleEditing = function () {
+      if (_this.props.isEditing) {
+        _this.props.screenreaderNotification((0, _formatMessage.default)('Title edit mode off.'));
+
+        _this.saveAndPreview();
+      } else {
+        _this.props.screenreaderNotification((0, _formatMessage.default)('Title switched to edit mode.'));
+
+        _this.props.switchOnEditing();
+      }
+    };
+
+    _this.handleEditButtonRef = function (node) {
+      return _this.editButton = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuizTitlePresenter, [{
+    key: "quizID",
+    // ===========
+    //   helpers
+    // ===========
+    value: function quizID() {
+      return this.props.quiz.id;
+    }
+  }, {
+    key: "titleErrors",
+    value: function titleErrors() {
+      return this.props.workingQuiz.errorsFor('title');
+    }
+  }, {
+    key: "isValid",
+    value: function isValid() {
+      return this.props.workingQuiz.isValid();
+    } // =========
+    //  actions
+    // =========
+
+  }, {
+    key: "saveWorkingTitle",
+    value: function saveWorkingTitle() {
+      this.props.saveQuizChange(this.props.workingQuiz, this.props.quiz);
+    }
+  }, {
+    key: "renderEdit",
+    // ===============
+    //    rendering
+    // ===============
+    value: function renderEdit() {
+      var quizTitleEditKey = 'quiz_title_edit';
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        isValid: this.isValid(),
+        showError: (0, _partial.default)(this.props.showError, quizTitleEditKey),
+        hideError: (0, _partial.default)(this.props.hideError, quizTitleEditKey),
+        errorsAreShowing: this.props.errorsShowing.get(quizTitleEditKey),
+        errors: this.titleErrors(),
+        value: this.workingTitle(),
+        onInputChange: this.updateWorkingTitle,
+        saveAndPreview: this.saveAndPreview
+      });
+    }
+  }, {
+    key: "renderShow",
+    value: function renderShow() {
+      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+        switchOnEditing: this.props.switchOnEditing,
+        defaultTitle: this.workingTitle()
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var content = this.props.isEditing ? this.renderEdit() : this.renderShow();
+      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)('Title'))), !this.props.isEditing && /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.editButtonWrapper
+      }, /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+        ref: this.handleEditButtonRef,
+        screenreaderText: (0, _formatMessage.default)('Edit Title'),
+        scrollKey: this.props.scrollKey,
+        onClick: this.toggleEditing,
+        "data-automation": "sdk-build-edit-title"
+      }))), content);
+    }
+  }]);
+  QuizTitlePresenter.displayName = "QuizTitlePresenter";
+  return QuizTitlePresenter;
+}(_react.Component), _class2.propTypes = {
+  changeQuizTitle: _propTypes.default.func.isRequired,
+  errorsShowing: _reactImmutableProptypes.default.map.isRequired,
+  hideError: _propTypes.default.func.isRequired,
+  isEditing: _propTypes.default.bool.isRequired,
+  // injected by makeEditable
+  onQuizUpdated: _propTypes.default.func.isRequired,
+  quiz: _reactImmutableProptypes.default.record.isRequired,
+  saveQuizChange: _propTypes.default.func.isRequired,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  scrollKey: _propTypes.default.string,
+  showError: _propTypes.default.func.isRequired,
+  switchOffEditing: _propTypes.default.func.isRequired,
+  // injected by makeEditable
+  switchOnEditing: _propTypes.default.func.isRequired,
+  // injected by makeEditable
+  workingQuiz: _reactImmutableProptypes.default.record.isRequired
+}, _class2.defaultProps = {
+  scrollKey: void 0
+}, _temp)) || _class);
+exports.QuizTitlePresenter = QuizTitlePresenter;
+var _default = QuizTitlePresenter;
+exports.default = _default;

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

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

package/lib/building/components/resources/quizEntry/QuizEntry/index.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QuizEntry = exports.mapStateToProps = void 0;
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../../../common/react-redux.js");
+
+var _immutable = require("immutable");
+
+var _errorsShowing = require("../../../../../common/actions/errorsShowing.js");
+
+var _modal = require("../../../../../common/actions/modal.js");
+
+var _alerts = require("../../../../../common/actions/alerts.js");
+
+var _ui = require("../../../../../common/actions/ui.js");
+
+var _dragAndDrop = require("../../../../../common/actions/dragAndDrop.js");
+
+var _modifications = require("../../../../../common/actions/modifications.js");
+
+var _makeEditable = _interopRequireDefault(require("../../../../../common/components/shared/functionality/makeEditable.js"));
+
+var _quizEntries = require("../../../../api/quizEntries.js");
+
+var _featureCheck = require("../../../../../common/util/featureCheck.js");
+
+var _dragAndDropUtils = require("../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js");
+
+var _presenter = require("./presenter.js");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _quizzes = require("../../../../../common/selectors/quizzes.js");
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  var activeQuiz = (0, _quizzes.getActiveQuiz)(state);
+  var quizId = activeQuiz.id;
+  var guid = "".concat(props.quizEntry.id, "_").concat(_quizCommon.QUIZ_ENTRY_GUID_SUFFIX);
+  var dndPosition = state.getIn(['dragAndDrop', 'position']);
+  var draggingOver = dndPosition === props.quizEntry.position;
+  var dndData = draggingOver ? state.get('dragAndDrop') : null;
+  var initialFocusId = state.getIn(['editing', 'initialFocusId']);
+  var entry = props.quizEntry.isBankEntry ? props.quizEntry.getEntry().getEntry() : props.quizEntry.getEntry();
+  var useBankTags = (0, _featureCheck.featureOn)('item_bank_tagging');
+  var tagAssociations = null;
+
+  if (useBankTags && props.quizEntry.isBankEntry) {
+    var topEntry = props.quizEntry.getEntry();
+    var entryType = topEntry.get('entryType');
+    var entryId = entry.get('id');
+    tagAssociations = (0, _immutable.fromJS)(state.getIn(['tagAssociations', entryType, entryId]));
+  }
+
+  return {
+    entry: entry,
+    dndPositionObj: dndData,
+    // needed for DnD
+    guid: guid,
+    initialFocusId: initialFocusId,
+    partialScoringEnabled: (0, _featureCheck.featureOn)('partial_scoring'),
+    quizId: quizId,
+    // needed for DND
+    regradingOn: (0, _featureCheck.featureOn)('regrading'),
+    shouldClone: state.getIn(['ui', _quizCommon.SHOULD_CLONE_ITEM]),
+    tagAssociations: tagAssociations,
+    useBankTags: useBankTags,
+    workingEntry: entry.getWorkingInstance()
+  };
+};
+
+exports.mapStateToProps = mapStateToProps;
+var dispatchToProps = {
+  changeQuizEntryPoints: _modifications.changeQuizEntryPoints,
+  openModal: _modal.openModal,
+  openMoveImmutableModal: _modal.openMoveImmutableModal,
+  moveQuizEntry: _quizEntries.moveQuizEntry,
+  // needed for DnD
+  moveTemporaryQuizEntry: _modifications.moveTemporaryQuizEntry,
+  // needed for DnD
+  newActiveBank: _ui.newActiveBank,
+  newActiveBankEntry: _ui.newActiveBankEntry,
+  newHoverPosition: _dragAndDrop.newHoverPosition,
+  // needed for DnD
+  screenreaderNotification: _alerts.screenreaderNotification,
+  setUi: _ui.set,
+  showError: _errorsShowing.showError
+};
+var QuizEntry = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, dispatchToProps), _makeEditable.default, (0, _dragAndDropUtils.DropTargetCreator)(_quizCommon.QUIZ_ENTRY_REF))(_presenter.QuizEntry);
+exports.QuizEntry = QuizEntry;
+var _default = QuizEntry;
+exports.default = _default;