@skyscanner/backpack-web 34.3.0 → 34.4.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/bpk-component-breakpoint/src/BpkBreakpoint.js +13 -7
- package/bpk-component-card-button/src/BpkSaveButton.js +20 -24
- package/bpk-component-card-button/src/BpkSaveButton.module.css +1 -1
- package/bpk-component-close-button/src/BpkCloseButton.module.css +1 -1
- package/bpk-component-description-list/index.d.ts +4 -0
- package/bpk-component-description-list/src/BpkDescriptionDetails.d.ts +8 -0
- package/bpk-component-description-list/src/BpkDescriptionDetails.js +14 -2
- package/bpk-component-description-list/src/BpkDescriptionList.d.ts +8 -0
- package/bpk-component-description-list/src/BpkDescriptionList.js +14 -2
- package/bpk-component-description-list/src/BpkDescriptionTerm.d.ts +8 -0
- package/bpk-component-description-list/src/BpkDescriptionTerm.js +14 -2
- package/bpk-component-dialog/src/common-types.d.ts +1 -1
- package/bpk-component-floating-notification/src/BpkFloatingNotification.js +12 -9
- package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css +1 -1
- package/bpk-component-icon/src/classNameModifierHOCFactory.js +0 -3
- package/bpk-component-modal/src/BpkModalInner.js +6 -15
- package/bpk-component-modal/src/BpkModalInner.module.css +1 -1
- package/bpk-component-modal/src/BpkModalV2/BpKModal.module.css +1 -1
- package/bpk-component-modal/src/BpkModalV2/BpkModal.js +5 -11
- package/bpk-component-nudger/src/BpkConfigurableNudger.js +0 -1
- package/bpk-component-pagination/src/BpkPaginationPage.js +6 -9
- package/bpk-component-pagination/src/BpkPaginationPage.module.css +1 -1
- package/bpk-component-popover/src/BpkPopover.d.ts +13 -3
- package/bpk-component-popover/src/BpkPopover.js +12 -3
- package/bpk-component-popover/src/BpkPopover.module.css +1 -1
- package/bpk-component-text/src/BpkText.module.css +1 -1
- package/bpk-stylesheets/larken.css +1 -1
- package/bpk-stylesheets/larken.scss +90 -0
- package/package.json +2 -2
- package/bpk-component-description-list/src/ComponentFactory.js +0 -54
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import { useEffect, useState } from 'react';
|
|
19
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
20
20
|
import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
21
21
|
import useMediaQuery from "./useMediaQuery";
|
|
22
22
|
const BREAKPOINTS = {
|
|
@@ -31,6 +31,14 @@ const BREAKPOINTS = {
|
|
|
31
31
|
ABOVE_DESKTOP: breakpoints.breakpointQueryAboveDesktop,
|
|
32
32
|
DESKTOP_ONLY: breakpoints.breakpointQueryDesktopOnly
|
|
33
33
|
};
|
|
34
|
+
const useLegacyWarning = (query, legacy, isClient) => useMemo(() => {
|
|
35
|
+
if (isClient) {
|
|
36
|
+
// @ts-expect-error invariant check. query: string matching limited BREAKPOINTS string values
|
|
37
|
+
if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
|
|
38
|
+
console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}, [isClient, legacy, query]);
|
|
34
42
|
const BpkBreakpoint = ({
|
|
35
43
|
children,
|
|
36
44
|
legacy = false,
|
|
@@ -42,16 +50,14 @@ const BpkBreakpoint = ({
|
|
|
42
50
|
* Consumers of BpkBreakpoint have become reliant on this behaviour particularly when using BpkBreakpoint within a SSR'd application.
|
|
43
51
|
* This shouldn't be removed without a breaking change & understanding how to migrate consumers away from this reliance.
|
|
44
52
|
*/
|
|
45
|
-
const [
|
|
53
|
+
const [, updateState] = useState({});
|
|
46
54
|
useEffect(() => {
|
|
47
|
-
|
|
55
|
+
updateState({}); // force re-render when on client
|
|
48
56
|
}, []);
|
|
49
57
|
const matches = useMediaQuery(query, matchSSR);
|
|
58
|
+
const isClient = typeof window !== 'undefined';
|
|
59
|
+
useLegacyWarning(query, legacy, isClient);
|
|
50
60
|
if (isClient) {
|
|
51
|
-
// @ts-expect-error invariant check. query: string matching limited BREAKPOINTS string values
|
|
52
|
-
if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
|
|
53
|
-
console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
|
|
54
|
-
}
|
|
55
61
|
if (typeof children === 'function') {
|
|
56
62
|
return children(matches);
|
|
57
63
|
}
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import { useState } from 'react';
|
|
20
|
-
import {
|
|
21
|
-
import { withLargeButtonAlignment } from "../../bpk-component-icon";
|
|
20
|
+
import { colorBlack, colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
22
21
|
import BpkHeartIcon from "../../bpk-component-icon/lg/heart";
|
|
23
22
|
import BpkHeartOutlineIcon from "../../bpk-component-icon/lg/heart--outline";
|
|
24
23
|
import BpkHeartIconSm from "../../bpk-component-icon/sm/heart";
|
|
@@ -36,10 +35,10 @@ export const STYLE_TYPES = {
|
|
|
36
35
|
onDark: 'onDark'
|
|
37
36
|
};
|
|
38
37
|
const getClassName = cssModules(STYLES);
|
|
39
|
-
const AlignedHeartIcon =
|
|
40
|
-
const AlignedHeartOutlineIcon =
|
|
41
|
-
const AlignedHeartIconSm =
|
|
42
|
-
const AlignedHeartOutlineIconSm =
|
|
38
|
+
const AlignedHeartIcon = BpkHeartIcon;
|
|
39
|
+
const AlignedHeartOutlineIcon = BpkHeartOutlineIcon;
|
|
40
|
+
const AlignedHeartIconSm = BpkHeartIconSm;
|
|
41
|
+
const AlignedHeartOutlineIconSm = BpkHeartOutlineIconSm;
|
|
43
42
|
const BpkSaveButton = ({
|
|
44
43
|
accessibilityLabel,
|
|
45
44
|
checked,
|
|
@@ -47,33 +46,30 @@ const BpkSaveButton = ({
|
|
|
47
46
|
size = SIZE_TYPES.default,
|
|
48
47
|
style = STYLE_TYPES.default
|
|
49
48
|
}) => {
|
|
50
|
-
const [
|
|
49
|
+
const [shouldPlayAnim, setPlayAnim] = useState(false);
|
|
51
50
|
const smallSize = size === SIZE_TYPES.small;
|
|
52
51
|
const HeartIcon = smallSize ? AlignedHeartIconSm : AlignedHeartIcon;
|
|
53
52
|
const HeartOutLineIcon = smallSize ? AlignedHeartOutlineIconSm : AlignedHeartOutlineIcon;
|
|
54
|
-
return /*#__PURE__*/_jsxs(
|
|
55
|
-
"
|
|
56
|
-
|
|
57
|
-
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
|
|
58
|
-
,
|
|
53
|
+
return /*#__PURE__*/_jsxs("button", {
|
|
54
|
+
type: "button",
|
|
55
|
+
"aria-label": accessibilityLabel,
|
|
59
56
|
className: getClassName('bpk-save-button', smallSize && 'bpk-save-button__small', `bpk-save-button__${style}`),
|
|
60
57
|
onClick: e => {
|
|
61
58
|
onCheckedChange(e);
|
|
62
59
|
if (!checked) {
|
|
63
|
-
|
|
60
|
+
setPlayAnim(true);
|
|
64
61
|
}
|
|
65
62
|
},
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
, {
|
|
71
|
-
className: getClassName(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartOutlineIcon', `bpk-save-button__heartOutlineIcon--${checked ? 'hide' : 'show'}`, `bpk-save-button__heartOutlineIcon--${style}`)
|
|
63
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
64
|
+
className: getClassName(`bpk-save-button__heartIcon`, checked && shouldPlayAnim && `bpk-save-button__heartIcon--clicked`, `bpk-save-button__heartIcon--${style}`),
|
|
65
|
+
"data-show": checked,
|
|
66
|
+
children: /*#__PURE__*/_jsx(HeartIcon, {})
|
|
67
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
68
|
+
className: getClassName(`bpk-save-button__heartOutlineIcon`),
|
|
69
|
+
"data-show": !checked,
|
|
70
|
+
children: /*#__PURE__*/_jsx(HeartOutLineIcon, {
|
|
71
|
+
fill: style === STYLE_TYPES.onDark ? colorWhite : colorBlack
|
|
72
|
+
})
|
|
77
73
|
})]
|
|
78
74
|
});
|
|
79
75
|
};
|
|
@@ -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 heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border-radius:50%;background-color:rgba(0,0,0,0)}.bpk-
|
|
18
|
+
@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border:0;border-radius:50%;background-color:rgba(0,0,0,0)}.bpk-save-button__icon{position:absolute;top:50%;left:50%;display:flex;transform:translate(-50%, -50%)}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1;composes:bpk-save-button__icon}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon[data-show=false]{opacity:0}.bpk-save-button__heartIcon{z-index:2;opacity:0;composes:bpk-save-button__icon}.bpk-save-button__heartIcon[data-show=true]{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}.bpk-save-button__heartIcon--clicked{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--onDark{fill:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}.bpk-save-button__heartIcon--default,.bpk-save-button__heartIcon--contained{fill:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}
|
|
@@ -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-close-button{width:1.5rem;height:1.5rem;
|
|
18
|
+
.bpk-close-button{width:1.5rem;height:1.5rem;padding:0;border:0;background-color:rgba(0,0,0,0);font-size:1.5rem;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-close-button__default{color:#161616;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button__default:active{color:#161616}.bpk-close-button__onDark{color:#fff;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-close-button__onDark:active{color:#fff}.bpk-close-button-icon{fill:currentcolor}
|
|
@@ -16,5 +16,17 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import
|
|
20
|
-
|
|
19
|
+
import { cssModules } from "../../bpk-react-utils";
|
|
20
|
+
import STYLES from "./BpkDescriptionList.module.css";
|
|
21
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
|
+
const getClassName = cssModules(STYLES);
|
|
23
|
+
export default (({
|
|
24
|
+
children,
|
|
25
|
+
className,
|
|
26
|
+
...rest
|
|
27
|
+
}) => /*#__PURE__*/_jsx("dd", {
|
|
28
|
+
className: [getClassName('bpk-description-list__details'), className].filter(x => x) // inline drops the className if undefined
|
|
29
|
+
.join(' '),
|
|
30
|
+
...rest,
|
|
31
|
+
children: children
|
|
32
|
+
}));
|
|
@@ -16,5 +16,17 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import
|
|
20
|
-
|
|
19
|
+
import { cssModules } from "../../bpk-react-utils";
|
|
20
|
+
import STYLES from "./BpkDescriptionList.module.css";
|
|
21
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
|
+
const getClassName = cssModules(STYLES);
|
|
23
|
+
export default (({
|
|
24
|
+
children,
|
|
25
|
+
className,
|
|
26
|
+
...rest
|
|
27
|
+
}) => /*#__PURE__*/_jsx("dl", {
|
|
28
|
+
className: [getClassName('bpk-description-list'), className].filter(x => x) // inline drops the className if undefined
|
|
29
|
+
.join(' '),
|
|
30
|
+
...rest,
|
|
31
|
+
children: children
|
|
32
|
+
}));
|
|
@@ -16,5 +16,17 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import
|
|
20
|
-
|
|
19
|
+
import { cssModules } from "../../bpk-react-utils";
|
|
20
|
+
import STYLES from "./BpkDescriptionList.module.css";
|
|
21
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
|
+
const getClassName = cssModules(STYLES);
|
|
23
|
+
export default (({
|
|
24
|
+
children,
|
|
25
|
+
className,
|
|
26
|
+
...rest
|
|
27
|
+
}) => /*#__PURE__*/_jsx("dt", {
|
|
28
|
+
className: [getClassName('bpk-description-list__term'), className].filter(x => x) // inline drops the className if undefined
|
|
29
|
+
.join(' '),
|
|
30
|
+
...rest,
|
|
31
|
+
children: children
|
|
32
|
+
}));
|
|
@@ -6,7 +6,6 @@ export declare const HEADER_ICON_TYPES: {
|
|
|
6
6
|
};
|
|
7
7
|
export type DialogInnerProps = {
|
|
8
8
|
ariaLabel: string;
|
|
9
|
-
ariaModal: boolean;
|
|
10
9
|
id: string;
|
|
11
10
|
children: ReactNode;
|
|
12
11
|
dialogRef: (ref: HTMLElement | null | undefined) => void;
|
|
@@ -17,6 +16,7 @@ export type DialogInnerProps = {
|
|
|
17
16
|
* The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".
|
|
18
17
|
*/
|
|
19
18
|
getApplicationElement: () => HTMLElement | null;
|
|
19
|
+
ariaModal?: boolean;
|
|
20
20
|
className?: string;
|
|
21
21
|
contentClassName?: string;
|
|
22
22
|
flare?: boolean;
|
|
@@ -70,20 +70,23 @@ const BpkFloatingNotification = props => {
|
|
|
70
70
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
71
71
|
"aria-hidden": true
|
|
72
72
|
})
|
|
73
|
-
}), /*#__PURE__*/_jsx(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
74
|
+
className: getClassName('bpk-floating-notification__text'),
|
|
75
|
+
children: /*#__PURE__*/_jsx(BpkText, {
|
|
76
|
+
tagName: "p",
|
|
77
|
+
textStyle: TEXT_STYLES.bodyDefault,
|
|
78
78
|
children: text
|
|
79
79
|
})
|
|
80
80
|
}), /*#__PURE__*/_jsx(BpkAriaLive, {
|
|
81
81
|
"aria-hidden": true,
|
|
82
82
|
children: text
|
|
83
|
-
}), ctaText && /*#__PURE__*/_jsx(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
}), ctaText && /*#__PURE__*/_jsx("div", {
|
|
84
|
+
className: getClassName('bpk-floating-notification__cta'),
|
|
85
|
+
children: /*#__PURE__*/_jsx(BpkButtonV2, {
|
|
86
|
+
type: BUTTON_TYPES.linkOnDark,
|
|
87
|
+
onClick: onClick,
|
|
88
|
+
children: ctaText
|
|
89
|
+
})
|
|
87
90
|
})]
|
|
88
91
|
})
|
|
89
92
|
});
|
|
@@ -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-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}
|
|
18
|
+
.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}
|
|
@@ -29,9 +29,6 @@ export default ((displayName, classNamesToAdd = []) => ComposedComponent => {
|
|
|
29
29
|
classNames.push(className);
|
|
30
30
|
}
|
|
31
31
|
classNames = classNamesToAdd.length ? classNames.concat(classNamesToAdd) : classNames;
|
|
32
|
-
|
|
33
|
-
// TODO: className to be removed
|
|
34
|
-
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
|
|
35
32
|
return /*#__PURE__*/_jsx(ComposedComponent, {
|
|
36
33
|
className: classNames.join(' '),
|
|
37
34
|
...rest
|
|
@@ -89,10 +89,7 @@ const BpkModalInner = ({
|
|
|
89
89
|
className: getClassName('bpk-modal__header'),
|
|
90
90
|
children: /*#__PURE__*/_jsx(BpkNavigationBar, {
|
|
91
91
|
barStyle: modalStyle === MODAL_STYLING.surfaceContrast ? BAR_STYLES.onDark : BAR_STYLES.default,
|
|
92
|
-
id: headingId
|
|
93
|
-
// TODO: className to be removed
|
|
94
|
-
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
|
|
95
|
-
,
|
|
92
|
+
id: headingId,
|
|
96
93
|
className: navigationStyles.join(' '),
|
|
97
94
|
title: /*#__PURE__*/_jsx("h2", {
|
|
98
95
|
id: headingId,
|
|
@@ -100,20 +97,14 @@ const BpkModalInner = ({
|
|
|
100
97
|
children: title
|
|
101
98
|
}),
|
|
102
99
|
leadingButton: accessoryViewFinal,
|
|
103
|
-
trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink
|
|
104
|
-
// TODO: className to be removed
|
|
105
|
-
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
|
|
106
|
-
, {
|
|
107
|
-
className: [getClassName('bpk-modal__close-button'), getClassName(`bpk-modal__close-button-style--${modalStyle}`)].join(' '),
|
|
100
|
+
trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
|
|
108
101
|
onClick: onClose,
|
|
102
|
+
onDark: modalStyle === MODAL_STYLING.surfaceContrast,
|
|
109
103
|
children: closeText
|
|
110
|
-
}) : /*#__PURE__*/_jsx(BpkCloseButton
|
|
111
|
-
// TODO: className to be removed
|
|
112
|
-
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
|
|
113
|
-
, {
|
|
114
|
-
className: [getClassName('bpk-modal__close-button'), getClassName(`bpk-modal__close-button-style--${modalStyle}`)].join(' '),
|
|
104
|
+
}) : /*#__PURE__*/_jsx(BpkCloseButton, {
|
|
115
105
|
label: closeLabel,
|
|
116
|
-
onClick: onClose
|
|
106
|
+
onClick: onClose,
|
|
107
|
+
onDark: modalStyle === MODAL_STYLING.surfaceContrast
|
|
117
108
|
})
|
|
118
109
|
})
|
|
119
110
|
}), /*#__PURE__*/_jsx("div", {
|
|
@@ -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-modal{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;-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-modal--full-screen-mobile{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}.bpk-modal--full-screen{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}@media(min-width: 32.0625rem){.bpk-modal--wide{max-width:64rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__modal-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__header{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-modal__navigation{display:flex;justify-content:space-between}.bpk-modal__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__close-button{position:relative;right:auto
|
|
18
|
+
.bpk-modal{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;-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-modal--full-screen-mobile{display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}}.bpk-modal--full-screen{max-width:none;display:flex;margin:0;flex-direction:column;border-radius:0;box-shadow:none}@media(min-width: 32.0625rem){.bpk-modal--wide{max-width:64rem}}.bpk-modal--appear{transform:scale(0.9);opacity:0}.bpk-modal--appear-active{transform:scale(1);opacity:1}.bpk-modal__modal-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__header{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-modal__navigation{display:flex;justify-content:space-between}.bpk-modal__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__close-button{position:relative;right:auto}html[dir=rtl] .bpk-modal__close-button{left:auto}.bpk-modal__close-button-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-no-touch-support .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-modal__close-button-style--surface-contrast:hover:not(:active):not(:disabled){color:#fff}.bpk-modal__accessory-view{position:relative;left:auto;margin-right:1rem}html[dir=rtl] .bpk-modal__accessory-view{right:auto;margin-left:1rem}.bpk-modal__content{flex:1;overflow-y:auto}.bpk-modal__content--padded{padding:1rem}
|
|
@@ -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-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.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{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem;max-width:100%}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@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,.7);animation:bpk-modal-scrim 200ms ease-in-out;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;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-
|
|
18
|
+
@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.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{width:100%;max-width:none;height:100%;max-height:100%;padding:0;border:none;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;border-radius:.75rem}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem;max-width:100%}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@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,.7);animation:bpk-modal-scrim 200ms ease-in-out;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;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.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__button-container-style--surface-contrast{background-color:#05203c;color:#fff}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}.bpk-modal__container--surface-contrast{background-color:#05203c;color:#fff}
|
|
@@ -42,23 +42,17 @@ const Header = ({
|
|
|
42
42
|
children: /*#__PURE__*/_jsx(Heading, {
|
|
43
43
|
children: title
|
|
44
44
|
})
|
|
45
|
-
}), /*#__PURE__*/_jsx(BpkCloseButton
|
|
46
|
-
// TODO: className to be removed
|
|
47
|
-
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
|
|
48
|
-
, {
|
|
49
|
-
className: getClassName(`bpk-modal__close-button-style--${modalStyle}`),
|
|
45
|
+
}), /*#__PURE__*/_jsx(BpkCloseButton, {
|
|
50
46
|
label: closeLabel,
|
|
51
|
-
onClick: onClose
|
|
47
|
+
onClick: onClose,
|
|
48
|
+
onDark: modalStyle === MODAL_STYLING.surfaceContrast
|
|
52
49
|
})]
|
|
53
50
|
});
|
|
54
51
|
}
|
|
55
52
|
return /*#__PURE__*/_jsx("div", {
|
|
56
53
|
className: [getClassName('bpk-modal__button-container'), getClassName(`bpk-modal__button-container-style--${modalStyle}`)].join(' '),
|
|
57
|
-
children: /*#__PURE__*/_jsx(BpkCloseButton
|
|
58
|
-
|
|
59
|
-
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
|
|
60
|
-
, {
|
|
61
|
-
className: getClassName(`bpk-modal__close-button-style--${modalStyle}`),
|
|
54
|
+
children: /*#__PURE__*/_jsx(BpkCloseButton, {
|
|
55
|
+
onDark: modalStyle === MODAL_STYLING.surfaceContrast,
|
|
62
56
|
label: closeLabel,
|
|
63
57
|
onClick: onClose
|
|
64
58
|
})
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import PropTypes from 'prop-types';
|
|
20
|
-
import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
|
|
21
20
|
import { cssModules } from "../../bpk-react-utils";
|
|
22
21
|
import STYLES from "./BpkPaginationPage.module.css";
|
|
23
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -30,15 +29,13 @@ const BpkPaginationPage = props => {
|
|
|
30
29
|
page,
|
|
31
30
|
pageLabel
|
|
32
31
|
} = props;
|
|
33
|
-
if (isSelected) {
|
|
34
|
-
|
|
32
|
+
if (!isSelected) {
|
|
33
|
+
// reverse class type so we can always load `buttons.bpk-button` as a base style for overridding.
|
|
34
|
+
classNames.push(getClassName('bpk-pagination-page--not-selected'));
|
|
35
35
|
}
|
|
36
|
-
return /*#__PURE__*/_jsx(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
// TODO: className to be removed
|
|
40
|
-
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
|
|
41
|
-
,
|
|
36
|
+
return /*#__PURE__*/_jsx("button", {
|
|
37
|
+
onClick: onSelect,
|
|
38
|
+
type: "button",
|
|
42
39
|
className: classNames.join(' '),
|
|
43
40
|
"aria-label": pageLabel(page, isSelected),
|
|
44
41
|
"aria-current": isSelected,
|
|
@@ -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-pagination-page{min-
|
|
18
|
+
.bpk-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-pagination-page:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}
|
|
@@ -4,9 +4,16 @@ declare const EVENT_SOURCES: {
|
|
|
4
4
|
CLOSE_BUTTON: string;
|
|
5
5
|
CLOSE_LINK: string;
|
|
6
6
|
};
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
type CloseButtonProps = ({
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated close button text is deprecated. Instead, please use `closeButtonIcon`, or you may opt not to render a close button at all.
|
|
10
|
+
*/
|
|
9
11
|
closeButtonText: string;
|
|
12
|
+
} | {
|
|
13
|
+
closeButtonText?: never;
|
|
14
|
+
});
|
|
15
|
+
export type Props = CloseButtonProps & {
|
|
16
|
+
children: ReactNode;
|
|
10
17
|
id: string;
|
|
11
18
|
label: string;
|
|
12
19
|
onClose: (event: SyntheticEvent<HTMLButtonElement>, props: {
|
|
@@ -21,6 +28,9 @@ export type Props = {
|
|
|
21
28
|
placement?: Placement;
|
|
22
29
|
showArrow?: Boolean;
|
|
23
30
|
target: ReactElement<any>;
|
|
31
|
+
closeButtonLabel?: string;
|
|
32
|
+
actionText?: string;
|
|
33
|
+
onAction?: () => void;
|
|
24
34
|
};
|
|
25
|
-
declare const BpkPopover: ({ children, className, closeButtonIcon, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onClose, padded, placement, showArrow, target, ...rest }: Props) => JSX.Element;
|
|
35
|
+
declare const BpkPopover: ({ actionText, children, className, closeButtonIcon, closeButtonLabel, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onAction, onClose, padded, placement, showArrow, target, ...rest }: Props) => JSX.Element;
|
|
26
36
|
export default BpkPopover;
|
|
@@ -46,15 +46,18 @@ const bindEventSource = (source, callback, event) => {
|
|
|
46
46
|
});
|
|
47
47
|
};
|
|
48
48
|
const BpkPopover = ({
|
|
49
|
+
actionText,
|
|
49
50
|
children,
|
|
50
51
|
className = null,
|
|
51
52
|
closeButtonIcon = true,
|
|
53
|
+
closeButtonLabel,
|
|
52
54
|
closeButtonProps = {},
|
|
53
55
|
closeButtonText,
|
|
54
56
|
id,
|
|
55
57
|
isOpen = false,
|
|
56
58
|
label,
|
|
57
59
|
labelAsTitle = false,
|
|
60
|
+
onAction,
|
|
58
61
|
onClose,
|
|
59
62
|
padded = true,
|
|
60
63
|
placement = 'bottom',
|
|
@@ -135,13 +138,13 @@ const BpkPopover = ({
|
|
|
135
138
|
textStyle: TEXT_STYLES.label1,
|
|
136
139
|
children: label
|
|
137
140
|
}), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
|
|
138
|
-
label: closeButtonText,
|
|
141
|
+
label: closeButtonText || closeButtonLabel,
|
|
139
142
|
onClick: event => {
|
|
140
143
|
bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
|
|
141
144
|
setIsOpenState(false);
|
|
142
145
|
},
|
|
143
146
|
...closeButtonProps
|
|
144
|
-
}) : /*#__PURE__*/_jsx(BpkButtonLink, {
|
|
147
|
+
}) : closeButtonText && /*#__PURE__*/_jsx(BpkButtonLink, {
|
|
145
148
|
onClick: event => {
|
|
146
149
|
bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
|
|
147
150
|
setIsOpenState(false);
|
|
@@ -156,7 +159,13 @@ const BpkPopover = ({
|
|
|
156
159
|
}), /*#__PURE__*/_jsx("div", {
|
|
157
160
|
className: bodyClassNames,
|
|
158
161
|
children: children
|
|
159
|
-
}),
|
|
162
|
+
}), actionText && onAction && /*#__PURE__*/_jsx("div", {
|
|
163
|
+
className: getClassName('bpk-popover__action'),
|
|
164
|
+
children: /*#__PURE__*/_jsx(BpkButtonLink, {
|
|
165
|
+
onClick: onAction,
|
|
166
|
+
children: actionText
|
|
167
|
+
})
|
|
168
|
+
}), !labelAsTitle && closeButtonText && /*#__PURE__*/_jsx("footer", {
|
|
160
169
|
className: getClassName('bpk-popover__footer'),
|
|
161
170
|
children: /*#__PURE__*/_jsx(BpkButtonLink, {
|
|
162
171
|
onClick: event => {
|
|
@@ -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-popover
|
|
18
|
+
.bpk-popover--container{z-index:900}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}
|
|
@@ -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-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans","Noto Sans JP",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans","Noto Sans JP",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans","Noto Sans JP",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}
|
|
18
|
+
.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}
|
|
@@ -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
|
-
@font-face{font-family:Larken;font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-8371ea16.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-39e53c9a.woff") format("woff")}@font-face{font-family:Larken;font-style:normal;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-3d9dfe29.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-626ee28c.woff") format("woff")}
|
|
18
|
+
@font-face{font-family:Larken;font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-8371ea16.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Light-39e53c9a.woff") format("woff")}@font-face{font-family:Larken;font-style:normal;font-weight:400;src:url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-3d9dfe29.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/Larken-Regular-626ee28c.woff") format("woff")}@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansArabic-Light-e77dc47a.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansArabic-Light-ea83f673.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansArabic-Light-b2ff05f9.ttf") format("ttf")}@font-face{font-family:"Noto Sans Hebrew";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansHebrew-Light-7e3d70ae.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansHebrew-Light-87087c3d.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansHebrew-Light-7b34032c.ttf") format("ttf")}@font-face{font-family:"Noto Serif";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerif-Light-46d7aaea.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerif-Light-412a21b9.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerif-Light-9dbdd5d2.ttf") format("ttf")}@font-face{font-family:"Noto Serif Devanagari";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifDevanagari-Light-6f8c3ec2.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifDevanagari-Light-9e5b16f1.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifDevanagari-Light-d396b2f0.ttf") format("ttf")}@font-face{font-family:"Noto Serif Thai";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifThai-Light-c19b05eb.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifThai-Light-c8dd8e9a.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSerifThai-Light-7503fb65.ttf") format("ttf")}@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansSC-Light-650e8f78.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansSC-Light-562944a8.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansSC-Light-a73eb63e.ttf") format("ttf")}@font-face{font-family:"Noto Sans TC";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansTC-Light-44be0b13.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansTC-Light-a8473157.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansTC-Light-d77339b0.ttf") format("ttf")}@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansJP-Light-1fed199d.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansJP-Light-828afdbb.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansJP-Light-477cc6a5.ttf") format("ttf")}@font-face{font-family:"Noto Sans KR";font-style:normal;font-weight:300;src:url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansKR-Light-8bef1aea.woff2") format("woff2"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansKR-Light-c07b4050.woff") format("woff"),url("https://js.skyscnr.com/sttc/bpk-fonts/NotoSansKR-Light-137d0733.ttf") format("ttf")}
|
|
@@ -35,3 +35,93 @@ $base-url: 'https://js.skyscnr.com/sttc/bpk-fonts';
|
|
|
35
35
|
url('#{$base-url}/Larken-Regular-3d9dfe29.woff2') format('woff2'),
|
|
36
36
|
url('#{$base-url}/Larken-Regular-626ee28c.woff') format('woff');
|
|
37
37
|
}
|
|
38
|
+
|
|
39
|
+
@font-face {
|
|
40
|
+
font-family: 'Noto Sans Arabic';
|
|
41
|
+
font-style: normal;
|
|
42
|
+
font-weight: 300;
|
|
43
|
+
src:
|
|
44
|
+
url('#{$base-url}/NotoSansArabic-Light-e77dc47a.woff2') format('woff2'),
|
|
45
|
+
url('#{$base-url}/NotoSansArabic-Light-ea83f673.woff') format('woff'),
|
|
46
|
+
url('#{$base-url}/NotoSansArabic-Light-b2ff05f9.ttf') format('ttf');
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@font-face {
|
|
50
|
+
font-family: 'Noto Sans Hebrew';
|
|
51
|
+
font-style: normal;
|
|
52
|
+
font-weight: 300;
|
|
53
|
+
src:
|
|
54
|
+
url('#{$base-url}/NotoSansHebrew-Light-7e3d70ae.woff2') format('woff2'),
|
|
55
|
+
url('#{$base-url}/NotoSansHebrew-Light-87087c3d.woff') format('woff'),
|
|
56
|
+
url('#{$base-url}/NotoSansHebrew-Light-7b34032c.ttf') format('ttf');
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@font-face {
|
|
60
|
+
font-family: 'Noto Serif';
|
|
61
|
+
font-style: normal;
|
|
62
|
+
font-weight: 300;
|
|
63
|
+
src:
|
|
64
|
+
url('#{$base-url}/NotoSerif-Light-46d7aaea.woff2') format('woff2'),
|
|
65
|
+
url('#{$base-url}/NotoSerif-Light-412a21b9.woff') format('woff'),
|
|
66
|
+
url('#{$base-url}/NotoSerif-Light-9dbdd5d2.ttf') format('ttf');
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@font-face {
|
|
70
|
+
font-family: 'Noto Serif Devanagari';
|
|
71
|
+
font-style: normal;
|
|
72
|
+
font-weight: 300;
|
|
73
|
+
src:
|
|
74
|
+
url('#{$base-url}/NotoSerifDevanagari-Light-6f8c3ec2.woff2') format('woff2'),
|
|
75
|
+
url('#{$base-url}/NotoSerifDevanagari-Light-9e5b16f1.woff') format('woff'),
|
|
76
|
+
url('#{$base-url}/NotoSerifDevanagari-Light-d396b2f0.ttf') format('ttf');
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@font-face {
|
|
80
|
+
font-family: 'Noto Serif Thai';
|
|
81
|
+
font-style: normal;
|
|
82
|
+
font-weight: 300;
|
|
83
|
+
src:
|
|
84
|
+
url('#{$base-url}/NotoSerifThai-Light-c19b05eb.woff2') format('woff2'),
|
|
85
|
+
url('#{$base-url}/NotoSerifThai-Light-c8dd8e9a.woff') format('woff'),
|
|
86
|
+
url('#{$base-url}/NotoSerifThai-Light-7503fb65.ttf') format('ttf');
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@font-face {
|
|
90
|
+
font-family: 'Noto Sans SC';
|
|
91
|
+
font-style: normal;
|
|
92
|
+
font-weight: 300;
|
|
93
|
+
src:
|
|
94
|
+
url('#{$base-url}/NotoSansSC-Light-650e8f78.woff2') format('woff2'),
|
|
95
|
+
url('#{$base-url}/NotoSansSC-Light-562944a8.woff') format('woff'),
|
|
96
|
+
url('#{$base-url}/NotoSansSC-Light-a73eb63e.ttf') format('ttf');
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@font-face {
|
|
100
|
+
font-family: 'Noto Sans TC';
|
|
101
|
+
font-style: normal;
|
|
102
|
+
font-weight: 300;
|
|
103
|
+
src:
|
|
104
|
+
url('#{$base-url}/NotoSansTC-Light-44be0b13.woff2') format('woff2'),
|
|
105
|
+
url('#{$base-url}/NotoSansTC-Light-a8473157.woff') format('woff'),
|
|
106
|
+
url('#{$base-url}/NotoSansTC-Light-d77339b0.ttf') format('ttf');
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@font-face {
|
|
110
|
+
font-family: 'Noto Sans JP';
|
|
111
|
+
font-style: normal;
|
|
112
|
+
font-weight: 300;
|
|
113
|
+
src:
|
|
114
|
+
url('#{$base-url}/NotoSansJP-Light-1fed199d.woff2') format('woff2'),
|
|
115
|
+
url('#{$base-url}/NotoSansJP-Light-828afdbb.woff') format('woff'),
|
|
116
|
+
url('#{$base-url}/NotoSansJP-Light-477cc6a5.ttf') format('ttf');
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@font-face {
|
|
120
|
+
font-family: 'Noto Sans KR';
|
|
121
|
+
font-style: normal;
|
|
122
|
+
font-weight: 300;
|
|
123
|
+
src:
|
|
124
|
+
url('#{$base-url}/NotoSansKR-Light-8bef1aea.woff2') format('woff2'),
|
|
125
|
+
url('#{$base-url}/NotoSansKR-Light-c07b4050.woff') format('woff'),
|
|
126
|
+
url('#{$base-url}/NotoSansKR-Light-137d0733.ttf') format('ttf');
|
|
127
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyscanner/backpack-web",
|
|
3
|
-
"version": "34.
|
|
3
|
+
"version": "34.4.0",
|
|
4
4
|
"description": "Backpack Design System web library",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"@popperjs/core": "^2.11.8",
|
|
27
27
|
"@radix-ui/react-slider": "^1.1.2",
|
|
28
28
|
"@react-google-maps/api": "^2.12.0",
|
|
29
|
-
"@skyscanner/bpk-foundations-web": "^17.
|
|
29
|
+
"@skyscanner/bpk-foundations-web": "^17.14.0",
|
|
30
30
|
"@skyscanner/bpk-svgs": "^19.3.0",
|
|
31
31
|
"a11y-focus-scope": "^1.1.3",
|
|
32
32
|
"a11y-focus-store": "^1.0.0",
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Backpack - Skyscanner's Design System
|
|
3
|
-
*
|
|
4
|
-
* Copyright 2016 Skyscanner Ltd
|
|
5
|
-
*
|
|
6
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
7
|
-
* you may not use this file except in compliance with the License.
|
|
8
|
-
* You may obtain a copy of the License at
|
|
9
|
-
*
|
|
10
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
-
*
|
|
12
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
13
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
14
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
|
-
* See the License for the specific language governing permissions and
|
|
16
|
-
* limitations under the License.
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
import PropTypes from 'prop-types';
|
|
20
|
-
import { cssModules } from "../../bpk-react-utils";
|
|
21
|
-
import STYLES from "./BpkDescriptionList.module.css";
|
|
22
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
-
const getClassName = cssModules(STYLES);
|
|
24
|
-
const buildComponent = (TagName, baseClassName) => {
|
|
25
|
-
const Component = ({
|
|
26
|
-
children,
|
|
27
|
-
className,
|
|
28
|
-
...rest
|
|
29
|
-
}) => {
|
|
30
|
-
const classNames = [getClassName(baseClassName)];
|
|
31
|
-
if (className) {
|
|
32
|
-
classNames.push(className);
|
|
33
|
-
}
|
|
34
|
-
return (
|
|
35
|
-
/*#__PURE__*/
|
|
36
|
-
// TODO: className to be removed
|
|
37
|
-
// eslint-disable-next-line @skyscanner/rules/forbid-component-props
|
|
38
|
-
_jsx(TagName, {
|
|
39
|
-
className: classNames.join(' '),
|
|
40
|
-
...rest,
|
|
41
|
-
children: children
|
|
42
|
-
})
|
|
43
|
-
);
|
|
44
|
-
};
|
|
45
|
-
Component.propTypes = {
|
|
46
|
-
children: PropTypes.node.isRequired,
|
|
47
|
-
className: PropTypes.string
|
|
48
|
-
};
|
|
49
|
-
Component.defaultProps = {
|
|
50
|
-
className: null
|
|
51
|
-
};
|
|
52
|
-
return Component;
|
|
53
|
-
};
|
|
54
|
-
export default buildComponent;
|