@skyscanner/backpack-web 32.1.0 → 33.0.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-badge/index.d.ts +1 -2
- package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts +6 -11
- package/bpk-component-bottom-sheet/src/BpkBottomSheet.js +65 -27
- package/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css +1 -1
- package/bpk-component-button/src/BpkButtonDestructive.module.css +1 -1
- package/bpk-component-button/src/BpkButtonLink.module.css +1 -1
- package/bpk-component-button/src/BpkButtonLinkOnDark.module.css +1 -1
- package/bpk-component-button/src/BpkButtonSecondaryOnDark.module.css +1 -1
- package/bpk-component-button/src/BpkButtonV2/BpkButton.module.css +1 -1
- package/bpk-component-calendar/src/composeCalendar.d.ts +4 -1
- package/bpk-component-calendar/src/date-utils.d.ts +19 -19
- package/bpk-component-calendar/src/date-utils.js +21 -21
- package/bpk-component-calendar/test-utils.js +1 -1
- package/{bpk-component-bottom-sheet/src/BpkBottomSheetInner.d.ts → bpk-component-datatable/index.d.ts} +3 -11
- package/bpk-component-datatable/src/BpkDataTable.d.ts +22 -0
- package/bpk-component-datatable/src/BpkDataTableHeader.d.ts +27 -0
- package/bpk-component-datatable/src/common-types.d.ts +111 -0
- package/bpk-component-datatable/src/utils.d.ts +30 -0
- package/bpk-component-scrollable-calendar/test-utils.js +1 -1
- package/bpk-component-section-header/src/BpkSectionHeader.js +1 -0
- package/bpk-component-section-header/src/BpkSectionHeader.module.css +1 -1
- package/bpk-react-utils/index.d.ts +36 -1
- package/bpk-react-utils/index.js +4 -2
- package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js +144 -0
- package/bpk-react-utils/src/BpkDialogWrapper.d.ts +45 -0
- package/bpk-react-utils/src/BpkDialogWrapper.module.css +18 -0
- package/package.json +3 -3
- package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.js +0 -96
- package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.css +0 -18
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
|
|
19
19
|
import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
|
|
20
20
|
import themeAttributes from './src/themeAttributes';
|
|
21
|
-
import BpkBadgeV2 from './src/BpkBadgeV2/BpkBadge';
|
|
22
21
|
export type BpkBadgeProps = Props;
|
|
23
22
|
export default component;
|
|
24
|
-
export { BADGE_TYPES, themeAttributes
|
|
23
|
+
export { BADGE_TYPES, themeAttributes };
|
|
@@ -15,16 +15,18 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
|
|
19
|
-
import type { ReactNode } from 'react';
|
|
18
|
+
import { ReactNode } from 'react';
|
|
20
19
|
import type { Props as BottomSheetProps } from './BpkBottomSheet';
|
|
21
20
|
export type Props = Partial<BottomSheetProps> & {
|
|
21
|
+
actionText?: string;
|
|
22
|
+
ariaLabelledby: string;
|
|
22
23
|
children: ReactNode;
|
|
23
24
|
closeLabel?: string;
|
|
24
25
|
closeOnEscPressed?: boolean;
|
|
25
26
|
closeOnScrimClick?: boolean;
|
|
26
27
|
id: string;
|
|
27
28
|
isOpen: boolean;
|
|
29
|
+
onAction?: () => void;
|
|
28
30
|
onClose: (
|
|
29
31
|
arg0?: TouchEvent | MouseEvent | KeyboardEvent,
|
|
30
32
|
arg1?: {
|
|
@@ -32,14 +34,7 @@ export type Props = Partial<BottomSheetProps> & {
|
|
|
32
34
|
},
|
|
33
35
|
) => void;
|
|
34
36
|
title?: string;
|
|
35
|
-
|
|
36
|
-
* Because this component uses a modal on mobile viewports, you need to let it know what
|
|
37
|
-
* the root element of your application is by returning its DOM node via this prop
|
|
38
|
-
* This is to "hide" your application from screen readers whilst the modal is open.
|
|
39
|
-
* The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".
|
|
40
|
-
*/
|
|
41
|
-
getApplicationElement: () => HTMLElement | null;
|
|
42
|
-
renderTarget?: null | HTMLElement | (() => null | HTMLElement);
|
|
37
|
+
wide?: boolean;
|
|
43
38
|
};
|
|
44
|
-
declare const BpkBottomSheet: ({ closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onClose, title,
|
|
39
|
+
declare const BpkBottomSheet: ({ actionText, ariaLabelledby, children, closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onAction, onClose, title, wide, ...rest }: Props) => JSX.Element;
|
|
45
40
|
export default BpkBottomSheet;
|
|
@@ -15,16 +15,25 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
+
|
|
18
19
|
import { useState } from "react";
|
|
19
|
-
import {
|
|
20
|
-
|
|
20
|
+
import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
|
|
21
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
22
|
+
import { BpkButtonLink } from "../../bpk-component-link";
|
|
23
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
24
|
+
import BpkCloseButton from "../../bpk-component-close-button";
|
|
25
|
+
import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
|
|
26
|
+
import BpkNavigationBar from "../../bpk-component-navigation-bar";
|
|
27
|
+
import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
|
|
21
28
|
import STYLES from "./BpkBottomSheet.module.css";
|
|
22
|
-
import BpkBottomSheetInner from "./BpkBottomSheetInner";
|
|
23
29
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
30
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
31
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
32
|
const getClassName = cssModules(STYLES);
|
|
25
|
-
const ScrimBpkBottomSheetInner = withScrim(BpkBottomSheetInner);
|
|
26
33
|
const BpkBottomSheet = ({
|
|
27
34
|
actionText = '',
|
|
35
|
+
ariaLabelledby,
|
|
36
|
+
children,
|
|
28
37
|
closeLabel = '',
|
|
29
38
|
closeOnEscPressed = false,
|
|
30
39
|
closeOnScrimClick = false,
|
|
@@ -32,36 +41,65 @@ const BpkBottomSheet = ({
|
|
|
32
41
|
isOpen,
|
|
33
42
|
onAction = () => null,
|
|
34
43
|
onClose,
|
|
35
|
-
renderTarget,
|
|
36
44
|
title = '',
|
|
37
|
-
wide = false
|
|
38
|
-
...rest
|
|
45
|
+
wide = false
|
|
39
46
|
}) => {
|
|
40
|
-
const [exiting,
|
|
41
|
-
const
|
|
42
|
-
|
|
47
|
+
const [exiting, setExiting] = useState(false);
|
|
48
|
+
const animationTimeout = 240;
|
|
49
|
+
const handleClose = (timeout, arg0, arg1) => {
|
|
50
|
+
setExiting(true);
|
|
43
51
|
setTimeout(() => {
|
|
44
52
|
onClose(arg0, arg1);
|
|
45
|
-
|
|
46
|
-
},
|
|
53
|
+
setExiting(false);
|
|
54
|
+
}, timeout);
|
|
47
55
|
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
56
|
+
const headingId = `bpk-bottom-sheet-heading-${id}`;
|
|
57
|
+
const dialogClassName = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
|
|
58
|
+
return /*#__PURE__*/_jsx(BpkBreakpoint, {
|
|
59
|
+
query: BREAKPOINTS.ABOVE_MOBILE,
|
|
60
|
+
children: isAboveMobile => /*#__PURE__*/_jsx(BpkDialogWrapper, {
|
|
61
|
+
ariaLabelledby: ariaLabelledby,
|
|
62
|
+
dialogClassName: dialogClassName,
|
|
54
63
|
id: id,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
containerClassName: getClassName('bpk-bottom-sheet--container'),
|
|
58
|
-
title: title,
|
|
59
|
-
closeLabel: closeLabel,
|
|
60
|
-
actionText: actionText,
|
|
61
|
-
onAction: onAction,
|
|
62
|
-
wide: wide,
|
|
64
|
+
isOpen: isOpen,
|
|
65
|
+
onClose: (arg0, arg1) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1),
|
|
63
66
|
exiting: exiting,
|
|
64
|
-
|
|
67
|
+
transitionClassNames: {
|
|
68
|
+
appear: getClassName('bpk-bottom-sheet--appear'),
|
|
69
|
+
appearActive: getClassName('bpk-bottom-sheet--appear-active'),
|
|
70
|
+
exit: getClassName('bpk-bottom-sheet--exit')
|
|
71
|
+
},
|
|
72
|
+
closeOnEscPressed: closeOnEscPressed,
|
|
73
|
+
closeOnScrimClick: closeOnScrimClick,
|
|
74
|
+
timeout: {
|
|
75
|
+
appear: animationTimeout,
|
|
76
|
+
exit: isAboveMobile ? 0 : animationTimeout
|
|
77
|
+
},
|
|
78
|
+
children: /*#__PURE__*/_jsxs(_Fragment, {
|
|
79
|
+
children: [/*#__PURE__*/_jsx("header", {
|
|
80
|
+
className: getClassName('bpk-bottom-sheet--header'),
|
|
81
|
+
children: /*#__PURE__*/_jsx(BpkNavigationBar, {
|
|
82
|
+
id: headingId,
|
|
83
|
+
title: title && /*#__PURE__*/_jsx(BpkText, {
|
|
84
|
+
id: headingId,
|
|
85
|
+
textStyle: TEXT_STYLES.label1,
|
|
86
|
+
tagName: "h2",
|
|
87
|
+
children: title
|
|
88
|
+
}),
|
|
89
|
+
leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
|
|
90
|
+
label: closeLabel,
|
|
91
|
+
onClick: (arg0, arg1) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1)
|
|
92
|
+
}),
|
|
93
|
+
trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
|
|
94
|
+
onClick: onAction,
|
|
95
|
+
children: actionText
|
|
96
|
+
}) : null
|
|
97
|
+
})
|
|
98
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
99
|
+
className: getClassName('bpk-bottom-sheet--content'),
|
|
100
|
+
children: children
|
|
101
|
+
})]
|
|
102
|
+
})
|
|
65
103
|
})
|
|
66
104
|
});
|
|
67
105
|
};
|
|
@@ -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
|
|
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-direction:reverse;animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;box-shadow:0 -1px 0 0 #c1c7cf inset}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}
|
|
@@ -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-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#
|
|
18
|
+
.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}
|
|
@@ -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-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#
|
|
18
|
+
.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}
|
|
@@ -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-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#
|
|
18
|
+
.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}
|
|
@@ -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-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color
|
|
18
|
+
.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}
|
|
@@ -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-button{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-button: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-button: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-button: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-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#c80456;color:var(--bpk-button-destructive-text-color, rgb(200, 4, 86));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, rgb(200, 4, 86))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, rgb(200, 4, 86))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#c80456;background-color:var(--bpk-button-destructive-active-background-color, rgb(200, 4, 86))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primary-on-dark{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))}.bpk-no-touch-support .bpk-button--primary-on-dark: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-button--primary-on-dark: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-button--primary-on-dark: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-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:#243346;background-color:var(--bpk-button-secondary-on-dark-background-color, rgb(36, 51, 70))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}.bpk-button--full-width{display:block;width:100%}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
|
|
18
|
+
.bpk-button{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-button: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-button: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-button: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-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primary-on-dark{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))}.bpk-no-touch-support .bpk-button--primary-on-dark: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-button--primary-on-dark: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-button--primary-on-dark: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-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}.bpk-button--full-width{display:block;width:100%}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
|
|
@@ -71,6 +71,9 @@ export type Props = {
|
|
|
71
71
|
preventKeyboardFocus?: boolean;
|
|
72
72
|
selectionConfiguration?: SelectionConfiguration;
|
|
73
73
|
gridClassName?: string | null;
|
|
74
|
+
/**
|
|
75
|
+
* Sets the height of month rows in 'rem' units. If not specified, the default value of `2.75rem` will be used.
|
|
76
|
+
*/
|
|
74
77
|
customRowHeight?: number;
|
|
75
78
|
/**
|
|
76
79
|
* Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
|
|
@@ -93,5 +96,5 @@ export type Props = {
|
|
|
93
96
|
*/
|
|
94
97
|
dateProps?: {} | null;
|
|
95
98
|
};
|
|
96
|
-
declare const composeCalendar: (Nav: ComponentType<any> | string | null, GridHeader: ComponentType<any> | string | null, Grid: ComponentType<any> | string, CalendarDate: ComponentType<any> | string | null) => ({ changeMonthLabel, className, dateModifiers, dateProps, daysOfWeek, fixedWidth, focusedDate, formatDateFull, formatMonth, gridClassName, gridProps, headerProps, id, markOutsideDays, markToday, maxDate, minDate, month, navProps, nextMonthLabel, onDateClick, onDateKeyDown, onMonthChange, preventKeyboardFocus, previousMonthLabel, selectionConfiguration, weekDayKey, weekStartsOn, }: Props) => JSX.Element;
|
|
99
|
+
declare const composeCalendar: (Nav: ComponentType<any> | string | null, GridHeader: ComponentType<any> | string | null, Grid: ComponentType<any> | string, CalendarDate: ComponentType<any> | string | null) => ({ changeMonthLabel, className, customRowHeight, dateModifiers, dateProps, daysOfWeek, fixedWidth, focusedDate, formatDateFull, formatMonth, gridClassName, gridProps, headerProps, id, markOutsideDays, markToday, maxDate, minDate, month, navProps, nextMonthLabel, onDateClick, onDateKeyDown, onMonthChange, preventKeyboardFocus, previousMonthLabel, selectionConfiguration, weekDayKey, weekStartsOn, }: Props) => JSX.Element;
|
|
97
100
|
export default composeCalendar;
|
|
@@ -16,25 +16,25 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import startOfMonth from 'date-fns/startOfMonth';
|
|
20
|
-
import endOfMonth from 'date-fns/endOfMonth';
|
|
21
|
-
import lastDayOfMonth from 'date-fns/lastDayOfMonth';
|
|
22
|
-
import getDay from 'date-fns/getDay';
|
|
23
|
-
import isWithinRange from 'date-fns/isWithinInterval';
|
|
24
|
-
import isToday from 'date-fns/isToday';
|
|
25
|
-
import isSaturday from 'date-fns/isSaturday';
|
|
26
|
-
import isSunday from 'date-fns/isSunday';
|
|
27
|
-
import isSameDay from 'date-fns/isSameDay';
|
|
28
|
-
import isSameWeek from 'date-fns/isSameWeek';
|
|
29
|
-
import isSameMonth from 'date-fns/isSameMonth';
|
|
30
|
-
import isBefore from 'date-fns/isBefore';
|
|
31
|
-
import isAfter from 'date-fns/isAfter';
|
|
32
|
-
import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
|
|
33
|
-
import addDays from 'date-fns/addDays';
|
|
34
|
-
import addMonths from 'date-fns/addMonths';
|
|
35
|
-
import startOfDay from 'date-fns/startOfDay';
|
|
36
|
-
import parseISO from 'date-fns/parseISO';
|
|
37
|
-
import format from 'date-fns/format';
|
|
19
|
+
import { startOfMonth } from 'date-fns/startOfMonth';
|
|
20
|
+
import { endOfMonth } from 'date-fns/endOfMonth';
|
|
21
|
+
import { lastDayOfMonth } from 'date-fns/lastDayOfMonth';
|
|
22
|
+
import { getDay } from 'date-fns/getDay';
|
|
23
|
+
import { isWithinInterval as isWithinRange } from 'date-fns/isWithinInterval';
|
|
24
|
+
import { isToday } from 'date-fns/isToday';
|
|
25
|
+
import { isSaturday } from 'date-fns/isSaturday';
|
|
26
|
+
import { isSunday } from 'date-fns/isSunday';
|
|
27
|
+
import { isSameDay } from 'date-fns/isSameDay';
|
|
28
|
+
import { isSameWeek } from 'date-fns/isSameWeek';
|
|
29
|
+
import { isSameMonth } from 'date-fns/isSameMonth';
|
|
30
|
+
import { isBefore } from 'date-fns/isBefore';
|
|
31
|
+
import { isAfter } from 'date-fns/isAfter';
|
|
32
|
+
import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
|
|
33
|
+
import { addDays } from 'date-fns/addDays';
|
|
34
|
+
import { addMonths } from 'date-fns/addMonths';
|
|
35
|
+
import { startOfDay } from 'date-fns/startOfDay';
|
|
36
|
+
import { parseISO } from 'date-fns/parseISO';
|
|
37
|
+
import { format } from 'date-fns/format';
|
|
38
38
|
import type { DaysOfWeek } from './custom-proptypes';
|
|
39
39
|
declare function daysInMonth(year: number, month: number): number;
|
|
40
40
|
declare function getCalendarMonthWeeks(date: Date, weekStartsOn: number): Date[][];
|
|
@@ -16,27 +16,27 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import startOfMonth from 'date-fns/startOfMonth';
|
|
20
|
-
import endOfMonth from 'date-fns/endOfMonth';
|
|
21
|
-
import lastDayOfMonth from 'date-fns/lastDayOfMonth';
|
|
22
|
-
import getDay from 'date-fns/getDay';
|
|
23
|
-
import isWithinRange from 'date-fns/isWithinInterval';
|
|
24
|
-
import isToday from 'date-fns/isToday';
|
|
25
|
-
import isSaturday from 'date-fns/isSaturday';
|
|
26
|
-
import isSunday from 'date-fns/isSunday';
|
|
27
|
-
import isSameDay from 'date-fns/isSameDay';
|
|
28
|
-
import isSameWeek from 'date-fns/isSameWeek';
|
|
29
|
-
import isSameMonth from 'date-fns/isSameMonth';
|
|
30
|
-
import isBefore from 'date-fns/isBefore';
|
|
31
|
-
import isAfter from 'date-fns/isAfter';
|
|
32
|
-
import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
|
|
33
|
-
import addDays from 'date-fns/addDays';
|
|
34
|
-
import addMonths from 'date-fns/addMonths';
|
|
35
|
-
import setMonth from 'date-fns/setMonth';
|
|
36
|
-
import setYear from 'date-fns/setYear';
|
|
37
|
-
import startOfDay from 'date-fns/startOfDay';
|
|
38
|
-
import parseISO from 'date-fns/parseISO';
|
|
39
|
-
import format from 'date-fns/format';
|
|
19
|
+
import { startOfMonth } from 'date-fns/startOfMonth';
|
|
20
|
+
import { endOfMonth } from 'date-fns/endOfMonth';
|
|
21
|
+
import { lastDayOfMonth } from 'date-fns/lastDayOfMonth';
|
|
22
|
+
import { getDay } from 'date-fns/getDay';
|
|
23
|
+
import { isWithinInterval as isWithinRange } from 'date-fns/isWithinInterval';
|
|
24
|
+
import { isToday } from 'date-fns/isToday';
|
|
25
|
+
import { isSaturday } from 'date-fns/isSaturday';
|
|
26
|
+
import { isSunday } from 'date-fns/isSunday';
|
|
27
|
+
import { isSameDay } from 'date-fns/isSameDay';
|
|
28
|
+
import { isSameWeek } from 'date-fns/isSameWeek';
|
|
29
|
+
import { isSameMonth } from 'date-fns/isSameMonth';
|
|
30
|
+
import { isBefore } from 'date-fns/isBefore';
|
|
31
|
+
import { isAfter } from 'date-fns/isAfter';
|
|
32
|
+
import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
|
|
33
|
+
import { addDays } from 'date-fns/addDays';
|
|
34
|
+
import { addMonths } from 'date-fns/addMonths';
|
|
35
|
+
import { setMonth } from 'date-fns/setMonth';
|
|
36
|
+
import { setYear } from 'date-fns/setYear';
|
|
37
|
+
import { startOfDay } from 'date-fns/startOfDay';
|
|
38
|
+
import { parseISO } from 'date-fns/parseISO';
|
|
39
|
+
import { format } from 'date-fns/format';
|
|
40
40
|
const ONE_MINUTE_IN_MS = 60 * 1000;
|
|
41
41
|
const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
|
|
42
42
|
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import format from 'date-fns/format';
|
|
19
|
+
import { format } from 'date-fns/format';
|
|
20
20
|
export const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
|
|
21
21
|
export const formatDateFullArabic = date => {
|
|
22
22
|
const dateString = 'EEEE, dd، MMMM، yyyy';
|
|
@@ -16,14 +16,6 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import
|
|
20
|
-
export
|
|
21
|
-
|
|
22
|
-
closeLabel?: string;
|
|
23
|
-
dialogRef: (ref: HTMLElement | null | undefined) => void;
|
|
24
|
-
id: string;
|
|
25
|
-
onClose: () => void;
|
|
26
|
-
title?: string;
|
|
27
|
-
};
|
|
28
|
-
declare const BpkBottomSheetInner: ({ children, closeLabel, dialogRef, id, onClose, title, }: Props) => JSX.Element;
|
|
29
|
-
export default BpkBottomSheetInner;
|
|
19
|
+
import BpkDataTable from './src/BpkDataTable';
|
|
20
|
+
export { BpkDataTable };
|
|
21
|
+
export default BpkDataTable;
|
|
@@ -0,0 +1,22 @@
|
|
|
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
|
+
/// <reference types="react" />
|
|
20
|
+
import { type BpkDataTableProps } from './common-types';
|
|
21
|
+
declare const BpkDataTable: (props: BpkDataTableProps) => JSX.Element;
|
|
22
|
+
export default BpkDataTable;
|
|
@@ -0,0 +1,27 @@
|
|
|
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
|
+
/// <reference types="react" />
|
|
20
|
+
/**
|
|
21
|
+
* Internal component to render the header of a column.
|
|
22
|
+
* @returns {JSX.Element} data table header component
|
|
23
|
+
*/
|
|
24
|
+
declare const BpkDataTableHeader: ({ column }: {
|
|
25
|
+
column: any;
|
|
26
|
+
}) => JSX.Element;
|
|
27
|
+
export default BpkDataTableHeader;
|
|
@@ -0,0 +1,111 @@
|
|
|
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
|
+
/// <reference types="react" />
|
|
20
|
+
export declare const SORT_DIRECTION_TYPES: {
|
|
21
|
+
readonly ASC: "ASC";
|
|
22
|
+
readonly DESC: "DESC";
|
|
23
|
+
};
|
|
24
|
+
export type BpkDataTableProps = {
|
|
25
|
+
rows: {
|
|
26
|
+
[key: string]: any;
|
|
27
|
+
};
|
|
28
|
+
columns: ColumnType[];
|
|
29
|
+
/**
|
|
30
|
+
* Table height. Please provide this value in rem.
|
|
31
|
+
*/
|
|
32
|
+
height: number | string;
|
|
33
|
+
/**
|
|
34
|
+
* Table width. Please provide this value in rem.
|
|
35
|
+
* If not provided, the table will expand to fill the available space.
|
|
36
|
+
*/
|
|
37
|
+
width?: number | string;
|
|
38
|
+
/**
|
|
39
|
+
* Height of the header row. Please provide this value in rem.
|
|
40
|
+
*/
|
|
41
|
+
headerHeight?: number | string;
|
|
42
|
+
headerClassName?: string | null;
|
|
43
|
+
/**
|
|
44
|
+
* Height of a row (except for the header row). Please provide this value in rem.
|
|
45
|
+
*/
|
|
46
|
+
rowHeight?: number | string;
|
|
47
|
+
rowStyle?: {};
|
|
48
|
+
rowClassName?: string | ((arg0: any) => string);
|
|
49
|
+
className?: string | null;
|
|
50
|
+
/**
|
|
51
|
+
* The data will be sorted by default based on this column.
|
|
52
|
+
*/
|
|
53
|
+
defaultColumnSortIndex?: number;
|
|
54
|
+
/**
|
|
55
|
+
* For custom sorting, pass a sort function - must be memoized. It should return 1 if rowA is larger, and -1 if rowB is larger.
|
|
56
|
+
* You can also pass a string: basic, datetime, alphanumeric. By default, alphanumeric sorting will be applied.
|
|
57
|
+
*/
|
|
58
|
+
sort?: string | ((rowA: {}, rowB: {}, columnId: string, desc: boolean) => number);
|
|
59
|
+
/**
|
|
60
|
+
* Use sortBy to specify which column the custom sorting will be applied to. To specify the column, use the accessor of the column.
|
|
61
|
+
*/
|
|
62
|
+
sortBy?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Use sortDirection to set the direction of sorting. By default, it will be ascending.
|
|
65
|
+
*/
|
|
66
|
+
sortDirection?: (typeof SORT_DIRECTION_TYPES)[keyof typeof SORT_DIRECTION_TYPES];
|
|
67
|
+
/**
|
|
68
|
+
* Callback function that will be called when a row is clicked. The entire row object (originally passed in the data prop) will be passed to this function.
|
|
69
|
+
*/
|
|
70
|
+
onRowClick?: (arg: {}) => void;
|
|
71
|
+
[rest: string]: any;
|
|
72
|
+
};
|
|
73
|
+
export type ColumnType = {
|
|
74
|
+
accessor: string;
|
|
75
|
+
/**
|
|
76
|
+
* Optional function to format the header data.
|
|
77
|
+
* @returns {string | JSX.Element} The formatted header data.
|
|
78
|
+
*/
|
|
79
|
+
Header?: (arg: {
|
|
80
|
+
disableSortBy: boolean;
|
|
81
|
+
accessor: string;
|
|
82
|
+
label: string;
|
|
83
|
+
}) => JSX.Element | string;
|
|
84
|
+
disableSortBy?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Width of the column. Please provide this value in rem.
|
|
87
|
+
*/
|
|
88
|
+
width?: string | number;
|
|
89
|
+
/**
|
|
90
|
+
* Minimum width of the column. Please provide this value in rem.
|
|
91
|
+
*/
|
|
92
|
+
minWidth?: string | number;
|
|
93
|
+
flexGrow?: number;
|
|
94
|
+
className?: string | null;
|
|
95
|
+
headerClassName?: string | null;
|
|
96
|
+
headerStyle?: {};
|
|
97
|
+
/**
|
|
98
|
+
* Optional function to format the cell data.
|
|
99
|
+
* @returns {string | JSX.Element} The formatted cell data.
|
|
100
|
+
*/
|
|
101
|
+
Cell?: (arg: {
|
|
102
|
+
rowData: {};
|
|
103
|
+
rowIndex: number;
|
|
104
|
+
accessor: string;
|
|
105
|
+
columnIndex: number;
|
|
106
|
+
cellData: {};
|
|
107
|
+
}) => JSX.Element | string;
|
|
108
|
+
label?: string;
|
|
109
|
+
style?: {};
|
|
110
|
+
defaultSortDirection?: (typeof SORT_DIRECTION_TYPES)[keyof typeof SORT_DIRECTION_TYPES];
|
|
111
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
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 type { ColumnType } from './common-types';
|
|
20
|
+
/**
|
|
21
|
+
* This function abstracts the Cell and Header of the react-table API.
|
|
22
|
+
* The columns API defined in Backpack will therefore be independent of the react-table columns API which consumers don't need to be aware of.
|
|
23
|
+
* @param {Array} columns Array of column objects compatible with the API defined in Backpack
|
|
24
|
+
* @returns {Array} An array of column objects that can be directly passed to the hooks of the react-table library
|
|
25
|
+
*
|
|
26
|
+
*/
|
|
27
|
+
export declare const createColumnsSchema: (columns: ColumnType[]) => {
|
|
28
|
+
[key: string]: any;
|
|
29
|
+
}[];
|
|
30
|
+
export default createColumnsSchema;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import format from 'date-fns/format';
|
|
19
|
+
import { format } from 'date-fns/format';
|
|
20
20
|
export const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
|
|
21
21
|
export const formatDateFullArabic = date => {
|
|
22
22
|
const dateString = 'EEEE, dd، MMMM، yyyy';
|
|
@@ -40,6 +40,7 @@ const BpkSectionHeader = ({
|
|
|
40
40
|
className: getClassName('bpk-section-header__title'),
|
|
41
41
|
children: title
|
|
42
42
|
}), description && /*#__PURE__*/_jsx(BpkText, {
|
|
43
|
+
className: getClassName('bpk-section-header__description'),
|
|
43
44
|
children: description
|
|
44
45
|
})]
|
|
45
46
|
}), button]
|
|
@@ -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-section-header{display:flex;justify-content:space-between;align-items:flex-start;background-color:rgba(0,0,0,0)}.bpk-section-header__title-description{display:flex;flex-direction:column}.bpk-section-header__title-description--default{color:#161616}.bpk-section-header__title-description--on-dark{color:#fff}.bpk-section-header__title{font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-section-header__title{font-size:1.5rem;line-height:1.75rem;font-weight:700}}
|
|
18
|
+
.bpk-section-header{display:flex;justify-content:space-between;align-items:flex-start;background-color:rgba(0,0,0,0)}.bpk-section-header__title-description{display:flex;flex-direction:column}.bpk-section-header__title-description--default{color:#161616}.bpk-section-header__title-description--on-dark{color:#fff}.bpk-section-header__title{font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-section-header__title{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-section-header__description{padding-top:.25rem}
|
|
@@ -25,7 +25,8 @@ import deprecated from './src/deprecated';
|
|
|
25
25
|
import { isDeviceIphone, isDeviceIpad, isDeviceIos } from './src/deviceDetection';
|
|
26
26
|
import withDefaultProps from './src/withDefaultProps';
|
|
27
27
|
import isRTL from './src/isRTL';
|
|
28
|
-
|
|
28
|
+
import{ BpkDialogWrapper } from './src/BpkDialogWrapper/BpkDialogWrapper';
|
|
29
|
+
export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
|
|
29
30
|
declare const _default: {
|
|
30
31
|
Portal: typeof Portal;
|
|
31
32
|
TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {
|
|
@@ -54,5 +55,39 @@ declare const _default: {
|
|
|
54
55
|
isDeviceIpad: () => boolean;
|
|
55
56
|
isDeviceIos: () => boolean;
|
|
56
57
|
isRTL: () => boolean;
|
|
58
|
+
BpkDialogWrapper: ({
|
|
59
|
+
ariaLabelledby,
|
|
60
|
+
children,
|
|
61
|
+
closeOnEscPressed,
|
|
62
|
+
closeOnScrimClick,
|
|
63
|
+
dialogClassName,
|
|
64
|
+
exiting,
|
|
65
|
+
id,
|
|
66
|
+
isOpen,
|
|
67
|
+
onClose,
|
|
68
|
+
timeout,
|
|
69
|
+
transitionClassNames
|
|
70
|
+
}: {
|
|
71
|
+
ariaLabelledby: string;
|
|
72
|
+
children: import("react").ReactNode;
|
|
73
|
+
closeOnEscPressed?: boolean;
|
|
74
|
+
closeOnScrimClick?: boolean;
|
|
75
|
+
dialogClassName?: string;
|
|
76
|
+
id: string | undefined;
|
|
77
|
+
isOpen: boolean;
|
|
78
|
+
onClose: (
|
|
79
|
+
arg0?: Event | KeyboardEvent | MouseEvent | PointerEvent | TouchEvent,
|
|
80
|
+
arg1?: {
|
|
81
|
+
source: 'ESCAPE' | 'DOCUMENT_CLICK';
|
|
82
|
+
},
|
|
83
|
+
) => void | null;
|
|
84
|
+
exiting?: boolean;
|
|
85
|
+
transitionClassNames?: {
|
|
86
|
+
appear?: string,
|
|
87
|
+
appearActive?: string,
|
|
88
|
+
exit?: string
|
|
89
|
+
};
|
|
90
|
+
timeout?: {appear?: number, exit?: number};
|
|
91
|
+
}) => JSX.Element;
|
|
57
92
|
};
|
|
58
93
|
export default _default;
|
package/bpk-react-utils/index.js
CHANGED
|
@@ -25,7 +25,8 @@ import deprecated from "./src/deprecated";
|
|
|
25
25
|
import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection";
|
|
26
26
|
import withDefaultProps from "./src/withDefaultProps";
|
|
27
27
|
import isRTL from "./src/isRTL";
|
|
28
|
-
|
|
28
|
+
import { BpkDialogWrapper } from "./src/BpkDialogWrapper/BpkDialogWrapper";
|
|
29
|
+
export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
|
|
29
30
|
export default {
|
|
30
31
|
Portal,
|
|
31
32
|
TransitionInitialMount,
|
|
@@ -36,5 +37,6 @@ export default {
|
|
|
36
37
|
isDeviceIphone,
|
|
37
38
|
isDeviceIpad,
|
|
38
39
|
isDeviceIos,
|
|
39
|
-
isRTL
|
|
40
|
+
isRTL,
|
|
41
|
+
BpkDialogWrapper
|
|
40
42
|
};
|
|
@@ -0,0 +1,144 @@
|
|
|
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 { useEffect, useRef, useState } from "react";
|
|
20
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
21
|
+
import CSSTransition from 'react-transition-group/CSSTransition';
|
|
22
|
+
import cssModules from "../cssModules";
|
|
23
|
+
import STYLES from "./BpkDialogWrapper.module.css";
|
|
24
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
|
+
const getClassName = cssModules(STYLES);
|
|
27
|
+
;
|
|
28
|
+
// TODO: this check if the browser support the HTML dialog element. We can remove it once we drop support as a business for Safari 14
|
|
29
|
+
const dialogSupported = typeof HTMLDialogElement === 'function';
|
|
30
|
+
const setPageProperties = ({
|
|
31
|
+
isDialogOpen
|
|
32
|
+
}) => {
|
|
33
|
+
document.body.style.overflowY = isDialogOpen ? 'hidden' : 'visible';
|
|
34
|
+
if (!dialogSupported) {
|
|
35
|
+
document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
|
|
36
|
+
document.body.style.width = isDialogOpen ? '100%' : 'auto';
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
export const BpkDialogWrapper = props => {
|
|
40
|
+
const {
|
|
41
|
+
ariaLabelledby,
|
|
42
|
+
children,
|
|
43
|
+
closeOnEscPressed = false,
|
|
44
|
+
closeOnScrimClick = false,
|
|
45
|
+
dialogClassName = '',
|
|
46
|
+
exiting = false,
|
|
47
|
+
id,
|
|
48
|
+
isOpen,
|
|
49
|
+
onClose,
|
|
50
|
+
timeout = {
|
|
51
|
+
appear: 0,
|
|
52
|
+
exit: 0
|
|
53
|
+
},
|
|
54
|
+
transitionClassNames = {}
|
|
55
|
+
} = props;
|
|
56
|
+
const ref = useRef(null);
|
|
57
|
+
const [dialogTarget, setDialogTarget] = useState(null);
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
const dialog = document.getElementById(`${id}`);
|
|
60
|
+
const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
|
|
61
|
+
const handleBackdropClick = modal => {
|
|
62
|
+
if (closeOnScrimClick && modal) {
|
|
63
|
+
modal.addEventListener('click', event => {
|
|
64
|
+
const {
|
|
65
|
+
target
|
|
66
|
+
} = event;
|
|
67
|
+
if (target === modal) {
|
|
68
|
+
onClose(event, {
|
|
69
|
+
source: "DOCUMENT_CLICK"
|
|
70
|
+
});
|
|
71
|
+
event.stopPropagation();
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
const handleKeyDown = event => {
|
|
77
|
+
if (closeOnEscPressed && event.key === 'Escape' && (!dialogWithPolyfill || event.target === dialogWithPolyfill)) {
|
|
78
|
+
onClose(event, {
|
|
79
|
+
source: "ESCAPE"
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
event.stopPropagation();
|
|
83
|
+
};
|
|
84
|
+
if (isOpen) {
|
|
85
|
+
// There is a bug on older versions of browser using chromium (chrome, firefox, edge >114) where the dialog got an open attribute even before it is opened.
|
|
86
|
+
// Therefore, when trying to open it, it crashes and log an error mentioning the dialog has already an open attribute.
|
|
87
|
+
ref.current?.removeAttribute('open');
|
|
88
|
+
ref.current?.showModal?.();
|
|
89
|
+
if (dialogWithPolyfill) {
|
|
90
|
+
setDialogTarget(dialogWithPolyfill);
|
|
91
|
+
handleBackdropClick(dialogWithPolyfill);
|
|
92
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
93
|
+
} else {
|
|
94
|
+
setDialogTarget(dialog);
|
|
95
|
+
}
|
|
96
|
+
handleBackdropClick(dialog);
|
|
97
|
+
} else {
|
|
98
|
+
ref.current?.close?.();
|
|
99
|
+
}
|
|
100
|
+
setPageProperties({
|
|
101
|
+
isDialogOpen: isOpen
|
|
102
|
+
});
|
|
103
|
+
return () => {
|
|
104
|
+
setPageProperties({
|
|
105
|
+
isDialogOpen: false
|
|
106
|
+
});
|
|
107
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
108
|
+
};
|
|
109
|
+
}, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
|
|
110
|
+
return isOpen ? /*#__PURE__*/_jsxs("div", {
|
|
111
|
+
className: getClassName('bpk-dialog-wrapper', !dialogSupported && 'bpk-dialog-wrapper--polyfill'),
|
|
112
|
+
children: [!dialogSupported && /*#__PURE__*/_jsx("div", {
|
|
113
|
+
id: `${id}-polyfill`,
|
|
114
|
+
className: getClassName('bpk-dialog-wrapper--backdrop'),
|
|
115
|
+
"data-open": isOpen
|
|
116
|
+
}), /*#__PURE__*/_jsx(CSSTransition, {
|
|
117
|
+
classNames: transitionClassNames,
|
|
118
|
+
in: !exiting,
|
|
119
|
+
appear: !exiting,
|
|
120
|
+
exit: exiting,
|
|
121
|
+
timeout: timeout,
|
|
122
|
+
children: /*#__PURE__*/_jsx("dialog", {
|
|
123
|
+
id: id,
|
|
124
|
+
className: getClassName('bpk-dialog-wrapper--container', dialogClassName),
|
|
125
|
+
onCancel: e => {
|
|
126
|
+
e.preventDefault();
|
|
127
|
+
if (closeOnEscPressed && (!dialogTarget || e.target === dialogTarget)) {
|
|
128
|
+
onClose(e, {
|
|
129
|
+
source: 'ESCAPE'
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
"aria-labelledby": ariaLabelledby,
|
|
134
|
+
"data-open": isOpen,
|
|
135
|
+
ref: ref,
|
|
136
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
137
|
+
className: getClassName('bpk-dialog-wrapper--contents'),
|
|
138
|
+
id: `${id}-contents`,
|
|
139
|
+
children: children
|
|
140
|
+
})
|
|
141
|
+
})
|
|
142
|
+
})]
|
|
143
|
+
}) : null;
|
|
144
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
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 { ReactNode } from 'react';
|
|
20
|
+
import type {Props as DialogWrapperProps} from './BpkDialogWrapper';
|
|
21
|
+
export type Props = Partial<DialogWrapperProps> & {
|
|
22
|
+
ariaLabelledby: string;
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
closeOnEscPressed?: boolean;
|
|
25
|
+
closeOnScrimClick?: boolean;
|
|
26
|
+
dialogClassName?: string;
|
|
27
|
+
id: string | undefined;
|
|
28
|
+
isOpen: boolean;
|
|
29
|
+
onClose: (
|
|
30
|
+
arg0?: Event | KeyboardEvent | MouseEvent | PointerEvent | TouchEvent,
|
|
31
|
+
arg1?: {
|
|
32
|
+
source: 'ESCAPE' | 'DOCUMENT_CLICK';
|
|
33
|
+
},
|
|
34
|
+
) => void | null;
|
|
35
|
+
exiting?: boolean;
|
|
36
|
+
transitionClassNames?: {
|
|
37
|
+
appear?: string,
|
|
38
|
+
appearActive?: string,
|
|
39
|
+
exit?: string
|
|
40
|
+
};
|
|
41
|
+
timeout?: {appear?: number, exit?: number};
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
declare const BpkDialogWrapper: ({ariaLabelledby, children, closeOnEscPressed, closeOnScrimClick, dialogClassName, id, isOpen, onClose, exiting, transitionClassNames, timeout}: Props) => JSX.Element;
|
|
45
|
+
export default BpkDialogWrapper;
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
@keyframes bpk-dialog-wrapper-scrim{0%{opacity:0}100%{opacity:1}}.bpk-dialog-wrapper--container{padding:0;border:none}.bpk-dialog-wrapper--container::backdrop{position:fixed;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 400ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-dialog-wrapper--backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,.7);animation:bpk-dialog-wrapper-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-dialog-wrapper--contents{min-height:100%;padding:0}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyscanner/backpack-web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "33.0.0",
|
|
4
4
|
"description": "Backpack Design System web library",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"a11y-focus-store": "^1.0.0",
|
|
31
31
|
"d3-path": "^2.0.0",
|
|
32
32
|
"d3-scale": "^4.0.2",
|
|
33
|
-
"date-fns": "^
|
|
33
|
+
"date-fns": "^3.3.1",
|
|
34
34
|
"intersection-observer": "^0.7.0",
|
|
35
35
|
"lodash": "^4.17.20",
|
|
36
36
|
"lodash.clamp": "^4.0.3",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"react-responsive": "^9.0.2",
|
|
43
43
|
"react-slider": "^2.0.6",
|
|
44
44
|
"react-table": "^7.8.0",
|
|
45
|
-
"react-virtualized-auto-sizer": "
|
|
45
|
+
"react-virtualized-auto-sizer": "1.0.20",
|
|
46
46
|
"react-window": "^1.8.7"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
@@ -1,96 +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
|
-
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
20
|
-
import CSSTransition from 'react-transition-group/CSSTransition';
|
|
21
|
-
|
|
22
|
-
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
23
|
-
import { BpkButtonLink } from "../../bpk-component-link";
|
|
24
|
-
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
25
|
-
import BpkCloseButton from "../../bpk-component-close-button";
|
|
26
|
-
import BpkNavigationBar from "../../bpk-component-navigation-bar";
|
|
27
|
-
import { cssModules } from "../../bpk-react-utils";
|
|
28
|
-
import STYLES from "./BpkBottomSheetInner.module.css";
|
|
29
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
30
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
31
|
-
const getClassName = cssModules(STYLES);
|
|
32
|
-
const BpkBottomSheetInner = ({
|
|
33
|
-
actionText = '',
|
|
34
|
-
children,
|
|
35
|
-
closeLabel = '',
|
|
36
|
-
dialogRef,
|
|
37
|
-
exiting,
|
|
38
|
-
id,
|
|
39
|
-
onAction = () => null,
|
|
40
|
-
onClose,
|
|
41
|
-
title = '',
|
|
42
|
-
wide = false
|
|
43
|
-
}) => {
|
|
44
|
-
const classNames = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
|
|
45
|
-
const headingId = `bpk-bottom-sheet-heading-${id}`;
|
|
46
|
-
return /*#__PURE__*/_jsx(CSSTransition, {
|
|
47
|
-
classNames: {
|
|
48
|
-
appear: getClassName('bpk-bottom-sheet--appear'),
|
|
49
|
-
appearActive: getClassName('bpk-bottom-sheet--appear-active'),
|
|
50
|
-
exit: getClassName('bpk-bottom-sheet--exit')
|
|
51
|
-
},
|
|
52
|
-
in: !exiting,
|
|
53
|
-
appear: !exiting,
|
|
54
|
-
exit: exiting,
|
|
55
|
-
timeout: {
|
|
56
|
-
appear: 240,
|
|
57
|
-
exit: 240
|
|
58
|
-
},
|
|
59
|
-
children: /*#__PURE__*/_jsxs("section", {
|
|
60
|
-
id: id,
|
|
61
|
-
tabIndex: -1,
|
|
62
|
-
role: "dialog",
|
|
63
|
-
"aria-labelledby": headingId,
|
|
64
|
-
className: classNames,
|
|
65
|
-
ref: dialogRef,
|
|
66
|
-
children: [/*#__PURE__*/_jsx("header", {
|
|
67
|
-
className: getClassName('bpk-bottom-sheet--header'),
|
|
68
|
-
children: /*#__PURE__*/_jsx(BpkNavigationBar, {
|
|
69
|
-
id: headingId,
|
|
70
|
-
className: getClassName('bpk-bottom-sheet--navigation'),
|
|
71
|
-
title: title && /*#__PURE__*/_jsx("h2", {
|
|
72
|
-
id: headingId,
|
|
73
|
-
className: getClassName('bpk-bottom-sheet--heading'),
|
|
74
|
-
children: title
|
|
75
|
-
}),
|
|
76
|
-
leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
|
|
77
|
-
className: getClassName('bpk-bottom-sheet--close-button'),
|
|
78
|
-
label: closeLabel,
|
|
79
|
-
onClick: onClose
|
|
80
|
-
}),
|
|
81
|
-
trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
|
|
82
|
-
className: getClassName('bpk-bottom-sheet--action-button'),
|
|
83
|
-
onClick: onAction,
|
|
84
|
-
children: actionText
|
|
85
|
-
}) : /*#__PURE__*/_jsx("div", {
|
|
86
|
-
className: getClassName('bpk-bottom-sheet--action-button')
|
|
87
|
-
})
|
|
88
|
-
})
|
|
89
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
90
|
-
className: getClassName('bpk-bottom-sheet--content'),
|
|
91
|
-
children: children
|
|
92
|
-
})]
|
|
93
|
-
})
|
|
94
|
-
});
|
|
95
|
-
};
|
|
96
|
-
export default BpkBottomSheetInner;
|
|
@@ -1,18 +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
|
-
.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;-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;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.bpk-bottom-sheet::-webkit-scrollbar{display:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.bpk-bottom-sheet--appear{animation-duration:.24s;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-direction:reverse;animation-duration:.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-bottom-sheet--navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-bottom-sheet--heading{width:calc(100% - ((3rem)*2 + 0.125rem));margin-right:auto;text-align:center;margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-bottom-sheet--close-button{position:relative;left:auto;margin-right:1.5rem}html[dir=rtl] .bpk-bottom-sheet--close-button{right:auto;margin-right:.125rem;margin-left:1.5rem}.bpk-bottom-sheet--action-button{position:relative;right:auto;width:calc(3rem - (0.25rem));margin-right:.125rem;margin-left:.25rem;word-break:break-all}html[dir=rtl] .bpk-bottom-sheet--action-button{left:auto;margin-right:.25rem;margin-left:.125rem}
|