@skyscanner/backpack-web 34.7.1 → 34.8.0

package/bpk-component-card-button/src/BpkSaveButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border:0;border-radius:50%;background-color:rgba(0,0,0,0)}.bpk-save-button__icon{position:absolute;top:50%;left:50%;display:flex;transform:translate(-50%, -50%)}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1;composes:bpk-save-button__icon}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon[data-show=false]{opacity:0}.bpk-save-button__heartIcon{z-index:2;opacity:0;composes:bpk-save-button__icon}.bpk-save-button__heartIcon[data-show=true]{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}.bpk-save-button__heartIcon--clicked{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--onDark{fill:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}.bpk-save-button__heartIcon--default,.bpk-save-button__heartIcon--contained{fill:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}
+@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border:0;border-radius:50%;background-color:rgba(0,0,0,0);cursor:pointer}.bpk-save-button__icon{position:absolute;top:50%;left:50%;display:flex;transform:translate(-50%, -50%)}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1;composes:bpk-save-button__icon}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon[data-show=false]{opacity:0}.bpk-save-button__heartIcon{z-index:2;opacity:0;composes:bpk-save-button__icon}.bpk-save-button__heartIcon[data-show=true]{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}.bpk-save-button__heartIcon--clicked{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--onDark{fill:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}.bpk-save-button__heartIcon--default,.bpk-save-button__heartIcon--contained{fill:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}

package/bpk-component-chip-group/index.d.ts

@@ -0,0 +1,5 @@
+import BpkMultiSelectChipGroup, { type MultiSelectProps, type ChipItem, type SingleSelectChipItem, CHIP_COMPONENT, CHIP_GROUP_TYPES } from './src/BpkMultiSelectChipGroup';
+import BpkSingleSelectChipGroup, { type SingleSelectProps } from './src/BpkSingleSelectChipGroup';
+export type { ChipItem, MultiSelectProps, SingleSelectProps, SingleSelectChipItem, };
+export { BpkSingleSelectChipGroup, CHIP_GROUP_TYPES, CHIP_COMPONENT, };
+export default BpkMultiSelectChipGroup;

package/bpk-component-chip-group/index.js

@@ -0,0 +1,22 @@
+/*
+ * 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 BpkMultiSelectChipGroup, { CHIP_COMPONENT, CHIP_GROUP_TYPES } from "./src/BpkMultiSelectChipGroup";
+import BpkSingleSelectChipGroup from "./src/BpkSingleSelectChipGroup";
+export { BpkSingleSelectChipGroup, CHIP_GROUP_TYPES, CHIP_COMPONENT };
+export default BpkMultiSelectChipGroup;

package/bpk-component-chip-group/src/BpkChipGroup.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-chip-group-container{display:flex;margin:0 -0.25rem;align-items:center;white-space:nowrap}.bpk-chip-group{display:flex;margin:0;padding:.25rem;align-items:baseline;border:none;gap:.5rem}.bpk-chip-group--wrap{padding-top:0;padding-bottom:0;flex-wrap:wrap}.bpk-sticky-chip-container:first-child{margin-inline-start:.25rem}.bpk-sticky-chip-container{margin-inline-end:.25rem;padding-inline-end:.5rem;box-shadow:-1px 0 0 0 #c1c7cf inset}html[dir=rtl] .bpk-sticky-chip-container{box-shadow:1px 0 0 0 #c1c7cf inset}.bpk-sticky-chip-container--on-dark{box-shadow:-1px 0 0 0 rgba(255,255,255,.5) inset}html[dir=rtl] .bpk-sticky-chip-container--on-dark{box-shadow:1px 0 0 0 rgba(255,255,255,.5) inset}

package/bpk-component-chip-group/src/BpkMultiSelectChipGroup.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import { CHIP_TYPES } from '../../bpk-component-chip';
+export declare const CHIP_GROUP_TYPES: {
+    readonly rail: "rail";
+    readonly wrap: "wrap";
+};
+export declare const CHIP_COMPONENT: {
+    readonly selectable: "selectable";
+    readonly dismissible: "dismissible";
+    readonly dropdown: "dropdown";
+    readonly icon: "icon";
+};
+export type ChipGroupType = (typeof CHIP_GROUP_TYPES)[keyof typeof CHIP_GROUP_TYPES];
+export type ChipStyleType = (typeof CHIP_TYPES)[keyof typeof CHIP_TYPES];
+export type ChipComponentType = (typeof CHIP_COMPONENT)[keyof typeof CHIP_COMPONENT];
+export type SingleSelectChipItem = {
+    text: string;
+    accessibilityLabel?: string;
+    leadingAccessoryView?: ReactNode;
+    [rest: string]: any;
+};
+export type ChipItem = {
+    component?: ChipComponentType;
+    onClick?: (selected: boolean, index: number) => void;
+    selected?: boolean;
+    hidden?: boolean;
+} & SingleSelectChipItem;
+type CommonProps = {
+    label?: string;
+    ariaLabel?: string;
+    chipStyle?: ChipStyleType;
+    chips: ChipItem[];
+    ariaMultiselectable?: boolean;
+};
+type RailChipGroupProps = {
+    stickyChip?: ChipItem;
+    leadingNudgerLabel: string;
+    trailingNudgerLabel: string;
+} & CommonProps;
+type WrapChipGroupProps = {} & CommonProps;
+export type MultiSelectProps = (RailChipGroupProps & {
+    type: typeof CHIP_GROUP_TYPES.rail;
+} | WrapChipGroupProps & {
+    type: typeof CHIP_GROUP_TYPES.wrap;
+});
+declare const BpkMultiSelectChipGroup: (props: MultiSelectProps) => JSX.Element;
+export default BpkMultiSelectChipGroup;

package/bpk-component-chip-group/src/BpkMultiSelectChipGroup.js

@@ -0,0 +1,186 @@
+/*
+ * 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 } from 'react';
+import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
+import BpkSelectableChip, { BpkDismissibleChip, BpkIconChip, BpkDropdownChip, CHIP_TYPES } from "../../bpk-component-chip";
+import FilterIconSm from "../../bpk-component-icon/sm/filter";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import { cssModules } from "../../bpk-react-utils";
+import Nudger, { POSITION } from "./Nudger";
+import STYLES from "./BpkChipGroup.module.css";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const CHIP_GROUP_TYPES = {
+  rail: 'rail',
+  wrap: 'wrap'
+};
+export const CHIP_COMPONENT = {
+  selectable: 'selectable',
+  dismissible: 'dismissible',
+  dropdown: 'dropdown',
+  icon: 'icon'
+};
+const CHIP_COMPONENT_MAP = {
+  [CHIP_COMPONENT.selectable]: BpkSelectableChip,
+  [CHIP_COMPONENT.dismissible]: BpkDismissibleChip,
+  [CHIP_COMPONENT.dropdown]: BpkDropdownChip,
+  [CHIP_COMPONENT.icon]: BpkIconChip
+};
+const Chip = ({
+  ariaMultiselectable,
+  chipIndex,
+  chipItem,
+  chipStyle
+}) => {
+  const {
+    accessibilityLabel,
+    component = CHIP_COMPONENT.selectable,
+    hidden = false,
+    leadingAccessoryView = null,
+    onClick,
+    selected,
+    text,
+    ...rest
+  } = chipItem;
+  const Component = CHIP_COMPONENT_MAP[component];
+  return hidden ? null : /*#__PURE__*/_jsx(Component, {
+    selected: selected ?? false,
+    type: chipStyle,
+    accessibilityLabel: accessibilityLabel || text,
+    onClick: () => {
+      if (onClick) {
+        onClick(!selected, chipIndex);
+      }
+    },
+    role: ariaMultiselectable ? 'checkbox' : 'radio',
+    leadingAccessoryView: leadingAccessoryView,
+    ...rest,
+    children: text
+  });
+};
+const ChipGroupContent = ({
+  ariaLabel,
+  ariaMultiselectable,
+  chipGroupClassNames,
+  chipStyle,
+  chips,
+  label
+}) => /*#__PURE__*/_jsxs("fieldset", {
+  className: chipGroupClassNames,
+  role: ariaMultiselectable ? 'group' : 'radiogroup',
+  children: [ariaLabel && /*#__PURE__*/_jsx("legend", {
+    className: "visually-hidden",
+    children: ariaLabel
+  }), label && /*#__PURE__*/_jsx(BpkText, {
+    textStyle: TEXT_STYLES.footnote,
+    "aria-hidden": true,
+    children: label
+  }), chips.map((chip, index) => /*#__PURE__*/_jsx(Chip, {
+    chipItem: chip,
+    chipStyle: chipStyle,
+    ariaMultiselectable: ariaMultiselectable,
+    chipIndex: index
+  }, chip.text))]
+});
+const RailChipGroup = ({
+  ariaLabel,
+  ariaMultiselectable = true,
+  chipStyle = CHIP_TYPES.default,
+  chips,
+  label,
+  leadingNudgerLabel,
+  stickyChip,
+  trailingNudgerLabel
+}) => {
+  const scrollContainerRef = useRef(null);
+  const stickyChipContainerClassnames = getClassName('bpk-sticky-chip-container', `bpk-sticky-chip-container--${chipStyle}`);
+  const chipGroupClassNames = getClassName('bpk-chip-group', 'bpk-chip-group--rail');
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(BpkBreakpoint, {
+      query: BREAKPOINTS.ABOVE_TABLET,
+      children: /*#__PURE__*/_jsx(Nudger, {
+        position: POSITION.leading,
+        ariaLabel: leadingNudgerLabel,
+        chipStyle: chipStyle,
+        scrollContainerRef: scrollContainerRef
+      })
+    }), stickyChip && /*#__PURE__*/_jsx("div", {
+      className: stickyChipContainerClassnames,
+      children: /*#__PURE__*/_jsx(BpkBreakpoint, {
+        query: BREAKPOINTS.ABOVE_TABLET,
+        children: isDesktop => /*#__PURE__*/_jsx(Chip, {
+          chipItem: {
+            role: 'button',
+            component: isDesktop ? CHIP_COMPONENT.selectable : CHIP_COMPONENT.icon,
+            leadingAccessoryView: /*#__PURE__*/_jsx(FilterIconSm, {}),
+            ...stickyChip
+          },
+          chipStyle: chipStyle,
+          ariaMultiselectable: ariaMultiselectable,
+          chipIndex: -1
+        })
+      })
+    }), /*#__PURE__*/_jsx(BpkMobileScrollContainer, {
+      scrollerRef: el => {
+        scrollContainerRef.current = el;
+      },
+      children: /*#__PURE__*/_jsx(ChipGroupContent, {
+        ariaLabel: ariaLabel,
+        ariaMultiselectable: ariaMultiselectable,
+        chipGroupClassNames: chipGroupClassNames,
+        chipStyle: chipStyle,
+        chips: chips,
+        label: label
+      })
+    }), /*#__PURE__*/_jsx(BpkBreakpoint, {
+      query: BREAKPOINTS.ABOVE_TABLET,
+      children: /*#__PURE__*/_jsx(Nudger, {
+        position: POSITION.trailing,
+        ariaLabel: trailingNudgerLabel,
+        chipStyle: chipStyle,
+        scrollContainerRef: scrollContainerRef
+      })
+    })]
+  });
+};
+const WrapChipGroup = ({
+  ariaLabel,
+  ariaMultiselectable = true,
+  chipStyle = CHIP_TYPES.default,
+  chips,
+  label
+}) => /*#__PURE__*/_jsx(ChipGroupContent, {
+  ariaLabel: ariaLabel,
+  ariaMultiselectable: ariaMultiselectable,
+  chipGroupClassNames: getClassName('bpk-chip-group', 'bpk-chip-group--wrap'),
+  chipStyle: chipStyle,
+  chips: chips,
+  label: label
+});
+const BpkMultiSelectChipGroup = props => /*#__PURE__*/_jsx("div", {
+  className: getClassName('bpk-chip-group-container'),
+  children: props.type === CHIP_GROUP_TYPES.rail ? /*#__PURE__*/_jsx(RailChipGroup, {
+    ...props
+  }) : /*#__PURE__*/_jsx(WrapChipGroup, {
+    ...props
+  })
+});
+export default BpkMultiSelectChipGroup;

package/bpk-component-chip-group/src/BpkSingleSelectChipGroup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type SingleSelectChipItem, type MultiSelectProps } from './BpkMultiSelectChipGroup';
+export type SingleSelectProps = {
+    chips: SingleSelectChipItem[];
+    onItemClick?: (item: SingleSelectChipItem, selected: boolean, index: number) => void;
+    selectedIndex?: number;
+} & MultiSelectProps;
+declare const BpkSingleSelectChipGroup: ({ chips, onItemClick, selectedIndex, ...rest }: SingleSelectProps) => JSX.Element;
+export default BpkSingleSelectChipGroup;

package/bpk-component-chip-group/src/BpkSingleSelectChipGroup.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 BpkMultiSelectChipGroup from "./BpkMultiSelectChipGroup";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkSingleSelectChipGroup = ({
+  chips,
+  onItemClick,
+  selectedIndex,
+  ...rest
+}) => {
+  const chipsWithSelection = chips.map((chip, index) => chip && {
+    ...chip,
+    selected: index === selectedIndex,
+    onClick: (selected, clickedIndex) => {
+      if (onItemClick) {
+        onItemClick(chip, selected, clickedIndex);
+      }
+    }
+  });
+  return /*#__PURE__*/_jsx(BpkMultiSelectChipGroup, {
+    chips: chipsWithSelection,
+    ariaMultiselectable: false,
+    ...rest
+  });
+};
+export default BpkSingleSelectChipGroup;

package/bpk-component-chip-group/src/Nudger.d.ts

@@ -0,0 +1,14 @@
+import { type MutableRefObject } from 'react';
+import type { ChipStyleType } from './BpkMultiSelectChipGroup';
+export declare const POSITION: {
+    readonly leading: "leading";
+    readonly trailing: "trailing";
+};
+type Props = {
+    ariaLabel: string;
+    chipStyle?: ChipStyleType;
+    scrollContainerRef: MutableRefObject<HTMLElement | null>;
+    position: (typeof POSITION)[keyof typeof POSITION];
+};
+declare const Nudger: ({ ariaLabel, chipStyle, position, scrollContainerRef }: Props) => JSX.Element | null;
+export default Nudger;

package/bpk-component-chip-group/src/Nudger.js

@@ -0,0 +1,92 @@
+/*
+ * 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, useState } from 'react';
+import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import { CHIP_TYPES } from "../../bpk-component-chip";
+import { withButtonAlignment } from "../../bpk-component-icon/index";
+import ArrowLeft from "../../bpk-component-icon/sm/long-arrow-left";
+import ArrowRight from "../../bpk-component-icon/sm/long-arrow-right";
+import { cssModules, isRTL } from "../../bpk-react-utils/index";
+import STYLES from "./Nudger.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const CHIP_STYLE_TO_BUTTON_STYLE = {
+  [CHIP_TYPES.default]: BUTTON_TYPES.secondary,
+  [CHIP_TYPES.onDark]: BUTTON_TYPES.secondaryOnDark,
+  [CHIP_TYPES.onImage]: BUTTON_TYPES.primaryOnDark
+};
+export const POSITION = {
+  leading: 'leading',
+  trailing: 'trailing'
+};
+const AlignedLeftArrowIcon = withButtonAlignment(ArrowLeft);
+const AlignedRightArrowIcon = withButtonAlignment(ArrowRight);
+
+// Chosen based on feeling good with the example stories
+const SCROLL_DISTANCE = 150;
+const Nudger = ({
+  ariaLabel,
+  chipStyle = CHIP_TYPES.default,
+  position,
+  scrollContainerRef
+}) => {
+  const [show, setShow] = useState(false);
+  const [enabled, setEnabled] = useState(false);
+  const leading = position === POSITION.leading;
+  const rtl = isRTL();
+  const isLeft = leading && !rtl || !leading && rtl;
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!scrollContainerRef.current) {
+        return;
+      }
+      const {
+        offsetWidth,
+        scrollLeft,
+        scrollWidth
+      } = scrollContainerRef.current;
+      const scrollValue = rtl ? -Math.floor(scrollLeft) : Math.ceil(scrollLeft);
+      const showLeading = scrollValue > 0;
+      const showTrailing = scrollValue < scrollWidth - offsetWidth;
+      setShow(showLeading || showTrailing);
+      setEnabled(leading && showLeading || !leading && showTrailing);
+    }, 100);
+    return () => clearInterval(interval);
+  }, [leading, rtl, scrollContainerRef]);
+  const classNames = getClassName('bpk-chip-group-nudger', `bpk-chip-group-nudger--${leading ? "leading" : "trailing"}`);
+  return show ? /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    children: /*#__PURE__*/_jsx(BpkButtonV2, {
+      title: ariaLabel,
+      type: CHIP_STYLE_TO_BUTTON_STYLE[chipStyle],
+      iconOnly: true,
+      disabled: !enabled,
+      onClick: () => {
+        if (scrollContainerRef.current) {
+          scrollContainerRef.current.scrollBy({
+            left: isLeft ? -SCROLL_DISTANCE : SCROLL_DISTANCE,
+            behavior: 'smooth'
+          });
+        }
+      },
+      children: isLeft ? /*#__PURE__*/_jsx(AlignedLeftArrowIcon, {}) : /*#__PURE__*/_jsx(AlignedRightArrowIcon, {})
+    })
+  }) : null;
+};
+export default Nudger;

package/bpk-component-chip-group/src/Nudger.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-chip-group-nudger--leading{margin-inline-end:.5rem;margin-inline-start:.25rem}.bpk-chip-group-nudger--trailing{margin-inline-end:.25rem;margin-inline-start:.5rem}

package/bpk-component-price/src/BpkPrice.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-price{display:flex;flex-direction:column;color:#626971}.bpk-price--right{text-align:right}html[dir=rtl] .bpk-price--right{text-align:left}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{display:flex;flex-direction:row-reverse}.bpk-price__previous-price{display:flex;text-decoration-line:line-through}.bpk-price__separator{display:flex;margin:0 .25rem}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__price{display:contents;color:#161616;word-break:break-all}.bpk-price__spacing::after{content:"";margin-right:.25rem}html[dir=rtl] .bpk-price__spacing::after{margin-right:unset;margin-left:.25rem}.bpk-price__trailing{display:contents;white-space:nowrap}
+.bpk-price{display:flex;flex-direction:column;color:#626971}.bpk-price--right{text-align:right}html[dir=rtl] .bpk-price--right{text-align:left}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{display:flex;flex-direction:row-reverse}.bpk-price__previous-price{display:flex;color:#e70866;text-decoration-line:line-through}.bpk-price__separator{display:flex;margin:0 .25rem}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__price{display:contents;color:#161616;word-break:break-all}.bpk-price__spacing::after{content:"";margin-right:.25rem}html[dir=rtl] .bpk-price__spacing::after{margin-right:unset;margin-left:.25rem}.bpk-price__trailing{display:contents;white-space:nowrap}

package/bpk-component-segmented-control/index.d.ts

@@ -0,0 +1,3 @@
+import BpkSegmentedControl, { type Props as BpkSegmentControlProps } from './src/BpkSegmentedControl';
+export type { BpkSegmentControlProps };
+export default BpkSegmentedControl;

package/bpk-component-segmented-control/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 BpkSegmentedControl from "./src/BpkSegmentedControl";
+export default BpkSegmentedControl;

package/bpk-component-segmented-control/src/BpkSegmentedControl.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export declare const SEGMENT_TYPES: {
+    CanvasDefault: string;
+    CanvasContrast: string;
+    SurfaceDefault: string;
+    SurfaceContrast: string;
+};
+export type SegmentTypes = (typeof SEGMENT_TYPES)[keyof typeof SEGMENT_TYPES];
+export type Props = {
+    buttonContents: string[] | ReactNode[];
+    type?: SegmentTypes;
+    onItemClick: (id: number) => void;
+    selectedIndex: number;
+    shadow?: boolean;
+};
+declare const BpkSegmentedControl: ({ buttonContents, onItemClick, selectedIndex, shadow, type, }: Props) => JSX.Element;
+export default BpkSegmentedControl;

package/bpk-component-segmented-control/src/BpkSegmentedControl.js

@@ -0,0 +1,63 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState } from 'react';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkSegmentedControl.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const SEGMENT_TYPES = {
+  CanvasDefault: 'canvas-default',
+  CanvasContrast: 'canvas-contrast',
+  SurfaceDefault: 'surface-default',
+  SurfaceContrast: 'surface-contrast'
+};
+const BpkSegmentedControl = ({
+  buttonContents,
+  onItemClick,
+  selectedIndex,
+  shadow = false,
+  type = SEGMENT_TYPES.CanvasDefault
+}) => {
+  const [selectedButton, setSelectedButton] = useState(selectedIndex);
+  const handleButtonClick = id => {
+    if (id !== selectedButton) {
+      setSelectedButton(id);
+      onItemClick(id);
+    }
+  };
+  const containerStyling = getClassName('bpk-segmented-control-group', shadow && 'bpk-segmented-control-group-shadow');
+  return /*#__PURE__*/_jsx("div", {
+    role: "radiogroup",
+    className: containerStyling,
+    children: buttonContents.map((content, index) => {
+      const isSelected = index === selectedButton;
+      const rightOfOption = index === selectedButton + 1;
+      const buttonStyling = getClassName('bpk-segmented-control', `bpk-segmented-control--${type}`, isSelected && `bpk-segmented-control--${type}-selected`, rightOfOption && `bpk-segmented-control--${type}-rightOfOption`, shadow && isSelected && `bpk-segmented-control--${type}-selected-shadow`);
+      return /*#__PURE__*/_jsx("button", {
+        id: index.toString(),
+        type: "button",
+        onClick: () => handleButtonClick(index),
+        className: buttonStyling,
+        "aria-pressed": !!isSelected,
+        children: content
+      }, `index-${index.toString()}`);
+    })
+  });
+};
+export default BpkSegmentedControl;

package/bpk-component-segmented-control/src/BpkSegmentedControl.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-segmented-control-group{display:flex;flex-wrap:nowrap;overflow:hidden;border-radius:.5rem}.bpk-segmented-control-group-shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control{min-height:2rem;padding:.5rem 1rem;flex:1;border:none;text-overflow:ellipsis;cursor:pointer;overflow:hidden;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control--canvas-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--canvas-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--canvas-contrast{background-color:#fff;color:#161616}.bpk-segmented-control--canvas-contrast-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--surface-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-contrast{background-color:rgba(255,255,255,.1);color:#fff}.bpk-segmented-control--surface-contrast-selected{background-color:#024daf;color:#fff}.bpk-segmented-control:not(:first-of-type,[class*=selected]){border-left:.0625rem solid #c1c7cf}.bpk-segmented-control--surface-contrast:not(:first-of-type,[class*=selected]){border-left:.0625rem solid rgba(255,255,255,.5)}.bpk-segmented-control[class*=rightOfOption]{border-left:none}

package/package.json

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