@instructure/quiz-core 17.19.2-rc.3 → 17.19.3-rc.0

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

@@ -0,0 +1,88 @@
+"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.Pin = 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 _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var Pin = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Pin, _Component);
+
+  var _super = (0, _createSuper2.default)(Pin);
+
+  function Pin() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Pin);
+
+    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.handleClick = function (e) {
+      e.stopPropagation();
+
+      _this.props.pinSessionItem();
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(Pin, [{
+    key: "render",
+    value: function render() {
+      var message = this.props.isPinned ? (0, _formatMessage.default)('Item {position, number} is pinned. Click to unpin.', {
+        position: this.props.position
+      }) : (0, _formatMessage.default)('Item {position, number} is unpinned. Click to pin.', {
+        position: this.props.position
+      });
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: this.handleClick,
+        variant: this.props.variant,
+        size: "small",
+        icon: this.props.isPinned ? _uiIcons.IconPinSolid : _uiIcons.IconPinLine
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, message));
+    }
+  }]);
+  Pin.displayName = "Pin";
+  return Pin;
+}(_react.Component);
+
+exports.Pin = Pin;
+Pin.propTypes = {
+  isPinned: _propTypes.default.bool.isRequired,
+  pinSessionItem: _propTypes.default.func.isRequired,
+  position: _propTypes.default.number.isRequired,
+  variant: _propTypes.default.oneOf(['default', 'primary', 'success', 'danger', 'light', 'ghost', 'ghost-inverse', 'link', 'link-inverse', 'circle-default', 'circle-primary', 'circle-danger', 'icon', 'icon-inverse'])
+};
+Pin.defaultProps = {
+  variant: 'icon'
+};
+var _default = Pin;
+exports.default = _default;

package/lib/common/components/PreviewFrame/examples.config.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ref = /*#__PURE__*/_react.default.createElement("p", null, " This is a child element ");
+
+var _default = {
+  renderProps: function renderProps(props) {
+    return {
+      componentProps: {
+        onPreviewClose: Function.prototype,
+        children: _ref
+      }
+    };
+  }
+};
+exports.default = _default;

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

@@ -0,0 +1,71 @@
+"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.PreviewFrame = 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 _quizCommon = require("@instructure/quiz-common");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconEyeSolid, {
+  variant: "icon-inverse"
+});
+
+var PreviewFrame = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(PreviewFrame, _Component);
+
+  var _super = (0, _createSuper2.default)(PreviewFrame);
+
+  function PreviewFrame() {
+    (0, _classCallCheck2.default)(this, PreviewFrame);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(PreviewFrame, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_quizCommon.BarneyBox, {
+        screenReaderText: (0, _formatMessage.default)('You are in preview mode.')
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.BarneyBox.Body, null, this.props.children), /*#__PURE__*/_react.default.createElement(_quizCommon.BarneyBox.Footer, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h4",
+        color: "primary-inverse"
+      }, _ref, " \xA0", (0, _formatMessage.default)('Preview')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: this.props.onPreviewClose
+      }, (0, _formatMessage.default)('Exit Preview'))));
+    }
+  }]);
+  PreviewFrame.displayName = "PreviewFrame";
+  return PreviewFrame;
+}(_react.Component);
+
+exports.PreviewFrame = PreviewFrame;
+PreviewFrame.propTypes = {
+  children: _propTypes.default.element.isRequired,
+  onPreviewClose: _propTypes.default.func.isRequired
+};
+var _default = PreviewFrame;
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _default = _presenter.default;
+exports.default = _default;

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

@@ -0,0 +1,204 @@
+"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.PrintFontSizeModal = 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 _quizCommon = require("@instructure/quiz-common");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiRadioInput = require("@instructure/ui-radio-input");
+
+var _uiCheckbox = require("@instructure/ui-checkbox");
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'ccksF',
+  template: function template(theme) {
+    return "\n\n.ccksF_fatK{border-bottom:solid ".concat(theme.separatorBorderWidth || 'inherit', ";border-color:").concat(theme.separatorColor || 'inherit', ";margin:").concat(theme.separatorMargin || 'inherit', " 0;padding:0;width:100%}");
+  },
+  'separator': 'ccksF_fatK'
+};
+var PrintFontSizeModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(PrintFontSizeModal, _Component);
+
+  var _super = (0, _createSuper2.default)(PrintFontSizeModal);
+
+  function PrintFontSizeModal() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, PrintFontSizeModal);
+
+    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 = {
+      selectedFontSize: null,
+      rememberTextSizeSetting: false
+    };
+
+    _this.handleSubmit = function () {
+      _this.props.onSubmit(_this.state.selectedFontSize, _this.state.rememberTextSizeSetting);
+    };
+
+    _this.handleFontSizeChange = function (_, fontSize) {
+      _this.setState({
+        selectedFontSize: fontSize
+      });
+    };
+
+    _this.handleRememberFontSize = function (e) {
+      _this.setState({
+        rememberTextSizeSetting: e.target.checked
+      });
+    };
+
+    _this.text = {
+      printQuiz: (0, _formatMessage.default)('Print Quiz'),
+      close: (0, _formatMessage.default)('Close'),
+      cancel: (0, _formatMessage.default)('Cancel'),
+      printPreview: (0, _formatMessage.default)('Print Preview'),
+      rememberTextSizeSetting: (0, _formatMessage.default)('Remember text size setting')
+    };
+    _this.sizes = [{
+      label: (0, _formatMessage.default)('Medium'),
+      value: 'medium',
+      size: '1'
+    }, {
+      label: (0, _formatMessage.default)('Large'),
+      value: 'large',
+      size: '1.375'
+    }, {
+      label: (0, _formatMessage.default)('X-Large'),
+      value: 'xLarge',
+      size: '1.75'
+    }];
+    return _this;
+  }
+
+  (0, _createClass2.default)(PrintFontSizeModal, [{
+    key: "componentDidMount",
+    // =============
+    //   LIFECYCLE
+    // =============
+    value: function componentDidMount() {
+      this.setState({
+        selectedFontSize: this.props.persistedPrintFontSize,
+        rememberTextSizeSetting: !!this.props.persistedPrintFontSize
+      });
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      this.setState({
+        selectedFontSize: nextProps.persistedPrintFontSize || this.state.selectedFontSize,
+        rememberTextSizeSetting: !!this.props.persistedPrintFontSize || this.state.rememberTextSizeSetting
+      });
+    } // =============
+    //   HELPERS
+    // =============
+    // =============
+    //   HANDLERS
+    // =============
+
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+        open: this.props.isOpen,
+        onDismiss: this.props.onCancel,
+        size: "small",
+        label: this.text.printQuiz
+      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, this.text.printQuiz), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        onClick: this.props.onCancel,
+        placement: "end",
+        offset: "medium",
+        screenReaderLabel: this.text.close
+      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInputGroup, {
+        onChange: this.handleFontSizeChange,
+        name: "print-font-size",
+        value: this.state.selectedFontSize,
+        defaultValue: "medium",
+        description: (0, _formatMessage.default)('Text size'),
+        "data-automation": "print-font-size-modal-radio-group"
+      }, this.sizes.map(function (size) {
+        var label = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, size.label), " ", /*#__PURE__*/_react.default.createElement("p", {
+          "aria-hidden": "true",
+          style: {
+            fontSize: "".concat(size.size, "rem"),
+            lineHeight: 1,
+            margin: '1rem 0'
+          }
+        }, (0, _formatMessage.default)('Printed quiz question')));
+
+        var key = "print-font-size-modal-radio-button-key-".concat(size.value);
+        var dataAutomation = "print-font-size-modal-radio-button-".concat(size.value);
+        return /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+          key: key,
+          "data-automation": dataAutomation,
+          inline: true,
+          label: label,
+          value: size.value
+        });
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.separator
+      }), /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+        label: this.text.rememberTextSizeSetting,
+        checked: this.state.rememberTextSizeSetting,
+        onChange: this.handleRememberFontSize
+      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        "data-automation": "sdk-print-font-size-cancel-button",
+        variant: "light",
+        onClick: this.props.onCancel,
+        margin: "0 x-small 0 0"
+      }, this.text.cancel), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        "data-automation": "sdk-print-font-size-print-preview-button",
+        variant: "primary",
+        onClick: this.handleSubmit,
+        margin: "0 x-small 0 0"
+      }, this.text.printPreview)));
+    }
+  }]);
+  PrintFontSizeModal.displayName = "PrintFontSizeModal";
+  return PrintFontSizeModal;
+}(_react.Component), _class2.propTypes = {
+  isOpen: _propTypes.default.bool,
+  persistedPrintFontSize: _propTypes.default.string,
+  onSubmit: _propTypes.default.func.isRequired,
+  onCancel: _propTypes.default.func.isRequired
+}, _class2.defaultProps = {
+  isOpen: false,
+  persistedPrintFontSize: 'medium'
+}, _temp)) || _class);
+exports.PrintFontSizeModal = PrintFontSizeModal;
+var _default = PrintFontSizeModal;
+exports.default = _default;

package/lib/common/components/PrintFontSizeModal/theme.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      borders = _ref.borders,
+      spacing = _ref.spacing;
+  return {
+    separatorColor: colors.tiara,
+    separatorBorderWidth: borders.widthSmall,
+    separatorMargin: spacing.medium
+  };
+}

package/lib/common/components/RichContentInput/RceImageImportModal/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RceImageImportModal = void 0;
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../react-redux.js");
+
+var _upload = require("../../../actions/upload.js");
+
+var _quizzes = require("../../../../building/api/quizzes.js");
+
+var _presenter = require("./presenter.js");
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    setUploadStatus: (0, _redux.bindActionCreators)(_upload.uploadStatus, dispatch),
+    interactionFileUpload: (0, _redux.bindActionCreators)(_quizzes.interactionFileUpload, dispatch)
+  };
+};
+
+var RceImageImportModal = (0, _reactRedux.connect)(null, mapDispatchToProps)(_presenter.RceImageImportModal);
+exports.RceImageImportModal = RceImageImportModal;
+var _default = RceImageImportModal;
+exports.default = _default;

package/lib/common/components/RichContentInput/RceImageImportModal/presenter.js

@@ -0,0 +1,115 @@
+"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.RceImageImportModal = 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 _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _index = _interopRequireDefault(require("../../ImportModal/index.js"));
+
+var RceImageImportModal = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(RceImageImportModal, _Component);
+
+  var _super = (0, _createSuper2.default)(RceImageImportModal);
+
+  function RceImageImportModal() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, RceImageImportModal);
+
+    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.successWrapper = function (successAction, fileType, altText) {
+      return function (url) {
+        _this.props.setUploadStatus(_quizCommon.FILE_UPLOAD_SUCCESS);
+
+        successAction(url, fileType, altText);
+      };
+    };
+
+    _this.fileUpload = function (successAction) {
+      return function (file, errorAction, altText) {
+        _this.props.interactionFileUpload(_this.props.parentType, _this.props.parentId, file, _this.successWrapper(successAction, file.type, altText), errorAction, _this.props.uploadPath);
+      };
+    };
+
+    _this.storeImportModalRef = function (node) {
+      _this.importModal = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(RceImageImportModal, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        acceptFileType: [{
+          fileType: 'image/*',
+          title: (0, _formatMessage.default)('Image')
+        }, {
+          fileType: '.mp3, .wav, .ogg',
+          title: (0, _formatMessage.default)('Audio')
+        }, {
+          fileType: '.mp4, .webm, .ogg',
+          title: (0, _formatMessage.default)('Video')
+        }],
+        closeOverride: this.props.closeOverride,
+        disableConfirm: true,
+        failureMessage: (0, _formatMessage.default)('Failed to upload your file.'),
+        fileUpload: this.fileUpload(this.props.onSuccess),
+        importMessage: (0, _formatMessage.default)('Select a file to embed.'),
+        importModalId: this.props.importModalId,
+        onClose: this.props.onClose,
+        onContinue: Function.prototype,
+        ref: this.storeImportModalRef
+      });
+    }
+  }]);
+  RceImageImportModal.displayName = "RceImageImportModal";
+  return RceImageImportModal;
+}(_react.Component);
+
+exports.RceImageImportModal = RceImageImportModal;
+RceImageImportModal.propTypes = {
+  closeOverride: _propTypes.default.func,
+  importModalId: _propTypes.default.string.isRequired,
+  interactionFileUpload: _propTypes.default.func.isRequired,
+  onClose: _propTypes.default.func,
+  onSuccess: _propTypes.default.func.isRequired,
+  parentType: _propTypes.default.string.isRequired,
+  parentId: _propTypes.default.string.isRequired,
+  setUploadStatus: _propTypes.default.func.isRequired,
+  uploadPath: _propTypes.default.string
+};
+RceImageImportModal.defaultProps = {
+  closeOverride: null,
+  onClose: function onClose() {},
+  uploadPath: null
+};
+var _default = RceImageImportModal;
+exports.default = _default;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RichContentInput = void 0;
+
+var _reactRedux = require("../../react-redux.js");
+
+var _modal = require("../../actions/modal.js");
+
+var _index = require("../../../common/components/ImportModal/index.js");
+
+var _presenter = require("./presenter.js");
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    openImportModal: function openImportModal(importModalId) {
+      dispatch((0, _modal.openModal)((0, _index.generateImportModalId)(importModalId)));
+    }
+  };
+};
+
+var mergeProps = function mergeProps(stateProps, dispatchProps, ownProps) {
+  return Object.assign({}, stateProps, dispatchProps, ownProps);
+};
+
+var RichContentInput = (0, _reactRedux.connect)(null, mapDispatchToProps, mergeProps, {
+  withRef: true
+})(_presenter.RichContentInput);
+exports.RichContentInput = RichContentInput;
+var _default = RichContentInput;
+exports.default = _default;