@spothero/ui 17.0.0-beta.1 → 17.0.0-beta.2

package/dist/components/Text/Text.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = void 0;
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Text = _interopRequireDefault(require("./Text"));
+
+var _options = _interopRequireDefault(require("./options"));
+
+var _Text2 = require("./Text.styles");
+
+var _default = {
+  title: 'v2/Text',
+  component: _Text.default,
+  parameters: {
+    removeBaseHtmlClass: true
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: (0, _keys.default)(_Text2.variants)
+      }
+    },
+    as: {
+      control: {
+        type: 'select',
+        options: _options.default
+      }
+    },
+    children: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react.default.createElement(_Text.default, props);
+};
+
+var Text = Template.bind({});
+exports.Text = Text;
+Text.args = {
+  children: 'Bonbon lollipop tiramisu cupcake bear claw cupcake. Icing candy canes cookie caramels wafer tootsie roll soufflé halvah. Ice cream tart gummies apple pie chocolate bar. Pastry gummies macaroon fruitcake donut sweet caramels candy. Oat cake marshmallow biscuit carrot cake fruitcake brownie pastry liquorice liquorice. Topping sweet gingerbread. Chupa chups caramels brownie. Icing jujubes chupa chups cookie. Carrot cake gummi bears powder apple pie donut pudding macaroon. Icing jelly cupcake powder jelly croissant pastry. Powder jelly fruitcake gummies sweet tootsie roll candy. Icing cheesecake toffee tart pastry lemon drops lemon drops bonbon wafer. Cheesecake ice cream wafer apple pie candy canes croissant. Sweet croissant pudding carrot cake oat cake chupa chups. Gingerbread lemon drops biscuit oat cake carrot cake. Chocolate cake jelly-o cake cake candy lollipop.'
+};

package/dist/components/Text/Text.styles.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variants = exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+
+var _typography = require("../../theme/base/typography");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var baseStyle = {
+  lineHeight: 1.5,
+  fontWeight: _typography.fontWeights.normal
+};
+var variants = {
+  body: _objectSpread(_objectSpread({}, baseStyle), {}, {
+    fontSize: {
+      base: _typography.fontSizes.base,
+      desktop: _typography.fontSizes.base
+    }
+  }),
+  body2: _objectSpread(_objectSpread({}, baseStyle), {}, {
+    fontSize: {
+      base: _typography.fontSizes.sm,
+      desktop: _typography.fontSizes.sm
+    }
+  }),
+  caption: _objectSpread(_objectSpread({}, baseStyle), {}, {
+    fontSize: {
+      base: _typography.fontSizes.xs,
+      desktop: _typography.fontSizes.xs
+    }
+  })
+};
+exports.variants = variants;
+var defaultProps = {
+  variant: variants.body
+};
+
+var _default = (0, _merge.default)(_theme.default.components.Text, {
+  variants: variants,
+  baseStyle: baseStyle,
+  defaultProps: defaultProps
+});
+
+exports.default = _default;

package/dist/components/Text/combineAsWithVariant.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _freeze = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/freeze"));
+
+var _Text = require("./Text.styles");
+
+var _typography = require("../../theme/base/typography");
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+// Create list of commonly used html text elements
+var asOptions = (0, _freeze.default)({
+  bold: 'b',
+  strong: 'strong',
+  italic: 'i',
+  emphasis: 'em',
+  small: 'small',
+  strikethrough: 's',
+  underline: 'u'
+});
+/**
+ * ### `combineAsWithVariant`
+ * A function that takes in the `as` value (the HTML element to render the Text component as), and the
+ * `variant` value. The default-like styling for the `as` prop is merged with the styling from the
+ * `variant` and a combined styleProp object is returned.
+ *
+ * By default the `as` property only effects the underlying semantics of the markup, whereas the
+ * `variant` only effects the visual styling of the text. In order for the text component to be built
+ * with accessibility and ease-of-use in mind, these two properties _should_ be interconnected. Having
+ * the style and markup unified allows an experience that is accessible to those using screen-readers
+ * (or any other assistive technology) that matches (or is at least a close approximation) of the
+ * "standard" visual experience.
+ *
+ * @function combineAsWithVariant
+ * @param {string} args.as - The HTML element to render the Text component as
+ * @param {string} args.variant - The style variant for the Text component
+ * @returns {Object} An object containing the merged styleProps from the `variant` and the `as` props
+ */
+
+var combineAsWithVariant = function combineAsWithVariant(_ref) {
+  var as = _ref.as,
+      variant = _ref.variant;
+  var variantFontSizeBase = Number(_Text.variants["".concat(variant)].fontSize.base.replace('rem', ''));
+  var variantFontSizeDesktop = Number(_Text.variants["".concat(variant)].fontSize.desktop.replace('rem', ''));
+  var styleProps;
+
+  switch (as) {
+    case asOptions.bold:
+      styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
+        fontWeight: _typography.fontWeights.semibold
+      });
+      break;
+
+    case asOptions.strong:
+      styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
+        fontWeight: _typography.fontWeights.semibold
+      });
+      break;
+
+    case asOptions.italic:
+      styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
+        fontStyle: 'italic'
+      });
+      break;
+
+    case asOptions.emphasis:
+      styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
+        fontStyle: 'italic'
+      });
+      break;
+
+    case asOptions.underline:
+      styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
+        textDecoration: 'underline'
+      });
+      break;
+
+    case asOptions.strikethrough:
+      styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
+        textDecoration: 'line-through'
+      });
+      break;
+
+    case asOptions.small:
+      styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
+        fontSize: {
+          base: "".concat(variantFontSizeBase * 0.8, "rem"),
+          desktop: "".concat(variantFontSizeDesktop * 0.8, "rem")
+        }
+      });
+      break;
+
+    default:
+      styleProps = _objectSpread({}, _Text.variants["".concat(variant)]);
+      break;
+  }
+
+  return styleProps;
+};
+
+var _default = combineAsWithVariant;
+exports.default = _default;

package/dist/components/Text/options.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var options = ['a', 'abbr', 'address', 'article', 'aside', 'b', 'bdi', 'bdo', 'blockquote', 'button', 'caption', 'cite', 'code', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'fieldset', 'figure', 'footer', 'form', 'header', 'hgroup', 'i', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'pre', 'progress', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video'];
+var _default = options;
+exports.default = _default;

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _theme = _interopRequireDefault(require("../../theme"));
+
+var _global = require("../../theme/global");
+
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
+var _excluded = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ThemeProvider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var theme = _ref.theme,
+      useLegacyOverrides = _ref.useLegacyOverrides,
+      _ref$disableExternalF = _ref.disableExternalFonts,
+      disableExternalFonts = _ref$disableExternalF === void 0 ? false : _ref$disableExternalF,
+      children = _ref.children,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react2.ChakraProvider, (0, _extends2.default)({}, props, {
+    ref: ref,
+    theme: (0, _merge.default)(_theme.default, theme)
+  }), disableExternalFonts ? null : /*#__PURE__*/_react.default.createElement(_global.Fonts, null), /*#__PURE__*/_react.default.createElement(_global.LegacyOverrides, {
+    useLegacyOverrides: useLegacyOverrides
+  }), children);
+});
+ThemeProvider.propTypes = {
+  /** If true, this will use the old `spothero-html` base styles */
+  useLegacyOverrides: _propTypes.default.bool,
+
+  /** If true, this will not load the `Fonts` global styles */
+  disableExternalFonts: _propTypes.default.bool,
+
+  /** The React node (generally your entire App) that will be provided the theme */
+  children: _propTypes.default.node,
+
+  /** Adds additional themeing on top of SpotHero's default configuration */
+  theme: _propTypes.default.object
+};
+var _default = ThemeProvider;
+exports.default = _default;

package/dist/components/ThemeProvider/ThemeProvider.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ThemeProvider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
+
+var _Spaces = _interopRequireDefault(require("../../utils/Spaces"));
+
+var _Text = _interopRequireDefault(require("../Text/Text"));
+
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+
+var Usage = function Usage() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "// RootComponent.jsx", /*#__PURE__*/_react.default.createElement("br", null), "...", /*#__PURE__*/_react.default.createElement("br", null), "return (", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "<ThemeProvider>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, {
+    spaces: 6
+  }), "<App/>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "</ThemeProvider>", /*#__PURE__*/_react.default.createElement("br", null), ");", /*#__PURE__*/_react.default.createElement("br", null), "...");
+};
+
+var _default = {
+  title: 'v2/ThemeProvider',
+  component: _ThemeProvider.default,
+  parameters: {
+    removeBaseHtmlClass: true,
+    usage: [/*#__PURE__*/_react.default.createElement(Usage, {
+      key: 1
+    })]
+  }
+};
+exports.default = _default;
+
+var Template = function Template(props, _ref) {
+  var hasDarkBackground = _ref.hasDarkBackground;
+  var contentTextColor = hasDarkBackground ? 'text.primary.dark' : 'text.primary.light';
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    mb: 8,
+    color: contentTextColor
+  }, "As the name implies, this is a theme context provider that all of your v2 components utilize. It is required by all apps moving to v2"), /*#__PURE__*/_react.default.createElement(_Text.default, null), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    mb: 8,
+    color: contentTextColor
+  }, "ThemeProvider has a ", /*#__PURE__*/_react.default.createElement(_react2.Code, null, "theme"), " prop that takes a theme object. Unlike how we are both overriding and extending Chakra's default theme, this property only extends our default theme configuration."), ' ', /*#__PURE__*/_react.default.createElement(_Text.default, {
+    mb: 8,
+    color: contentTextColor
+  }, "ThemeProvider has a ", /*#__PURE__*/_react.default.createElement(_react2.Code, null, "useLegacyOverrides"), " prop that is a boolean. If true, the ThemeProvider will insert the typography styling from .spothero-html"), ' ', /*#__PURE__*/_react.default.createElement(_Text.default, {
+    mb: 8,
+    color: contentTextColor
+  }, "ThemeProvider also has a ", /*#__PURE__*/_react.default.createElement(_react2.Code, null, "disableExternalFonts"), " prop that is a boolean. If true, the ThemeProvider will not load the font files from Google's CDN, and you will be able to handle fonts on a project-level."), ' ');
+};
+
+var ThemeProvider = Template.bind({});
+exports.ThemeProvider = ThemeProvider;
+ThemeProvider.parameters = {
+  importBy: 'ThemeProvider'
+};
+ThemeProvider.argTypes = (0, _disableArgs.default)(['theme', 'children', 'useLegacyOverrides']);