@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.
- package/dist/components/Accordion/Accordion.stories.js +57 -49
- package/dist/components/Accordion/AccordionActionButton.js +31 -0
- package/dist/components/Accordion/index.js +17 -14
- package/dist/components/Accordion/styles/index.js +64 -19
- package/dist/components/Alert/Alert.js +26 -59
- package/dist/components/Alert/Alert.stories.js +18 -47
- package/dist/components/Alert/index.js +1 -3
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +84 -119
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +4 -12
- package/dist/components/AutoSuggestSelect/index.js +1 -3
- package/dist/components/Badge/Badge.js +1 -2
- package/dist/components/Badge/Badge.stories.js +12 -20
- package/dist/components/Badge/styles/index.js +6 -12
- package/dist/components/Button/Button.js +17 -47
- package/dist/components/Button/Button.spec.js +4 -10
- package/dist/components/Button/Button.styles.js +36 -49
- package/dist/components/Button/button-props.js +2 -20
- package/dist/components/Button/index.js +2 -5
- package/dist/components/Button/stories/button.js +5 -17
- package/dist/components/Button/stories/index.stories.js +24 -48
- package/dist/components/Button/stories/overview.js +34 -62
- package/dist/components/Card/Card.js +11 -26
- package/dist/components/Card/Card.stories.js +5 -15
- package/dist/components/Checkbox/Checkbox.js +1 -2
- package/dist/components/Checkbox/Checkbox.stories.js +2 -10
- package/dist/components/Checkbox/index.js +1 -3
- package/dist/components/Checkbox/styles/index.js +3 -11
- package/dist/components/Container/Container.js +5 -21
- package/dist/components/Container/Container.stories.js +14 -43
- package/dist/components/Container/Container.styles.js +1 -1
- package/dist/components/Divider/Divider.js +8 -24
- package/dist/components/Divider/Divider.stories.js +3 -15
- package/dist/components/Divider/Divider.styles.js +2 -8
- package/dist/components/FormControl/FormControl.js +13 -29
- package/dist/components/Grid/Grid.js +7 -24
- package/dist/components/Grid/Grid.stories.js +36 -60
- package/dist/components/Grid/Grid.styles.js +2 -2
- package/dist/components/Grid/GridItem.js +5 -21
- package/dist/components/Grid/GridItem.styles.js +2 -1
- package/dist/components/Grid/index.js +2 -5
- package/dist/components/Heading/Heading.js +8 -29
- package/dist/components/Heading/Heading.stories.js +4 -15
- package/dist/components/Heading/Heading.styles.js +24 -38
- package/dist/components/Icon/Icon.js +1 -2
- package/dist/components/Icon/Icon.stories.js +19 -28
- package/dist/components/Image/Image.js +39 -69
- package/dist/components/Image/Image.spec.js +16 -22
- package/dist/components/Image/Image.stories.js +8 -19
- package/dist/components/Input/Input.js +14 -31
- package/dist/components/Input/Input.stories.js +5 -15
- package/dist/components/Input/index.js +1 -3
- package/dist/components/Input/styles/index.js +4 -10
- package/dist/components/Link/Link.js +1 -2
- package/dist/components/Link/Link.stories.js +5 -12
- package/dist/components/Link/Link.styles.js +8 -8
- package/dist/components/List/List.js +14 -37
- package/dist/components/List/List.stories.js +18 -59
- package/dist/components/List/index.js +2 -5
- package/dist/components/List/styles/index.js +2 -9
- package/dist/components/List/styles/item.styles.js +1 -1
- package/dist/components/Loader/Loader.js +17 -33
- package/dist/components/Loader/Loader.stories.js +24 -44
- package/dist/components/Modal/Modal.js +13 -28
- package/dist/components/Modal/Modal.stories.js +30 -100
- package/dist/components/Modal/index.js +1 -3
- package/dist/components/Modal/styles/body.js +11 -28
- package/dist/components/Modal/styles/closeButton.js +4 -4
- package/dist/components/Modal/styles/dialog.js +4 -4
- package/dist/components/Modal/styles/dialogContainer.js +5 -11
- package/dist/components/Modal/styles/header.js +5 -5
- package/dist/components/Modal/styles/index.js +12 -28
- package/dist/components/Popover/Popover.js +12 -33
- package/dist/components/Popover/Popover.stories.js +36 -62
- package/dist/components/Popover/PopoverArrow.js +3 -17
- package/dist/components/Popover/PopoverCloseButton.js +3 -17
- package/dist/components/Popover/PopoverContent.js +10 -27
- package/dist/components/Popover/index.js +4 -8
- package/dist/components/Popover/styles/index.js +9 -22
- package/dist/components/Popover/styles/popover-arrow.js +4 -4
- package/dist/components/Popover/styles/popover-body.js +3 -7
- package/dist/components/Popover/styles/popover-close-button.js +7 -10
- package/dist/components/Popover/styles/popover-content.js +5 -7
- package/dist/components/Popover/styles/popover-header.js +1 -1
- package/dist/components/Popover/styles/popper.js +1 -1
- package/dist/components/Radio/Radio.js +12 -27
- package/dist/components/Radio/Radio.stories.js +2 -12
- package/dist/components/Radio/RadioGroup.js +17 -33
- package/dist/components/Radio/index.js +2 -5
- package/dist/components/Radio/styles/index.js +5 -13
- package/dist/components/Select/Select.js +14 -33
- package/dist/components/Select/Select.stories.js +13 -22
- package/dist/components/Select/index.js +1 -3
- package/dist/components/Select/styles/index.js +4 -14
- package/dist/components/Skeleton/Skeleton.stories.js +6 -20
- package/dist/components/Skeleton/Skeleton.styles.js +0 -3
- package/dist/components/Skeleton/index.js +3 -4
- package/dist/components/Spinner/Spinner.js +9 -25
- package/dist/components/Spinner/Spinner.stories.js +42 -70
- package/dist/components/Spinner/Spinner.styles.js +56 -43
- package/dist/components/Switch/Switch.js +13 -30
- package/dist/components/Switch/Switch.stories.js +2 -10
- package/dist/components/Switch/index.js +1 -3
- package/dist/components/Switch/styles/index.js +10 -31
- package/dist/components/Table/Table.js +1 -2
- package/dist/components/Table/Table.stories.js +17 -37
- package/dist/components/Table/Table.styles.js +13 -32
- package/dist/components/Table/index.js +8 -11
- package/dist/components/Tabs/Tabs.js +14 -22
- package/dist/components/Tabs/Tabs.stories.js +4 -20
- package/dist/components/Tabs/combineSizeWithVariant.js +11 -17
- package/dist/components/Tabs/index.js +5 -8
- package/dist/components/Tabs/styles/index.js +2 -8
- package/dist/components/Text/Text.js +8 -17
- package/dist/components/Text/Text.stories.js +3 -15
- package/dist/components/Text/Text.styles.js +15 -35
- package/dist/components/Text/combineAsWithVariant.js +36 -57
- package/dist/components/Text/options.js +1 -1
- package/dist/components/ThemeProvider/ThemeProvider.js +10 -33
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +7 -16
- package/dist/components/Toast/Toast.stories.js +11 -34
- package/dist/components/index.js +89 -156
- package/dist/components/styles.js +20 -41
- package/dist/theme/base/breakpoints.js +1 -4
- package/dist/theme/base/colors.js +32 -45
- package/dist/theme/base/index.js +10 -17
- package/dist/theme/base/notifications.js +5 -16
- package/dist/theme/base/sizes.js +4 -4
- package/dist/theme/base/typography.js +5 -6
- package/dist/theme/base/zindices.js +1 -2
- package/dist/theme/global.js +87 -20
- package/dist/theme/index.js +15 -41
- package/dist/utils/Spaces.js +5 -12
- package/package.json +3 -3
- package/dist/components/Accordion/Accordion.js +0 -13
- package/dist/components/Accordion/styles/button.js +0 -23
- package/dist/components/Accordion/styles/container.js +0 -15
- 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
|
-
};
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
41
|
+
const destructiveButtonStyles = {
|
|
62
42
|
bg: 'white',
|
|
63
43
|
borderColor: 'red.default',
|
|
64
44
|
color: 'red.default',
|
|
65
|
-
_hover:
|
|
45
|
+
_hover: {
|
|
66
46
|
borderColor: 'red.800',
|
|
67
|
-
color: 'red.800'
|
|
68
|
-
|
|
47
|
+
color: 'red.800',
|
|
48
|
+
...disabledButtonHoverStyle
|
|
49
|
+
}
|
|
69
50
|
};
|
|
70
|
-
|
|
51
|
+
const variants = {
|
|
71
52
|
primary: {
|
|
72
53
|
bg: 'primary.default',
|
|
73
54
|
borderColor: 'primary.default',
|
|
74
55
|
color: 'white',
|
|
75
|
-
_hover:
|
|
56
|
+
_hover: {
|
|
76
57
|
bg: 'primary.600',
|
|
77
58
|
borderColor: 'primary.600',
|
|
78
|
-
color: 'white'
|
|
79
|
-
|
|
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:
|
|
67
|
+
_hover: {
|
|
86
68
|
bg: 'yellow.500',
|
|
87
69
|
borderColor: 'yellow.500',
|
|
88
|
-
color: 'black'
|
|
89
|
-
|
|
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:
|
|
81
|
+
_hover: {
|
|
99
82
|
borderColor: 'primary.600',
|
|
100
|
-
color: 'primary.600'
|
|
101
|
-
|
|
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:
|
|
91
|
+
_hover: {
|
|
108
92
|
bg: 'white',
|
|
109
93
|
borderColor: 'white',
|
|
110
|
-
color: 'black'
|
|
111
|
-
|
|
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:
|
|
160
|
-
|
|
144
|
+
destructive: {
|
|
145
|
+
...destructiveButtonStyles
|
|
146
|
+
},
|
|
147
|
+
destructiveOnDark: {
|
|
148
|
+
...destructiveButtonStyles
|
|
149
|
+
}
|
|
161
150
|
};
|
|
162
151
|
exports.variants = variants;
|
|
163
|
-
|
|
152
|
+
const defaultProps = {
|
|
164
153
|
size: null
|
|
165
154
|
};
|
|
166
|
-
|
|
167
155
|
var _default = (0, _merge.default)(_theme.default.components.Button, {
|
|
168
|
-
variants
|
|
169
|
-
baseStyle
|
|
170
|
-
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(
|
|
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
|
|
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
|
|
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
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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:
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
|
23
|
+
variant,
|
|
42
24
|
children: variant
|
|
43
25
|
}, {
|
|
44
|
-
variant
|
|
45
|
-
children:
|
|
26
|
+
variant,
|
|
27
|
+
children: `${variant} isDisabled`,
|
|
46
28
|
isDisabled: true
|
|
47
29
|
}, {
|
|
48
|
-
variant
|
|
49
|
-
children:
|
|
30
|
+
variant,
|
|
31
|
+
children: `${variant} isLoading`,
|
|
50
32
|
isLoading: true,
|
|
51
33
|
loadingText: 'loading (optional)'
|
|
52
34
|
}, {
|
|
53
|
-
variant
|
|
54
|
-
children:
|
|
35
|
+
variant,
|
|
36
|
+
children: `leftIcon`,
|
|
55
37
|
leftIcon: /*#__PURE__*/_react.default.createElement(_check.default, {
|
|
56
38
|
width: "1rem"
|
|
57
39
|
})
|
|
58
40
|
}, {
|
|
59
|
-
variant
|
|
60
|
-
children:
|
|
41
|
+
variant,
|
|
42
|
+
children: `${variant} asAnchor`,
|
|
61
43
|
asAnchor: true,
|
|
62
44
|
href: '#'
|
|
63
45
|
}];
|
|
64
46
|
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
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;
|