@spothero/ui 17.0.3-beta.0 → 17.1.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion/Accordion.js +2 -1
- package/dist/components/Accordion/Accordion.stories.js +22 -13
- package/dist/components/Accordion/index.js +8 -5
- package/dist/components/Accordion/styles/button.js +3 -1
- package/dist/components/Accordion/styles/container.js +1 -1
- package/dist/components/Accordion/styles/index.js +13 -4
- package/dist/components/Accordion/styles/panel.js +1 -1
- package/dist/components/Alert/Alert.js +44 -23
- package/dist/components/Alert/Alert.stories.js +12 -8
- package/dist/components/Alert/index.js +3 -1
- package/dist/components/Alert/styles/index.js +35 -12
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +119 -84
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +12 -4
- package/dist/components/AutoSuggestSelect/index.js +3 -1
- package/dist/components/Badge/Badge.js +2 -1
- package/dist/components/Badge/Badge.stories.js +20 -12
- package/dist/components/Badge/styles/index.js +12 -6
- package/dist/components/Button/Button.js +47 -17
- package/dist/components/Button/Button.spec.js +10 -4
- package/dist/components/Button/Button.styles.js +49 -36
- package/dist/components/Button/button-props.js +20 -2
- package/dist/components/Button/index.js +5 -2
- package/dist/components/Button/stories/button.js +17 -5
- package/dist/components/Button/stories/index.stories.js +48 -24
- package/dist/components/Button/stories/overview.js +62 -34
- package/dist/components/Card/Card.js +26 -11
- package/dist/components/Card/Card.stories.js +15 -5
- package/dist/components/Checkbox/Checkbox.js +2 -1
- package/dist/components/Checkbox/Checkbox.stories.js +10 -2
- package/dist/components/Checkbox/index.js +3 -1
- package/dist/components/Checkbox/styles/index.js +11 -3
- package/dist/components/Container/Container.js +21 -5
- package/dist/components/Container/Container.stories.js +43 -14
- package/dist/components/Container/Container.styles.js +1 -1
- package/dist/components/Datepicker/Datepicker.stories.js +295 -0
- package/dist/components/Datepicker/DatepickerContainer.js +114 -0
- package/dist/components/Datepicker/DatepickerContext.js +65 -0
- package/dist/components/Datepicker/DatepickerSingle.js +51 -0
- package/dist/components/Datepicker/components/DateRow.js +145 -0
- package/dist/components/Datepicker/components/DatepickerControl.js +83 -0
- package/dist/components/Datepicker/components/DatepickerDays.js +108 -0
- package/dist/components/Datepicker/components/DatepickerHeader.js +113 -0
- package/dist/components/Datepicker/constants.js +31 -0
- package/dist/components/Datepicker/utils/dateRowArithmentic.js +58 -0
- package/dist/components/Datepicker/utils/generalCalculations.js +71 -0
- package/dist/components/Datepicker/utils/getWeeksOfMonth.js +51 -0
- package/dist/components/Datepicker/utils/propTypes.js +201 -0
- package/dist/components/DatepickerRange/DatepickerRange.js +64 -0
- package/dist/components/DatepickerRange/DatepickerRange.stories.js +411 -0
- package/dist/components/DatepickerRange/DatepickerRangeContainer.js +158 -0
- package/dist/components/DatepickerRange/DatepickerRangeContext.js +80 -0
- package/dist/components/DatepickerRange/components/DateRow.js +260 -0
- package/dist/components/DatepickerRange/components/DatepickerDays.js +108 -0
- package/dist/components/DatepickerRange/components/DatepickerHeader.js +116 -0
- package/dist/components/DatepickerRange/components/DatepickerRangeControls.js +77 -0
- package/dist/components/DatepickerRange/components/DatepickerRangeInput.js +90 -0
- package/dist/components/DatepickerRange/components/WithPopoverAnchor.js +21 -0
- package/dist/components/DatepickerRange/constants.js +31 -0
- package/dist/components/DatepickerRange/utils/dateRowArithmentic.js +93 -0
- package/dist/components/DatepickerRange/utils/generalCalculations.js +71 -0
- package/dist/components/DatepickerRange/utils/getWeeksOfMonth.js +51 -0
- package/dist/components/DatepickerRange/utils/propTypes.js +245 -0
- package/dist/components/Divider/Divider.js +24 -8
- package/dist/components/Divider/Divider.stories.js +15 -3
- package/dist/components/Divider/Divider.styles.js +8 -2
- package/dist/components/FormControl/FormControl.js +29 -14
- package/dist/components/Grid/Grid.js +24 -7
- package/dist/components/Grid/Grid.stories.js +60 -36
- package/dist/components/Grid/Grid.styles.js +2 -2
- package/dist/components/Grid/GridItem.js +21 -5
- package/dist/components/Grid/GridItem.styles.js +1 -2
- package/dist/components/Grid/index.js +5 -2
- package/dist/components/Heading/Heading.js +29 -8
- package/dist/components/Heading/Heading.stories.js +15 -4
- package/dist/components/Heading/Heading.styles.js +38 -24
- package/dist/components/Icon/Icon.js +2 -1
- package/dist/components/Icon/Icon.stories.js +28 -19
- package/dist/components/Image/Image.js +69 -39
- package/dist/components/Image/Image.spec.js +22 -16
- package/dist/components/Image/Image.stories.js +19 -8
- package/dist/components/Input/Input.js +31 -14
- package/dist/components/Input/Input.stories.js +15 -5
- package/dist/components/Input/index.js +3 -1
- package/dist/components/Input/styles/index.js +10 -4
- package/dist/components/Link/Link.js +2 -1
- package/dist/components/Link/Link.stories.js +12 -5
- package/dist/components/Link/Link.styles.js +8 -8
- package/dist/components/List/List.js +37 -14
- package/dist/components/List/List.stories.js +55 -19
- package/dist/components/List/index.js +5 -2
- package/dist/components/List/styles/index.js +9 -2
- package/dist/components/List/styles/item.styles.js +1 -1
- package/dist/components/Loader/Loader.js +33 -17
- package/dist/components/Loader/Loader.stories.js +44 -24
- package/dist/components/Modal/Modal.js +23 -17
- package/dist/components/Modal/Modal.stories.js +100 -30
- package/dist/components/Modal/index.js +3 -1
- package/dist/components/Modal/styles/body.js +28 -11
- package/dist/components/Modal/styles/closeButton.js +4 -4
- package/dist/components/Modal/styles/dialog.js +4 -4
- package/dist/components/Modal/styles/dialogContainer.js +11 -5
- package/dist/components/Modal/styles/header.js +5 -5
- package/dist/components/Modal/styles/index.js +28 -12
- package/dist/components/Popover/Popover.js +33 -12
- package/dist/components/Popover/Popover.stories.js +62 -36
- package/dist/components/Popover/PopoverArrow.js +17 -3
- package/dist/components/Popover/PopoverCloseButton.js +17 -3
- package/dist/components/Popover/PopoverContent.js +27 -10
- package/dist/components/Popover/index.js +8 -4
- package/dist/components/Popover/styles/index.js +22 -9
- package/dist/components/Popover/styles/popover-arrow.js +4 -4
- package/dist/components/Popover/styles/popover-body.js +7 -3
- package/dist/components/Popover/styles/popover-close-button.js +10 -7
- package/dist/components/Popover/styles/popover-content.js +7 -5
- package/dist/components/Popover/styles/popover-header.js +1 -1
- package/dist/components/Popover/styles/popper.js +1 -1
- package/dist/components/Radio/Radio.js +27 -12
- package/dist/components/Radio/Radio.stories.js +12 -2
- package/dist/components/Radio/RadioGroup.js +33 -17
- package/dist/components/Radio/index.js +5 -2
- package/dist/components/Radio/styles/index.js +13 -5
- package/dist/components/Select/Select.js +33 -14
- package/dist/components/Select/Select.stories.js +22 -13
- package/dist/components/Select/index.js +3 -1
- package/dist/components/Select/styles/index.js +14 -4
- package/dist/components/Skeleton/Skeleton.stories.js +20 -6
- package/dist/components/Skeleton/Skeleton.styles.js +3 -0
- package/dist/components/Skeleton/index.js +4 -3
- package/dist/components/Spinner/Spinner.js +25 -9
- package/dist/components/Spinner/Spinner.stories.js +70 -42
- package/dist/components/Spinner/Spinner.styles.js +43 -56
- package/dist/components/Switch/Switch.js +30 -13
- package/dist/components/Switch/Switch.stories.js +10 -2
- package/dist/components/Switch/index.js +3 -1
- package/dist/components/Switch/styles/index.js +31 -10
- package/dist/components/Table/Table.js +2 -1
- package/dist/components/Table/Table.stories.js +37 -17
- package/dist/components/Table/Table.styles.js +32 -13
- package/dist/components/Table/index.js +11 -8
- package/dist/components/Tabs/Tabs.js +22 -14
- package/dist/components/Tabs/Tabs.stories.js +20 -4
- package/dist/components/Tabs/combineSizeWithVariant.js +17 -11
- package/dist/components/Tabs/index.js +8 -5
- package/dist/components/Tabs/styles/index.js +8 -2
- package/dist/components/Text/Text.js +17 -8
- package/dist/components/Text/Text.stories.js +15 -3
- package/dist/components/Text/Text.styles.js +35 -15
- package/dist/components/Text/combineAsWithVariant.js +57 -36
- package/dist/components/Text/options.js +1 -1
- package/dist/components/ThemeProvider/ThemeProvider.js +33 -10
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +16 -7
- package/dist/components/index.js +135 -74
- package/dist/components/styles.js +43 -21
- package/dist/theme/base/breakpoints.js +4 -1
- package/dist/theme/base/colors.js +45 -32
- package/dist/theme/base/index.js +13 -7
- package/dist/theme/base/sizes.js +4 -4
- package/dist/theme/base/typography.js +6 -5
- package/dist/theme/base/zindices.js +2 -1
- package/dist/theme/global.js +20 -87
- package/dist/theme/index.js +41 -15
- package/dist/utils/Spaces.js +12 -5
- package/package.json +2 -2
|
@@ -1,27 +1,42 @@
|
|
|
1
1
|
"use strict";
|
|
2
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
|
+
|
|
3
9
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
10
|
+
|
|
4
11
|
Object.defineProperty(exports, "__esModule", {
|
|
5
12
|
value: true
|
|
6
13
|
});
|
|
7
14
|
exports.default = void 0;
|
|
15
|
+
|
|
8
16
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
|
+
|
|
18
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
19
|
+
|
|
9
20
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
10
22
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
+
|
|
11
24
|
var _react2 = require("@chakra-ui/react");
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
|
|
26
|
+
var _excluded = ["children", "label", "inputId", "helperText", "errorMessage", "isFieldset"];
|
|
27
|
+
|
|
28
|
+
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); }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
32
|
+
var FormControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
33
|
+
var children = _ref.children,
|
|
34
|
+
label = _ref.label,
|
|
35
|
+
inputId = _ref.inputId,
|
|
36
|
+
helperText = _ref.helperText,
|
|
37
|
+
errorMessage = _ref.errorMessage,
|
|
38
|
+
isFieldset = _ref.isFieldset,
|
|
39
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
25
40
|
return /*#__PURE__*/_react.default.createElement(_react2.FormControl, (0, _extends2.default)({}, props, {
|
|
26
41
|
ref: ref,
|
|
27
42
|
as: isFieldset ? 'fieldset' : 'div',
|
|
@@ -34,7 +49,7 @@ const FormControl = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
34
49
|
htmlFor: inputId,
|
|
35
50
|
as: isFieldset ? 'legend' : 'label',
|
|
36
51
|
requiredIndicator: "",
|
|
37
|
-
optionalIndicator: isOptional && !(props !== null && props !== void 0 && props.isRequired) ? /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
52
|
+
optionalIndicator: props !== null && props !== void 0 && props.isOptional && !(props !== null && props !== void 0 && props.isRequired) ? /*#__PURE__*/_react.default.createElement(_react2.Text, {
|
|
38
53
|
marginLeft: 1,
|
|
39
54
|
as: "span",
|
|
40
55
|
variant: "caption",
|
|
@@ -1,22 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
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
|
+
|
|
3
9
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
10
|
+
|
|
4
11
|
Object.defineProperty(exports, "__esModule", {
|
|
5
12
|
value: true
|
|
6
13
|
});
|
|
7
14
|
exports.default = void 0;
|
|
15
|
+
|
|
8
16
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
|
+
|
|
18
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
19
|
+
|
|
9
20
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
10
22
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
+
|
|
11
24
|
var _react2 = require("@chakra-ui/react");
|
|
25
|
+
|
|
12
26
|
var _Grid = require("./Grid.styles");
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
27
|
+
|
|
28
|
+
var _excluded = ["isCompact"];
|
|
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 Grid = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
35
|
+
var isCompact = _ref.isCompact,
|
|
36
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
20
37
|
return /*#__PURE__*/_react.default.createElement(_react2.Grid, (0, _extends2.default)({}, _Grid.baseStyles, isCompact && _Grid.compactStyles, props, {
|
|
21
38
|
ref: ref
|
|
22
39
|
}));
|
|
@@ -1,27 +1,43 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.default = exports.GridItemStartEnd = exports.GridItemSpan = exports.GridColumnLayout = exports.Grid = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
11
|
+
|
|
8
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
15
|
+
|
|
16
|
+
var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
|
|
17
|
+
|
|
9
18
|
var _react = _interopRequireDefault(require("react"));
|
|
19
|
+
|
|
10
20
|
var _react2 = require("@chakra-ui/react");
|
|
21
|
+
|
|
11
22
|
var _Grid = _interopRequireDefault(require("./Grid"));
|
|
23
|
+
|
|
12
24
|
var _ = require("./..");
|
|
13
|
-
|
|
14
|
-
|
|
25
|
+
|
|
26
|
+
var _excluded = ["isCompact"];
|
|
27
|
+
|
|
28
|
+
var rangeControl = function rangeControl(max) {
|
|
29
|
+
var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
|
|
15
30
|
return {
|
|
16
31
|
control: {
|
|
17
|
-
max,
|
|
18
|
-
min,
|
|
32
|
+
max: max,
|
|
33
|
+
min: min,
|
|
19
34
|
step: 1,
|
|
20
35
|
type: 'range'
|
|
21
36
|
}
|
|
22
37
|
};
|
|
23
38
|
};
|
|
24
|
-
|
|
39
|
+
|
|
40
|
+
var spanMap = {
|
|
25
41
|
1: 12,
|
|
26
42
|
2: 6,
|
|
27
43
|
3: 4,
|
|
@@ -43,27 +59,30 @@ var _default = {
|
|
|
43
59
|
}
|
|
44
60
|
};
|
|
45
61
|
exports.default = _default;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
62
|
+
|
|
63
|
+
var GridTemplate = function GridTemplate(args, _ref) {
|
|
64
|
+
var _context, _context2;
|
|
65
|
+
|
|
66
|
+
var hasDarkBackground = _ref.hasDarkBackground;
|
|
50
67
|
return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, args, {
|
|
51
68
|
bg: hasDarkBackground ? 'secondary.700' : 'secondary.default'
|
|
52
|
-
}), Array(12).
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
69
|
+
}), (0, _map.default)(_context = (0, _fill.default)(_context2 = Array(12)).call(_context2, null)).call(_context, function (Item, index) {
|
|
70
|
+
return /*#__PURE__*/_react.default.createElement(_.GridItem, {
|
|
71
|
+
key: "GridItem-".concat(index),
|
|
72
|
+
colSpan: 1
|
|
73
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
74
|
+
h: "20rem",
|
|
75
|
+
bg: hasDarkBackground ? 'primary.400' : 'primary.default'
|
|
76
|
+
}));
|
|
77
|
+
})));
|
|
59
78
|
};
|
|
60
|
-
|
|
79
|
+
|
|
80
|
+
var Grid = GridTemplate.bind({});
|
|
61
81
|
exports.Grid = Grid;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
} = _ref2;
|
|
82
|
+
|
|
83
|
+
var GridItemTemplate = function GridItemTemplate(_ref2) {
|
|
84
|
+
var isCompact = _ref2.isCompact,
|
|
85
|
+
args = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
|
|
67
86
|
return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
|
|
68
87
|
bg: "secondary.default",
|
|
69
88
|
isCompact: isCompact
|
|
@@ -72,7 +91,8 @@ const GridItemTemplate = _ref2 => {
|
|
|
72
91
|
bg: "primary.default"
|
|
73
92
|
}))));
|
|
74
93
|
};
|
|
75
|
-
|
|
94
|
+
|
|
95
|
+
var GridItemSpan = GridItemTemplate.bind({});
|
|
76
96
|
exports.GridItemSpan = GridItemSpan;
|
|
77
97
|
GridItemSpan.storyName = 'GridItem - span prop';
|
|
78
98
|
GridItemSpan.argTypes = {
|
|
@@ -81,7 +101,7 @@ GridItemSpan.argTypes = {
|
|
|
81
101
|
GridItemSpan.args = {
|
|
82
102
|
colSpan: 12
|
|
83
103
|
};
|
|
84
|
-
|
|
104
|
+
var GridItemStartEnd = GridItemTemplate.bind({});
|
|
85
105
|
exports.GridItemStartEnd = GridItemStartEnd;
|
|
86
106
|
GridItemStartEnd.storyName = 'GridItem - start/end prop';
|
|
87
107
|
GridItemStartEnd.argTypes = {
|
|
@@ -92,21 +112,25 @@ GridItemStartEnd.args = {
|
|
|
92
112
|
colStart: 1,
|
|
93
113
|
colEnd: 2
|
|
94
114
|
};
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
115
|
+
|
|
116
|
+
var ColumnLayoutTemplate = function ColumnLayoutTemplate(_ref3) {
|
|
117
|
+
var _context3, _context4;
|
|
118
|
+
|
|
119
|
+
var numberOfColumns = _ref3.numberOfColumns;
|
|
99
120
|
return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
|
|
100
121
|
bg: "secondary.default"
|
|
101
|
-
}, Array(numberOfColumns).
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
122
|
+
}, (0, _map.default)(_context3 = (0, _fill.default)(_context4 = Array(numberOfColumns)).call(_context4, null)).call(_context3, function (item, index) {
|
|
123
|
+
return /*#__PURE__*/_react.default.createElement(_.GridItem, {
|
|
124
|
+
key: "GridItem-".concat(index),
|
|
125
|
+
colSpan: spanMap[numberOfColumns]
|
|
126
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
127
|
+
h: "20rem",
|
|
128
|
+
bg: "primary.default"
|
|
129
|
+
}));
|
|
130
|
+
})));
|
|
108
131
|
};
|
|
109
|
-
|
|
132
|
+
|
|
133
|
+
var GridColumnLayout = ColumnLayoutTemplate.bind({});
|
|
110
134
|
exports.GridColumnLayout = GridColumnLayout;
|
|
111
135
|
GridColumnLayout.storyName = 'Grid - MultiColumn Layout';
|
|
112
136
|
GridColumnLayout.argTypes = {
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.compactStyles = exports.baseStyles = void 0;
|
|
7
7
|
// NOTE: considering adding a specifc prop for grid row padding
|
|
8
|
-
|
|
8
|
+
var baseStyles = {
|
|
9
9
|
gap: {
|
|
10
10
|
base: 4,
|
|
11
11
|
tablet: 8
|
|
@@ -13,7 +13,7 @@ const baseStyles = {
|
|
|
13
13
|
templateColumns: 'repeat(12, 1fr)'
|
|
14
14
|
};
|
|
15
15
|
exports.baseStyles = baseStyles;
|
|
16
|
-
|
|
16
|
+
var compactStyles = {
|
|
17
17
|
gap: 4
|
|
18
18
|
};
|
|
19
19
|
exports.compactStyles = compactStyles;
|
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
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
|
+
|
|
3
9
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
10
|
+
|
|
4
11
|
Object.defineProperty(exports, "__esModule", {
|
|
5
12
|
value: true
|
|
6
13
|
});
|
|
7
14
|
exports.default = void 0;
|
|
15
|
+
|
|
8
16
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
|
+
|
|
9
18
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
10
20
|
var _react2 = require("@chakra-ui/react");
|
|
21
|
+
|
|
11
22
|
var _GridItem = _interopRequireDefault(require("./GridItem.styles"));
|
|
12
|
-
|
|
13
|
-
function
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
+
var GridItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_react2.GridItem, (0, _extends2.default)({}, _GridItem.default, props, {
|
|
30
|
+
ref: ref
|
|
31
|
+
}));
|
|
32
|
+
});
|
|
17
33
|
var _default = GridItem;
|
|
18
34
|
exports.default = _default;
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
// NOTE: styles NOT in the Chakra's base styles do not need to explicitly export baseStyles
|
|
8
8
|
// TODO: move this comment to the readme
|
|
9
|
-
|
|
10
|
-
const styles = {
|
|
9
|
+
var styles = {
|
|
11
10
|
colSpan: 12
|
|
12
11
|
};
|
|
13
12
|
var _default = styles;
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
Object.defineProperty(exports, "GridItem", {
|
|
8
9
|
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
+
get: function get() {
|
|
10
11
|
return _GridItem.default;
|
|
11
12
|
}
|
|
12
13
|
});
|
|
13
14
|
Object.defineProperty(exports, "default", {
|
|
14
15
|
enumerable: true,
|
|
15
|
-
get: function () {
|
|
16
|
+
get: function get() {
|
|
16
17
|
return _Grid.default;
|
|
17
18
|
}
|
|
18
19
|
});
|
|
20
|
+
|
|
19
21
|
var _Grid = _interopRequireDefault(require("./Grid"));
|
|
22
|
+
|
|
20
23
|
var _GridItem = _interopRequireDefault(require("./GridItem"));
|
|
@@ -1,28 +1,49 @@
|
|
|
1
1
|
"use strict";
|
|
2
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
|
+
|
|
3
9
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
10
|
+
|
|
4
11
|
Object.defineProperty(exports, "__esModule", {
|
|
5
12
|
value: true
|
|
6
13
|
});
|
|
7
14
|
exports.default = void 0;
|
|
15
|
+
|
|
16
|
+
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
|
|
17
|
+
|
|
8
18
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
19
|
+
|
|
9
20
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
10
22
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
+
|
|
11
24
|
var _react2 = require("@chakra-ui/react");
|
|
25
|
+
|
|
12
26
|
var _Heading = require("./Heading.styles");
|
|
13
|
-
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
27
|
+
|
|
28
|
+
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); }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
32
|
+
var Heading = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
33
|
+
return /*#__PURE__*/_react.default.createElement(_react2.Heading, (0, _extends2.default)({}, props, {
|
|
34
|
+
ref: ref,
|
|
35
|
+
variant: props.variant || props.as || 'h2'
|
|
36
|
+
}));
|
|
37
|
+
});
|
|
19
38
|
Heading.propTypes = {
|
|
20
39
|
/** The React node that will render inside the element */
|
|
21
40
|
children: _propTypes.default.node,
|
|
41
|
+
|
|
22
42
|
/** Controls the underlying level of the html heading tag */
|
|
23
|
-
as: _propTypes.default.oneOf(
|
|
43
|
+
as: _propTypes.default.oneOf((0, _keys.default)(_Heading.variants)),
|
|
44
|
+
|
|
24
45
|
/** The styling that will be applied to the component regardless of the underlying html */
|
|
25
|
-
variant: _propTypes.default.oneOf(
|
|
46
|
+
variant: _propTypes.default.oneOf((0, _keys.default)(_Heading.variants))
|
|
26
47
|
};
|
|
27
48
|
var _default = Heading;
|
|
28
49
|
exports.default = _default;
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.default = exports.Heading = void 0;
|
|
9
|
+
|
|
10
|
+
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
|
|
11
|
+
|
|
8
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
9
14
|
var _Heading = require("./Heading.styles");
|
|
15
|
+
|
|
10
16
|
var _Heading2 = _interopRequireDefault(require("./Heading"));
|
|
17
|
+
|
|
11
18
|
var _default = {
|
|
12
19
|
title: 'v2/Heading',
|
|
13
20
|
component: _Heading2.default,
|
|
@@ -18,13 +25,13 @@ var _default = {
|
|
|
18
25
|
as: {
|
|
19
26
|
control: {
|
|
20
27
|
type: 'select',
|
|
21
|
-
options:
|
|
28
|
+
options: (0, _keys.default)(_Heading.variants)
|
|
22
29
|
}
|
|
23
30
|
},
|
|
24
31
|
variant: {
|
|
25
32
|
control: {
|
|
26
33
|
type: 'select',
|
|
27
|
-
options:
|
|
34
|
+
options: (0, _keys.default)(_Heading.variants)
|
|
28
35
|
}
|
|
29
36
|
},
|
|
30
37
|
children: {
|
|
@@ -35,8 +42,12 @@ var _default = {
|
|
|
35
42
|
}
|
|
36
43
|
};
|
|
37
44
|
exports.default = _default;
|
|
38
|
-
|
|
39
|
-
|
|
45
|
+
|
|
46
|
+
var Template = function Template(props) {
|
|
47
|
+
return /*#__PURE__*/_react.default.createElement(_Heading2.default, props);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
var Heading = Template.bind({});
|
|
40
51
|
exports.Heading = Heading;
|
|
41
52
|
Heading.args = {
|
|
42
53
|
children: 'Heading'
|
|
@@ -1,65 +1,79 @@
|
|
|
1
1
|
"use strict";
|
|
2
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
|
+
|
|
3
15
|
Object.defineProperty(exports, "__esModule", {
|
|
4
16
|
value: true
|
|
5
17
|
});
|
|
6
18
|
exports.variants = exports.default = void 0;
|
|
19
|
+
|
|
20
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
21
|
+
|
|
7
22
|
var _typography = require("../../theme/base/typography");
|
|
8
|
-
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
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; }
|
|
27
|
+
|
|
28
|
+
var baseStyle = {
|
|
9
29
|
lineHeight: 1.5,
|
|
10
30
|
fontWeight: _typography.fontWeights.semibold
|
|
11
31
|
};
|
|
12
|
-
|
|
13
|
-
h1: {
|
|
14
|
-
...baseStyle,
|
|
32
|
+
var variants = {
|
|
33
|
+
h1: _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
15
34
|
fontSize: {
|
|
16
35
|
base: _typography.fontSizes['2xl'],
|
|
17
36
|
desktop: _typography.fontSizes['3xl']
|
|
18
37
|
}
|
|
19
|
-
},
|
|
20
|
-
h2: {
|
|
21
|
-
...baseStyle,
|
|
38
|
+
}),
|
|
39
|
+
h2: _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
22
40
|
fontSize: {
|
|
23
41
|
base: _typography.fontSizes.xl,
|
|
24
42
|
desktop: _typography.fontSizes['2xl']
|
|
25
43
|
}
|
|
26
|
-
},
|
|
27
|
-
h3: {
|
|
28
|
-
...baseStyle,
|
|
44
|
+
}),
|
|
45
|
+
h3: _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
29
46
|
fontSize: {
|
|
30
47
|
base: _typography.fontSizes.lg,
|
|
31
48
|
desktop: _typography.fontSizes.xl
|
|
32
49
|
}
|
|
33
|
-
},
|
|
34
|
-
h4: {
|
|
35
|
-
...baseStyle,
|
|
50
|
+
}),
|
|
51
|
+
h4: _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
36
52
|
fontSize: {
|
|
37
53
|
base: _typography.fontSizes.base,
|
|
38
54
|
desktop: _typography.fontSizes.lg
|
|
39
55
|
}
|
|
40
|
-
},
|
|
41
|
-
h5: {
|
|
42
|
-
...baseStyle,
|
|
56
|
+
}),
|
|
57
|
+
h5: _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
43
58
|
fontSize: {
|
|
44
59
|
base: _typography.fontSizes.base,
|
|
45
60
|
desktop: _typography.fontSizes.base
|
|
46
61
|
}
|
|
47
|
-
},
|
|
48
|
-
h6: {
|
|
49
|
-
...baseStyle,
|
|
62
|
+
}),
|
|
63
|
+
h6: _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
50
64
|
fontSize: {
|
|
51
65
|
base: _typography.fontSizes.sm,
|
|
52
66
|
desktop: _typography.fontSizes.sm
|
|
53
67
|
}
|
|
54
|
-
}
|
|
68
|
+
})
|
|
55
69
|
};
|
|
56
70
|
exports.variants = variants;
|
|
57
|
-
|
|
71
|
+
var defaultProps = {
|
|
58
72
|
variant: variants.h2
|
|
59
73
|
};
|
|
60
74
|
var _default = {
|
|
61
|
-
variants,
|
|
62
|
-
baseStyle,
|
|
63
|
-
defaultProps
|
|
75
|
+
variants: variants,
|
|
76
|
+
baseStyle: baseStyle,
|
|
77
|
+
defaultProps: defaultProps
|
|
64
78
|
};
|
|
65
79
|
exports.default = _default;
|