(null);
+
+ const stickyChipContainerClassnames = getClassName(
+ 'bpk-sticky-chip-container',
+ `bpk-sticky-chip-container--${chipStyle}`,
+ );
+ const chipGroupClassNames = getClassName(
+ 'bpk-chip-group',
+ 'bpk-chip-group--rail',
+ );
+
+ return (
+ <>
+
+
+
+ {stickyChip &&
+
+
+ {(isDesktop) =>
+ ,
+ ...stickyChip,
+ })} chipStyle={chipStyle} ariaMultiselectable={ariaMultiselectable} chipIndex={-1} />
+ }
+
+
+ }
+ { scrollContainerRef.current = el }}
+ >
+
+
+
+
+
+
+ );
+};
+
+const WrapChipGroup = ({
+ ariaLabel,
+ ariaMultiselectable = true,
+ chipStyle = CHIP_TYPES.default,
+ chips,
+ label,
+}: WrapChipGroupProps) =>
+ ;
+
+const BpkMultiSelectChipGroup = (props: MultiSelectProps) => (
+
+ {props.type === CHIP_GROUP_TYPES.rail ? : }
+
+);
+
+export default BpkMultiSelectChipGroup;
diff --git a/packages/bpk-component-chip-group/src/BpkSingleSelectChipGroup-test.tsx b/packages/bpk-component-chip-group/src/BpkSingleSelectChipGroup-test.tsx
new file mode 100644
index 0000000000..c276dd56ec
--- /dev/null
+++ b/packages/bpk-component-chip-group/src/BpkSingleSelectChipGroup-test.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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 { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { CHIP_GROUP_TYPES } from './BpkMultiSelectChipGroup';
+import BpkSingleSelectChipGroup from './BpkSingleSelectChipGroup';
+
+const defaultProps = {
+ type: CHIP_GROUP_TYPES.wrap,
+ ariaLabel: 'a11y label',
+}
+
+describe('BpkSingleSelectChipGroup', () => {
+ beforeEach(() => {
+ window.matchMedia = jest.fn().mockImplementation(() => ({
+ matches: true,
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ }));
+ });
+
+ const chips = [
+ {
+ text: 'London',
+ },
+ {
+ text: 'Berlin',
+ },
+ {
+ text: 'Florence',
+ },
+ {
+ text: 'Stockholm',
+ }
+ ];
+
+ it('should call onItemClick when a chip is clicked', async () => {
+ const user = userEvent.setup();
+
+ const onItemClick = jest.fn();
+
+ render(
+ ,
+ );
+
+ await user.click(screen.getByText('Berlin'));
+
+ expect(onItemClick).toHaveBeenCalledTimes(1);
+ expect(onItemClick).toHaveBeenCalledWith({ text: 'Berlin' }, true, 1);
+ });
+
+ it('Should use selectedIndex prop to determine selected chip', async () => {
+ const chipsWithSelected = [
+ {
+ text: 'London',
+ selected: true,
+ },
+ {
+ text: 'Berlin',
+ selected: false,
+ },
+ {
+ text: 'Florence',
+ selected: true,
+ },
+ ];
+
+ render(
+ ,
+ );
+
+ expect(screen.getByRole('radio', { name: 'Berlin' })).toHaveClass('bpk-chip--default-selected')
+ expect(screen.getByRole('radio', { name: 'London' })).not.toHaveClass('bpk-chip--default-selected')
+ expect(screen.getByRole('radio', { name: 'Florence' })).not.toHaveClass('bpk-chip--default-selected')
+ });
+});
diff --git a/packages/bpk-component-chip-group/src/BpkSingleSelectChipGroup.tsx b/packages/bpk-component-chip-group/src/BpkSingleSelectChipGroup.tsx
new file mode 100644
index 0000000000..8a10b91d12
--- /dev/null
+++ b/packages/bpk-component-chip-group/src/BpkSingleSelectChipGroup.tsx
@@ -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 BpkMultiSelectChipGroup, { type SingleSelectChipItem, type MultiSelectProps } from './BpkMultiSelectChipGroup';
+
+export type SingleSelectProps = {
+ chips: SingleSelectChipItem[];
+ onItemClick?: (item: SingleSelectChipItem, selected: boolean, index: number) => void,
+ selectedIndex?: number;
+} & MultiSelectProps;
+
+const BpkSingleSelectChipGroup = ({ chips, onItemClick, selectedIndex, ...rest }: SingleSelectProps) => {
+ const chipsWithSelection = chips.map((chip, index) => chip && ({
+ ...chip,
+ selected: index === selectedIndex,
+ onClick: (selected: boolean, clickedIndex: number) => {
+ if (onItemClick) {
+ onItemClick(chip, selected, clickedIndex);
+ }
+ },
+ }));
+
+ return ;
+};
+
+export default BpkSingleSelectChipGroup;
diff --git a/packages/bpk-component-chip-group/src/Nudger-test.tsx b/packages/bpk-component-chip-group/src/Nudger-test.tsx
new file mode 100644
index 0000000000..157f61d0fd
--- /dev/null
+++ b/packages/bpk-component-chip-group/src/Nudger-test.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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 type { MutableRefObject } from 'react';
+
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { CHIP_TYPES } from '../../bpk-component-chip';
+
+import Nudger, { POSITION } from './Nudger';
+
+
+const mockIsRtl = jest.fn(() => false);
+
+jest.mock('../../bpk-react-utils/index', () => ({
+ ...jest.requireActual('../../bpk-react-utils/index'),
+ isRTL: () => mockIsRtl(),
+}));
+
+const createMockScrollContainerRef = (isRtl: boolean): MutableRefObject => ({
+ current: {
+ scrollBy: jest.fn() as (options?: any) => void,
+ offsetWidth: 100,
+ scrollLeft: isRtl ? -150 : 150,
+ scrollWidth: 500,
+ },
+} as MutableRefObject);
+
+describe('Nudger', () => {
+ beforeEach(() => {
+ jest.resetAllMocks();
+ jest.useFakeTimers();
+ });
+
+ it.each([
+ [POSITION.trailing, false],
+ [POSITION.leading, false],
+ [POSITION.trailing, true],
+ [POSITION.leading, true],
+ ])('should call scrollBy when leading=%s and isRtl=%s', async (position, isRtl) => {
+ const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
+ const mockScrollContainerRef = createMockScrollContainerRef(isRtl);
+ mockIsRtl.mockReturnValue(isRtl);
+ render();
+ await waitFor(() => {
+ expect(screen.queryByRole('button')).not.toHaveAttribute('disabled');
+ });
+
+ await user.click(screen.getByRole('button'));
+
+ const leading = position === POSITION.leading;
+ const isLeft = (leading && !isRtl) || (!leading && isRtl);
+ expect(mockScrollContainerRef.current.scrollBy).toHaveBeenCalledTimes(1);
+ expect(mockScrollContainerRef.current.scrollBy).toHaveBeenCalledWith({
+ left: isLeft ? -150 : 150,
+ behavior: 'smooth',
+ });
+ });
+
+ it('should render button style matching chips', async () => {
+ render();
+ await waitFor(() => {
+ expect(screen.queryByRole('button')).toBeVisible();
+ });
+
+ expect(screen.getByRole('button')).toHaveClass('bpk-button--secondary-on-dark');
+ });
+});
diff --git a/packages/bpk-component-chip-group/src/Nudger.module.scss b/packages/bpk-component-chip-group/src/Nudger.module.scss
new file mode 100644
index 0000000000..8c6058191e
--- /dev/null
+++ b/packages/bpk-component-chip-group/src/Nudger.module.scss
@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+@use '../../unstable__bpk-mixins/tokens';
+
+.bpk-chip-group-nudger {
+ &--leading {
+ margin-inline-end: tokens.bpk-spacing-md();
+ margin-inline-start: tokens.bpk-spacing-sm();
+ }
+
+ &--trailing {
+ margin-inline-end: tokens.bpk-spacing-sm();
+ margin-inline-start: tokens.bpk-spacing-md();
+ }
+}
diff --git a/packages/bpk-component-chip-group/src/Nudger.tsx b/packages/bpk-component-chip-group/src/Nudger.tsx
new file mode 100644
index 0000000000..969768e31f
--- /dev/null
+++ b/packages/bpk-component-chip-group/src/Nudger.tsx
@@ -0,0 +1,116 @@
+/*
+ * 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 { type MutableRefObject, 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 type { ChipStyleType } from './BpkMultiSelectChipGroup';
+
+import STYLES from './Nudger.module.scss';
+
+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',
+} as const;
+
+type Props = {
+ ariaLabel: string;
+ chipStyle?: ChipStyleType;
+ scrollContainerRef: MutableRefObject;
+ position: (typeof POSITION)[keyof typeof POSITION];
+}
+
+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
+}: Props) => {
+ 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 ? (
+
+
{
+ if (scrollContainerRef.current) {
+ scrollContainerRef.current.scrollBy({
+ left: isLeft ? -SCROLL_DISTANCE : SCROLL_DISTANCE,
+ behavior: 'smooth',
+ });
+ }
+ }}
+ >
+ {isLeft ? : }
+
+