@skyscanner/backpack-web 37.7.1 → 37.9.0

package/bpk-component-card-list/index.d.ts

@@ -1,2 +1,2 @@
-import BpkCardList from "./src/BpkCardList";
+import BpkCardList from './src/BpkCardList';
 export default BpkCardList;

package/bpk-component-card-list/src/BpkCardList.js

@@ -15,37 +15,99 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import { BpkButtonV2 } from "../../bpk-component-button";
 import BpkSectionHeader from "../../bpk-component-section-header";
 import { cssModules } from "../../bpk-react-utils";
+import BpkCardListGridStack from "./BpkCardListGridStack";
+import BpkCardListRowRailContainer from "./BpkCardListRowRail";
+import { ACCESSORY_DESKTOP_TYPES, ACCESSORY_MOBILE_TYPES, LAYOUTS } from "./common-types";
 import STYLES from "./BpkCardList.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const DEFAULT_ITEMS = 3;
 const BpkCardList = props => {
   const {
+    accessoryDesktop,
+    accessoryMobile,
+    buttonContent,
     buttonHref,
-    buttonText,
+    cardList,
+    chipGroup,
     description,
+    expandText,
+    initiallyShownCardsDesktop = DEFAULT_ITEMS,
+    initiallyShownCardsMobile = DEFAULT_ITEMS,
+    layoutDesktop,
+    layoutMobile,
     onButtonClick,
+    onExpandClick,
     title
   } = props;
-  const button = buttonText && /*#__PURE__*/_jsx(BpkButtonV2, {
+  const shouldShowHeaderButton = isMobile => {
+    if (!buttonContent) return false;
+    if (isMobile) {
+      return accessoryMobile !== ACCESSORY_MOBILE_TYPES.button;
+    }
+    return accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button;
+  };
+  const headerButton = buttonContent && /*#__PURE__*/_jsx(BpkButtonV2, {
     onClick: onButtonClick,
     href: buttonHref,
-    children: buttonText
+    "data-testid": "bpk-card-list-header-button",
+    children: buttonContent
   });
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-card-list'),
-    children: [/*#__PURE__*/_jsx(BpkSectionHeader, {
-      title: title,
-      description: description,
-      button: button
-    }), /*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-card-list--card-list'),
-      "data-testid": "bpk-card-list--card-list",
-      children: "TODO: CARDS"
-    })]
+    "data-testid": "bpk-card-list",
+    children: /*#__PURE__*/_jsx(BpkBreakpoint, {
+      query: BREAKPOINTS.MOBILE,
+      children: isMobile => /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(BpkSectionHeader, {
+          title: title,
+          description: description,
+          button: shouldShowHeaderButton(isMobile) ? headerButton : null
+        }), chipGroup, /*#__PURE__*/_jsx("div", {
+          className: getClassName('bpk-card-list--card-list'),
+          "data-testid": "bpk-card-list--card-list",
+          children: isMobile ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [layoutMobile === LAYOUTS.rail && /*#__PURE__*/_jsx(BpkCardListRowRailContainer, {
+              initiallyShownCards: initiallyShownCardsMobile,
+              layout: layoutMobile,
+              isMobile: true,
+              children: cardList
+            }), layoutMobile === LAYOUTS.stack && /*#__PURE__*/_jsx(BpkCardListGridStack, {
+              accessory: accessoryMobile,
+              initiallyShownCards: initiallyShownCardsMobile,
+              buttonContent: buttonContent,
+              expandText: expandText,
+              onButtonClick: onButtonClick,
+              onExpandClick: onExpandClick,
+              layout: layoutMobile,
+              buttonHref: buttonHref,
+              children: cardList
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [layoutDesktop === LAYOUTS.row && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.expand && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button && /*#__PURE__*/_jsx(BpkCardListRowRailContainer, {
+              accessory: accessoryDesktop,
+              initiallyShownCards: initiallyShownCardsDesktop,
+              layout: layoutDesktop,
+              children: cardList
+            }), layoutDesktop === LAYOUTS.grid && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.pagination && /*#__PURE__*/_jsx(BpkCardListGridStack, {
+              accessory: accessoryDesktop,
+              initiallyShownCards: initiallyShownCardsDesktop,
+              buttonContent: buttonContent,
+              expandText: expandText,
+              onButtonClick: onButtonClick,
+              onExpandClick: onExpandClick,
+              layout: layoutDesktop,
+              buttonHref: buttonHref,
+              children: cardList
+            })]
+          })
+        })]
+      })
+    })
   });
 };
 export default BpkCardList;

package/bpk-component-card-list/src/BpkCardListGridStack/BpkCardListGridStack.d.ts

@@ -0,0 +1,3 @@
+import type { CardListGridStackProps } from '../common-types';
+declare const BpkCardListGridStack: (props: CardListGridStackProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCardListGridStack;

package/bpk-component-card-list/src/BpkCardListGridStack/BpkCardListGridStack.js

@@ -0,0 +1,89 @@
+/*
+ * 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 { Children, useState } from 'react';
+import { BpkButtonV2 } from "../../../bpk-component-button";
+import { cssModules } from "../../../bpk-react-utils";
+import ExpandAccessoryContent from "../BpkExpand/ExpandAccessoryContent";
+import { ACCESSORY_DESKTOP_TYPES } from "../common-types";
+import STYLES from "./BpkCardListGridStack.module.css";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCardListGridStack = props => {
+  const {
+    accessory,
+    buttonContent,
+    buttonHref,
+    children,
+    expandText,
+    initiallyShownCards,
+    layout,
+    onButtonClick,
+    onExpandClick
+  } = props;
+  const gridStyle = {
+    '--initially-shown-cards': initiallyShownCards
+  };
+  const isExpandType = accessory === ACCESSORY_DESKTOP_TYPES.expand; // or ACCESSORY_MOBILE_TYPES.expand
+  const defaultInitiallyShownCards = isExpandType ? initiallyShownCards : children.length;
+  const showExpand = isExpandType ? children.length > defaultInitiallyShownCards : false;
+  const [collapsed, setCollapsed] = useState(true);
+  const showButton = accessory === ACCESSORY_DESKTOP_TYPES.button;
+  const childrenArray = Children.toArray(children);
+  const initialCards = childrenArray.slice(0, defaultInitiallyShownCards);
+  const restCards = childrenArray.slice(defaultInitiallyShownCards, childrenArray.length);
+  const onExpandToggle = () => {
+    setCollapsed(prev => !prev);
+    onExpandClick?.();
+  };
+  const expandAccessoryContent = /*#__PURE__*/_jsx(ExpandAccessoryContent, {
+    collapsed: collapsed,
+    onExpandToggle: onExpandToggle,
+    children: expandText || ''
+  });
+  const buttonAccessoryContent = /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-card-list-grid-stack__accessory__button'),
+    children: /*#__PURE__*/_jsx(BpkButtonV2, {
+      "data-testid": "bpk-card-list__accessory-button",
+      onClick: onButtonClick,
+      href: buttonHref,
+      children: buttonContent
+    })
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-card-list-grid-stack'),
+    "data-testid": "bpk-card-list-grid-stack",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName(`bpk-card-list-grid-stack__${layout}`),
+      "data-testid": "bpk-card-list-grid-stack__initial-content",
+      style: gridStyle,
+      children: initialCards
+    }), showButton && buttonAccessoryContent, showExpand &&
+    /*#__PURE__*/
+    // This is for A11y considerations
+    _jsxs(_Fragment, {
+      children: [collapsed === true && expandAccessoryContent, /*#__PURE__*/_jsx("div", {
+        className: getClassName(`bpk-card-list-grid-stack__${layout}`),
+        "data-testid": "bpk-card-list-grid-stack__expanded-content",
+        style: gridStyle,
+        children: collapsed === false && restCards
+      }), collapsed === false && expandAccessoryContent]
+    })]
+  });
+};
+export default BpkCardListGridStack;

package/bpk-component-card-list/src/BpkCardListGridStack/BpkCardListGridStack.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-card-list-grid-stack{display:grid;gap:1.5rem}.bpk-card-list-grid-stack__grid{display:grid;grid-template-columns:repeat(var(--initially-shown-cards, 3), auto);gap:1.5rem}.bpk-card-list-grid-stack__stack{display:grid;grid-template-columns:1;gap:1.5rem}.bpk-card-list-grid-stack__accessory__button{width:auto}

package/bpk-component-card-list/src/BpkCardListGridStack/index.d.ts

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

package/bpk-component-card-list/src/BpkCardListGridStack/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 BpkCardListGridStack from "./BpkCardListGridStack";
+export default BpkCardListGridStack;

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.d.ts

@@ -0,0 +1,3 @@
+import type { CardListCarouselProps } from '../common-types';
+declare const BpkCardListCarousel: (props: CardListCarouselProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCardListCarousel;

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js

@@ -0,0 +1,103 @@
+/*
+ * 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 { useRef, useState, useEffect, isValidElement, Children } from 'react';
+import { cssModules } from "../../../bpk-react-utils";
+import { RENDER_BUFFER_SIZE } from "./constants";
+import { lockScroll, setA11yTabIndex, useUpdateCurrentIndexByVisibility, useScrollToCard, useIntersectionObserver } from "./utils";
+import STYLES from "./BpkCardListCarousel.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCardListCarousel = props => {
+  const {
+    children,
+    currentIndex,
+    initiallyShownCards,
+    isMobile = false,
+    layout,
+    setCurrentIndex
+  } = props;
+  const shownNumberStyle = {
+    '--initially-shown-cards': initiallyShownCards
+  };
+  const childrenLength = Children.count(children);
+  const [root, setRoot] = useState(null);
+  const cardRefs = useRef([]);
+  const [visibilityList, setVisibilityList] = useState(Array(childrenLength).fill(0));
+  const stateScrollingLockRef = useRef(false);
+  const openSetStateLockTimeoutRef = useRef(null);
+  const observerVisibility = useIntersectionObserver({
+    root,
+    threshold: 0.5
+  }, setVisibilityList);
+  useEffect(() => {
+    const container = root;
+    if (isMobile || !container) return undefined;
+    const lockScrollDuringInteraction = () => {
+      lockScroll(stateScrollingLockRef, openSetStateLockTimeoutRef);
+    };
+    container.addEventListener('wheel', lockScrollDuringInteraction);
+    container.addEventListener('touchmove', lockScrollDuringInteraction);
+    return () => {
+      container.removeEventListener('touchmove', lockScrollDuringInteraction);
+      container.removeEventListener('wheel', lockScrollDuringInteraction);
+      if (openSetStateLockTimeoutRef.current) {
+        clearTimeout(openSetStateLockTimeoutRef.current);
+      }
+    };
+  }, [root]);
+  useUpdateCurrentIndexByVisibility(isMobile, visibilityList, setCurrentIndex, stateScrollingLockRef, openSetStateLockTimeoutRef);
+  useScrollToCard(currentIndex, root, cardRefs, stateScrollingLockRef);
+  const firstVisibleIndex = Math.max(0, visibilityList.indexOf(1));
+  const lastVisibleIndex = firstVisibleIndex + initiallyShownCards - 1;
+  const renderList = visibilityList.map((_, index) => index >= firstVisibleIndex - RENDER_BUFFER_SIZE && index <= lastVisibleIndex + RENDER_BUFFER_SIZE ? 1 : 0);
+  const carouselAriaLabel = `Entering Carousel with ${initiallyShownCards} slides shown at a time, ${childrenLength} slides in total. Please use Pagination below with the Previous and Next buttons to navigate, or the slide dot buttons at the end to jump to slides.`;
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName(`bpk-card-list-row-rail__${layout}`),
+    "data-testid": "bpk-card-list-row-rail__carousel",
+    "aria-label": carouselAriaLabel
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    role: "region",
+    ref: setRoot,
+    children: children.map((card, index) => {
+      if (! /*#__PURE__*/isValidElement(card)) return null;
+      const cardRefCallback = el => {
+        cardRefs.current[index] = el;
+        observerVisibility(el, index);
+        setA11yTabIndex(el, index, visibilityList);
+      };
+      const slideAriaLabel = `slide ${index + 1} of ${childrenLength}`;
+      const cardStyle = isMobile ? {
+        ...shownNumberStyle,
+        visibility: renderList[index] === 1 ? 'visible' : 'hidden'
+      } : shownNumberStyle;
+      return /*#__PURE__*/_jsx("div", {
+        className: getClassName(`bpk-card-list-row-rail__${layout}__card`),
+        ref: cardRefCallback,
+        style: cardStyle,
+        role: "group",
+        "aria-label": slideAriaLabel,
+        "aria-current": index === currentIndex ? 'true' : 'false',
+        children: isMobile ? card : renderList[index] === 1 && card
+      }, `carousel-card-${index.toString()}`);
+    })
+  });
+};
+export default BpkCardListCarousel;

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.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-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;padding-top:.25rem;padding-bottom:.25rem;overflow-x:scroll;box-sizing:border-box;gap:.25rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:.5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.d.ts

@@ -0,0 +1,3 @@
+import type { CardListRowRailProps } from '../common-types';
+declare const BpkCardListRowRailContainer: (props: CardListRowRailProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCardListRowRailContainer;

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.js

@@ -0,0 +1,67 @@
+/*
+ * 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, Children } from 'react';
+import BpkPageIndicator from "../../../bpk-component-page-indicator";
+import { cssModules } from "../../../bpk-react-utils";
+import { ACCESSORY_DESKTOP_TYPES, LAYOUTS } from "../common-types";
+import BpkCardListCarousel from "./BpkCardListCarousel";
+import STYLES from "./BpkCardListRowRailContainer.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCardListRowRailContainer = props => {
+  const {
+    accessory,
+    children,
+    initiallyShownCards,
+    isMobile = false,
+    layout
+  } = props;
+  const totalIndicators = Children.count(children);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const showAccessory = totalIndicators > initiallyShownCards;
+  const accessoryContent = layout === LAYOUTS.row && accessory === ACCESSORY_DESKTOP_TYPES.pagination ? /*#__PURE__*/_jsx(BpkPageIndicator, {
+    currentIndex: currentIndex,
+    totalIndicators: totalIndicators,
+    onClick: (_e, index) => {
+      setCurrentIndex(index);
+    },
+    showNav: true,
+    indicatorLabel: "Go to slide",
+    prevNavLabel: "Previous slide",
+    nextNavLabel: "Next slide"
+  }) : null;
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-card-list-row-rail'),
+    "data-testid": "bpk-card-list-row-rail",
+    children: [/*#__PURE__*/_jsx(BpkCardListCarousel, {
+      initiallyShownCards: initiallyShownCards,
+      layout: layout,
+      currentIndex: currentIndex,
+      setCurrentIndex: setCurrentIndex,
+      isMobile: isMobile,
+      children: children
+    }), accessoryContent && showAccessory && /*#__PURE__*/_jsx("div", {
+      role: "region",
+      "aria-label": "pagination",
+      className: getClassName(`bpk-card-list-row-rail__accessory`),
+      "data-testid": "bpk-card-list-row-rail__accessory",
+      children: accessoryContent
+    })]
+  });
+};
+export default BpkCardListRowRailContainer;

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.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-card-list-row-rail{display:flex;flex-direction:column}.bpk-card-list-row-rail__accessory{width:100%}

package/bpk-component-card-list/src/BpkCardListRowRail/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const RELEASE_LOCK_DELAY = 20;
+export declare const RENDER_BUFFER_SIZE = 3;

package/bpk-component-card-list/src/BpkCardListRowRail/constants.js

@@ -0,0 +1,20 @@
+/*
+ * 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 RELEASE_LOCK_DELAY = 20;
+export const RENDER_BUFFER_SIZE = 3;

package/bpk-component-card-list/src/BpkCardListRowRail/index.d.ts

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

package/bpk-component-card-list/src/BpkCardListRowRail/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 BpkCardListRowRailContainer from "./BpkCardListRowRailContainer";
+export default BpkCardListRowRailContainer;

package/bpk-component-card-list/src/BpkCardListRowRail/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const lockScroll: (stateScrollingLockRef: React.MutableRefObject<boolean>, openSetStateLockTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>) => void;
+export declare const setA11yTabIndex: (el: HTMLDivElement | null, index: number, visibilityList: number[]) => void;
+export declare const useUpdateCurrentIndexByVisibility: (isMobile: boolean, visibilityList: number[], setCurrentIndex: (index: number) => void, stateScrollingLockRef: React.MutableRefObject<boolean>, openSetStateLockTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>) => void;
+export declare const useScrollToCard: (currentIndex: number, container: HTMLElement | null, cardRefs: React.MutableRefObject<Array<HTMLDivElement | null>>, stateScrollingLockRef: React.MutableRefObject<boolean>) => void;
+export declare const useIntersectionObserver: ({ root, threshold }: IntersectionObserverInit, setVisibilityList: React.Dispatch<React.SetStateAction<number[]>>) => (element: HTMLElement | null, index: number) => void;

package/bpk-component-card-list/src/BpkCardListRowRail/utils.js

@@ -0,0 +1,112 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 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 { useEffect, useRef, useMemo } from 'react';
+import { RELEASE_LOCK_DELAY } from "./constants";
+export const lockScroll = (stateScrollingLockRef, openSetStateLockTimeoutRef) => {
+  // eslint-disable-next-line no-param-reassign
+  stateScrollingLockRef.current = true;
+  if (openSetStateLockTimeoutRef.current) {
+    clearTimeout(openSetStateLockTimeoutRef.current);
+  }
+  // eslint-disable-next-line no-param-reassign
+  openSetStateLockTimeoutRef.current = setTimeout(() => {
+    // eslint-disable-next-line no-param-reassign
+    stateScrollingLockRef.current = false;
+  }, RELEASE_LOCK_DELAY);
+};
+export const setA11yTabIndex = (el, index, visibilityList) => {
+  if (!el) return;
+  const focusableElements = el.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
+  focusableElements.forEach(element => {
+    const targetElement = element;
+    targetElement.tabIndex = visibilityList[index] === 1 ? 0 : -1;
+  });
+};
+export const useUpdateCurrentIndexByVisibility = (isMobile, visibilityList, setCurrentIndex, stateScrollingLockRef, openSetStateLockTimeoutRef) => {
+  useEffect(() => {
+    if (isMobile) return;
+    if (!visibilityList || visibilityList.length === 0) return;
+    const firstVisibleIndex = visibilityList.findIndex(visibility => visibility === 1);
+    if (firstVisibleIndex !== -1) {
+      setCurrentIndex(firstVisibleIndex);
+      lockScroll(stateScrollingLockRef, openSetStateLockTimeoutRef);
+    }
+  }, [visibilityList]);
+};
+export const useScrollToCard = (currentIndex, container, cardRefs, stateScrollingLockRef) => {
+  useEffect(() => {
+    const isVisible = container && container.getBoundingClientRect().bottom > 0 && container.getBoundingClientRect().bottom <= window.innerHeight;
+    if (!isVisible) return; // Escape from scrollIntoView if the container is not visible
+
+    if (stateScrollingLockRef.current && stateScrollingLockRef.current === true) return;
+    const targetCard = cardRefs.current[currentIndex];
+    if (targetCard) {
+      targetCard.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }, [currentIndex]);
+};
+export const useIntersectionObserver = ({
+  root,
+  threshold
+}, setVisibilityList) => {
+  const callbackRef = useRef(setVisibilityList);
+  useEffect(() => {
+    callbackRef.current = setVisibilityList;
+  });
+  const observeAll = useMemo(() => {
+    if (!root) return () => {};
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        const {
+          index
+        } = entry.target.dataset;
+        if (!index) return;
+        const currentIndex = parseInt(index, 10);
+        if (entry.isIntersecting) {
+          setVisibilityList(prevList => {
+            const newList = [...prevList];
+            newList[currentIndex] = 1;
+            return newList;
+          });
+        } else {
+          setVisibilityList(prevList => {
+            const newList = [...prevList];
+            newList[currentIndex] = 0;
+            return newList;
+          });
+        }
+      });
+    }, {
+      root,
+      threshold
+    });
+    const observeElement = (element, index) => {
+      if (element && observer) {
+        element.setAttribute('data-index', index.toString());
+        observer.observe(element);
+      }
+    };
+    return observeElement;
+  }, [root, threshold]);
+  return observeAll;
+};

package/bpk-component-card-list/src/BpkExpand/ExpandAccessoryContent.d.ts

@@ -0,0 +1,3 @@
+import type { ExpandProps } from '../common-types';
+declare const ExpandAccessoryContent: ({ children, collapsed, onExpandToggle, }: ExpandProps) => import("react/jsx-runtime").JSX.Element;
+export default ExpandAccessoryContent;

package/bpk-component-card-list/src/BpkExpand/ExpandAccessoryContent.js

@@ -0,0 +1,37 @@
+/*
+ * 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 { BUTTON_TYPES, BpkButtonV2 } from "../../../bpk-component-button";
+import { withButtonAlignment, withRtlSupport } from "../../../bpk-component-icon";
+import ChevronDown from "../../../bpk-component-icon/sm/chevron-down";
+import ChevronUp from "../../../bpk-component-icon/sm/chevron-up";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AlignedChevronDownIcon = withButtonAlignment(withRtlSupport(ChevronDown));
+const AlignedChevronUpIcon = withButtonAlignment(withRtlSupport(ChevronUp));
+const ExpandAccessoryContent = ({
+  children,
+  collapsed,
+  onExpandToggle
+}) => /*#__PURE__*/_jsxs(BpkButtonV2, {
+  "data-testid": "bpk-card-list__accessory-expand-button",
+  type: BUTTON_TYPES.link,
+  onClick: onExpandToggle,
+  "aria-expanded": !collapsed,
+  children: [children, collapsed ? /*#__PURE__*/_jsx(AlignedChevronDownIcon, {}) : /*#__PURE__*/_jsx(AlignedChevronUpIcon, {})]
+});
+export default ExpandAccessoryContent;

package/bpk-component-card-list/src/BpkExpand/index.d.ts

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

package/bpk-component-card-list/src/BpkExpand/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 ExpandAccessoryContent from "./ExpandAccessoryContent";
+export default ExpandAccessoryContent;

package/bpk-component-card-list/src/common-types.d.ts

@@ -1,8 +1,70 @@
-type CardListProps = {
+import type { ReactElement, Dispatch, SetStateAction } from 'react';
+declare const LAYOUTS: {
+    readonly grid: "grid";
+    readonly stack: "stack";
+    readonly row: "row";
+    readonly rail: "rail";
+};
+type LayoutDesktop = typeof LAYOUTS.row | typeof LAYOUTS.grid;
+type LayoutMobile = typeof LAYOUTS.rail | typeof LAYOUTS.stack;
+declare const ACCESSORY_DESKTOP_TYPES: {
+    readonly pagination: "pagination";
+    readonly expand: "expand";
+    readonly button: "button";
+};
+declare const ACCESSORY_MOBILE_TYPES: {
+    readonly expand: "expand";
+    readonly button: "button";
+};
+type ExpandProps = {
+    children: string | ReactElement;
+    collapsed: boolean;
+    onExpandToggle: () => void;
+};
+type CardListBaseProps = {
     title: string;
     description?: string;
-    buttonText?: string;
+    cardList: ReactElement[];
+    layoutMobile: LayoutMobile;
+    layoutDesktop: LayoutDesktop;
+    accessoryDesktop?: (typeof ACCESSORY_DESKTOP_TYPES)[keyof typeof ACCESSORY_DESKTOP_TYPES];
+    accessoryMobile?: (typeof ACCESSORY_MOBILE_TYPES)[keyof typeof ACCESSORY_MOBILE_TYPES];
+    initiallyShownCardsDesktop?: number;
+    initiallyShownCardsMobile?: number;
+    chipGroup?: ReactElement;
+    buttonContent?: React.ReactNode;
     onButtonClick?: () => void;
+    onExpandClick?: () => void;
     buttonHref?: string;
+    expandText?: string;
+};
+type CardListGridStackProps = {
+    children: ReactElement[];
+    initiallyShownCards: number;
+    layout: typeof LAYOUTS.grid | typeof LAYOUTS.stack;
+    accessory?: typeof ACCESSORY_DESKTOP_TYPES.expand | typeof ACCESSORY_DESKTOP_TYPES.button | typeof ACCESSORY_MOBILE_TYPES.expand | typeof ACCESSORY_MOBILE_TYPES.button;
+    expandText?: string;
+    buttonContent?: React.ReactNode;
+    onButtonClick?: () => void;
+    onExpandClick?: () => void;
+    buttonHref?: string;
+};
+type CardListRowRailProps = {
+    children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
+    initiallyShownCards: number;
+    layout: typeof LAYOUTS.row | typeof LAYOUTS.rail;
+    accessory?: typeof ACCESSORY_DESKTOP_TYPES.pagination;
+    isMobile?: boolean;
+};
+type CardListCarouselProps = {
+    children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
+    initiallyShownCards: number;
+    layout: typeof LAYOUTS.row | typeof LAYOUTS.rail;
+    currentIndex: number;
+    setCurrentIndex: Dispatch<SetStateAction<number>>;
+    isMobile?: boolean;
 };
+type CardListProps = CardListBaseProps;
 export default CardListProps;
+export { LAYOUTS, ACCESSORY_DESKTOP_TYPES, ACCESSORY_MOBILE_TYPES };
+export type { LayoutDesktop, LayoutMobile, CardListGridStackProps, CardListRowRailProps, CardListCarouselProps, ExpandProps, };

package/bpk-component-card-list/src/common-types.js

@@ -1 +1,34 @@
-export {};
+/*
+ * 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.
+ */
+
+const LAYOUTS = {
+  grid: 'grid',
+  stack: 'stack',
+  row: 'row',
+  rail: 'rail'
+};
+const ACCESSORY_DESKTOP_TYPES = {
+  pagination: 'pagination',
+  expand: 'expand',
+  button: 'button'
+};
+const ACCESSORY_MOBILE_TYPES = {
+  expand: 'expand',
+  button: 'button'
+};
+export { LAYOUTS, ACCESSORY_DESKTOP_TYPES, ACCESSORY_MOBILE_TYPES };

package/bpk-component-card-list/testMocks.js

@@ -0,0 +1,27 @@
+/*
+ * 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 BpkCard from "../bpk-component-card";
+import { jsx as _jsx } from "react/jsx-runtime";
+const mockCards = numberOfCards => Array.from({
+  length: numberOfCards
+}, (_, i) => /*#__PURE__*/_jsx(BpkCard, {
+  "data-testid": `card-testId-${i}`,
+  children: `Card ${i}`
+}, i));
+export default mockCards;

package/bpk-component-drawer/src/BpkDrawer.d.ts

@@ -20,6 +20,7 @@ export type Props = {
     isIphone?: boolean;
     padded?: boolean;
     mobileModalDisplay?: boolean;
+    containerClassName?: string;
 };
-declare const BpkDrawer: ({ children, className, closeLabel, closeText, contentClassName, dialogRef, getApplicationElement, hideTitle, id, isIpad, isIphone, isOpen, mobileModalDisplay, onClose, padded, renderTarget, title, width, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkDrawer: ({ children, className, closeLabel, closeText, containerClassName, contentClassName, dialogRef, getApplicationElement, hideTitle, id, isIpad, isIphone, isOpen, mobileModalDisplay, onClose, padded, renderTarget, title, width, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkDrawer;

package/bpk-component-drawer/src/BpkDrawer.js

@@ -25,6 +25,7 @@ const BpkDrawer = ({
   className = undefined,
   closeLabel = null,
   closeText = undefined,
+  containerClassName = undefined,
   contentClassName = undefined,
   dialogRef,
   getApplicationElement,
@@ -79,6 +80,7 @@ const BpkDrawer = ({
       isIphone: isIphone,
       padded: padded,
       mobileModalDisplay: mobileModalDisplay,
+      containerClassName: containerClassName,
       children: children
     })
   });

package/bpk-component-icon/lg/flame.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const FlameIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M13.473 6.517C11.313 4.604 12.485.5 12.485.5S6.315 4.357 7.44 12.827c-1.897-.756-1.897-3.07-1.126-4.613C4.771 9.757 4 12.41 4 14.478c0 4.427 3.487 8.022 7.791 8.022s7.776-3.595 7.776-8.022c0-4.428-3.456-5.616-6.094-7.946zm-1.682 13.5c-1.543 0-2.947-.695-3.919-1.76 0 0 3.75-.123 4.845-4.582.586.448.956 1.805.57 2.978.942.092 3.024-2.67 1.374-6.68 1.234.756 2.607 2.252 2.607 4.535 0 3.055-2.515 5.508-5.477 5.508"
+  })
+});
+export default FlameIcon;

package/bpk-component-icon/lg/incompatible.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const IncompatibleIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1.5rem",
+  height: "1.5rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M21.364 10.293a1 1 0 1 1 1.414 1.414l-6.364 6.363h4.657a1 1 0 0 1 0 2h-7.07a1 1 0 0 1-1-1V12a1 1 0 1 1 2 0v4.656zM10.071 4a1 1 0 0 1 1 1v7.07a1 1 0 0 1-2 0V7.414l-6.364 6.363a1 1 0 1 1-1.414-1.414L7.657 6H3a1 1 0 0 1 0-2z"
+  })
+});
+export default IncompatibleIcon;

package/bpk-component-icon/sm/flame.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const FlameIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M13.71 6.6c-2.1-1.86-.96-5.85-.96-5.85s-6 3.75-4.905 11.985C6 12 6 9.75 6.75 8.25c-1.5 1.5-2.25 4.08-2.25 6.09 0 4.305 3.39 7.8 7.575 7.8s7.56-3.495 7.56-7.8-3.36-5.46-5.925-7.725zm-1.635 13.125c-1.5 0-2.865-.675-3.81-1.71 0 0 3.645-.12 4.71-4.455.57.435.93 1.755.555 2.895.915.09 2.94-2.595 1.335-6.495 1.2.735 2.535 2.19 2.535 4.41 0 2.97-2.445 5.355-5.325 5.355"
+  })
+});
+export default FlameIcon;

package/bpk-component-icon/sm/incompatible.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const IncompatibleIcon = props => /*#__PURE__*/_jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  width: "1rem",
+  height: "1rem",
+  ...props,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M21.364 10.292a1.001 1.001 0 0 1 1.415 1.415l-6.365 6.363h4.657a1 1 0 0 1 0 2.001H14a1 1 0 0 1-1.001-1V12a1 1 0 0 1 2 0v4.657zM10.071 3.999a1 1 0 0 1 1 1v7.071a1.001 1.001 0 0 1-2 0V7.414l-6.363 6.364a1.001 1.001 0 0 1-1.415-1.415L7.657 6H3.001a1 1 0 0 1 0-2.001z"
+  })
+});
+export default IncompatibleIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "37.7.1",
+  "version": "37.9.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,13 +22,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.12",
+    "@floating-ui/react": "^0.27.8",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.1.2",
     "@react-google-maps/api": "^2.19.3",
     "@skyscanner/bpk-foundations-web": "^19.5.0",
-    "@skyscanner/bpk-svgs": "^20.5.0",
+    "@skyscanner/bpk-svgs": "^20.6.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",