@spothero/ui 21.6.3 → 22.0.0-beta.1
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.stories.js +7 -8
- package/dist/components/Accordion/AccordionActionButton.js +4 -5
- package/dist/components/Alert/Alert.js +22 -23
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +35 -42
- package/dist/components/Button/Button.js +16 -22
- package/dist/components/Button/stories/button.js +5 -6
- package/dist/components/Button/stories/overview.js +23 -27
- package/dist/components/Checkbox/Checkbox.js +10 -11
- package/dist/components/CreatableSelect/CreatableSelect.js +13 -14
- package/dist/components/Divider/Divider.js +5 -6
- package/dist/components/Drawer/Drawer.js +5 -6
- package/dist/components/Drawer/styles/index.js +4 -5
- package/dist/components/FormControl/FormControl.js +42 -45
- package/dist/components/Grid/Grid.js +6 -9
- package/dist/components/Grid/Grid.stories.js +40 -52
- package/dist/components/Icon/Icon.stories.js +1 -1
- package/dist/components/Image/Image.js +19 -21
- package/dist/components/Input/Input.js +11 -12
- package/dist/components/Link/Link.stories.js +26 -29
- package/dist/components/List/List.js +6 -9
- package/dist/components/List/List.stories.js +5 -8
- package/dist/components/Loader/Loader.js +10 -11
- package/dist/components/Modal/styles/body.js +5 -6
- package/dist/components/Modal/styles/closeButton.js +17 -20
- package/dist/components/Modal/styles/dialog.js +15 -18
- package/dist/components/Modal/styles/header.js +10 -13
- package/dist/components/Popover/Popover.stories.js +1 -11
- package/dist/components/Popover/PopoverContent.js +3 -6
- package/dist/components/Popover/index.js +1 -8
- package/dist/components/Popover/styles/popover-arrow.js +5 -8
- package/dist/components/Popover/styles/popover-close-button.js +16 -19
- package/dist/components/Popover/styles/popover-content.js +19 -22
- package/dist/components/Progress/Progress.js +4 -5
- package/dist/components/Radio/Radio.js +10 -11
- package/dist/components/Radio/RadioGroup.js +14 -15
- package/dist/components/Select/Select.js +10 -11
- package/dist/components/SelectionCard/SelectionCard.js +13 -14
- package/dist/components/SelectionCard/SelectionCard.stories.js +3 -4
- package/dist/components/Spinner/Spinner.js +5 -6
- package/dist/components/Spinner/Spinner.stories.js +1 -2
- package/dist/components/Switch/Switch.js +9 -10
- package/dist/components/Table/Table.stories.js +7 -8
- package/dist/components/Tabs/Tabs.js +4 -5
- package/dist/components/Tabs/Tabs.stories.js +0 -6
- package/dist/components/Tabs/combineSizeWithVariant.js +4 -5
- package/dist/components/Tabs/styles/index.js +0 -28
- package/dist/components/Text/Text.js +5 -6
- package/dist/components/Text/combineAsWithVariant.js +4 -5
- package/dist/components/ThemeProvider/ThemeProvider.js +12 -15
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +3 -4
- package/dist/components/index.js +0 -78
- package/dist/components/styles.js +1 -8
- package/dist/theme/global.js +5 -8
- package/dist/theme/index.js +1 -4
- package/dist/utils/Spaces.js +7 -10
- package/package.json +7 -7
- package/dist/components/Menu/Menu.js +0 -16
- package/dist/components/Menu/Menu.stories.js +0 -159
- package/dist/components/Menu/Menu.styles.js +0 -173
- package/dist/components/Menu/index.js +0 -56
|
@@ -10,17 +10,14 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _react2 = require("@chakra-ui/react");
|
|
11
11
|
var _Grid = _interopRequireDefault(require("./Grid"));
|
|
12
12
|
var _ = require("./..");
|
|
13
|
-
const rangeControl =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
};
|
|
13
|
+
const rangeControl = (max, min = 1) => ({
|
|
14
|
+
control: {
|
|
15
|
+
max,
|
|
16
|
+
min,
|
|
17
|
+
step: 1,
|
|
18
|
+
type: 'range'
|
|
19
|
+
}
|
|
20
|
+
});
|
|
24
21
|
const spanMap = {
|
|
25
22
|
1: 12,
|
|
26
23
|
2: 6,
|
|
@@ -42,34 +39,28 @@ var _default = exports.default = {
|
|
|
42
39
|
}
|
|
43
40
|
}
|
|
44
41
|
};
|
|
45
|
-
const GridTemplate = (args,
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
bg: hasDarkBackground ? 'primary.400' : 'primary.default'
|
|
57
|
-
})))));
|
|
58
|
-
};
|
|
42
|
+
const GridTemplate = (args, {
|
|
43
|
+
hasDarkBackground
|
|
44
|
+
}) => /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, args, {
|
|
45
|
+
bg: hasDarkBackground ? 'secondary.700' : 'secondary.default'
|
|
46
|
+
}), Array(12).fill(null).map((Item, index) => /*#__PURE__*/_react.default.createElement(_.GridItem, {
|
|
47
|
+
key: `GridItem-${index}`,
|
|
48
|
+
colSpan: 1
|
|
49
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
50
|
+
h: "20rem",
|
|
51
|
+
bg: hasDarkBackground ? 'primary.400' : 'primary.default'
|
|
52
|
+
})))));
|
|
59
53
|
const Grid = exports.Grid = GridTemplate.bind({});
|
|
60
|
-
const GridItemTemplate =
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
bg: "primary.default"
|
|
71
|
-
}))));
|
|
72
|
-
};
|
|
54
|
+
const GridItemTemplate = ({
|
|
55
|
+
isCompact,
|
|
56
|
+
...args
|
|
57
|
+
}) => /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
|
|
58
|
+
bg: "secondary.default",
|
|
59
|
+
isCompact: isCompact
|
|
60
|
+
}, /*#__PURE__*/_react.default.createElement(_.GridItem, args, /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
61
|
+
h: "20rem",
|
|
62
|
+
bg: "primary.default"
|
|
63
|
+
}))));
|
|
73
64
|
const GridItemSpan = exports.GridItemSpan = GridItemTemplate.bind({});
|
|
74
65
|
GridItemSpan.storyName = 'GridItem - span prop';
|
|
75
66
|
GridItemSpan.argTypes = {
|
|
@@ -88,20 +79,17 @@ GridItemStartEnd.args = {
|
|
|
88
79
|
colStart: 1,
|
|
89
80
|
colEnd: 2
|
|
90
81
|
};
|
|
91
|
-
const ColumnLayoutTemplate =
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
bg: "primary.default"
|
|
103
|
-
})))));
|
|
104
|
-
};
|
|
82
|
+
const ColumnLayoutTemplate = ({
|
|
83
|
+
numberOfColumns
|
|
84
|
+
}) => /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
|
|
85
|
+
bg: "secondary.default"
|
|
86
|
+
}, Array(numberOfColumns).fill(null).map((item, index) => /*#__PURE__*/_react.default.createElement(_.GridItem, {
|
|
87
|
+
key: `GridItem-${index}`,
|
|
88
|
+
colSpan: spanMap[numberOfColumns]
|
|
89
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
90
|
+
h: "20rem",
|
|
91
|
+
bg: "primary.default"
|
|
92
|
+
})))));
|
|
105
93
|
const GridColumnLayout = exports.GridColumnLayout = ColumnLayoutTemplate.bind({});
|
|
106
94
|
GridColumnLayout.storyName = 'Grid - MultiColumn Layout';
|
|
107
95
|
GridColumnLayout.argTypes = {
|
|
@@ -27,7 +27,7 @@ const Template = props => /*#__PURE__*/_react.default.createElement(_react.defau
|
|
|
27
27
|
width: "24",
|
|
28
28
|
paddingLeft: "16"
|
|
29
29
|
}), /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
30
|
-
as: _icons.
|
|
30
|
+
as: _icons.CheckmarkShieldFilled,
|
|
31
31
|
color: "green.default",
|
|
32
32
|
height: "24",
|
|
33
33
|
width: "24",
|
|
@@ -9,15 +9,14 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _react2 = require("@chakra-ui/react");
|
|
10
10
|
var _template = _interopRequireDefault(require("lodash/template"));
|
|
11
11
|
var _environment = _interopRequireDefault(require("@spothero/utils/environment"));
|
|
12
|
-
const buildCloudinarySrc =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
} = _ref;
|
|
12
|
+
const buildCloudinarySrc = ({
|
|
13
|
+
cloudinaryImageId,
|
|
14
|
+
cloudinaryTemplate,
|
|
15
|
+
cloudinaryCloudName,
|
|
16
|
+
htmlWidth,
|
|
17
|
+
htmlHeight,
|
|
18
|
+
quality
|
|
19
|
+
}) => {
|
|
21
20
|
const defaultTemplate = `https://res.cloudinary.com/${cloudinaryCloudName}/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_${_environment.default.isHighDensityDisplay() ? 2 : 1},h_$h,q_$q,w_$w/${cloudinaryImageId}`;
|
|
22
21
|
const tmpl = cloudinaryTemplate ? cloudinaryTemplate : defaultTemplate;
|
|
23
22
|
return (0, _template.default)(tmpl, {
|
|
@@ -28,18 +27,17 @@ const buildCloudinarySrc = _ref => {
|
|
|
28
27
|
QUALITY: quality
|
|
29
28
|
});
|
|
30
29
|
};
|
|
31
|
-
const Image =
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
} = _ref2;
|
|
30
|
+
const Image = ({
|
|
31
|
+
isSSR,
|
|
32
|
+
cloudinaryImageId,
|
|
33
|
+
cloudinaryTemplate,
|
|
34
|
+
cloudinaryCloudName,
|
|
35
|
+
htmlWidth,
|
|
36
|
+
htmlHeight,
|
|
37
|
+
quality,
|
|
38
|
+
lazyLoad,
|
|
39
|
+
...otherProps
|
|
40
|
+
}) => {
|
|
43
41
|
const hasValidCloudinarySrc = (cloudinaryImageId || cloudinaryTemplate) && Boolean(htmlWidth) && Boolean(htmlHeight);
|
|
44
42
|
let cloudinarySrc;
|
|
45
43
|
if (hasValidCloudinarySrc) {
|
|
@@ -12,18 +12,17 @@ var _react2 = require("@chakra-ui/react");
|
|
|
12
12
|
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
|
|
13
13
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
14
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
-
const Input = /*#__PURE__*/(0, _react.forwardRef)((
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
} = _ref;
|
|
15
|
+
const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
16
|
+
label,
|
|
17
|
+
helperText,
|
|
18
|
+
errorMessage,
|
|
19
|
+
isInvalid,
|
|
20
|
+
isDisabled,
|
|
21
|
+
isRequired,
|
|
22
|
+
isOptional,
|
|
23
|
+
customRequiredText,
|
|
24
|
+
...props
|
|
25
|
+
}, ref) => {
|
|
27
26
|
const classes = (0, _classnames.default)({
|
|
28
27
|
'FormElement-contains-error': isInvalid
|
|
29
28
|
});
|
|
@@ -17,35 +17,32 @@ var _default = exports.default = {
|
|
|
17
17
|
removeBaseHtmlClass: true
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
const OverviewTemplate = (props,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
variant: hasDarkBackground ? 'onDark' : 'standard'
|
|
47
|
-
}, "React Router"), ' ', "and it will replace the ", /*#__PURE__*/_react.default.createElement("code", null, "a"), " tag with it's", ' ', /*#__PURE__*/_react.default.createElement("code", null, "Link"), "."));
|
|
48
|
-
};
|
|
20
|
+
const OverviewTemplate = (props, {
|
|
21
|
+
hasDarkBackground
|
|
22
|
+
}) => /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
23
|
+
color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
|
|
24
|
+
}, "A link with", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
|
|
25
|
+
variant: hasDarkBackground ? 'onDark' : 'standard'
|
|
26
|
+
}, "no href"), ' ', "is only styled."), /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
27
|
+
color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
|
|
28
|
+
}, "Links can be linked to", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
|
|
29
|
+
href: "#",
|
|
30
|
+
isExternal: true,
|
|
31
|
+
variant: hasDarkBackground ? 'onDark' : 'standard'
|
|
32
|
+
}, "External Pages"), ' ', "and will have ", /*#__PURE__*/_react.default.createElement("code", null, "target=\"_blank\""), " and", ' ', /*#__PURE__*/_react.default.createElement("code", null, "rel=\"noopener noreferrer\""), " appended to them."), /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
33
|
+
color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
|
|
34
|
+
}, "Links can have", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
|
|
35
|
+
href: "#",
|
|
36
|
+
variant: hasDarkBackground ? 'onDark' : 'standard'
|
|
37
|
+
}, "icons inline ", /*#__PURE__*/_react.default.createElement(_share.default, {
|
|
38
|
+
width: "1rem"
|
|
39
|
+
}))), /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
40
|
+
color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
|
|
41
|
+
}, "Using the ", /*#__PURE__*/_react.default.createElement("code", null, "as"), " prop, you can utilize a routing library, like", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
|
|
42
|
+
href: "https://chakra-ui.com/docs/navigation/link#usage-with-routing-library",
|
|
43
|
+
isExternal: true,
|
|
44
|
+
variant: hasDarkBackground ? 'onDark' : 'standard'
|
|
45
|
+
}, "React Router"), ' ', "and it will replace the ", /*#__PURE__*/_react.default.createElement("code", null, "a"), " tag with it's", ' ', /*#__PURE__*/_react.default.createElement("code", null, "Link"), "."));
|
|
49
46
|
const Overview = exports.Overview = OverviewTemplate.bind({});
|
|
50
47
|
Overview.parameters = {
|
|
51
48
|
importBy: 'Link'
|
|
@@ -42,15 +42,12 @@ const getListProps = type => {
|
|
|
42
42
|
return;
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
-
const List = /*#__PURE__*/(0, _react.forwardRef)((
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
ref: ref
|
|
52
|
-
}));
|
|
53
|
-
});
|
|
45
|
+
const List = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
46
|
+
type,
|
|
47
|
+
...props
|
|
48
|
+
}, ref) => /*#__PURE__*/_react.default.createElement(_react2.List, (0, _extends2.default)({}, getListProps(type), props, {
|
|
49
|
+
ref: ref
|
|
50
|
+
})));
|
|
54
51
|
List.defaultProps = {
|
|
55
52
|
type: TYPES.unstyled,
|
|
56
53
|
stylePosition: STYLE_POSITIONS.inside
|
|
@@ -13,14 +13,11 @@ var _Spaces = _interopRequireDefault(require("../../utils/Spaces"));
|
|
|
13
13
|
var _Text = _interopRequireDefault(require("../Text/Text"));
|
|
14
14
|
var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
|
|
15
15
|
const DISABLE_TYPE = (0, _disableArgs.default)('type');
|
|
16
|
-
const Usage =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
spaces: 6
|
|
22
|
-
}), "...", /*#__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>");
|
|
23
|
-
};
|
|
16
|
+
const Usage = ({
|
|
17
|
+
type
|
|
18
|
+
}) => /*#__PURE__*/_react.default.createElement(_Text.default, null, "<List", type ? ` type="${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, {
|
|
19
|
+
spaces: 6
|
|
20
|
+
}), "...", /*#__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>");
|
|
24
21
|
var _default = exports.default = {
|
|
25
22
|
title: 'v2/List',
|
|
26
23
|
component: _List.default,
|
|
@@ -8,17 +8,16 @@ exports.default = void 0;
|
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _react2 = require("@chakra-ui/react");
|
|
11
|
-
const Loader =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
} = _ref;
|
|
11
|
+
const Loader = ({
|
|
12
|
+
color = 'success',
|
|
13
|
+
loaderBackgroundColor = 'transparent',
|
|
14
|
+
isInfinite = true,
|
|
15
|
+
size = 12,
|
|
16
|
+
thickness = 2,
|
|
17
|
+
trackColor = 'gray.medium',
|
|
18
|
+
value = 0,
|
|
19
|
+
...props
|
|
20
|
+
}) => {
|
|
22
21
|
/* -------------------------------------------------------------------- *\
|
|
23
22
|
Note: Since most of the props for this component control multiple
|
|
24
23
|
styles at a time, it was decided that it made the most sense to set
|
|
@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _default =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
} = _ref;
|
|
7
|
+
var _default = ({
|
|
8
|
+
hasFooter,
|
|
9
|
+
hasHeader,
|
|
10
|
+
hideCloseButton
|
|
11
|
+
}) => {
|
|
13
12
|
const scrollingHeaderStyles = hasHeader || !hideCloseButton ? {
|
|
14
13
|
// The following adapted from https://lea.verou.me/2012/04/background-attachment-local/
|
|
15
14
|
background: 'linear-gradient(white 30%, white), linear-gradient(rgb(0 0 0 / 10%) 0%, white)',
|
|
@@ -4,24 +4,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _default =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
};
|
|
7
|
+
var _default = ({
|
|
8
|
+
hasHeader
|
|
9
|
+
}) => ({
|
|
10
|
+
position: 'absolute',
|
|
11
|
+
top: hasHeader ? 4 : 2,
|
|
12
|
+
insetEnd: hasHeader ? 4 : 2,
|
|
13
|
+
color: 'gray.dark',
|
|
14
|
+
borderRadius: 'sm',
|
|
15
|
+
width: 8,
|
|
16
|
+
height: 8,
|
|
17
|
+
_focus: {
|
|
18
|
+
boxShadow: 'outline'
|
|
19
|
+
},
|
|
20
|
+
_hover: {
|
|
21
|
+
bg: 'gray.50'
|
|
22
|
+
}
|
|
23
|
+
});
|
|
27
24
|
exports.default = _default;
|
|
@@ -4,22 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _default =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
paddingBottom: hasFooter ? 0 : 4
|
|
23
|
-
};
|
|
24
|
-
};
|
|
7
|
+
var _default = ({
|
|
8
|
+
hasFooter
|
|
9
|
+
}) => ({
|
|
10
|
+
borderRadius: 'md',
|
|
11
|
+
borderBottomRadius: {
|
|
12
|
+
base: '0',
|
|
13
|
+
tablet: 'md'
|
|
14
|
+
},
|
|
15
|
+
background: 'white',
|
|
16
|
+
color: 'inherit',
|
|
17
|
+
marginY: 0,
|
|
18
|
+
zIndex: 'layer8',
|
|
19
|
+
boxShadow: 'lg',
|
|
20
|
+
paddingBottom: hasFooter ? 0 : 4
|
|
21
|
+
});
|
|
25
22
|
exports.default = _default;
|
|
@@ -4,17 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _default =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
minHeight: hasHeader || hideCloseButton ? null : 12
|
|
18
|
-
};
|
|
19
|
-
};
|
|
7
|
+
var _default = ({
|
|
8
|
+
hideCloseButton,
|
|
9
|
+
hasHeader
|
|
10
|
+
}) => ({
|
|
11
|
+
padding: !hideCloseButton || hasHeader ? 4 : 2,
|
|
12
|
+
fontSize: 'xl',
|
|
13
|
+
fontWeight: 'semibold',
|
|
14
|
+
// If just close button, still have 'header' section at top
|
|
15
|
+
minHeight: hasHeader || hideCloseButton ? null : 12
|
|
16
|
+
});
|
|
20
17
|
exports.default = _default;
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.default = exports.Variant = exports.Placement = exports.NoHeader = exports.NoCloseButton =
|
|
7
|
+
exports.default = exports.Variant = exports.Placement = exports.NoHeader = exports.NoCloseButton = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
|
|
@@ -67,14 +67,4 @@ const NoCloseButtonTemplate = props => /*#__PURE__*/_react.default.createElement
|
|
|
67
67
|
const NoCloseButton = exports.NoCloseButton = NoCloseButtonTemplate.bind({});
|
|
68
68
|
NoCloseButton.argTypes = {
|
|
69
69
|
...(0, _disableArgs.default)(['variant', 'placement'])
|
|
70
|
-
};
|
|
71
|
-
const NoArrowTemplate = props => /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({
|
|
72
|
-
defaultIsOpen: true
|
|
73
|
-
}, props), /*#__PURE__*/_react.default.createElement(_index.PopoverTrigger, null, /*#__PURE__*/_react.default.createElement(_Button.default, null, "Trigger")), /*#__PURE__*/_react.default.createElement(_index.PopoverContent, {
|
|
74
|
-
hideArrow: true,
|
|
75
|
-
header: "Confirmation!"
|
|
76
|
-
}, "Are you sure you want to have that milkshake?"));
|
|
77
|
-
const NoArrow = exports.NoArrow = NoArrowTemplate.bind({});
|
|
78
|
-
NoArrow.argTypes = {
|
|
79
|
-
...(0, _disableArgs.default)(['variant', 'placement'])
|
|
80
70
|
};
|
|
@@ -18,21 +18,18 @@ const PopoverContent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
|
18
18
|
variant,
|
|
19
19
|
children,
|
|
20
20
|
hideCloseButton,
|
|
21
|
-
hideArrow,
|
|
22
|
-
popoverBodyProps,
|
|
23
21
|
...rest
|
|
24
22
|
} = props;
|
|
25
23
|
return /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, (0, _extends2.default)({}, rest, {
|
|
26
24
|
ref: ref
|
|
27
|
-
}),
|
|
25
|
+
}), /*#__PURE__*/_react.default.createElement(_PopoverArrow.default, {
|
|
28
26
|
variant: variant
|
|
29
27
|
}), hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_PopoverCloseButton.default, {
|
|
30
28
|
variant: variant
|
|
31
|
-
}), header ? /*#__PURE__*/_react.default.createElement(_react2.PopoverHeader, null, header) : null, /*#__PURE__*/_react.default.createElement(_react2.PopoverBody,
|
|
29
|
+
}), header ? /*#__PURE__*/_react.default.createElement(_react2.PopoverHeader, null, header) : null, /*#__PURE__*/_react.default.createElement(_react2.PopoverBody, null, children));
|
|
32
30
|
});
|
|
33
31
|
PopoverContent.defaultProps = {
|
|
34
32
|
variant: 'light',
|
|
35
|
-
hideCloseButton: false
|
|
36
|
-
hideArrow: false
|
|
33
|
+
hideCloseButton: false
|
|
37
34
|
};
|
|
38
35
|
var _default = exports.default = PopoverContent;
|
|
@@ -16,12 +16,6 @@ Object.defineProperty(exports, "PopoverAnchor", {
|
|
|
16
16
|
return _react.PopoverAnchor;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
Object.defineProperty(exports, "PopoverArrow", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () {
|
|
22
|
-
return _PopoverArrow.default;
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
19
|
Object.defineProperty(exports, "PopoverContent", {
|
|
26
20
|
enumerable: true,
|
|
27
21
|
get: function () {
|
|
@@ -36,5 +30,4 @@ Object.defineProperty(exports, "PopoverTrigger", {
|
|
|
36
30
|
});
|
|
37
31
|
var _react = require("@chakra-ui/react");
|
|
38
32
|
var _Popover = _interopRequireDefault(require("./Popover"));
|
|
39
|
-
var _PopoverContent = _interopRequireDefault(require("./PopoverContent"));
|
|
40
|
-
var _PopoverArrow = _interopRequireDefault(require("./PopoverArrow"));
|
|
33
|
+
var _PopoverContent = _interopRequireDefault(require("./PopoverContent"));
|
|
@@ -4,12 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
const arrowStyles =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
backgroundColor: variant === 'dark' ? 'secondary.default' : 'white'
|
|
13
|
-
};
|
|
14
|
-
};
|
|
7
|
+
const arrowStyles = ({
|
|
8
|
+
variant
|
|
9
|
+
}) => ({
|
|
10
|
+
backgroundColor: variant === 'dark' ? 'secondary.default' : 'white'
|
|
11
|
+
});
|
|
15
12
|
var _default = exports.default = arrowStyles;
|
|
@@ -7,23 +7,20 @@ exports.default = void 0;
|
|
|
7
7
|
const pseudoStyles = variant => ({
|
|
8
8
|
bgColor: variant === 'dark' ? 'gray.600' : 'gray.50'
|
|
9
9
|
});
|
|
10
|
-
const closeButtonStyles =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
};
|
|
10
|
+
const closeButtonStyles = ({
|
|
11
|
+
variant
|
|
12
|
+
}) => ({
|
|
13
|
+
color: variant === 'dark' ? 'white' : 'black',
|
|
14
|
+
fontSize: '0.5rem',
|
|
15
|
+
position: 'absolute',
|
|
16
|
+
top: 0,
|
|
17
|
+
right: 0,
|
|
18
|
+
padding: 4,
|
|
19
|
+
borderTopRightRadius: 4,
|
|
20
|
+
_hover: pseudoStyles(variant),
|
|
21
|
+
_focus: {
|
|
22
|
+
...pseudoStyles(variant),
|
|
23
|
+
boxShadow: 'outline'
|
|
24
|
+
}
|
|
25
|
+
});
|
|
29
26
|
var _default = exports.default = closeButtonStyles;
|