@skyscanner/backpack-web 37.9.1 → 37.11.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/bpk-component-panel/index.d.ts

@@ -0,0 +1,2 @@
+import BpkPanel from './src/BpkPanel';
+export default BpkPanel;

package/bpk-component-panel/src/BpkPanel.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    padded?: boolean;
+    fullWidth?: boolean;
+    className?: string | null;
+    keyline?: boolean;
+    [rest: string]: any;
+};
+declare const BpkPanel: ({ children, className, fullWidth, keyline, padded, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkPanel;

package/bpk-component-panel/src/BpkPanel.js

@@ -16,26 +16,32 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkPanel.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkPanel = props => {
+const BpkPanel = ({
+  children,
+  className = null,
+  fullWidth = false,
+  keyline = true,
+  padded = true,
+  ...rest
+}) => {
   const classNames = [getClassName('bpk-panel')];
-  const {
-    children,
-    className,
-    fullWidth,
-    padded,
-    ...rest
-  } = props;
   if (padded) {
     classNames.push(getClassName('bpk-panel--padded'));
   }
   if (fullWidth) {
     classNames.push(getClassName('bpk-panel--full-width'));
   }
+  if (keyline) {
+    if (fullWidth) {
+      classNames.push(getClassName('bpk-panel--full-width-keyline'));
+    } else {
+      classNames.push(getClassName('bpk-panel--keyline'));
+    }
+  }
   if (className) {
     classNames.push(className);
   }
@@ -45,15 +51,4 @@ const BpkPanel = props => {
     children: children
   });
 };
-BpkPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  padded: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  className: PropTypes.string
-};
-BpkPanel.defaultProps = {
-  padded: true,
-  fullWidth: false,
-  className: null
-};
 export default BpkPanel;

package/bpk-component-panel/src/BpkPanel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-panel{display:block;background-color:#fff;box-shadow:0 0 0 1px #c1c7cf inset;border-radius:.75rem}.bpk-panel--padded{padding:1rem}.bpk-panel--full-width{border-radius:0;box-shadow:#c1c7cf 0 -0.0625rem 0 0 inset,#c1c7cf 0 .0625rem 0 0 inset}
+.bpk-panel{display:block;background-color:#fff;border-radius:.75rem}.bpk-panel--padded{padding:1rem}.bpk-panel--full-width{border-radius:0}.bpk-panel--keyline{box-shadow:0 0 0 1px #c1c7cf inset}.bpk-panel--full-width-keyline{box-shadow:#c1c7cf 0 -0.0625rem 0 0 inset,#c1c7cf 0 .0625rem 0 0 inset}

package/bpk-component-rating/src/BpkRating.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import type { ReactNode } from 'react';
 import { RATING_SIZES, RATING_SCALES } from './common-types';
 type ValueOf<T> = T[keyof T];
@@ -11,26 +10,7 @@ type Props = {
     subtitle?: string;
     title?: string | ReactNode;
     value: string | number;
+    [rest: string]: any;
 };
-declare const BpkRating: {
-    (props: Props): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        ariaLabel: PropTypes.Validator<string>;
-        value: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
-        className: PropTypes.Requireable<string>;
-        ratingScale: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        subtitle: PropTypes.Requireable<string>;
-        showScale: PropTypes.Requireable<boolean>;
-        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    };
-    defaultProps: {
-        className: null;
-        ratingScale: "zeroToFive";
-        size: "base";
-        subtitle: null;
-        showScale: boolean;
-        title: null;
-    };
-};
+declare const BpkRating: ({ ariaLabel, className, ratingScale, showScale, size, subtitle, title, value, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkRating;

package/bpk-component-rating/src/BpkRating.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
@@ -37,18 +36,17 @@ const getMaxValue = ratingScale => {
       return 10;
   }
 };
-const BpkRating = props => {
-  const {
-    ariaLabel,
-    className,
-    ratingScale,
-    showScale,
-    size,
-    subtitle,
-    title,
-    value,
-    ...rest
-  } = props;
+const BpkRating = ({
+  ariaLabel,
+  className,
+  ratingScale = RATING_SCALES.zeroToFive,
+  showScale = true,
+  size = RATING_SIZES.base,
+  subtitle = undefined,
+  title = null,
+  value,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-rating', className, size === RATING_SIZES.large && title && subtitle && 'bpk-rating--large');
   const valueStyles = getClassName('bpk-rating__value');
   const scaleStyles = getClassName('bpk-rating__scale');
@@ -96,42 +94,24 @@ const BpkRating = props => {
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: textWrapperStyles,
-      children: [title && /*#__PURE__*/_jsx(BpkText, {
-        textStyle: titleTextSize,
-        tagName: "span",
-        "aria-hidden": "true",
-        children: /*#__PURE__*/_jsx("span", {
-          className: titleStyles,
+      children: [title && /*#__PURE__*/_jsx("span", {
+        className: titleStyles,
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: titleTextSize,
+          tagName: "span",
+          "aria-hidden": "true",
           children: title
         })
-      }), subtitle && /*#__PURE__*/_jsx(BpkText, {
-        textStyle: subtitleTextSize,
-        tagName: "span",
-        "aria-hidden": "true",
-        children: /*#__PURE__*/_jsx("span", {
-          className: subtitleStyles,
+      }), subtitle && /*#__PURE__*/_jsx("span", {
+        className: subtitleStyles,
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: subtitleTextSize,
+          tagName: "span",
+          "aria-hidden": "true",
           children: subtitle
         })
       })]
     })]
   });
 };
-BpkRating.propTypes = {
-  ariaLabel: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  className: PropTypes.string,
-  ratingScale: PropTypes.oneOf(Object.keys(RATING_SCALES)),
-  size: PropTypes.oneOf(Object.keys(RATING_SIZES)),
-  subtitle: PropTypes.string,
-  showScale: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-};
-BpkRating.defaultProps = {
-  className: null,
-  ratingScale: RATING_SCALES.zeroToFive,
-  size: RATING_SIZES.base,
-  subtitle: null,
-  showScale: true,
-  title: null
-};
 export default BpkRating;

package/bpk-component-rating/src/BpkRating.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-rating{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{padding-inline-end:.5rem}.bpk-rating__text-wrapper{display:flex;flex-direction:row;align-items:baseline;white-space:nowrap}.bpk-rating__text-wrapper--large{padding-top:.0625rem;flex-direction:column;align-items:flex-start}.bpk-rating__scale{color:#626971}.bpk-rating__title--with-subtitle{padding-right:.5rem}html[dir=rtl] .bpk-rating__title--with-subtitle{padding-right:0;padding-left:.5rem}.bpk-rating__subtitle{color:#626971}
+.bpk-rating{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{padding-inline-end:.5rem}.bpk-rating__text-wrapper{display:flex;min-width:0;flex-direction:row;align-items:baseline;white-space:nowrap}.bpk-rating__text-wrapper--large{padding-top:.0625rem;flex-direction:column;align-items:flex-start}.bpk-rating__scale{color:#626971}.bpk-rating__title--with-subtitle{padding-right:.5rem}html[dir=rtl] .bpk-rating__title--with-subtitle{padding-right:0;padding-left:.5rem}.bpk-rating__subtitle{min-width:0;max-width:100%;flex:1 1 auto;color:#626971;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}

package/bpk-component-text/src/BpkText.d.ts

@@ -39,8 +39,9 @@ type Props = {
     textStyle?: TextStyle;
     tagName?: Tag;
     className?: string | null;
+    color?: string | null;
     id?: string;
     [rest: string]: any;
 };
-declare const BpkText: ({ children, className, tagName: TagName, textStyle, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkText: ({ children, className, color, tagName: TagName, textStyle, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkText;

package/bpk-component-text/src/BpkText.js

@@ -56,18 +56,30 @@ export const TEXT_STYLES = {
 const BpkText = ({
   children,
   className = null,
+  color = null,
   tagName: TagName = 'span',
   textStyle = TEXT_STYLES.bodyDefault,
   ...rest
 }) => {
   const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, className);
+  const {
+    style,
+    ...otherProps
+  } = rest;
+  const computedStyles = {
+    ...style,
+    ...(color ? {
+      color
+    } : {})
+  };
   return (
     /*#__PURE__*/
     // Allowed, TagName is always a dom element.
     // eslint-disable-next-line @skyscanner/rules/forbid-component-props
     _jsx(TagName, {
       className: classNames,
-      ...rest,
+      style: computedStyles,
+      ...otherProps,
       children: children
     })
   );

package/bpk-mixins/_panels.scss

@@ -36,7 +36,6 @@
   display: block;
   background-color: $bpk-card-background-color;
 
-  @include bpk-border-sm($bpk-panel-border-color);
   @include bpk-border-radius-md;
 }
 
@@ -53,7 +52,21 @@
   padding: $bpk-card-padding;
 }
 
-/// Makes panel full width by removing left and right border.
+/// Controls if we have a keyline or not on the panel
+/// Modifies the bpk-panel mixin.
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--keyline();
+///   }
+@mixin bpk-panel--keyline {
+  @include bpk-border-sm($bpk-panel-border-color);
+}
+
+/// Makes panel full width by removing the border radius
 /// Modifies the bpk-panel mixin.
 ///
 /// @require {mixin} bpk-panel
@@ -65,6 +78,18 @@
 ///   }
 @mixin bpk-panel--full-width {
   border-radius: 0;
+}
+
+/// Sets the keyline to only show on the top and bottom when full
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--full-width-keyline();
+///   }
+@mixin bpk-panel--full-width-keyline {
   box-shadow:
     $bpk-panel-border-color 0 -1 * $bpk-one-pixel-rem 0 0 inset,
     $bpk-panel-border-color 0 $bpk-one-pixel-rem 0 0 inset;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "37.9.1",
+  "version": "37.11.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -31,9 +31,9 @@
     "@skyscanner/bpk-svgs": "^20.6.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "d3-path": "^2.0.0",
+    "d3-path": "^3.1.0",
     "d3-scale": "^4.0.2",
-    "intersection-observer": "^0.7.0",
+    "intersection-observer": "^0.12.2",
     "lodash": "^4.17.20",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",

package/unstable__bpk-mixins/_panels.scss

@@ -36,7 +36,6 @@
   display: block;
   background-color: tokens.$bpk-card-background-color;
 
-  @include borders.bpk-border-sm(tokens.$bpk-panel-border-color);
   @include radii.bpk-border-radius-md;
 }
 
@@ -53,7 +52,21 @@
   padding: tokens.$bpk-card-padding;
 }
 
-/// Makes panel full width by removing left and right border.
+/// Controls if we have a keyline or not on the panel
+/// Modifies the bpk-panel mixin.
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--keyline();
+///   }
+@mixin bpk-panel--keyline {
+  @include borders.bpk-border-sm(tokens.$bpk-panel-border-color);
+}
+
+/// Makes panel full width by removing the border radius
 /// Modifies the bpk-panel mixin.
 ///
 /// @require {mixin} bpk-panel
@@ -65,6 +78,18 @@
 ///   }
 @mixin bpk-panel--full-width {
   border-radius: 0;
+}
+
+/// Sets the keyline to only show on the top and bottom when full
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--full-width-keyline();
+///   }
+@mixin bpk-panel--full-width-keyline {
   box-shadow:
     tokens.$bpk-panel-border-color 0 -1 * tokens.$bpk-one-pixel-rem 0 0 inset,
     tokens.$bpk-panel-border-color 0 tokens.$bpk-one-pixel-rem 0 0 inset;