@spothero/ui 17.1.0 → 17.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/dist/components/Accordion/Accordion.stories.js +57 -49
  2. package/dist/components/Accordion/AccordionActionButton.js +31 -0
  3. package/dist/components/Accordion/index.js +17 -14
  4. package/dist/components/Accordion/styles/index.js +64 -19
  5. package/dist/components/Alert/Alert.js +26 -59
  6. package/dist/components/Alert/Alert.stories.js +18 -47
  7. package/dist/components/Alert/index.js +1 -3
  8. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +84 -119
  9. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +4 -12
  10. package/dist/components/AutoSuggestSelect/index.js +1 -3
  11. package/dist/components/Badge/Badge.js +1 -2
  12. package/dist/components/Badge/Badge.stories.js +12 -20
  13. package/dist/components/Badge/styles/index.js +6 -12
  14. package/dist/components/Button/Button.js +17 -47
  15. package/dist/components/Button/Button.spec.js +4 -10
  16. package/dist/components/Button/Button.styles.js +36 -49
  17. package/dist/components/Button/button-props.js +2 -20
  18. package/dist/components/Button/index.js +2 -5
  19. package/dist/components/Button/stories/button.js +5 -17
  20. package/dist/components/Button/stories/index.stories.js +24 -48
  21. package/dist/components/Button/stories/overview.js +34 -62
  22. package/dist/components/Card/Card.js +11 -26
  23. package/dist/components/Card/Card.stories.js +5 -15
  24. package/dist/components/Checkbox/Checkbox.js +1 -2
  25. package/dist/components/Checkbox/Checkbox.stories.js +2 -10
  26. package/dist/components/Checkbox/index.js +1 -3
  27. package/dist/components/Checkbox/styles/index.js +3 -11
  28. package/dist/components/Container/Container.js +5 -21
  29. package/dist/components/Container/Container.stories.js +14 -43
  30. package/dist/components/Container/Container.styles.js +1 -1
  31. package/dist/components/Divider/Divider.js +8 -24
  32. package/dist/components/Divider/Divider.stories.js +3 -15
  33. package/dist/components/Divider/Divider.styles.js +2 -8
  34. package/dist/components/FormControl/FormControl.js +13 -29
  35. package/dist/components/Grid/Grid.js +7 -24
  36. package/dist/components/Grid/Grid.stories.js +36 -60
  37. package/dist/components/Grid/Grid.styles.js +2 -2
  38. package/dist/components/Grid/GridItem.js +5 -21
  39. package/dist/components/Grid/GridItem.styles.js +2 -1
  40. package/dist/components/Grid/index.js +2 -5
  41. package/dist/components/Heading/Heading.js +8 -29
  42. package/dist/components/Heading/Heading.stories.js +4 -15
  43. package/dist/components/Heading/Heading.styles.js +24 -38
  44. package/dist/components/Icon/Icon.js +1 -2
  45. package/dist/components/Icon/Icon.stories.js +19 -28
  46. package/dist/components/Image/Image.js +39 -69
  47. package/dist/components/Image/Image.spec.js +16 -22
  48. package/dist/components/Image/Image.stories.js +8 -19
  49. package/dist/components/Input/Input.js +14 -31
  50. package/dist/components/Input/Input.stories.js +5 -15
  51. package/dist/components/Input/index.js +1 -3
  52. package/dist/components/Input/styles/index.js +4 -10
  53. package/dist/components/Link/Link.js +1 -2
  54. package/dist/components/Link/Link.stories.js +5 -12
  55. package/dist/components/Link/Link.styles.js +8 -8
  56. package/dist/components/List/List.js +14 -37
  57. package/dist/components/List/List.stories.js +18 -59
  58. package/dist/components/List/index.js +2 -5
  59. package/dist/components/List/styles/index.js +2 -9
  60. package/dist/components/List/styles/item.styles.js +1 -1
  61. package/dist/components/Loader/Loader.js +17 -33
  62. package/dist/components/Loader/Loader.stories.js +24 -44
  63. package/dist/components/Modal/Modal.js +13 -28
  64. package/dist/components/Modal/Modal.stories.js +30 -100
  65. package/dist/components/Modal/index.js +1 -3
  66. package/dist/components/Modal/styles/body.js +11 -28
  67. package/dist/components/Modal/styles/closeButton.js +4 -4
  68. package/dist/components/Modal/styles/dialog.js +4 -4
  69. package/dist/components/Modal/styles/dialogContainer.js +5 -11
  70. package/dist/components/Modal/styles/header.js +5 -5
  71. package/dist/components/Modal/styles/index.js +12 -28
  72. package/dist/components/Popover/Popover.js +12 -33
  73. package/dist/components/Popover/Popover.stories.js +36 -62
  74. package/dist/components/Popover/PopoverArrow.js +3 -17
  75. package/dist/components/Popover/PopoverCloseButton.js +3 -17
  76. package/dist/components/Popover/PopoverContent.js +10 -27
  77. package/dist/components/Popover/index.js +4 -8
  78. package/dist/components/Popover/styles/index.js +9 -22
  79. package/dist/components/Popover/styles/popover-arrow.js +4 -4
  80. package/dist/components/Popover/styles/popover-body.js +3 -7
  81. package/dist/components/Popover/styles/popover-close-button.js +7 -10
  82. package/dist/components/Popover/styles/popover-content.js +5 -7
  83. package/dist/components/Popover/styles/popover-header.js +1 -1
  84. package/dist/components/Popover/styles/popper.js +1 -1
  85. package/dist/components/Radio/Radio.js +12 -27
  86. package/dist/components/Radio/Radio.stories.js +2 -12
  87. package/dist/components/Radio/RadioGroup.js +17 -33
  88. package/dist/components/Radio/index.js +2 -5
  89. package/dist/components/Radio/styles/index.js +5 -13
  90. package/dist/components/Select/Select.js +14 -33
  91. package/dist/components/Select/Select.stories.js +13 -22
  92. package/dist/components/Select/index.js +1 -3
  93. package/dist/components/Select/styles/index.js +4 -14
  94. package/dist/components/Skeleton/Skeleton.stories.js +6 -20
  95. package/dist/components/Skeleton/Skeleton.styles.js +0 -3
  96. package/dist/components/Skeleton/index.js +3 -4
  97. package/dist/components/Spinner/Spinner.js +9 -25
  98. package/dist/components/Spinner/Spinner.stories.js +42 -70
  99. package/dist/components/Spinner/Spinner.styles.js +56 -43
  100. package/dist/components/Switch/Switch.js +13 -30
  101. package/dist/components/Switch/Switch.stories.js +2 -10
  102. package/dist/components/Switch/index.js +1 -3
  103. package/dist/components/Switch/styles/index.js +10 -31
  104. package/dist/components/Table/Table.js +1 -2
  105. package/dist/components/Table/Table.stories.js +17 -37
  106. package/dist/components/Table/Table.styles.js +13 -32
  107. package/dist/components/Table/index.js +8 -11
  108. package/dist/components/Tabs/Tabs.js +14 -22
  109. package/dist/components/Tabs/Tabs.stories.js +4 -20
  110. package/dist/components/Tabs/combineSizeWithVariant.js +11 -17
  111. package/dist/components/Tabs/index.js +5 -8
  112. package/dist/components/Tabs/styles/index.js +2 -8
  113. package/dist/components/Text/Text.js +8 -17
  114. package/dist/components/Text/Text.stories.js +3 -15
  115. package/dist/components/Text/Text.styles.js +15 -35
  116. package/dist/components/Text/combineAsWithVariant.js +36 -57
  117. package/dist/components/Text/options.js +1 -1
  118. package/dist/components/ThemeProvider/ThemeProvider.js +10 -33
  119. package/dist/components/ThemeProvider/ThemeProvider.stories.js +7 -16
  120. package/dist/components/Toast/Toast.stories.js +11 -34
  121. package/dist/components/index.js +89 -156
  122. package/dist/components/styles.js +20 -41
  123. package/dist/theme/base/breakpoints.js +1 -4
  124. package/dist/theme/base/colors.js +32 -45
  125. package/dist/theme/base/index.js +10 -17
  126. package/dist/theme/base/notifications.js +5 -16
  127. package/dist/theme/base/sizes.js +4 -4
  128. package/dist/theme/base/typography.js +5 -6
  129. package/dist/theme/base/zindices.js +1 -2
  130. package/dist/theme/global.js +87 -20
  131. package/dist/theme/index.js +15 -41
  132. package/dist/utils/Spaces.js +5 -12
  133. package/package.json +3 -3
  134. package/dist/components/Accordion/Accordion.js +0 -13
  135. package/dist/components/Accordion/styles/button.js +0 -23
  136. package/dist/components/Accordion/styles/container.js +0 -15
  137. package/dist/components/Accordion/styles/panel.js +0 -13
@@ -1,33 +1,13 @@
1
1
  "use strict";
2
2
 
3
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
4
-
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
-
7
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
8
-
9
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
10
-
11
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
12
-
13
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
-
15
4
  Object.defineProperty(exports, "__esModule", {
16
5
  value: true
17
6
  });
18
7
  exports.variants = exports.default = void 0;
19
-
20
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
-
22
8
  var _merge = _interopRequireDefault(require("lodash/merge"));
23
-
24
9
  var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
25
-
26
- 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; }
27
-
28
- 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; }
29
-
30
- var baseStyle = {
10
+ const baseStyle = {
31
11
  px: 8,
32
12
  py: 3,
33
13
  fontSize: 'base',
@@ -49,44 +29,47 @@ var baseStyle = {
49
29
  '& svg': {
50
30
  display: 'block'
51
31
  }
52
- }; // TODO: We need an active styling
53
-
54
- var disabledButtonHoverStyle = {
32
+ };
33
+ // TODO: We need an active styling
34
+ const disabledButtonHoverStyle = {
55
35
  _disabled: {
56
36
  bg: 'gray.medium',
57
37
  borderColor: 'gray.medium',
58
38
  color: 'gray.dark'
59
39
  }
60
40
  };
61
- var destructiveButtonStyles = {
41
+ const destructiveButtonStyles = {
62
42
  bg: 'white',
63
43
  borderColor: 'red.default',
64
44
  color: 'red.default',
65
- _hover: _objectSpread({
45
+ _hover: {
66
46
  borderColor: 'red.800',
67
- color: 'red.800'
68
- }, disabledButtonHoverStyle)
47
+ color: 'red.800',
48
+ ...disabledButtonHoverStyle
49
+ }
69
50
  };
70
- var variants = {
51
+ const variants = {
71
52
  primary: {
72
53
  bg: 'primary.default',
73
54
  borderColor: 'primary.default',
74
55
  color: 'white',
75
- _hover: _objectSpread({
56
+ _hover: {
76
57
  bg: 'primary.600',
77
58
  borderColor: 'primary.600',
78
- color: 'white'
79
- }, disabledButtonHoverStyle)
59
+ color: 'white',
60
+ ...disabledButtonHoverStyle
61
+ }
80
62
  },
81
63
  primaryOnDark: {
82
64
  bg: 'yellow.default',
83
65
  borderColor: 'yellow.default',
84
66
  color: 'black',
85
- _hover: _objectSpread({
67
+ _hover: {
86
68
  bg: 'yellow.500',
87
69
  borderColor: 'yellow.500',
88
- color: 'black'
89
- }, disabledButtonHoverStyle),
70
+ color: 'black',
71
+ ...disabledButtonHoverStyle
72
+ },
90
73
  _focus: {
91
74
  boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
92
75
  }
@@ -95,20 +78,22 @@ var variants = {
95
78
  bg: 'white',
96
79
  borderColor: 'gray.medium',
97
80
  color: 'primary.default',
98
- _hover: _objectSpread({
81
+ _hover: {
99
82
  borderColor: 'primary.600',
100
- color: 'primary.600'
101
- }, disabledButtonHoverStyle)
83
+ color: 'primary.600',
84
+ ...disabledButtonHoverStyle
85
+ }
102
86
  },
103
87
  secondaryOnDark: {
104
88
  bg: 'none',
105
89
  borderColor: 'white',
106
90
  color: 'white',
107
- _hover: _objectSpread({
91
+ _hover: {
108
92
  bg: 'white',
109
93
  borderColor: 'white',
110
- color: 'black'
111
- }, disabledButtonHoverStyle),
94
+ color: 'black',
95
+ ...disabledButtonHoverStyle
96
+ },
112
97
  _focus: {
113
98
  boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
114
99
  }
@@ -156,18 +141,20 @@ var variants = {
156
141
  }
157
142
  }
158
143
  },
159
- destructive: _objectSpread({}, destructiveButtonStyles),
160
- destructiveOnDark: _objectSpread({}, destructiveButtonStyles)
144
+ destructive: {
145
+ ...destructiveButtonStyles
146
+ },
147
+ destructiveOnDark: {
148
+ ...destructiveButtonStyles
149
+ }
161
150
  };
162
151
  exports.variants = variants;
163
- var defaultProps = {
152
+ const defaultProps = {
164
153
  size: null
165
154
  };
166
-
167
155
  var _default = (0, _merge.default)(_theme.default.components.Button, {
168
- variants: variants,
169
- baseStyle: baseStyle,
170
- defaultProps: defaultProps
156
+ variants,
157
+ baseStyle,
158
+ defaultProps
171
159
  });
172
-
173
160
  exports.default = _default;
@@ -1,90 +1,72 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
11
-
12
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
9
  var _Button = require("./Button.styles");
15
-
16
- var props = {
10
+ const props = {
17
11
  /**
18
12
  * Alters the underlying html tag
19
13
  */
20
14
  as: _propTypes.default.string,
21
-
22
15
  /**
23
16
  * If `true`, the button will render as an anchor.
24
17
  */
25
18
  asAnchor: _propTypes.default.bool,
26
-
27
19
  /**
28
20
  * If `true`, and an anchor button, target="_blank" and rel="noopener noreferrer" will be set on the anchor
29
21
  * "isExternal" is used to maintain parity with the Link component.
30
22
  */
31
23
  isExternal: _propTypes.default.bool,
32
-
33
24
  /**
34
25
  * If `true`, the button will show a spinner.
35
26
  */
36
27
  isLoading: _propTypes.default.bool,
37
-
38
28
  /**
39
29
  * If `true`, the button will be styled in its active state.
40
30
  */
41
31
  isActive: _propTypes.default.bool,
42
-
43
32
  /**
44
33
  * If `true`, the button will be disabled.
45
34
  */
46
35
  isDisabled: _propTypes.default.bool,
47
-
48
36
  /**
49
37
  * The label to show in the button when `isLoading` is true
50
38
  * If no text is passed, it only shows the spinner
51
39
  */
52
40
  loadingText: _propTypes.default.string,
53
-
54
41
  /**
55
42
  * If `true`, the button will take up the full width of its container.
56
43
  */
57
44
  isFullWidth: _propTypes.default.bool,
58
-
59
45
  /**
60
46
  * The html button type to use.
61
47
  */
62
48
  type: _propTypes.default.oneOf(['button', 'reset', 'submit']),
63
-
64
49
  /**
65
50
  * If added, the button will show an icon before the button's label.
66
51
  * @type PropTypes.node
67
52
  */
68
53
  leftIcon: _propTypes.default.node,
69
-
70
54
  /**
71
55
  * If added, the button will show an icon after the button's label.
72
56
  * @type PropTypes.node
73
57
  */
74
58
  rightIcon: _propTypes.default.node,
75
-
76
59
  /**
77
60
  * The space between the button icon and label.
78
61
  * @type SystemProps["marginRight"]
79
62
  */
80
63
  iconSpacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
81
-
82
64
  /**
83
65
  * Replace the spinner component when `isLoading` is set to `true`
84
66
  * @type PropTypes.node
85
67
  */
86
68
  spinner: _propTypes.default.node,
87
- variant: _propTypes.default.oneOf((0, _keys.default)(_Button.variants))
69
+ variant: _propTypes.default.oneOf(Object.keys(_Button.variants))
88
70
  };
89
71
  var _default = props;
90
72
  exports.default = _default;
@@ -1,23 +1,20 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  Object.defineProperty(exports, "Button", {
9
8
  enumerable: true,
10
- get: function get() {
9
+ get: function () {
11
10
  return _Button.default;
12
11
  }
13
12
  });
14
13
  Object.defineProperty(exports, "ButtonGroup", {
15
14
  enumerable: true,
16
- get: function get() {
15
+ get: function () {
17
16
  return _react.ButtonGroup;
18
17
  }
19
18
  });
20
-
21
19
  var _Button = _interopRequireDefault(require("./Button"));
22
-
23
20
  var _react = require("@chakra-ui/react");
@@ -1,33 +1,22 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
11
-
12
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
13
-
14
9
  var _react = _interopRequireDefault(require("react"));
15
-
16
10
  var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
17
-
18
11
  var _react2 = require("@chakra-ui/react");
19
-
20
12
  var _check = _interopRequireDefault(require("@spothero/icons/check"));
21
-
22
13
  var _Button = _interopRequireDefault(require("../Button"));
23
-
24
14
  var _buttonProps = _interopRequireDefault(require("../button-props"));
25
-
26
- var ButtonTemplate = function ButtonTemplate(props, _ref) {
27
- var _context;
28
-
29
- var hasDarkBackground = _ref.hasDarkBackground;
30
- var variant = (0, _concat.default)(_context = "".concat(props.variant)).call(_context, hasDarkBackground ? 'OnDark' : '');
15
+ const ButtonTemplate = (props, _ref) => {
16
+ let {
17
+ hasDarkBackground
18
+ } = _ref;
19
+ const variant = `${props.variant}${hasDarkBackground ? 'OnDark' : ''}`;
31
20
  return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
32
21
  mb: 4
33
22
  }, /*#__PURE__*/_react.default.createElement(_react2.Text, {
@@ -54,6 +43,5 @@ var ButtonTemplate = function ButtonTemplate(props, _ref) {
54
43
  mb: 4
55
44
  }), "As Anchor"))));
56
45
  };
57
-
58
46
  var _default = ButtonTemplate;
59
47
  exports.default = _default;
@@ -1,38 +1,15 @@
1
1
  "use strict";
2
2
 
3
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
4
-
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
-
7
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
8
-
9
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
10
-
11
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
12
-
13
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
-
15
4
  Object.defineProperty(exports, "__esModule", {
16
5
  value: true
17
6
  });
18
7
  exports.default = exports.Tertiary = exports.Secondary = exports.Primary = exports.Overview = exports.Destructive = void 0;
19
-
20
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
-
22
8
  var _button = _interopRequireDefault(require("./button"));
23
-
24
9
  var _overview = _interopRequireDefault(require("./overview"));
25
-
26
10
  var _Button = _interopRequireDefault(require("../Button"));
27
-
28
11
  var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
29
-
30
12
  var _createControl = require("storybook/utils/create-control");
31
-
32
- 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; }
33
-
34
- 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; }
35
-
36
13
  var _default = {
37
14
  title: 'v2/Button',
38
15
  component: {
@@ -43,26 +20,25 @@ var _default = {
43
20
  removeBaseHtmlClass: true,
44
21
  chakraLink: 'https://chakra-ui.com/docs/form/button'
45
22
  },
46
- argTypes: _objectSpread(_objectSpread({}, (0, _disableArgs.default)('children')), {}, {
23
+ argTypes: {
24
+ ...(0, _disableArgs.default)('children'),
47
25
  onClick: {
48
26
  action: 'clicked'
49
27
  }
50
- })
28
+ }
51
29
  };
52
30
  exports.default = _default;
53
-
54
- var Overview = _overview.default.bind({});
55
-
31
+ const Overview = _overview.default.bind({});
56
32
  exports.Overview = Overview;
57
-
58
- var Primary = _button.default.bind({});
59
-
33
+ const Primary = _button.default.bind({});
60
34
  exports.Primary = Primary;
61
- Primary.argTypes = _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit'])), (0, _disableArgs.default)('variant')), {}, {
35
+ Primary.argTypes = {
36
+ ...(0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit']),
37
+ ...(0, _disableArgs.default)('variant'),
62
38
  onClick: {
63
39
  action: 'clicked'
64
40
  }
65
- });
41
+ };
66
42
  Primary.args = {
67
43
  children: 'Primary',
68
44
  variant: 'primary',
@@ -71,15 +47,15 @@ Primary.args = {
71
47
  loadingText: 'Loading',
72
48
  isFullWidth: false
73
49
  };
74
-
75
- var Secondary = _button.default.bind({});
76
-
50
+ const Secondary = _button.default.bind({});
77
51
  exports.Secondary = Secondary;
78
- Secondary.argTypes = _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit'])), (0, _disableArgs.default)('variant')), {}, {
52
+ Secondary.argTypes = {
53
+ ...(0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit']),
54
+ ...(0, _disableArgs.default)('variant'),
79
55
  onClick: {
80
56
  action: 'clicked'
81
57
  }
82
- });
58
+ };
83
59
  Secondary.args = {
84
60
  children: 'Secondary',
85
61
  variant: 'secondary',
@@ -88,15 +64,15 @@ Secondary.args = {
88
64
  loadingText: 'Loading',
89
65
  isFullWidth: false
90
66
  };
91
-
92
- var Tertiary = _button.default.bind({});
93
-
67
+ const Tertiary = _button.default.bind({});
94
68
  exports.Tertiary = Tertiary;
95
- Tertiary.argTypes = _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit'])), (0, _disableArgs.default)('variant')), {}, {
69
+ Tertiary.argTypes = {
70
+ ...(0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit']),
71
+ ...(0, _disableArgs.default)('variant'),
96
72
  onClick: {
97
73
  action: 'clicked'
98
74
  }
99
- });
75
+ };
100
76
  Tertiary.args = {
101
77
  children: 'tertiary',
102
78
  variant: 'tertiary',
@@ -105,15 +81,15 @@ Tertiary.args = {
105
81
  loadingText: 'Loading',
106
82
  isFullWidth: false
107
83
  };
108
-
109
- var Destructive = _button.default.bind({});
110
-
84
+ const Destructive = _button.default.bind({});
111
85
  exports.Destructive = Destructive;
112
- Destructive.argTypes = _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit'])), (0, _disableArgs.default)('variant')), {}, {
86
+ Destructive.argTypes = {
87
+ ...(0, _createControl.createSelectControl)('type', ['button', 'reset', 'submit']),
88
+ ...(0, _disableArgs.default)('variant'),
113
89
  onClick: {
114
90
  action: 'clicked'
115
91
  }
116
- });
92
+ };
117
93
  Destructive.args = {
118
94
  children: 'destructive',
119
95
  variant: 'destructive',
@@ -1,96 +1,68 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
11
-
12
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
13
-
14
- var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
15
-
16
- var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
17
-
18
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
19
-
20
9
  var _react = _interopRequireDefault(require("react"));
21
-
22
10
  var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
23
-
24
11
  var _react2 = require("@chakra-ui/react");
25
-
26
12
  var _check = _interopRequireDefault(require("@spothero/icons/check"));
27
-
28
13
  var _Button = _interopRequireDefault(require("../Button"));
29
-
30
14
  var _Button2 = require("../Button.styles");
31
-
32
15
  var _Text = _interopRequireDefault(require("../../Text/Text"));
33
-
34
- var variationsArray = function variationsArray(_ref) {
35
- var _context;
36
-
37
- var baseVariantName = _ref.baseVariantName,
38
- hasDarkBackground = _ref.hasDarkBackground;
39
- var variant = (0, _concat.default)(_context = "".concat(baseVariantName)).call(_context, hasDarkBackground ? 'OnDark' : '');
16
+ const variationsArray = _ref => {
17
+ let {
18
+ baseVariantName,
19
+ hasDarkBackground
20
+ } = _ref;
21
+ const variant = `${baseVariantName}${hasDarkBackground ? 'OnDark' : ''}`;
40
22
  return [{
41
- variant: variant,
23
+ variant,
42
24
  children: variant
43
25
  }, {
44
- variant: variant,
45
- children: "".concat(variant, " isDisabled"),
26
+ variant,
27
+ children: `${variant} isDisabled`,
46
28
  isDisabled: true
47
29
  }, {
48
- variant: variant,
49
- children: "".concat(variant, " isLoading"),
30
+ variant,
31
+ children: `${variant} isLoading`,
50
32
  isLoading: true,
51
33
  loadingText: 'loading (optional)'
52
34
  }, {
53
- variant: variant,
54
- children: "leftIcon",
35
+ variant,
36
+ children: `leftIcon`,
55
37
  leftIcon: /*#__PURE__*/_react.default.createElement(_check.default, {
56
38
  width: "1rem"
57
39
  })
58
40
  }, {
59
- variant: variant,
60
- children: "".concat(variant, " asAnchor"),
41
+ variant,
42
+ children: `${variant} asAnchor`,
61
43
  asAnchor: true,
62
44
  href: '#'
63
45
  }];
64
46
  };
65
-
66
- var OverviewTemplate = function OverviewTemplate(args, _ref2) {
67
- var _context2, _context3;
68
-
69
- var hasDarkBackground = _ref2.hasDarkBackground;
70
- 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) {
71
- return !/ondark/i.test(name);
72
- })).call(_context2, function (baseVariantName, index) {
73
- var _context4;
74
-
75
- return /*#__PURE__*/_react.default.createElement(_react2.Box, {
76
- key: index,
77
- mb: 4
78
- }, /*#__PURE__*/_react.default.createElement(_Text.default, {
79
- mb: "2",
80
- color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
81
- }, (0, _capitalize.default)(baseVariantName), ":"), /*#__PURE__*/_react.default.createElement(_react2.Box, null, (0, _map.default)(_context4 = variationsArray({
82
- baseVariantName: baseVariantName,
83
- hasDarkBackground: hasDarkBackground
84
- })).call(_context4, function (props, key) {
85
- return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
86
- key: key
87
- }, props, {
88
- mr: 4,
89
- mb: 4
90
- }));
91
- })));
92
- }));
47
+ const OverviewTemplate = (args, _ref2) => {
48
+ let {
49
+ hasDarkBackground
50
+ } = _ref2;
51
+ return /*#__PURE__*/_react.default.createElement(_react2.Box, null, Object.keys(_Button2.variants).filter(name => !/ondark/i.test(name)).map((baseVariantName, index) => /*#__PURE__*/_react.default.createElement(_react2.Box, {
52
+ key: index,
53
+ mb: 4
54
+ }, /*#__PURE__*/_react.default.createElement(_Text.default, {
55
+ mb: "2",
56
+ color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
57
+ }, (0, _capitalize.default)(baseVariantName), ":"), /*#__PURE__*/_react.default.createElement(_react2.Box, null, variationsArray({
58
+ baseVariantName,
59
+ hasDarkBackground
60
+ }).map((props, key) => /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
61
+ key: key
62
+ }, props, {
63
+ mr: 4,
64
+ mb: 4
65
+ })))))));
93
66
  };
94
-
95
67
  var _default = OverviewTemplate;
96
68
  exports.default = _default;
@@ -1,38 +1,23 @@
1
1
  "use strict";
2
2
 
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
-
5
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
6
-
7
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
-
9
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
10
-
11
4
  Object.defineProperty(exports, "__esModule", {
12
5
  value: true
13
6
  });
14
7
  exports.default = void 0;
15
-
16
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
17
-
18
9
  var _react = _interopRequireWildcard(require("react"));
19
-
20
10
  var _react2 = require("@chakra-ui/react");
21
-
22
- 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); }
23
-
24
- 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; }
25
-
26
- var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
27
- return /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _extends2.default)({
28
- position: "relative",
29
- padding: 4,
30
- bgColor: "background.white",
31
- borderRadius: "lg",
32
- boxShadow: "md"
33
- }, props, {
34
- ref: ref
35
- }));
36
- });
11
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
12
+ 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; }
13
+ const Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _extends2.default)({
14
+ position: "relative",
15
+ padding: 4,
16
+ bgColor: "background.white",
17
+ borderRadius: "lg",
18
+ boxShadow: "md"
19
+ }, props, {
20
+ ref: ref
21
+ })));
37
22
  var _default = Card;
38
23
  exports.default = _default;