@skyscanner/backpack-web 37.9.1 → 37.10.0

package/bpk-component-inset-banner/index.d.ts

@@ -1,4 +1,8 @@
-import BpkInsetBanner, { type Props as BpkInsetBannerProps, VARIANT } from './src/BpkInsetBanner';
+import BpkInsetBanner, { type Props as BpkInsetBannerProps } from './src/BpkInsetBanner';
+import BpkInsetBannerSponsored from './src/BpkInsetBannerV2/BpkInsetBannerSponsored';
+import { type CommonProps as BpkInsetBannerSponsoredProps } from './src/BpkInsetBannerV2/common-types';
+import { VARIANT } from './src/BpkInsetBannerV2/common-types';
 export type { BpkInsetBannerProps };
+export type { BpkInsetBannerSponsoredProps };
 export { VARIANT };
-export default BpkInsetBanner;
+export { BpkInsetBannerSponsored, BpkInsetBanner };

package/bpk-component-inset-banner/index.js

@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
-import BpkInsetBanner, { VARIANT } from "./src/BpkInsetBanner";
+import BpkInsetBanner from "./src/BpkInsetBanner";
+import BpkInsetBannerSponsored from "./src/BpkInsetBannerV2/BpkInsetBannerSponsored";
+import { VARIANT } from "./src/BpkInsetBannerV2/common-types";
 export { VARIANT };
-export default BpkInsetBanner;
+export { BpkInsetBannerSponsored, BpkInsetBanner };

package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.d.ts

@@ -0,0 +1,3 @@
+import { type CommonProps } from './common-types';
+declare const BpkInsetBannerSponsored: ({ accessibilityLabel, backgroundColor, callToAction, image, logo, subheadline, title, variant, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkInsetBannerSponsored;

package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.js

@@ -0,0 +1,138 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState } from 'react';
+import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import BpkBottomSheet from "../../../bpk-component-bottom-sheet";
+import ViewIcon from "../../../bpk-component-icon/lg/view";
+import InfoIcon from "../../../bpk-component-icon/sm/information-circle";
+import BpkImage from "../../../bpk-component-image";
+import BpkText, { TEXT_STYLES } from "../../../bpk-component-text/src/BpkText";
+import { cssModules } from "../../../bpk-react-utils";
+import { VARIANT } from "./common-types";
+import STYLES from "./BpkInsetBannerSponsored.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkInsetBannerSponsored = ({
+  accessibilityLabel,
+  backgroundColor = surfaceHighlightDay,
+  callToAction,
+  image,
+  logo,
+  subheadline,
+  title,
+  variant = VARIANT.onLight
+}) => {
+  const classNames = getClassName('bpk-inset-banner', `bpk-inset-banner--${variant}`, image && 'bpk-inset-banner--with-image');
+  const [sheetOpen, setSheetOpen] = useState(false);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
+      "aria-label": accessibilityLabel,
+      className: classNames,
+      style: {
+        backgroundColor
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-inset-banner--logo'),
+        children: logo && /*#__PURE__*/_jsx("img", {
+          className: getClassName('bpk-inset-banner--image'),
+          src: logo,
+          alt: "",
+          "aria-hidden": true
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: getClassName('bpk-inset-banner--text-container'),
+        children: [/*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.label2,
+          children: title
+        }), /*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.caption,
+          children: subheadline
+        })]
+      }), callToAction && callToAction.bottomSheetContent && /*#__PURE__*/_jsxs("div", {
+        role: "presentation",
+        className: getClassName('bpk-inset-banner--cta-container'),
+        onClick: e => {
+          // Do not propagate the click on the trigger OR bottomSheet content up the DOM tree.
+          e.stopPropagation();
+          e.preventDefault();
+        },
+        children: [/*#__PURE__*/_jsx("button", {
+          "aria-label": callToAction?.buttonA11yLabel,
+          className: getClassName('bpk-inset-banner--cta-button'),
+          "data-testid": "ctaBtn",
+          "aria-hidden": "false",
+          type: "button",
+          onClick: () => setSheetOpen(true),
+          children: /*#__PURE__*/_jsxs("div", {
+            className: getClassName('bpk-inset-banner--cta-content'),
+            children: [callToAction?.text && /*#__PURE__*/_jsx(BpkText, {
+              textStyle: TEXT_STYLES.caption,
+              children: callToAction.text
+            }), /*#__PURE__*/_jsx("div", {
+              className: getClassName('bpk-inset-banner--cta-info-icon'),
+              children: /*#__PURE__*/_jsx(InfoIcon, {})
+            })]
+          })
+        }), /*#__PURE__*/_jsx(BpkBottomSheet, {
+          id: "InsetBannerBottomSheet",
+          isOpen: sheetOpen,
+          onClose: () => setSheetOpen(false),
+          title: callToAction?.bottomSheetTitle || '',
+          closeLabel: "Close bottom sheet",
+          ariaLabel: callToAction?.bottomSheetA11yLabel || '',
+          children: callToAction.bottomSheetContent.map((item, index) => /*#__PURE__*/_jsxs("div", {
+            className: getClassName('bpk-inset-banner--bottom-sheet-content'),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: getClassName('bpk-inset-banner--bottom-sheet-icon'),
+              children: index === 0 ? /*#__PURE__*/_jsx(ViewIcon, {
+                height: 24,
+                width: 24
+              }) : /*#__PURE__*/_jsx(InfoIcon, {
+                height: 24,
+                width: 24
+              })
+            }), /*#__PURE__*/_jsxs("div", {
+              className: getClassName('bpk-inset-banner--bottom-sheet-text'),
+              children: [/*#__PURE__*/_jsx("div", {
+                className: getClassName('bpk-inset-banner--bottom-sheet-title'),
+                children: /*#__PURE__*/_jsx(BpkText, {
+                  textStyle: TEXT_STYLES.heading4,
+                  children: item.title
+                })
+              }), /*#__PURE__*/_jsx("div", {
+                className: getClassName('bpk-inset-banner--bottom-sheet-description'),
+                children: /*#__PURE__*/_jsx(BpkText, {
+                  textStyle: TEXT_STYLES.bodyDefault,
+                  children: item.description
+                })
+              })]
+            })]
+          }, item.title))
+        })]
+      })]
+    }), image && /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-inset-banner-image-container'),
+      children: /*#__PURE__*/_jsx(BpkImage, {
+        src: image.src,
+        altText: image.altText,
+        aspectRatio: image.aspectRatio
+      })
+    })]
+  });
+};
+export default BpkInsetBannerSponsored;

package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.bpk-inset-banner{display:grid;padding:.5rem 1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"logo content cta";align-items:center;border-radius:.5rem}@media(max-width: 32rem){.bpk-inset-banner{grid-template-columns:1fr auto;grid-template-areas:"logo cta" "content content"}}.bpk-inset-banner--logo{grid-area:logo}.bpk-inset-banner--with-image{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--image{max-height:2rem;object-fit:contain;padding-inline-end:1rem}.bpk-inset-banner--text-container{display:flex;grid-area:content;flex-direction:column;word-wrap:break-word}.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;height:2rem;grid-area:cta;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--bottom-sheet-content{display:flex;padding-bottom:2rem;flex-direction:row}.bpk-inset-banner--bottom-sheet-icon{display:flex;margin-right:1.5rem;fill:#161616}.bpk-inset-banner--bottom-sheet-text{display:flex;flex-direction:column}.bpk-inset-banner--bottom-sheet-title{margin-bottom:.5rem;color:#161616}.bpk-inset-banner--bottom-sheet-description{color:#161616}.bpk-inset-banner-image-container{min-height:7.5rem;border-radius:0 0 .5rem .5rem;overflow:hidden}

package/bpk-component-inset-banner/src/BpkInsetBannerV2/common-types.d.ts

@@ -0,0 +1,40 @@
+export declare const VARIANT: {
+    onLight: string;
+    onDark: string;
+};
+type callToActionType = {
+    text?: string;
+    bottomSheetContent: Array<{
+        title: string;
+        description: string;
+    }>;
+    bottomSheetTitle?: string;
+    buttonCloseLabel?: string;
+    buttonA11yLabel?: string;
+    bottomSheetLabel?: string;
+    bottomSheetId?: string;
+    bottomSheetWidth?: string;
+    bottomSheetMarginStart?: string;
+    bottomSheetMarginEnd?: string;
+    bottomSheetA11yLabel?: string;
+    labelTitle?: boolean;
+    closeBtnIcon?: boolean;
+    zIndexCustom?: number;
+};
+export type CommonProps = {
+    accessibilityLabel?: string;
+    backgroundColor?: string;
+    callToAction?: callToActionType & {
+        bottomSheetContent: callToActionType['bottomSheetContent'];
+    };
+    logo: string;
+    subheadline?: string;
+    title?: string;
+    variant?: (typeof VARIANT)[keyof typeof VARIANT];
+    image?: {
+        src: string;
+        altText: string;
+        aspectRatio: number;
+    };
+};
+export {};

package/bpk-component-inset-banner/src/BpkInsetBannerV2/common-types.js

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const VARIANT = {
+  onLight: 'on-light',
+  onDark: 'on-dark'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "37.9.1",
+  "version": "37.10.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",