@skyscanner/backpack-web 38.5.0 → 38.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bpk-component-bubble/icons/BpkBubbleArrow.d.ts +5 -0
- package/bpk-component-bubble/icons/BpkBubbleArrow.js +35 -0
- package/bpk-component-bubble/index.d.ts +3 -0
- package/bpk-component-bubble/index.js +20 -0
- package/bpk-component-bubble/src/BpkBubble.d.ts +5 -0
- package/bpk-component-bubble/src/BpkBubble.js +38 -0
- package/bpk-component-bubble/src/BpkBubble.module.css +18 -0
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.d.ts +6 -1
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +36 -4
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css +1 -1
- package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.d.ts +1 -0
- package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.js +17 -8
- package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.module.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/*
|
|
3
|
+
* Backpack - Skyscanner's Design System
|
|
4
|
+
*
|
|
5
|
+
* Copyright 2016 Skyscanner Ltd
|
|
6
|
+
*
|
|
7
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License.
|
|
9
|
+
* You may obtain a copy of the License at
|
|
10
|
+
*
|
|
11
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
*
|
|
13
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
14
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
+
* See the License for the specific language governing permissions and
|
|
17
|
+
* limitations under the License.
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
const BpkBubbleArrow = ({
|
|
21
|
+
styles
|
|
22
|
+
}) => /*#__PURE__*/_jsx("svg", {
|
|
23
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
24
|
+
width: "23",
|
|
25
|
+
height: "5",
|
|
26
|
+
viewBox: "0 0 23 5",
|
|
27
|
+
fill: "none",
|
|
28
|
+
"aria-hidden": "true",
|
|
29
|
+
className: styles,
|
|
30
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
31
|
+
d: "M22.4116 0C21.4371 0.0363497 20.4853 0.288304 19.639 0.740739L13.1471 4.20667C12.6461 4.47294 12.0775 4.6127 11.4996 4.6127C10.9219 4.61263 10.354 4.47288 9.8531 4.20667L3.36122 0.740739C2.51489 0.28829 1.56307 0.0363716 0.588623 0H22.4116Z",
|
|
32
|
+
fill: "currentColor"
|
|
33
|
+
})
|
|
34
|
+
});
|
|
35
|
+
export default BpkBubbleArrow;
|
|
@@ -0,0 +1,20 @@
|
|
|
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 BpkBubble from "./src/BpkBubble";
|
|
20
|
+
export default BpkBubble;
|
|
@@ -0,0 +1,38 @@
|
|
|
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 BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../bpk-component-text";
|
|
20
|
+
import { cssModules } from "../../bpk-react-utils";
|
|
21
|
+
import BpkBubbleArrow from "../icons/BpkBubbleArrow";
|
|
22
|
+
import STYLES from "./BpkBubble.module.css";
|
|
23
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
+
const getClassName = cssModules(STYLES);
|
|
25
|
+
const BpkBubble = ({
|
|
26
|
+
children
|
|
27
|
+
}) => /*#__PURE__*/_jsxs("span", {
|
|
28
|
+
className: getClassName('bpk-bubble'),
|
|
29
|
+
children: [/*#__PURE__*/_jsx(BpkText, {
|
|
30
|
+
textStyle: TEXT_STYLES.label3,
|
|
31
|
+
tagName: "span",
|
|
32
|
+
color: TEXT_COLORS.textOnDark,
|
|
33
|
+
children: children
|
|
34
|
+
}), /*#__PURE__*/_jsx(BpkBubbleArrow, {
|
|
35
|
+
styles: getClassName('bpk-bubble__arrow')
|
|
36
|
+
})]
|
|
37
|
+
});
|
|
38
|
+
export default BpkBubble;
|
|
@@ -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
|
+
.bpk-bubble{position:relative;display:inline-flex;width:auto;height:1.25rem;padding:0 .5rem;flex-direction:column;justify-content:center;border-radius:.25rem;background-color:#e70866;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;text-align:center;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-bubble__arrow{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);color:#e70866}
|
|
@@ -22,6 +22,11 @@ export type Props = {
|
|
|
22
22
|
invertVertically?: boolean;
|
|
23
23
|
textAlign: (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN];
|
|
24
24
|
style?: {};
|
|
25
|
+
/**
|
|
26
|
+
* Optional link href. If provided, the component will render as an anchor tag <a> instead of a <div>.
|
|
27
|
+
* This improves semantic HTML and SEO.
|
|
28
|
+
*/
|
|
29
|
+
href?: string | null;
|
|
25
30
|
};
|
|
26
|
-
declare const BpkGraphicPromo: ({ buttonText, className, contentId, headline, invertVertically, onClick, sponsor, style, subheading, tagline, textAlign, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
declare const BpkGraphicPromo: ({ buttonText, className, contentId, headline, href, invertVertically, onClick, sponsor, style, subheading, tagline, textAlign, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
27
32
|
export default BpkGraphicPromo;
|
|
@@ -51,11 +51,44 @@ const constructAriaLabel = ({
|
|
|
51
51
|
addText(buttonText);
|
|
52
52
|
return text.join('. ');
|
|
53
53
|
};
|
|
54
|
+
const Wrapper = ({
|
|
55
|
+
'aria-label': ariaLabel = '',
|
|
56
|
+
cardClasses = '',
|
|
57
|
+
children,
|
|
58
|
+
href,
|
|
59
|
+
id,
|
|
60
|
+
onClick,
|
|
61
|
+
onKeyDown,
|
|
62
|
+
style = {}
|
|
63
|
+
}) => {
|
|
64
|
+
const commonProps = {
|
|
65
|
+
id,
|
|
66
|
+
style,
|
|
67
|
+
'aria-label': ariaLabel,
|
|
68
|
+
onClick,
|
|
69
|
+
onKeyDown,
|
|
70
|
+
className: cardClasses
|
|
71
|
+
};
|
|
72
|
+
if (href) {
|
|
73
|
+
return /*#__PURE__*/_jsx("a", {
|
|
74
|
+
href: href,
|
|
75
|
+
...commonProps,
|
|
76
|
+
children: children
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
return /*#__PURE__*/_jsx("div", {
|
|
80
|
+
...commonProps,
|
|
81
|
+
tabIndex: 0,
|
|
82
|
+
role: "link",
|
|
83
|
+
children: children
|
|
84
|
+
});
|
|
85
|
+
};
|
|
54
86
|
const BpkGraphicPromo = ({
|
|
55
87
|
buttonText,
|
|
56
88
|
className = null,
|
|
57
89
|
contentId,
|
|
58
90
|
headline,
|
|
91
|
+
href = null,
|
|
59
92
|
invertVertically = false,
|
|
60
93
|
onClick,
|
|
61
94
|
sponsor = null,
|
|
@@ -78,11 +111,11 @@ const BpkGraphicPromo = ({
|
|
|
78
111
|
// The card appears as a single component for the screen reader; its children are hidden. The card handles mouse
|
|
79
112
|
// clicks and key presses (Enter/Space) for the whole component, as described here:
|
|
80
113
|
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
|
|
81
|
-
_jsx(
|
|
114
|
+
_jsx(Wrapper, {
|
|
82
115
|
id: contentId || '',
|
|
83
|
-
|
|
116
|
+
cardClasses: cardClasses,
|
|
84
117
|
style: style,
|
|
85
|
-
|
|
118
|
+
href: href,
|
|
86
119
|
"aria-label": constructAriaLabel({
|
|
87
120
|
buttonText,
|
|
88
121
|
headline,
|
|
@@ -90,7 +123,6 @@ const BpkGraphicPromo = ({
|
|
|
90
123
|
subheading,
|
|
91
124
|
tagline
|
|
92
125
|
}),
|
|
93
|
-
tabIndex: 0,
|
|
94
126
|
onClick: onClickWrapper,
|
|
95
127
|
onKeyDown: onKeyWrapper,
|
|
96
128
|
children: /*#__PURE__*/_jsxs("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-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{max-width:76.5rem;margin-right:auto;margin-left:auto;background-color:#05203c;background-position:center;background-size:cover;color:#fff;box-shadow:none}@media(max-width: 48rem){.bpk-graphic-promo{padding-top:133%;box-sizing:border-box}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__container{display:flex;flex-direction:column;justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}@media(min-width: 64.0625rem){.bpk-graphic-promo__container{height:28.75rem;margin-left:4rem;margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:4rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media(max-width: 64rem){.bpk-graphic-promo__container{height:22.5rem;margin-left:2.5rem;margin-right:2rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media(max-width: 48rem){.bpk-graphic-promo__container{padding:2rem;justify-content:space-between;align-items:start;text-align:start;margin-left:0;margin-right:0;position:absolute;top:0;right:0;left:0;height:100%}html[dir=rtl] .bpk-graphic-promo__container{margin-left:0;margin-right:0}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}.bpk-graphic-promo__container>*{margin-left:0;margin-right:0}html[dir=rtl] .bpk-graphic-promo__container>*{margin-left:0;margin-right:0}}@media(max-width: 22.4375rem){.bpk-graphic-promo__container{padding:1.5rem}}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.25rem;font-weight:700}@media(max-width: 64rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__tagline{font-size:1.5rem;line-height:2rem;font-weight:400}}@media(max-width: 22.4375rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__headline{margin:0}@media(min-width: 64.0625rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__headline{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 48rem){.bpk-graphic-promo__headline{margin-bottom:.5rem}}@media(max-width: 32rem){.bpk-graphic-promo__headline{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-graphic-promo__subheading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}@media(max-width: 64rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__subheading{font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 32rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{display:flex;flex-direction:column}.bpk-graphic-promo__promo-content--start,.bpk-graphic-promo__sponsor-content--start{align-items:start;text-align:start}.bpk-graphic-promo__promo-content--center,.bpk-graphic-promo__sponsor-content--center{align-items:center;text-align:center}.bpk-graphic-promo__promo-content--end,.bpk-graphic-promo__sponsor-content--end{align-items:start;text-align:start}@media(min-width: 64.0625rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:22.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:20rem}}@media(max-width: 48rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:initial;align-items:start;text-align:start}}.bpk-graphic-promo__sponsor-content{display:flex;margin-bottom:1rem;flex-direction:column}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-content{margin-bottom:initial}}.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 22.4375rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__sponsor-logo{width:auto;max-width:9.25rem;height:auto;max-height:3.75rem}.bpk-graphic-promo__cta{margin-top:2rem}@media(max-width: 48rem){.bpk-graphic-promo__cta{display:none}}
|
|
18
|
+
.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{display:block;max-width:76.5rem;margin-right:auto;margin-left:auto;background-color:#05203c;background-position:center;background-size:cover;color:#fff;text-decoration:none;box-shadow:none}@media(max-width: 48rem){.bpk-graphic-promo{padding-top:133%;box-sizing:border-box}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__container{display:flex;flex-direction:column;justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}@media(min-width: 64.0625rem){.bpk-graphic-promo__container{height:28.75rem;margin-left:4rem;margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:4rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media(max-width: 64rem){.bpk-graphic-promo__container{height:22.5rem;margin-left:2.5rem;margin-right:2rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media(max-width: 48rem){.bpk-graphic-promo__container{padding:2rem;justify-content:space-between;align-items:start;text-align:start;margin-left:0;margin-right:0;position:absolute;top:0;right:0;left:0;height:100%}html[dir=rtl] .bpk-graphic-promo__container{margin-left:0;margin-right:0}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}.bpk-graphic-promo__container>*{margin-left:0;margin-right:0}html[dir=rtl] .bpk-graphic-promo__container>*{margin-left:0;margin-right:0}}@media(max-width: 22.4375rem){.bpk-graphic-promo__container{padding:1.5rem}}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.25rem;font-weight:700}@media(max-width: 64rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__tagline{font-size:1.5rem;line-height:2rem;font-weight:400}}@media(max-width: 22.4375rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__headline{margin:0}@media(min-width: 64.0625rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__headline{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 48rem){.bpk-graphic-promo__headline{margin-bottom:.5rem}}@media(max-width: 32rem){.bpk-graphic-promo__headline{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-graphic-promo__subheading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}@media(max-width: 64rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__subheading{font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 32rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{display:flex;flex-direction:column}.bpk-graphic-promo__promo-content--start,.bpk-graphic-promo__sponsor-content--start{align-items:start;text-align:start}.bpk-graphic-promo__promo-content--center,.bpk-graphic-promo__sponsor-content--center{align-items:center;text-align:center}.bpk-graphic-promo__promo-content--end,.bpk-graphic-promo__sponsor-content--end{align-items:start;text-align:start}@media(min-width: 64.0625rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:22.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:20rem}}@media(max-width: 48rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:initial;align-items:start;text-align:start}}.bpk-graphic-promo__sponsor-content{display:flex;margin-bottom:1rem;flex-direction:column}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-content{margin-bottom:initial}}.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 22.4375rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__sponsor-logo{width:auto;max-width:9.25rem;height:auto;max-height:3.75rem}.bpk-graphic-promo__cta{margin-top:2rem}@media(max-width: 48rem){.bpk-graphic-promo__cta{display:none}}
|
|
@@ -17,10 +17,11 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import { useState } from 'react';
|
|
20
|
+
import BpkBubble from "../../bpk-component-bubble/src/BpkBubble";
|
|
20
21
|
import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
|
|
21
22
|
import { cssModules } from "../../bpk-react-utils";
|
|
22
23
|
import STYLES from "./BpkNavigationTabGroup.module.css";
|
|
23
|
-
import { jsx as _jsx,
|
|
24
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
24
25
|
const getClassName = cssModules(STYLES);
|
|
25
26
|
export const NAVIGATION_TAB_GROUP_TYPES = {
|
|
26
27
|
CanvasDefault: 'canvas-default',
|
|
@@ -92,13 +93,21 @@ const BpkNavigationTabGroup = ({
|
|
|
92
93
|
onClick: e => handleButtonClick(e, tab, index),
|
|
93
94
|
type: type,
|
|
94
95
|
children: /*#__PURE__*/_jsxs(_Fragment, {
|
|
95
|
-
children: [
|
|
96
|
-
className: getClassName('bpk-navigation-tab-
|
|
97
|
-
children: /*#__PURE__*/_jsx(
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
96
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
97
|
+
className: getClassName('bpk-navigation-tab-content-wrapper'),
|
|
98
|
+
children: [Icon && /*#__PURE__*/_jsx("span", {
|
|
99
|
+
className: getClassName('bpk-navigation-tab-icon', `bpk-navigation-tab-icon--${type}`, selected && `bpk-navigation-tab-icon--${type}-selected`),
|
|
100
|
+
children: /*#__PURE__*/_jsx(Icon, {})
|
|
101
|
+
}), /*#__PURE__*/_jsx(BpkText, {
|
|
102
|
+
tagName: "span",
|
|
103
|
+
textStyle: TEXT_STYLES.label2,
|
|
104
|
+
children: text
|
|
105
|
+
})]
|
|
106
|
+
}), tab.badgeText && /*#__PURE__*/_jsx("span", {
|
|
107
|
+
className: getClassName('bpk-navigation-tab-bubble-wrapper'),
|
|
108
|
+
children: /*#__PURE__*/_jsx(BpkBubble, {
|
|
109
|
+
children: tab.badgeText
|
|
110
|
+
})
|
|
102
111
|
})]
|
|
103
112
|
})
|
|
104
113
|
}, `index-${index.toString()}`);
|
|
@@ -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-navigation-tab-group{display:flex}.bpk-navigation-tab-group .bpk-navigation-tab-list{display:flex}.bpk-navigation-tab-group .bpk-navigation-tab-wrap{height:2.25rem;padding:0 1rem;border:none;border-radius:6.25rem;margin-inline-end:.25rem;display:flex;align-items:center;text-decoration:none;white-space:nowrap}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast:hover{background-color:#154679;box-shadow:0 0 0 1px #154679 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected:hover{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default:hover{color:#161616;box-shadow:0 0 0 1px #161616 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected:hover{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-icon{height:1rem;margin-inline-end:.5rem}.bpk-navigation-tab-group .bpk-navigation-tab-icon--surface-contrast{fill:#fff}.bpk-navigation-tab-group .bpk-navigation-tab-icon--canvas-default-selected{fill:#fff}
|
|
18
|
+
.bpk-navigation-tab-group{display:flex}.bpk-navigation-tab-group .bpk-navigation-tab-content-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.bpk-navigation-tab-group .bpk-navigation-tab-bubble-wrapper{position:absolute;top:-0.625rem;right:.25rem;display:block;max-width:4rem;transform:translateX(50%)}html[dir=rtl] .bpk-navigation-tab-group .bpk-navigation-tab-bubble-wrapper{right:auto;left:.25rem;transform:translateX(-50%)}.bpk-navigation-tab-group .bpk-navigation-tab-list{display:flex}.bpk-navigation-tab-group .bpk-navigation-tab-wrap{position:relative;height:2.25rem;padding:0 1rem;border:none;border-radius:6.25rem;margin-inline-end:.25rem;display:flex;align-items:center;text-decoration:none;white-space:nowrap}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast:hover{background-color:#154679;box-shadow:0 0 0 1px #154679 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected:hover{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default:hover{color:#161616;box-shadow:0 0 0 1px #161616 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected:hover{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-icon{height:1rem;margin-inline-end:.5rem}.bpk-navigation-tab-group .bpk-navigation-tab-icon--surface-contrast{fill:#fff}.bpk-navigation-tab-group .bpk-navigation-tab-icon--canvas-default-selected{fill:#fff}
|