@skyscanner/backpack-web 24.0.0 → 24.1.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.
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;display:block;z-index:1}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{top:0;right:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0 auto;padding:0;border:none;background:#
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;display:block;z-index:1}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{top:0;right:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0 auto;padding:0;border:none;background:#fff;overflow-y:scroll;inset-block-start:0;inset-inline:0;inset-inline-end:0;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;border-block-end:solid 0.0625rem #C2C9CD;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}
|
|
@@ -34,6 +34,35 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
34
34
|
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
35
35
|
|
|
36
36
|
const getClassName = (0, _bpkReactUtils.cssModules)(_BpKModalModule.default);
|
|
37
|
+
const Header = ({
|
|
38
|
+
closeLabel,
|
|
39
|
+
id,
|
|
40
|
+
onClose,
|
|
41
|
+
title
|
|
42
|
+
}) => {
|
|
43
|
+
if (title) {
|
|
44
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
45
|
+
id: id,
|
|
46
|
+
className: getClassName('bpk-modal__header-title'),
|
|
47
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
48
|
+
className: getClassName('bpk-modal__header-title-container'),
|
|
49
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
|
|
50
|
+
children: title
|
|
51
|
+
})
|
|
52
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
|
|
53
|
+
label: closeLabel,
|
|
54
|
+
onClick: onClose
|
|
55
|
+
})]
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
59
|
+
className: getClassName('bpk-modal__button-container'),
|
|
60
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
|
|
61
|
+
label: closeLabel,
|
|
62
|
+
onClick: onClose
|
|
63
|
+
})
|
|
64
|
+
});
|
|
65
|
+
};
|
|
37
66
|
const Heading = (0, _bpkReactUtils.withDefaultProps)(_bpkComponentText.default, {
|
|
38
67
|
textStyle: _bpkComponentText.TEXT_STYLES.label1,
|
|
39
68
|
tagName: 'h2',
|
|
@@ -61,6 +90,7 @@ const BpkModalV2 = props => {
|
|
|
61
90
|
noFullScreenOnMobile,
|
|
62
91
|
onClose,
|
|
63
92
|
padded,
|
|
93
|
+
showHeader = true,
|
|
64
94
|
title,
|
|
65
95
|
wide
|
|
66
96
|
} = props;
|
|
@@ -91,12 +121,6 @@ const BpkModalV2 = props => {
|
|
|
91
121
|
}, [id, isOpen]);
|
|
92
122
|
const classNames = getClassName('bpk-modal', fullScreenOnDesktop && 'bpk-modal--full-screen-desktop', noFullScreenOnMobile && 'bpk-modal--no-full-screen-mobile', wide && 'bpk-modal--wide');
|
|
93
123
|
const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded');
|
|
94
|
-
const closeButton = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
95
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
|
|
96
|
-
label: closeLabel,
|
|
97
|
-
onClick: onClose
|
|
98
|
-
})
|
|
99
|
-
});
|
|
100
124
|
return isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
101
125
|
className: getClassName('bpk-modal-wrapper', dialogSupported ? '' : 'bpk-modal-polyfill'),
|
|
102
126
|
children: [!dialogSupported && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -110,17 +134,11 @@ const BpkModalV2 = props => {
|
|
|
110
134
|
"aria-labelledby": ariaLabelledby,
|
|
111
135
|
"data-open": isOpen,
|
|
112
136
|
ref: ref,
|
|
113
|
-
children: [
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
children: title
|
|
119
|
-
})
|
|
120
|
-
}), closeButton]
|
|
121
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
122
|
-
className: getClassName('bpk-modal__button-container'),
|
|
123
|
-
children: closeButton
|
|
137
|
+
children: [showHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(Header, {
|
|
138
|
+
id: `${id}-title`,
|
|
139
|
+
title: title,
|
|
140
|
+
closeLabel: closeLabel,
|
|
141
|
+
onClose: onClose
|
|
124
142
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
125
143
|
className: contentClassNames,
|
|
126
144
|
children: children
|