@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.
Files changed (60) hide show
  1. package/dist/components/Accordion/Accordion.stories.js +7 -8
  2. package/dist/components/Accordion/AccordionActionButton.js +4 -5
  3. package/dist/components/Alert/Alert.js +22 -23
  4. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +35 -42
  5. package/dist/components/Button/Button.js +16 -22
  6. package/dist/components/Button/stories/button.js +5 -6
  7. package/dist/components/Button/stories/overview.js +23 -27
  8. package/dist/components/Checkbox/Checkbox.js +10 -11
  9. package/dist/components/CreatableSelect/CreatableSelect.js +13 -14
  10. package/dist/components/Divider/Divider.js +5 -6
  11. package/dist/components/Drawer/Drawer.js +5 -6
  12. package/dist/components/Drawer/styles/index.js +4 -5
  13. package/dist/components/FormControl/FormControl.js +42 -45
  14. package/dist/components/Grid/Grid.js +6 -9
  15. package/dist/components/Grid/Grid.stories.js +40 -52
  16. package/dist/components/Icon/Icon.stories.js +1 -1
  17. package/dist/components/Image/Image.js +19 -21
  18. package/dist/components/Input/Input.js +11 -12
  19. package/dist/components/Link/Link.stories.js +26 -29
  20. package/dist/components/List/List.js +6 -9
  21. package/dist/components/List/List.stories.js +5 -8
  22. package/dist/components/Loader/Loader.js +10 -11
  23. package/dist/components/Modal/styles/body.js +5 -6
  24. package/dist/components/Modal/styles/closeButton.js +17 -20
  25. package/dist/components/Modal/styles/dialog.js +15 -18
  26. package/dist/components/Modal/styles/header.js +10 -13
  27. package/dist/components/Popover/Popover.stories.js +1 -11
  28. package/dist/components/Popover/PopoverContent.js +3 -6
  29. package/dist/components/Popover/index.js +1 -8
  30. package/dist/components/Popover/styles/popover-arrow.js +5 -8
  31. package/dist/components/Popover/styles/popover-close-button.js +16 -19
  32. package/dist/components/Popover/styles/popover-content.js +19 -22
  33. package/dist/components/Progress/Progress.js +4 -5
  34. package/dist/components/Radio/Radio.js +10 -11
  35. package/dist/components/Radio/RadioGroup.js +14 -15
  36. package/dist/components/Select/Select.js +10 -11
  37. package/dist/components/SelectionCard/SelectionCard.js +13 -14
  38. package/dist/components/SelectionCard/SelectionCard.stories.js +3 -4
  39. package/dist/components/Spinner/Spinner.js +5 -6
  40. package/dist/components/Spinner/Spinner.stories.js +1 -2
  41. package/dist/components/Switch/Switch.js +9 -10
  42. package/dist/components/Table/Table.stories.js +7 -8
  43. package/dist/components/Tabs/Tabs.js +4 -5
  44. package/dist/components/Tabs/Tabs.stories.js +0 -6
  45. package/dist/components/Tabs/combineSizeWithVariant.js +4 -5
  46. package/dist/components/Tabs/styles/index.js +0 -28
  47. package/dist/components/Text/Text.js +5 -6
  48. package/dist/components/Text/combineAsWithVariant.js +4 -5
  49. package/dist/components/ThemeProvider/ThemeProvider.js +12 -15
  50. package/dist/components/ThemeProvider/ThemeProvider.stories.js +3 -4
  51. package/dist/components/index.js +0 -78
  52. package/dist/components/styles.js +1 -8
  53. package/dist/theme/global.js +5 -8
  54. package/dist/theme/index.js +1 -4
  55. package/dist/utils/Spaces.js +7 -10
  56. package/package.json +7 -7
  57. package/dist/components/Menu/Menu.js +0 -16
  58. package/dist/components/Menu/Menu.stories.js +0 -159
  59. package/dist/components/Menu/Menu.styles.js +0 -173
  60. 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 = function (max) {
14
- let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
15
- return {
16
- control: {
17
- max,
18
- min,
19
- step: 1,
20
- type: 'range'
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, _ref) => {
46
- let {
47
- hasDarkBackground
48
- } = _ref;
49
- return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, args, {
50
- bg: hasDarkBackground ? 'secondary.700' : 'secondary.default'
51
- }), Array(12).fill(null).map((Item, index) => /*#__PURE__*/_react.default.createElement(_.GridItem, {
52
- key: `GridItem-${index}`,
53
- colSpan: 1
54
- }, /*#__PURE__*/_react.default.createElement(_react2.Box, {
55
- h: "20rem",
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 = _ref2 => {
61
- let {
62
- isCompact,
63
- ...args
64
- } = _ref2;
65
- return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
66
- bg: "secondary.default",
67
- isCompact: isCompact
68
- }, /*#__PURE__*/_react.default.createElement(_.GridItem, args, /*#__PURE__*/_react.default.createElement(_react2.Box, {
69
- h: "20rem",
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 = _ref3 => {
92
- let {
93
- numberOfColumns
94
- } = _ref3;
95
- return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
96
- bg: "secondary.default"
97
- }, Array(numberOfColumns).fill(null).map((item, index) => /*#__PURE__*/_react.default.createElement(_.GridItem, {
98
- key: `GridItem-${index}`,
99
- colSpan: spanMap[numberOfColumns]
100
- }, /*#__PURE__*/_react.default.createElement(_react2.Box, {
101
- h: "20rem",
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.Shield,
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 = _ref => {
13
- let {
14
- cloudinaryImageId,
15
- cloudinaryTemplate,
16
- cloudinaryCloudName,
17
- htmlWidth,
18
- htmlHeight,
19
- quality
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 = _ref2 => {
32
- let {
33
- isSSR,
34
- cloudinaryImageId,
35
- cloudinaryTemplate,
36
- cloudinaryCloudName,
37
- htmlWidth,
38
- htmlHeight,
39
- quality,
40
- lazyLoad,
41
- ...otherProps
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)((_ref, ref) => {
16
- let {
17
- label,
18
- helperText,
19
- errorMessage,
20
- isInvalid,
21
- isDisabled,
22
- isRequired,
23
- isOptional,
24
- customRequiredText,
25
- ...props
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, _ref) => {
21
- let {
22
- hasDarkBackground
23
- } = _ref;
24
- return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
25
- color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
26
- }, "A link with", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
27
- variant: hasDarkBackground ? 'onDark' : 'standard'
28
- }, "no href"), ' ', "is only styled."), /*#__PURE__*/_react.default.createElement(_Text.default, {
29
- color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
30
- }, "Links can be linked to", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
31
- href: "#",
32
- isExternal: true,
33
- variant: hasDarkBackground ? 'onDark' : 'standard'
34
- }, "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, {
35
- color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
36
- }, "Links can have", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
37
- href: "#",
38
- variant: hasDarkBackground ? 'onDark' : 'standard'
39
- }, "icons inline ", /*#__PURE__*/_react.default.createElement(_share.default, {
40
- width: "1rem"
41
- }))), /*#__PURE__*/_react.default.createElement(_Text.default, {
42
- color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
43
- }, "Using the ", /*#__PURE__*/_react.default.createElement("code", null, "as"), " prop, you can utilize a routing library, like", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
44
- href: "https://chakra-ui.com/docs/navigation/link#usage-with-routing-library",
45
- isExternal: true,
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)((_ref, ref) => {
46
- let {
47
- type,
48
- ...props
49
- } = _ref;
50
- return /*#__PURE__*/_react.default.createElement(_react2.List, (0, _extends2.default)({}, getListProps(type), props, {
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 = _ref => {
17
- let {
18
- type
19
- } = _ref;
20
- return /*#__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, {
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 = _ref => {
12
- let {
13
- color = 'success',
14
- loaderBackgroundColor = 'transparent',
15
- isInfinite = true,
16
- size = 12,
17
- thickness = 2,
18
- trackColor = 'gray.medium',
19
- value = 0,
20
- ...props
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 = _ref => {
8
- let {
9
- hasFooter,
10
- hasHeader,
11
- hideCloseButton
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 = _ref => {
8
- let {
9
- hasHeader
10
- } = _ref;
11
- return {
12
- position: 'absolute',
13
- top: hasHeader ? 4 : 2,
14
- insetEnd: hasHeader ? 4 : 2,
15
- color: 'gray.dark',
16
- borderRadius: 'sm',
17
- width: 8,
18
- height: 8,
19
- _focus: {
20
- boxShadow: 'outline'
21
- },
22
- _hover: {
23
- bg: 'gray.50'
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 = _ref => {
8
- let {
9
- hasFooter
10
- } = _ref;
11
- return {
12
- borderRadius: 'md',
13
- borderBottomRadius: {
14
- base: '0',
15
- tablet: 'md'
16
- },
17
- background: 'white',
18
- color: 'inherit',
19
- marginY: 0,
20
- zIndex: 'layer8',
21
- boxShadow: 'lg',
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 = _ref => {
8
- let {
9
- hideCloseButton,
10
- hasHeader
11
- } = _ref;
12
- return {
13
- padding: !hideCloseButton || hasHeader ? 4 : 2,
14
- fontSize: 'xl',
15
- fontWeight: 'semibold',
16
- // If just close button, still have 'header' section at top
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 = exports.NoArrow = void 0;
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
- }), hideArrow ? null : /*#__PURE__*/_react.default.createElement(_PopoverArrow.default, {
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, popoverBodyProps, children));
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 = _ref => {
8
- let {
9
- variant
10
- } = _ref;
11
- return {
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 = _ref => {
11
- let {
12
- variant
13
- } = _ref;
14
- return {
15
- color: variant === 'dark' ? 'white' : 'black',
16
- fontSize: '0.5rem',
17
- position: 'absolute',
18
- top: 0,
19
- right: 0,
20
- padding: 4,
21
- borderTopRightRadius: 4,
22
- _hover: pseudoStyles(variant),
23
- _focus: {
24
- ...pseudoStyles(variant),
25
- boxShadow: 'outline'
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;