@skyscanner/backpack-web 39.0.0 → 40.0.2
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/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts +15 -0
- package/bpk-component-bottom-sheet/src/BpkBottomSheet.js +44 -2
- package/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css +1 -1
- package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css +1 -1
- package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.module.css +1 -1
- package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.js +6 -0
- package/package.json +1 -1
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
import type { SyntheticEvent, ReactNode } from 'react';
|
|
2
|
+
export declare const PADDING_TYPE: {
|
|
3
|
+
none: string;
|
|
4
|
+
base: string;
|
|
5
|
+
lg: string;
|
|
6
|
+
xxl: string;
|
|
7
|
+
xxxl: string;
|
|
8
|
+
};
|
|
9
|
+
export type PaddingType = (typeof PADDING_TYPE)[keyof typeof PADDING_TYPE];
|
|
10
|
+
export type PaddingStyles = {
|
|
11
|
+
top?: PaddingType;
|
|
12
|
+
start?: PaddingType;
|
|
13
|
+
end?: PaddingType;
|
|
14
|
+
bottom?: PaddingType;
|
|
15
|
+
};
|
|
2
16
|
interface CommonProps {
|
|
3
17
|
actionText?: string;
|
|
4
18
|
children: ReactNode;
|
|
@@ -13,6 +27,7 @@ interface CommonProps {
|
|
|
13
27
|
title?: string;
|
|
14
28
|
wide?: boolean;
|
|
15
29
|
isOpen: boolean;
|
|
30
|
+
paddingStyles?: PaddingStyles;
|
|
16
31
|
}
|
|
17
32
|
export type Props = CommonProps & ({
|
|
18
33
|
ariaLabelledby: string;
|
|
@@ -28,6 +28,40 @@ import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
|
|
|
28
28
|
import STYLES from "./BpkBottomSheet.module.css";
|
|
29
29
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
30
|
const getClassName = cssModules(STYLES);
|
|
31
|
+
export const PADDING_TYPE = {
|
|
32
|
+
none: 'none',
|
|
33
|
+
base: 'base',
|
|
34
|
+
lg: 'lg',
|
|
35
|
+
xxl: 'xxl',
|
|
36
|
+
xxxl: 'xxxl'
|
|
37
|
+
};
|
|
38
|
+
const getContentStyles = paddingStyles => {
|
|
39
|
+
const {
|
|
40
|
+
bottom = PADDING_TYPE.lg,
|
|
41
|
+
end,
|
|
42
|
+
start = PADDING_TYPE.lg,
|
|
43
|
+
top = PADDING_TYPE.none
|
|
44
|
+
} = paddingStyles;
|
|
45
|
+
const classNames = ['bpk-bottom-sheet--content'];
|
|
46
|
+
|
|
47
|
+
// Add padding classes for each side if not 'none'
|
|
48
|
+
if (top !== PADDING_TYPE.none) {
|
|
49
|
+
classNames.push(`bpk-bottom-sheet--padding-${top}-top`);
|
|
50
|
+
}
|
|
51
|
+
if (bottom !== PADDING_TYPE.none) {
|
|
52
|
+
classNames.push(`bpk-bottom-sheet--padding-${bottom}-bottom`);
|
|
53
|
+
}
|
|
54
|
+
if (start !== PADDING_TYPE.none) {
|
|
55
|
+
classNames.push(`bpk-bottom-sheet--padding-${start}-start`);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// Handle end padding: use explicit 'end' value or fallback to 'start' value
|
|
59
|
+
const endPadding = end || start;
|
|
60
|
+
if (endPadding && endPadding !== PADDING_TYPE.none) {
|
|
61
|
+
classNames.push(`bpk-bottom-sheet--padding-${endPadding}-end`);
|
|
62
|
+
}
|
|
63
|
+
return getClassName(...classNames);
|
|
64
|
+
};
|
|
31
65
|
const BpkBottomSheet = ({
|
|
32
66
|
actionText = '',
|
|
33
67
|
children,
|
|
@@ -39,6 +73,12 @@ const BpkBottomSheet = ({
|
|
|
39
73
|
isOpen,
|
|
40
74
|
onAction = () => null,
|
|
41
75
|
onClose,
|
|
76
|
+
paddingStyles = {
|
|
77
|
+
top: PADDING_TYPE.none,
|
|
78
|
+
start: PADDING_TYPE.lg,
|
|
79
|
+
end: PADDING_TYPE.lg,
|
|
80
|
+
bottom: PADDING_TYPE.lg
|
|
81
|
+
},
|
|
42
82
|
title = '',
|
|
43
83
|
wide = false,
|
|
44
84
|
...ariaProps
|
|
@@ -55,6 +95,7 @@ const BpkBottomSheet = ({
|
|
|
55
95
|
}, [isAboveMobile, onClose]);
|
|
56
96
|
const headingId = `bpk-bottom-sheet-heading-${id}`;
|
|
57
97
|
const dialogClassName = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
|
|
98
|
+
const contentStyle = getContentStyles(paddingStyles);
|
|
58
99
|
return /*#__PURE__*/_jsx(BpkDialogWrapper, {
|
|
59
100
|
...ariaProps,
|
|
60
101
|
dialogClassName: dialogClassName,
|
|
@@ -75,12 +116,13 @@ const BpkBottomSheet = ({
|
|
|
75
116
|
},
|
|
76
117
|
children: /*#__PURE__*/_jsxs(_Fragment, {
|
|
77
118
|
children: [/*#__PURE__*/_jsx("header", {
|
|
78
|
-
className: getClassName('bpk-bottom-sheet--header'),
|
|
119
|
+
className: getClassName('bpk-bottom-sheet--header-wrapper'),
|
|
79
120
|
children: /*#__PURE__*/_jsx(BpkNavigationBar, {
|
|
80
121
|
id: headingId,
|
|
81
122
|
title: title,
|
|
82
123
|
titleTextStyle: TEXT_STYLES.label1,
|
|
83
124
|
titleTagName: title ? 'h2' : 'span',
|
|
125
|
+
className: getClassName('bpk-bottom-sheet--header'),
|
|
84
126
|
leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
|
|
85
127
|
label: closeLabel,
|
|
86
128
|
onClick: handleClose
|
|
@@ -91,7 +133,7 @@ const BpkBottomSheet = ({
|
|
|
91
133
|
}) : null
|
|
92
134
|
})
|
|
93
135
|
}), /*#__PURE__*/_jsx("div", {
|
|
94
|
-
className:
|
|
136
|
+
className: contentStyle,
|
|
95
137
|
children: children
|
|
96
138
|
})]
|
|
97
139
|
})
|
|
@@ -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
|
-
.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden}}.bpk-bottom-sheet::-webkit-scrollbar{display:none}.bpk-bottom-sheet--appear{animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-fill-mode:forwards;animation-duration:200ms;animation-name:slide-down;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:
|
|
18
|
+
.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden}}.bpk-bottom-sheet::-webkit-scrollbar{display:none}.bpk-bottom-sheet--appear{animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-fill-mode:forwards;animation-duration:200ms;animation-name:slide-down;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:0;flex:1;overflow-y:auto}.bpk-bottom-sheet--padding-base-top{padding-top:1rem}.bpk-bottom-sheet--padding-base-bottom{padding-bottom:1rem}.bpk-bottom-sheet--padding-base-start{padding-inline-start:1rem}.bpk-bottom-sheet--padding-base-end{padding-inline-end:1rem}.bpk-bottom-sheet--padding-lg-top{padding-top:1.5rem}.bpk-bottom-sheet--padding-lg-bottom{padding-bottom:1.5rem}.bpk-bottom-sheet--padding-lg-start{padding-inline-start:1.5rem}.bpk-bottom-sheet--padding-lg-end{padding-inline-end:1.5rem}.bpk-bottom-sheet--padding-xxl-top{padding-top:2.5rem}.bpk-bottom-sheet--padding-xxl-bottom{padding-bottom:2.5rem}.bpk-bottom-sheet--padding-xxl-start{padding-inline-start:2.5rem}.bpk-bottom-sheet--padding-xxl-end{padding-inline-end:2.5rem}.bpk-bottom-sheet--padding-xxxl-top{padding-top:4rem}.bpk-bottom-sheet--padding-xxxl-bottom{padding-bottom:4rem}.bpk-bottom-sheet--padding-xxxl-start{padding-inline-start:4rem}.bpk-bottom-sheet--padding-xxxl-end{padding-inline-end:4rem}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}.bpk-bottom-sheet--header-wrapper{position:sticky;top:0;z-index:899;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-bottom-sheet--header{min-height:fit-content;padding:1.5rem}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}@keyframes slide-down{0%{transform:translateY(0%)}100%{transform:translateY(100%)}}
|
|
@@ -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
|
-
.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;
|
|
18
|
+
.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;overflow-x:hidden;box-sizing:border-box;gap:.25rem;margin-block:-1.5rem;padding-block:1.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}.bpk-card-list-row-rail__row__card:first-child,.bpk-card-list-row-rail__rail__card:first-child{padding-left:.25rem}html[dir=rtl] .bpk-card-list-row-rail__row__card:first-child,html[dir=rtl] .bpk-card-list-row-rail__rail__card:first-child{padding-right:.25rem;padding-left:.5rem}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}
|
package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.module.css
CHANGED
|
@@ -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
|
-
.bpk-card-list-row-rail{display:flex;flex-direction:column}.bpk-card-list-row-rail__accessory{width:100
|
|
18
|
+
.bpk-card-list-row-rail{display:flex;flex-direction:column}.bpk-card-list-row-rail__accessory{width:100%;margin-block-start:1.5rem}
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
import { useState } from 'react';
|
|
19
19
|
import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
20
20
|
import BpkBottomSheet from "../../../bpk-component-bottom-sheet";
|
|
21
|
+
import { PADDING_TYPE } from "../../../bpk-component-bottom-sheet/src/BpkBottomSheet";
|
|
21
22
|
import ViewIcon from "../../../bpk-component-icon/lg/view";
|
|
22
23
|
import InfoIcon from "../../../bpk-component-icon/sm/information-circle";
|
|
23
24
|
import BpkImage from "../../../bpk-component-image";
|
|
@@ -98,6 +99,11 @@ const BpkInsetBannerSponsored = ({
|
|
|
98
99
|
ariaLabel: callToAction?.bottomSheetA11yLabel || '',
|
|
99
100
|
closeOnScrimClick: true,
|
|
100
101
|
closeOnEscPressed: true,
|
|
102
|
+
paddingStyles: {
|
|
103
|
+
top: PADDING_TYPE.base,
|
|
104
|
+
start: PADDING_TYPE.lg,
|
|
105
|
+
bottom: PADDING_TYPE.base
|
|
106
|
+
},
|
|
101
107
|
children: callToAction.bottomSheetContent.map((item, index) => /*#__PURE__*/_jsxs("div", {
|
|
102
108
|
className: getClassName('bpk-inset-banner--bottom-sheet-content'),
|
|
103
109
|
children: [/*#__PURE__*/_jsx("div", {
|