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

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

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = void 0;
+
+var _redux = require("redux");
+
+var _immutable = require("immutable");
+
+var _reactRedux = require("../../../../react-redux.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _makeEditable = _interopRequireDefault(require("../../../shared/functionality/makeEditable.js"));
+
+var _modal = require("../../../../actions/modal.js");
+
+var _ui = require("../../../../actions/ui.js");
+
+var _index = require("../../../../../common/components/ImportModal/index.js");
+
+var _errorsShowing = require("../../../../actions/errorsShowing.js");
+
+var _upload = require("../../../../actions/upload.js");
+
+var modificationActions = _interopRequireWildcard(require("../../../../actions/modifications.js"));
+
+var _alerts = require("../../../../actions/alerts.js");
+
+var _items = require("../../../../../building/api/items.js");
+
+var _quizzes = require("../../../../../building/api/quizzes.js");
+
+var _featureCheck = require("../../../../util/featureCheck.js");
+
+var _quizzes2 = require("../../../../../common/selectors/quizzes.js");
+
+function mapStateToProps(state, props) {
+  // Error Related:
+  var workingItem = props.entry.getWorkingInstance();
+  var isValid = workingItem.isValid();
+  var errorsShowing = state.get('errorsShowing', (0, _immutable.Map)());
+  var errorsAreShowing = errorsShowing.get(props.guid);
+  var contextUuid = props.contextUuid === void 0 ? state.getIn(['outcomes', 'contextUuid']) : props.contextUuid;
+  return {
+    answerFeedbackEnabled: (0, _featureCheck.featureOn)('answer_level_feedback'),
+    appContainer: state.getIn(['ui', 'appContainer']),
+    errorsAreShowing: errorsAreShowing,
+    workingItem: workingItem,
+    isValid: isValid,
+    isEditing: true,
+    editable: true,
+    contextUuid: contextUuid,
+    oneQuestionAtATime: (0, _quizzes2.isActiveQuizWorkingInstanceOneQuestionAtATime)(state),
+    outcomesEndpoint: state.getIn(['outcomes', 'outcomesEndpoint']),
+    outcomesToken: state.getIn(['outcomes', 'outcomesToken']),
+    partialScoringEnabled: (0, _featureCheck.featureOn)('partial_scoring'),
+    quizId: (0, _quizzes2.getActiveQuizId)(state),
+    showCalculator: (0, _featureCheck.featureOn)('calculator_per_question')
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    addError: (0, _redux.bindActionCreators)(_alerts.addError, dispatch),
+    changeItemState: (0, _redux.bindActionCreators)(modificationActions.changeItemState, dispatch),
+    changeOutcomeAlignmentSetGuid: (0, _redux.bindActionCreators)(modificationActions.changeOutcomeAlignmentSetGuid, dispatch),
+    hideError: (0, _redux.bindActionCreators)(_errorsShowing.hideError, dispatch),
+    interactionFileUpload: (0, _redux.bindActionCreators)(_quizzes.interactionFileUpload, dispatch),
+    occludeQuizEntries: (0, _redux.bindActionCreators)(_ui.occludeQuizEntries, dispatch),
+    showError: (0, _redux.bindActionCreators)(_errorsShowing.showError, dispatch),
+    updateItem: (0, _redux.bindActionCreators)(_items.updateItem, dispatch),
+    screenreaderNotification: (0, _redux.bindActionCreators)(_alerts.screenreaderNotification, dispatch),
+    setOneQuestionAtATime: (0, _redux.bindActionCreators)(_quizzes.setOneAtATimeType, dispatch),
+    setUploadStatus: (0, _redux.bindActionCreators)(_upload.uploadStatus, dispatch),
+    openImportModal: function openImportModal(importModalId) {
+      dispatch((0, _modal.openModal)((0, _index.generateImportModalId)(importModalId)));
+    }
+  };
+}
+
+var _default = (0, _makeEditable.default)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default));
+
+exports.default = _default;

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

@@ -0,0 +1,231 @@
+"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.ItemEdit = 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 _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"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _interactionTypePropsHelper = require("../../../../util/interactionTypePropsHelper.js");
+
+var _index = _interopRequireDefault(require("../../../../components/RichContentInput/RceImageImportModal/index.js"));
+
+var _ElementsForSelectors = _interopRequireDefault(require("../../../../../common/util/ElementsForSelectors.js"));
+
+var _instUIMessages = require("../../../../util/instUIMessages.js");
+
+var ItemEdit = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ItemEdit, _Component);
+
+  var _super = (0, _createSuper2.default)(ItemEdit);
+
+  function ItemEdit() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ItemEdit);
+
+    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.onOutcomeAlignmentSetChange = function (outcomeAlignmentSet) {
+      var item = _this.props.entry;
+
+      if (item.outcomeAlignmentSetGuid !== outcomeAlignmentSet.guid) {
+        return _this.props.changeOutcomeAlignmentSetGuid(item.id, outcomeAlignmentSet.guid);
+      }
+
+      return null;
+    };
+
+    _this.applicationElement = function () {
+      return (0, _ElementsForSelectors.default)(_this.props.appContainer);
+    };
+
+    _this.onModalOpen = function () {
+      _this.props.occludeQuizEntries(true);
+    };
+
+    _this.onModalClose = function () {
+      _this.props.occludeQuizEntries(false);
+    };
+
+    _this.getError = function (field) {
+      if (_this.props.errorsAreShowing) {
+        var errors = _this.props.workingItem.getErrors().toJS();
+
+        return (0, _instUIMessages.toErrors)(errors[field] || []);
+      }
+    };
+
+    _this.renderImportModal = function (importModalId, onSuccess, onClose) {
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        importModalId: importModalId,
+        onClose: onClose,
+        onSuccess: onSuccess,
+        parentId: _this.props.parentId,
+        parentType: _this.props.parentType
+      });
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ItemEdit, [{
+    key: "additionalEditOptions",
+    value: function additionalEditOptions() {
+      var _this$props = this.props,
+          guid = _this$props.guid,
+          workingItem = _this$props.workingItem;
+      var itemId = guid || workingItem.get('id');
+      var outcomeAlignmentSetGuid = workingItem.get('outcomeAlignmentSetGuid');
+      var options = [];
+
+      if (this.props.outcomesEndpoint) {
+        options.push({
+          key: 'outcomes',
+          title: /*#__PURE__*/_react.default.createElement("span", null, (0, _formatMessage.default)('Align to Outcomes'), " ", /*#__PURE__*/_react.default.createElement(_OutcomeCount.default, {
+            alignmentSetId: outcomeAlignmentSetGuid,
+            artifactType: "quizEntry",
+            artifactId: itemId,
+            contextUuid: this.props.contextUuid,
+            host: this.props.outcomesEndpoint,
+            jwt: this.props.outcomesToken,
+            screenreaderNotification: this.props.screenreaderNotification,
+            liveRegion: _quizCommon.liveRegion
+          })),
+          component: /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, {
+            artifactType: "quizEntry",
+            artifactId: itemId,
+            applicationElement: this.applicationElement,
+            alignmentSetId: outcomeAlignmentSetGuid,
+            contextUuid: this.props.contextUuid,
+            emptySetHeading: (0, _formatMessage.default)('Align Institution outcomes to this question.'),
+            host: this.props.outcomesEndpoint,
+            jwt: this.props.outcomesToken,
+            onModalOpen: this.onModalOpen,
+            onModalClose: this.onModalClose,
+            onUpdate: this.onOutcomeAlignmentSetChange,
+            screenreaderNotification: this.props.screenreaderNotification,
+            liveRegion: _quizCommon.liveRegion
+          })
+        });
+      }
+
+      if (this.props.additionalOptions) {
+        return options.concat(this.props.additionalOptions);
+      }
+
+      return options;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var item = this.props.entry;
+      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, {
+        messages: this.getError('onSelf'),
+        description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit Item:')),
+        name: "edit_item_".concat(this.props.guid) // eslint-disable-line react/jsx-no-literals
+
+      }, /*#__PURE__*/_react.default.createElement(Interaction, Object.assign({}, propsForInteraction, {
+        itemId: this.props.guid,
+        renderImportModal: this.renderImportModal
+      })));
+    }
+  }]);
+  ItemEdit.displayName = "ItemEdit";
+  return ItemEdit;
+}(_react.Component);
+
+exports.ItemEdit = ItemEdit;
+ItemEdit.propTypes = {
+  additionalOptions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired,
+    component: _propTypes.default.node.isRequired
+  })),
+  answerFeedbackEnabled: _propTypes.default.bool,
+  appContainer: _CustomPropTypes.default.selectors.isRequired,
+  changeOutcomeAlignmentSetGuid: _propTypes.default.func.isRequired,
+  entry: _reactImmutableProptypes.default.record.isRequired,
+  guid: _propTypes.default.string.isRequired,
+  occludeQuizEntries: _propTypes.default.func.isRequired,
+  contextUuid: _propTypes.default.string,
+  outcomesEndpoint: _propTypes.default.string,
+  outcomesToken: _propTypes.default.string,
+  workingItem: _reactImmutableProptypes.default.record.isRequired,
+  // required by propsForInteractionEdit
+  addError: _propTypes.default.func.isRequired,
+  changeItemState: _propTypes.default.func.isRequired,
+  errorsAreShowing: _propTypes.default.bool,
+  handleQuizEntryPointsChange: _propTypes.default.func.isRequired,
+  interactionFileUpload: _propTypes.default.func.isRequired,
+  oneQuestionAtATime: _propTypes.default.bool.isRequired,
+  openImportModal: _propTypes.default.func.isRequired,
+  parentId: _propTypes.default.string.isRequired,
+  parentType: _propTypes.default.string.isRequired,
+  partialScoringEnabled: _propTypes.default.bool,
+  quizId: _propTypes.default.string.isRequired,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  setOneQuestionAtATime: _propTypes.default.func.isRequired,
+  setUploadStatus: _propTypes.default.func.isRequired,
+  initialFocusId: _propTypes.default.string,
+  showCalculator: _propTypes.default.bool,
+  clearValidationErrorsFromApi: _propTypes.default.func.isRequired,
+  validationErrorsFromApi: _propTypes.default.objectOf(_propTypes.default.arrayOf(_propTypes.default.shape({
+    type: _propTypes.default.string,
+    text: _propTypes.default.string
+  })))
+};
+ItemEdit.defaultProps = {
+  additionalOptions: [],
+  answerFeedbackEnabled: false,
+  contextUuid: null,
+  errorsAreShowing: false,
+  outcomesEndpoint: null,
+  outcomesToken: null,
+  partialScoringEnabled: false,
+  initialFocusId: null,
+  showCalculator: false,
+  validationErrorsFromApi: {}
+};
+var _default = ItemEdit;
+exports.default = _default;

package/lib/common/components/resources/item/ItemOverride/index.js

@@ -0,0 +1,55 @@
+"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 _immutable = require("immutable");
+
+var _reactRedux = require("../../../../react-redux.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _makeEditable = _interopRequireDefault(require("../../../shared/functionality/makeEditable.js"));
+
+var modificationActions = _interopRequireWildcard(require("../../../../actions/modifications.js"));
+
+var _ui = require("../../../../actions/ui.js");
+
+var _alerts = require("../../../../actions/alerts.js");
+
+var _quizzes = require("../../../../../building/api/quizzes.js");
+
+var _featureCheck = require("../../../../util/featureCheck.js");
+
+var _quizzes2 = require("../../../../selectors/quizzes.js");
+
+function mapStateToProps(state, props) {
+  var errorsShowing = state.get('errorsShowing', (0, _immutable.Map)());
+  var errorsAreShowing = errorsShowing.get(props.guid);
+  return {
+    entry: props.quizEntry.getWorkingInstance().getItem(),
+    errorsAreShowing: errorsAreShowing,
+    oneQuestionAtATime: (0, _quizzes2.isActiveQuizWorkingInstanceOneQuestionAtATime)(state),
+    partialScoringEnabled: (0, _featureCheck.featureOn)('partial_scoring'),
+    quizId: (0, _quizzes2.getActiveQuizId)(state)
+  };
+}
+
+var mapDispatchToProps = {
+  addError: _alerts.addError,
+  changeQuizEntryProperties: modificationActions.changeQuizEntryProperties,
+  interactionFileUpload: _quizzes.interactionFileUpload,
+  occludeQuizEntries: _ui.occludeQuizEntries,
+  screenreaderNotification: _alerts.screenreaderNotification,
+  setOneQuestionAtATime: _quizzes.setOneAtATimeType
+};
+
+var _default = (0, _makeEditable.default)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default));
+
+exports.default = _default;

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

@@ -0,0 +1,108 @@
+"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.ItemOverride = 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 _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _componentForItem = _interopRequireDefault(require("../../../../util/componentForItem.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _interactionTypePropsHelper = require("../../../../util/interactionTypePropsHelper.js");
+
+var ItemOverride = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ItemOverride, _Component);
+
+  var _super = (0, _createSuper2.default)(ItemOverride);
+
+  function ItemOverride() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ItemOverride);
+
+    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.changeOverrideState = function (newState, changes) {
+      if (changes) {
+        _this.props.changeQuizEntryProperties(_this.props.quizEntry.id, {
+          itemOverrides: changes
+        });
+      }
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ItemOverride, [{
+    key: "render",
+    value: function render() {
+      var item = this.props.entry;
+      var interactionType = item.getInteractionType().slug;
+      var Interaction = (0, _componentForItem.default)(interactionType, _quizCommon.COMPONENT_EDIT);
+      var propsForInteraction = (0, _interactionTypePropsHelper.propsForInteractionEdit)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props), {}, {
+        changeItemState: function changeItemState() {},
+        openImportModal: function openImportModal() {},
+        workingItem: item
+      }));
+      return /*#__PURE__*/_react.default.createElement(Interaction, Object.assign({}, propsForInteraction, {
+        changeItemState: this.changeOverrideState,
+        itemId: this.props.guid,
+        overrideEditableForItem: true
+      }));
+    }
+  }]);
+  ItemOverride.displayName = "ItemOverride";
+  return ItemOverride;
+}(_react.Component);
+
+exports.ItemOverride = ItemOverride;
+ItemOverride.propTypes = {
+  changeQuizEntryProperties: _propTypes.default.func.isRequired,
+  entry: _reactImmutableProptypes.default.record.isRequired,
+  guid: _propTypes.default.string.isRequired,
+  quizEntry: _reactImmutableProptypes.default.record.isRequired,
+  // required by propsForInteractionEdit
+  addError: _propTypes.default.func.isRequired,
+  errorsAreShowing: _propTypes.default.bool,
+  handleQuizEntryPointsChange: _propTypes.default.func.isRequired,
+  interactionFileUpload: _propTypes.default.func.isRequired,
+  occludeQuizEntries: _propTypes.default.func.isRequired,
+  oneQuestionAtATime: _propTypes.default.bool.isRequired,
+  parentId: _propTypes.default.string.isRequired,
+  parentType: _propTypes.default.string.isRequired,
+  partialScoringEnabled: _propTypes.default.bool,
+  quizId: _propTypes.default.string.isRequired,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  setOneQuestionAtATime: _propTypes.default.func.isRequired
+};
+ItemOverride.defaultProps = {
+  errorsAreShowing: false,
+  partialScoringEnabled: false
+};
+var _default = ItemOverride;
+exports.default = _default;

package/lib/common/components/resources/item/ItemShow/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 = 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 _makeEditable = _interopRequireDefault(require("../../../shared/functionality/makeEditable.js"));
+
+var _componentForItem = _interopRequireDefault(require("../../../../util/componentForItem.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _interactionTypePropsHelper = require("../../../../util/interactionTypePropsHelper.js");
+
+var ItemShow = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ItemShow, _Component);
+
+  var _super = (0, _createSuper2.default)(ItemShow);
+
+  function ItemShow() {
+    (0, _classCallCheck2.default)(this, ItemShow);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(ItemShow, [{
+    key: "render",
+    value: function render() {
+      var item = this.props.entry;
+      var Interaction = (0, _componentForItem.default)(item.getInteractionType().slug, _quizCommon.COMPONENT_SHOW);
+      var propsForInteraction = (0, _interactionTypePropsHelper.propsForInteractionShow)(item.toJS());
+      return /*#__PURE__*/_react.default.createElement(Interaction, Object.assign({}, propsForInteraction, {
+        itemId: this.props.guid,
+        switchOnEditing: this.props.switchOnEditing
+      }));
+    }
+  }]);
+  ItemShow.displayName = "ItemShow";
+  return ItemShow;
+}(_react.Component);
+
+ItemShow.propTypes = {
+  entry: _reactImmutableProptypes.default.record.isRequired,
+  guid: _propTypes.default.string.isRequired,
+  switchOnEditing: _propTypes.default.func
+};
+ItemShow.defaultProps = {
+  switchOnEditing: null
+};
+
+var _default = (0, _makeEditable.default)(ItemShow);
+
+exports.default = _default;

package/lib/common/components/resources/positionBox/PositionBox.js

@@ -0,0 +1,78 @@
+"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.PositionBox = 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 _uiHeading = require("@instructure/ui-heading");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'dwNcM',
+  template: function template(theme) {
+    return "\n\n.dwNcM_cESy{align-items:center;background-color:".concat(theme.positionBackgroundColor || 'inherit', ";display:flex;height:").concat(theme.positionDimension || 'inherit', ";justify-content:center;margin-left:-1.2rem;margin-right:").concat(theme.positionMargin || 'inherit', ";min-width:").concat(theme.positionDimension || 'inherit', ";padding:0 ").concat(theme.positionPadding || 'inherit', ";z-index:").concat(theme.positionZIndex || 'inherit', "}\n\n.dwNcM_bUkG{color:").concat(theme.positionTextColor || 'inherit', ";font-size:").concat(theme.positionTextFontSize || 'inherit', "}\n\n@media print{.dwNcM_cESy{-webkit-print-color-adjust:exact;color-adjust:exact}}");
+  },
+  'position': 'dwNcM_cESy',
+  'positionText': 'dwNcM_bUkG'
+};
+var PositionBox = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(PositionBox, _Component);
+
+  var _super = (0, _createSuper2.default)(PositionBox);
+
+  function PositionBox() {
+    (0, _classCallCheck2.default)(this, PositionBox);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(PositionBox, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.position
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.positionText,
+        "data-automation": "sdk-position-box-text"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, {
+        as: "div"
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: this.props.headingLevel
+      }, this.props.headingText)), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, this.props.position)));
+    }
+  }]);
+  PositionBox.displayName = "PositionBox";
+  return PositionBox;
+}(_react.Component), _class2.propTypes = {
+  headingText: _propTypes.default.string.isRequired,
+  headingLevel: _propTypes.default.string,
+  position: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+}, _class2.defaultProps = {
+  headingLevel: 'h2'
+}, _temp)) || _class);
+exports.PositionBox = PositionBox;
+var _default = PositionBox;
+exports.default = _default;

package/lib/common/components/resources/positionBox/theme.js

@@ -0,0 +1,21 @@
+"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 {
+    positionMargin: spacing.xSmall,
+    positionPadding: spacing.xSmall,
+    positionBackgroundColor: colors.licorice,
+    positionZIndex: '3333',
+    positionDimension: '2em',
+    positionTextColor: colors.porcelain,
+    positionTextFontSize: typography.fontSizeMedium
+  };
+}