@spothero/ui 16.2.0-beta.0 → 17.0.0-beta.2

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 (147) 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 +4 -4
  137. package/.eslintignore +0 -7
  138. package/CHANGELOG.md +0 -1767
  139. package/__tests__/threshold-ratchet.js +0 -167
  140. package/babel.config.js +0 -1
  141. package/dex.config.js +0 -45
  142. package/jest.config.json +0 -64
  143. package/v2/assets-manifest.json +0 -5
  144. package/v2/index.html +0 -1
  145. package/v2/index.js +0 -3
  146. package/v2/index.js.LICENSE.txt +0 -14
  147. package/v2/index.js.map +0 -1
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.variants = exports.default = void 0;
7
+ var baseStyle = {
8
+ transition: "all 0.15s ease-out",
9
+ color: 'text.link.light',
10
+ fontWeight: 'semibold',
11
+ _hover: {
12
+ color: 'primary.600'
13
+ },
14
+ _focus: {
15
+ boxShadow: 'outline'
16
+ },
17
+ '& svg': {
18
+ d: 'inline-block',
19
+ verticalAlign: 'initial'
20
+ }
21
+ };
22
+ var linkOnDark = {
23
+ color: 'text.link.dark',
24
+ _hover: {
25
+ color: 'text.link.dark',
26
+ opacity: '.8'
27
+ }
28
+ };
29
+ var variants = {
30
+ standard: baseStyle,
31
+ onDark: linkOnDark
32
+ };
33
+ exports.variants = variants;
34
+ var defaultProps = {
35
+ variant: 'standard'
36
+ };
37
+ var _default = {
38
+ baseStyle: baseStyle,
39
+ variants: variants,
40
+ defaultProps: defaultProps
41
+ };
42
+ exports.default = _default;
@@ -0,0 +1,88 @@
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 = void 0;
15
+
16
+ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
17
+
18
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
19
+
20
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
21
+
22
+ var _propTypes = _interopRequireDefault(require("prop-types"));
23
+
24
+ var _react = _interopRequireWildcard(require("react"));
25
+
26
+ var _react2 = require("@chakra-ui/react");
27
+
28
+ var _excluded = ["type"];
29
+
30
+ 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); }
31
+
32
+ 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; }
33
+
34
+ var unorderedProps = {
35
+ as: 'ul',
36
+ styleType: 'disc'
37
+ };
38
+ var orderedProps = {
39
+ as: 'ol',
40
+ styleType: 'decimal'
41
+ };
42
+ var STYLE_POSITIONS = {
43
+ unset: 'unset',
44
+ revert: 'revert',
45
+ inside: 'inside',
46
+ outside: 'outside',
47
+ initial: 'initial',
48
+ inherit: 'inherit'
49
+ };
50
+ var TYPES = {
51
+ ordered: 'ordered',
52
+ unstyled: 'unstyled',
53
+ unordered: 'unordered'
54
+ };
55
+
56
+ var getListProps = function getListProps(type) {
57
+ switch (type) {
58
+ case TYPES.ordered:
59
+ return orderedProps;
60
+
61
+ case TYPES.unordered:
62
+ return unorderedProps;
63
+
64
+ default:
65
+ return;
66
+ }
67
+ };
68
+
69
+ var List = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
70
+ var type = _ref.type,
71
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
72
+ return /*#__PURE__*/_react.default.createElement(_react2.List, (0, _extends2.default)({}, getListProps(type), props, {
73
+ ref: ref
74
+ }));
75
+ });
76
+ List.defaultProps = {
77
+ type: TYPES.unstyled,
78
+ stylePosition: STYLE_POSITIONS.inside
79
+ };
80
+ List.propTypes = {
81
+ /** The position of the list style */
82
+ stylePosition: _propTypes.default.oneOf((0, _keys.default)(STYLE_POSITIONS)),
83
+
84
+ /** Changes the underlying markdown to be an ordered or unorderd list, (unstyled will render a ul by default) */
85
+ type: _propTypes.default.oneOf((0, _keys.default)(TYPES))
86
+ };
87
+ var _default = List;
88
+ exports.default = _default;
@@ -0,0 +1,124 @@
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.Unstyled = exports.Unordered = exports.Overview = exports.Ordered = void 0;
19
+
20
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
+
22
+ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
23
+
24
+ var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
25
+
26
+ var _react = _interopRequireDefault(require("react"));
27
+
28
+ var _testDataBot = require("@jackfranklin/test-data-bot");
29
+
30
+ var _List = _interopRequireDefault(require("./List"));
31
+
32
+ var _index = require("./index");
33
+
34
+ var _Spaces = _interopRequireDefault(require("../../utils/Spaces"));
35
+
36
+ var _Text = _interopRequireDefault(require("../Text/Text"));
37
+
38
+ var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
39
+
40
+ 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; }
41
+
42
+ 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; }
43
+
44
+ var DISABLE_TYPE = (0, _disableArgs.default)('type');
45
+ var randomListText = (0, _testDataBot.build)('ListText', {
46
+ fields: {
47
+ text: (0, _testDataBot.fake)(function (f) {
48
+ return f.random.words(10);
49
+ })
50
+ }
51
+ });
52
+
53
+ var Usage = function Usage(_ref) {
54
+ var type = _ref.type;
55
+ return /*#__PURE__*/_react.default.createElement(_Text.default, null, "<List", type ? " type=\"".concat(type, "\"") : '', ">", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "<ListItem>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, {
56
+ spaces: 6
57
+ }), "...", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "</ListItem>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "...", /*#__PURE__*/_react.default.createElement("br", null), "</List>");
58
+ };
59
+
60
+ var _default = {
61
+ title: 'v2/List',
62
+ component: _List.default,
63
+ subcomponents: {
64
+ ListItem: _index.ListItem
65
+ },
66
+ parameters: {
67
+ importBy: 'List',
68
+ removeBaseHtmlClass: true
69
+ }
70
+ };
71
+ exports.default = _default;
72
+
73
+ var OverviewTemplate = function OverviewTemplate(props) {
74
+ var _context, _context2;
75
+
76
+ return /*#__PURE__*/_react.default.createElement(_List.default, props, (0, _map.default)(_context = (0, _fill.default)(_context2 = Array(10)).call(_context2, null)).call(_context, function (_, index) {
77
+ return /*#__PURE__*/_react.default.createElement(_index.ListItem, {
78
+ key: index
79
+ }, randomListText().text);
80
+ }));
81
+ };
82
+
83
+ var Overview = OverviewTemplate.bind({});
84
+ exports.Overview = Overview;
85
+ Overview.parameters = {
86
+ usage: [/*#__PURE__*/_react.default.createElement(Usage, {
87
+ key: 1
88
+ })]
89
+ };
90
+ var Unordered = OverviewTemplate.bind({});
91
+ exports.Unordered = Unordered;
92
+ Unordered.argTypes = DISABLE_TYPE;
93
+ Unordered.parameters = {
94
+ usage: [/*#__PURE__*/_react.default.createElement(Usage, {
95
+ type: "unordered",
96
+ key: 1
97
+ })]
98
+ };
99
+ Unordered.args = {
100
+ type: 'unordered'
101
+ };
102
+ var Ordered = OverviewTemplate.bind({});
103
+ exports.Ordered = Ordered;
104
+ Ordered.argTypes = DISABLE_TYPE;
105
+ Ordered.parameters = {
106
+ usage: [/*#__PURE__*/_react.default.createElement(Usage, {
107
+ type: "ordered",
108
+ key: 1
109
+ })]
110
+ };
111
+ Ordered.args = {
112
+ type: 'ordered'
113
+ };
114
+ var Unstyled = OverviewTemplate.bind({});
115
+ exports.Unstyled = Unstyled;
116
+ Unstyled.parameters = {
117
+ usage: [/*#__PURE__*/_react.default.createElement(Usage, {
118
+ key: 1
119
+ })]
120
+ };
121
+ Unstyled.argTypes = _objectSpread(_objectSpread({}, DISABLE_TYPE), (0, _disableArgs.default)('stylePosition'));
122
+ Unstyled.args = {
123
+ type: 'unstyled'
124
+ };
@@ -0,0 +1,23 @@
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, "ListItem", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _react.ListItem;
12
+ }
13
+ });
14
+ Object.defineProperty(exports, "default", {
15
+ enumerable: true,
16
+ get: function get() {
17
+ return _List.default;
18
+ }
19
+ });
20
+
21
+ var _List = _interopRequireDefault(require("./List"));
22
+
23
+ var _react = require("@chakra-ui/react");
@@ -0,0 +1,24 @@
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 _item = _interopRequireDefault(require("./item.styles"));
15
+
16
+ var baseStyle = {
17
+ item: _item.default
18
+ };
19
+
20
+ var _default = (0, _merge.default)(_theme.default.components.List, {
21
+ baseStyle: baseStyle
22
+ });
23
+
24
+ exports.default = _default;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var item = {
8
+ mb: 2
9
+ };
10
+ var _default = item;
11
+ exports.default = _default;
@@ -0,0 +1,62 @@
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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
11
+
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
13
+
14
+ var _react = _interopRequireDefault(require("react"));
15
+
16
+ var _react2 = require("@chakra-ui/react");
17
+
18
+ var _excluded = ["color", "loaderBackgroundColor", "isInfinite", "size", "thickness", "trackColor", "value"];
19
+
20
+ var Loader = function Loader(_ref) {
21
+ var _ref$color = _ref.color,
22
+ color = _ref$color === void 0 ? 'success' : _ref$color,
23
+ _ref$loaderBackground = _ref.loaderBackgroundColor,
24
+ loaderBackgroundColor = _ref$loaderBackground === void 0 ? 'transparent' : _ref$loaderBackground,
25
+ _ref$isInfinite = _ref.isInfinite,
26
+ isInfinite = _ref$isInfinite === void 0 ? true : _ref$isInfinite,
27
+ _ref$size = _ref.size,
28
+ size = _ref$size === void 0 ? 12 : _ref$size,
29
+ _ref$thickness = _ref.thickness,
30
+ thickness = _ref$thickness === void 0 ? 2 : _ref$thickness,
31
+ _ref$trackColor = _ref.trackColor,
32
+ trackColor = _ref$trackColor === void 0 ? 'gray.medium' : _ref$trackColor,
33
+ _ref$value = _ref.value,
34
+ value = _ref$value === void 0 ? 0 : _ref$value,
35
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
36
+
37
+ /* -------------------------------------------------------------------- *\
38
+ Note: Since most of the props for this component control multiple
39
+ styles at a time, it was decided that it made the most sense to set
40
+ up the default style-related properties here in lou of creating an
41
+ overly complex styles file.
42
+ \* -------------------------------------------------------------------- */
43
+ var loaderDefaultProps = {
44
+ color: color,
45
+ isIndeterminate: isInfinite,
46
+ size: size,
47
+ thickness: thickness,
48
+ trackColor: trackColor,
49
+ value: value,
50
+ capIsRound: true
51
+ };
52
+ return /*#__PURE__*/_react.default.createElement(_react2.CircularProgress, (0, _extends2.default)({
53
+ sx: {
54
+ '& svg > circle:first-of-type': {
55
+ fill: loaderBackgroundColor
56
+ }
57
+ }
58
+ }, loaderDefaultProps, props));
59
+ };
60
+
61
+ var _default = Loader;
62
+ exports.default = _default;
@@ -0,0 +1,140 @@
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.Overview = exports.InfiniteLoader = exports.FiniteLoader = void 0;
19
+
20
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
+
22
+ var _react = _interopRequireDefault(require("react"));
23
+
24
+ var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
25
+
26
+ var _createControl = require("storybook/utils/create-control");
27
+
28
+ var _Loader = _interopRequireDefault(require("./Loader"));
29
+
30
+ 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; }
31
+
32
+ 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; }
33
+
34
+ var _default = {
35
+ title: 'v2/Loader',
36
+ component: _Loader.default,
37
+ parameters: {
38
+ removeBaseHtmlClass: true,
39
+ importBy: 'Loader'
40
+ },
41
+ argTypes: _objectSpread(_objectSpread({
42
+ color: {
43
+ options: ['primary.default', 'secondary.default', 'white', 'success', 'warning', 'error'],
44
+ control: {
45
+ type: 'radio',
46
+ labels: {
47
+ 'primary.default': 'Primary',
48
+ 'secondary.default': 'Secondary',
49
+ white: 'White',
50
+ success: 'Success',
51
+ warning: 'Warning',
52
+ error: 'Error'
53
+ }
54
+ }
55
+ },
56
+ isInfinite: {
57
+ control: {
58
+ type: 'boolean'
59
+ }
60
+ },
61
+ loaderBackgroundColor: {
62
+ options: ['white', 'gray.light', 'gray.medium', 'gray.dark', 'transparent'],
63
+ control: {
64
+ type: 'radio',
65
+ labels: {
66
+ white: 'White',
67
+ 'primary.default': 'Primary',
68
+ 'gray.light': 'Light Gray',
69
+ 'gray.medium': 'Medium Gray',
70
+ 'gray.dark': 'Dark Gray',
71
+ transparent: 'Transparent'
72
+ }
73
+ }
74
+ },
75
+ size: {
76
+ options: [6, 12, 28, 48],
77
+ control: {
78
+ type: 'radio',
79
+ labels: {
80
+ 6: 'Small',
81
+ 12: 'Medium',
82
+ 28: 'Large',
83
+ 48: 'Extra Large'
84
+ }
85
+ }
86
+ },
87
+ trackColor: {
88
+ options: ['primary.default', 'gray.light', 'gray.medium', 'gray.dark', 'white'],
89
+ control: {
90
+ type: 'radio',
91
+ labels: {
92
+ 'primary.default': 'Primary',
93
+ 'gray.light': 'Light Gray',
94
+ 'gray.medium': 'Medium Gray',
95
+ 'gray.dark': 'Dark Gray',
96
+ white: 'White'
97
+ }
98
+ }
99
+ }
100
+ }, (0, _createControl.createRangeControl)({
101
+ name: 'thickness',
102
+ min: 2,
103
+ max: 16,
104
+ step: 2
105
+ })), (0, _createControl.createRangeControl)({
106
+ name: 'value',
107
+ min: 1,
108
+ max: 100
109
+ }))
110
+ };
111
+ exports.default = _default;
112
+
113
+ var Template = function Template(props) {
114
+ return /*#__PURE__*/_react.default.createElement(_Loader.default, props);
115
+ };
116
+
117
+ var Overview = Template.bind({});
118
+ exports.Overview = Overview;
119
+ Overview.args = {
120
+ color: 'success',
121
+ isInfinite: false,
122
+ loaderBackgroundColor: 'transparent',
123
+ size: 12,
124
+ thickness: 2,
125
+ trackColor: 'gray.medium',
126
+ value: 35
127
+ };
128
+ var FiniteLoader = Template.bind({});
129
+ exports.FiniteLoader = FiniteLoader;
130
+ FiniteLoader.argTypes = _objectSpread({}, (0, _disableArgs.default)(['color', 'isInfinite', 'loaderBackgroundColor', 'size', 'thickness', 'trackColor']));
131
+ FiniteLoader.args = {
132
+ isInfinite: false,
133
+ value: 35
134
+ };
135
+ var InfiniteLoader = Template.bind({});
136
+ exports.InfiniteLoader = InfiniteLoader;
137
+ InfiniteLoader.argTypes = _objectSpread({}, (0, _disableArgs.default)(['color', 'loaderBackgroundColor', 'size', 'thickness', 'trackColor', 'value']));
138
+ InfiniteLoader.args = {
139
+ isInfinite: true
140
+ };
@@ -0,0 +1,52 @@
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 = void 0;
15
+
16
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
17
+
18
+ var _react = _interopRequireWildcard(require("react"));
19
+
20
+ var _react2 = require("@chakra-ui/react");
21
+
22
+ var _header = _interopRequireDefault(require("./styles/header"));
23
+
24
+ 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); }
25
+
26
+ 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; }
27
+
28
+ /**
29
+ * @param {boolean} isMobile - Whether or not the Modal is opened in a mobile viewport
30
+ * @param {boolean} isOpen - Whether or not the Modal is open
31
+ * @param {React.ReactNode} children - The header text of the modal
32
+ * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
33
+ * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
34
+ * @param {React.ReactNode} [header] - The node for the header. Likely just a string.
35
+ * @param {React.ReactNode} [footer] - The node for the footer. Likely some control buttons.
36
+ * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
37
+ * @returns {React.ReactElement} - The Modal component
38
+ */
39
+ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
40
+ var header = props.header,
41
+ footer = props.footer,
42
+ children = props.children,
43
+ hideCloseButton = props.hideCloseButton,
44
+ isMobile = props.isMobile;
45
+ return /*#__PURE__*/_react.default.createElement(_react2.Modal, (0, _extends2.default)({
46
+ motionPreset: isMobile ? 'slideInBottom' : 'scale'
47
+ }, props, {
48
+ ref: ref
49
+ }), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, null, header ? /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, null, header) : /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _header.default)(props)), hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_react2.ModalCloseButton, null), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, children), footer ? /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, footer) : null));
50
+ });
51
+ var _default = Modal;
52
+ exports.default = _default;