@spothero/ui 17.0.0-beta.1 → 17.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion/Accordion.js +13 -0
- package/dist/components/Accordion/Accordion.stories.js +86 -0
- package/dist/components/Accordion/index.js +41 -0
- package/dist/components/Accordion/styles/button.js +23 -0
- package/dist/components/Accordion/styles/container.js +15 -0
- package/dist/components/Accordion/styles/index.js +32 -0
- package/dist/components/Accordion/styles/panel.js +13 -0
- package/dist/components/Alert/Alert.js +119 -0
- package/dist/components/Alert/Alert.stories.js +80 -0
- package/dist/components/Alert/index.js +15 -0
- package/dist/components/Alert/styles/index.js +192 -0
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +189 -0
- package/dist/components/AutoSuggestSelect/index.js +15 -0
- package/dist/components/Badge/Badge.js +13 -0
- package/dist/components/Badge/Badge.stories.js +38 -0
- package/dist/components/Badge/styles/index.js +40 -0
- package/dist/components/Button/Button.js +73 -0
- package/dist/components/Button/Button.spec.js +31 -0
- package/dist/components/Button/Button.styles.js +173 -0
- package/dist/components/Button/button-props.js +90 -0
- package/dist/components/Button/index.js +23 -0
- package/dist/components/Button/stories/button.js +59 -0
- package/dist/components/Button/stories/index.stories.js +124 -0
- package/dist/components/Button/stories/overview.js +96 -0
- package/dist/components/Card/Card.js +38 -0
- package/dist/components/Card/Card.stories.js +41 -0
- package/dist/components/Checkbox/Checkbox.js +13 -0
- package/dist/components/Checkbox/Checkbox.stories.js +44 -0
- package/dist/components/Checkbox/index.js +15 -0
- package/dist/components/Checkbox/styles/index.js +64 -0
- package/dist/components/Container/Container.js +34 -0
- package/dist/components/Container/Container.stories.js +74 -0
- package/dist/components/Container/Container.styles.js +17 -0
- package/dist/components/Divider/Divider.js +47 -0
- package/dist/components/Divider/Divider.stories.js +49 -0
- package/dist/components/Divider/Divider.styles.js +28 -0
- package/dist/components/FormControl/FormControl.js +79 -0
- package/dist/components/Grid/Grid.js +49 -0
- package/dist/components/Grid/Grid.stories.js +141 -0
- package/dist/components/Grid/Grid.styles.js +19 -0
- package/dist/components/Grid/GridItem.js +34 -0
- package/dist/components/Grid/GridItem.styles.js +13 -0
- package/dist/components/Grid/index.js +23 -0
- package/dist/components/Heading/Heading.js +49 -0
- package/dist/components/Heading/Heading.stories.js +54 -0
- package/dist/components/Heading/Heading.styles.js +79 -0
- package/dist/components/Icon/Icon.js +13 -0
- package/dist/components/Icon/Icon.stories.js +47 -0
- package/dist/components/Image/Image.js +106 -0
- package/dist/components/Image/Image.spec.js +83 -0
- package/dist/components/Image/Image.stories.js +92 -0
- package/dist/components/Input/Input.js +61 -0
- package/dist/components/Input/Input.stories.js +71 -0
- package/dist/components/Input/index.js +15 -0
- package/dist/components/Input/styles/index.js +71 -0
- package/dist/components/Link/Link.js +13 -0
- package/dist/components/Link/Link.stories.js +61 -0
- package/dist/components/Link/Link.styles.js +42 -0
- package/dist/components/List/List.js +88 -0
- package/dist/components/List/List.stories.js +124 -0
- package/dist/components/List/index.js +23 -0
- package/dist/components/List/styles/index.js +24 -0
- package/dist/components/List/styles/item.styles.js +11 -0
- package/dist/components/Loader/Loader.js +62 -0
- package/dist/components/Loader/Loader.stories.js +140 -0
- package/dist/components/Modal/Modal.js +52 -0
- package/dist/components/Modal/Modal.stories.js +236 -0
- package/dist/components/Modal/index.js +15 -0
- package/dist/components/Modal/styles/body.js +48 -0
- package/dist/components/Modal/styles/closeButton.js +27 -0
- package/dist/components/Modal/styles/dialog.js +25 -0
- package/dist/components/Modal/styles/dialogContainer.js +26 -0
- package/dist/components/Modal/styles/footer.js +12 -0
- package/dist/components/Modal/styles/header.js +20 -0
- package/dist/components/Modal/styles/index.js +70 -0
- package/dist/components/Modal/styles/overlay.js +12 -0
- package/dist/components/Popover/Popover.js +48 -0
- package/dist/components/Popover/Popover.stories.js +101 -0
- package/dist/components/Popover/PopoverArrow.js +34 -0
- package/dist/components/Popover/PopoverCloseButton.js +34 -0
- package/dist/components/Popover/PopoverContent.js +53 -0
- package/dist/components/Popover/index.js +37 -0
- package/dist/components/Popover/styles/index.js +38 -0
- package/dist/components/Popover/styles/popover-arrow.js +16 -0
- package/dist/components/Popover/styles/popover-body.js +15 -0
- package/dist/components/Popover/styles/popover-close-button.js +30 -0
- package/dist/components/Popover/styles/popover-content.js +29 -0
- package/dist/components/Popover/styles/popover-header.js +12 -0
- package/dist/components/Popover/styles/popper.js +11 -0
- package/dist/components/Radio/Radio.js +52 -0
- package/dist/components/Radio/Radio.stories.js +142 -0
- package/dist/components/Radio/RadioGroup.js +65 -0
- package/dist/components/Radio/index.js +23 -0
- package/dist/components/Radio/styles/index.js +65 -0
- package/dist/components/Select/Select.js +71 -0
- package/dist/components/Select/Select.stories.js +74 -0
- package/dist/components/Select/index.js +15 -0
- package/dist/components/Select/styles/index.js +57 -0
- package/dist/components/Skeleton/Skeleton.stories.js +41 -0
- package/dist/components/Skeleton/Skeleton.styles.js +13 -0
- package/dist/components/Skeleton/index.js +25 -0
- package/dist/components/Spinner/Spinner.js +47 -0
- package/dist/components/Spinner/Spinner.stories.js +134 -0
- package/dist/components/Spinner/Spinner.styles.js +76 -0
- package/dist/components/Switch/Switch.js +59 -0
- package/dist/components/Switch/Switch.stories.js +86 -0
- package/dist/components/Switch/index.js +15 -0
- package/dist/components/Switch/styles/index.js +46 -0
- package/dist/components/Table/Table.js +13 -0
- package/dist/components/Table/Table.stories.js +92 -0
- package/dist/components/Table/Table.styles.js +87 -0
- package/dist/components/Table/index.js +59 -0
- package/dist/components/Tabs/Tabs.js +48 -0
- package/dist/components/Tabs/Tabs.stories.js +51 -0
- package/dist/components/Tabs/combineSizeWithVariant.js +44 -0
- package/dist/components/Tabs/index.js +41 -0
- package/dist/components/Tabs/styles/index.js +52 -0
- package/dist/components/Text/Text.js +44 -0
- package/dist/components/Text/Text.stories.js +56 -0
- package/dist/components/Text/Text.styles.js +67 -0
- package/dist/components/Text/combineAsWithVariant.js +123 -0
- package/dist/components/Text/options.js +9 -0
- package/dist/components/ThemeProvider/ThemeProvider.js +66 -0
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +63 -0
- package/dist/components/index.js +577 -0
- package/dist/components/styles.js +175 -0
- package/dist/theme/base/breakpoints.js +27 -0
- package/dist/theme/base/colors.js +148 -0
- package/dist/theme/base/index.js +59 -0
- package/dist/theme/base/sizes.js +88 -0
- package/dist/theme/base/typography.js +41 -0
- package/dist/theme/base/zindices.js +35 -0
- package/dist/theme/global.js +52 -0
- package/dist/theme/index.js +63 -0
- package/dist/utils/Spaces.js +27 -0
- package/package.json +1 -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,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;
|