@skyscanner/backpack-web 42.8.0 → 42.9.0

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

@@ -0,0 +1,3 @@
+import BpkComparisonTray from './src/BpkComparisonTray/BpkComparisonTray';
+export type { BpkComparisonItem, BpkComparisonTrayRootProps, BpkComparisonTrayItemProps, BpkComparisonTrayNamespace, } from './src/BpkComparisonTray/common-types';
+export default BpkComparisonTray;

package/bpk-component-comparison-table/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 BpkComparisonTray from "./src/BpkComparisonTray/BpkComparisonTray";
+export default BpkComparisonTray;

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

@@ -0,0 +1,18 @@
+import type { BpkComparisonTrayNamespace } from './common-types';
+/**
+ * BpkComparisonTray is a data-driven tray component for comparing up to 3 items.
+ *
+ * Consumer usage — only `Root` is the public API:
+ *
+ * @example
+ * <BpkComparisonTray.Root
+ *   items={items}
+ *   onRemove={(id) => setItems(items.filter(item => item.id !== id))}
+ *   onCompare={() => navigate('/compare')}
+ * />
+ *
+ * `Item` and `ItemPlaceholder` are internal rendering primitives exported for
+ * testing and extension purposes only.
+ */
+declare const BpkComparisonTray: BpkComparisonTrayNamespace;
+export default BpkComparisonTray;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.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 BpkComparisonTrayItem from "./BpkComparisonTrayItem";
+import BpkComparisonTrayItemPlaceholder from "./BpkComparisonTrayItemPlaceholder";
+import BpkComparisonTrayRoot from "./BpkComparisonTrayRoot";
+/**
+ * BpkComparisonTray is a data-driven tray component for comparing up to 3 items.
+ *
+ * Consumer usage — only `Root` is the public API:
+ *
+ * @example
+ * <BpkComparisonTray.Root
+ *   items={items}
+ *   onRemove={(id) => setItems(items.filter(item => item.id !== id))}
+ *   onCompare={() => navigate('/compare')}
+ * />
+ *
+ * `Item` and `ItemPlaceholder` are internal rendering primitives exported for
+ * testing and extension purposes only.
+ */
+const BpkComparisonTray = {
+  Root: BpkComparisonTrayRoot,
+  Item: BpkComparisonTrayItem,
+  ItemPlaceholder: BpkComparisonTrayItemPlaceholder
+};
+export default BpkComparisonTray;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.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-tray{width:22.1875rem;max-width:100%}.bpk-comparison-tray__item{position:relative;width:3.875rem;height:1.75rem;flex-shrink:0}@media(max-width: 32rem){.bpk-comparison-tray__item{width:auto;min-width:0;flex:1}}.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: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;position:relative;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}@media(max-width: 32rem){.bpk-comparison-tray__item-placeholder{width:auto;min-width:0;flex:1}}

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTrayItemProps } from './common-types';
+declare function BpkComparisonTrayItem({ item, onRemove, removeLabel }: BpkComparisonTrayItemProps): import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTrayItem;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItem.js

@@ -0,0 +1,48 @@
+/*
+ * 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 CloseIcon from "../../../bpk-component-icon/sm/close";
+import BpkImage from "../../../bpk-component-image";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTray.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+function BpkComparisonTrayItem({
+  item,
+  onRemove,
+  removeLabel
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-comparison-tray__item'),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-comparison-tray__item-image-container'),
+      children: /*#__PURE__*/_jsx(BpkImage, {
+        src: item.image,
+        altText: item.imageAlt ?? item.label,
+        aspectRatio: 62 / 28
+      })
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: getClassName('bpk-comparison-tray__item-close'),
+      "aria-label": removeLabel,
+      onClick: () => onRemove(item.id),
+      children: /*#__PURE__*/_jsx(CloseIcon, {})
+    })]
+  });
+}
+export default BpkComparisonTrayItem;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.d.ts

@@ -0,0 +1,2 @@
+declare function BpkComparisonTrayItemPlaceholder(): import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTrayItemPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayItemPlaceholder.js

@@ -0,0 +1,29 @@
+/*
+ * 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 { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkComparisonTray.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+function BpkComparisonTrayItemPlaceholder() {
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-comparison-tray__item-placeholder'),
+    "aria-hidden": "true"
+  });
+}
+export default BpkComparisonTrayItemPlaceholder;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.d.ts

@@ -0,0 +1,3 @@
+import type { BpkComparisonTrayRootProps } from './common-types';
+declare function BpkComparisonTrayRoot({ ariaLabel, compareLabel, items, onCompare, onRemove, removeLabel, }: BpkComparisonTrayRootProps): import("react/jsx-runtime").JSX.Element;
+export default BpkComparisonTrayRoot;

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTrayRoot.js

@@ -0,0 +1,75 @@
+/*
+ * 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 } from "../../../bpk-component-button";
+import { BpkCardV2, CARD_V2_SURFACE_COLORS } from "../../../bpk-component-card";
+import { BpkSpacing } from "../../../bpk-component-layout";
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
+import BpkComparisonTrayItem from "./BpkComparisonTrayItem";
+import BpkComparisonTrayItemPlaceholder from "./BpkComparisonTrayItemPlaceholder";
+import STYLES from "./BpkComparisonTray.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const MAX_ITEMS = 3;
+function BpkComparisonTrayRoot({
+  ariaLabel,
+  compareLabel,
+  items,
+  onCompare,
+  onRemove,
+  removeLabel
+}) {
+  const displayItems = Array.from({
+    length: MAX_ITEMS
+  }, (_value, index) => items[index] ?? null);
+  return /*#__PURE__*/_jsx("div", {
+    ...getDataComponentAttribute('ComparisonTray'),
+    className: getClassName('bpk-comparison-tray'),
+    children: /*#__PURE__*/_jsx(BpkCardV2.Root, {
+      bgColor: CARD_V2_SURFACE_COLORS.surfaceContrast,
+      role: "region",
+      "aria-label": ariaLabel,
+      children: /*#__PURE__*/_jsxs(BpkCardV2.Body, {
+        templateColumns: "1fr auto",
+        align: "center",
+        gap: BpkSpacing.Base,
+        children: [/*#__PURE__*/_jsx(BpkCardV2.Section, {
+          flexDirection: "row",
+          alignItems: "center",
+          padding: BpkSpacing.None,
+          gap: BpkSpacing.MD,
+          children: displayItems.map((item, index) => item ? /*#__PURE__*/_jsx(BpkComparisonTrayItem, {
+            item: item,
+            onRemove: onRemove,
+            removeLabel: `${removeLabel} ${item.label}`
+          }, item.id) :
+          /*#__PURE__*/
+          // eslint-disable-next-line react/no-array-index-key
+          _jsx(BpkComparisonTrayItemPlaceholder, {}, `placeholder-${index}`))
+        }), /*#__PURE__*/_jsx(BpkButton, {
+          type: BUTTON_TYPES.linkOnDark,
+          implicit: true,
+          disabled: items.length <= 1,
+          onClick: onCompare,
+          children: compareLabel
+        })]
+      })
+    })
+  });
+}
+export default BpkComparisonTrayRoot;

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

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+/** A single item to be displayed in the ComparisonTray. */
+export type BpkComparisonItem = {
+    /** Stable unique identifier used for removal. */
+    id: string;
+    /** Accessible label for the item (used as image alt if imageAlt is not provided). */
+    label: string;
+    /** Image src URL. */
+    image: string;
+    /** Alt text for the image. Defaults to `label` if not provided. */
+    imageAlt?: string;
+};
+/** Props for BpkComparisonTray.Root — the only consumer-facing API. */
+export type BpkComparisonTrayRootProps = {
+    /** Up to 3 items to display. Consumer owns and manages this state. */
+    items: BpkComparisonItem[];
+    /** Called when the ✕ button on an item is clicked, with the item's id. */
+    onRemove: (id: string) => void;
+    /** Called when the Compare button is clicked. */
+    onCompare: () => void;
+    /** Label for the Compare button. */
+    compareLabel: string;
+    /** Accessible label for the tray region. */
+    ariaLabel: string;
+    /** Accessible label for the remove button (e.g. "Remove"). Composed with the item label internally. */
+    removeLabel: string;
+};
+/** Props for BpkComparisonTray.Item — internal use only. */
+export type BpkComparisonTrayItemProps = {
+    item: BpkComparisonItem;
+    onRemove: (id: string) => void;
+    removeLabel: string;
+};
+/** Namespace type covering all BpkComparisonTray subcomponents. */
+export type BpkComparisonTrayNamespace = {
+    Root: {
+        (props: BpkComparisonTrayRootProps): ReactNode;
+        displayName?: string;
+    };
+    Item: {
+        (props: BpkComparisonTrayItemProps): ReactNode;
+        displayName?: string;
+    };
+    ItemPlaceholder: {
+        (): ReactNode;
+        displayName?: string;
+    };
+};

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

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

package/bpk-component-thumb-button/index.d.ts

@@ -1,3 +1,3 @@
 import BpkThumbButton from './src/BpkThumbButton';
-export type { BpkThumbButtonProps, ThumbsButtonType } from './src/BpkThumbButton';
+export type { BpkThumbButtonProps, ThumbsButtonType, ThumbsButtonSize, ThumbsButtonColor } from './src/BpkThumbButton';
 export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.d.ts

@@ -1,9 +1,15 @@
 export type ThumbsButtonType = 'up' | 'down';
+export type ThumbsButtonSize = 'default' | 'small';
+export type ThumbsButtonColor = 'default' | 'primary';
 export type BpkThumbButtonProps = {
     /**
      * Accessibility label for screen readers (REQUIRED).
      */
     accessibilityLabel: string;
+    /**
+     * Icon color variant. 'primary' uses the primary text color, 'default' uses the disabled text color (grayish).
+     */
+    iconColor?: ThumbsButtonColor;
     /**
      * Click handler callback.
      */
@@ -12,10 +18,15 @@ export type BpkThumbButtonProps = {
      * Whether the thumb is in selected state.
      */
     selected?: boolean;
+    /**
+     * Size variant. 'small' uses sm icons with no fixed dimensions, matching inline text use cases.
+     * Note: 'small' disables the 48px touch target pseudo-element — do not use on touch-primary surfaces.
+     */
+    size?: ThumbsButtonSize;
     /**
      * Type of thumb icon to display.
      */
     type: ThumbsButtonType;
 };
-declare const BpkThumbButton: ({ accessibilityLabel, onClick, selected, type, }: BpkThumbButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkThumbButton: ({ accessibilityLabel, iconColor, onClick, selected, size, type, }: BpkThumbButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkThumbButton;

package/bpk-component-thumb-button/src/BpkThumbButton.js

@@ -16,20 +16,34 @@
  * limitations under the License.
  */
 
-import ThumbsDownIcon from "../../bpk-component-icon/lg/thumbs-down";
-import ThumbsUpIcon from "../../bpk-component-icon/lg/thumbs-up";
+import ThumbsDownIconLg from "../../bpk-component-icon/lg/thumbs-down";
+import ThumbsUpIconLg from "../../bpk-component-icon/lg/thumbs-up";
+import ThumbsDownIconSm from "../../bpk-component-icon/sm/thumbs-down";
+import ThumbsUpIconSm from "../../bpk-component-icon/sm/thumbs-up";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkThumbButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkThumbButton = ({
   accessibilityLabel,
+  iconColor = 'default',
   onClick,
   selected = false,
+  size = 'default',
   type
 }) => {
-  const Icon = type === 'up' ? ThumbsUpIcon : ThumbsDownIcon;
-  const classNames = getClassName('bpk-thumb-button', selected && 'bpk-thumb-button--selected');
+  const icons = {
+    small: {
+      up: ThumbsUpIconSm,
+      down: ThumbsDownIconSm
+    },
+    default: {
+      up: ThumbsUpIconLg,
+      down: ThumbsDownIconLg
+    }
+  };
+  const Icon = icons[size][type];
+  const classNames = getClassName('bpk-thumb-button', selected && 'bpk-thumb-button--selected', size === 'small' && 'bpk-thumb-button--small', iconColor === 'primary' && 'bpk-thumb-button--color-primary');
   const handleClick = event => {
     event.stopPropagation();
     onClick(type);

package/bpk-component-thumb-button/src/BpkThumbButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-thumb-button{display:flex;width:1.5rem;height:1.5rem;padding:0;justify-content:center;align-items:center;transition:all 200ms ease-in-out;border:none;background:rgba(0,0,0,0);color:rgba(0,0,0,.2);cursor:pointer;appearance:none;position:relative}.bpk-thumb-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}:global(.bpk-no-touch-support) .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}@media(prefers-reduced-motion: reduce){.bpk-thumb-button{transition:none}}.bpk-thumb-button--selected{color:#0062e3}.bpk-no-touch-support .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}.bpk-thumb-button__icon{display:flex;fill:currentcolor}
+.bpk-thumb-button{display:flex;width:1.5rem;height:1.5rem;padding:0;justify-content:center;align-items:center;transition:all 200ms ease-in-out;border:none;background:rgba(0,0,0,0);color:rgba(0,0,0,.2);cursor:pointer;appearance:none;position:relative}.bpk-thumb-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}:global(.bpk-no-touch-support) .bpk-thumb-button:hover:not(:active):not(:disabled){color:#626971}@media(prefers-reduced-motion: reduce){.bpk-thumb-button{transition:none}}.bpk-thumb-button:active{color:#626971}.bpk-thumb-button--selected{color:#0062e3}.bpk-no-touch-support .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}.bpk-thumb-button--selected:active{color:#0062e3}.bpk-thumb-button__icon{display:flex;fill:currentcolor}.bpk-thumb-button--color-primary{color:#161616}.bpk-no-touch-support .bpk-thumb-button--color-primary:hover:not(:active):not(:disabled){color:#626971}:global(.bpk-no-touch-support) .bpk-thumb-button--color-primary:hover:not(:active):not(:disabled){color:#626971}.bpk-thumb-button--color-primary.bpk-thumb-button--selected{color:#0062e3}.bpk-no-touch-support .bpk-thumb-button--color-primary.bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-thumb-button--color-primary.bpk-thumb-button--selected:hover:not(:active):not(:disabled){color:#0062e3}.bpk-thumb-button--small{width:auto;height:auto;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-thumb-button--small::before{content:none}

package/package.json

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