@skyscanner/backpack-web 36.10.0 → 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 (4) hide show
  1. package/bpk-component-inset-banner/src/BpkInsetBanner.d.ts +9 -0
  2. package/bpk-component-inset-banner/src/BpkInsetBanner.js +45 -2
  3. package/bpk-component-inset-banner/src/BpkInsetBanner.module.css +1 -1
  4. package/package.json +1 -1
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.10.0",
3
+ "version": "36.11.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",