@instructure/quiz-core 20.2.1 → 20.2.2-rc.1

package/es/common/components/shared/CardEmotion/CardContent/index.js

@@ -0,0 +1,48 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import omit from 'lodash/omit';
+import { withStyle, jsx } from '@instructure/emotion';
+import { View } from '@instructure/ui-view';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var CardContent = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(CardContent, _Component);
+
+  var _super = _createSuper(CardContent);
+
+  function CardContent() {
+    _classCallCheck(this, CardContent);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(CardContent, [{
+    key: "render",
+    value: function render() {
+      return jsx(View, {
+        as: "div"
+      }, jsx("div", Object.assign({
+        css: _objectSpread(_objectSpread({}, this.props.styles.content), this.props.style)
+      }, omit(this.props, Object.keys(CardContent.propTypes))), this.props.children));
+    }
+  }]);
+
+  CardContent.displayName = "CardContent";
+  return CardContent;
+}(Component), _class2.propTypes = {
+  children: PropTypes.node.isRequired,
+  style: PropTypes.object,
+  styles: PropTypes.object
+}, _class2.defaultProps = {
+  style: {}
+}, _temp)) || _class);
+export default CardContent;

package/es/common/components/shared/CardEmotion/CardContent/styles.js

@@ -0,0 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and ".concat(componentTheme.phoneBreakPoint);
+  return {
+    content: _defineProperty({
+      borderRadius: componentTheme.contentBorderRadius,
+      backgroundColor: componentTheme.contentBackgroundColor,
+      boxShadow: componentTheme.contentBoxShadow,
+      transition: "".concat(componentTheme.contentTransitionDuration, " ease"),
+      maxWidth: componentTheme.contentMaxWidth,
+      margin: "".concat(componentTheme.contentMargin, " auto"),
+      border: "1px solid ".concat(componentTheme.contentBorderColor)
+    }, mq, {
+      margin: "".concat(componentTheme.phoneContentMargin, " auto")
+    })
+  };
+};
+
+export default generateStyle;

package/es/common/components/shared/CardEmotion/CardContent/theme.js

@@ -0,0 +1,20 @@
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing,
+      shadows = _ref.shadows,
+      colors = _ref.colors,
+      breakpoints = _ref.breakpoints,
+      transitions = _ref.transitions;
+  return {
+    contentTransitionDuration: transitions.duration,
+    contentBackgroundColor: colors.white,
+    contentMaxWidth: '79.5rem',
+    contentMargin: spacing.medium,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    phoneContentMargin: spacing.xSmall,
+    contentBoxShadow: shadows.depth1,
+    contentBorderColor: colors.tiara,
+    contentBorderRadius: '4px'
+  };
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/CardEmotion/CardWrapper/index.js

@@ -0,0 +1,48 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyle, jsx } from '@instructure/emotion';
+import { View } from '@instructure/ui-view';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var CardWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(CardWrapper, _Component);
+
+  var _super = _createSuper(CardWrapper);
+
+  function CardWrapper() {
+    _classCallCheck(this, CardWrapper);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(CardWrapper, [{
+    key: "render",
+    value: function render() {
+      return jsx(View, {
+        as: "div",
+        height: "100%"
+      }, jsx("div", {
+        css: _objectSpread(_objectSpread({}, this.props.styles.wrapper), this.props.style)
+      }, this.props.children));
+    }
+  }]);
+
+  CardWrapper.displayName = "CardWrapper";
+  return CardWrapper;
+}(Component), _class2.propTypes = {
+  children: PropTypes.node.isRequired,
+  style: PropTypes.object,
+  styles: PropTypes.object
+}, _class2.defaultProps = {
+  style: {}
+}, _temp)) || _class);
+export default CardWrapper;

package/es/common/components/shared/CardEmotion/CardWrapper/styles.js

@@ -0,0 +1,17 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and ".concat(componentTheme.phoneBreakPoint);
+  return {
+    wrapper: _defineProperty({
+      boxSizing: 'border-box',
+      padding: componentTheme.wrapperPadding,
+      transition: "".concat(componentTheme.wrapperTransitionDuration, " ease"),
+      minHeight: '100%'
+    }, mq, {
+      padding: "".concat(componentTheme.phoneWrapperPadding, " 0")
+    })
+  };
+};
+
+export default generateStyle;

package/es/common/components/shared/CardEmotion/CardWrapper/theme.js

@@ -0,0 +1,13 @@
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing,
+      breakpoints = _ref.breakpoints,
+      transitions = _ref.transitions;
+  return {
+    wrapperPadding: spacing.medium,
+    wrapperTransitionDuration: transitions.duration,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    phoneWrapperPadding: spacing.medium
+  };
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/CardEmotion/index.js

@@ -0,0 +1,28 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React from 'react';
+import PropTypes from 'prop-types';
+import CardContent from "./CardContent/index.js";
+import CardWrapper from "./CardWrapper/index.js";
+export function Card(_ref) {
+  var children = _ref.children,
+      wrapped = _ref.wrapped,
+      wrapperClassName = _ref.wrapperClassName,
+      props = _objectWithoutProperties(_ref, ["children", "wrapped", "wrapperClassName"]);
+
+  var card = /*#__PURE__*/React.createElement(CardContent, props, children);
+  return wrapped ? /*#__PURE__*/React.createElement(CardWrapper, {
+    style: wrapperClassName
+  }, card) : card;
+}
+Card.propTypes = {
+  children: PropTypes.node.isRequired,
+  style: PropTypes.object,
+  wrapperClassName: PropTypes.object,
+  wrapped: PropTypes.bool
+};
+Card.defaultProps = {
+  wrapped: false,
+  style: null,
+  wrapperClassName: null
+};
+export default Card;

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

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CardContent = 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 = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _emotion = require("@instructure/emotion");
+
+var _uiView = require("@instructure/ui-view");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var CardContent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _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 (0, _emotion.jsx)(_uiView.View, {
+        as: "div"
+      }, (0, _emotion.jsx)("div", Object.assign({
+        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.styles.content), this.props.style)
+      }, (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,
+  style: _propTypes.default.object,
+  styles: _propTypes.default.object
+}, _class2.defaultProps = {
+  style: {}
+}, _temp)) || _class);
+exports.CardContent = CardContent;
+var _default = CardContent;
+exports.default = _default;

package/lib/common/components/shared/CardEmotion/CardContent/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and ".concat(componentTheme.phoneBreakPoint);
+  return {
+    content: (0, _defineProperty2.default)({
+      borderRadius: componentTheme.contentBorderRadius,
+      backgroundColor: componentTheme.contentBackgroundColor,
+      boxShadow: componentTheme.contentBoxShadow,
+      transition: "".concat(componentTheme.contentTransitionDuration, " ease"),
+      maxWidth: componentTheme.contentMaxWidth,
+      margin: "".concat(componentTheme.contentMargin, " auto"),
+      border: "1px solid ".concat(componentTheme.contentBorderColor)
+    }, mq, {
+      margin: "".concat(componentTheme.phoneContentMargin, " auto")
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/shared/CardEmotion/CardContent/theme.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing,
+      shadows = _ref.shadows,
+      colors = _ref.colors,
+      breakpoints = _ref.breakpoints,
+      transitions = _ref.transitions;
+  return {
+    contentTransitionDuration: transitions.duration,
+    contentBackgroundColor: colors.white,
+    contentMaxWidth: '79.5rem',
+    contentMargin: spacing.medium,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    phoneContentMargin: spacing.xSmall,
+    contentBoxShadow: shadows.depth1,
+    contentBorderColor: colors.tiara,
+    contentBorderRadius: '4px'
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/shared/CardEmotion/CardWrapper/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CardWrapper = 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 = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _emotion = require("@instructure/emotion");
+
+var _uiView = require("@instructure/ui-view");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var CardWrapper = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CardWrapper, _Component);
+
+  var _super = (0, _createSuper2.default)(CardWrapper);
+
+  function CardWrapper() {
+    (0, _classCallCheck2.default)(this, CardWrapper);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(CardWrapper, [{
+    key: "render",
+    value: function render() {
+      return (0, _emotion.jsx)(_uiView.View, {
+        as: "div",
+        height: "100%"
+      }, (0, _emotion.jsx)("div", {
+        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.styles.wrapper), this.props.style)
+      }, this.props.children));
+    }
+  }]);
+  CardWrapper.displayName = "CardWrapper";
+  return CardWrapper;
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  style: _propTypes.default.object,
+  styles: _propTypes.default.object
+}, _class2.defaultProps = {
+  style: {}
+}, _temp)) || _class);
+exports.CardWrapper = CardWrapper;
+var _default = CardWrapper;
+exports.default = _default;

package/lib/common/components/shared/CardEmotion/CardWrapper/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and ".concat(componentTheme.phoneBreakPoint);
+  return {
+    wrapper: (0, _defineProperty2.default)({
+      boxSizing: 'border-box',
+      padding: componentTheme.wrapperPadding,
+      transition: "".concat(componentTheme.wrapperTransitionDuration, " ease"),
+      minHeight: '100%'
+    }, mq, {
+      padding: "".concat(componentTheme.phoneWrapperPadding, " 0")
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/shared/CardEmotion/CardWrapper/theme.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing,
+      breakpoints = _ref.breakpoints,
+      transitions = _ref.transitions;
+  return {
+    wrapperPadding: spacing.medium,
+    wrapperTransitionDuration: transitions.duration,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    phoneWrapperPadding: spacing.medium
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/shared/CardEmotion/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = Card;
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = _interopRequireDefault(require("./CardContent/index.js"));
+
+var _index2 = _interopRequireDefault(require("./CardWrapper/index.js"));
+
+function Card(_ref) {
+  var children = _ref.children,
+      wrapped = _ref.wrapped,
+      wrapperClassName = _ref.wrapperClassName,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["children", "wrapped", "wrapperClassName"]);
+
+  var card = /*#__PURE__*/_react.default.createElement(_index.default, props, children);
+
+  return wrapped ? /*#__PURE__*/_react.default.createElement(_index2.default, {
+    style: wrapperClassName
+  }, card) : card;
+}
+
+Card.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  style: _propTypes.default.object,
+  wrapperClassName: _propTypes.default.object,
+  wrapped: _propTypes.default.bool
+};
+Card.defaultProps = {
+  wrapped: false,
+  style: null,
+  wrapperClassName: null
+};
+var _default = Card;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.2.1",
+  "version": "20.2.2-rc.1+312b3d698",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.0.0",
-    "@instructure/quiz-common": "^20.2.1",
-    "@instructure/quiz-i18n": "^20.2.1",
-    "@instructure/quiz-interactions": "^20.2.1",
-    "@instructure/quiz-number-input": "^20.2.1",
-    "@instructure/quiz-rce": "^20.2.1",
+    "@instructure/quiz-common": "20.2.2-rc.1+312b3d698",
+    "@instructure/quiz-i18n": "20.2.2-rc.1+312b3d698",
+    "@instructure/quiz-interactions": "20.2.2-rc.1+312b3d698",
+    "@instructure/quiz-number-input": "20.2.2-rc.1+312b3d698",
+    "@instructure/quiz-rce": "20.2.2-rc.1+312b3d698",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -110,7 +110,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "^20.2.1",
+    "instructure-validations": "20.2.2-rc.1+312b3d698",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -142,7 +142,7 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "@instructure/quiz-scripts": "^20.2.1",
+    "@instructure/quiz-scripts": "20.2.1",
     "@instructure/ui-axe-check": "^8.51.0",
     "@instructure/ui-babel-preset": "^7.22.1",
     "@instructure/ui-karma-config": "^7.22.1",
@@ -162,7 +162,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "^20.2.1",
+    "quiz-presets": "20.2.2-rc.1+312b3d698",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -178,5 +178,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6134f9df758616caf74b73e7929e22ed95fe831e"
+  "gitHead": "312b3d698c5d79ad5ce00acdaf4961e849fd1fed"
 }