Only show first three products by default and add option to show all

Author: emma-imber

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

@@ -23,3 +23,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default = {} satisfies Story;
+
+export const OnlyThreeProducts = {
+	args: {
+		products: exampleAtAGlanceProductArray.slice(0, 3),
+		format: {
+			design: ArticleDesign.Standard,
+			display: ArticleDisplay.Standard,
+			theme: Pillar.Lifestyle,
+		},
+	},
+} satisfies Story;

dotcom-rendering/src/components/StackedProducts.tsx

@@ -1,32 +1,59 @@
 import { css } from '@emotion/react';
 import { space } from '@guardian/source/foundations';
+import { palette, textSans15 } from '@guardian/source/foundations';
+import { useState } from 'react';
 import type { ArticleFormat } from '../lib/articleFormat';
 import type { ProductBlockElement } from '../types/content';
 import { HorizontalSummaryProductCard } from './HorizontalSummaryProductCard';
 
+const buttonStyles = css`
+	${textSans15};
+	color: ${palette.lifestyle[400]};
+	font-weight: 700;
+	background-color: transparent;
+	padding: ${space[4]}px 0px 0px 0px;
+	border: none;
+	border-bottom: 1px solid ${palette.neutral[86]};
+`;
+
 export const StackedProducts = ({
 	products,
 	format,
 }: {
 	products: ProductBlockElement[];
 	format: ArticleFormat;
 }) => {
+	const [isExpanded, setIsExpanded] = useState(false);
 	return (
-		<div
-			css={[
-				css`
-					display: grid;
-					gap: ${space[4]}px;
-				`,
-			]}
-		>
-			{products.map((product: ProductBlockElement, index) => (
-				<HorizontalSummaryProductCard
-					key={index}
-					product={product}
-					format={format}
-				/>
-			))}
+		<div>
+			<div
+				css={[
+					css`
+						display: grid;
+						gap: ${space[4]}px;
+					`,
+				]}
+			>
+				{products.map(
+					(product: ProductBlockElement, index) =>
+						(index < 3 || isExpanded) && (
+							<HorizontalSummaryProductCard
+								key={index}
+								product={product}
+								format={format}
+							/>
+						),
+				)}
+			</div>
+
+			{products.length > 3 && !isExpanded && (
+				<button
+					onClick={() => setIsExpanded(!isExpanded)}
+					css={buttonStyles}
+				>
+					Show all
+				</button>
+			)}
 		</div>
 	);
 };