@skyscanner/backpack-web 42.12.0 → 42.13.0

package/bpk-component-comparison-table/index.d.ts

@@ -1,3 +1,6 @@
+import BpkComparisonTable from './src/BpkComparisonTable/BpkComparisonTable';
 import BpkComparisonTray from './src/BpkComparisonTray/BpkComparisonTray';
 export type { BpkComparisonItem, BpkComparisonTrayRootProps, BpkComparisonTrayItemProps, BpkComparisonTrayNamespace, } from './src/BpkComparisonTray/common-types';
-export default BpkComparisonTray;
+export type { BpkCompareRow, BpkCompareColumn, BpkComparisonTableRootProps, BpkComparisonTableStrings, BpkComparisonTableNamespace, } from './src/BpkComparisonTable/common-types';
+export { BpkComparisonTray };
+export default BpkComparisonTable;

package/bpk-component-comparison-table/index.js

@@ -16,5 +16,7 @@
  * limitations under the License.
  */
 
+import BpkComparisonTable from "./src/BpkComparisonTable/BpkComparisonTable";
 import BpkComparisonTray from "./src/BpkComparisonTray/BpkComparisonTray";
-export default BpkComparisonTray;
+export { BpkComparisonTray };
+export default BpkComparisonTable;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.d.ts

@@ -0,0 +1,17 @@
+import type { BpkComparisonTableNamespace } from './common-types';
+/**
+ * BpkComparisonTable — side-by-side comparison modal.
+ *
+ * @example
+ * <BpkComparisonTable.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <BpkComparisonTable.Header title="Compare cars" strings={strings} />
+ *   <BpkComparisonTable.Content
+ *     columns={columns}
+ *     onRemove={(itemId) => handleRemove(itemId)}
+ *     onAddMoreClick={() => setIsOpen(false)}
+ *     strings={strings}
+ *   />
+ * </BpkComparisonTable.Root>
+ */
+declare const BpkComparisonTable: BpkComparisonTableNamespace;
+export default BpkComparisonTable;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.js

@@ -0,0 +1,41 @@
+/*
+ * 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 BpkComparisonTableContent from "./BpkComparisonTableContent";
+import BpkComparisonTableHeader from "./BpkComparisonTableHeader";
+import BpkComparisonTableRoot from "./BpkComparisonTableRoot";
+/**
+ * BpkComparisonTable — side-by-side comparison modal.
+ *
+ * @example
+ * <BpkComparisonTable.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <BpkComparisonTable.Header title="Compare cars" strings={strings} />
+ *   <BpkComparisonTable.Content
+ *     columns={columns}
+ *     onRemove={(itemId) => handleRemove(itemId)}
+ *     onAddMoreClick={() => setIsOpen(false)}
+ *     strings={strings}
+ *   />
+ * </BpkComparisonTable.Root>
+ */
+const BpkComparisonTable = {
+  Root: BpkComparisonTableRoot,
+  Header: BpkComparisonTableHeader,
+  Content: BpkComparisonTableContent
+};
+export default BpkComparisonTable;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.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-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-button{opacity:var(--bpk-image-opacity, 1);overflow:clip;margin-block-start:calc(.5rem*var(--bpk-image-opacity, 1));max-block-size:calc(5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.d.ts

@@ -0,0 +1,8 @@
+import type { BpkCompareColumn } from './common-types';
+type BpkComparisonTableColumnHeaderProps = Pick<BpkCompareColumn, 'imageSrc' | 'imageAlt' | 'headerContent' | 'itemId' | 'bestTag' | 'removeA11yLabel'> & {
+    removeLabel: string;
+    bestTagLabel: string;
+    onRemove: (itemId: string) => void;
+};
+declare const BpkComparisonTableColumnHeader: ({ bestTag, bestTagLabel, headerContent, imageAlt, imageSrc, itemId, onRemove, removeA11yLabel, removeLabel, }: BpkComparisonTableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.js

@@ -0,0 +1,66 @@
+/*
+ * 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 BpkBadge, { BADGE_TYPES } from "../../../bpk-component-badge";
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkComparisonTableColumnHeader = ({
+  bestTag = false,
+  bestTagLabel,
+  headerContent,
+  imageAlt = '',
+  imageSrc,
+  itemId,
+  onRemove,
+  removeA11yLabel,
+  removeLabel
+}) => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-comparison-table__header-content'),
+  children: [/*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-comparison-table__header-image-wrapper'),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-comparison-table__header-image-area'),
+      children: imageSrc && /*#__PURE__*/_jsx("img", {
+        src: imageSrc,
+        alt: imageAlt
+      })
+    }), bestTag && /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-comparison-table__best-tag'),
+      children: /*#__PURE__*/_jsx(BpkBadge, {
+        type: BADGE_TYPES.brand,
+        children: bestTagLabel
+      })
+    })]
+  }), /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-comparison-table__header-id-section'),
+    children: headerContent
+  }), /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-comparison-table__remove-button'),
+    children: /*#__PURE__*/_jsx(BpkButton, {
+      type: BUTTON_TYPES.link,
+      size: SIZE_TYPES.small,
+      onClick: () => onRemove(itemId),
+      "aria-label": removeA11yLabel,
+      children: removeLabel
+    })
+  })]
+});
+export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeaderPlaceholder.d.ts

@@ -0,0 +1,7 @@
+type BpkComparisonTableColumnHeaderPlaceholderProps = {
+    addMoreDescription: string;
+    addMoreLinkText: string;
+    onAddMoreClick: () => void;
+};
+declare const BpkComparisonTableColumnHeaderPlaceholder: ({ addMoreDescription, addMoreLinkText, onAddMoreClick, }: BpkComparisonTableColumnHeaderPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableColumnHeaderPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeaderPlaceholder.js

@@ -0,0 +1,49 @@
+/*
+ * 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 BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
+import { BpkFlex, BpkSpacing } from "../../../bpk-component-layout";
+import BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../../bpk-component-text";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkComparisonTableColumnHeaderPlaceholder = ({
+  addMoreDescription,
+  addMoreLinkText,
+  onAddMoreClick
+}) => /*#__PURE__*/_jsxs(BpkFlex, {
+  direction: "column",
+  align: "center",
+  gap: BpkSpacing.MD,
+  paddingTop: BpkSpacing.LG,
+  paddingInline: BpkSpacing.XL,
+  children: [/*#__PURE__*/_jsx(BpkText, {
+    textAlign: "center",
+    tagName: "p",
+    textStyle: TEXT_STYLES.bodyDefault,
+    color: TEXT_COLORS.textSecondary,
+    children: addMoreDescription
+  }), /*#__PURE__*/_jsx(BpkButton, {
+    type: BUTTON_TYPES.link,
+    size: SIZE_TYPES.small,
+    onClick: onAddMoreClick,
+    children: addMoreLinkText
+  })]
+});
+export default BpkComparisonTableColumnHeaderPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTableContentProps } from './common-types';
+declare const BpkComparisonTableContent: ({ columns, onAddMoreClick, onRemove, strings, }: BpkComparisonTableContentProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableContent;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.js

@@ -0,0 +1,94 @@
+/*
+ * 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 { useEffect, useRef } from 'react';
+import { BpkTable, BpkTableBody, BpkTableCell, BpkTableRow, TABLE_BODY_TYPES } from "../../../bpk-component-table";
+import { cssModules } from "../../../bpk-react-utils";
+import BpkComparisonTableHeaderRow from "./BpkComparisonTableHeaderRow";
+import STYLES from "./BpkComparisonTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const MAX_COLUMNS = 3;
+
+// Matches the image area height (5.1875rem × 16px). Opacity goes from 1 → 0 as the user scrolls 0 → 83 px, giving a smooth parallax fade.
+const IMAGE_FADE_THRESHOLD_PX = 83;
+const BpkComparisonTableContent = ({
+  columns,
+  onAddMoreClick,
+  onRemove,
+  strings
+}) => {
+  const scrollContainerRef = useRef(null);
+
+  // Pad with nulls so the table always renders exactly MAX_COLUMNS slots.
+  const displayColumns = [...columns, null, null, null].slice(0, MAX_COLUMNS);
+  const rowIds = columns[0]?.rows.map(row => row.rowId) ?? [];
+
+  // Dev-mode guard: warn if not all columns share the same rowId sequence.
+  if (process.env.NODE_ENV !== 'production' && columns.length > 1) {
+    const rowIdsByColumn = columns.map(column => column.rows.map(row => row.rowId).join(','));
+    const allMatch = rowIdsByColumn.every(ids => ids === rowIdsByColumn[0]);
+    if (!allMatch) {
+      // eslint-disable-next-line no-console
+      console.warn('[BpkComparisonTable] Not all columns share the same rowId sequence. Rows may misalign.');
+    }
+  }
+
+  // Pre-index cells by itemId → rowId for O(1) lookup during render.
+  const cellsByItemAndRow = new Map(columns.map(column => [column.itemId, new Map(column.rows.map(row => [row.rowId, row.cell]))]));
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return undefined;
+    const handleScroll = () => {
+      const {
+        scrollTop
+      } = container;
+      // During the animation phase, push tbody down by the scroll amount so rows appear locked in place.
+      // Once the fade-out completes the offset is fixed at the threshold and normal scrolling resumes.
+      container.style.setProperty('--bpk-rows-offset', `${Math.min(scrollTop, IMAGE_FADE_THRESHOLD_PX)}px`);
+      container.style.setProperty('--bpk-image-opacity', `${1 - Math.min(scrollTop / IMAGE_FADE_THRESHOLD_PX, 1)}`);
+    };
+    container.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: scrollContainerRef,
+    className: getClassName('bpk-comparison-table__scroll-container'),
+    children: /*#__PURE__*/_jsxs(BpkTable, {
+      children: [/*#__PURE__*/_jsx(BpkComparisonTableHeaderRow, {
+        displayColumns: displayColumns,
+        onRemove: onRemove,
+        onAddMoreClick: onAddMoreClick,
+        strings: strings
+      }), /*#__PURE__*/_jsx(BpkTableBody, {
+        type: TABLE_BODY_TYPES.striped,
+        children: rowIds.map(rowId => /*#__PURE__*/_jsx(BpkTableRow, {
+          children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableCell, {
+            // Placeholder need a distinct background colour not available via BpkTableCell props
+            // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+            className: column ? undefined : getClassName('bpk-comparison-table__placeholder-cell'),
+            children: column ? cellsByItemAndRow.get(column.itemId)?.get(rowId) ?? null : null
+          }, column ? `${rowId}-${column.itemId}` : `${rowId}-placeholder-${index}`))
+        }, rowId))
+      })]
+    })
+  });
+};
+export default BpkComparisonTableContent;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeader.d.ts

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

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeader.js

@@ -0,0 +1,42 @@
+/*
+ * 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 { BpkBox, BpkSpacing } from "../../../bpk-component-layout";
+import { BpkModalV3 } from "../../../bpk-component-modal";
+import BpkVisuallyHidden from "../../../bpk-component-visually-hidden";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BpkComparisonTableHeader = ({
+  children,
+  strings,
+  title
+}) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsxs(BpkModalV3.Header, {
+    children: [/*#__PURE__*/_jsx(BpkModalV3.Title, {
+      children: title ?? /*#__PURE__*/_jsx(BpkVisuallyHidden, {
+        children: strings.accessibleLabel
+      })
+    }), /*#__PURE__*/_jsx(BpkModalV3.CloseTrigger, {
+      label: strings.closeLabel
+    })]
+  }), children && /*#__PURE__*/_jsx(BpkBox, {
+    paddingBottom: BpkSpacing.MD,
+    paddingInline: BpkSpacing.Base,
+    children: children
+  })]
+});
+export default BpkComparisonTableHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.d.ts

@@ -0,0 +1,9 @@
+import type { BpkComparisonTableStrings, BpkCompareColumn } from './common-types';
+type BpkComparisonTableHeaderRowProps = {
+    displayColumns: Array<BpkCompareColumn | null>;
+    onRemove: (itemId: string) => void;
+    onAddMoreClick: () => void;
+    strings: BpkComparisonTableStrings;
+};
+declare const BpkComparisonTableHeaderRow: ({ displayColumns, onAddMoreClick, onRemove, strings, }: BpkComparisonTableHeaderRowProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTableHeaderRow;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.js

@@ -0,0 +1,52 @@
+/*
+ * 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 { BpkTableHead, BpkTableHeadCell, BpkTableRow } from "../../../bpk-component-table";
+import BpkComparisonTableColumnHeader from "./BpkComparisonTableColumnHeader";
+import BpkComparisonTableColumnHeaderPlaceholder from "./BpkComparisonTableColumnHeaderPlaceholder";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkComparisonTableHeaderRow = ({
+  displayColumns,
+  onAddMoreClick,
+  onRemove,
+  strings
+}) => {
+  const {
+    addMoreDescription,
+    addMoreLinkText,
+    bestTagLabel,
+    removeLabel
+  } = strings;
+  return /*#__PURE__*/_jsx(BpkTableHead, {
+    children: /*#__PURE__*/_jsx(BpkTableRow, {
+      children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableHeadCell, {
+        children: column ? /*#__PURE__*/_jsx(BpkComparisonTableColumnHeader, {
+          ...column,
+          removeLabel: removeLabel,
+          onRemove: onRemove,
+          bestTagLabel: bestTagLabel
+        }) : /*#__PURE__*/_jsx(BpkComparisonTableColumnHeaderPlaceholder, {
+          addMoreDescription: addMoreDescription,
+          addMoreLinkText: addMoreLinkText,
+          onAddMoreClick: onAddMoreClick
+        })
+      }, column ? column.itemId : `placeholder-${index}`))
+    })
+  });
+};
+export default BpkComparisonTableHeaderRow;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.d.ts

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

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.js

@@ -0,0 +1,38 @@
+/*
+ * 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 { BpkModalV3 } from "../../../bpk-component-modal";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BpkComparisonTableRoot = ({
+  children,
+  isOpen,
+  onClose
+}) => /*#__PURE__*/_jsx(BpkModalV3.Root, {
+  open: isOpen,
+  onOpenChange: details => {
+    if (!details.open) {
+      onClose();
+    }
+  },
+  children: /*#__PURE__*/_jsxs(BpkModalV3.Portal, {
+    children: [/*#__PURE__*/_jsx(BpkModalV3.Scrim, {}), /*#__PURE__*/_jsx(BpkModalV3.Content, {
+      children: children
+    })]
+  })
+});
+export default BpkComparisonTableRoot;

package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+/** A single row entry within a comparison column. */
+export type BpkCompareRow = {
+    /** Stable unique identifier used to align rows across columns. */
+    rowId: string;
+    /** Cell content — consumer-controlled ReactNode. */
+    cell: ReactNode;
+};
+/** Data for one filled comparison column. */
+export type BpkCompareColumn = {
+    /** Stable unique identifier used for removal callbacks. */
+    itemId: string;
+    /** When true, renders a BpkBadge type=brand overlaying the top-left of the image area. */
+    bestTag?: boolean;
+    /** Image src for the header image area. */
+    imageSrc?: string;
+    /** Alt text for the header image. */
+    imageAlt?: string;
+    /** Consumer-owned slot rendered below the image area (name, description, price, CTA...). */
+    headerContent: ReactNode;
+    /** Row data — must match rowId sequences across all columns. */
+    rows: BpkCompareRow[];
+    /** Accessible label for the Remove button (e.g. "Remove rentalcars.com deal"). */
+    removeA11yLabel: string;
+};
+/** All strings required by BpkComparisonTable. */
+export type BpkComparisonTableStrings = {
+    /** Accessible dialog name, used via BpkVisuallyHidden when no visible title is provided. */
+    accessibleLabel: string;
+    /** Accessible label for the modal close button. */
+    closeLabel: string;
+    /** Visible label for the Remove button in each column header. */
+    removeLabel: string;
+    /** Text inside the BpkBadge when bestTag=true (e.g. "Best"). */
+    bestTagLabel: string;
+    /** Description text inside the placeholder column. */
+    addMoreDescription: string;
+    /** Link text inside the placeholder column. */
+    addMoreLinkText: string;
+};
+/** Props for BpkComparisonTable.Root — modal shell only. */
+export type BpkComparisonTableRootProps = {
+    /** Controls whether the modal is open. */
+    isOpen: boolean;
+    /** Called when the modal close trigger is activated or Escape is pressed. */
+    onClose: () => void;
+    /** BpkComparisonTable.Header and BpkComparisonTable.Content. */
+    children: ReactNode;
+};
+/** Props for BpkComparisonTable.Header — modal header + optional AiBlurb slot. */
+export type BpkComparisonTableHeaderProps = {
+    /** Optional modal title rendered via BpkModalV3.Title. */
+    title?: string;
+    strings: BpkComparisonTableStrings;
+    /** Optional slot for AI blurb or any content below the title/close row. */
+    children?: ReactNode;
+};
+/** Props for BpkComparisonTable.Content — modal body with the comparison table. */
+export type BpkComparisonTableContentProps = {
+    /** 1–3 filled columns. Component pads to 3 with placeholder cells automatically. */
+    columns: BpkCompareColumn[];
+    /** Called when a Remove button is clicked, with the column's itemId. */
+    onRemove: (itemId: string) => void;
+    /** Called when the Add more link in a placeholder column is clicked. */
+    onAddMoreClick: () => void;
+    strings: BpkComparisonTableStrings;
+};
+/** Namespace type covering all BpkComparisonTable subcomponents. */
+export type BpkComparisonTableNamespace = {
+    Root: (props: BpkComparisonTableRootProps) => ReactNode;
+    Header: (props: BpkComparisonTableHeaderProps) => ReactNode;
+    Content: (props: BpkComparisonTableContentProps) => ReactNode;
+};

package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.js

@@ -0,0 +1 @@
+export {};

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;height:1.75rem;flex-shrink:0}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{object-fit:cover}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;right:0;display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translate(50%, -50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;height:1.75rem;flex-shrink:0;border:.0625rem dashed #c1c7cf;border-radius:.25rem}
+.bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;height:1.75rem;flex-shrink:0}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{object-fit:cover}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;height:1.75rem;flex-shrink:0;border:.0625rem dashed #c1c7cf;border-radius:.25rem}

package/package.json

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