@spothero/ui 22.3.2 → 22.3.9-beta.0
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/index.cjs.js +54151 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.esm.js +53999 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +39 -40
- package/dist/components/Accordion/Accordion.stories.js +0 -91
- package/dist/components/Accordion/AccordionActionButton.js +0 -29
- package/dist/components/Accordion/index.js +0 -44
- package/dist/components/Accordion/styles/index.js +0 -76
- package/dist/components/Alert/Alert.js +0 -83
- package/dist/components/Alert/Alert.stories.js +0 -49
- package/dist/components/Alert/index.js +0 -13
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +0 -148
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +0 -19
- package/dist/components/AutoSuggestSelect/index.js +0 -13
- package/dist/components/Badge/Badge.js +0 -12
- package/dist/components/Badge/Badge.stories.js +0 -28
- package/dist/components/Badge/styles/index.js +0 -32
- package/dist/components/Button/Button.js +0 -36
- package/dist/components/Button/Button.spec.js +0 -25
- package/dist/components/Button/Button.styles.js +0 -164
- package/dist/components/Button/button-props.js +0 -71
- package/dist/components/Button/index.js +0 -20
- package/dist/components/Button/stories/button.js +0 -45
- package/dist/components/Button/stories/index.stories.js +0 -94
- package/dist/components/Button/stories/overview.js +0 -63
- package/dist/components/Card/Card.js +0 -22
- package/dist/components/Card/Card.stories.js +0 -29
- package/dist/components/Checkbox/Checkbox.js +0 -38
- package/dist/components/Checkbox/Checkbox.stories.js +0 -65
- package/dist/components/Checkbox/index.js +0 -13
- package/dist/components/Checkbox/styles/index.js +0 -89
- package/dist/components/Container/Container.js +0 -17
- package/dist/components/Container/Container.stories.js +0 -43
- package/dist/components/Container/Container.styles.js +0 -16
- package/dist/components/CreatableSelect/CreatableSelect.js +0 -124
- package/dist/components/CreatableSelect/CreatableSelect.stories.js +0 -55
- package/dist/components/CreatableSelect/index.js +0 -13
- package/dist/components/Divider/Divider.js +0 -29
- package/dist/components/Divider/Divider.stories.js +0 -35
- package/dist/components/Divider/Divider.styles.js +0 -20
- package/dist/components/Drawer/Drawer.js +0 -24
- package/dist/components/Drawer/Drawer.stories.js +0 -39
- package/dist/components/Drawer/index.js +0 -56
- package/dist/components/Drawer/styles/index.js +0 -104
- package/dist/components/FormControl/FormControl.js +0 -67
- package/dist/components/Grid/Grid.js +0 -28
- package/dist/components/Grid/Grid.stories.js +0 -100
- package/dist/components/Grid/Grid.styles.js +0 -17
- package/dist/components/Grid/GridItem.js +0 -17
- package/dist/components/Grid/GridItem.styles.js +0 -13
- package/dist/components/Grid/index.js +0 -20
- package/dist/components/Heading/Heading.js +0 -27
- package/dist/components/Heading/Heading.stories.js +0 -41
- package/dist/components/Heading/Heading.styles.js +0 -63
- package/dist/components/Icon/Icon.js +0 -12
- package/dist/components/Icon/Icon.stories.js +0 -36
- package/dist/components/Image/Image.js +0 -73
- package/dist/components/Image/Image.spec.js +0 -77
- package/dist/components/Image/Image.stories.js +0 -74
- package/dist/components/Input/Input.js +0 -44
- package/dist/components/Input/Input.stories.js +0 -59
- package/dist/components/Input/index.js +0 -13
- package/dist/components/Input/styles/index.js +0 -64
- package/dist/components/Link/Link.js +0 -12
- package/dist/components/Link/Link.stories.js +0 -49
- package/dist/components/Link/Link.styles.js +0 -44
- package/dist/components/List/List.js +0 -61
- package/dist/components/List/List.stories.js +0 -75
- package/dist/components/List/index.js +0 -20
- package/dist/components/List/styles/index.js +0 -16
- package/dist/components/List/styles/item.styles.js +0 -10
- package/dist/components/Loader/Loader.js +0 -44
- package/dist/components/Loader/Loader.stories.js +0 -116
- package/dist/components/Menu/Menu.js +0 -16
- package/dist/components/Menu/Menu.stories.js +0 -159
- package/dist/components/Menu/Menu.styles.js +0 -173
- package/dist/components/Menu/index.js +0 -56
- package/dist/components/Modal/Modal.js +0 -42
- package/dist/components/Modal/Modal.stories.js +0 -184
- package/dist/components/Modal/index.js +0 -32
- package/dist/components/Modal/styles/body.js +0 -30
- package/dist/components/Modal/styles/closeButton.js +0 -24
- package/dist/components/Modal/styles/dialog.js +0 -22
- package/dist/components/Modal/styles/dialogContainer.js +0 -19
- package/dist/components/Modal/styles/footer.js +0 -11
- package/dist/components/Modal/styles/header.js +0 -17
- package/dist/components/Modal/styles/index.js +0 -53
- package/dist/components/Modal/styles/overlay.js +0 -10
- package/dist/components/Popover/Popover.js +0 -26
- package/dist/components/Popover/Popover.stories.js +0 -80
- package/dist/components/Popover/PopoverArrow.js +0 -19
- package/dist/components/Popover/PopoverCloseButton.js +0 -19
- package/dist/components/Popover/PopoverContent.js +0 -38
- package/dist/components/Popover/index.js +0 -40
- package/dist/components/Popover/styles/index.js +0 -24
- package/dist/components/Popover/styles/popover-arrow.js +0 -12
- package/dist/components/Popover/styles/popover-body.js +0 -10
- package/dist/components/Popover/styles/popover-close-button.js +0 -26
- package/dist/components/Popover/styles/popover-content.js +0 -26
- package/dist/components/Popover/styles/popover-header.js +0 -11
- package/dist/components/Popover/styles/popper.js +0 -10
- package/dist/components/Progress/Progress.js +0 -37
- package/dist/components/Progress/Progress.stories.js +0 -79
- package/dist/components/Progress/Progress.styles.js +0 -122
- package/dist/components/Radio/Radio.js +0 -37
- package/dist/components/Radio/Radio.stories.js +0 -138
- package/dist/components/Radio/RadioGroup.js +0 -47
- package/dist/components/Radio/index.js +0 -20
- package/dist/components/Radio/styles/index.js +0 -118
- package/dist/components/RefreshedInput/Button/Button.js +0 -67
- package/dist/components/RefreshedInput/Button/Button.stories.js +0 -79
- package/dist/components/RefreshedInput/Button/index.js +0 -13
- package/dist/components/RefreshedInput/Button/styles/index.js +0 -25
- package/dist/components/RefreshedInput/FormControl/index.js +0 -167
- package/dist/components/RefreshedInput/Input/Input.js +0 -61
- package/dist/components/RefreshedInput/Input/Input.stories.js +0 -74
- package/dist/components/RefreshedInput/Input/index.js +0 -13
- package/dist/components/RefreshedInput/Input/styles/index.js +0 -23
- package/dist/components/RefreshedInput/Select/Select.js +0 -65
- package/dist/components/RefreshedInput/Select/Select.stories.js +0 -80
- package/dist/components/RefreshedInput/Select/index.js +0 -13
- package/dist/components/RefreshedInput/Select/styles/index.js +0 -26
- package/dist/components/RefreshedInput/index.js +0 -34
- package/dist/components/RefreshedInput/storyAid/index.js +0 -19
- package/dist/components/Select/Select.js +0 -50
- package/dist/components/Select/Select.stories.js +0 -63
- package/dist/components/Select/index.js +0 -13
- package/dist/components/Select/styles/index.js +0 -46
- package/dist/components/SelectionCard/SelectionCard.js +0 -61
- package/dist/components/SelectionCard/SelectionCard.stories.js +0 -90
- package/dist/components/SelectionCard/index.js +0 -13
- package/dist/components/Skeleton/Skeleton.stories.js +0 -23
- package/dist/components/Skeleton/Skeleton.styles.js +0 -9
- package/dist/components/Skeleton/index.js +0 -24
- package/dist/components/Spinner/Spinner.js +0 -29
- package/dist/components/Spinner/Spinner.stories.js +0 -98
- package/dist/components/Spinner/Spinner.styles.js +0 -85
- package/dist/components/Switch/Switch.js +0 -40
- package/dist/components/Switch/Switch.stories.js +0 -76
- package/dist/components/Switch/index.js +0 -13
- package/dist/components/Switch/styles/index.js +0 -32
- package/dist/components/Table/Table.js +0 -12
- package/dist/components/Table/Table.stories.js +0 -69
- package/dist/components/Table/Table.styles.js +0 -66
- package/dist/components/Table/index.js +0 -62
- package/dist/components/Tabs/Tabs.js +0 -35
- package/dist/components/Tabs/Tabs.stories.js +0 -39
- package/dist/components/Tabs/combineSizeWithVariant.js +0 -36
- package/dist/components/Tabs/index.js +0 -38
- package/dist/components/Tabs/styles/index.js +0 -70
- package/dist/components/Text/Text.js +0 -33
- package/dist/components/Text/Text.stories.js +0 -42
- package/dist/components/Text/Text.styles.js +0 -45
- package/dist/components/Text/combineAsWithVariant.js +0 -100
- package/dist/components/Text/options.js +0 -8
- package/dist/components/Textarea/Textarea.js +0 -44
- package/dist/components/Textarea/Textarea.stories.js +0 -59
- package/dist/components/Textarea/index.js +0 -13
- package/dist/components/Textarea/styles/index.js +0 -64
- package/dist/components/ThemeProvider/ThemeProvider.js +0 -39
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +0 -51
- package/dist/components/Toast/Toast.stories.js +0 -77
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js +0 -59
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.js +0 -53
- package/dist/components/ToggleButtonGroup/index.js +0 -13
- package/dist/components/ToggleButtonGroup/styles/index.js +0 -47
- package/dist/components/index.js +0 -785
- package/dist/components/styles.js +0 -188
- package/dist/theme/base/breakpoints.js +0 -23
- package/dist/theme/base/colors.js +0 -138
- package/dist/theme/base/index.js +0 -79
- package/dist/theme/base/notifications.js +0 -198
- package/dist/theme/base/shadows.js +0 -15
- package/dist/theme/base/sizes.js +0 -88
- package/dist/theme/base/typography.js +0 -38
- package/dist/theme/base/zindices.js +0 -33
- package/dist/theme/global.js +0 -110
- package/dist/theme/index.js +0 -33
- package/dist/utils/Spaces.js +0 -16
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
Object.defineProperty(exports, "default", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _Switch.default;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
var _Switch = _interopRequireDefault(require("./Switch"));
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
9
|
-
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
10
|
-
const overrides = {
|
|
11
|
-
defaultProps: {
|
|
12
|
-
colorScheme: 'primary',
|
|
13
|
-
size: 'lg'
|
|
14
|
-
},
|
|
15
|
-
baseStyle: props => (0, _merge.default)(_theme.default.components.Switch.baseStyle(props), {
|
|
16
|
-
track: {
|
|
17
|
-
bg: 'gray.medium',
|
|
18
|
-
overflow: 'clip'
|
|
19
|
-
},
|
|
20
|
-
thumb: {
|
|
21
|
-
transition: 'all 150ms ease',
|
|
22
|
-
boxShadow: 'base',
|
|
23
|
-
_hover: {
|
|
24
|
-
boxShadow: 'md'
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
})
|
|
28
|
-
};
|
|
29
|
-
var _default = exports.default = {
|
|
30
|
-
..._theme.default.components.Switch,
|
|
31
|
-
...overrides
|
|
32
|
-
};
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = exports.Table = void 0;
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _Table = _interopRequireDefault(require("./Table"));
|
|
10
|
-
var _Table2 = require("./Table.styles");
|
|
11
|
-
var _index = require("./index");
|
|
12
|
-
var _default = exports.default = {
|
|
13
|
-
title: 'v2/Table',
|
|
14
|
-
parameters: {
|
|
15
|
-
removeBaseHtmlClass: true
|
|
16
|
-
},
|
|
17
|
-
argTypes: {
|
|
18
|
-
numberOfColumns: {
|
|
19
|
-
table: {
|
|
20
|
-
disable: true
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
numberOfRows: {
|
|
24
|
-
table: {
|
|
25
|
-
disable: true
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
tableData: {
|
|
29
|
-
table: {
|
|
30
|
-
disable: true
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
tableHeading: {
|
|
34
|
-
table: {
|
|
35
|
-
disable: true
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
variant: {
|
|
39
|
-
control: {
|
|
40
|
-
type: 'select',
|
|
41
|
-
options: Object.keys(_Table2.variants)
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
const TableTemplate = ({
|
|
47
|
-
numberOfColumns,
|
|
48
|
-
numberOfRows,
|
|
49
|
-
tableData,
|
|
50
|
-
tableHeading,
|
|
51
|
-
variant
|
|
52
|
-
}) => {
|
|
53
|
-
return /*#__PURE__*/_react.default.createElement(_Table.default, {
|
|
54
|
-
variant: variant
|
|
55
|
-
}, /*#__PURE__*/_react.default.createElement(_index.Thead, null, /*#__PURE__*/_react.default.createElement(_index.Tr, null, Array(numberOfColumns).fill(tableHeading).map((heading, index) => /*#__PURE__*/_react.default.createElement(_index.Th, {
|
|
56
|
-
key: index
|
|
57
|
-
}, heading)))), /*#__PURE__*/_react.default.createElement(_index.Tbody, null, Array(numberOfRows).fill(Array(numberOfColumns).fill(tableData)).map((row, i) => /*#__PURE__*/_react.default.createElement(_index.Tr, {
|
|
58
|
-
key: i
|
|
59
|
-
}, row.map((data, index) => /*#__PURE__*/_react.default.createElement(_index.Td, {
|
|
60
|
-
key: index
|
|
61
|
-
}, data))))));
|
|
62
|
-
};
|
|
63
|
-
const Table = exports.Table = TableTemplate.bind({});
|
|
64
|
-
Table.args = {
|
|
65
|
-
numberOfColumns: 3,
|
|
66
|
-
numberOfRows: 3,
|
|
67
|
-
tableData: 'Table cell data',
|
|
68
|
-
tableHeading: 'Column Heading'
|
|
69
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.variants = exports.default = void 0;
|
|
7
|
-
var _Heading = require("../Heading/Heading.styles");
|
|
8
|
-
const parts = ['table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption'];
|
|
9
|
-
const baseStyle = {
|
|
10
|
-
table: {
|
|
11
|
-
borderCollapse: 'collapse',
|
|
12
|
-
color: 'text.primary.light',
|
|
13
|
-
width: '100%'
|
|
14
|
-
},
|
|
15
|
-
thead: {
|
|
16
|
-
borderBottom: '1px',
|
|
17
|
-
borderColor: 'gray.medium'
|
|
18
|
-
},
|
|
19
|
-
th: {
|
|
20
|
-
fontFamily: 'heading',
|
|
21
|
-
fontSize: _Heading.variants.h4.fontSize,
|
|
22
|
-
fontWeight: 'semibold',
|
|
23
|
-
letterSpacing: 'unset',
|
|
24
|
-
padding: 4,
|
|
25
|
-
textAlign: 'start',
|
|
26
|
-
textTransform: 'none'
|
|
27
|
-
},
|
|
28
|
-
tr: {
|
|
29
|
-
borderBottom: '1px',
|
|
30
|
-
borderColor: 'gray.medium',
|
|
31
|
-
_last: {
|
|
32
|
-
border: 'none'
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
td: {
|
|
36
|
-
padding: 4,
|
|
37
|
-
textAlign: 'start'
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
const roundedWhiteVariant = {
|
|
41
|
-
table: {
|
|
42
|
-
backgroundColor: 'background.white',
|
|
43
|
-
borderRadius: 6,
|
|
44
|
-
boxShadow: 'md',
|
|
45
|
-
marginBottom: 1
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
const roundedGrayVariant = {
|
|
49
|
-
table: {
|
|
50
|
-
...roundedWhiteVariant.table,
|
|
51
|
-
backgroundColor: 'background.gray'
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
const variants = exports.variants = {
|
|
55
|
-
rounded: roundedWhiteVariant,
|
|
56
|
-
roundedGray: roundedGrayVariant
|
|
57
|
-
};
|
|
58
|
-
const defaultProps = {
|
|
59
|
-
variant: 'rounded'
|
|
60
|
-
};
|
|
61
|
-
var _default = exports.default = {
|
|
62
|
-
parts,
|
|
63
|
-
variants,
|
|
64
|
-
baseStyle,
|
|
65
|
-
defaultProps
|
|
66
|
-
};
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
Object.defineProperty(exports, "Table", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _Table.default;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(exports, "TableCaption", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function () {
|
|
16
|
-
return _react.TableCaption;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(exports, "TableContainer", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () {
|
|
22
|
-
return _react.TableContainer;
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
Object.defineProperty(exports, "Tbody", {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
get: function () {
|
|
28
|
-
return _react.Tbody;
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
Object.defineProperty(exports, "Td", {
|
|
32
|
-
enumerable: true,
|
|
33
|
-
get: function () {
|
|
34
|
-
return _react.Td;
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
Object.defineProperty(exports, "Tfoot", {
|
|
38
|
-
enumerable: true,
|
|
39
|
-
get: function () {
|
|
40
|
-
return _react.Tfoot;
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
Object.defineProperty(exports, "Th", {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
get: function () {
|
|
46
|
-
return _react.Th;
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
Object.defineProperty(exports, "Thead", {
|
|
50
|
-
enumerable: true,
|
|
51
|
-
get: function () {
|
|
52
|
-
return _react.Thead;
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
Object.defineProperty(exports, "Tr", {
|
|
56
|
-
enumerable: true,
|
|
57
|
-
get: function () {
|
|
58
|
-
return _react.Tr;
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
var _Table = _interopRequireDefault(require("./Table"));
|
|
62
|
-
var _react = require("@chakra-ui/react");
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = exports.SIZE_SMALL = exports.SIZE_HEADING = exports.SIZE_BODY = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _react2 = require("@chakra-ui/react");
|
|
11
|
-
var _combineSizeWithVariant = _interopRequireDefault(require("./combineSizeWithVariant"));
|
|
12
|
-
const SIZE_SMALL = exports.SIZE_SMALL = 'small';
|
|
13
|
-
const SIZE_BODY = exports.SIZE_BODY = 'body';
|
|
14
|
-
const SIZE_HEADING = exports.SIZE_HEADING = 'heading';
|
|
15
|
-
const sizeMapping = {
|
|
16
|
-
[SIZE_SMALL]: 'sm',
|
|
17
|
-
[SIZE_BODY]: 'md',
|
|
18
|
-
[SIZE_HEADING]: 'lg'
|
|
19
|
-
};
|
|
20
|
-
const Tabs = (0, _react2.forwardRef)(({
|
|
21
|
-
size,
|
|
22
|
-
...props
|
|
23
|
-
}, ref) => {
|
|
24
|
-
return /*#__PURE__*/_react.default.createElement(_react2.Tabs, (0, _extends2.default)({
|
|
25
|
-
size: sizeMapping[size]
|
|
26
|
-
}, props, (0, _combineSizeWithVariant.default)({
|
|
27
|
-
size
|
|
28
|
-
}), {
|
|
29
|
-
ref: ref
|
|
30
|
-
}));
|
|
31
|
-
});
|
|
32
|
-
Tabs.defaultProps = {
|
|
33
|
-
size: SIZE_BODY
|
|
34
|
-
};
|
|
35
|
-
var _default = exports.default = Tabs;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = exports.Tabs = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _Tabs = _interopRequireWildcard(require("./Tabs"));
|
|
11
|
-
var _index = require("./index");
|
|
12
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
-
var _default = exports.default = {
|
|
15
|
-
title: 'v2/Tabs',
|
|
16
|
-
parameters: {
|
|
17
|
-
removeBaseHtmlClass: true
|
|
18
|
-
},
|
|
19
|
-
argTypes: {
|
|
20
|
-
size: {
|
|
21
|
-
control: {
|
|
22
|
-
type: 'select',
|
|
23
|
-
options: [_Tabs.SIZE_SMALL, _Tabs.SIZE_BODY, _Tabs.SIZE_HEADING]
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
variant: {
|
|
27
|
-
control: {
|
|
28
|
-
type: 'select',
|
|
29
|
-
options: ['line', 'enclosed']
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
const TabsTemplate = props => {
|
|
35
|
-
return /*#__PURE__*/_react.default.createElement(_Tabs.default, (0, _extends2.default)({
|
|
36
|
-
variant: "line"
|
|
37
|
-
}, props), /*#__PURE__*/_react.default.createElement(_index.TabList, null, /*#__PURE__*/_react.default.createElement(_index.Tab, null, "One"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Two"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Three")), /*#__PURE__*/_react.default.createElement(_index.TabPanels, null, /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement("p", null, "one!")), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement("p", null, "two!")), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement("p", null, "three!"))));
|
|
38
|
-
};
|
|
39
|
-
const Tabs = exports.Tabs = TabsTemplate.bind({});
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _index = _interopRequireDefault(require("./styles/index"));
|
|
9
|
-
var _typography = require("../../theme/base/typography");
|
|
10
|
-
var _Tabs = require("./Tabs");
|
|
11
|
-
/**
|
|
12
|
-
* ### `combineSizeWithVariant`
|
|
13
|
-
* A function that takes in the `size` value, and the
|
|
14
|
-
* `variant` value. The default-like styling for the `size` prop is merged with the styling from the
|
|
15
|
-
* `variant` and a combined styleProp object is returned.
|
|
16
|
-
*
|
|
17
|
-
* @function combineSizeWithVariant
|
|
18
|
-
* @param {string} args.size - The size of Tabs component
|
|
19
|
-
* @param {string} args.variant - The style variant for the Text component
|
|
20
|
-
* @returns {Object} An object containing the merged styleProps from the `variant` and the `size` props
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
const combineSizeWithVariant = ({
|
|
24
|
-
size,
|
|
25
|
-
variant = 'line'
|
|
26
|
-
}) => {
|
|
27
|
-
const fontSizeMapping = {
|
|
28
|
-
[_Tabs.SIZE_SMALL]: _typography.fontSizes.xs,
|
|
29
|
-
[_Tabs.SIZE_BODY]: _typography.fontSizes.base,
|
|
30
|
-
[_Tabs.SIZE_HEADING]: _typography.fontSizes.lg
|
|
31
|
-
};
|
|
32
|
-
const styleProps = _index.default.variants[`${variant}`];
|
|
33
|
-
styleProps.tab.fontSize = fontSizeMapping[size];
|
|
34
|
-
return styleProps;
|
|
35
|
-
};
|
|
36
|
-
var _default = exports.default = combineSizeWithVariant;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
Object.defineProperty(exports, "Tab", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _react.Tab;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(exports, "TabList", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function () {
|
|
16
|
-
return _react.TabList;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(exports, "TabPanel", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () {
|
|
22
|
-
return _react.TabPanel;
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
Object.defineProperty(exports, "TabPanels", {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
get: function () {
|
|
28
|
-
return _react.TabPanels;
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
Object.defineProperty(exports, "default", {
|
|
32
|
-
enumerable: true,
|
|
33
|
-
get: function () {
|
|
34
|
-
return _Tabs.default;
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
var _Tabs = _interopRequireDefault(require("./Tabs"));
|
|
38
|
-
var _react = require("@chakra-ui/react");
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
9
|
-
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
10
|
-
const variants = {
|
|
11
|
-
line: {
|
|
12
|
-
tablist: {
|
|
13
|
-
borderBottom: '2px solid',
|
|
14
|
-
borderColor: 'inherit'
|
|
15
|
-
},
|
|
16
|
-
tab: {
|
|
17
|
-
color: 'gray.600',
|
|
18
|
-
borderBottom: '2px solid',
|
|
19
|
-
borderColor: 'transparent',
|
|
20
|
-
marginBottom: '-2px',
|
|
21
|
-
_selected: {
|
|
22
|
-
color: 'primary.default',
|
|
23
|
-
borderColor: 'primary.default',
|
|
24
|
-
fontWeight: 'semibold'
|
|
25
|
-
},
|
|
26
|
-
_active: {
|
|
27
|
-
color: 'black',
|
|
28
|
-
bg: 'transparent'
|
|
29
|
-
},
|
|
30
|
-
_disabled: {
|
|
31
|
-
opacity: 0.4,
|
|
32
|
-
cursor: 'not-allowed'
|
|
33
|
-
},
|
|
34
|
-
_hover: {
|
|
35
|
-
color: 'black'
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
enclosed: {
|
|
40
|
-
tablist: {
|
|
41
|
-
backgroundColor: 'white',
|
|
42
|
-
borderRadius: '8px',
|
|
43
|
-
borederColor: 'gray.200',
|
|
44
|
-
borderWidth: '1px',
|
|
45
|
-
paddingY: 1
|
|
46
|
-
},
|
|
47
|
-
tab: {
|
|
48
|
-
borderRadius: '6px',
|
|
49
|
-
marginX: 1,
|
|
50
|
-
_selected: {
|
|
51
|
-
fontWeight: 'semibold',
|
|
52
|
-
color: 'white',
|
|
53
|
-
backgroundColor: 'primary.default',
|
|
54
|
-
_hover: {
|
|
55
|
-
backgroundColor: 'primary.600'
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
_active: {
|
|
59
|
-
backgroundColor: 'gray.200'
|
|
60
|
-
},
|
|
61
|
-
_disabled: {
|
|
62
|
-
opacity: 0.4,
|
|
63
|
-
cursor: 'not-allowed'
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
var _default = exports.default = (0, _merge.default)(_theme.default.components.Tabs, {
|
|
69
|
-
variants
|
|
70
|
-
});
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _react2 = require("@chakra-ui/react");
|
|
11
|
-
var _options = _interopRequireDefault(require("./options"));
|
|
12
|
-
var _Text = require("./Text.styles");
|
|
13
|
-
var _combineAsWithVariant = _interopRequireDefault(require("./combineAsWithVariant"));
|
|
14
|
-
const Text = (0, _react2.forwardRef)(({
|
|
15
|
-
as,
|
|
16
|
-
variant,
|
|
17
|
-
...props
|
|
18
|
-
}, ref) => {
|
|
19
|
-
return /*#__PURE__*/_react.default.createElement(_react2.Text, (0, _extends2.default)({
|
|
20
|
-
variant: variant,
|
|
21
|
-
as: as
|
|
22
|
-
}, (0, _combineAsWithVariant.default)({
|
|
23
|
-
as,
|
|
24
|
-
variant
|
|
25
|
-
}), props, {
|
|
26
|
-
ref: ref
|
|
27
|
-
}));
|
|
28
|
-
});
|
|
29
|
-
Text.defaultProps = {
|
|
30
|
-
as: 'p',
|
|
31
|
-
variant: 'body'
|
|
32
|
-
};
|
|
33
|
-
var _default = exports.default = Text;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = exports.Text = void 0;
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _Text = _interopRequireDefault(require("./Text"));
|
|
10
|
-
var _options = _interopRequireDefault(require("./options"));
|
|
11
|
-
var _Text2 = require("./Text.styles");
|
|
12
|
-
var _default = exports.default = {
|
|
13
|
-
title: 'v2/Text',
|
|
14
|
-
component: _Text.default,
|
|
15
|
-
parameters: {
|
|
16
|
-
removeBaseHtmlClass: true
|
|
17
|
-
},
|
|
18
|
-
argTypes: {
|
|
19
|
-
variant: {
|
|
20
|
-
control: {
|
|
21
|
-
type: 'select',
|
|
22
|
-
options: Object.keys(_Text2.variants)
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
as: {
|
|
26
|
-
control: {
|
|
27
|
-
type: 'select',
|
|
28
|
-
options: _options.default
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
children: {
|
|
32
|
-
control: {
|
|
33
|
-
type: 'text'
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
const Template = props => /*#__PURE__*/_react.default.createElement(_Text.default, props);
|
|
39
|
-
const Text = exports.Text = Template.bind({});
|
|
40
|
-
Text.args = {
|
|
41
|
-
children: 'Bonbon lollipop tiramisu cupcake bear claw cupcake. Icing candy canes cookie caramels wafer tootsie roll soufflé halvah. Ice cream tart gummies apple pie chocolate bar. Pastry gummies macaroon fruitcake donut sweet caramels candy. Oat cake marshmallow biscuit carrot cake fruitcake brownie pastry liquorice liquorice. Topping sweet gingerbread. Chupa chups caramels brownie. Icing jujubes chupa chups cookie. Carrot cake gummi bears powder apple pie donut pudding macaroon. Icing jelly cupcake powder jelly croissant pastry. Powder jelly fruitcake gummies sweet tootsie roll candy. Icing cheesecake toffee tart pastry lemon drops lemon drops bonbon wafer. Cheesecake ice cream wafer apple pie candy canes croissant. Sweet croissant pudding carrot cake oat cake chupa chups. Gingerbread lemon drops biscuit oat cake carrot cake. Chocolate cake jelly-o cake cake candy lollipop.'
|
|
42
|
-
};
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.variants = exports.default = void 0;
|
|
8
|
-
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
9
|
-
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
10
|
-
var _typography = require("../../theme/base/typography");
|
|
11
|
-
const baseStyle = {
|
|
12
|
-
lineHeight: 1.5,
|
|
13
|
-
fontWeight: _typography.fontWeights.normal
|
|
14
|
-
};
|
|
15
|
-
const variants = exports.variants = {
|
|
16
|
-
body: {
|
|
17
|
-
...baseStyle,
|
|
18
|
-
fontSize: {
|
|
19
|
-
base: _typography.fontSizes.base,
|
|
20
|
-
desktop: _typography.fontSizes.base
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
body2: {
|
|
24
|
-
...baseStyle,
|
|
25
|
-
fontSize: {
|
|
26
|
-
base: _typography.fontSizes.sm,
|
|
27
|
-
desktop: _typography.fontSizes.sm
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
caption: {
|
|
31
|
-
...baseStyle,
|
|
32
|
-
fontSize: {
|
|
33
|
-
base: _typography.fontSizes.xs,
|
|
34
|
-
desktop: _typography.fontSizes.xs
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
const defaultProps = {
|
|
39
|
-
variant: variants.body
|
|
40
|
-
};
|
|
41
|
-
var _default = exports.default = (0, _merge.default)(_theme.default.components.Text, {
|
|
42
|
-
variants,
|
|
43
|
-
baseStyle,
|
|
44
|
-
defaultProps
|
|
45
|
-
});
|