Add scrollable carousel for product cards and story this is for a full carousel. There will be a future PR for carousels with 2 cards + stories

Author: oliverabrahams

dotcom-rendering/src/components/ScrollableProduct.importable.tsx

@@ -0,0 +1,39 @@
+import type { ArticleFormat } from '../lib/articleFormat';
+import type { ProductBlockElement } from '../types/content';
+import { ProductCarouselCard } from './ProductCarouselCard';
+import type { FixedSlideWidth } from './ScrollableCarousel';
+import { CarouselKind, ScrollableCarousel } from './ScrollableCarousel';
+
+export const ScrollableProduct = ({
+	products,
+	format,
+}: {
+	products: ProductBlockElement[];
+	format: ArticleFormat;
+}) => {
+	const fixedCardWidth: FixedSlideWidth = {
+		defaultWidth: 240,
+		widthFromBreakpoints: [
+			{ breakpoint: 'mobileMedium', width: 280 },
+			{ breakpoint: 'tablet', width: 220 },
+		],
+	};
+	return (
+		<ScrollableCarousel
+			isArticle={true}
+			kind={CarouselKind.FixedWidthSlides}
+			carouselLength={products.length}
+			fixedSlideWidth={fixedCardWidth}
+			gapSizes={{ row: 'none', column: 'large' }}
+		>
+			{products.map((product: ProductBlockElement) => (
+				<ScrollableCarousel.SubgridItem
+					key={product.productCtas[0]?.url ?? product.elementId}
+					subgridRows={4}
+				>
+					<ProductCarouselCard product={product} format={format} />
+				</ScrollableCarousel.SubgridItem>
+			))}
+		</ScrollableCarousel>
+	);
+};

dotcom-rendering/src/components/ScrollableProducts.stories.tsx

@@ -0,0 +1,80 @@
+import { breakpoints } from '@guardian/source/foundations';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
+import { exampleProduct } from '../../fixtures/manual/productBlockElement';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import { ScrollableProduct } from './ScrollableProduct.importable';
+
+const meta = {
+	title: 'Article Carousel/Scrollable Products',
+	component: ScrollableProduct,
+	parameters: {
+		chromatic: {
+			viewports: [
+				breakpoints.mobile,
+				breakpoints.tablet,
+				breakpoints.wide,
+			],
+		},
+	},
+	args: {
+		products: [
+			{ ...exampleProduct, h2Id: 'product' },
+			{
+				...exampleProduct,
+				h2Id: 'product-1',
+				productName: 'Lorem ipsum dolor sit amet',
+			},
+			{ ...exampleProduct, h2Id: 'product-2' },
+			{ ...exampleProduct, h2Id: 'product-3' },
+			{ ...exampleProduct, h2Id: 'product-4' },
+		],
+		format: {
+			design: ArticleDesign.Review,
+			display: ArticleDisplay.Standard,
+			theme: Pillar.Lifestyle,
+		},
+	},
+	decorators: [centreColumnDecorator],
+	render: (args) => (
+		<>
+			<ScrollableProduct {...args} />
+			<h1 style={{ fontSize: '50px' }} id={'product'}>
+				Product 0
+			</h1>
+			<div style={{ fontSize: '20px' }}>
+				The standard Lorem Ipsum passage, used since the 1500s
+			</div>
+			<h1 style={{ fontSize: '50px' }} id={'product-1'}>
+				Product 1
+			</h1>
+			<div style={{ fontSize: '20px' }}>
+				The standard Lorem Ipsum passage, used since the 1500s
+			</div>
+			<h1 style={{ fontSize: '50px' }} id={'product-2'}>
+				Product 2
+			</h1>
+			<div style={{ fontSize: '20px' }}>
+				The standard Lorem Ipsum passage, used since the 1500s
+			</div>
+			<h1 style={{ fontSize: '50px' }} id={'product-3'}>
+				Product 3
+			</h1>
+			<div style={{ fontSize: '20px' }}>
+				The standard Lorem Ipsum passage, used since the 1500s
+			</div>
+			<h1 style={{ fontSize: '50px' }} id={'product-4'}>
+				Product 4
+			</h1>
+			<div style={{ fontSize: '20px', height: '100vh' }}>
+				The standard Lorem Ipsum passage, used since the 1500s
+			</div>
+		</>
+	),
+} satisfies Meta<typeof ScrollableProduct>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const With5Cards = {} satisfies Story;