@spothero/ui 22.3.0 → 22.3.5
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 +39 -29
- package/dist/components/Accordion/AccordionActionButton.js +15 -12
- package/dist/components/Accordion/index.js +15 -14
- package/dist/components/Accordion/styles/index.js +10 -9
- package/dist/components/Alert/Alert.js +45 -37
- package/dist/components/Alert/Alert.stories.js +36 -21
- package/dist/components/Alert/index.js +5 -4
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +121 -100
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +11 -7
- package/dist/components/AutoSuggestSelect/index.js +5 -4
- package/dist/components/Badge/Badge.js +4 -3
- package/dist/components/Badge/Badge.stories.js +20 -16
- package/dist/components/Badge/styles/index.js +10 -9
- package/dist/components/Button/Button.js +55 -20
- package/dist/components/Button/Button.spec.js +6 -6
- package/dist/components/Button/Button.styles.js +39 -37
- package/dist/components/Button/button-props.js +20 -18
- package/dist/components/Button/index.js +7 -6
- package/dist/components/Button/stories/button.js +15 -13
- package/dist/components/Button/stories/index.stories.js +37 -28
- package/dist/components/Button/stories/overview.js +49 -35
- package/dist/components/Card/Card.js +20 -14
- package/dist/components/Card/Card.stories.js +13 -9
- package/dist/components/Checkbox/Checkbox.js +24 -18
- package/dist/components/Checkbox/Checkbox.stories.js +10 -6
- package/dist/components/Checkbox/index.js +5 -4
- package/dist/components/Checkbox/styles/index.js +9 -8
- package/dist/components/Container/Container.js +14 -8
- package/dist/components/Container/Container.stories.js +29 -19
- package/dist/components/Container/Container.styles.js +5 -4
- package/dist/components/CreatableSelect/CreatableSelect.js +98 -74
- package/dist/components/CreatableSelect/CreatableSelect.stories.js +43 -29
- package/dist/components/CreatableSelect/index.js +5 -4
- package/dist/components/Divider/Divider.js +16 -11
- package/dist/components/Divider/Divider.stories.js +12 -7
- package/dist/components/Divider/Divider.styles.js +6 -5
- package/dist/components/Drawer/Drawer.js +17 -12
- package/dist/components/Drawer/Drawer.stories.js +24 -13
- package/dist/components/Drawer/index.js +19 -18
- package/dist/components/Drawer/styles/index.js +29 -25
- package/dist/components/FormControl/FormControl.js +63 -56
- package/dist/components/Grid/Grid.js +19 -12
- package/dist/components/Grid/Grid.stories.js +68 -51
- package/dist/components/Grid/Grid.styles.js +4 -3
- package/dist/components/Grid/GridItem.js +14 -8
- package/dist/components/Grid/GridItem.styles.js +5 -4
- package/dist/components/Grid/index.js +8 -7
- package/dist/components/Heading/Heading.js +19 -12
- package/dist/components/Heading/Heading.stories.js +13 -8
- package/dist/components/Heading/Heading.styles.js +33 -27
- package/dist/components/Icon/Icon.js +4 -3
- package/dist/components/Icon/Icon.stories.js +27 -23
- package/dist/components/Image/Image.js +54 -43
- package/dist/components/Image/Image.spec.js +17 -17
- package/dist/components/Image/Image.stories.js +18 -12
- package/dist/components/Input/Input.js +24 -19
- package/dist/components/Input/Input.stories.js +13 -9
- package/dist/components/Input/index.js +5 -4
- package/dist/components/Input/styles/index.js +8 -7
- package/dist/components/Link/Link.js +4 -3
- package/dist/components/Link/Link.stories.js +34 -31
- package/dist/components/Link/Link.styles.js +12 -11
- package/dist/components/List/List.js +26 -18
- package/dist/components/List/List.stories.js +42 -25
- package/dist/components/List/index.js +7 -6
- package/dist/components/List/styles/index.js +7 -6
- package/dist/components/List/styles/item.styles.js +5 -4
- package/dist/components/Loader/Loader.js +29 -20
- package/dist/components/Loader/Loader.stories.js +36 -28
- package/dist/components/Menu/Menu.js +6 -5
- package/dist/components/Menu/Menu.stories.js +68 -58
- package/dist/components/Menu/Menu.styles.js +8 -7
- package/dist/components/Menu/index.js +19 -18
- package/dist/components/Modal/Modal.js +20 -16
- package/dist/components/Modal/Modal.stories.js +112 -71
- package/dist/components/Modal/index.js +11 -10
- package/dist/components/Modal/styles/body.js +23 -14
- package/dist/components/Modal/styles/closeButton.js +21 -20
- package/dist/components/Modal/styles/dialog.js +19 -18
- package/dist/components/Modal/styles/dialogContainer.js +9 -7
- package/dist/components/Modal/styles/footer.js +4 -3
- package/dist/components/Modal/styles/header.js +14 -13
- package/dist/components/Modal/styles/index.js +18 -15
- package/dist/components/Modal/styles/overlay.js +4 -3
- package/dist/components/Popover/Popover.js +24 -16
- package/dist/components/Popover/Popover.stories.js +54 -47
- package/dist/components/Popover/PopoverArrow.js +12 -8
- package/dist/components/Popover/PopoverCloseButton.js +12 -8
- package/dist/components/Popover/PopoverContent.js +23 -19
- package/dist/components/Popover/index.js +15 -14
- package/dist/components/Popover/styles/index.js +15 -12
- package/dist/components/Popover/styles/popover-arrow.js +10 -8
- package/dist/components/Popover/styles/popover-body.js +9 -6
- package/dist/components/Popover/styles/popover-close-button.js +36 -22
- package/dist/components/Popover/styles/popover-content.js +26 -22
- package/dist/components/Popover/styles/popover-header.js +5 -4
- package/dist/components/Popover/styles/popper.js +5 -4
- package/dist/components/Progress/Progress.js +16 -11
- package/dist/components/Progress/Progress.stories.js +29 -18
- package/dist/components/Progress/Progress.styles.js +44 -59
- package/dist/components/Radio/Radio.js +24 -18
- package/dist/components/Radio/Radio.stories.js +14 -15
- package/dist/components/Radio/RadioGroup.js +27 -22
- package/dist/components/Radio/index.js +8 -7
- package/dist/components/Radio/styles/index.js +13 -12
- package/dist/components/RefreshedInput/Button/Button.js +31 -27
- package/dist/components/RefreshedInput/Button/Button.stories.js +22 -16
- package/dist/components/RefreshedInput/Button/index.js +5 -4
- package/dist/components/RefreshedInput/Button/styles/index.js +22 -12
- package/dist/components/RefreshedInput/FormControl/index.js +60 -51
- package/dist/components/RefreshedInput/Input/Input.js +28 -22
- package/dist/components/RefreshedInput/Input/Input.stories.js +19 -14
- package/dist/components/RefreshedInput/Input/index.js +5 -4
- package/dist/components/RefreshedInput/Input/styles/index.js +18 -8
- package/dist/components/RefreshedInput/Select/Select.js +30 -25
- package/dist/components/RefreshedInput/Select/Select.stories.js +26 -21
- package/dist/components/RefreshedInput/Select/index.js +5 -4
- package/dist/components/RefreshedInput/Select/styles/index.js +19 -11
- package/dist/components/RefreshedInput/index.js +14 -13
- package/dist/components/RefreshedInput/storyAid/index.js +13 -10
- package/dist/components/Select/Select.js +25 -20
- package/dist/components/Select/Select.stories.js +21 -17
- package/dist/components/Select/index.js +5 -4
- package/dist/components/Select/styles/index.js +12 -7
- package/dist/components/SelectionCard/SelectionCard.js +31 -25
- package/dist/components/SelectionCard/SelectionCard.stories.js +10 -9
- package/dist/components/SelectionCard/index.js +5 -4
- package/dist/components/Skeleton/Skeleton.stories.js +17 -9
- package/dist/components/Skeleton/Skeleton.styles.js +4 -3
- package/dist/components/Skeleton/index.js +8 -7
- package/dist/components/Spinner/Spinner.js +17 -12
- package/dist/components/Spinner/Spinner.stories.js +56 -45
- package/dist/components/Spinner/Spinner.styles.js +41 -59
- package/dist/components/Switch/Switch.js +22 -17
- package/dist/components/Switch/Switch.stories.js +10 -6
- package/dist/components/Switch/index.js +5 -4
- package/dist/components/Switch/styles/index.js +29 -19
- package/dist/components/Table/Table.js +4 -3
- package/dist/components/Table/Table.stories.js +31 -20
- package/dist/components/Table/Table.styles.js +27 -16
- package/dist/components/Table/index.js +21 -20
- package/dist/components/Tabs/Tabs.js +18 -18
- package/dist/components/Tabs/Tabs.stories.js +14 -9
- package/dist/components/Tabs/combineSizeWithVariant.js +12 -13
- package/dist/components/Tabs/index.js +13 -12
- package/dist/components/Tabs/styles/index.js +6 -5
- package/dist/components/Text/Text.js +14 -12
- package/dist/components/Text/Text.stories.js +13 -8
- package/dist/components/Text/Text.styles.js +26 -18
- package/dist/components/Text/combineAsWithVariant.js +40 -37
- package/dist/components/Text/options.js +5 -4
- package/dist/components/Textarea/Textarea.js +24 -19
- package/dist/components/Textarea/Textarea.stories.js +14 -11
- package/dist/components/Textarea/index.js +5 -4
- package/dist/components/Textarea/styles/index.js +8 -7
- package/dist/components/ThemeProvider/ThemeProvider.js +29 -21
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +20 -19
- package/dist/components/Toast/Toast.stories.js +24 -17
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js +40 -34
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.js +24 -15
- package/dist/components/ToggleButtonGroup/index.js +5 -4
- package/dist/components/ToggleButtonGroup/styles/index.js +6 -5
- package/dist/components/index.js +252 -238
- package/dist/components/styles.js +80 -79
- package/dist/theme/base/breakpoints.js +5 -4
- package/dist/theme/base/colors.js +50 -44
- package/dist/theme/base/index.js +29 -28
- package/dist/theme/base/notifications.js +8 -9
- package/dist/theme/base/shadows.js +5 -4
- package/dist/theme/base/sizes.js +7 -6
- package/dist/theme/base/typography.js +7 -6
- package/dist/theme/base/zindices.js +5 -4
- package/dist/theme/global.js +18 -89
- package/dist/theme/index.js +27 -15
- package/dist/utils/Spaces.js +15 -10
- package/package.json +24 -18
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
|
-
exports
|
|
8
|
+
exports["default"] = void 0;
|
|
8
9
|
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
9
10
|
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
10
|
-
|
|
11
|
+
var variants = {
|
|
11
12
|
line: {
|
|
12
13
|
tablist: {
|
|
13
14
|
borderBottom: '2px solid',
|
|
@@ -65,6 +66,6 @@ const variants = {
|
|
|
65
66
|
}
|
|
66
67
|
}
|
|
67
68
|
};
|
|
68
|
-
var _default = exports
|
|
69
|
-
variants
|
|
69
|
+
var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Tabs, {
|
|
70
|
+
variants: variants
|
|
70
71
|
});
|
|
@@ -1,27 +1,29 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
|
-
exports
|
|
8
|
+
exports["default"] = void 0;
|
|
8
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
9
11
|
var _react = _interopRequireDefault(require("react"));
|
|
10
12
|
var _react2 = require("@chakra-ui/react");
|
|
11
13
|
var _options = _interopRequireDefault(require("./options"));
|
|
12
14
|
var _Text = require("./Text.styles");
|
|
13
15
|
var _combineAsWithVariant = _interopRequireDefault(require("./combineAsWithVariant"));
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
return /*#__PURE__*/_react
|
|
16
|
+
var _excluded = ["as", "variant"];
|
|
17
|
+
var Text = (0, _react2.forwardRef)(function (_ref, ref) {
|
|
18
|
+
var as = _ref.as,
|
|
19
|
+
variant = _ref.variant,
|
|
20
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
21
|
+
return /*#__PURE__*/_react["default"].createElement(_react2.Text, (0, _extends2["default"])({
|
|
20
22
|
variant: variant,
|
|
21
23
|
as: as
|
|
22
|
-
}, (0, _combineAsWithVariant
|
|
23
|
-
as,
|
|
24
|
-
variant
|
|
24
|
+
}, (0, _combineAsWithVariant["default"])({
|
|
25
|
+
as: as,
|
|
26
|
+
variant: variant
|
|
25
27
|
}), props, {
|
|
26
28
|
ref: ref
|
|
27
29
|
}));
|
|
@@ -30,4 +32,4 @@ Text.defaultProps = {
|
|
|
30
32
|
as: 'p',
|
|
31
33
|
variant: 'body'
|
|
32
34
|
};
|
|
33
|
-
var _default = exports
|
|
35
|
+
var _default = exports["default"] = Text;
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
|
-
exports
|
|
8
|
+
exports["default"] = exports.Text = void 0;
|
|
9
|
+
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
|
|
10
|
+
var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
|
|
8
11
|
var _react = _interopRequireDefault(require("react"));
|
|
9
12
|
var _Text = _interopRequireDefault(require("./Text"));
|
|
10
13
|
var _options = _interopRequireDefault(require("./options"));
|
|
11
14
|
var _Text2 = require("./Text.styles");
|
|
12
|
-
var _default = exports
|
|
15
|
+
var _default = exports["default"] = {
|
|
13
16
|
title: 'v2/Text',
|
|
14
|
-
component: _Text
|
|
17
|
+
component: _Text["default"],
|
|
15
18
|
parameters: {
|
|
16
19
|
removeBaseHtmlClass: true
|
|
17
20
|
},
|
|
@@ -19,13 +22,13 @@ var _default = exports.default = {
|
|
|
19
22
|
variant: {
|
|
20
23
|
control: {
|
|
21
24
|
type: 'select',
|
|
22
|
-
options:
|
|
25
|
+
options: (0, _keys["default"])(_Text2.variants)
|
|
23
26
|
}
|
|
24
27
|
},
|
|
25
28
|
as: {
|
|
26
29
|
control: {
|
|
27
30
|
type: 'select',
|
|
28
|
-
options: _options
|
|
31
|
+
options: _options["default"]
|
|
29
32
|
}
|
|
30
33
|
},
|
|
31
34
|
children: {
|
|
@@ -35,8 +38,10 @@ var _default = exports.default = {
|
|
|
35
38
|
}
|
|
36
39
|
}
|
|
37
40
|
};
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
var Template = function Template(props) {
|
|
42
|
+
return /*#__PURE__*/_react["default"].createElement(_Text["default"], props);
|
|
43
|
+
};
|
|
44
|
+
var Text = exports.Text = (0, _bind["default"])(Template).call(Template, {});
|
|
40
45
|
Text.args = {
|
|
41
46
|
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
47
|
};
|
|
@@ -1,45 +1,53 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
4
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
5
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
7
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
|
8
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
9
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
|
10
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
3
11
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
|
|
12
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
13
|
value: true
|
|
6
14
|
});
|
|
7
|
-
exports.variants = exports
|
|
15
|
+
exports.variants = exports["default"] = void 0;
|
|
16
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
8
17
|
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
9
18
|
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
10
19
|
var _typography = require("../../theme/base/typography");
|
|
11
|
-
|
|
20
|
+
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
22
|
+
var baseStyle = {
|
|
12
23
|
lineHeight: 1.5,
|
|
13
24
|
fontWeight: _typography.fontWeights.normal
|
|
14
25
|
};
|
|
15
|
-
|
|
16
|
-
body: {
|
|
17
|
-
...baseStyle,
|
|
26
|
+
var variants = exports.variants = {
|
|
27
|
+
body: _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
18
28
|
fontSize: {
|
|
19
29
|
base: _typography.fontSizes.base,
|
|
20
30
|
desktop: _typography.fontSizes.base
|
|
21
31
|
}
|
|
22
|
-
},
|
|
23
|
-
body2: {
|
|
24
|
-
...baseStyle,
|
|
32
|
+
}),
|
|
33
|
+
body2: _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
25
34
|
fontSize: {
|
|
26
35
|
base: _typography.fontSizes.sm,
|
|
27
36
|
desktop: _typography.fontSizes.sm
|
|
28
37
|
}
|
|
29
|
-
},
|
|
30
|
-
caption: {
|
|
31
|
-
...baseStyle,
|
|
38
|
+
}),
|
|
39
|
+
caption: _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
32
40
|
fontSize: {
|
|
33
41
|
base: _typography.fontSizes.xs,
|
|
34
42
|
desktop: _typography.fontSizes.xs
|
|
35
43
|
}
|
|
36
|
-
}
|
|
44
|
+
})
|
|
37
45
|
};
|
|
38
|
-
|
|
46
|
+
var defaultProps = {
|
|
39
47
|
variant: variants.body
|
|
40
48
|
};
|
|
41
|
-
var _default = exports
|
|
42
|
-
variants,
|
|
43
|
-
baseStyle,
|
|
44
|
-
defaultProps
|
|
49
|
+
var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Text, {
|
|
50
|
+
variants: variants,
|
|
51
|
+
baseStyle: baseStyle,
|
|
52
|
+
defaultProps: defaultProps
|
|
45
53
|
});
|
|
@@ -1,13 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
4
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
5
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
7
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
|
8
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
9
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
|
10
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
11
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
12
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
4
13
|
value: true
|
|
5
14
|
});
|
|
6
|
-
exports
|
|
15
|
+
exports["default"] = void 0;
|
|
16
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
17
|
+
var _freeze = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/freeze"));
|
|
7
18
|
var _Text = require("./Text.styles");
|
|
8
19
|
var _typography = require("../../theme/base/typography");
|
|
20
|
+
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
22
|
// Create list of commonly used html text elements
|
|
10
|
-
|
|
23
|
+
var asOptions = (0, _freeze["default"])({
|
|
11
24
|
bold: 'b',
|
|
12
25
|
strong: 'strong',
|
|
13
26
|
italic: 'i',
|
|
@@ -36,65 +49,55 @@ const asOptions = Object.freeze({
|
|
|
36
49
|
* @returns {Object} An object containing the merged styleProps from the `variant` and the `as` props
|
|
37
50
|
*/
|
|
38
51
|
|
|
39
|
-
|
|
40
|
-
as,
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
let styleProps;
|
|
52
|
+
var combineAsWithVariant = function combineAsWithVariant(_ref) {
|
|
53
|
+
var as = _ref.as,
|
|
54
|
+
variant = _ref.variant;
|
|
55
|
+
var variantFontSizeBase = Number(_Text.variants["".concat(variant)].fontSize.base.replace('rem', ''));
|
|
56
|
+
var variantFontSizeDesktop = Number(_Text.variants["".concat(variant)].fontSize.desktop.replace('rem', ''));
|
|
57
|
+
var styleProps;
|
|
46
58
|
switch (as) {
|
|
47
59
|
case asOptions.bold:
|
|
48
|
-
styleProps = {
|
|
49
|
-
..._Text.variants[`${variant}`],
|
|
60
|
+
styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
|
|
50
61
|
fontWeight: _typography.fontWeights.semibold
|
|
51
|
-
};
|
|
62
|
+
});
|
|
52
63
|
break;
|
|
53
64
|
case asOptions.strong:
|
|
54
|
-
styleProps = {
|
|
55
|
-
..._Text.variants[`${variant}`],
|
|
65
|
+
styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
|
|
56
66
|
fontWeight: _typography.fontWeights.semibold
|
|
57
|
-
};
|
|
67
|
+
});
|
|
58
68
|
break;
|
|
59
69
|
case asOptions.italic:
|
|
60
|
-
styleProps = {
|
|
61
|
-
..._Text.variants[`${variant}`],
|
|
70
|
+
styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
|
|
62
71
|
fontStyle: 'italic'
|
|
63
|
-
};
|
|
72
|
+
});
|
|
64
73
|
break;
|
|
65
74
|
case asOptions.emphasis:
|
|
66
|
-
styleProps = {
|
|
67
|
-
..._Text.variants[`${variant}`],
|
|
75
|
+
styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
|
|
68
76
|
fontStyle: 'italic'
|
|
69
|
-
};
|
|
77
|
+
});
|
|
70
78
|
break;
|
|
71
79
|
case asOptions.underline:
|
|
72
|
-
styleProps = {
|
|
73
|
-
..._Text.variants[`${variant}`],
|
|
80
|
+
styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
|
|
74
81
|
textDecoration: 'underline'
|
|
75
|
-
};
|
|
82
|
+
});
|
|
76
83
|
break;
|
|
77
84
|
case asOptions.strikethrough:
|
|
78
|
-
styleProps = {
|
|
79
|
-
..._Text.variants[`${variant}`],
|
|
85
|
+
styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
|
|
80
86
|
textDecoration: 'line-through'
|
|
81
|
-
};
|
|
87
|
+
});
|
|
82
88
|
break;
|
|
83
89
|
case asOptions.small:
|
|
84
|
-
styleProps = {
|
|
85
|
-
..._Text.variants[`${variant}`],
|
|
90
|
+
styleProps = _objectSpread(_objectSpread({}, _Text.variants["".concat(variant)]), {}, {
|
|
86
91
|
fontSize: {
|
|
87
|
-
base:
|
|
88
|
-
desktop:
|
|
92
|
+
base: "".concat(variantFontSizeBase * 0.8, "rem"),
|
|
93
|
+
desktop: "".concat(variantFontSizeDesktop * 0.8, "rem")
|
|
89
94
|
}
|
|
90
|
-
};
|
|
95
|
+
});
|
|
91
96
|
break;
|
|
92
97
|
default:
|
|
93
|
-
styleProps = {
|
|
94
|
-
..._Text.variants[`${variant}`]
|
|
95
|
-
};
|
|
98
|
+
styleProps = _objectSpread({}, _Text.variants["".concat(variant)]);
|
|
96
99
|
break;
|
|
97
100
|
}
|
|
98
101
|
return styleProps;
|
|
99
102
|
};
|
|
100
|
-
var _default = exports
|
|
103
|
+
var _default = exports["default"] = combineAsWithVariant;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
|
-
exports
|
|
7
|
-
|
|
8
|
-
var _default = exports
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var options = ['a', 'abbr', 'address', 'article', 'aside', 'b', 'bdi', 'bdo', 'blockquote', 'button', 'caption', 'cite', 'code', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'fieldset', 'figure', 'footer', 'form', 'header', 'hgroup', 'i', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'pre', 'progress', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video'];
|
|
9
|
+
var _default = exports["default"] = options;
|
|
@@ -1,32 +1,37 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
3
7
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
|
|
8
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
9
|
value: true
|
|
6
10
|
});
|
|
7
|
-
exports
|
|
11
|
+
exports["default"] = void 0;
|
|
8
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
13
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
9
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
15
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
16
|
var _react2 = require("@chakra-ui/react");
|
|
12
17
|
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
|
|
13
|
-
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
var _excluded = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "customRequiredText"];
|
|
19
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
|
+
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; }
|
|
21
|
+
var Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
22
|
+
var label = _ref.label,
|
|
23
|
+
helperText = _ref.helperText,
|
|
24
|
+
errorMessage = _ref.errorMessage,
|
|
25
|
+
isInvalid = _ref.isInvalid,
|
|
26
|
+
isDisabled = _ref.isDisabled,
|
|
27
|
+
isRequired = _ref.isRequired,
|
|
28
|
+
isOptional = _ref.isOptional,
|
|
29
|
+
customRequiredText = _ref.customRequiredText,
|
|
30
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
31
|
+
var classes = (0, _classnames["default"])({
|
|
27
32
|
'FormElement-contains-error': isInvalid
|
|
28
33
|
});
|
|
29
|
-
return /*#__PURE__*/_react
|
|
34
|
+
return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
|
|
30
35
|
isInvalid: isInvalid,
|
|
31
36
|
isDisabled: isDisabled,
|
|
32
37
|
isRequired: isRequired,
|
|
@@ -36,9 +41,9 @@ const Textarea = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
36
41
|
label: label,
|
|
37
42
|
inputId: props.id,
|
|
38
43
|
customRequiredText: customRequiredText
|
|
39
|
-
}, /*#__PURE__*/_react
|
|
44
|
+
}, /*#__PURE__*/_react["default"].createElement(_react2.Textarea, (0, _extends2["default"])({
|
|
40
45
|
ref: ref,
|
|
41
46
|
className: classes
|
|
42
47
|
}, props)));
|
|
43
48
|
});
|
|
44
|
-
var _default = exports
|
|
49
|
+
var _default = exports["default"] = Textarea;
|
|
@@ -1,28 +1,31 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
|
-
exports
|
|
8
|
+
exports["default"] = exports.Textarea = void 0;
|
|
9
|
+
var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
|
|
8
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
11
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _Textarea = _interopRequireDefault(require("./Textarea
|
|
11
|
-
var
|
|
12
|
-
var _default = exports.default = {
|
|
12
|
+
var _Textarea = _interopRequireDefault(require("./Textarea"));
|
|
13
|
+
var _default = exports["default"] = {
|
|
13
14
|
title: 'v2/Textarea',
|
|
14
|
-
component: _Textarea
|
|
15
|
+
component: _Textarea["default"],
|
|
15
16
|
parameters: {
|
|
16
17
|
importBy: 'Textarea',
|
|
17
18
|
removeBaseHtmlClass: true,
|
|
18
19
|
chakraLink: 'https://chakra-ui.com/docs/components/textarea'
|
|
19
20
|
}
|
|
20
21
|
};
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
var TextareaTemplate = function TextareaTemplate(props) {
|
|
23
|
+
return /*#__PURE__*/_react["default"].createElement(_Textarea["default"], (0, _extends2["default"])({
|
|
24
|
+
variant: "outline",
|
|
25
|
+
maxWidth: "200px"
|
|
26
|
+
}, props));
|
|
27
|
+
};
|
|
28
|
+
var Textarea = exports.Textarea = (0, _bind["default"])(TextareaTemplate).call(TextareaTemplate, {});
|
|
26
29
|
Textarea.argTypes = {
|
|
27
30
|
placeholder: {
|
|
28
31
|
control: {
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
|
-
|
|
8
|
+
_Object$defineProperty(exports, "default", {
|
|
8
9
|
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _Textarea
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _Textarea["default"];
|
|
11
12
|
}
|
|
12
13
|
});
|
|
13
14
|
var _Textarea = _interopRequireDefault(require("./Textarea"));
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
|
-
exports
|
|
8
|
+
exports["default"] = void 0;
|
|
8
9
|
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
9
10
|
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
10
|
-
|
|
11
|
+
var baseStyle = {
|
|
11
12
|
field: {
|
|
12
13
|
_placeholder: {
|
|
13
14
|
color: 'text.secondary.light',
|
|
@@ -19,7 +20,7 @@ const baseStyle = {
|
|
|
19
20
|
}
|
|
20
21
|
}
|
|
21
22
|
};
|
|
22
|
-
|
|
23
|
+
var variants = {
|
|
23
24
|
outline: {
|
|
24
25
|
field: {
|
|
25
26
|
border: '1px solid',
|
|
@@ -58,7 +59,7 @@ const variants = {
|
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
61
|
};
|
|
61
|
-
var _default = exports
|
|
62
|
-
baseStyle,
|
|
63
|
-
variants
|
|
62
|
+
var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Textarea, {
|
|
63
|
+
baseStyle: baseStyle,
|
|
64
|
+
variants: variants
|
|
64
65
|
});
|
|
@@ -1,39 +1,47 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
3
7
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
-
|
|
8
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
5
9
|
value: true
|
|
6
10
|
});
|
|
7
|
-
exports
|
|
11
|
+
exports["default"] = void 0;
|
|
8
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
13
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
9
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
15
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
16
|
var _react2 = require("@chakra-ui/react");
|
|
12
17
|
var _theme = _interopRequireDefault(require("../../theme"));
|
|
13
18
|
var _global = require("../../theme/global");
|
|
14
19
|
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
15
|
-
|
|
16
|
-
function
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}),
|
|
20
|
+
var _excluded = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
|
|
21
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
|
+
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; }
|
|
23
|
+
var ThemeProvider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
24
|
+
var theme = _ref.theme,
|
|
25
|
+
useLegacyOverrides = _ref.useLegacyOverrides,
|
|
26
|
+
_ref$disableExternalF = _ref.disableExternalFonts,
|
|
27
|
+
disableExternalFonts = _ref$disableExternalF === void 0 ? false : _ref$disableExternalF,
|
|
28
|
+
children = _ref.children,
|
|
29
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
30
|
+
return /*#__PURE__*/_react["default"].createElement(_react2.ChakraProvider, (0, _extends2["default"])({}, props, {
|
|
31
|
+
ref: ref,
|
|
32
|
+
theme: (0, _merge["default"])(_theme["default"], theme)
|
|
33
|
+
}), disableExternalFonts ? null : /*#__PURE__*/_react["default"].createElement(_global.Fonts, null), /*#__PURE__*/_react["default"].createElement(_global.LegacyOverrides, {
|
|
34
|
+
useLegacyOverrides: useLegacyOverrides
|
|
35
|
+
}), children);
|
|
36
|
+
});
|
|
29
37
|
ThemeProvider.propTypes = {
|
|
30
38
|
/** If true, this will use the old `spothero-html` base styles */
|
|
31
|
-
useLegacyOverrides: _propTypes
|
|
39
|
+
useLegacyOverrides: _propTypes["default"].bool,
|
|
32
40
|
/** If true, this will not load the `Fonts` global styles */
|
|
33
|
-
disableExternalFonts: _propTypes
|
|
41
|
+
disableExternalFonts: _propTypes["default"].bool,
|
|
34
42
|
/** The React node (generally your entire App) that will be provided the theme */
|
|
35
|
-
children: _propTypes
|
|
43
|
+
children: _propTypes["default"].node,
|
|
36
44
|
/** Adds additional themeing on top of SpotHero's default configuration */
|
|
37
|
-
theme: _propTypes
|
|
45
|
+
theme: _propTypes["default"].object
|
|
38
46
|
};
|
|
39
|
-
var _default = exports
|
|
47
|
+
var _default = exports["default"] = ThemeProvider;
|