@spothero/ui 17.0.3 → 17.1.0-beta.3

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