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

package/lib/common/components/resources/stimulus/StimulusEditInfo/presenter.js

@@ -0,0 +1,247 @@
+"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.StimulusEditInfo = 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 _immutable = require("immutable");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiTextInput = require("@instructure/ui-text-input");
+
+var _uiFormField = require("@instructure/ui-form-field");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _index = _interopRequireDefault(require("../../../RichContentInput/index.js"));
+
+var _instUIMessages = require("../../../../util/instUIMessages.js");
+
+var _Errors = _interopRequireDefault(require("../../../shared/errors/Errors.js"));
+
+var _uiSimpleSelect = require("@instructure/ui-simple-select");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiToggleDetails = require("@instructure/ui-toggle-details");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'doNBF',
+  template: function template(theme) {
+    return "\n\n.doNBF_daCg{padding-bottom:".concat(theme.sectionPadding || 'inherit', "}\n\n.doNBF_fvFs{color:").concat(theme.optionalLabelColor || 'inherit', ";font-size:").concat(theme.optionalLabelFontSize || 'inherit', ";margin-left:").concat(theme.urlLabelMargin || 'inherit', "}");
+  },
+  'section': 'doNBF_daCg',
+  'optionalLabel': 'doNBF_fvFs'
+};
+
+var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconUpdownLine, {
+  rotate: "90"
+});
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconUpdownLine, null);
+
+var StimulusEditInfo = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(StimulusEditInfo, _Component);
+
+  var _super = (0, _createSuper2.default)(StimulusEditInfo);
+
+  function StimulusEditInfo() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, StimulusEditInfo);
+
+    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.inputErrors = function (field) {
+      if (_this.props.errorsShowing) {
+        var errorMap = _this.props.workingStimulus.getErrors().toJS() || {};
+        return (0, _instUIMessages.toErrors)(errorMap[field] || []);
+      }
+    };
+
+    _this.onOrientationChange = function (e, _ref) {
+      var value = _ref.value;
+
+      var newData = _this.props.workingStimulus.set('orientation', value);
+
+      _this.props.modifyStimulus(newData);
+    };
+
+    _this.onTextInputChange = function (field) {
+      return function (e) {
+        var newData = _this.props.workingStimulus.set(field, e.target.value);
+
+        _this.props.modifyStimulus(newData);
+      };
+    };
+
+    _this.onBodyChange = function (e, _ref2) {
+      var editorContent = _ref2.editorContent;
+
+      var newData = _this.props.workingStimulus.set('body', editorContent);
+
+      _this.props.modifyStimulus(newData);
+    };
+
+    _this.errorsList = function (field) {
+      if (_this.props.errorsShowing) {
+        var errorMap = _this.props.workingStimulus.getErrors() || (0, _immutable.Map)();
+        return errorMap.get(field) || (0, _immutable.List)();
+      }
+    };
+
+    _this.fileUploadUrl = function () {
+      var _this$props = _this.props,
+          stimulus = _this$props.stimulus,
+          parentId = _this$props.parentId,
+          parentType = _this$props.parentType;
+      var resource = parentType === 'bank' ? 'banks' : 'quizzes';
+      return "/api/".concat(resource, "/").concat(parentId, "/stimuli/").concat(stimulus.id, "/media_upload_url");
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(StimulusEditInfo, [{
+    key: "headerText",
+    value: function headerText() {
+      return this.props.stimulus.isTemporary() ? (0, _formatMessage.default)('Add Stimulus') : (0, _formatMessage.default)('Edit Stimulus');
+    }
+  }, {
+    key: "renderOptionalLabel",
+    value: function renderOptionalLabel(labelName) {
+      var optionalText = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : (0, _formatMessage.default)('(optional)');
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, labelName), /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.optionalLabel
+      }, optionalText));
+    }
+  }, {
+    key: "renderStimulusOrientationSelect",
+    value: function renderStimulusOrientationSelect() {
+      var stimulusOrientation = this.props.workingStimulus.get('orientation');
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.section
+      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+        renderLabel: (0, _formatMessage.default)('Orientation'),
+        onChange: this.onOrientationChange,
+        value: stimulusOrientation,
+        renderBeforeInput: /*#__PURE__*/_react.default.createElement(_uiIcons.IconUpdownLine, {
+          rotate: stimulusOrientation === _quizCommon.TOP ? '0' : '90'
+        })
+      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        renderBeforeLabel: _ref3,
+        id: "stimulus-orientation-select-option-left",
+        value: "left"
+      }, (0, _formatMessage.default)('Questions to the right')), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        renderBeforeLabel: _ref4,
+        id: "stimulus-orientation-select-option-top",
+        value: "top"
+      }, (0, _formatMessage.default)('Questions below'))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var stimulus = this.props.workingStimulus;
+      return /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
+        messages: this.inputErrors('onSelf'),
+        description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit Stimulus'))
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h3"
+      }, this.headerText()), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.section
+      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+        messages: this.inputErrors('title'),
+        renderLabel: (0, _formatMessage.default)('Title'),
+        type: "text",
+        ref: this.props.setTitleRef,
+        onChange: this.onTextInputChange('title'),
+        value: stimulus.get('title')
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.section
+      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+        renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Instructions')),
+        type: "text",
+        onChange: this.onTextInputChange('instructions'),
+        value: stimulus.get('instructions')
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.section
+      }, /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldLabel, null, (0, _formatMessage.default)('Content')), /*#__PURE__*/_react.default.createElement(_index.default, {
+        label: "" // eslint-disable-next-line react/jsx-no-literals
+        ,
+        textareaId: "stimulusBodyEdit_".concat(stimulus.id, "_").concat(this.props.isBankedContent),
+        defaultContent: stimulus.get('body'),
+        onKeyUp: this.onBodyChange,
+        onBlur: this.onBodyChange,
+        uploadPath: this.fileUploadUrl()
+      }), /*#__PURE__*/_react.default.createElement(_Errors.default, {
+        errorList: this.errorsList('body')
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.section
+      }, /*#__PURE__*/_react.default.createElement(_uiToggleDetails.ToggleDetails, {
+        defaultExpanded: true,
+        variant: "filled",
+        key: "options",
+        summary: (0, _formatMessage.default)('Options')
+      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.section
+      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+        renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Source URL'), (0, _formatMessage.default)('(optional - not visible to students)')),
+        type: "text",
+        onChange: this.onTextInputChange('sourceUrl'),
+        value: stimulus.get('sourceUrl')
+      })))));
+    }
+  }]);
+  StimulusEditInfo.displayName = "StimulusEditInfo";
+  return StimulusEditInfo;
+}(_react.Component), _class2.propTypes = {
+  isBankedContent: _propTypes.default.bool,
+  stimulus: _reactImmutableProptypes.default.record.isRequired,
+  workingStimulus: _reactImmutableProptypes.default.record.isRequired,
+  errorsShowing: _propTypes.default.bool.isRequired,
+  modifyStimulus: _propTypes.default.func.isRequired,
+  parentId: _propTypes.default.string.isRequired,
+  parentType: _propTypes.default.string.isRequired,
+  setTitleRef: _propTypes.default.func,
+  stimulusOrientationEnabled: _propTypes.default.bool.isRequired
+}, _class2.defaultProps = {
+  isBankedContent: false,
+  setTitleRef: function setTitleRef() {}
+}, _temp)) || _class);
+exports.StimulusEditInfo = StimulusEditInfo;
+var _default = StimulusEditInfo;
+exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusEditInfo/theme.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      typography = _ref.typography,
+      colors = _ref.colors;
+  return {
+    sectionPadding: spacing.small,
+    optionalLabelColor: colors.ash,
+    optionalLabelFontSize: typography.fontSizeXSmall,
+    urlLabelMargin: spacing.xSmall
+  };
+}

package/lib/common/components/resources/stimulus/StimulusShow/index.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StimulusShow = 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 _uiIcons = require("@instructure/ui-icons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../StimulusShowInfo/index.js"));
+
+var _Overlay = _interopRequireDefault(require("../../../../../common/components/shared/overlay/Overlay.js"));
+
+var _index2 = _interopRequireDefault(require("../../../../../building/components/resources/ActionButtons/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'ceqOh',
+  template: function template(theme) {
+    return "\n\n.ceqOh_dRGY{padding-bottom:".concat(theme.stimulusPadding || 'inherit', ";padding-top:").concat(theme.stimulusPadding || 'inherit', "}\n\n.ceqOh_fsuY{align-items:center;display:flex;height:1rem;justify-content:space-between;padding-left:").concat(theme.headerPadding || 'inherit', ";padding-right:").concat(theme.headerPadding || 'inherit', "}\n\n.ceqOh_cKlw{display:flex;overflow:hidden}\n\n.ceqOh_ffXB{color:").concat(theme.stimulusLabelColor || 'inherit', ";font-size:").concat(theme.stimulusLabelFontSize || 'inherit', ";margin:0 ").concat(theme.stimulusLabelMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis}\n\n.ceqOh_dMwa{height:100%;padding:").concat(theme.stimulusContentPaddingTop || 'inherit', " ").concat(theme.stimulusContentPaddingLeftRight || 'inherit', " ").concat(theme.stimulusContentPaddingBottom || 'inherit', "}");
+  },
+  'stimulus': 'ceqOh_dRGY',
+  'header': 'ceqOh_fsuY',
+  'leftHeader': 'ceqOh_cKlw',
+  'stimulusLabel': 'ceqOh_ffXB',
+  'stimulusContent': 'ceqOh_dMwa'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, null);
+
+var StimulusShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(StimulusShow, _Component);
+
+  var _super = (0, _createSuper2.default)(StimulusShow);
+
+  function StimulusShow() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, StimulusShow);
+
+    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)(StimulusShow, [{
+    key: "renderBankIcon",
+    value: function renderBankIcon() {
+      if (this.props.isBankedContent || this.props.quizEntry.isArchivedBankEntry) {
+        return _ref;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
+        onClick: this.switchOnEditing,
+        wrapperClassName: styles.stimulusWrapper,
+        tabIndex: "-1"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.stimulus
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.header
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.leftHeader
+      }, this.renderBankIcon(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.stimulusLabel
+      }, (0, _formatMessage.default)('Stimulus'))), /*#__PURE__*/_react.default.createElement(_index2.default, {
+        connectDragSource: this.props.connectDragSource,
+        displayPosition: this.props.displayPosition,
+        onDelete: this.props.openDeleteStimulusModal,
+        quizEntries: this.props.quizEntries,
+        quizEntry: this.props.quizEntry,
+        scrollKey: this.props.scrollKey,
+        shouldDisableDragHandle: this.props.shouldDisableDragHandle,
+        switchOnEditing: this.props.switchOnEditing,
+        shouldFocusOnMount: this.props.shouldFocusOnMount
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        role: "presentation",
+        onClick: this.switchOnEditing,
+        className: styles.stimulusContent
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        stimulus: this.props.stimulus
+      }))));
+    }
+  }]);
+  StimulusShow.displayName = "StimulusShow";
+  return StimulusShow;
+}(_react.Component), _class2.propTypes = {
+  connectDragSource: _propTypes.default.func.isRequired,
+  displayPosition: _propTypes.default.number.isRequired,
+  isBankedContent: _propTypes.default.bool,
+  openDeleteStimulusModal: _propTypes.default.func.isRequired,
+  quizEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
+  quizEntry: _reactImmutableProptypes.default.record.isRequired,
+  scrollKey: _propTypes.default.string,
+  shouldDisableDragHandle: _propTypes.default.bool,
+  stimulus: _reactImmutableProptypes.default.record.isRequired,
+  switchOnEditing: _propTypes.default.func.isRequired,
+  shouldFocusOnMount: _propTypes.default.bool.isRequired
+}, _class2.defaultProps = {
+  isBankedContent: false,
+  scrollKey: '',
+  shouldDisableDragHandle: false,
+  shouldFocusOnMount: false
+}, _temp)) || _class);
+exports.StimulusShow = StimulusShow;
+var _default = StimulusShow;
+exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusShow/theme.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      typography = _ref.typography,
+      colors = _ref.colors;
+  return {
+    stimulusPadding: spacing.large,
+    headerPadding: spacing.small,
+    stimulusLabelColor: colors.ash,
+    stimulusLabelFontSize: typography.fontSizeSmall,
+    stimulusLabelMargin: spacing.xSmall,
+    stimulusContentPaddingTop: spacing.large,
+    stimulusContentPaddingBottom: spacing.small,
+    stimulusContentPaddingLeftRight: spacing.small
+  };
+}

package/lib/common/components/resources/stimulus/StimulusShowInfo/StimulusShowInfo.examples.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Stimulus = _interopRequireDefault(require("../../../../../common/records/Stimulus.js"));
+
+var stimulus = new _Stimulus.default({
+  instructions: 'Instructions can be useful, but people tend not to read them.',
+  title: 'A Stimulus',
+  body: 'Nothing to see here, move along...'
+});
+var _default = {
+  propValues: {
+    stimulus: [stimulus]
+  }
+};
+exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusShowInfo/index.js

@@ -0,0 +1,87 @@
+"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 _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiView = require("@instructure/ui-view");
+
+var _quizRce = require("@instructure/quiz-rce");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var StimulusShowInfo = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(StimulusShowInfo, _Component);
+
+  var _super = (0, _createSuper2.default)(StimulusShowInfo);
+
+  function StimulusShowInfo() {
+    (0, _classCallCheck2.default)(this, StimulusShowInfo);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(StimulusShowInfo, [{
+    key: "render",
+    value: function render() {
+      var instructions = this.props.stimulus.instructions && /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        padding: "small",
+        margin: "x-small 0 0 0",
+        background: "light"
+      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary",
+        size: "small"
+      }, (0, _formatMessage.default)('Instructions'))), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        padding: "0 0 small 0"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        "data-automation": "sdk-stimulus-LeftPanelShow-instructions"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary",
+        size: "small",
+        weight: "bold"
+      }, this.props.stimulus.instructions))));
+
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary",
+        weight: "bold",
+        size: "large"
+      }, this.props.stimulus.title), instructions, /*#__PURE__*/_react.default.createElement("div", {
+        "data-automation": "sdk-stimulus-LeftPanelShow-content"
+      }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+        content: this.props.stimulus.body
+      })));
+    }
+  }]);
+  StimulusShowInfo.displayName = "StimulusShowInfo";
+  return StimulusShowInfo;
+}(_react.Component);
+
+StimulusShowInfo.propTypes = {
+  stimulus: _reactImmutableProptypes.default.record.isRequired
+};
+var _default = StimulusShowInfo;
+exports.default = _default;

package/lib/common/components/shared/Card/CardContent/index.js

@@ -0,0 +1,73 @@
+"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.CardContent = 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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiView = require("@instructure/ui-view");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cqBsX',
+  template: function template(theme) {
+    return "\n\n.cqBsX_caGd{background-color:".concat(theme.contentBackgroundColor || 'inherit', ";border-radius:").concat(theme.contentBorderRadius || 'inherit', ";box-shadow:").concat(theme.contentBoxShadow || 'inherit', ";margin:").concat(theme.contentMargin || 'inherit', " auto;max-width:").concat(theme.contentMaxWidth || 'inherit', ";transition:").concat(theme.contentTransitionDuration || 'inherit', " ease}\n\n@media screen and (--phoneBreakPoint){.cqBsX_caGd{margin:").concat(theme.phoneContentMargin || 'inherit', " auto}}");
+  },
+  'content': 'cqBsX_caGd'
+};
+var CardContent = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CardContent, _Component);
+
+  var _super = (0, _createSuper2.default)(CardContent);
+
+  function CardContent() {
+    (0, _classCallCheck2.default)(this, CardContent);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(CardContent, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div"
+      }, /*#__PURE__*/_react.default.createElement("div", Object.assign({
+        className: (0, _classnames.default)(styles.content, this.props.className)
+      }, (0, _omit.default)(this.props, Object.keys(CardContent.propTypes))), this.props.children));
+    }
+  }]);
+  CardContent.displayName = "CardContent";
+  return CardContent;
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  className: _propTypes.default.string
+}, _class2.defaultProps = {
+  className: null
+}, _temp)) || _class);
+exports.CardContent = CardContent;
+var _default = CardContent;
+exports.default = _default;

package/lib/common/components/shared/Card/CardContent/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,
+      borders = _ref.borders,
+      breakpoints = _ref.breakpoints,
+      transitions = _ref.transitions;
+  return {
+    contentTransitionDuration: transitions.duration,
+    contentBorderRadius: borders.radiusSmall,
+    contentBackgroundColor: colors.white,
+    contentBoxShadow: '2px 2px 12px 1px #ddd',
+    contentMaxWidth: '79.5rem',
+    contentMargin: spacing.medium,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    phoneContentMargin: spacing.xSmall
+  };
+}