@spothero/ui 17.0.0-beta.1 → 17.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/dist/components/Accordion/Accordion.js +13 -0
  2. package/dist/components/Accordion/Accordion.stories.js +86 -0
  3. package/dist/components/Accordion/index.js +41 -0
  4. package/dist/components/Accordion/styles/button.js +23 -0
  5. package/dist/components/Accordion/styles/container.js +15 -0
  6. package/dist/components/Accordion/styles/index.js +32 -0
  7. package/dist/components/Accordion/styles/panel.js +13 -0
  8. package/dist/components/Alert/Alert.js +119 -0
  9. package/dist/components/Alert/Alert.stories.js +80 -0
  10. package/dist/components/Alert/index.js +15 -0
  11. package/dist/components/Alert/styles/index.js +192 -0
  12. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +189 -0
  13. package/dist/components/AutoSuggestSelect/index.js +15 -0
  14. package/dist/components/Badge/Badge.js +13 -0
  15. package/dist/components/Badge/Badge.stories.js +38 -0
  16. package/dist/components/Badge/styles/index.js +40 -0
  17. package/dist/components/Button/Button.js +73 -0
  18. package/dist/components/Button/Button.spec.js +31 -0
  19. package/dist/components/Button/Button.styles.js +173 -0
  20. package/dist/components/Button/button-props.js +90 -0
  21. package/dist/components/Button/index.js +23 -0
  22. package/dist/components/Button/stories/button.js +59 -0
  23. package/dist/components/Button/stories/index.stories.js +124 -0
  24. package/dist/components/Button/stories/overview.js +96 -0
  25. package/dist/components/Card/Card.js +38 -0
  26. package/dist/components/Card/Card.stories.js +41 -0
  27. package/dist/components/Checkbox/Checkbox.js +13 -0
  28. package/dist/components/Checkbox/Checkbox.stories.js +44 -0
  29. package/dist/components/Checkbox/index.js +15 -0
  30. package/dist/components/Checkbox/styles/index.js +64 -0
  31. package/dist/components/Container/Container.js +34 -0
  32. package/dist/components/Container/Container.stories.js +74 -0
  33. package/dist/components/Container/Container.styles.js +17 -0
  34. package/dist/components/Divider/Divider.js +47 -0
  35. package/dist/components/Divider/Divider.stories.js +49 -0
  36. package/dist/components/Divider/Divider.styles.js +28 -0
  37. package/dist/components/FormControl/FormControl.js +79 -0
  38. package/dist/components/Grid/Grid.js +49 -0
  39. package/dist/components/Grid/Grid.stories.js +141 -0
  40. package/dist/components/Grid/Grid.styles.js +19 -0
  41. package/dist/components/Grid/GridItem.js +34 -0
  42. package/dist/components/Grid/GridItem.styles.js +13 -0
  43. package/dist/components/Grid/index.js +23 -0
  44. package/dist/components/Heading/Heading.js +49 -0
  45. package/dist/components/Heading/Heading.stories.js +54 -0
  46. package/dist/components/Heading/Heading.styles.js +79 -0
  47. package/dist/components/Icon/Icon.js +13 -0
  48. package/dist/components/Icon/Icon.stories.js +47 -0
  49. package/dist/components/Image/Image.js +106 -0
  50. package/dist/components/Image/Image.spec.js +83 -0
  51. package/dist/components/Image/Image.stories.js +92 -0
  52. package/dist/components/Input/Input.js +61 -0
  53. package/dist/components/Input/Input.stories.js +71 -0
  54. package/dist/components/Input/index.js +15 -0
  55. package/dist/components/Input/styles/index.js +71 -0
  56. package/dist/components/Link/Link.js +13 -0
  57. package/dist/components/Link/Link.stories.js +61 -0
  58. package/dist/components/Link/Link.styles.js +42 -0
  59. package/dist/components/List/List.js +88 -0
  60. package/dist/components/List/List.stories.js +124 -0
  61. package/dist/components/List/index.js +23 -0
  62. package/dist/components/List/styles/index.js +24 -0
  63. package/dist/components/List/styles/item.styles.js +11 -0
  64. package/dist/components/Loader/Loader.js +62 -0
  65. package/dist/components/Loader/Loader.stories.js +140 -0
  66. package/dist/components/Modal/Modal.js +52 -0
  67. package/dist/components/Modal/Modal.stories.js +236 -0
  68. package/dist/components/Modal/index.js +15 -0
  69. package/dist/components/Modal/styles/body.js +48 -0
  70. package/dist/components/Modal/styles/closeButton.js +27 -0
  71. package/dist/components/Modal/styles/dialog.js +25 -0
  72. package/dist/components/Modal/styles/dialogContainer.js +26 -0
  73. package/dist/components/Modal/styles/footer.js +12 -0
  74. package/dist/components/Modal/styles/header.js +20 -0
  75. package/dist/components/Modal/styles/index.js +70 -0
  76. package/dist/components/Modal/styles/overlay.js +12 -0
  77. package/dist/components/Popover/Popover.js +48 -0
  78. package/dist/components/Popover/Popover.stories.js +101 -0
  79. package/dist/components/Popover/PopoverArrow.js +34 -0
  80. package/dist/components/Popover/PopoverCloseButton.js +34 -0
  81. package/dist/components/Popover/PopoverContent.js +53 -0
  82. package/dist/components/Popover/index.js +37 -0
  83. package/dist/components/Popover/styles/index.js +38 -0
  84. package/dist/components/Popover/styles/popover-arrow.js +16 -0
  85. package/dist/components/Popover/styles/popover-body.js +15 -0
  86. package/dist/components/Popover/styles/popover-close-button.js +30 -0
  87. package/dist/components/Popover/styles/popover-content.js +29 -0
  88. package/dist/components/Popover/styles/popover-header.js +12 -0
  89. package/dist/components/Popover/styles/popper.js +11 -0
  90. package/dist/components/Radio/Radio.js +52 -0
  91. package/dist/components/Radio/Radio.stories.js +142 -0
  92. package/dist/components/Radio/RadioGroup.js +65 -0
  93. package/dist/components/Radio/index.js +23 -0
  94. package/dist/components/Radio/styles/index.js +65 -0
  95. package/dist/components/Select/Select.js +71 -0
  96. package/dist/components/Select/Select.stories.js +74 -0
  97. package/dist/components/Select/index.js +15 -0
  98. package/dist/components/Select/styles/index.js +57 -0
  99. package/dist/components/Skeleton/Skeleton.stories.js +41 -0
  100. package/dist/components/Skeleton/Skeleton.styles.js +13 -0
  101. package/dist/components/Skeleton/index.js +25 -0
  102. package/dist/components/Spinner/Spinner.js +47 -0
  103. package/dist/components/Spinner/Spinner.stories.js +134 -0
  104. package/dist/components/Spinner/Spinner.styles.js +76 -0
  105. package/dist/components/Switch/Switch.js +59 -0
  106. package/dist/components/Switch/Switch.stories.js +86 -0
  107. package/dist/components/Switch/index.js +15 -0
  108. package/dist/components/Switch/styles/index.js +46 -0
  109. package/dist/components/Table/Table.js +13 -0
  110. package/dist/components/Table/Table.stories.js +92 -0
  111. package/dist/components/Table/Table.styles.js +87 -0
  112. package/dist/components/Table/index.js +59 -0
  113. package/dist/components/Tabs/Tabs.js +48 -0
  114. package/dist/components/Tabs/Tabs.stories.js +51 -0
  115. package/dist/components/Tabs/combineSizeWithVariant.js +44 -0
  116. package/dist/components/Tabs/index.js +41 -0
  117. package/dist/components/Tabs/styles/index.js +52 -0
  118. package/dist/components/Text/Text.js +44 -0
  119. package/dist/components/Text/Text.stories.js +56 -0
  120. package/dist/components/Text/Text.styles.js +67 -0
  121. package/dist/components/Text/combineAsWithVariant.js +123 -0
  122. package/dist/components/Text/options.js +9 -0
  123. package/dist/components/ThemeProvider/ThemeProvider.js +66 -0
  124. package/dist/components/ThemeProvider/ThemeProvider.stories.js +63 -0
  125. package/dist/components/index.js +577 -0
  126. package/dist/components/styles.js +175 -0
  127. package/dist/theme/base/breakpoints.js +27 -0
  128. package/dist/theme/base/colors.js +148 -0
  129. package/dist/theme/base/index.js +59 -0
  130. package/dist/theme/base/sizes.js +88 -0
  131. package/dist/theme/base/typography.js +41 -0
  132. package/dist/theme/base/zindices.js +35 -0
  133. package/dist/theme/global.js +52 -0
  134. package/dist/theme/index.js +63 -0
  135. package/dist/utils/Spaces.js +27 -0
  136. package/package.json +1 -1
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "default", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _react.Accordion;
10
+ }
11
+ });
12
+
13
+ var _react = require("@chakra-ui/react");
@@ -0,0 +1,86 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.Accordion = void 0;
9
+
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _react2 = require("@chakra-ui/react");
15
+
16
+ var _Text = _interopRequireDefault(require("../Text/Text"));
17
+
18
+ var _Heading = _interopRequireDefault(require("../Heading/Heading"));
19
+
20
+ var _Accordion = _interopRequireDefault(require("./Accordion"));
21
+
22
+ var _index = require("./index");
23
+
24
+ var _default = {
25
+ title: 'v2/Accordion',
26
+ parameters: {
27
+ removeBaseHtmlClass: true
28
+ },
29
+ argTypes: {
30
+ accordionText: {
31
+ control: {
32
+ type: 'text'
33
+ }
34
+ },
35
+ allowMultiple: {
36
+ control: {
37
+ type: 'boolean'
38
+ }
39
+ },
40
+ allowToggle: {
41
+ control: {
42
+ type: 'boolean'
43
+ }
44
+ },
45
+ index: {
46
+ control: {
47
+ type: 'number'
48
+ }
49
+ }
50
+ }
51
+ };
52
+ exports.default = _default;
53
+
54
+ var AccordionTemplate = function AccordionTemplate(_ref) {
55
+ var accordionText = _ref.accordionText,
56
+ allowMultiple = _ref.allowMultiple,
57
+ index = _ref.index,
58
+ allowToggle = _ref.allowToggle;
59
+ var multipleOptions = allowMultiple ? {
60
+ allowMultiple: allowMultiple,
61
+ defaultIndex: index
62
+ } : '';
63
+ var toggleOptions = allowToggle ? {
64
+ allowToggle: allowToggle
65
+ } : '';
66
+ return /*#__PURE__*/_react.default.createElement(_Accordion.default, (0, _extends2.default)({}, toggleOptions, multipleOptions), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
67
+ as: "h3"
68
+ }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
69
+ flex: "1",
70
+ textAlign: "left"
71
+ }, "Accordion Item 1 Title"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
72
+ as: "h3"
73
+ }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
74
+ flex: "1",
75
+ textAlign: "left"
76
+ }, "Accordion Item 2 Title"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))));
77
+ };
78
+
79
+ var Accordion = AccordionTemplate.bind({});
80
+ exports.Accordion = Accordion;
81
+ Accordion.args = {
82
+ accordionText: "You must come along now, Artoo. There's really nothing more we can do. And my joints are freezing up. Don't say thing like that! Of course we'll see Master Luke again. He'll be quite all right, you'll see. Stupid little short-circuit. He'll be quite all right. Sir, all the patrols are in. There's still no contact from Skywalker or Solo. Mistress Leia, Artoo says he's been quite unable to pick up any signals, although he does admit that his own range is far too weak to abandon all hope. Your Highness, there's nothing more we can do tonight. The shield doors must be closed. Close the doors. Yes, sir.",
83
+ allowMultiple: true,
84
+ allowToggle: true,
85
+ index: [1]
86
+ };
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ Object.defineProperty(exports, "AccordionButton", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _react.AccordionButton;
12
+ }
13
+ });
14
+ Object.defineProperty(exports, "AccordionIcon", {
15
+ enumerable: true,
16
+ get: function get() {
17
+ return _react.AccordionIcon;
18
+ }
19
+ });
20
+ Object.defineProperty(exports, "AccordionItem", {
21
+ enumerable: true,
22
+ get: function get() {
23
+ return _react.AccordionItem;
24
+ }
25
+ });
26
+ Object.defineProperty(exports, "AccordionPanel", {
27
+ enumerable: true,
28
+ get: function get() {
29
+ return _react.AccordionPanel;
30
+ }
31
+ });
32
+ Object.defineProperty(exports, "default", {
33
+ enumerable: true,
34
+ get: function get() {
35
+ return _Accordion.default;
36
+ }
37
+ });
38
+
39
+ var _Accordion = _interopRequireDefault(require("./Accordion"));
40
+
41
+ var _react = require("@chakra-ui/react");
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _Heading = require("../../Heading/Heading.styles");
9
+
10
+ var button = {
11
+ fontSize: _Heading.variants.h4.fontSize,
12
+ fontWeight: 'semibold',
13
+ px: 0,
14
+ py: {
15
+ base: 4,
16
+ tablet: 6
17
+ },
18
+ '& svg': {
19
+ color: 'primary.default'
20
+ }
21
+ };
22
+ var _default = button;
23
+ exports.default = _default;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var container = {
8
+ borderTopWidth: '1px',
9
+ borderColor: 'gray.medium',
10
+ _last: {
11
+ borderBottomWidth: '1px'
12
+ }
13
+ };
14
+ var _default = container;
15
+ exports.default = _default;
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _merge = _interopRequireDefault(require("lodash/merge"));
11
+
12
+ var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
13
+
14
+ var _panel = _interopRequireDefault(require("./panel"));
15
+
16
+ var _button = _interopRequireDefault(require("./button"));
17
+
18
+ var _container = _interopRequireDefault(require("./container"));
19
+
20
+ var parts = ['container', 'button', 'panel'];
21
+ var baseStyle = {
22
+ panel: _panel.default,
23
+ button: _button.default,
24
+ container: _container.default
25
+ };
26
+
27
+ var _default = (0, _merge.default)(_theme.default.components.Accordion, {
28
+ parts: parts,
29
+ baseStyle: baseStyle
30
+ });
31
+
32
+ exports.default = _default;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var panel = {
8
+ pt: 0,
9
+ px: 0,
10
+ pb: 6
11
+ };
12
+ var _default = panel;
13
+ exports.default = _default;
@@ -0,0 +1,119 @@
1
+ "use strict";
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
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
10
+
11
+ Object.defineProperty(exports, "__esModule", {
12
+ value: true
13
+ });
14
+ exports.default = exports.STATUSES = void 0;
15
+
16
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
17
+
18
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
19
+
20
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
+
22
+ var _react = _interopRequireWildcard(require("react"));
23
+
24
+ var _react2 = require("@chakra-ui/react");
25
+
26
+ var _times = _interopRequireDefault(require("@spothero/icons/times"));
27
+
28
+ var _filledInfoCircle = _interopRequireDefault(require("@spothero/icons/filled-info-circle"));
29
+
30
+ var _filledExclamationCircle = _interopRequireDefault(require("@spothero/icons/filled-exclamation-circle"));
31
+
32
+ var _filledCheckCircle = _interopRequireDefault(require("@spothero/icons/filled-check-circle"));
33
+
34
+ var _Button = _interopRequireDefault(require("../Button/Button"));
35
+
36
+ var _Icon = _interopRequireDefault(require("../Icon/Icon"));
37
+
38
+ var _excluded = ["status", "title", "buttonProps", "buttonText", "buttonOnBottom", "showDismiss", "onDismissClick", "showIcon", "description", "ref"];
39
+
40
+ var _statusIconMapping;
41
+
42
+ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
43
+
44
+ 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; }
45
+
46
+ var STATUSES = {
47
+ NEUTRAL: 'neutral',
48
+ ERROR: 'error',
49
+ WARNING: 'warning',
50
+ SUCCESS: 'success'
51
+ };
52
+ exports.STATUSES = STATUSES;
53
+ var statusIconMapping = (_statusIconMapping = {}, (0, _defineProperty2.default)(_statusIconMapping, STATUSES.WARNING, _filledExclamationCircle.default), (0, _defineProperty2.default)(_statusIconMapping, STATUSES.SUCCESS, _filledCheckCircle.default), (0, _defineProperty2.default)(_statusIconMapping, STATUSES.ERROR, _filledExclamationCircle.default), (0, _defineProperty2.default)(_statusIconMapping, STATUSES.NEUTRAL, _filledInfoCircle.default), _statusIconMapping);
54
+
55
+ var Alert = function Alert(_ref) {
56
+ var status = _ref.status,
57
+ title = _ref.title,
58
+ buttonProps = _ref.buttonProps,
59
+ buttonText = _ref.buttonText,
60
+ buttonOnBottom = _ref.buttonOnBottom,
61
+ showDismiss = _ref.showDismiss,
62
+ onDismissClick = _ref.onDismissClick,
63
+ showIcon = _ref.showIcon,
64
+ description = _ref.description,
65
+ ref = _ref.ref,
66
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
67
+ var style = (0, _react2.useStyleConfig)('Alert', {
68
+ 'data-status': status
69
+ });
70
+ var IconVariant = statusIconMapping[status];
71
+ return /*#__PURE__*/_react.default.createElement(_react2.Alert, (0, _extends2.default)({
72
+ "data-status": status
73
+ }, props, {
74
+ ref: ref
75
+ }), showIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
76
+ sx: style.icon,
77
+ as: IconVariant
78
+ }) : null, /*#__PURE__*/_react.default.createElement(_react2.VStack, {
79
+ spacing: 0,
80
+ alignItems: "flex-start"
81
+ }, title ? /*#__PURE__*/_react.default.createElement(_react2.AlertTitle, null, title) : null, description ? /*#__PURE__*/_react.default.createElement(_react2.AlertDescription, null, description) : null, buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
82
+ sx: style.actionButton,
83
+ variant: "tertiary"
84
+ }, buttonProps), buttonText) : null), /*#__PURE__*/_react.default.createElement(_react2.Flex, {
85
+ alignItems: "center",
86
+ marginLeft: "auto"
87
+ }, !buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
88
+ sx: style.actionButton,
89
+ variant: "tertiary"
90
+ }, buttonProps), buttonText) : null, showDismiss ? /*#__PURE__*/_react.default.createElement(_Button.default, {
91
+ sx: style.dismissButton,
92
+ onClick: onDismissClick
93
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
94
+ width: 3,
95
+ height: "auto",
96
+ as: _times.default
97
+ })) : null));
98
+ };
99
+
100
+ Alert.defaultProps = {
101
+ status: 'neutral',
102
+ title: null,
103
+ buttonProps: null,
104
+ buttonText: null,
105
+ buttonOnBottom: false,
106
+ showDismiss: false,
107
+ onDismissClick: null,
108
+ showIcon: true,
109
+ description: null,
110
+ size: 'md'
111
+ };
112
+
113
+ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
114
+ return /*#__PURE__*/_react.default.createElement(Alert, (0, _extends2.default)({
115
+ ref: ref
116
+ }, props));
117
+ });
118
+
119
+ exports.default = _default;
@@ -0,0 +1,80 @@
1
+ "use strict";
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
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
+
15
+ Object.defineProperty(exports, "__esModule", {
16
+ value: true
17
+ });
18
+ exports.default = exports.Alert = void 0;
19
+
20
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
+
22
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
23
+
24
+ var _react = _interopRequireDefault(require("react"));
25
+
26
+ var _react2 = require("@chakra-ui/react");
27
+
28
+ var _createControl = require("storybook/utils/create-control");
29
+
30
+ var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
31
+
32
+ var _Alert = _interopRequireDefault(require("./Alert"));
33
+
34
+ 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; }
35
+
36
+ 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; }
37
+
38
+ var _default = {
39
+ title: 'v2/Alert',
40
+ component: _Alert.default,
41
+ parameters: {
42
+ removeBaseHtmlClass: true
43
+ }
44
+ };
45
+ exports.default = _default;
46
+
47
+ var AlertTemplate = function AlertTemplate(props) {
48
+ return /*#__PURE__*/_react.default.createElement(_react2.VStack, {
49
+ alignItems: "flex-start"
50
+ }, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Success"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
51
+ status: "success"
52
+ }, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Error"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
53
+ status: "error"
54
+ }, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Warning"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
55
+ status: "warning"
56
+ }, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Neutral"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
57
+ status: "neutral"
58
+ }, props)));
59
+ };
60
+
61
+ var Alert = AlertTemplate.bind({});
62
+ exports.Alert = Alert;
63
+ Alert.argTypes = _objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('size', ['sm', 'md', 'lg'])), (0, _disableArgs.default)(['buttonProps', 'onDismissClick', 'status']));
64
+ Alert.args = {
65
+ title: 'Hello',
66
+ buttonOnBottom: false,
67
+ buttonText: 'Action',
68
+ description: 'This is an alert.',
69
+ buttonProps: {
70
+ onClick: function onClick() {
71
+ return console.log('Action clicked');
72
+ }
73
+ },
74
+ showDismiss: true,
75
+ onDismissClick: function onDismissClick() {
76
+ return console.log('dismissed');
77
+ },
78
+ showIcon: true,
79
+ size: 'md'
80
+ };
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ Object.defineProperty(exports, "default", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _Alert.default;
12
+ }
13
+ });
14
+
15
+ var _Alert = _interopRequireDefault(require("./Alert"));
@@ -0,0 +1,192 @@
1
+ "use strict";
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
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
+
15
+ Object.defineProperty(exports, "__esModule", {
16
+ value: true
17
+ });
18
+ exports.default = void 0;
19
+
20
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
+
22
+ var _merge = _interopRequireDefault(require("lodash/merge"));
23
+
24
+ var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
25
+
26
+ var _Alert = require("../Alert");
27
+
28
+ 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; }
29
+
30
+ 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; }
31
+
32
+ var _baseStyle = {
33
+ container: {
34
+ paddingY: 2,
35
+ borderRadius: 'base'
36
+ },
37
+ actionButton: {
38
+ fontSize: 'sm',
39
+ height: 'fit-content',
40
+ lineHeight: '1.4',
41
+ color: 'primary.600',
42
+ _hover: {
43
+ color: 'primary.700'
44
+ }
45
+ },
46
+ dismissButton: {
47
+ color: 'gray.600',
48
+ borderColor: 'transparent',
49
+ borderWidth: '2px',
50
+ padding: 0,
51
+ width: 10,
52
+ height: 10,
53
+ backgroundColor: 'transparent',
54
+ borderRadius: 'base',
55
+ marginLeft: 2,
56
+ _hover: {
57
+ color: 'gray.700'
58
+ },
59
+ _focus: {
60
+ color: 'gray.700',
61
+ borderColor: 'white',
62
+ boxShadow: 'outline'
63
+ }
64
+ },
65
+ icon: {
66
+ width: 6,
67
+ marginRight: 2,
68
+ height: 'auto'
69
+ },
70
+ description: {
71
+ lineHeight: 1.4
72
+ },
73
+ title: {
74
+ lineHeight: 1.4
75
+ }
76
+ };
77
+
78
+ var statusStyles = function statusStyles(status) {
79
+ switch (status) {
80
+ case _Alert.STATUSES.NEUTRAL:
81
+ return {
82
+ container: {
83
+ background: 'gray.light'
84
+ },
85
+ icon: {
86
+ color: 'gray.dark'
87
+ },
88
+ dismissButton: {
89
+ _hover: {
90
+ background: 'gray.200'
91
+ },
92
+ _focus: {
93
+ background: 'gray.200'
94
+ }
95
+ }
96
+ };
97
+
98
+ case _Alert.STATUSES.WARNING:
99
+ return {
100
+ container: {
101
+ background: 'yellow.100'
102
+ },
103
+ icon: {
104
+ color: 'yellow.500'
105
+ },
106
+ dismissButton: {
107
+ _hover: {
108
+ background: 'yellow.200'
109
+ },
110
+ _focus: {
111
+ background: 'yellow.200'
112
+ }
113
+ }
114
+ };
115
+
116
+ case _Alert.STATUSES.ERROR:
117
+ return {
118
+ container: {
119
+ background: 'red.100'
120
+ },
121
+ icon: {
122
+ color: 'red.700'
123
+ },
124
+ dismissButton: {
125
+ _hover: {
126
+ background: 'red.200'
127
+ },
128
+ _focus: {
129
+ background: 'red.200'
130
+ }
131
+ }
132
+ };
133
+
134
+ case _Alert.STATUSES.SUCCESS:
135
+ return {
136
+ container: {
137
+ background: 'green.100'
138
+ },
139
+ icon: {
140
+ color: 'green.700'
141
+ },
142
+ dismissButton: {
143
+ _hover: {
144
+ background: 'green.200'
145
+ },
146
+ _focus: {
147
+ background: 'green.200'
148
+ }
149
+ }
150
+ };
151
+
152
+ default:
153
+ return {};
154
+ }
155
+ };
156
+
157
+ var overrides = {
158
+ baseStyle: function baseStyle(props) {
159
+ return (0, _merge.default)(_objectSpread({}, _theme.default.components.Alert.baseStyle), _baseStyle, statusStyles(props['data-status']));
160
+ },
161
+ variants: {},
162
+ sizes: {
163
+ sm: {
164
+ title: {
165
+ fontSize: 'xs'
166
+ },
167
+ description: {
168
+ fontSize: 'xs'
169
+ }
170
+ },
171
+ md: {
172
+ title: {
173
+ fontSize: 'sm'
174
+ },
175
+ description: {
176
+ fontSize: 'sm'
177
+ }
178
+ },
179
+ lg: {
180
+ title: {
181
+ fontSize: 'base'
182
+ },
183
+ description: {
184
+ fontSize: 'base'
185
+ }
186
+ }
187
+ }
188
+ };
189
+
190
+ var _default = _objectSpread(_objectSpread({}, _theme.default.components.Alert), overrides);
191
+
192
+ exports.default = _default;