@spothero/ui 17.2.4 → 18.0.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/Modal/Modal.js +6 -11
- package/dist/components/Modal/Modal.stories.js +52 -33
- package/dist/components/Modal/index.js +19 -0
- package/dist/components/Modal/styles/body.js +4 -4
- package/dist/components/Modal/styles/closeButton.js +3 -3
- package/dist/components/Modal/styles/dialog.js +2 -2
- package/dist/components/Modal/styles/header.js +3 -3
- package/dist/components/Modal/styles/index.js +1 -1
- package/dist/components/index.js +12 -8
- package/package.json +1 -1
|
@@ -18,29 +18,24 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
18
18
|
* @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
|
|
19
19
|
* @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
|
|
20
20
|
* @param {object} [contentStyling] - Style props to be passed into the modal content
|
|
21
|
-
* @param {
|
|
22
|
-
* @param {
|
|
23
|
-
* @param {React.ReactNode} [header] - The node for the header. Likely just a string.
|
|
24
|
-
* @param {React.ReactNode} [footer] - The node for the footer. Likely some control buttons.
|
|
21
|
+
* @param {boolean} [hasHeader] - Whether or not ModalHeader is a child. Will change the styling
|
|
22
|
+
* @param {boolean} [hasFooter] - Whether or not ModalFooter is a child. Will change the styling
|
|
25
23
|
* @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
|
|
26
24
|
* @returns {React.ReactElement} - The Modal component
|
|
27
25
|
*/
|
|
28
26
|
const Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
29
27
|
const {
|
|
30
|
-
header,
|
|
31
|
-
footer,
|
|
32
28
|
children,
|
|
33
|
-
hideCloseButton,
|
|
34
29
|
isMobile,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
hideCloseButton,
|
|
31
|
+
hasHeader,
|
|
32
|
+
contentStyling = {}
|
|
38
33
|
} = props;
|
|
39
34
|
return /*#__PURE__*/_react.default.createElement(_react2.Modal, (0, _extends2.default)({
|
|
40
35
|
motionPreset: isMobile ? 'slideInBottom' : 'scale'
|
|
41
36
|
}, props, {
|
|
42
37
|
ref: ref
|
|
43
|
-
}), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, contentStyling,
|
|
38
|
+
}), /*#__PURE__*/_react.default.createElement(_react2.ModalOverlay, null), /*#__PURE__*/_react.default.createElement(_react2.ModalContent, contentStyling, !hasHeader ? /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _header.default)(props)) : null, hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_react2.ModalCloseButton, null), children));
|
|
44
39
|
});
|
|
45
40
|
var _default = Modal;
|
|
46
41
|
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.TransactionalWithExpandingContent = exports.Transactional = exports.Passive = void 0;
|
|
7
|
+
exports.default = exports.TransactionalWithExpandingContent = exports.Transactional = exports.Passive = exports.NoHeader = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _react2 = require("@chakra-ui/react");
|
|
@@ -14,7 +14,7 @@ var _index = require("./index");
|
|
|
14
14
|
var _Button = _interopRequireDefault(require("../Button/Button"));
|
|
15
15
|
var _Text = _interopRequireDefault(require("../Text/Text"));
|
|
16
16
|
var _Heading = _interopRequireDefault(require("../Heading/Heading"));
|
|
17
|
-
var _Accordion =
|
|
17
|
+
var _Accordion = require("../Accordion");
|
|
18
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
19
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
20
20
|
var _default = {
|
|
@@ -27,17 +27,12 @@ var _default = {
|
|
|
27
27
|
},
|
|
28
28
|
argTypes: {
|
|
29
29
|
...(0, _createControl.createSelectControl)('size', ['sm', 'md', 'lg']),
|
|
30
|
-
...(0, _disableArgs.default)(['isOpen', 'onClose'
|
|
30
|
+
...(0, _disableArgs.default)(['isOpen', 'onClose']),
|
|
31
31
|
hideCloseButton: {
|
|
32
32
|
control: {
|
|
33
33
|
type: 'boolean'
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
|
-
header: {
|
|
37
|
-
control: {
|
|
38
|
-
type: 'text'
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
36
|
children: {
|
|
42
37
|
control: {
|
|
43
38
|
type: 'text'
|
|
@@ -57,21 +52,22 @@ const Transactional = props => {
|
|
|
57
52
|
});
|
|
58
53
|
return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
59
54
|
marginBottom: 2
|
|
60
|
-
}, "A \"Transactional\" modal just refers to one with a
|
|
55
|
+
}, "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, {
|
|
61
56
|
onClick: () => setOpen(true)
|
|
62
57
|
}, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
|
|
63
|
-
footer: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
64
|
-
onClick: () => setOpen(false),
|
|
65
|
-
variant: "secondary",
|
|
66
|
-
marginRight: 4
|
|
67
|
-
}, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
68
|
-
onClick: () => setOpen(false),
|
|
69
|
-
variant: "primary"
|
|
70
|
-
}, "Submit")),
|
|
71
58
|
isMobile: isMobile,
|
|
72
59
|
isOpen: open,
|
|
60
|
+
hasHeader: true,
|
|
61
|
+
hasFooter: true,
|
|
73
62
|
onClose: () => setOpen(false)
|
|
74
|
-
}), props.children)
|
|
63
|
+
}), /*#__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, {
|
|
64
|
+
onClick: () => setOpen(false),
|
|
65
|
+
variant: "secondary",
|
|
66
|
+
marginRight: 4
|
|
67
|
+
}, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
68
|
+
onClick: () => setOpen(false),
|
|
69
|
+
variant: "primary"
|
|
70
|
+
}, "Submit"))));
|
|
75
71
|
};
|
|
76
72
|
exports.Transactional = Transactional;
|
|
77
73
|
Transactional.args = {
|
|
@@ -86,17 +82,40 @@ const Passive = props => {
|
|
|
86
82
|
});
|
|
87
83
|
return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
88
84
|
marginBottom: 2
|
|
89
|
-
}, "A \"Passive\" modal just refers to one with no
|
|
85
|
+
}, "A \"Passive\" modal just refers to one with no footer."), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
90
86
|
onClick: () => setOpen(true)
|
|
91
87
|
}, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
|
|
92
88
|
isMobile: isMobile,
|
|
93
89
|
isOpen: open,
|
|
90
|
+
hasHeader: true,
|
|
91
|
+
hasFooter: false,
|
|
94
92
|
onClose: () => setOpen(false)
|
|
95
|
-
}), props.children));
|
|
93
|
+
}), /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, "Passive"), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children)));
|
|
96
94
|
};
|
|
97
95
|
exports.Passive = Passive;
|
|
98
96
|
Passive.args = {
|
|
99
|
-
|
|
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
|
+
const NoHeader = props => {
|
|
100
|
+
const [open, setOpen] = (0, _react.useState)(false);
|
|
101
|
+
const isMobile = (0, _react2.useBreakpointValue)({
|
|
102
|
+
base: true,
|
|
103
|
+
tablet: false
|
|
104
|
+
});
|
|
105
|
+
return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
106
|
+
marginBottom: 2
|
|
107
|
+
}, "A modal with no header"), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
108
|
+
onClick: () => setOpen(true)
|
|
109
|
+
}, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
|
|
110
|
+
isMobile: isMobile,
|
|
111
|
+
hasHeader: false,
|
|
112
|
+
hasFooter: false,
|
|
113
|
+
isOpen: open,
|
|
114
|
+
onClose: () => setOpen(false)
|
|
115
|
+
}), /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, props.children)));
|
|
116
|
+
};
|
|
117
|
+
exports.NoHeader = NoHeader;
|
|
118
|
+
NoHeader.args = {
|
|
100
119
|
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.'
|
|
101
120
|
};
|
|
102
121
|
const TransactionalWithExpandingContent = props => {
|
|
@@ -126,22 +145,16 @@ const TransactionalWithExpandingContent = props => {
|
|
|
126
145
|
}, "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, {
|
|
127
146
|
onClick: () => setOpen(true)
|
|
128
147
|
}, "Open Modal"), /*#__PURE__*/_react.default.createElement(_index.Modal, (0, _extends2.default)({}, props, {
|
|
129
|
-
header: "Transactional with Expanding Content",
|
|
130
|
-
footer: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
131
|
-
onClick: () => setOpen(false),
|
|
132
|
-
variant: "secondary",
|
|
133
|
-
marginRight: 4
|
|
134
|
-
}, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
135
|
-
variant: "primary"
|
|
136
|
-
}, "Submit")),
|
|
137
148
|
isMobile: isMobile,
|
|
149
|
+
hasHeader: true,
|
|
150
|
+
hasFooter: true,
|
|
138
151
|
isOpen: open,
|
|
139
152
|
onClose: () => setOpen(false)
|
|
140
|
-
}), /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
153
|
+
}), /*#__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, {
|
|
141
154
|
marginBottom: 2
|
|
142
155
|
}, "Try opening an Accordion when it is at the very bottom of the modal."), /*#__PURE__*/_react.default.createElement(_Text.default, {
|
|
143
156
|
marginBottom: 2
|
|
144
|
-
}, "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.
|
|
157
|
+
}, "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, {
|
|
145
158
|
onChange: handleAccordionChange,
|
|
146
159
|
allowToggle: true
|
|
147
160
|
}, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
|
|
@@ -158,9 +171,15 @@ const TransactionalWithExpandingContent = props => {
|
|
|
158
171
|
}, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
159
172
|
flex: "1",
|
|
160
173
|
textAlign: "left"
|
|
161
|
-
}, "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"))))))
|
|
174
|
+
}, "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, {
|
|
175
|
+
onClick: () => setOpen(false),
|
|
176
|
+
variant: "secondary",
|
|
177
|
+
marginRight: 4
|
|
178
|
+
}, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
179
|
+
variant: "primary"
|
|
180
|
+
}, "Submit"))));
|
|
162
181
|
};
|
|
163
182
|
exports.TransactionalWithExpandingContent = TransactionalWithExpandingContent;
|
|
164
183
|
TransactionalWithExpandingContent.argTypes = {
|
|
165
|
-
...(0, _disableArgs.default)(['children', '
|
|
184
|
+
...(0, _disableArgs.default)(['children', 'hasHeader', 'hasFooter'])
|
|
166
185
|
};
|
|
@@ -10,4 +10,23 @@ Object.defineProperty(exports, "Modal", {
|
|
|
10
10
|
return _Modal.default;
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
|
+
Object.defineProperty(exports, "ModalBody", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () {
|
|
16
|
+
return _react.ModalBody;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "ModalFooter", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return _react.ModalFooter;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, "ModalHeader", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () {
|
|
28
|
+
return _react.ModalHeader;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
var _react = require("@chakra-ui/react");
|
|
13
32
|
var _Modal = _interopRequireDefault(require("./Modal"));
|
|
@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _default = _ref => {
|
|
8
8
|
let {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
hasFooter,
|
|
10
|
+
hasHeader,
|
|
11
11
|
hideCloseButton
|
|
12
12
|
} = _ref;
|
|
13
|
-
const scrollingHeaderStyles =
|
|
13
|
+
const scrollingHeaderStyles = hasHeader || !hideCloseButton ? {
|
|
14
14
|
// The following adapted from https://lea.verou.me/2012/04/background-attachment-local/
|
|
15
15
|
background: 'linear-gradient(white 30%, white), linear-gradient(rgb(0 0 0 / 10%) 0%, white)',
|
|
16
16
|
backgroundRepeat: 'no-repeat',
|
|
@@ -19,7 +19,7 @@ var _default = _ref => {
|
|
|
19
19
|
backgroundAttachment: 'local, scroll'
|
|
20
20
|
} : {};
|
|
21
21
|
return {
|
|
22
|
-
borderBottomRadius:
|
|
22
|
+
borderBottomRadius: hasFooter ? null : 'md',
|
|
23
23
|
paddingX: 4,
|
|
24
24
|
paddingBottom: 4,
|
|
25
25
|
flex: 1,
|
|
@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _default = _ref => {
|
|
8
8
|
let {
|
|
9
|
-
|
|
9
|
+
hasHeader
|
|
10
10
|
} = _ref;
|
|
11
11
|
return {
|
|
12
12
|
position: 'absolute',
|
|
13
|
-
top:
|
|
14
|
-
insetEnd:
|
|
13
|
+
top: hasHeader ? 4 : 2,
|
|
14
|
+
insetEnd: hasHeader ? 4 : 2,
|
|
15
15
|
color: 'gray.dark',
|
|
16
16
|
borderRadius: 'sm',
|
|
17
17
|
width: 8,
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _default = _ref => {
|
|
8
8
|
let {
|
|
9
|
-
|
|
9
|
+
hasFooter
|
|
10
10
|
} = _ref;
|
|
11
11
|
return {
|
|
12
12
|
borderRadius: 'md',
|
|
@@ -19,7 +19,7 @@ var _default = _ref => {
|
|
|
19
19
|
marginY: 0,
|
|
20
20
|
zIndex: 'layer8',
|
|
21
21
|
boxShadow: 'lg',
|
|
22
|
-
paddingBottom:
|
|
22
|
+
paddingBottom: hasFooter ? 0 : 4
|
|
23
23
|
};
|
|
24
24
|
};
|
|
25
25
|
exports.default = _default;
|
|
@@ -7,14 +7,14 @@ exports.default = void 0;
|
|
|
7
7
|
var _default = _ref => {
|
|
8
8
|
let {
|
|
9
9
|
hideCloseButton,
|
|
10
|
-
|
|
10
|
+
hasHeader
|
|
11
11
|
} = _ref;
|
|
12
12
|
return {
|
|
13
|
-
padding: !hideCloseButton ||
|
|
13
|
+
padding: !hideCloseButton || hasHeader ? 4 : 2,
|
|
14
14
|
fontSize: 'xl',
|
|
15
15
|
fontWeight: 'semibold',
|
|
16
16
|
// If just close button, still have 'header' section at top
|
|
17
|
-
minHeight:
|
|
17
|
+
minHeight: hasHeader || hideCloseButton ? null : 12
|
|
18
18
|
};
|
|
19
19
|
};
|
|
20
20
|
exports.default = _default;
|
|
@@ -17,8 +17,8 @@ var _footer = _interopRequireDefault(require("./footer"));
|
|
|
17
17
|
const baseStyle = props => ({
|
|
18
18
|
overlay: _overlay.default,
|
|
19
19
|
dialogContainer: _dialogContainer.default,
|
|
20
|
-
dialog: (0, _dialog.default)(props),
|
|
21
20
|
header: (0, _header.default)(props),
|
|
21
|
+
dialog: (0, _dialog.default)(props),
|
|
22
22
|
closeButton: (0, _closeButton.default)(props),
|
|
23
23
|
body: (0, _body.default)(props),
|
|
24
24
|
footer: _footer.default
|
package/dist/components/index.js
CHANGED
|
@@ -34,7 +34,6 @@ var _exportNames = {
|
|
|
34
34
|
PopoverAnchor: true,
|
|
35
35
|
PopoverTrigger: true,
|
|
36
36
|
PopoverContent: true,
|
|
37
|
-
Modal: true,
|
|
38
37
|
Radio: true,
|
|
39
38
|
RadioGroup: true,
|
|
40
39
|
AutoSuggestSelect: true,
|
|
@@ -249,12 +248,6 @@ Object.defineProperty(exports, "Loader", {
|
|
|
249
248
|
return _Loader.default;
|
|
250
249
|
}
|
|
251
250
|
});
|
|
252
|
-
Object.defineProperty(exports, "Modal", {
|
|
253
|
-
enumerable: true,
|
|
254
|
-
get: function () {
|
|
255
|
-
return _Modal.Modal;
|
|
256
|
-
}
|
|
257
|
-
});
|
|
258
251
|
Object.defineProperty(exports, "Popover", {
|
|
259
252
|
enumerable: true,
|
|
260
253
|
get: function () {
|
|
@@ -459,6 +452,18 @@ Object.keys(_Table).forEach(function (key) {
|
|
|
459
452
|
}
|
|
460
453
|
});
|
|
461
454
|
});
|
|
455
|
+
var _Modal = require("./Modal");
|
|
456
|
+
Object.keys(_Modal).forEach(function (key) {
|
|
457
|
+
if (key === "default" || key === "__esModule") return;
|
|
458
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
459
|
+
if (key in exports && exports[key] === _Modal[key]) return;
|
|
460
|
+
Object.defineProperty(exports, key, {
|
|
461
|
+
enumerable: true,
|
|
462
|
+
get: function () {
|
|
463
|
+
return _Modal[key];
|
|
464
|
+
}
|
|
465
|
+
});
|
|
466
|
+
});
|
|
462
467
|
var _Button = require("./Button");
|
|
463
468
|
Object.keys(_Button).forEach(function (key) {
|
|
464
469
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -515,7 +520,6 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
|
|
|
515
520
|
var _Input = _interopRequireDefault(require("./Input"));
|
|
516
521
|
var _Divider = _interopRequireDefault(require("./Divider/Divider"));
|
|
517
522
|
var _Popover = require("./Popover");
|
|
518
|
-
var _Modal = require("./Modal");
|
|
519
523
|
var _Radio = require("./Radio");
|
|
520
524
|
var _AutoSuggestSelect = require("./AutoSuggestSelect");
|
|
521
525
|
var _Badge = _interopRequireDefault(require("./Badge/Badge"));
|