Merge remote-tracking branch 'origin/main' into jlk/update-commercial

Jakeii · Jakeii · commit 83900ac0288f · 2026-04-01T14:55:14.000+01:00
diff --git a/ab-testing/cdk/package.json b/ab-testing/cdk/package.json
@@ -26,9 +26,9 @@
 		"@guardian/eslint-config": "12.0.1",
 		"@guardian/tsconfig": "1.0.1",
 		"@types/node": "22.17.0",
-		"aws-cdk": "2.1110.0",
-		"aws-cdk-lib": "2.241.0",
-		"constructs": "10.5.1",
+		"aws-cdk": "2.1115.1",
+		"aws-cdk-lib": "2.246.0",
+		"constructs": "10.6.0",
 		"eslint": "9.39.1",
 		"prettier": "3.0.3",
 		"source-map-support": "0.5.21",
diff --git a/ab-testing/config/abTests.ts b/ab-testing/config/abTests.ts
@@ -58,16 +58,16 @@ const ABTests: ABTest[] = [
 		shouldForceMetricsCollection: false,
 	},
 	{
-		name: "thefilter-at-a-glance-redesign",
+		name: "thefilter-at-a-glance-redesign-v2",
 		description:
 			"Testing redesigned at a glance component on The Filter articles",
 		owners: ["thefilter.dev@guardian.co.uk"],
-		expirationDate: "2026-04-06",
+		expirationDate: "2026-05-06",
 		type: "server",
 		status: "ON",
 		audienceSize: 0 / 100,
 		audienceSpace: "C",
-		groups: ["control", "stacked", "carousel"],
+		groups: ["control", "carousel", "stacked-default", "stacked-expanded"],
 		shouldForceMetricsCollection: false,
 	},
 	{
diff --git a/ab-testing/config/package.json b/ab-testing/config/package.json
@@ -34,9 +34,9 @@
 		"@guardian/eslint-config": "12.0.1",
 		"@guardian/tsconfig": "1.0.1",
 		"@types/node": "22.17.0",
-		"aws-cdk": "2.1110.0",
-		"aws-cdk-lib": "2.241.0",
-		"constructs": "10.5.1",
+		"aws-cdk": "2.1115.1",
+		"aws-cdk-lib": "2.246.0",
+		"constructs": "10.6.0",
 		"eslint": "9.39.1",
 		"prettier": "3.0.3",
 		"source-map-support": "0.5.21",
diff --git a/ab-testing/deploy-lambda/package.json b/ab-testing/deploy-lambda/package.json
@@ -26,9 +26,9 @@
 		"@rollup/plugin-node-resolve": "16.0.3",
 		"@types/aws-lambda": "8.10.158",
 		"@types/node": "22.17.0",
-		"aws-cdk": "2.1110.0",
-		"aws-cdk-lib": "2.241.0",
-		"constructs": "10.5.1",
+		"aws-cdk": "2.1115.1",
+		"aws-cdk-lib": "2.246.0",
+		"constructs": "10.6.0",
 		"esbuild": "0.27.0",
 		"eslint": "9.39.1",
 		"prettier": "3.0.3",
diff --git a/dotcom-rendering/package.json b/dotcom-rendering/package.json
@@ -37,7 +37,7 @@
 		"@guardian/eslint-config-typescript": "12.0.0",
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
-		"@guardian/libs": "30.1.1",
+		"@guardian/libs": "31.0.0",
 		"@guardian/ophan-tracker-js": "2.8.0",
 		"@guardian/react-crossword": "11.1.0",
 		"@guardian/shimport": "1.0.2",
@@ -90,15 +90,15 @@
 		"@types/youtube": "0.0.50",
 		"ajv": "8.18.0",
 		"ajv-formats": "2.1.1",
-		"aws-cdk": "2.1110.0",
-		"aws-cdk-lib": "2.241.0",
+		"aws-cdk": "2.1115.1",
+		"aws-cdk-lib": "2.246.0",
 		"body-parser": "1.20.4",
 		"browserslist": "4.24.4",
 		"buffer": "6.0.3",
 		"clean-css": "5.3.3",
 		"compare-versions": "6.1.0",
 		"compression": "1.7.4",
-		"constructs": "10.5.1",
+		"constructs": "10.6.0",
 		"cpy": "11.0.0",
 		"css-loader": "7.1.2",
 		"dompurify": "3.2.4",
diff --git a/dotcom-rendering/src/components/ProductSummary.island.tsx b/dotcom-rendering/src/components/ProductSummary.island.tsx
@@ -22,12 +22,26 @@ export const ProductSummary = ({
 		);
 	}
 
+	if (variant === 'stacked-default') {
+		return (
+			<Island priority="feature" defer={{ until: 'idle' }}>
+				<StackedProducts
+					products={products}
+					heading={'At a glance'}
+					format={format}
+					showAllProducts={false}
+				/>
+			</Island>
+		);
+	}
+
 	return (
 		<Island priority="feature" defer={{ until: 'idle' }}>
 			<StackedProducts
 				products={products}
 				heading={'At a glance'}
 				format={format}
+				showAllProducts={true}
 			/>
 		</Island>
 	);
diff --git a/dotcom-rendering/src/components/StackedProducts.island.tsx b/dotcom-rendering/src/components/StackedProducts.island.tsx
@@ -33,10 +33,12 @@ export const StackedProducts = ({
 	products,
 	heading,
 	format,
+	showAllProducts,
 }: {
 	products: ProductBlockElement[];
 	heading: string;
 	format: ArticleFormat;
+	showAllProducts: boolean;
 }) => {
 	const [isExpanded, setIsExpanded] = useState(false);
 	return (
@@ -54,7 +56,7 @@ export const StackedProducts = ({
 				<Subheading format={format} topPadding={false}>
 					{heading}
 				</Subheading>
-				{products.length > cardsShownByDefault && (
+				{products.length > cardsShownByDefault && !showAllProducts && (
 					<p css={cardCounterStyles}>
 						{isExpanded
 							? products.length
@@ -79,10 +81,14 @@ export const StackedProducts = ({
 				{products.map((product: ProductBlockElement, index) => (
 					<div
 						key={index}
-						data-component={`at-a-glance-stacked-card-${index + 1}`}
+						data-component={`at-a-glance-stacked-card-${
+							showAllProducts ? 'expanded' : 'default'
+						}-${index + 1}`}
 						style={{
 							display:
-								!isExpanded && index >= cardsShownByDefault
+								!isExpanded &&
+								index >= cardsShownByDefault &&
+								!showAllProducts
 									? 'none'
 									: 'block',
 						}}
@@ -95,7 +101,7 @@ export const StackedProducts = ({
 				))}
 			</div>
 
-			{products.length > cardsShownByDefault && (
+			{products.length > cardsShownByDefault && !showAllProducts && (
 				<LinkButton
 					onClick={() => setIsExpanded(!isExpanded)}
 					cssOverrides={showAllButtonStyles}
diff --git a/dotcom-rendering/src/components/StackedProducts.stories.tsx b/dotcom-rendering/src/components/StackedProducts.stories.tsx
@@ -15,6 +15,7 @@ const meta = preview.meta({
 			display: ArticleDisplay.Standard,
 			theme: Pillar.Lifestyle,
 		},
+		showAllProducts: false,
 	},
 	decorators: [centreColumnDecorator],
 });
@@ -24,11 +25,12 @@ export const Default = meta.story();
 export const FourProducts = meta.story({
 	args: {
 		products: exampleAtAGlanceProductArray.slice(0, 4),
-		heading: 'At a glance',
-		format: {
-			design: ArticleDesign.Review,
-			display: ArticleDisplay.Standard,
-			theme: Pillar.Lifestyle,
-		},
+	},
+});
+
+export const AllCardsExpanded = meta.story({
+	args: {
+		products: exampleAtAGlanceProductArray.slice(0, 7),
+		showAllProducts: true,
 	},
 });
diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -4774,7 +4774,8 @@
                 "variant": {
                     "enum": [
                         "carousel",
-                        "stacked"
+                        "stacked-default",
+                        "stacked-expanded"
                     ],
                     "type": "string"
                 }
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
@@ -4256,7 +4256,8 @@
                 "variant": {
                     "enum": [
                         "carousel",
-                        "stacked"
+                        "stacked-default",
+                        "stacked-expanded"
                     ],
                     "type": "string"
                 }
diff --git a/dotcom-rendering/src/model/enhance-product-summary.test-helpers.ts b/dotcom-rendering/src/model/enhance-product-summary.test-helpers.ts
@@ -48,12 +48,22 @@ export const findCarousel = (
 			el.variant === 'carousel',
 	);
 
-export const findStacked = (
+export const findStackedDefault = (
 	elements: FEElement[],
 ): ProductSummaryElement | undefined =>
 	elements.find(
 		(el): el is ProductSummaryElement =>
 			el._type ===
 				'model.dotcomrendering.pageElements.ProductSummaryElement' &&
-			el.variant === 'stacked',
+			el.variant === 'stacked-default',
+	);
+
+export const findStackedExpanded = (
+	elements: FEElement[],
+): ProductSummaryElement | undefined =>
+	elements.find(
+		(el): el is ProductSummaryElement =>
+			el._type ===
+				'model.dotcomrendering.pageElements.ProductSummaryElement' &&
+			el.variant === 'stacked-expanded',
 	);
diff --git a/dotcom-rendering/src/model/enhance-product-summary.test.ts b/dotcom-rendering/src/model/enhance-product-summary.test.ts
@@ -3,7 +3,8 @@ import {
 	atAGlanceHeading,
 	dividerElement,
 	findCarousel,
-	findStacked,
+	findStackedDefault,
+	findStackedExpanded,
 	linkElement,
 	productElement,
 	textElement,
@@ -222,7 +223,9 @@ describe('enhanceProductSummary', () => {
 
 		const output = enhanceProductSummary({
 			pageId: allowedPageId,
-			serverSideABTests: { 'thefilter-at-a-glance-redesign': 'carousel' },
+			serverSideABTests: {
+				'thefilter-at-a-glance-redesign-v2': 'carousel',
+			},
 			renderingTarget: 'Web',
 			filterAtAGlanceEnabled: true,
 		})(input);
@@ -232,7 +235,7 @@ describe('enhanceProductSummary', () => {
 		expect(carousel).toBeDefined();
 	});
 
-	it('enhances elements with a stacked product for allowlisted pages', () => {
+	it('enhances elements with a default stacked product component for allowlisted pages', () => {
 		const allowedPageId =
 			'thefilter/test-article-example-for-product-summary';
 
@@ -264,14 +267,60 @@ describe('enhanceProductSummary', () => {
 
 		const output = enhanceProductSummary({
 			pageId: allowedPageId,
-			serverSideABTests: { 'thefilter-at-a-glance-redesign': 'stacked' },
+			serverSideABTests: {
+				'thefilter-at-a-glance-redesign-v2': 'stacked-default',
+			},
 			renderingTarget: 'Web',
 			filterAtAGlanceEnabled: true,
 		})(input);
 
-		const stacked = findStacked(output);
+		const stackedDefault = findStackedDefault(output);
 
-		expect(stacked).toBeDefined();
+		expect(stackedDefault).toBeDefined();
+	});
+
+	it('enhances elements with an expanded stacked product component for allowlisted pages', () => {
+		const allowedPageId =
+			'thefilter/test-article-example-for-product-summary';
+
+		const input = [
+			atAGlanceHeading(),
+			linkElement(
+				'https://www.homebase.co.uk/en-uk/tower-airx-t17166-5l-grey-single-basket-air-fryer-digital-air-fryer/p/0757395',
+				'Buy now',
+			),
+			linkElement(
+				'https://www.lakeland.co.uk/27537/lakeland-slimline-air-fryer-black-8l',
+				'Buy now',
+			),
+			linkElement(
+				'https://ninjakitchen.co.uk/product/ninja-double-stack-xl-9-5l-air-fryer-sl400uk-zidSL400UK',
+				'Buy now',
+			),
+			dividerElement(),
+			productElement([
+				'https://www.homebase.co.uk/en-uk/tower-airx-t17166-5l-grey-single-basket-air-fryer-digital-air-fryer/p/0757395',
+			]),
+			productElement([
+				'https://www.lakeland.co.uk/27537/lakeland-slimline-air-fryer-black-8l',
+			]),
+			productElement([
+				'https://ninjakitchen.co.uk/product/ninja-double-stack-xl-9-5l-air-fryer-sl400uk-zidSL400UK',
+			]),
+		];
+
+		const output = enhanceProductSummary({
+			pageId: allowedPageId,
+			serverSideABTests: {
+				'thefilter-at-a-glance-redesign-v2': 'stacked-expanded',
+			},
+			renderingTarget: 'Web',
+			filterAtAGlanceEnabled: true,
+		})(input);
+
+		const stackedExpanded = findStackedExpanded(output);
+
+		expect(stackedExpanded).toBeDefined();
 	});
 
 	it('does not return stacked cards when the rendering target is apps', () => {
@@ -306,14 +355,16 @@ describe('enhanceProductSummary', () => {
 
 		const output = enhanceProductSummary({
 			pageId: allowedPageId,
-			serverSideABTests: { 'thefilter-at-a-glance-redesign': 'stacked' },
+			serverSideABTests: {
+				'thefilter-at-a-glance-redesign-v2': 'stacked-default',
+			},
 			renderingTarget: 'Apps',
 			filterAtAGlanceEnabled: true,
 		})(input);
 
-		const stacked = findStacked(output);
+		const stackedDefault = findStackedDefault(output);
 
-		expect(stacked).toBeUndefined();
+		expect(stackedDefault).toBeUndefined();
 	});
 
 	it('does not return stacked cards when the filterAtAGlance switch is OFF', () => {
@@ -348,13 +399,15 @@ describe('enhanceProductSummary', () => {
 
 		const output = enhanceProductSummary({
 			pageId: allowedPageId,
-			serverSideABTests: { 'thefilter-at-a-glance-redesign': 'stacked' },
+			serverSideABTests: {
+				'thefilter-at-a-glance-redesign-v2': 'stacked-default',
+			},
 			renderingTarget: 'Web',
 			filterAtAGlanceEnabled: false,
 		})(input);
 
-		const stacked = findStacked(output);
+		const stackedDefault = findStackedDefault(output);
 
-		expect(stacked).toBeUndefined();
+		expect(stackedDefault).toBeUndefined();
 	});
 });
diff --git a/dotcom-rendering/src/model/enhance-product-summary.ts b/dotcom-rendering/src/model/enhance-product-summary.ts
@@ -9,7 +9,7 @@ import { generateId } from './enhance-H2s';
  * further up the rendering pipeline.
  */
 
-export type ABTestVariant = 'carousel' | 'stacked';
+export type ABTestVariant = 'carousel' | 'stacked-default' | 'stacked-expanded';
 
 /**
  * List of page IDs eligible for product carousel enhancement.
@@ -60,7 +60,11 @@ const isEligibleForSummary = (pageId: string) => {
 };
 
 const isCarouselOrStacked = (string: string) => {
-	return string === 'carousel' || string === 'stacked';
+	return (
+		string === 'carousel' ||
+		string === 'stacked-default' ||
+		string === 'stacked-expanded'
+	);
 };
 
 // Extract URLs from 'At a glance' section elements
@@ -202,7 +206,7 @@ export const enhanceProductSummary =
 	}) =>
 	(elements: FEElement[]): FEElement[] => {
 		const abTestVariant =
-			serverSideABTests?.['thefilter-at-a-glance-redesign'];
+			serverSideABTests?.['thefilter-at-a-glance-redesign-v2'];
 
 		// do nothing if article is not on allow list / not in the test / variant is 'control' / renderingTarget is Apps / filterAtAGlance switch is OFF
 		if (
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
