@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.
Files changed (180) hide show
  1. package/dist/index.cjs.js +54151 -0
  2. package/dist/index.cjs.js.map +1 -0
  3. package/dist/index.esm.js +53999 -0
  4. package/dist/index.esm.js.map +1 -0
  5. package/package.json +39 -40
  6. package/dist/components/Accordion/Accordion.stories.js +0 -91
  7. package/dist/components/Accordion/AccordionActionButton.js +0 -29
  8. package/dist/components/Accordion/index.js +0 -44
  9. package/dist/components/Accordion/styles/index.js +0 -76
  10. package/dist/components/Alert/Alert.js +0 -83
  11. package/dist/components/Alert/Alert.stories.js +0 -49
  12. package/dist/components/Alert/index.js +0 -13
  13. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +0 -148
  14. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +0 -19
  15. package/dist/components/AutoSuggestSelect/index.js +0 -13
  16. package/dist/components/Badge/Badge.js +0 -12
  17. package/dist/components/Badge/Badge.stories.js +0 -28
  18. package/dist/components/Badge/styles/index.js +0 -32
  19. package/dist/components/Button/Button.js +0 -36
  20. package/dist/components/Button/Button.spec.js +0 -25
  21. package/dist/components/Button/Button.styles.js +0 -164
  22. package/dist/components/Button/button-props.js +0 -71
  23. package/dist/components/Button/index.js +0 -20
  24. package/dist/components/Button/stories/button.js +0 -45
  25. package/dist/components/Button/stories/index.stories.js +0 -94
  26. package/dist/components/Button/stories/overview.js +0 -63
  27. package/dist/components/Card/Card.js +0 -22
  28. package/dist/components/Card/Card.stories.js +0 -29
  29. package/dist/components/Checkbox/Checkbox.js +0 -38
  30. package/dist/components/Checkbox/Checkbox.stories.js +0 -65
  31. package/dist/components/Checkbox/index.js +0 -13
  32. package/dist/components/Checkbox/styles/index.js +0 -89
  33. package/dist/components/Container/Container.js +0 -17
  34. package/dist/components/Container/Container.stories.js +0 -43
  35. package/dist/components/Container/Container.styles.js +0 -16
  36. package/dist/components/CreatableSelect/CreatableSelect.js +0 -124
  37. package/dist/components/CreatableSelect/CreatableSelect.stories.js +0 -55
  38. package/dist/components/CreatableSelect/index.js +0 -13
  39. package/dist/components/Divider/Divider.js +0 -29
  40. package/dist/components/Divider/Divider.stories.js +0 -35
  41. package/dist/components/Divider/Divider.styles.js +0 -20
  42. package/dist/components/Drawer/Drawer.js +0 -24
  43. package/dist/components/Drawer/Drawer.stories.js +0 -39
  44. package/dist/components/Drawer/index.js +0 -56
  45. package/dist/components/Drawer/styles/index.js +0 -104
  46. package/dist/components/FormControl/FormControl.js +0 -67
  47. package/dist/components/Grid/Grid.js +0 -28
  48. package/dist/components/Grid/Grid.stories.js +0 -100
  49. package/dist/components/Grid/Grid.styles.js +0 -17
  50. package/dist/components/Grid/GridItem.js +0 -17
  51. package/dist/components/Grid/GridItem.styles.js +0 -13
  52. package/dist/components/Grid/index.js +0 -20
  53. package/dist/components/Heading/Heading.js +0 -27
  54. package/dist/components/Heading/Heading.stories.js +0 -41
  55. package/dist/components/Heading/Heading.styles.js +0 -63
  56. package/dist/components/Icon/Icon.js +0 -12
  57. package/dist/components/Icon/Icon.stories.js +0 -36
  58. package/dist/components/Image/Image.js +0 -73
  59. package/dist/components/Image/Image.spec.js +0 -77
  60. package/dist/components/Image/Image.stories.js +0 -74
  61. package/dist/components/Input/Input.js +0 -44
  62. package/dist/components/Input/Input.stories.js +0 -59
  63. package/dist/components/Input/index.js +0 -13
  64. package/dist/components/Input/styles/index.js +0 -64
  65. package/dist/components/Link/Link.js +0 -12
  66. package/dist/components/Link/Link.stories.js +0 -49
  67. package/dist/components/Link/Link.styles.js +0 -44
  68. package/dist/components/List/List.js +0 -61
  69. package/dist/components/List/List.stories.js +0 -75
  70. package/dist/components/List/index.js +0 -20
  71. package/dist/components/List/styles/index.js +0 -16
  72. package/dist/components/List/styles/item.styles.js +0 -10
  73. package/dist/components/Loader/Loader.js +0 -44
  74. package/dist/components/Loader/Loader.stories.js +0 -116
  75. package/dist/components/Menu/Menu.js +0 -16
  76. package/dist/components/Menu/Menu.stories.js +0 -159
  77. package/dist/components/Menu/Menu.styles.js +0 -173
  78. package/dist/components/Menu/index.js +0 -56
  79. package/dist/components/Modal/Modal.js +0 -42
  80. package/dist/components/Modal/Modal.stories.js +0 -184
  81. package/dist/components/Modal/index.js +0 -32
  82. package/dist/components/Modal/styles/body.js +0 -30
  83. package/dist/components/Modal/styles/closeButton.js +0 -24
  84. package/dist/components/Modal/styles/dialog.js +0 -22
  85. package/dist/components/Modal/styles/dialogContainer.js +0 -19
  86. package/dist/components/Modal/styles/footer.js +0 -11
  87. package/dist/components/Modal/styles/header.js +0 -17
  88. package/dist/components/Modal/styles/index.js +0 -53
  89. package/dist/components/Modal/styles/overlay.js +0 -10
  90. package/dist/components/Popover/Popover.js +0 -26
  91. package/dist/components/Popover/Popover.stories.js +0 -80
  92. package/dist/components/Popover/PopoverArrow.js +0 -19
  93. package/dist/components/Popover/PopoverCloseButton.js +0 -19
  94. package/dist/components/Popover/PopoverContent.js +0 -38
  95. package/dist/components/Popover/index.js +0 -40
  96. package/dist/components/Popover/styles/index.js +0 -24
  97. package/dist/components/Popover/styles/popover-arrow.js +0 -12
  98. package/dist/components/Popover/styles/popover-body.js +0 -10
  99. package/dist/components/Popover/styles/popover-close-button.js +0 -26
  100. package/dist/components/Popover/styles/popover-content.js +0 -26
  101. package/dist/components/Popover/styles/popover-header.js +0 -11
  102. package/dist/components/Popover/styles/popper.js +0 -10
  103. package/dist/components/Progress/Progress.js +0 -37
  104. package/dist/components/Progress/Progress.stories.js +0 -79
  105. package/dist/components/Progress/Progress.styles.js +0 -122
  106. package/dist/components/Radio/Radio.js +0 -37
  107. package/dist/components/Radio/Radio.stories.js +0 -138
  108. package/dist/components/Radio/RadioGroup.js +0 -47
  109. package/dist/components/Radio/index.js +0 -20
  110. package/dist/components/Radio/styles/index.js +0 -118
  111. package/dist/components/RefreshedInput/Button/Button.js +0 -67
  112. package/dist/components/RefreshedInput/Button/Button.stories.js +0 -79
  113. package/dist/components/RefreshedInput/Button/index.js +0 -13
  114. package/dist/components/RefreshedInput/Button/styles/index.js +0 -25
  115. package/dist/components/RefreshedInput/FormControl/index.js +0 -167
  116. package/dist/components/RefreshedInput/Input/Input.js +0 -61
  117. package/dist/components/RefreshedInput/Input/Input.stories.js +0 -74
  118. package/dist/components/RefreshedInput/Input/index.js +0 -13
  119. package/dist/components/RefreshedInput/Input/styles/index.js +0 -23
  120. package/dist/components/RefreshedInput/Select/Select.js +0 -65
  121. package/dist/components/RefreshedInput/Select/Select.stories.js +0 -80
  122. package/dist/components/RefreshedInput/Select/index.js +0 -13
  123. package/dist/components/RefreshedInput/Select/styles/index.js +0 -26
  124. package/dist/components/RefreshedInput/index.js +0 -34
  125. package/dist/components/RefreshedInput/storyAid/index.js +0 -19
  126. package/dist/components/Select/Select.js +0 -50
  127. package/dist/components/Select/Select.stories.js +0 -63
  128. package/dist/components/Select/index.js +0 -13
  129. package/dist/components/Select/styles/index.js +0 -46
  130. package/dist/components/SelectionCard/SelectionCard.js +0 -61
  131. package/dist/components/SelectionCard/SelectionCard.stories.js +0 -90
  132. package/dist/components/SelectionCard/index.js +0 -13
  133. package/dist/components/Skeleton/Skeleton.stories.js +0 -23
  134. package/dist/components/Skeleton/Skeleton.styles.js +0 -9
  135. package/dist/components/Skeleton/index.js +0 -24
  136. package/dist/components/Spinner/Spinner.js +0 -29
  137. package/dist/components/Spinner/Spinner.stories.js +0 -98
  138. package/dist/components/Spinner/Spinner.styles.js +0 -85
  139. package/dist/components/Switch/Switch.js +0 -40
  140. package/dist/components/Switch/Switch.stories.js +0 -76
  141. package/dist/components/Switch/index.js +0 -13
  142. package/dist/components/Switch/styles/index.js +0 -32
  143. package/dist/components/Table/Table.js +0 -12
  144. package/dist/components/Table/Table.stories.js +0 -69
  145. package/dist/components/Table/Table.styles.js +0 -66
  146. package/dist/components/Table/index.js +0 -62
  147. package/dist/components/Tabs/Tabs.js +0 -35
  148. package/dist/components/Tabs/Tabs.stories.js +0 -39
  149. package/dist/components/Tabs/combineSizeWithVariant.js +0 -36
  150. package/dist/components/Tabs/index.js +0 -38
  151. package/dist/components/Tabs/styles/index.js +0 -70
  152. package/dist/components/Text/Text.js +0 -33
  153. package/dist/components/Text/Text.stories.js +0 -42
  154. package/dist/components/Text/Text.styles.js +0 -45
  155. package/dist/components/Text/combineAsWithVariant.js +0 -100
  156. package/dist/components/Text/options.js +0 -8
  157. package/dist/components/Textarea/Textarea.js +0 -44
  158. package/dist/components/Textarea/Textarea.stories.js +0 -59
  159. package/dist/components/Textarea/index.js +0 -13
  160. package/dist/components/Textarea/styles/index.js +0 -64
  161. package/dist/components/ThemeProvider/ThemeProvider.js +0 -39
  162. package/dist/components/ThemeProvider/ThemeProvider.stories.js +0 -51
  163. package/dist/components/Toast/Toast.stories.js +0 -77
  164. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js +0 -59
  165. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.js +0 -53
  166. package/dist/components/ToggleButtonGroup/index.js +0 -13
  167. package/dist/components/ToggleButtonGroup/styles/index.js +0 -47
  168. package/dist/components/index.js +0 -785
  169. package/dist/components/styles.js +0 -188
  170. package/dist/theme/base/breakpoints.js +0 -23
  171. package/dist/theme/base/colors.js +0 -138
  172. package/dist/theme/base/index.js +0 -79
  173. package/dist/theme/base/notifications.js +0 -198
  174. package/dist/theme/base/shadows.js +0 -15
  175. package/dist/theme/base/sizes.js +0 -88
  176. package/dist/theme/base/typography.js +0 -38
  177. package/dist/theme/base/zindices.js +0 -33
  178. package/dist/theme/global.js +0 -110
  179. package/dist/theme/index.js +0 -33
  180. package/dist/utils/Spaces.js +0 -16
@@ -1,173 +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 baseStyle = {
11
- button: {
12
- px: 8,
13
- py: 3,
14
- fontSize: 'base',
15
- fontFamily: 'body',
16
- lineHeight: 0.875,
17
- fontWeight: 'semibold',
18
- borderWidth: '1px',
19
- borderStyle: 'solid',
20
- borderRadius: 'base',
21
- textTransform: 'capitalize',
22
- transition: 'all normal ease',
23
- _hover: {
24
- bg: 'gray.50',
25
- borderColor: 'gray.200'
26
- },
27
- _disabled: {
28
- cursor: 'not-allowed',
29
- opacity: 1,
30
- bg: 'gray.200',
31
- borderColor: 'gray.200',
32
- color: 'gray.600'
33
- },
34
- _focus: {
35
- zIndex: 1,
36
- boxShadow: 'outline'
37
- }
38
- },
39
- list: {
40
- bg: 'white',
41
- boxShadow: 'base',
42
- padding: 6,
43
- zIndex: 'layer1',
44
- width: 64
45
- },
46
- item: {
47
- paddingX: 2,
48
- paddingY: 1.5,
49
- _focus: {
50
- zIndex: 1,
51
- boxShadow: 'outline'
52
- }
53
- },
54
- groupTitle: {
55
- fontWeight: 'semibold',
56
- color: 'gray.600',
57
- padding: 2
58
- },
59
- command: {
60
- // this will style the text defined by the command
61
- // prop in the MenuItem and MenuItemOption components
62
- opacity: '0.8',
63
- fontFamily: 'mono',
64
- fontSize: 'sm',
65
- letterSpacing: 'tighter',
66
- paddingL: 4
67
- },
68
- divider: {
69
- marginY: 2,
70
- borderColor: 'gray.200'
71
- }
72
- };
73
- const variants = {
74
- basic: {
75
- button: {
76
- bg: 'primary.default',
77
- borderColor: 'primary.default',
78
- color: 'white',
79
- _hover: {
80
- bg: 'primary.600',
81
- borderColor: 'primary.600',
82
- color: 'white',
83
- _disabled: {
84
- bg: 'gray.200',
85
- borderColor: 'gray.200',
86
- color: 'gray.600'
87
- }
88
- }
89
- },
90
- list: {
91
- bg: 'white',
92
- boxShadow: 'base',
93
- zIndex: 'layer1',
94
- borderColor: 'gray.100',
95
- borderWidth: '1px',
96
- borderStyle: 'solid',
97
- borderRadius: 'base',
98
- padding: 4,
99
- width: 64
100
- },
101
- groupTitle: {
102
- fontWeight: 'semibold',
103
- fontSize: 'md',
104
- color: 'gray.600',
105
- padding: 2
106
- },
107
- item: {
108
- fontWeight: 'semibold',
109
- _hover: {
110
- color: 'gray.600'
111
- }
112
- }
113
- },
114
- full: {
115
- button: {
116
- height: 8,
117
- fontSize: 'sm',
118
- fontWeight: 'semibold',
119
- color: 'black',
120
- borderColor: 'white',
121
- backgroundColor: 'white',
122
- borderRadius: 'base',
123
- paddingX: 3,
124
- paddingY: 'auto',
125
- _hover: {
126
- color: 'black',
127
- backgroundColor: 'gray.50',
128
- borderColor: 'gray.50'
129
- },
130
- _active: {
131
- color: 'primary.default',
132
- backgroundColor: 'gray.50',
133
- borderColor: 'gray.50',
134
- _hover: {
135
- color: 'primary.600',
136
- backgroundColor: 'gray.50',
137
- borderColor: 'gray.50'
138
- }
139
- }
140
- },
141
- list: {
142
- height: '30rem',
143
- width: '100vw',
144
- padding: 8,
145
- backgroundColor: 'white'
146
- },
147
- groupTitle: {
148
- fontSize: 'sm',
149
- weight: 'normal',
150
- color: 'gray.600'
151
- },
152
- item: {
153
- display: 'block',
154
- paddingX: 3.5,
155
- paddingY: 2.5,
156
- marginBottom: 2,
157
- _last: {
158
- marginBottom: 0
159
- },
160
- _hover: {
161
- backgroundColor: 'gray.50'
162
- },
163
- _focus: {
164
- boxShadow: 'none',
165
- backgroundColor: 'gray.50'
166
- }
167
- }
168
- }
169
- };
170
- var _default = exports.default = (0, _merge.default)(_theme.default.components.Menu, {
171
- baseStyle,
172
- variants
173
- });
@@ -1,56 +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, "MenuButton", {
8
- enumerable: true,
9
- get: function () {
10
- return _react.MenuButton;
11
- }
12
- });
13
- Object.defineProperty(exports, "MenuDivider", {
14
- enumerable: true,
15
- get: function () {
16
- return _react.MenuDivider;
17
- }
18
- });
19
- Object.defineProperty(exports, "MenuGroup", {
20
- enumerable: true,
21
- get: function () {
22
- return _react.MenuGroup;
23
- }
24
- });
25
- Object.defineProperty(exports, "MenuItem", {
26
- enumerable: true,
27
- get: function () {
28
- return _react.MenuItem;
29
- }
30
- });
31
- Object.defineProperty(exports, "MenuItemOption", {
32
- enumerable: true,
33
- get: function () {
34
- return _react.MenuItemOption;
35
- }
36
- });
37
- Object.defineProperty(exports, "MenuList", {
38
- enumerable: true,
39
- get: function () {
40
- return _react.MenuList;
41
- }
42
- });
43
- Object.defineProperty(exports, "MenuOptionGroup", {
44
- enumerable: true,
45
- get: function () {
46
- return _react.MenuOptionGroup;
47
- }
48
- });
49
- Object.defineProperty(exports, "default", {
50
- enumerable: true,
51
- get: function () {
52
- return _Menu.default;
53
- }
54
- });
55
- var _Menu = _interopRequireDefault(require("./Menu"));
56
- var _react = require("@chakra-ui/react");
@@ -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 = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _react2 = require("@chakra-ui/react");
11
- var _header = _interopRequireDefault(require("./styles/header"));
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
- /**
15
- * @param {boolean} isMobile - Whether or not the Modal is opened in a mobile viewport
16
- * @param {boolean} isOpen - Whether or not the Modal is open
17
- * @param {React.ReactNode} children - The header text of the modal
18
- * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
19
- * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
20
- * @param {object} [contentStyling] - Style props to be passed into the modal content
21
- * @param {object} [overlayProps] - Props to be passed into the ModalOverlay component. See: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/modal/src/modal-overlay.tsx
22
- * @param {boolean} [hasHeader] - Whether or not ModalHeader is a child. Will change the styling
23
- * @param {boolean} [hasFooter] - Whether or not ModalFooter is a child. Will change the styling
24
- * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
25
- * @returns {React.ReactElement} - The Modal component
26
- */
27
- const Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
28
- const {
29
- children,
30
- isMobile,
31
- hideCloseButton,
32
- hasHeader,
33
- contentStyling = {},
34
- overlayProps = {}
35
- } = props;
36
- return /*#__PURE__*/_react.default.createElement(_react2.Modal, (0, _extends2.default)({
37
- motionPreset: isMobile ? 'slideInBottom' : 'scale'
38
- }, props, {
39
- ref: ref
40
- }), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, overlayProps), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, contentStyling, !hasHeader ? /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _header.default)(props)) : null, hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_react2.ModalCloseButton, null), children));
41
- });
42
- var _default = exports.default = Modal;
@@ -1,184 +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.TransactionalWithExpandingContent = exports.Transactional = exports.Passive = exports.NoHeader = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _react2 = require("@chakra-ui/react");
11
- var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
12
- var _createControl = require("storybook/utils/create-control");
13
- var _index = require("./index");
14
- var _Button = _interopRequireDefault(require("../Button/Button"));
15
- var _Text = _interopRequireDefault(require("../Text/Text"));
16
- var _Heading = _interopRequireDefault(require("../Heading/Heading"));
17
- var _Accordion = require("../Accordion");
18
- 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); }
19
- 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; }
20
- var _default = exports.default = {
21
- title: 'v2/Modal',
22
- component: _index.Modal,
23
- parameters: {
24
- importBy: 'Modal',
25
- removeBaseHtmlClass: true,
26
- chakraLink: 'https://chakra-ui.com/docs/overlay/Modal'
27
- },
28
- argTypes: {
29
- ...(0, _createControl.createSelectControl)('size', ['sm', 'md', 'lg']),
30
- ...(0, _disableArgs.default)(['isOpen', 'onClose']),
31
- hideCloseButton: {
32
- control: {
33
- type: 'boolean'
34
- }
35
- },
36
- children: {
37
- control: {
38
- type: 'text'
39
- }
40
- }
41
- },
42
- args: {
43
- size: 'md'
44
- }
45
- };
46
- const Transactional = props => {
47
- const [open, setOpen] = (0, _react.useState)(false);
48
- const isMobile = (0, _react2.useBreakpointValue)({
49
- base: true,
50
- tablet: false
51
- });
52
- return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
53
- marginBottom: 2
54
- }, "A \"Transactional\" modal just refers to one with a footer. Be sure to use the ", /*#__PURE__*/_react.default.createElement("code", null, "hasFooter"), " prop for the styling to be right when a ModalFooter is present. Same goes with ", /*#__PURE__*/_react.default.createElement("code", null, "hasHeader"), "."), /*#__PURE__*/_react.default.createElement(_Button.default, {
55
- onClick: () => setOpen(true)
56
- }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
57
- isMobile: isMobile,
58
- isOpen: open,
59
- hasHeader: true,
60
- hasFooter: true,
61
- onClose: () => setOpen(false)
62
- }), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Transactional"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children), /*#__PURE__*/_react.default.createElement(_index.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
63
- onClick: () => setOpen(false),
64
- variant: "secondary",
65
- marginRight: 4
66
- }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
67
- onClick: () => setOpen(false),
68
- variant: "primary"
69
- }, "Submit"))));
70
- };
71
- exports.Transactional = Transactional;
72
- Transactional.args = {
73
- header: 'Transactional',
74
- children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.'
75
- };
76
- const Passive = props => {
77
- const [open, setOpen] = (0, _react.useState)(false);
78
- const isMobile = (0, _react2.useBreakpointValue)({
79
- base: true,
80
- tablet: false
81
- });
82
- return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
83
- marginBottom: 2
84
- }, "A \"Passive\" modal just refers to one with no footer."), /*#__PURE__*/_react.default.createElement(_Button.default, {
85
- onClick: () => setOpen(true)
86
- }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
87
- isMobile: isMobile,
88
- isOpen: open,
89
- hasHeader: true,
90
- hasFooter: false,
91
- onClose: () => setOpen(false)
92
- }), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Passive"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children)));
93
- };
94
- exports.Passive = Passive;
95
- Passive.args = {
96
- children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.'
97
- };
98
- const NoHeader = props => {
99
- const [open, setOpen] = (0, _react.useState)(false);
100
- const isMobile = (0, _react2.useBreakpointValue)({
101
- base: true,
102
- tablet: false
103
- });
104
- return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
105
- marginBottom: 2
106
- }, "A modal with no header"), /*#__PURE__*/_react.default.createElement(_Button.default, {
107
- onClick: () => setOpen(true)
108
- }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
109
- isMobile: isMobile,
110
- hasHeader: false,
111
- hasFooter: false,
112
- isOpen: open,
113
- onClose: () => setOpen(false)
114
- }), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children)));
115
- };
116
- exports.NoHeader = NoHeader;
117
- NoHeader.args = {
118
- children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.'
119
- };
120
- const TransactionalWithExpandingContent = props => {
121
- const [open, setOpen] = (0, _react.useState)(false);
122
- const accordionRefs = [/*#__PURE__*/_react.default.createRef(), /*#__PURE__*/_react.default.createRef()];
123
- const isMobile = (0, _react2.useBreakpointValue)({
124
- base: true,
125
- tablet: false
126
- });
127
- const handleAccordionChange = index => {
128
- if (accordionRefs[index]) {
129
- // Timeout so that scroll doesn't happen until accordion animation complete
130
- setTimeout(() => {
131
- accordionRefs[index].current.scrollIntoView({
132
- behavior: 'smooth',
133
- block: 'start'
134
- });
135
- }, 150);
136
- }
137
- };
138
- return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
139
- marginBottom: 2
140
- }, "When content inside a modal dynamically expands, the modal should scroll to that new content."), /*#__PURE__*/_react.default.createElement(_Text.default, {
141
- marginBottom: 2
142
- }, "However, this is something we'll need to implement on a case by case basis when it applies."), /*#__PURE__*/_react.default.createElement(_Text.default, {
143
- marginBottom: 2
144
- }, "Feel free to check the code of this demo to see an example of how we might do that."), /*#__PURE__*/_react.default.createElement(_Button.default, {
145
- onClick: () => setOpen(true)
146
- }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
147
- isMobile: isMobile,
148
- hasHeader: true,
149
- hasFooter: true,
150
- isOpen: open,
151
- onClose: () => setOpen(false)
152
- }), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Transactional with Expanding Content"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
153
- marginBottom: 2
154
- }, "Try opening an Accordion when it is at the very bottom of the modal."), /*#__PURE__*/_react.default.createElement(_Text.default, {
155
- marginBottom: 2
156
- }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero."), /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, {
157
- onChange: handleAccordionChange,
158
- allowToggle: true
159
- }, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
160
- ref: accordionRefs[0]
161
- }, /*#__PURE__*/_react.default.createElement(_Heading.default, {
162
- as: "h3"
163
- }, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
164
- flex: "1",
165
- textAlign: "left"
166
- }, "Accordion 1"), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. Aliquam et urna condimentum, sagittis nisl hendrerit, elementum velit. Nullam quis nisl dictum, suscipit ligula nec, elementum libero. Nullam eu lorem convallis, dictum nisl in, condimentum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva"))), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
167
- ref: accordionRefs[1]
168
- }, /*#__PURE__*/_react.default.createElement(_Heading.default, {
169
- as: "h3"
170
- }, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
171
- flex: "1",
172
- textAlign: "left"
173
- }, "Accordion 2"), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. Aliquam et urna condimentum, sagittis nisl hendrerit, elementum velit. Nullam quis nisl dictum, suscipit ligula nec, elementum libero. Nullam eu lorem convallis, dictum nisl in, condimentum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva")))))), /*#__PURE__*/_react.default.createElement(_index.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
174
- onClick: () => setOpen(false),
175
- variant: "secondary",
176
- marginRight: 4
177
- }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
178
- variant: "primary"
179
- }, "Submit"))));
180
- };
181
- exports.TransactionalWithExpandingContent = TransactionalWithExpandingContent;
182
- TransactionalWithExpandingContent.argTypes = {
183
- ...(0, _disableArgs.default)(['children', 'hasHeader', 'hasFooter'])
184
- };
@@ -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
- Object.defineProperty(exports, "Modal", {
8
- enumerable: true,
9
- get: function () {
10
- return _Modal.default;
11
- }
12
- });
13
- Object.defineProperty(exports, "ModalBody", {
14
- enumerable: true,
15
- get: function () {
16
- return _react.ModalBody;
17
- }
18
- });
19
- Object.defineProperty(exports, "ModalFooter", {
20
- enumerable: true,
21
- get: function () {
22
- return _react.ModalFooter;
23
- }
24
- });
25
- Object.defineProperty(exports, "ModalHeader", {
26
- enumerable: true,
27
- get: function () {
28
- return _react.ModalHeader;
29
- }
30
- });
31
- var _react = require("@chakra-ui/react");
32
- var _Modal = _interopRequireDefault(require("./Modal"));
@@ -1,30 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _default = ({
8
- hasFooter,
9
- hasHeader,
10
- hideCloseButton
11
- }) => {
12
- const scrollingHeaderStyles = hasHeader || !hideCloseButton ? {
13
- // The following adapted from https://lea.verou.me/2012/04/background-attachment-local/
14
- background: 'linear-gradient(white 30%, white), linear-gradient(rgb(0 0 0 / 10%) 0%, white)',
15
- backgroundRepeat: 'no-repeat',
16
- backgroundColor: 'white',
17
- backgroundSize: '100% 30px, 100% 10px',
18
- backgroundAttachment: 'local, scroll'
19
- } : {};
20
- return {
21
- borderBottomRadius: hasFooter ? null : 'md',
22
- paddingX: 4,
23
- paddingBottom: 4,
24
- flex: 1,
25
- overflow: 'auto',
26
- display: 'flex',
27
- ...scrollingHeaderStyles
28
- };
29
- };
30
- exports.default = _default;
@@ -1,24 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _default = ({
8
- hasHeader
9
- }) => ({
10
- position: 'absolute',
11
- top: hasHeader ? 4 : 2,
12
- insetEnd: hasHeader ? 4 : 2,
13
- color: 'gray.dark',
14
- borderRadius: 'sm',
15
- width: 8,
16
- height: 8,
17
- _focus: {
18
- boxShadow: 'outline'
19
- },
20
- _hover: {
21
- bg: 'gray.50'
22
- }
23
- });
24
- exports.default = _default;
@@ -1,22 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _default = ({
8
- hasFooter
9
- }) => ({
10
- borderRadius: 'md',
11
- borderBottomRadius: {
12
- base: '0',
13
- tablet: 'md'
14
- },
15
- background: 'white',
16
- color: 'inherit',
17
- marginY: 0,
18
- zIndex: 'layer8',
19
- boxShadow: 'lg',
20
- paddingBottom: hasFooter ? 0 : 4
21
- });
22
- exports.default = _default;
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _default = exports.default = {
8
- display: 'flex',
9
- zIndex: 'layer8',
10
- justifyContent: 'center',
11
- alignItems: {
12
- base: 'flex-end',
13
- tablet: 'center'
14
- },
15
- height: '100%',
16
- minHeight: '-moz-available',
17
- minHeight: '-webkit-fill-available',
18
- minHeight: 'fill-available'
19
- };
@@ -1,11 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _default = exports.default = {
8
- borderTop: '1px',
9
- borderColor: 'gray.100',
10
- padding: 4
11
- };
@@ -1,17 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _default = ({
8
- hideCloseButton,
9
- hasHeader
10
- }) => ({
11
- padding: !hideCloseButton || hasHeader ? 4 : 2,
12
- fontSize: 'xl',
13
- fontWeight: 'semibold',
14
- // If just close button, still have 'header' section at top
15
- minHeight: hasHeader || hideCloseButton ? null : 12
16
- });
17
- exports.default = _default;