@skyscanner/backpack-web 36.9.1 → 36.11.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.
Files changed (8) hide show
  1. package/bpk-component-icon/lg/award.js +1 -1
  2. package/bpk-component-icon/lg/loyalty.js +14 -0
  3. package/bpk-component-icon/sm/award.js +1 -1
  4. package/bpk-component-icon/sm/loyalty.js +14 -0
  5. package/bpk-component-inset-banner/src/BpkInsetBanner.d.ts +9 -0
  6. package/bpk-component-inset-banner/src/BpkInsetBanner.js +45 -2
  7. package/bpk-component-inset-banner/src/BpkInsetBanner.module.css +1 -1
  8. package/package.json +2 -2
package/bpk-component-icon/lg/award.js CHANGED
@@ -8,7 +8,7 @@ const AwardIcon = props => /*#__PURE__*/_jsx("svg", {
8
8
  height: "1.5rem",
9
9
  ...props,
10
10
  children: /*#__PURE__*/_jsx("path", {
11
- d: "M19 1.5H5a3 3 0 0 0-3 3v3.7a2 2 0 0 0 1.188 1.828l6.657 2.96a5 5 0 1 0 4.31 0l6.657-2.96A2 2 0 0 0 22 8.2V4.5a3 3 0 0 0-3-3m-4 16a3 3 0 1 1-3-3 3 3 0 0 1 3 3m0-8.618a1 1 0 0 1-.553.894l-2 1a1 1 0 0 1-.894 0l-2-1A1 1 0 0 1 9 8.882V4.5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z"
11
+ d: "m15.431 9.576-.034.033a6.75 6.75 0 0 1 3.353 5.823 6.757 6.757 0 0 1-6.75 6.75 6.757 6.757 0 0 1-6.75-6.75A6.75 6.75 0 0 1 8.603 9.61a27 27 0 0 1-.793-.76c-2.44-2.43-3.983-4.828-4.685-6.04l1.298-.753c.665 1.15 2.128 3.421 4.447 5.731.296.296.59.582.885.848q.11.1.22.192l.148.126A6.7 6.7 0 0 1 12 8.683c.3 0 .594.026.884.064a25 25 0 0 1-1.381-1.106 24 24 0 0 1-1.288-1.22 28 28 0 0 1-3-3.557L8.44 2a26.8 26.8 0 0 0 3.547 4.053l.166-.151c.186-.17.372-.339.558-.529A27 27 0 0 0 15.56 2l1.227.864a28 28 0 0 1-3.005 3.562c-.153.156-.306.296-.46.436l-.196.18c.584.477 1.116.874 1.553 1.179l.128-.122q.16-.149.323-.31c2.32-2.312 3.783-4.584 4.448-5.733l1.298.752c-.702 1.213-2.245 3.61-4.686 6.042-.254.254-.508.492-.758.726m-1.484 6.52.86-.318a.297.297 0 0 0 0-.556l-.86-.318a2.29 2.29 0 0 1-1.351-1.351l-.318-.86a.296.296 0 0 0-.556 0l-.318.86a2.29 2.29 0 0 1-1.351 1.351l-.86.318a.297.297 0 0 0 0 .556l.86.318c.626.232 1.12.725 1.35 1.351l.319.86c.095.258.46.258.556 0l.318-.86a2.29 2.29 0 0 1 1.351-1.351"
12
12
  })
13
13
  });
14
14
  export default AwardIcon;
package/bpk-component-icon/lg/loyalty.js ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const LoyaltyIcon = props => /*#__PURE__*/_jsx("svg", {
4
+ xmlns: "http://www.w3.org/2000/svg",
5
+ viewBox: "0 0 24 24",
6
+ "aria-hidden": "true",
7
+ width: "1.5rem",
8
+ height: "1.5rem",
9
+ ...props,
10
+ children: /*#__PURE__*/_jsx("path", {
11
+ d: "M17 2H7a1 1 0 0 0-1 1v7.646a3 3 0 0 0 1.658 2.683L11 15v4H9a2 2 0 0 0-2 2v1h10v-1a2 2 0 0 0-2-2h-2v-4l3.342-1.67A3 3 0 0 0 18 10.645V3a1 1 0 0 0-1-1M19 9.5c0-.276.227-.494.495-.562a2 2 0 0 0 0-3.876C19.227 4.994 19 4.776 19 4.5v-1c0-.276.225-.503.499-.47a4 4 0 0 1 0 7.94c-.274.033-.499-.194-.499-.47zM4.505 8.938c.268.068.495.286.495.562v1c0 .276-.225.503-.499.47a4 4 0 0 1 0-7.94c.274-.033.499.194.499.47v1c0 .276-.227.494-.495.562a2 2 0 0 0 0 3.876"
12
+ })
13
+ });
14
+ export default LoyaltyIcon;
package/bpk-component-icon/sm/award.js CHANGED
@@ -8,7 +8,7 @@ const AwardIcon = props => /*#__PURE__*/_jsx("svg", {
8
8
  height: "1rem",
9
9
  ...props,
10
10
  children: /*#__PURE__*/_jsx("path", {
11
- d: "M19.5.75h-15a3 3 0 0 0-3 3v6.737a3 3 0 0 0 2.176 2.885l5.795 1.655a4.5 4.5 0 1 0 5.058 0l5.795-1.655a3 3 0 0 0 2.176-2.885V3.75a3 3 0 0 0-3-3M12 20.25a1.5 1.5 0 1 1 1.5-1.5 1.5 1.5 0 0 1-1.5 1.5m4.5-10.894a1.5 1.5 0 0 1-1.088 1.442l-3 1.202a1.5 1.5 0 0 1-.824 0l-3-1.202A1.5 1.5 0 0 1 7.5 9.356V5.25A1.5 1.5 0 0 1 9 3.75h6a1.5 1.5 0 0 1 1.5 1.5z"
11
+ d: "m15.431 9.828-.034.032a6.75 6.75 0 0 1 3.353 5.824 6.757 6.757 0 0 1-6.75 6.75 6.757 6.757 0 0 1-6.75-6.75 6.75 6.75 0 0 1 3.353-5.823 27 27 0 0 1-.793-.76C5.212 6.593 3.35 3.465 2.648 2.25l1.298-.751.014.024C4.634 2.687 6.2 5.393 8.87 8.04c.296.295.59.582.885.848q.11.1.22.192l.148.126A6.7 6.7 0 0 1 12 8.935c.3 0 .594.026.884.064a25 25 0 0 1-1.381-1.106 24 24 0 0 1-1.288-1.22c-1.283-1.233-2.687-3.078-3.549-4.3l1.227-.864c.801 1.137 2.14 2.894 3.39 4.112.238.242.472.467.705.684l.166-.151c.186-.17.372-.339.558-.529 1.228-1.188 2.592-2.983 3.393-4.12l1.227.864c-.861 1.222-2.285 3.1-3.551 4.309-.153.156-.306.296-.46.436l-.196.18c.584.477 1.116.874 1.553 1.179l.128-.122c.107-.101.214-.202.323-.311 2.682-2.665 4.12-5.156 4.823-6.374l.093-.161 1.298.752-.03.052c-.718 1.24-2.333 4.031-5.124 6.793-.254.254-.508.492-.758.726m-.625 6.134a.297.297 0 0 0 0-.556l-.859-.318a2.29 2.29 0 0 1-1.351-1.351l-.318-.86a.296.296 0 0 0-.556 0l-.318.86a2.29 2.29 0 0 1-1.351 1.351l-.86.318a.297.297 0 0 0 0 .556l.86.318c.626.232 1.12.725 1.35 1.351l.319.86c.095.258.46.258.556 0l.318-.86a2.29 2.29 0 0 1 1.351-1.35z"
12
12
  })
13
13
  });
14
14
  export default AwardIcon;
package/bpk-component-icon/sm/loyalty.js ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ const LoyaltyIcon = props => /*#__PURE__*/_jsx("svg", {
4
+ xmlns: "http://www.w3.org/2000/svg",
5
+ viewBox: "0 0 24 24",
6
+ "aria-hidden": "true",
7
+ width: "1rem",
8
+ height: "1rem",
9
+ ...props,
10
+ children: /*#__PURE__*/_jsx("path", {
11
+ d: "M17 2H7a1 1 0 0 0-1 1v7.646a3 3 0 0 0 1.658 2.683L11 15v4H9a2 2 0 0 0-2 2v1h10v-1a2 2 0 0 0-2-2h-2v-4l3.342-1.67A3 3 0 0 0 18 10.645V3a1 1 0 0 0-1-1M19 9.5c0-.276.227-.494.495-.562a2 2 0 0 0 0-3.876C19.227 4.994 19 4.776 19 4.5v-1c0-.276.225-.503.499-.47a4 4 0 0 1 0 7.94c-.274.033-.499-.194-.499-.47zM4.505 8.938c.268.068.495.286.495.562v1c0 .276-.225.503-.499.47a4 4 0 0 1 0-7.94c.274-.033.499.194.499.47v1c0 .276-.227.494-.495.562a2 2 0 0 0 0 3.876"
12
+ })
13
+ });
14
+ export default LoyaltyIcon;
package/bpk-component-inset-banner/src/BpkInsetBanner.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { Placement } from '@floating-ui/react';
1
2
  export declare const VARIANT: {
2
3
  onLight: string;
3
4
  onDark: string;
@@ -12,6 +13,14 @@ export type Props = {
12
13
  };
13
14
  callToAction?: {
14
15
  text?: string;
16
+ popoverMessage?: string;
17
+ popoverPlacement?: Placement;
18
+ buttonCloseLabel?: string;
19
+ buttonA11yLabel?: string;
20
+ popverLabel?: string;
21
+ popoverId?: string;
22
+ labelTitle?: boolean;
23
+ closeBtnIcon?: boolean;
15
24
  };
16
25
  logo?: string;
17
26
  subheadline?: string;
package/bpk-component-inset-banner/src/BpkInsetBanner.js CHANGED
@@ -16,6 +16,8 @@
16
16
  * limitations under the License.
17
17
  */
18
18
  import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
19
+ import InfoIcon from "../../bpk-component-icon/sm/information-circle";
20
+ import BpkPopover from "../../bpk-component-popover/src/BpkPopover";
19
21
  import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
20
22
  import { cssModules } from "../../bpk-react-utils";
21
23
  import STYLES from "./BpkInsetBanner.module.css";
@@ -60,9 +62,50 @@ const BpkInsetBanner = ({
60
62
  children: subheadline
61
63
  })]
62
64
  })]
63
- }), /*#__PURE__*/_jsx("div", {
65
+ }), callToAction && callToAction.popoverMessage && /*#__PURE__*/_jsx("div", {
66
+ role: "presentation",
64
67
  className: getClassName('bpk-inset-banner--cta-container'),
65
- children: callToAction?.text && /*#__PURE__*/_jsx(BpkText, {
68
+ onClick: e => {
69
+ // Do not propagate the click on the trigger OR popover content up the DOM tree.
70
+ e.stopPropagation();
71
+ e.preventDefault();
72
+ },
73
+ children: /*#__PURE__*/_jsx(BpkPopover, {
74
+ id: callToAction?.popoverId || '',
75
+ label: callToAction?.popverLabel || '',
76
+ placement: callToAction?.popoverPlacement || 'bottom',
77
+ onClose: e => {
78
+ e.stopPropagation();
79
+ e.preventDefault();
80
+ },
81
+ closeButtonText: callToAction?.buttonCloseLabel,
82
+ closeButtonIcon: callToAction?.closeBtnIcon,
83
+ labelAsTitle: callToAction?.labelTitle,
84
+ target: /*#__PURE__*/_jsx("button", {
85
+ "aria-label": callToAction?.buttonA11yLabel,
86
+ className: getClassName('bpk-inset-banner--cta-button'),
87
+ "data-testid": "adInfoBtn",
88
+ "aria-hidden": "false",
89
+ type: "button",
90
+ children: /*#__PURE__*/_jsxs("div", {
91
+ className: getClassName('bpk-inset-banner--cta-content'),
92
+ children: [callToAction?.text && /*#__PURE__*/_jsx(BpkText, {
93
+ textStyle: TEXT_STYLES.caption,
94
+ children: callToAction.text
95
+ }), /*#__PURE__*/_jsx("div", {
96
+ className: getClassName('bpk-inset-banner--cta-info-icon'),
97
+ children: /*#__PURE__*/_jsx(InfoIcon, {})
98
+ })]
99
+ })
100
+ }),
101
+ children: /*#__PURE__*/_jsx(BpkText, {
102
+ tagName: "p",
103
+ children: callToAction?.popoverMessage
104
+ })
105
+ })
106
+ }), callToAction && !callToAction.popoverMessage && callToAction.text && /*#__PURE__*/_jsx("div", {
107
+ className: getClassName('bpk-inset-banner--cta-text'),
108
+ children: /*#__PURE__*/_jsx(BpkText, {
66
109
  textStyle: TEXT_STYLES.caption,
67
110
  children: callToAction.text
68
111
  })
package/bpk-component-inset-banner/src/BpkInsetBanner.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-inset-banner{display:flex;padding:.5rem 1rem;justify-content:space-between;border-radius:.5rem}.bpk-inset-banner--with-body{border-radius:.5rem .5rem 0 0}.bpk-inset-banner--on-light{color:#161616;fill:#161616}.bpk-inset-banner--on-dark{color:#fff;fill:#fff}.bpk-inset-banner--content-container{display:flex;align-items:center}.bpk-inset-banner--image{max-height:2rem;object-fit:contain;padding-inline-end:1rem}@media(max-width: 32rem){.bpk-inset-banner--image{max-height:1.5rem}}.bpk-inset-banner--text-container{display:flex;flex-direction:column}.bpk-inset-banner--cta-container{display:flex;align-items:center}.bpk-inset-banner-body-container{display:flex;padding:1rem;flex-direction:column;border-radius:0 0 .5rem .5rem;background-color:#eff3f8;color:#161616}.bpk-inset-banner-body-container--link-text{color:#0062e3;text-decoration:none}.bpk-no-touch-support .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}:global(.bpk-no-touch-support) .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}
18
+ .bpk-inset-banner{display:flex;padding:.5rem 1rem;justify-content:space-between;border-radius:.5rem}.bpk-inset-banner--with-body{border-radius:.5rem .5rem 0 0}.bpk-inset-banner--on-light{color:#161616;fill:#161616}.bpk-inset-banner--on-dark{color:#fff;fill:#fff}.bpk-inset-banner--content-container{display:flex;align-items:center}.bpk-inset-banner--image{max-height:2rem;object-fit:contain;padding-inline-end:1rem}@media(max-width: 32rem){.bpk-inset-banner--image{max-height:1.5rem}}.bpk-inset-banner--text-container{display:flex;flex-direction:column}.bpk-inset-banner--cta-text{display:flex;align-items:center}.bpk-inset-banner--cta-button{all:unset}.bpk-inset-banner--cta-button:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-inset-banner--cta-container{display:flex;align-items:center;cursor:pointer}.bpk-inset-banner--cta-content{display:flex;align-items:center}.bpk-inset-banner--cta-info-icon{display:flex;align-items:center;margin-inline-start:.5rem}.bpk-inset-banner-body-container{display:flex;padding:1rem;flex-direction:column;border-radius:0 0 .5rem .5rem;background-color:#eff3f8;color:#161616}.bpk-inset-banner-body-container--link-text{color:#0062e3;text-decoration:none}.bpk-no-touch-support .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}:global(.bpk-no-touch-support) .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "36.9.1",
3
+ "version": "36.11.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -28,7 +28,7 @@
28
28
  "@radix-ui/react-slider": "1.1.2",
29
29
  "@react-google-maps/api": "^2.19.3",
30
30
  "@skyscanner/bpk-foundations-web": "^19.1.0",
31
- "@skyscanner/bpk-svgs": "^20.0.0",
31
+ "@skyscanner/bpk-svgs": "^20.1.1",
32
32
  "a11y-focus-scope": "^1.1.3",
33
33
  "a11y-focus-store": "^1.0.0",
34
34
  "d3-path": "^2.0.0",