@spothero/ui 23.0.1 → 24.0.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 (183) hide show
  1. package/dist/AccordionActionButton.d.ts +2 -0
  2. package/dist/index.cjs.js +50135 -0
  3. package/dist/index.cjs.js.map +1 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.esm.js +49981 -0
  6. package/dist/index.esm.js.map +1 -0
  7. package/dist/styles/index.d.ts +2 -0
  8. package/package.json +33 -36
  9. package/dist/components/Accordion/Accordion.stories.js +0 -101
  10. package/dist/components/Accordion/AccordionActionButton.js +0 -32
  11. package/dist/components/Accordion/index.js +0 -45
  12. package/dist/components/Accordion/styles/index.js +0 -77
  13. package/dist/components/Alert/Alert.js +0 -91
  14. package/dist/components/Alert/Alert.stories.js +0 -64
  15. package/dist/components/Alert/index.js +0 -14
  16. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +0 -169
  17. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +0 -23
  18. package/dist/components/AutoSuggestSelect/index.js +0 -14
  19. package/dist/components/Badge/Badge.js +0 -13
  20. package/dist/components/Badge/Badge.stories.js +0 -32
  21. package/dist/components/Badge/styles/index.js +0 -33
  22. package/dist/components/Button/Button.js +0 -75
  23. package/dist/components/Button/Button.spec.js +0 -25
  24. package/dist/components/Button/Button.styles.js +0 -166
  25. package/dist/components/Button/button-props.js +0 -73
  26. package/dist/components/Button/index.js +0 -21
  27. package/dist/components/Button/stories/button.js +0 -47
  28. package/dist/components/Button/stories/index.stories.js +0 -103
  29. package/dist/components/Button/stories/overview.js +0 -77
  30. package/dist/components/Card/Card.js +0 -28
  31. package/dist/components/Card/Card.stories.js +0 -33
  32. package/dist/components/Checkbox/Checkbox.js +0 -44
  33. package/dist/components/Checkbox/Checkbox.stories.js +0 -69
  34. package/dist/components/Checkbox/index.js +0 -14
  35. package/dist/components/Checkbox/styles/index.js +0 -90
  36. package/dist/components/Container/Container.js +0 -23
  37. package/dist/components/Container/Container.stories.js +0 -53
  38. package/dist/components/Container/Container.styles.js +0 -17
  39. package/dist/components/CreatableSelect/CreatableSelect.js +0 -148
  40. package/dist/components/CreatableSelect/CreatableSelect.stories.js +0 -69
  41. package/dist/components/CreatableSelect/index.js +0 -14
  42. package/dist/components/Divider/Divider.js +0 -34
  43. package/dist/components/Divider/Divider.stories.js +0 -40
  44. package/dist/components/Divider/Divider.styles.js +0 -21
  45. package/dist/components/Drawer/Drawer.js +0 -29
  46. package/dist/components/Drawer/Drawer.stories.js +0 -50
  47. package/dist/components/Drawer/index.js +0 -57
  48. package/dist/components/Drawer/styles/index.js +0 -108
  49. package/dist/components/FormControl/FormControl.js +0 -74
  50. package/dist/components/Grid/Grid.js +0 -35
  51. package/dist/components/Grid/Grid.stories.js +0 -117
  52. package/dist/components/Grid/Grid.styles.js +0 -18
  53. package/dist/components/Grid/GridItem.js +0 -23
  54. package/dist/components/Grid/GridItem.styles.js +0 -14
  55. package/dist/components/Grid/index.js +0 -21
  56. package/dist/components/Heading/Heading.js +0 -34
  57. package/dist/components/Heading/Heading.stories.js +0 -46
  58. package/dist/components/Heading/Heading.styles.js +0 -69
  59. package/dist/components/Icon/Icon.js +0 -13
  60. package/dist/components/Icon/Icon.stories.js +0 -40
  61. package/dist/components/Image/Image.js +0 -84
  62. package/dist/components/Image/Image.spec.js +0 -77
  63. package/dist/components/Image/Image.stories.js +0 -80
  64. package/dist/components/Input/Input.js +0 -49
  65. package/dist/components/Input/Input.stories.js +0 -63
  66. package/dist/components/Input/index.js +0 -14
  67. package/dist/components/Input/styles/index.js +0 -65
  68. package/dist/components/Link/Link.js +0 -13
  69. package/dist/components/Link/Link.stories.js +0 -52
  70. package/dist/components/Link/Link.styles.js +0 -45
  71. package/dist/components/List/List.js +0 -69
  72. package/dist/components/List/List.stories.js +0 -92
  73. package/dist/components/List/index.js +0 -21
  74. package/dist/components/List/styles/index.js +0 -17
  75. package/dist/components/List/styles/item.styles.js +0 -11
  76. package/dist/components/Loader/Loader.js +0 -53
  77. package/dist/components/Loader/Loader.stories.js +0 -124
  78. package/dist/components/Menu/Menu.js +0 -17
  79. package/dist/components/Menu/Menu.stories.js +0 -169
  80. package/dist/components/Menu/Menu.styles.js +0 -174
  81. package/dist/components/Menu/index.js +0 -57
  82. package/dist/components/Modal/Modal.js +0 -46
  83. package/dist/components/Modal/Modal.stories.js +0 -225
  84. package/dist/components/Modal/index.js +0 -33
  85. package/dist/components/Modal/styles/body.js +0 -39
  86. package/dist/components/Modal/styles/closeButton.js +0 -25
  87. package/dist/components/Modal/styles/dialog.js +0 -23
  88. package/dist/components/Modal/styles/dialogContainer.js +0 -21
  89. package/dist/components/Modal/styles/footer.js +0 -12
  90. package/dist/components/Modal/styles/header.js +0 -18
  91. package/dist/components/Modal/styles/index.js +0 -56
  92. package/dist/components/Modal/styles/overlay.js +0 -11
  93. package/dist/components/Popover/Popover.js +0 -34
  94. package/dist/components/Popover/Popover.stories.js +0 -87
  95. package/dist/components/Popover/PopoverArrow.js +0 -23
  96. package/dist/components/Popover/PopoverCloseButton.js +0 -23
  97. package/dist/components/Popover/PopoverContent.js +0 -42
  98. package/dist/components/Popover/index.js +0 -41
  99. package/dist/components/Popover/styles/index.js +0 -27
  100. package/dist/components/Popover/styles/popover-arrow.js +0 -14
  101. package/dist/components/Popover/styles/popover-body.js +0 -13
  102. package/dist/components/Popover/styles/popover-close-button.js +0 -40
  103. package/dist/components/Popover/styles/popover-content.js +0 -30
  104. package/dist/components/Popover/styles/popover-header.js +0 -12
  105. package/dist/components/Popover/styles/popper.js +0 -11
  106. package/dist/components/Progress/Progress.js +0 -42
  107. package/dist/components/Progress/Progress.stories.js +0 -90
  108. package/dist/components/Progress/Progress.styles.js +0 -107
  109. package/dist/components/Radio/Radio.js +0 -43
  110. package/dist/components/Radio/Radio.stories.js +0 -137
  111. package/dist/components/Radio/RadioGroup.js +0 -52
  112. package/dist/components/Radio/index.js +0 -21
  113. package/dist/components/Radio/styles/index.js +0 -119
  114. package/dist/components/RefreshedInput/Button/Button.js +0 -72
  115. package/dist/components/RefreshedInput/Button/Button.stories.js +0 -84
  116. package/dist/components/RefreshedInput/Button/index.js +0 -14
  117. package/dist/components/RefreshedInput/Button/styles/index.js +0 -34
  118. package/dist/components/RefreshedInput/FormControl/index.js +0 -175
  119. package/dist/components/RefreshedInput/Input/Input.js +0 -67
  120. package/dist/components/RefreshedInput/Input/Input.stories.js +0 -79
  121. package/dist/components/RefreshedInput/Input/index.js +0 -14
  122. package/dist/components/RefreshedInput/Input/styles/index.js +0 -33
  123. package/dist/components/RefreshedInput/Select/Select.js +0 -70
  124. package/dist/components/RefreshedInput/Select/Select.stories.js +0 -85
  125. package/dist/components/RefreshedInput/Select/index.js +0 -14
  126. package/dist/components/RefreshedInput/Select/styles/index.js +0 -34
  127. package/dist/components/RefreshedInput/index.js +0 -35
  128. package/dist/components/RefreshedInput/storyAid/index.js +0 -22
  129. package/dist/components/Select/Select.js +0 -55
  130. package/dist/components/Select/Select.stories.js +0 -67
  131. package/dist/components/Select/index.js +0 -14
  132. package/dist/components/Select/styles/index.js +0 -51
  133. package/dist/components/SelectionCard/SelectionCard.js +0 -67
  134. package/dist/components/SelectionCard/SelectionCard.stories.js +0 -91
  135. package/dist/components/SelectionCard/index.js +0 -14
  136. package/dist/components/Skeleton/Skeleton.stories.js +0 -31
  137. package/dist/components/Skeleton/Skeleton.styles.js +0 -10
  138. package/dist/components/Skeleton/index.js +0 -25
  139. package/dist/components/Spinner/Spinner.js +0 -34
  140. package/dist/components/Spinner/Spinner.stories.js +0 -109
  141. package/dist/components/Spinner/Spinner.styles.js +0 -67
  142. package/dist/components/Switch/Switch.js +0 -45
  143. package/dist/components/Switch/Switch.stories.js +0 -80
  144. package/dist/components/Switch/index.js +0 -14
  145. package/dist/components/Switch/styles/index.js +0 -42
  146. package/dist/components/Table/Table.js +0 -13
  147. package/dist/components/Table/Table.stories.js +0 -80
  148. package/dist/components/Table/Table.styles.js +0 -77
  149. package/dist/components/Table/index.js +0 -63
  150. package/dist/components/Tabs/Tabs.js +0 -35
  151. package/dist/components/Tabs/Tabs.stories.js +0 -44
  152. package/dist/components/Tabs/combineSizeWithVariant.js +0 -35
  153. package/dist/components/Tabs/index.js +0 -39
  154. package/dist/components/Tabs/styles/index.js +0 -71
  155. package/dist/components/Text/Text.js +0 -35
  156. package/dist/components/Text/Text.stories.js +0 -47
  157. package/dist/components/Text/Text.styles.js +0 -53
  158. package/dist/components/Text/combineAsWithVariant.js +0 -103
  159. package/dist/components/Text/options.js +0 -9
  160. package/dist/components/Textarea/Textarea.js +0 -49
  161. package/dist/components/Textarea/Textarea.stories.js +0 -62
  162. package/dist/components/Textarea/index.js +0 -14
  163. package/dist/components/Textarea/styles/index.js +0 -65
  164. package/dist/components/ThemeProvider/ThemeProvider.js +0 -47
  165. package/dist/components/ThemeProvider/ThemeProvider.stories.js +0 -52
  166. package/dist/components/Toast/Toast.stories.js +0 -84
  167. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js +0 -65
  168. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.js +0 -62
  169. package/dist/components/ToggleButtonGroup/index.js +0 -14
  170. package/dist/components/ToggleButtonGroup/styles/index.js +0 -48
  171. package/dist/components/index.js +0 -799
  172. package/dist/components/styles.js +0 -189
  173. package/dist/theme/base/breakpoints.js +0 -24
  174. package/dist/theme/base/colors.js +0 -144
  175. package/dist/theme/base/index.js +0 -80
  176. package/dist/theme/base/notifications.js +0 -197
  177. package/dist/theme/base/shadows.js +0 -16
  178. package/dist/theme/base/sizes.js +0 -89
  179. package/dist/theme/base/typography.js +0 -39
  180. package/dist/theme/base/zindices.js +0 -34
  181. package/dist/theme/global.js +0 -39
  182. package/dist/theme/index.js +0 -45
  183. package/dist/utils/Spaces.js +0 -21
@@ -1,169 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
7
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
- var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
9
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
10
- var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
11
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
12
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
13
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
- _Object$defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- exports["default"] = void 0;
18
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
19
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
20
- var _react = _interopRequireWildcard(require("react"));
21
- var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
22
- var _async = _interopRequireDefault(require("react-select/async"));
23
- var _react2 = require("@chakra-ui/react");
24
- var _xCircle = _interopRequireDefault(require("@spothero/icons/x-circle"));
25
- 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); }
26
- 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; }
27
- 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; }
28
- 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; }
29
- var AutoSuggestSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
30
- var id = _ref.id,
31
- label = _ref.label,
32
- helperText = _ref.helperText,
33
- errorMessage = _ref.errorMessage,
34
- isInvalid = _ref.isInvalid,
35
- isDisabled = _ref.isDisabled,
36
- isRequired = _ref.isRequired,
37
- getOptions = _ref.getOptions,
38
- onChange = _ref.onChange,
39
- iconSrc = _ref.iconSrc,
40
- placeholder = _ref.placeholder,
41
- _ref$defaultValue = _ref.defaultValue,
42
- defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue;
43
- var _useTheme = (0, _react2.useTheme)(),
44
- colors = _useTheme.colors,
45
- fontSizes = _useTheme.fontSizes,
46
- sizes = _useTheme.sizes;
47
- var handleChange = function handleChange(selectedOption) {
48
- onChange(selectedOption);
49
- };
50
- var icon = function icon() {
51
- var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transparent';
52
- return {
53
- alignItems: 'center',
54
- display: 'flex',
55
- ':before': {
56
- backgroundColor: color,
57
- content: '" "',
58
- display: 'block',
59
- marginRight: sizes['3'],
60
- height: sizes['4'],
61
- width: sizes['5'],
62
- mask: "url(".concat(iconSrc, ") no-repeat 50% 50%"),
63
- maskSize: 'contain'
64
- }
65
- };
66
- };
67
- var baseText = {
68
- fontSize: fontSizes.base,
69
- color: colors.black
70
- };
71
-
72
- /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles */
73
- var customStyles = {
74
- menu: function menu(provided) {
75
- return _objectSpread(_objectSpread({}, provided), baseText);
76
- },
77
- control: function control(provided, state) {
78
- return _objectSpread(_objectSpread({}, provided), {}, {
79
- borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary["default"] : colors.gray['200'],
80
- borderWidth: '1px',
81
- boxShadow: 'none',
82
- '&:hover': {
83
- borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary["default"] : colors.gray['200']
84
- }
85
- });
86
- },
87
- input: function input(provided, state) {
88
- return _objectSpread(_objectSpread(_objectSpread({}, provided), baseText), {}, {
89
- padding: sizes['2'],
90
- backgroundColor: state.isDisabled ? colors.gray['200'] : 'transparent'
91
- }, iconSrc && icon(colors.gray['600']));
92
- },
93
- placeholder: function placeholder(provided) {
94
- return _objectSpread(_objectSpread({}, provided), {}, {
95
- padding: sizes['2'],
96
- fontSize: fontSizes.base,
97
- color: colors.gray['600']
98
- }, iconSrc && icon());
99
- },
100
- singleValue: function singleValue(provided) {
101
- return _objectSpread(_objectSpread(_objectSpread({}, provided), baseText), {}, {
102
- padding: sizes['2']
103
- }, iconSrc && icon());
104
- },
105
- option: function option(provided, state) {
106
- return _objectSpread(_objectSpread({}, provided), {}, {
107
- backgroundColor: state.isSelected ? colors.gray['200'] : state.isFocused ? colors.gray['50'] : 'transparent',
108
- color: colors.black
109
- });
110
- },
111
- clearIndicator: function clearIndicator(provided) {
112
- return _objectSpread(_objectSpread({}, provided), {}, {
113
- color: colors.gray['600']
114
- });
115
- },
116
- dropdownIndicator: function dropdownIndicator(provided) {
117
- return _objectSpread(_objectSpread({}, provided), {}, {
118
- color: colors.gray['600']
119
- });
120
- }
121
- };
122
- var clearIndicatorStyles = {
123
- width: sizes['5'],
124
- display: 'flex',
125
- marginRight: sizes['3'],
126
- color: colors.gray['600'],
127
- cursor: 'pointer'
128
- };
129
-
130
- /** React Select allows you to override the clear indicator with your own custom component: https://react-select.com/components */
131
- var ClearIndicator = function ClearIndicator(_ref2) {
132
- var innerRef = _ref2.innerRef,
133
- innerProps = _ref2.innerProps;
134
- return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
135
- style: clearIndicatorStyles,
136
- ref: innerRef
137
- }, innerProps), /*#__PURE__*/_react["default"].createElement(_xCircle["default"], null));
138
- };
139
- return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
140
- errorMessage: errorMessage,
141
- isRequired: isRequired,
142
- helperText: helperText,
143
- label: label,
144
- inputId: id
145
- }, /*#__PURE__*/_react["default"].createElement(_async["default"], {
146
- closeMenuOnSelect: true,
147
- isClearable: true,
148
- cacheOptions: true,
149
- components: {
150
- DropdownIndicator: function DropdownIndicator() {
151
- return null;
152
- },
153
- IndicatorSeparator: function IndicatorSeparator() {
154
- return null;
155
- },
156
- ClearIndicator: ClearIndicator
157
- },
158
- openMenuOnClick: false,
159
- loadOptions: getOptions,
160
- onChange: handleChange,
161
- isDisabled: isDisabled,
162
- id: id,
163
- placeholder: placeholder,
164
- defaultValue: defaultValue,
165
- styles: customStyles,
166
- ref: ref
167
- }));
168
- });
169
- var _default = exports["default"] = AutoSuggestSelect;
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.AutoSuggestSelect = void 0;
9
- var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
10
- var _react = _interopRequireDefault(require("react"));
11
- var _react2 = require("@chakra-ui/react");
12
- var _default = exports["default"] = {
13
- title: 'v2/AutoSuggestSelect',
14
- parameters: {
15
- removeBaseHtmlClass: true
16
- }
17
- };
18
- var AutoSuggestSelectTemplate = function AutoSuggestSelectTemplate(props) {
19
- return /*#__PURE__*/_react["default"].createElement(_react2.VStack, {
20
- alignItems: "flex-start"
21
- }, /*#__PURE__*/_react["default"].createElement(_react2.Text, null, "AutoSuggestSelect story currently broken due to issues between current version of storybook, forwardref, and hooks. Updating storybook will likely help."));
22
- };
23
- var AutoSuggestSelect = exports.AutoSuggestSelect = (0, _bind["default"])(AutoSuggestSelectTemplate).call(AutoSuggestSelectTemplate, {});
@@ -1,14 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- _Object$defineProperty(exports, "AutoSuggestSelect", {
9
- enumerable: true,
10
- get: function get() {
11
- return _AutoSuggestSelect["default"];
12
- }
13
- });
14
- var _AutoSuggestSelect = _interopRequireDefault(require("./AutoSuggestSelect"));
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- _Object$defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- _Object$defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function get() {
10
- return _react.Badge;
11
- }
12
- });
13
- var _react = require("@chakra-ui/react");
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.Badge = void 0;
9
- var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
10
- var _react = _interopRequireDefault(require("react"));
11
- var _Badge = _interopRequireDefault(require("./Badge"));
12
- var _default = exports["default"] = {
13
- title: 'v2/Badge',
14
- component: _Badge["default"],
15
- parameters: {
16
- removeBaseHtmlClass: true
17
- }
18
- };
19
- var Template = function Template(props) {
20
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
21
- variant: "primary"
22
- }, "Primary"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
23
- variant: "warningLight"
24
- }, "Warning Light"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
25
- variant: "solid",
26
- colorScheme: "green"
27
- }, "Success"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
28
- variant: "subtle",
29
- colorScheme: "red"
30
- }, "Removed"));
31
- };
32
- var Badge = exports.Badge = (0, _bind["default"])(Template).call(Template, {});
@@ -1,33 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.variants = exports["default"] = void 0;
9
- var _merge = _interopRequireDefault(require("lodash/merge"));
10
- var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
11
- var baseStyle = {
12
- px: 1,
13
- textTransform: 'reset',
14
- fontSize: 'xs',
15
- borderRadius: 'sm',
16
- fontWeight: 'bold'
17
- };
18
- var variants = exports.variants = {
19
- primary: {
20
- bg: 'primary.default',
21
- color: 'white'
22
- },
23
- warningLight: {
24
- bg: 'yellow.100',
25
- color: 'black'
26
- }
27
- };
28
- var defaultProps = {};
29
- var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Badge, {
30
- variants: variants,
31
- baseStyle: baseStyle,
32
- defaultProps: defaultProps
33
- });
@@ -1,75 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
7
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
- var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
9
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
10
- var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
11
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
12
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
13
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
- _Object$defineProperty(exports, "__esModule", {
15
- value: true
16
- });
17
- exports["default"] = void 0;
18
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
19
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
20
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
- var _react = _interopRequireWildcard(require("react"));
22
- var _react2 = require("@chakra-ui/react");
23
- var _base = require("../../theme/base");
24
- var _buttonProps = _interopRequireDefault(require("./button-props"));
25
- var _excluded = ["asAnchor", "isExternal", "height"];
26
- 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); }
27
- 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; }
28
- 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; }
29
- 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; }
30
- var anchorProps = function anchorProps() {
31
- var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
32
- return _objectSpread({
33
- as: 'a',
34
- type: null
35
- }, isExternal && {
36
- target: '_blank',
37
- rel: 'noopener noreferrer'
38
- });
39
- };
40
- var heightProps = function heightProps() {
41
- var height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'md';
42
- var heights = {
43
- md: {
44
- height: 10,
45
- borderRadius: _base.sizes['5'],
46
- lineHeight: _base.sizes['3.5']
47
- },
48
- lg: {
49
- height: 12,
50
- borderRadius: _base.sizes['6'],
51
- lineHeight: _base.sizes['6']
52
- }
53
- };
54
- return heights[height] || {
55
- height: height // when a custom height is provided, pass it as is
56
- };
57
- };
58
- var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
59
- var asAnchor = _ref.asAnchor,
60
- isExternal = _ref.isExternal,
61
- _ref$height = _ref.height,
62
- height = _ref$height === void 0 ? 'md' : _ref$height,
63
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
64
- return /*#__PURE__*/_react["default"].createElement(_react2.Button, (0, _extends2["default"])({
65
- iconSpacing: 2
66
- }, props, heightProps(height), (asAnchor || props.as === 'a') && anchorProps(isExternal), {
67
- ref: ref
68
- }));
69
- });
70
- Button.propTypes = _buttonProps["default"];
71
- Button.defaultProps = {
72
- variant: 'primary',
73
- type: 'button'
74
- };
75
- var _default = exports["default"] = Button;
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
6
- var _Button = _interopRequireDefault(require("./Button"));
7
- describe('Button', function () {
8
- it('renders the anchor version of the button', function () {
9
- (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
10
- asAnchor: true,
11
- href: "#"
12
- }, "Button"));
13
- expect(_react2.screen.getByRole('link')).toBeInTheDocument();
14
- });
15
- it('renders with target and rel attributes on external anchor button', function () {
16
- (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
17
- asAnchor: true,
18
- isExternal: true,
19
- href: "#"
20
- }, "Button"));
21
- var link = _react2.screen.getByRole('link');
22
- expect(link).toHaveAttribute('target', '_blank');
23
- expect(link).toHaveAttribute('rel', 'noopener noreferrer');
24
- });
25
- });
@@ -1,166 +0,0 @@
1
- "use strict";
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");
11
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
12
- _Object$defineProperty(exports, "__esModule", {
13
- value: true
14
- });
15
- exports.variants = exports["default"] = void 0;
16
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
17
- var _merge = _interopRequireDefault(require("lodash/merge"));
18
- var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
19
- 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; }
20
- 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; }
21
- var baseStyle = {
22
- px: 8,
23
- py: 3,
24
- fontSize: 'base',
25
- fontFamily: 'body',
26
- lineHeight: 0.875,
27
- fontWeight: 'semibold',
28
- borderWidth: '1px',
29
- borderStyle: 'solid',
30
- borderRadius: '1.25rem',
31
- textTransform: 'capitalize',
32
- transition: 'all normal ease',
33
- _disabled: {
34
- cursor: 'not-allowed',
35
- opacity: 1,
36
- bg: 'gray.medium',
37
- borderColor: 'gray.medium',
38
- color: 'gray.dark'
39
- },
40
- '& svg': {
41
- display: 'block'
42
- }
43
- };
44
- // TODO: We need an active styling
45
- var disabledButtonHoverStyle = {
46
- _disabled: {
47
- bg: 'gray.medium',
48
- borderColor: 'gray.medium',
49
- color: 'gray.dark'
50
- }
51
- };
52
- var destructiveButtonStyles = {
53
- bg: 'white',
54
- borderColor: 'red.default',
55
- color: 'red.default',
56
- _hover: _objectSpread({
57
- borderColor: 'red.800',
58
- color: 'red.800'
59
- }, disabledButtonHoverStyle)
60
- };
61
- var variants = exports.variants = {
62
- primary: {
63
- bg: 'primary.default',
64
- borderColor: 'primary.default',
65
- color: 'white',
66
- _hover: _objectSpread({
67
- bg: 'primary.600',
68
- borderColor: 'primary.600',
69
- color: 'white'
70
- }, disabledButtonHoverStyle)
71
- },
72
- primaryOnDark: {
73
- bg: 'yellow.default',
74
- borderColor: 'yellow.default',
75
- color: 'black',
76
- _hover: _objectSpread({
77
- bg: 'yellow.500',
78
- borderColor: 'yellow.500',
79
- color: 'black'
80
- }, disabledButtonHoverStyle),
81
- _focus: {
82
- boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
83
- }
84
- },
85
- secondary: {
86
- bg: 'white',
87
- borderColor: 'gray.medium',
88
- color: 'primary.default',
89
- _hover: _objectSpread({
90
- borderColor: 'primary.600',
91
- color: 'primary.600'
92
- }, disabledButtonHoverStyle)
93
- },
94
- secondaryOnDark: {
95
- bg: 'none',
96
- borderColor: 'white',
97
- color: 'white',
98
- _hover: _objectSpread({
99
- bg: 'white',
100
- borderColor: 'white',
101
- color: 'black'
102
- }, disabledButtonHoverStyle),
103
- _focus: {
104
- boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
105
- }
106
- },
107
- tertiary: {
108
- bg: 'none',
109
- borderWidth: 'none',
110
- borderRadius: 'unset',
111
- color: 'primary.default',
112
- h: 'unset',
113
- m: 'unset',
114
- minW: 'unset',
115
- p: 'unset',
116
- lineHeight: 1,
117
- _disabled: {
118
- bg: 'none',
119
- color: 'gray.dark'
120
- },
121
- _hover: {
122
- color: 'primary.600',
123
- _disabled: {
124
- color: 'gray.dark'
125
- }
126
- },
127
- _active: {
128
- color: 'primary.600',
129
- _disabled: {
130
- color: 'gray.dark'
131
- }
132
- }
133
- },
134
- tertiaryOnDark: {
135
- bg: 'none',
136
- borderRadius: 'unset',
137
- borderWidth: 'none',
138
- color: 'white',
139
- h: 'unset',
140
- m: 'unset',
141
- minW: 'unset',
142
- p: 'unset',
143
- _disabled: {
144
- bg: 'none',
145
- color: 'white',
146
- opacity: '.7'
147
- },
148
- _hover: {
149
- color: 'white',
150
- opacity: '.8',
151
- _disabled: {
152
- opacity: '.7'
153
- }
154
- }
155
- },
156
- destructive: _objectSpread({}, destructiveButtonStyles),
157
- destructiveOnDark: _objectSpread({}, destructiveButtonStyles)
158
- };
159
- var defaultProps = {
160
- size: null
161
- };
162
- var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Button, {
163
- variants: variants,
164
- baseStyle: baseStyle,
165
- defaultProps: defaultProps
166
- });
@@ -1,73 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
10
- var _propTypes = _interopRequireDefault(require("prop-types"));
11
- var _Button = require("./Button.styles");
12
- var props = {
13
- /**
14
- * Alters the underlying html tag
15
- */
16
- as: _propTypes["default"].string,
17
- /**
18
- * If `true`, the button will render as an anchor.
19
- */
20
- asAnchor: _propTypes["default"].bool,
21
- /**
22
- * If `true`, and an anchor button, target="_blank" and rel="noopener noreferrer" will be set on the anchor
23
- * "isExternal" is used to maintain parity with the Link component.
24
- */
25
- isExternal: _propTypes["default"].bool,
26
- /**
27
- * If `true`, the button will show a spinner.
28
- */
29
- isLoading: _propTypes["default"].bool,
30
- /**
31
- * If `true`, the button will be styled in its active state.
32
- */
33
- isActive: _propTypes["default"].bool,
34
- /**
35
- * If `true`, the button will be disabled.
36
- */
37
- isDisabled: _propTypes["default"].bool,
38
- /**
39
- * The label to show in the button when `isLoading` is true
40
- * If no text is passed, it only shows the spinner
41
- */
42
- loadingText: _propTypes["default"].string,
43
- /**
44
- * If `true`, the button will take up the full width of its container.
45
- */
46
- isFullWidth: _propTypes["default"].bool,
47
- /**
48
- * The html button type to use.
49
- */
50
- type: _propTypes["default"].oneOf(['button', 'reset', 'submit']),
51
- /**
52
- * If added, the button will show an icon before the button's label.
53
- * @type PropTypes.node
54
- */
55
- leftIcon: _propTypes["default"].node,
56
- /**
57
- * If added, the button will show an icon after the button's label.
58
- * @type PropTypes.node
59
- */
60
- rightIcon: _propTypes["default"].node,
61
- /**
62
- * The space between the button icon and label.
63
- * @type SystemProps["marginRight"]
64
- */
65
- iconSpacing: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
66
- /**
67
- * Replace the spinner component when `isLoading` is set to `true`
68
- * @type PropTypes.node
69
- */
70
- spinner: _propTypes["default"].node,
71
- variant: _propTypes["default"].oneOf((0, _keys["default"])(_Button.variants))
72
- };
73
- var _default = exports["default"] = props;
@@ -1,21 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- _Object$defineProperty(exports, "Button", {
9
- enumerable: true,
10
- get: function get() {
11
- return _Button["default"];
12
- }
13
- });
14
- _Object$defineProperty(exports, "ButtonGroup", {
15
- enumerable: true,
16
- get: function get() {
17
- return _react.ButtonGroup;
18
- }
19
- });
20
- var _Button = _interopRequireDefault(require("./Button"));
21
- var _react = require("@chakra-ui/react");