@spothero/ui 22.3.5 → 22.3.9-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/index.cjs.js +54151 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.esm.js +53999 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +19 -26
- package/dist/components/Accordion/Accordion.stories.js +0 -101
- package/dist/components/Accordion/AccordionActionButton.js +0 -32
- package/dist/components/Accordion/index.js +0 -45
- package/dist/components/Accordion/styles/index.js +0 -77
- package/dist/components/Alert/Alert.js +0 -91
- package/dist/components/Alert/Alert.stories.js +0 -64
- package/dist/components/Alert/index.js +0 -14
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +0 -169
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +0 -23
- package/dist/components/AutoSuggestSelect/index.js +0 -14
- package/dist/components/Badge/Badge.js +0 -13
- package/dist/components/Badge/Badge.stories.js +0 -32
- package/dist/components/Badge/styles/index.js +0 -33
- package/dist/components/Button/Button.js +0 -71
- package/dist/components/Button/Button.spec.js +0 -25
- package/dist/components/Button/Button.styles.js +0 -166
- package/dist/components/Button/button-props.js +0 -73
- package/dist/components/Button/index.js +0 -21
- package/dist/components/Button/stories/button.js +0 -47
- package/dist/components/Button/stories/index.stories.js +0 -103
- package/dist/components/Button/stories/overview.js +0 -77
- package/dist/components/Card/Card.js +0 -28
- package/dist/components/Card/Card.stories.js +0 -33
- package/dist/components/Checkbox/Checkbox.js +0 -44
- package/dist/components/Checkbox/Checkbox.stories.js +0 -69
- package/dist/components/Checkbox/index.js +0 -14
- package/dist/components/Checkbox/styles/index.js +0 -90
- package/dist/components/Container/Container.js +0 -23
- package/dist/components/Container/Container.stories.js +0 -53
- package/dist/components/Container/Container.styles.js +0 -17
- package/dist/components/CreatableSelect/CreatableSelect.js +0 -148
- package/dist/components/CreatableSelect/CreatableSelect.stories.js +0 -69
- package/dist/components/CreatableSelect/index.js +0 -14
- package/dist/components/Divider/Divider.js +0 -34
- package/dist/components/Divider/Divider.stories.js +0 -40
- package/dist/components/Divider/Divider.styles.js +0 -21
- package/dist/components/Drawer/Drawer.js +0 -29
- package/dist/components/Drawer/Drawer.stories.js +0 -50
- package/dist/components/Drawer/index.js +0 -57
- package/dist/components/Drawer/styles/index.js +0 -108
- package/dist/components/FormControl/FormControl.js +0 -74
- package/dist/components/Grid/Grid.js +0 -35
- package/dist/components/Grid/Grid.stories.js +0 -117
- package/dist/components/Grid/Grid.styles.js +0 -18
- package/dist/components/Grid/GridItem.js +0 -23
- package/dist/components/Grid/GridItem.styles.js +0 -14
- package/dist/components/Grid/index.js +0 -21
- package/dist/components/Heading/Heading.js +0 -34
- package/dist/components/Heading/Heading.stories.js +0 -46
- package/dist/components/Heading/Heading.styles.js +0 -69
- package/dist/components/Icon/Icon.js +0 -13
- package/dist/components/Icon/Icon.stories.js +0 -40
- package/dist/components/Image/Image.js +0 -84
- package/dist/components/Image/Image.spec.js +0 -77
- package/dist/components/Image/Image.stories.js +0 -80
- package/dist/components/Input/Input.js +0 -49
- package/dist/components/Input/Input.stories.js +0 -63
- package/dist/components/Input/index.js +0 -14
- package/dist/components/Input/styles/index.js +0 -65
- package/dist/components/Link/Link.js +0 -13
- package/dist/components/Link/Link.stories.js +0 -52
- package/dist/components/Link/Link.styles.js +0 -45
- package/dist/components/List/List.js +0 -69
- package/dist/components/List/List.stories.js +0 -92
- package/dist/components/List/index.js +0 -21
- package/dist/components/List/styles/index.js +0 -17
- package/dist/components/List/styles/item.styles.js +0 -11
- package/dist/components/Loader/Loader.js +0 -53
- package/dist/components/Loader/Loader.stories.js +0 -124
- package/dist/components/Menu/Menu.js +0 -17
- package/dist/components/Menu/Menu.stories.js +0 -169
- package/dist/components/Menu/Menu.styles.js +0 -174
- package/dist/components/Menu/index.js +0 -57
- package/dist/components/Modal/Modal.js +0 -46
- package/dist/components/Modal/Modal.stories.js +0 -225
- package/dist/components/Modal/index.js +0 -33
- package/dist/components/Modal/styles/body.js +0 -39
- package/dist/components/Modal/styles/closeButton.js +0 -25
- package/dist/components/Modal/styles/dialog.js +0 -23
- package/dist/components/Modal/styles/dialogContainer.js +0 -21
- package/dist/components/Modal/styles/footer.js +0 -12
- package/dist/components/Modal/styles/header.js +0 -18
- package/dist/components/Modal/styles/index.js +0 -56
- package/dist/components/Modal/styles/overlay.js +0 -11
- package/dist/components/Popover/Popover.js +0 -34
- package/dist/components/Popover/Popover.stories.js +0 -87
- package/dist/components/Popover/PopoverArrow.js +0 -23
- package/dist/components/Popover/PopoverCloseButton.js +0 -23
- package/dist/components/Popover/PopoverContent.js +0 -42
- package/dist/components/Popover/index.js +0 -41
- package/dist/components/Popover/styles/index.js +0 -27
- package/dist/components/Popover/styles/popover-arrow.js +0 -14
- package/dist/components/Popover/styles/popover-body.js +0 -13
- package/dist/components/Popover/styles/popover-close-button.js +0 -40
- package/dist/components/Popover/styles/popover-content.js +0 -30
- package/dist/components/Popover/styles/popover-header.js +0 -12
- package/dist/components/Popover/styles/popper.js +0 -11
- package/dist/components/Progress/Progress.js +0 -42
- package/dist/components/Progress/Progress.stories.js +0 -90
- package/dist/components/Progress/Progress.styles.js +0 -107
- package/dist/components/Radio/Radio.js +0 -43
- package/dist/components/Radio/Radio.stories.js +0 -137
- package/dist/components/Radio/RadioGroup.js +0 -52
- package/dist/components/Radio/index.js +0 -21
- package/dist/components/Radio/styles/index.js +0 -119
- package/dist/components/RefreshedInput/Button/Button.js +0 -72
- package/dist/components/RefreshedInput/Button/Button.stories.js +0 -85
- package/dist/components/RefreshedInput/Button/index.js +0 -14
- package/dist/components/RefreshedInput/Button/styles/index.js +0 -35
- package/dist/components/RefreshedInput/FormControl/index.js +0 -176
- package/dist/components/RefreshedInput/Input/Input.js +0 -67
- package/dist/components/RefreshedInput/Input/Input.stories.js +0 -79
- package/dist/components/RefreshedInput/Input/index.js +0 -14
- package/dist/components/RefreshedInput/Input/styles/index.js +0 -33
- package/dist/components/RefreshedInput/Select/Select.js +0 -70
- package/dist/components/RefreshedInput/Select/Select.stories.js +0 -85
- package/dist/components/RefreshedInput/Select/index.js +0 -14
- package/dist/components/RefreshedInput/Select/styles/index.js +0 -34
- package/dist/components/RefreshedInput/index.js +0 -35
- package/dist/components/RefreshedInput/storyAid/index.js +0 -22
- package/dist/components/Select/Select.js +0 -55
- package/dist/components/Select/Select.stories.js +0 -67
- package/dist/components/Select/index.js +0 -14
- package/dist/components/Select/styles/index.js +0 -51
- package/dist/components/SelectionCard/SelectionCard.js +0 -67
- package/dist/components/SelectionCard/SelectionCard.stories.js +0 -91
- package/dist/components/SelectionCard/index.js +0 -14
- package/dist/components/Skeleton/Skeleton.stories.js +0 -31
- package/dist/components/Skeleton/Skeleton.styles.js +0 -10
- package/dist/components/Skeleton/index.js +0 -25
- package/dist/components/Spinner/Spinner.js +0 -34
- package/dist/components/Spinner/Spinner.stories.js +0 -109
- package/dist/components/Spinner/Spinner.styles.js +0 -67
- package/dist/components/Switch/Switch.js +0 -45
- package/dist/components/Switch/Switch.stories.js +0 -80
- package/dist/components/Switch/index.js +0 -14
- package/dist/components/Switch/styles/index.js +0 -42
- package/dist/components/Table/Table.js +0 -13
- package/dist/components/Table/Table.stories.js +0 -80
- package/dist/components/Table/Table.styles.js +0 -77
- package/dist/components/Table/index.js +0 -63
- package/dist/components/Tabs/Tabs.js +0 -35
- package/dist/components/Tabs/Tabs.stories.js +0 -44
- package/dist/components/Tabs/combineSizeWithVariant.js +0 -35
- package/dist/components/Tabs/index.js +0 -39
- package/dist/components/Tabs/styles/index.js +0 -71
- package/dist/components/Text/Text.js +0 -35
- package/dist/components/Text/Text.stories.js +0 -47
- package/dist/components/Text/Text.styles.js +0 -53
- package/dist/components/Text/combineAsWithVariant.js +0 -103
- package/dist/components/Text/options.js +0 -9
- package/dist/components/Textarea/Textarea.js +0 -49
- package/dist/components/Textarea/Textarea.stories.js +0 -62
- package/dist/components/Textarea/index.js +0 -14
- package/dist/components/Textarea/styles/index.js +0 -65
- package/dist/components/ThemeProvider/ThemeProvider.js +0 -47
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +0 -52
- package/dist/components/Toast/Toast.stories.js +0 -84
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js +0 -65
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.js +0 -62
- package/dist/components/ToggleButtonGroup/index.js +0 -14
- package/dist/components/ToggleButtonGroup/styles/index.js +0 -48
- package/dist/components/index.js +0 -799
- package/dist/components/styles.js +0 -189
- package/dist/theme/base/breakpoints.js +0 -24
- package/dist/theme/base/colors.js +0 -144
- package/dist/theme/base/index.js +0 -80
- package/dist/theme/base/notifications.js +0 -197
- package/dist/theme/base/shadows.js +0 -16
- package/dist/theme/base/sizes.js +0 -89
- package/dist/theme/base/typography.js +0 -39
- package/dist/theme/base/zindices.js +0 -34
- package/dist/theme/global.js +0 -39
- package/dist/theme/index.js +0 -45
- package/dist/utils/Spaces.js +0 -21
|
@@ -1,225 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
-
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
5
|
-
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
6
|
-
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
7
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
8
|
-
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
|
9
|
-
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
10
|
-
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
|
11
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
12
|
-
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
13
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
14
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
exports["default"] = exports.TransactionalWithExpandingContent = exports.Transactional = exports.Passive = exports.NoHeader = void 0;
|
|
18
|
-
var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
|
|
19
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
20
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
|
21
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
22
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
23
|
-
var _react2 = require("@chakra-ui/react");
|
|
24
|
-
var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
|
|
25
|
-
var _createControl = require("storybook/utils/create-control");
|
|
26
|
-
var _index = require("./index");
|
|
27
|
-
var _Button = _interopRequireDefault(require("../Button/Button"));
|
|
28
|
-
var _Text = _interopRequireDefault(require("../Text/Text"));
|
|
29
|
-
var _Heading = _interopRequireDefault(require("../Heading/Heading"));
|
|
30
|
-
var _Accordion = require("../Accordion");
|
|
31
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
32
|
-
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; }
|
|
33
|
-
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
34
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
35
|
-
var _default = exports["default"] = {
|
|
36
|
-
title: 'v2/Modal',
|
|
37
|
-
component: _index.Modal,
|
|
38
|
-
parameters: {
|
|
39
|
-
importBy: 'Modal',
|
|
40
|
-
removeBaseHtmlClass: true,
|
|
41
|
-
chakraLink: 'https://chakra-ui.com/docs/overlay/Modal'
|
|
42
|
-
},
|
|
43
|
-
argTypes: _objectSpread(_objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('size', ['sm', 'md', 'lg'])), (0, _disableArgs["default"])(['isOpen', 'onClose'])), {}, {
|
|
44
|
-
hideCloseButton: {
|
|
45
|
-
control: {
|
|
46
|
-
type: 'boolean'
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
children: {
|
|
50
|
-
control: {
|
|
51
|
-
type: 'text'
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}),
|
|
55
|
-
args: {
|
|
56
|
-
size: 'md'
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
var Transactional = exports.Transactional = function Transactional(props) {
|
|
60
|
-
var _useState = (0, _react.useState)(false),
|
|
61
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
62
|
-
open = _useState2[0],
|
|
63
|
-
setOpen = _useState2[1];
|
|
64
|
-
var isMobile = (0, _react2.useBreakpointValue)({
|
|
65
|
-
base: true,
|
|
66
|
-
tablet: false
|
|
67
|
-
});
|
|
68
|
-
return /*#__PURE__*/_react["default"].createElement(_react2.Box, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
|
|
69
|
-
marginBottom: 2
|
|
70
|
-
}, "A \"Transactional\" modal just refers to one with a footer. Be sure to use the ", /*#__PURE__*/_react["default"].createElement("code", null, "hasFooter"), " prop for the styling to be right when a ModalFooter is present. Same goes with ", /*#__PURE__*/_react["default"].createElement("code", null, "hasHeader"), "."), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
71
|
-
onClick: function onClick() {
|
|
72
|
-
return setOpen(true);
|
|
73
|
-
}
|
|
74
|
-
}, "Open Modal"), /*#__PURE__*/_react["default"].createElement(_index.Modal, (0, _extends2["default"])({}, props, {
|
|
75
|
-
isMobile: isMobile,
|
|
76
|
-
isOpen: open,
|
|
77
|
-
hasHeader: true,
|
|
78
|
-
hasFooter: true,
|
|
79
|
-
onClose: function onClose() {
|
|
80
|
-
return setOpen(false);
|
|
81
|
-
}
|
|
82
|
-
}), /*#__PURE__*/_react["default"].createElement(_index.ModalHeader, null, "Transactional"), /*#__PURE__*/_react["default"].createElement(_index.ModalBody, null, props.children), /*#__PURE__*/_react["default"].createElement(_index.ModalFooter, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
83
|
-
onClick: function onClick() {
|
|
84
|
-
return setOpen(false);
|
|
85
|
-
},
|
|
86
|
-
variant: "secondary",
|
|
87
|
-
marginRight: 4
|
|
88
|
-
}, "Cancel"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
89
|
-
onClick: function onClick() {
|
|
90
|
-
return setOpen(false);
|
|
91
|
-
},
|
|
92
|
-
variant: "primary"
|
|
93
|
-
}, "Submit"))));
|
|
94
|
-
};
|
|
95
|
-
Transactional.args = {
|
|
96
|
-
header: 'Transactional',
|
|
97
|
-
children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.'
|
|
98
|
-
};
|
|
99
|
-
var Passive = exports.Passive = function Passive(props) {
|
|
100
|
-
var _useState3 = (0, _react.useState)(false),
|
|
101
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
102
|
-
open = _useState4[0],
|
|
103
|
-
setOpen = _useState4[1];
|
|
104
|
-
var isMobile = (0, _react2.useBreakpointValue)({
|
|
105
|
-
base: true,
|
|
106
|
-
tablet: false
|
|
107
|
-
});
|
|
108
|
-
return /*#__PURE__*/_react["default"].createElement(_react2.Box, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
|
|
109
|
-
marginBottom: 2
|
|
110
|
-
}, "A \"Passive\" modal just refers to one with no footer."), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
111
|
-
onClick: function onClick() {
|
|
112
|
-
return setOpen(true);
|
|
113
|
-
}
|
|
114
|
-
}, "Open Modal"), /*#__PURE__*/_react["default"].createElement(_index.Modal, (0, _extends2["default"])({}, props, {
|
|
115
|
-
isMobile: isMobile,
|
|
116
|
-
isOpen: open,
|
|
117
|
-
hasHeader: true,
|
|
118
|
-
hasFooter: false,
|
|
119
|
-
onClose: function onClose() {
|
|
120
|
-
return setOpen(false);
|
|
121
|
-
}
|
|
122
|
-
}), /*#__PURE__*/_react["default"].createElement(_index.ModalHeader, null, "Passive"), /*#__PURE__*/_react["default"].createElement(_index.ModalBody, null, props.children)));
|
|
123
|
-
};
|
|
124
|
-
Passive.args = {
|
|
125
|
-
children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.'
|
|
126
|
-
};
|
|
127
|
-
var NoHeader = exports.NoHeader = function NoHeader(props) {
|
|
128
|
-
var _useState5 = (0, _react.useState)(false),
|
|
129
|
-
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
130
|
-
open = _useState6[0],
|
|
131
|
-
setOpen = _useState6[1];
|
|
132
|
-
var isMobile = (0, _react2.useBreakpointValue)({
|
|
133
|
-
base: true,
|
|
134
|
-
tablet: false
|
|
135
|
-
});
|
|
136
|
-
return /*#__PURE__*/_react["default"].createElement(_react2.Box, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
|
|
137
|
-
marginBottom: 2
|
|
138
|
-
}, "A modal with no header"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
139
|
-
onClick: function onClick() {
|
|
140
|
-
return setOpen(true);
|
|
141
|
-
}
|
|
142
|
-
}, "Open Modal"), /*#__PURE__*/_react["default"].createElement(_index.Modal, (0, _extends2["default"])({}, props, {
|
|
143
|
-
isMobile: isMobile,
|
|
144
|
-
hasHeader: false,
|
|
145
|
-
hasFooter: false,
|
|
146
|
-
isOpen: open,
|
|
147
|
-
onClose: function onClose() {
|
|
148
|
-
return setOpen(false);
|
|
149
|
-
}
|
|
150
|
-
}), /*#__PURE__*/_react["default"].createElement(_index.ModalBody, null, props.children)));
|
|
151
|
-
};
|
|
152
|
-
NoHeader.args = {
|
|
153
|
-
children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.'
|
|
154
|
-
};
|
|
155
|
-
var TransactionalWithExpandingContent = exports.TransactionalWithExpandingContent = function TransactionalWithExpandingContent(props) {
|
|
156
|
-
var _useState7 = (0, _react.useState)(false),
|
|
157
|
-
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
158
|
-
open = _useState8[0],
|
|
159
|
-
setOpen = _useState8[1];
|
|
160
|
-
var accordionRefs = [/*#__PURE__*/_react["default"].createRef(), /*#__PURE__*/_react["default"].createRef()];
|
|
161
|
-
var isMobile = (0, _react2.useBreakpointValue)({
|
|
162
|
-
base: true,
|
|
163
|
-
tablet: false
|
|
164
|
-
});
|
|
165
|
-
var handleAccordionChange = function handleAccordionChange(index) {
|
|
166
|
-
if (accordionRefs[index]) {
|
|
167
|
-
// Timeout so that scroll doesn't happen until accordion animation complete
|
|
168
|
-
(0, _setTimeout2["default"])(function () {
|
|
169
|
-
accordionRefs[index].current.scrollIntoView({
|
|
170
|
-
behavior: 'smooth',
|
|
171
|
-
block: 'start'
|
|
172
|
-
});
|
|
173
|
-
}, 150);
|
|
174
|
-
}
|
|
175
|
-
};
|
|
176
|
-
return /*#__PURE__*/_react["default"].createElement(_react2.Box, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
|
|
177
|
-
marginBottom: 2
|
|
178
|
-
}, "When content inside a modal dynamically expands, the modal should scroll to that new content."), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
|
|
179
|
-
marginBottom: 2
|
|
180
|
-
}, "However, this is something we'll need to implement on a case by case basis when it applies."), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
|
|
181
|
-
marginBottom: 2
|
|
182
|
-
}, "Feel free to check the code of this demo to see an example of how we might do that."), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
183
|
-
onClick: function onClick() {
|
|
184
|
-
return setOpen(true);
|
|
185
|
-
}
|
|
186
|
-
}, "Open Modal"), /*#__PURE__*/_react["default"].createElement(_index.Modal, (0, _extends2["default"])({}, props, {
|
|
187
|
-
isMobile: isMobile,
|
|
188
|
-
hasHeader: true,
|
|
189
|
-
hasFooter: true,
|
|
190
|
-
isOpen: open,
|
|
191
|
-
onClose: function onClose() {
|
|
192
|
-
return setOpen(false);
|
|
193
|
-
}
|
|
194
|
-
}), /*#__PURE__*/_react["default"].createElement(_index.ModalHeader, null, "Transactional with Expanding Content"), /*#__PURE__*/_react["default"].createElement(_index.ModalBody, null, /*#__PURE__*/_react["default"].createElement(_react2.Box, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
|
|
195
|
-
marginBottom: 2
|
|
196
|
-
}, "Try opening an Accordion when it is at the very bottom of the modal."), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
|
|
197
|
-
marginBottom: 2
|
|
198
|
-
}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero."), /*#__PURE__*/_react["default"].createElement(_Accordion.Accordion, {
|
|
199
|
-
onChange: handleAccordionChange,
|
|
200
|
-
allowToggle: true
|
|
201
|
-
}, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionItem, {
|
|
202
|
-
ref: accordionRefs[0]
|
|
203
|
-
}, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
204
|
-
as: "h3"
|
|
205
|
-
}, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionButton, null, /*#__PURE__*/_react["default"].createElement(_react2.Box, {
|
|
206
|
-
flex: "1",
|
|
207
|
-
textAlign: "left"
|
|
208
|
-
}, "Accordion 1"), /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionIcon, null))), /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionPanel, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. Aliquam et urna condimentum, sagittis nisl hendrerit, elementum velit. Nullam quis nisl dictum, suscipit ligula nec, elementum libero. Nullam eu lorem convallis, dictum nisl in, condimentum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva"))), /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionItem, {
|
|
209
|
-
ref: accordionRefs[1]
|
|
210
|
-
}, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
211
|
-
as: "h3"
|
|
212
|
-
}, /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionButton, null, /*#__PURE__*/_react["default"].createElement(_react2.Box, {
|
|
213
|
-
flex: "1",
|
|
214
|
-
textAlign: "left"
|
|
215
|
-
}, "Accordion 2"), /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionIcon, null))), /*#__PURE__*/_react["default"].createElement(_Accordion.AccordionPanel, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. Aliquam et urna condimentum, sagittis nisl hendrerit, elementum velit. Nullam quis nisl dictum, suscipit ligula nec, elementum libero. Nullam eu lorem convallis, dictum nisl in, condimentum dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viva")))))), /*#__PURE__*/_react["default"].createElement(_index.ModalFooter, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
216
|
-
onClick: function onClick() {
|
|
217
|
-
return setOpen(false);
|
|
218
|
-
},
|
|
219
|
-
variant: "secondary",
|
|
220
|
-
marginRight: 4
|
|
221
|
-
}, "Cancel"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
222
|
-
variant: "primary"
|
|
223
|
-
}, "Submit"))));
|
|
224
|
-
};
|
|
225
|
-
TransactionalWithExpandingContent.argTypes = _objectSpread({}, (0, _disableArgs["default"])(['children', 'hasHeader', 'hasFooter']));
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
_Object$defineProperty(exports, "Modal", {
|
|
9
|
-
enumerable: true,
|
|
10
|
-
get: function get() {
|
|
11
|
-
return _Modal["default"];
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
_Object$defineProperty(exports, "ModalBody", {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function get() {
|
|
17
|
-
return _react.ModalBody;
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
_Object$defineProperty(exports, "ModalFooter", {
|
|
21
|
-
enumerable: true,
|
|
22
|
-
get: function get() {
|
|
23
|
-
return _react.ModalFooter;
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
_Object$defineProperty(exports, "ModalHeader", {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function get() {
|
|
29
|
-
return _react.ModalHeader;
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
var _react = require("@chakra-ui/react");
|
|
33
|
-
var _Modal = _interopRequireDefault(require("./Modal"));
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
4
|
-
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
5
|
-
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
6
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
7
|
-
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
|
8
|
-
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
9
|
-
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
|
10
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
11
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
12
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
13
|
-
value: true
|
|
14
|
-
});
|
|
15
|
-
exports["default"] = void 0;
|
|
16
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
17
|
-
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
|
-
var _default = exports["default"] = function _default(_ref) {
|
|
20
|
-
var hasFooter = _ref.hasFooter,
|
|
21
|
-
hasHeader = _ref.hasHeader,
|
|
22
|
-
hideCloseButton = _ref.hideCloseButton;
|
|
23
|
-
var scrollingHeaderStyles = hasHeader || !hideCloseButton ? {
|
|
24
|
-
// The following adapted from https://lea.verou.me/2012/04/background-attachment-local/
|
|
25
|
-
background: 'linear-gradient(white 30%, white), linear-gradient(rgb(0 0 0 / 10%) 0%, white)',
|
|
26
|
-
backgroundRepeat: 'no-repeat',
|
|
27
|
-
backgroundColor: 'white',
|
|
28
|
-
backgroundSize: '100% 30px, 100% 10px',
|
|
29
|
-
backgroundAttachment: 'local, scroll'
|
|
30
|
-
} : {};
|
|
31
|
-
return _objectSpread({
|
|
32
|
-
borderBottomRadius: hasFooter ? null : 'md',
|
|
33
|
-
paddingX: 4,
|
|
34
|
-
paddingBottom: 4,
|
|
35
|
-
flex: 1,
|
|
36
|
-
overflow: 'auto',
|
|
37
|
-
display: 'flex'
|
|
38
|
-
}, scrollingHeaderStyles);
|
|
39
|
-
};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _default = exports["default"] = function _default(_ref) {
|
|
9
|
-
var hasHeader = _ref.hasHeader;
|
|
10
|
-
return {
|
|
11
|
-
position: 'absolute',
|
|
12
|
-
top: hasHeader ? 4 : 2,
|
|
13
|
-
insetEnd: hasHeader ? 4 : 2,
|
|
14
|
-
color: 'gray.dark',
|
|
15
|
-
borderRadius: 'sm',
|
|
16
|
-
width: 8,
|
|
17
|
-
height: 8,
|
|
18
|
-
_focus: {
|
|
19
|
-
boxShadow: 'outline'
|
|
20
|
-
},
|
|
21
|
-
_hover: {
|
|
22
|
-
bg: 'gray.50'
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _default = exports["default"] = function _default(_ref) {
|
|
9
|
-
var hasFooter = _ref.hasFooter;
|
|
10
|
-
return {
|
|
11
|
-
borderRadius: 'md',
|
|
12
|
-
borderBottomRadius: {
|
|
13
|
-
base: '0',
|
|
14
|
-
tablet: 'md'
|
|
15
|
-
},
|
|
16
|
-
background: 'white',
|
|
17
|
-
color: 'inherit',
|
|
18
|
-
marginY: 0,
|
|
19
|
-
zIndex: 'layer8',
|
|
20
|
-
boxShadow: 'lg',
|
|
21
|
-
paddingBottom: hasFooter ? 0 : 4
|
|
22
|
-
};
|
|
23
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
10
|
-
var _display$zIndex$justi;
|
|
11
|
-
var _default = exports["default"] = (_display$zIndex$justi = {
|
|
12
|
-
display: 'flex',
|
|
13
|
-
zIndex: 'layer8',
|
|
14
|
-
justifyContent: 'center',
|
|
15
|
-
alignItems: {
|
|
16
|
-
base: 'flex-end',
|
|
17
|
-
tablet: 'center'
|
|
18
|
-
},
|
|
19
|
-
height: '100%',
|
|
20
|
-
minHeight: '-moz-available'
|
|
21
|
-
}, (0, _defineProperty2["default"])(_display$zIndex$justi, "minHeight", '-webkit-fill-available'), (0, _defineProperty2["default"])(_display$zIndex$justi, "minHeight", 'fill-available'), _display$zIndex$justi);
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _default = exports["default"] = {
|
|
9
|
-
borderTop: '1px',
|
|
10
|
-
borderColor: 'gray.100',
|
|
11
|
-
padding: 4
|
|
12
|
-
};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _default = exports["default"] = function _default(_ref) {
|
|
9
|
-
var hideCloseButton = _ref.hideCloseButton,
|
|
10
|
-
hasHeader = _ref.hasHeader;
|
|
11
|
-
return {
|
|
12
|
-
padding: !hideCloseButton || hasHeader ? 4 : 2,
|
|
13
|
-
fontSize: 'xl',
|
|
14
|
-
fontWeight: 'semibold',
|
|
15
|
-
// If just close button, still have 'header' section at top
|
|
16
|
-
minHeight: hasHeader || hideCloseButton ? null : 12
|
|
17
|
-
};
|
|
18
|
-
};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
5
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
10
|
-
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
11
|
-
var _overlay = _interopRequireDefault(require("./overlay"));
|
|
12
|
-
var _dialogContainer = _interopRequireDefault(require("./dialogContainer"));
|
|
13
|
-
var _dialog = _interopRequireDefault(require("./dialog"));
|
|
14
|
-
var _header = _interopRequireDefault(require("./header"));
|
|
15
|
-
var _closeButton = _interopRequireDefault(require("./closeButton"));
|
|
16
|
-
var _body = _interopRequireDefault(require("./body"));
|
|
17
|
-
var _footer = _interopRequireDefault(require("./footer"));
|
|
18
|
-
var baseStyle = function baseStyle(props) {
|
|
19
|
-
return {
|
|
20
|
-
overlay: _overlay["default"],
|
|
21
|
-
dialogContainer: _dialogContainer["default"],
|
|
22
|
-
header: (0, _header["default"])(props),
|
|
23
|
-
dialog: (0, _dialog["default"])(props),
|
|
24
|
-
closeButton: (0, _closeButton["default"])(props),
|
|
25
|
-
body: (0, _body["default"])(props),
|
|
26
|
-
footer: _footer["default"]
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
var sizes = {
|
|
30
|
-
sm: {
|
|
31
|
-
dialog: {
|
|
32
|
-
// Would have preferred object syntax here and below, but wasn't working for whatever reason
|
|
33
|
-
maxWidth: ['100%', '100%', '48%', '32%', '24%'],
|
|
34
|
-
maxHeight: ['100%', '100%', '60%', '48%', '32%'],
|
|
35
|
-
minHeight: ['auto', 'auto', '32%', '32%', '24%']
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
md: {
|
|
39
|
-
dialog: {
|
|
40
|
-
maxWidth: ['100%', '100%', '84%', '60%', '48%'],
|
|
41
|
-
maxHeight: ['100%', '100%', '96%', '84%', '60%'],
|
|
42
|
-
minHeight: ['auto', 'auto', '84%', '60%', '48%']
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
lg: {
|
|
46
|
-
dialog: {
|
|
47
|
-
maxWidth: ['100%', '100%', '96%', '84%', '72%'],
|
|
48
|
-
maxHeight: ['100%', '100%', '96%', '96%', '84%'],
|
|
49
|
-
minHeight: ['auto', 'auto', '96%', '84%', '72%']
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Modal, {
|
|
54
|
-
baseStyle: baseStyle,
|
|
55
|
-
sizes: sizes
|
|
56
|
-
});
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
4
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _default = exports["default"] = {
|
|
9
|
-
background: 'modalOverlay',
|
|
10
|
-
zIndex: 'layer8'
|
|
11
|
-
};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
-
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
5
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
7
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
8
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
9
|
-
value: true
|
|
10
|
-
});
|
|
11
|
-
exports["default"] = void 0;
|
|
12
|
-
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
13
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
14
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
15
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
16
|
-
var _react2 = require("@chakra-ui/react");
|
|
17
|
-
var _excluded = ["children"];
|
|
18
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
19
|
-
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; }
|
|
20
|
-
var Popover = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
21
|
-
var _context;
|
|
22
|
-
var children = props.children,
|
|
23
|
-
rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
24
|
-
return /*#__PURE__*/_react["default"].createElement(_react2.Popover, (0, _extends2["default"])({}, rest, {
|
|
25
|
-
ref: ref
|
|
26
|
-
}), (0, _map["default"])(_context = _react.Children.toArray(children)).call(_context, function (child, index) {
|
|
27
|
-
return /*#__PURE__*/(0, _react.cloneElement)(child, {
|
|
28
|
-
ref: ref,
|
|
29
|
-
variant: props.variant,
|
|
30
|
-
key: "Popover-child-".concat(index)
|
|
31
|
-
});
|
|
32
|
-
}));
|
|
33
|
-
});
|
|
34
|
-
var _default = exports["default"] = Popover;
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
4
|
-
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
5
|
-
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
6
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
7
|
-
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
|
8
|
-
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
9
|
-
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
|
10
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
11
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
12
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
13
|
-
value: true
|
|
14
|
-
});
|
|
15
|
-
exports["default"] = exports.Variant = exports.Placement = exports.NoHeader = exports.NoCloseButton = exports.NoArrow = void 0;
|
|
16
|
-
var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
|
|
17
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
18
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
19
|
-
var _react = _interopRequireDefault(require("react"));
|
|
20
|
-
var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
|
|
21
|
-
var _createControl = require("storybook/utils/create-control");
|
|
22
|
-
var _index = require("./index");
|
|
23
|
-
var _react2 = require("@chakra-ui/react");
|
|
24
|
-
var _Button = _interopRequireDefault(require("../Button/Button"));
|
|
25
|
-
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
26
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
27
|
-
var _default = exports["default"] = {
|
|
28
|
-
title: 'v2/Popover',
|
|
29
|
-
component: _index.Popover,
|
|
30
|
-
subcomponents: {
|
|
31
|
-
PopoverContent: _index.PopoverContent,
|
|
32
|
-
PopoverTrigger: _index.PopoverTrigger
|
|
33
|
-
},
|
|
34
|
-
parameters: {
|
|
35
|
-
importBy: 'Popover',
|
|
36
|
-
removeBaseHtmlClass: true,
|
|
37
|
-
chakraLink: 'https://chakra-ui.com/docs/overlay/popover'
|
|
38
|
-
},
|
|
39
|
-
argTypes: _objectSpread({}, (0, _disableArgs["default"])('children'))
|
|
40
|
-
};
|
|
41
|
-
var OverviewTemplate = function OverviewTemplate(props) {
|
|
42
|
-
return /*#__PURE__*/_react["default"].createElement(_index.Popover, (0, _extends2["default"])({
|
|
43
|
-
defaultIsOpen: true
|
|
44
|
-
}, props), /*#__PURE__*/_react["default"].createElement(_react2.Flex, {
|
|
45
|
-
justifyContent: "center",
|
|
46
|
-
alignItems: "center"
|
|
47
|
-
}, /*#__PURE__*/_react["default"].createElement(_index.PopoverTrigger, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "Trigger"))), /*#__PURE__*/_react["default"].createElement(_index.PopoverContent, {
|
|
48
|
-
header: "Confirmation!"
|
|
49
|
-
}, "Are you sure you want to have that milkshake?"));
|
|
50
|
-
};
|
|
51
|
-
var Variant = exports.Variant = (0, _bind["default"])(OverviewTemplate).call(OverviewTemplate, {});
|
|
52
|
-
Variant.argTypes = _objectSpread({}, (0, _createControl.createSelectControl)('variant', ['light', 'dark']));
|
|
53
|
-
Variant.args = {
|
|
54
|
-
variant: 'light'
|
|
55
|
-
};
|
|
56
|
-
var Placement = exports.Placement = (0, _bind["default"])(OverviewTemplate).call(OverviewTemplate, {});
|
|
57
|
-
Placement.argTypes = _objectSpread(_objectSpread({}, (0, _createControl.createSelectControl)('placement', ['top', 'right', 'bottom', 'left', 'auto', 'auto-start', 'auto-end', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'right-end', 'left-start', 'left-end'])), (0, _disableArgs["default"])('variant'));
|
|
58
|
-
Placement.args = {
|
|
59
|
-
placement: 'bottom'
|
|
60
|
-
};
|
|
61
|
-
var NoHeaderTemplate = function NoHeaderTemplate(props) {
|
|
62
|
-
return /*#__PURE__*/_react["default"].createElement(_index.Popover, (0, _extends2["default"])({
|
|
63
|
-
defaultIsOpen: true
|
|
64
|
-
}, props), /*#__PURE__*/_react["default"].createElement(_index.PopoverTrigger, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "Trigger")), /*#__PURE__*/_react["default"].createElement(_index.PopoverContent, null, "Are you sure you want to have that milkshake?"));
|
|
65
|
-
};
|
|
66
|
-
var NoHeader = exports.NoHeader = (0, _bind["default"])(NoHeaderTemplate).call(NoHeaderTemplate, {});
|
|
67
|
-
NoHeader.argTypes = _objectSpread({}, (0, _disableArgs["default"])(['variant', 'placement']));
|
|
68
|
-
var NoCloseButtonTemplate = function NoCloseButtonTemplate(props) {
|
|
69
|
-
return /*#__PURE__*/_react["default"].createElement(_index.Popover, (0, _extends2["default"])({
|
|
70
|
-
defaultIsOpen: true
|
|
71
|
-
}, props), /*#__PURE__*/_react["default"].createElement(_index.PopoverTrigger, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "Trigger")), /*#__PURE__*/_react["default"].createElement(_index.PopoverContent, {
|
|
72
|
-
hideCloseButton: true,
|
|
73
|
-
header: "Confirmation!"
|
|
74
|
-
}, "Are you sure you want to have that milkshake?"));
|
|
75
|
-
};
|
|
76
|
-
var NoCloseButton = exports.NoCloseButton = (0, _bind["default"])(NoCloseButtonTemplate).call(NoCloseButtonTemplate, {});
|
|
77
|
-
NoCloseButton.argTypes = _objectSpread({}, (0, _disableArgs["default"])(['variant', 'placement']));
|
|
78
|
-
var NoArrowTemplate = function NoArrowTemplate(props) {
|
|
79
|
-
return /*#__PURE__*/_react["default"].createElement(_index.Popover, (0, _extends2["default"])({
|
|
80
|
-
defaultIsOpen: true
|
|
81
|
-
}, props), /*#__PURE__*/_react["default"].createElement(_index.PopoverTrigger, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null, "Trigger")), /*#__PURE__*/_react["default"].createElement(_index.PopoverContent, {
|
|
82
|
-
hideArrow: true,
|
|
83
|
-
header: "Confirmation!"
|
|
84
|
-
}, "Are you sure you want to have that milkshake?"));
|
|
85
|
-
};
|
|
86
|
-
var NoArrow = exports.NoArrow = (0, _bind["default"])(NoArrowTemplate).call(NoArrowTemplate, {});
|
|
87
|
-
NoArrow.argTypes = _objectSpread({}, (0, _disableArgs["default"])(['variant', 'placement']));
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
-
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
5
|
-
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
7
|
-
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
8
|
-
_Object$defineProperty(exports, "__esModule", {
|
|
9
|
-
value: true
|
|
10
|
-
});
|
|
11
|
-
exports["default"] = void 0;
|
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
13
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
14
|
-
var _react2 = require("@chakra-ui/react");
|
|
15
|
-
var _popoverArrow = _interopRequireDefault(require("./styles/popover-arrow"));
|
|
16
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
|
-
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; }
|
|
18
|
-
var PopoverArrow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
19
|
-
return /*#__PURE__*/_react["default"].createElement(_react2.PopoverArrow, (0, _extends2["default"])({
|
|
20
|
-
ref: ref
|
|
21
|
-
}, props, (0, _popoverArrow["default"])(props)));
|
|
22
|
-
});
|
|
23
|
-
var _default = exports["default"] = PopoverArrow;
|