@skyscanner/backpack-web 37.7.0 → 37.8.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

@@ -16,35 +16,126 @@
  * limitations under the License.
  */
 
+import { useState, useEffect } from 'react';
+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";
 const getClassName = cssModules(STYLES);
+const DEFAULT_ITEMS = 3;
 const BpkCardList = props => {
   const {
+    accessoryDesktop,
+    accessoryMobile,
+    buttonContent,
     buttonHref,
-    buttonText,
+    cardList,
+    chipGroup,
     description,
+    expandText,
+    initiallyShownCards = DEFAULT_ITEMS,
+    layoutDesktop,
+    layoutMobile,
     onButtonClick,
+    onExpandClick,
     title
   } = props;
-  const button = buttonText && /*#__PURE__*/_jsx(BpkButtonV2, {
+  const [showHeaderButton, setShowHeaderButton] = useState(false);
+  const [isMobileActive, setIsMobileActive] = useState(false);
+  useEffect(() => {
+    if (isMobileActive) {
+      setShowHeaderButton(!!buttonContent && accessoryMobile !== ACCESSORY_MOBILE_TYPES.button);
+    } else {
+      setShowHeaderButton(!!buttonContent && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button);
+    }
+  }, [isMobileActive, buttonContent, accessoryMobile, accessoryDesktop]);
+  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", {
     className: getClassName('bpk-card-list'),
+    "data-testid": "bpk-card-list",
     children: [/*#__PURE__*/_jsx(BpkSectionHeader, {
       title: title,
       description: description,
-      button: button
-    }), /*#__PURE__*/_jsx("div", {
+      button: showHeaderButton ? headerButton : null
+    }), chipGroup, /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-card-list--card-list'),
       "data-testid": "bpk-card-list--card-list",
-      children: "TODO: CARDS"
+      children: /*#__PURE__*/_jsx(BpkBreakpoint, {
+        query: BREAKPOINTS.MOBILE,
+        children: isActive => {
+          if (isActive) {
+            setIsMobileActive(isActive);
+
+            // if (layoutMobile === LAYOUTS.rail) {
+            //   return (
+            //     <BpkCardListRowRailContainer
+            //       initiallyShownCards={initiallyShownCards}
+            //       layout={layoutMobile}
+            //     >
+            //       {cardList}
+            //     </BpkCardListRowRailContainer>
+            //   );
+            // }
+
+            if (layoutMobile === LAYOUTS.stack) {
+              return /*#__PURE__*/_jsx(BpkCardListGridStack, {
+                accessory: accessoryMobile,
+                initiallyShownCards: initiallyShownCards,
+                buttonContent: buttonContent,
+                expandText: expandText,
+                onButtonClick: onButtonClick,
+                onExpandClick: onExpandClick,
+                layout: layoutMobile,
+                buttonHref: buttonHref,
+                children: cardList
+              });
+            }
+          }
+
+          /// ///// Desktop Cases ////////
+
+          // if (
+          //   layoutDesktop === LAYOUTS.row &&
+          //   accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.expand &&
+          //   accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button
+          // ) {
+          //   return (
+          //     <BpkCardListRowRailContainer
+          //       accessory={accessoryDesktop}
+          //       initiallyShownCards={initiallyShownCards}
+          //       layout={layoutDesktop}
+          //     >
+          //       {cardList}
+          //     </BpkCardListRowRailContainer>
+          //   );
+          // }
+
+          if (layoutDesktop === LAYOUTS.grid && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.pagination) {
+            return /*#__PURE__*/_jsx(BpkCardListGridStack, {
+              accessory: accessoryDesktop,
+              initiallyShownCards: initiallyShownCards,
+              buttonContent: buttonContent,
+              expandText: expandText,
+              onButtonClick: onButtonClick,
+              onExpandClick: onExpandClick,
+              layout: layoutDesktop,
+              buttonHref: buttonHref,
+              children: cardList
+            });
+          }
+          return null;
+        }
+      })
     })]
   });
 };

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 onExpandTogle = () => {
+    setCollapsed(prev => !prev);
+    onExpandClick?.();
+  };
+  const expandAccessoryContent = /*#__PURE__*/_jsx(ExpandAccessoryContent, {
+    collapsed: collapsed,
+    onExpandTogle: onExpandTogle,
+    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/BpkExpand/ExpandAccessoryContent.d.ts

@@ -0,0 +1,3 @@
+import type { ExpandProps } from '../common-types';
+declare const ExpandAccessoryContent: ({ children, collapsed, onExpandTogle, }: 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,
+  onExpandTogle
+}) => /*#__PURE__*/_jsxs(BpkButtonV2, {
+  "data-testid": "bpk-card-list__accessory-expand-button",
+  type: BUTTON_TYPES.link,
+  onClick: () => onExpandTogle(),
+  "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,54 @@
-type CardListProps = {
+import type { ReactElement } 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;
+    onExpandTogle: () => 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];
+    initiallyShownCards?: 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 CardListProps = CardListBaseProps;
 export default CardListProps;
+export { LAYOUTS, ACCESSORY_DESKTOP_TYPES, ACCESSORY_MOBILE_TYPES };
+export type { LayoutDesktop, LayoutMobile, CardListGridStackProps, ExpandProps, };

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

@@ -1 +1,50 @@
-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'
+};
+
+// type CardListRowRailProps = {
+//   children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
+//   initiallyShownCards: number;
+//   layout: typeof LAYOUTS.row | typeof LAYOUTS.rail;
+//   accessory?: typeof ACCESSORY_DESKTOP_TYPES.Pagination;
+// };
+
+// type CardListCarouselProps = {
+//   children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
+//   initiallyShownCards: number;
+//   layout: typeof LAYOUTS.row | typeof LAYOUTS.rail;
+//   currentIndex: number;
+//   setCurrentIndex: Dispatch<SetStateAction<number>>;
+// }
+
+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-datepicker/src/BpkDatepicker.js

@@ -200,7 +200,7 @@ class BpkDatepicker extends Component {
         id: id,
         name: `${id}_input`,
         value: this.getValue(selectionConfiguration, formatDate),
-        "aria-live": "assertive",
+        "aria-live": "polite",
         "aria-atomic": "true",
         "aria-label": this.getLabel(selectionConfiguration, formatDateFull),
         onChange: () => null,

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/package.json

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