@spothero/ui 22.5.2 → 23.0.0

package/dist/components/Badge/Badge.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _react.Badge;
+  }
+});
+var _react = require("@chakra-ui/react");

package/dist/components/Badge/Badge.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Badge = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireDefault(require("./Badge"));
+var _default = exports["default"] = {
+  title: 'v2/Badge',
+  component: _Badge["default"],
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+var Template = function Template(props) {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+    variant: "primary"
+  }, "Primary"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+    variant: "warningLight"
+  }, "Warning Light"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+    variant: "solid",
+    colorScheme: "green"
+  }, "Success"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+    variant: "subtle",
+    colorScheme: "red"
+  }, "Removed"));
+};
+var Badge = exports.Badge = (0, _bind["default"])(Template).call(Template, {});

package/dist/components/Badge/styles/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variants = exports["default"] = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var baseStyle = {
+  px: 1,
+  textTransform: 'reset',
+  fontSize: 'xs',
+  borderRadius: 'sm',
+  fontWeight: 'bold'
+};
+var variants = exports.variants = {
+  primary: {
+    bg: 'primary.default',
+    color: 'white'
+  },
+  warningLight: {
+    bg: 'yellow.100',
+    color: 'black'
+  }
+};
+var defaultProps = {};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Badge, {
+  variants: variants,
+  baseStyle: baseStyle,
+  defaultProps: defaultProps
+});

package/dist/components/Button/Button.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+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 _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _buttonProps = _interopRequireDefault(require("./button-props"));
+var _excluded = ["asAnchor", "isExternal"];
+function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? _Object$defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var anchorProps = function anchorProps() {
+  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return _objectSpread({
+    as: 'a',
+    type: null
+  }, isExternal && {
+    target: '_blank',
+    rel: 'noopener noreferrer'
+  });
+};
+var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var asAnchor = _ref.asAnchor,
+    isExternal = _ref.isExternal,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
+    iconSpacing: 2
+  }, props, (asAnchor || props.as === 'a') && anchorProps(isExternal), {
+    ref: ref
+  }));
+});
+Button.propTypes = _buttonProps["default"];
+Button.defaultProps = {
+  variant: 'primary',
+  type: 'button'
+};
+var _default = exports["default"] = Button;

package/dist/components/Button/Button.spec.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Button = _interopRequireDefault(require("./Button"));
+describe('Button', function () {
+  it('renders the anchor version of the button', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      asAnchor: true,
+      href: "#"
+    }, "Button"));
+    expect(_react2.screen.getByRole('link')).toBeInTheDocument();
+  });
+  it('renders with target and rel attributes on external anchor button', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      asAnchor: true,
+      isExternal: true,
+      href: "#"
+    }, "Button"));
+    var link = _react2.screen.getByRole('link');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+});

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,166 @@
+"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 _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+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"));
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var baseStyle = {
+  px: 8,
+  py: 3,
+  fontSize: 'base',
+  fontFamily: 'body',
+  lineHeight: 0.875,
+  fontWeight: 'semibold',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderRadius: '1.25rem',
+  textTransform: 'capitalize',
+  transition: 'all normal ease',
+  _disabled: {
+    cursor: 'not-allowed',
+    opacity: 1,
+    bg: 'gray.medium',
+    borderColor: 'gray.medium',
+    color: 'gray.dark'
+  },
+  '& svg': {
+    display: 'block'
+  }
+};
+// TODO: We need an active styling
+var disabledButtonHoverStyle = {
+  _disabled: {
+    bg: 'gray.medium',
+    borderColor: 'gray.medium',
+    color: 'gray.dark'
+  }
+};
+var destructiveButtonStyles = {
+  bg: 'white',
+  borderColor: 'red.default',
+  color: 'red.default',
+  _hover: _objectSpread({
+    borderColor: 'red.800',
+    color: 'red.800'
+  }, disabledButtonHoverStyle)
+};
+var variants = exports.variants = {
+  primary: {
+    bg: 'primary.default',
+    borderColor: 'primary.default',
+    color: 'white',
+    _hover: _objectSpread({
+      bg: 'primary.600',
+      borderColor: 'primary.600',
+      color: 'white'
+    }, disabledButtonHoverStyle)
+  },
+  primaryOnDark: {
+    bg: 'yellow.default',
+    borderColor: 'yellow.default',
+    color: 'black',
+    _hover: _objectSpread({
+      bg: 'yellow.500',
+      borderColor: 'yellow.500',
+      color: 'black'
+    }, disabledButtonHoverStyle),
+    _focus: {
+      boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
+    }
+  },
+  secondary: {
+    bg: 'white',
+    borderColor: 'gray.medium',
+    color: 'primary.default',
+    _hover: _objectSpread({
+      borderColor: 'primary.600',
+      color: 'primary.600'
+    }, disabledButtonHoverStyle)
+  },
+  secondaryOnDark: {
+    bg: 'none',
+    borderColor: 'white',
+    color: 'white',
+    _hover: _objectSpread({
+      bg: 'white',
+      borderColor: 'white',
+      color: 'black'
+    }, disabledButtonHoverStyle),
+    _focus: {
+      boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
+    }
+  },
+  tertiary: {
+    bg: 'none',
+    borderWidth: 'none',
+    borderRadius: 'unset',
+    color: 'primary.default',
+    h: 'unset',
+    m: 'unset',
+    minW: 'unset',
+    p: 'unset',
+    lineHeight: 1,
+    _disabled: {
+      bg: 'none',
+      color: 'gray.dark'
+    },
+    _hover: {
+      color: 'primary.600',
+      _disabled: {
+        color: 'gray.dark'
+      }
+    },
+    _active: {
+      color: 'primary.600',
+      _disabled: {
+        color: 'gray.dark'
+      }
+    }
+  },
+  tertiaryOnDark: {
+    bg: 'none',
+    borderRadius: 'unset',
+    borderWidth: 'none',
+    color: 'white',
+    h: 'unset',
+    m: 'unset',
+    minW: 'unset',
+    p: 'unset',
+    _disabled: {
+      bg: 'none',
+      color: 'white',
+      opacity: '.7'
+    },
+    _hover: {
+      color: 'white',
+      opacity: '.8',
+      _disabled: {
+        opacity: '.7'
+      }
+    }
+  },
+  destructive: _objectSpread({}, destructiveButtonStyles),
+  destructiveOnDark: _objectSpread({}, destructiveButtonStyles)
+};
+var defaultProps = {
+  size: null
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Button, {
+  variants: variants,
+  baseStyle: baseStyle,
+  defaultProps: defaultProps
+});

package/dist/components/Button/button-props.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Button = require("./Button.styles");
+var props = {
+  /**
+   * Alters the underlying html tag
+   */
+  as: _propTypes["default"].string,
+  /**
+   * If `true`, the button will render as an anchor.
+   */
+  asAnchor: _propTypes["default"].bool,
+  /**
+   * If `true`, and an anchor button, target="_blank" and rel="noopener noreferrer" will be set on the anchor
+   * "isExternal" is used to maintain parity with the Link component.
+   */
+  isExternal: _propTypes["default"].bool,
+  /**
+   * If `true`, the button will show a spinner.
+   */
+  isLoading: _propTypes["default"].bool,
+  /**
+   * If `true`, the button will be styled in its active state.
+   */
+  isActive: _propTypes["default"].bool,
+  /**
+   * If `true`, the button will be disabled.
+   */
+  isDisabled: _propTypes["default"].bool,
+  /**
+   * The label to show in the button when `isLoading` is true
+   * If no text is passed, it only shows the spinner
+   */
+  loadingText: _propTypes["default"].string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   */
+  isFullWidth: _propTypes["default"].bool,
+  /**
+   * The html button type to use.
+   */
+  type: _propTypes["default"].oneOf(['button', 'reset', 'submit']),
+  /**
+   * If added, the button will show an icon before the button's label.
+   * @type PropTypes.node
+   */
+  leftIcon: _propTypes["default"].node,
+  /**
+   * If added, the button will show an icon after the button's label.
+   * @type PropTypes.node
+   */
+  rightIcon: _propTypes["default"].node,
+  /**
+   * The space between the button icon and label.
+   * @type SystemProps["marginRight"]
+   */
+  iconSpacing: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  /**
+   * Replace the spinner component when `isLoading` is set to `true`
+   * @type PropTypes.node
+   */
+  spinner: _propTypes["default"].node,
+  variant: _propTypes["default"].oneOf((0, _keys["default"])(_Button.variants))
+};
+var _default = exports["default"] = props;

package/dist/components/Button/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button["default"];
+  }
+});
+_Object$defineProperty(exports, "ButtonGroup", {
+  enumerable: true,
+  get: function get() {
+    return _react.ButtonGroup;
+  }
+});
+var _Button = _interopRequireDefault(require("./Button"));
+var _react = require("@chakra-ui/react");

package/dist/components/Button/stories/button.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+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 _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _react = _interopRequireDefault(require("react"));
+var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
+var _react2 = require("@chakra-ui/react");
+var _checkmark = _interopRequireDefault(require("@spothero/icons/checkmark"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _buttonProps = _interopRequireDefault(require("../button-props"));
+var ButtonTemplate = function ButtonTemplate(props, _ref) {
+  var _context;
+  var hasDarkBackground = _ref.hasDarkBackground;
+  var variant = (0, _concat["default"])(_context = "".concat(props.variant)).call(_context, hasDarkBackground ? 'OnDark' : '');
+  return /*#__PURE__*/_react["default"].createElement(_react2.Box, null, /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+    mb: 4
+  }, /*#__PURE__*/_react["default"].createElement(_react2.Text, {
+    mb: "2",
+    color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+  }, (0, _capitalize["default"])(props.variant), ":"), /*#__PURE__*/_react["default"].createElement(_react2.Box, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
+    variant: variant,
+    mr: 4,
+    mb: 4
+  }), props.variant, " Variant"), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    leftIcon: /*#__PURE__*/_react["default"].createElement(_checkmark["default"], {
+      width: "1rem"
+    })
+  }, props, {
+    variant: variant,
+    mr: 4,
+    mb: 4
+  }), props.variant, " With Icon"), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
+    variant: variant,
+    as: "a",
+    href: "http://spothero.com",
+    isExternal: false,
+    mr: 4,
+    mb: 4
+  }), "As Anchor"))));
+};
+var _default = exports["default"] = ButtonTemplate;

package/dist/components/Button/stories/index.stories.js

@@ -0,0 +1,97 @@
+"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 _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Tertiary = exports.Secondary = exports.Primary = exports.Overview = exports.Destructive = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _button = _interopRequireDefault(require("./button"));
+var _overview = _interopRequireDefault(require("./overview"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+var _createControl = require("storybook/utils/create-control");
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _default = exports["default"] = {
+  title: 'v2/Button',
+  component: {
+    Button: _Button["default"]
+  },
+  parameters: {
+    importBy: 'Button',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://chakra-ui.com/docs/form/button'
+  },
+  argTypes: _objectSpread(_objectSpread({}, (0, _disableArgs["default"])('children')), {}, {
+    onClick: {
+      action: 'clicked'
+    }
+  })
+};
+var Overview = exports.Overview = (0, _bind["default"])(_overview["default"]).call(_overview["default"], {});
+var Primary = exports.Primary = (0, _bind["default"])(_button["default"]).call(_button["default"], {});
+Primary.argTypes = _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit'])), (0, _disableArgs["default"])('variant')), {}, {
+  onClick: {
+    action: 'clicked'
+  }
+});
+Primary.args = {
+  children: 'Primary',
+  variant: 'primary',
+  isDisabled: false,
+  isLoading: false,
+  loadingText: 'Loading',
+  isFullWidth: false
+};
+var Secondary = exports.Secondary = (0, _bind["default"])(_button["default"]).call(_button["default"], {});
+Secondary.argTypes = _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit'])), (0, _disableArgs["default"])('variant')), {}, {
+  onClick: {
+    action: 'clicked'
+  }
+});
+Secondary.args = {
+  children: 'Secondary',
+  variant: 'secondary',
+  isDisabled: false,
+  isLoading: false,
+  loadingText: 'Loading',
+  isFullWidth: false
+};
+var Tertiary = exports.Tertiary = (0, _bind["default"])(_button["default"]).call(_button["default"], {});
+Tertiary.argTypes = _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit'])), (0, _disableArgs["default"])('variant')), {}, {
+  onClick: {
+    action: 'clicked'
+  }
+});
+Tertiary.args = {
+  children: 'tertiary',
+  variant: 'tertiary',
+  isDisabled: false,
+  isLoading: false,
+  loadingText: 'Loading',
+  isFullWidth: false
+};
+var Destructive = exports.Destructive = (0, _bind["default"])(_button["default"]).call(_button["default"], {});
+Destructive.argTypes = _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit'])), (0, _disableArgs["default"])('variant')), {}, {
+  onClick: {
+    action: 'clicked'
+  }
+});
+Destructive.args = {
+  children: 'destructive',
+  variant: 'destructive',
+  isDisabled: false,
+  isLoading: false,
+  loadingText: 'Loading',
+  isFullWidth: false
+};

package/dist/components/Button/stories/overview.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+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 _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _react = _interopRequireDefault(require("react"));
+var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
+var _react2 = require("@chakra-ui/react");
+var _checkmark = _interopRequireDefault(require("@spothero/icons/checkmark"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Button2 = require("../Button.styles");
+var _Text = _interopRequireDefault(require("../../Text/Text"));
+var variationsArray = function variationsArray(_ref) {
+  var _context;
+  var baseVariantName = _ref.baseVariantName,
+    hasDarkBackground = _ref.hasDarkBackground;
+  var variant = (0, _concat["default"])(_context = "".concat(baseVariantName)).call(_context, hasDarkBackground ? 'OnDark' : '');
+  return [{
+    variant: variant,
+    children: variant
+  }, {
+    variant: variant,
+    children: "".concat(variant, " isDisabled"),
+    isDisabled: true
+  }, {
+    variant: variant,
+    children: "".concat(variant, " isLoading"),
+    isLoading: true,
+    loadingText: 'loading (optional)'
+  }, {
+    variant: variant,
+    children: "leftIcon",
+    leftIcon: /*#__PURE__*/_react["default"].createElement(_checkmark["default"], {
+      width: "1rem"
+    })
+  }, {
+    variant: variant,
+    children: "".concat(variant, " asAnchor"),
+    asAnchor: true,
+    href: '#'
+  }];
+};
+var OverviewTemplate = function OverviewTemplate(args, _ref2) {
+  var _context2, _context3;
+  var hasDarkBackground = _ref2.hasDarkBackground;
+  return /*#__PURE__*/_react["default"].createElement(_react2.Box, null, (0, _map["default"])(_context2 = (0, _filter["default"])(_context3 = (0, _keys["default"])(_Button2.variants)).call(_context3, function (name) {
+    return !/ondark/i.test(name);
+  })).call(_context2, function (baseVariantName, index) {
+    var _context4;
+    return /*#__PURE__*/_react["default"].createElement(_react2.Box, {
+      key: index,
+      mb: 4
+    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+      mb: "2",
+      color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+    }, (0, _capitalize["default"])(baseVariantName), ":"), /*#__PURE__*/_react["default"].createElement(_react2.Box, null, (0, _map["default"])(_context4 = variationsArray({
+      baseVariantName: baseVariantName,
+      hasDarkBackground: hasDarkBackground
+    })).call(_context4, function (props, key) {
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+        key: key
+      }, props, {
+        mr: 4,
+        mb: 4
+      }));
+    })));
+  }));
+};
+var _default = exports["default"] = OverviewTemplate;