Slimify all sections and reduce font size in AB test

Author: domlander

ab-testing/config/abTests.ts

@@ -109,14 +109,14 @@ const ABTests: ABTest[] = [
 	{
 		name: "fronts-and-curation-slim-homepage",
 		description:
-			"Test placing the Most Viewed and Deeply Read components in the right-hand column on the homepage.",
+			"Test slimming content and placing Most Popular components on the right-hand side on the UK front.",
 		owners: ["fronts.and.curation@guardian.co.uk"],
 		status: "ON",
-		expirationDate: `2026-04-28`,
+		expirationDate: "2026-04-28",
 		type: "server",
 		audienceSize: 0 / 100,
 		audienceSpace: "A",
-		groups: ["control", "variant"],
+		groups: ["control", "variant-one", "variant-two"],
 		shouldForceMetricsCollection: false,
 	},
 	{

dotcom-rendering/src/components/CardHeadline.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import {
 	between,
+	from,
 	headlineMedium14,
 	headlineMedium15,
 	headlineMedium17,
@@ -142,6 +143,7 @@ export enum FontFamily {
 export type HeadlineSize = keyof typeof fontFamilies.headlineMedium;
 
 export type ResponsiveFontSize = {
+	wide?: HeadlineSize;
 	desktop: HeadlineSize;
 	tablet?: HeadlineSize;
 	mobile?: HeadlineSize;
@@ -151,7 +153,7 @@ export type ResponsiveFontSize = {
 const getFontSize = (sizes: ResponsiveFontSize, family: FontFamily) => {
 	const font = fontFamilies[family];
 
-	const { desktop, tablet, mobileMedium, mobile } = sizes;
+	const { wide, desktop, tablet, mobileMedium, mobile } = sizes;
 
 	return css`
 		${font[desktop]};
@@ -176,6 +178,13 @@ const getFontSize = (sizes: ResponsiveFontSize, family: FontFamily) => {
 				${font[mobileMedium]};
 			}
 		`}
+
+		${wide &&
+		css`
+			${from.wide} {
+				${font[wide]};
+			}
+		`}
 	`;
 };
 
@@ -204,15 +213,23 @@ export const WithLink = ({
 	return <>{children}</>;
 };
 
+/**
+ * headline medium 20 on desktop and headline medium 17 on tablet and mobile
+ */
+export const defaultFontSizes: ResponsiveFontSize = {
+	desktop: 'xsmall',
+	tablet: 'xxsmall',
+	mobile: 'xxsmall',
+};
+
 export const CardHeadline = ({
 	headlineText,
 	format,
 	showQuotes,
 	kickerText,
 	showPulsingDot,
 	hasInlineKicker,
-	/** headline medium 20 on desktop and headline medium 17 on tablet and mobile */
-	fontSizes = { desktop: 'xsmall', tablet: 'xxsmall', mobile: 'xxsmall' },
+	fontSizes = defaultFontSizes,
 	byline,
 	showByline,
 	linkTo,

dotcom-rendering/src/components/DecideContainer.tsx

@@ -47,6 +47,7 @@ type Props = {
 	frontId?: string;
 	collectionId: number;
 	containerLevel?: DCRContainerLevel;
+	isInSlimHomepageAbTestVariant?: boolean;
 };
 
 export const DecideContainer = ({
@@ -62,6 +63,7 @@ export const DecideContainer = ({
 	frontId,
 	collectionId,
 	containerLevel,
+	isInSlimHomepageAbTestVariant = false,
 }: Props) => {
 	switch (containerType) {
 		case 'dynamic/fast':
@@ -244,6 +246,9 @@ export const DecideContainer = ({
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
 					collectionId={collectionId}
+					isInSlimHomepageAbTestVariant={
+						isInSlimHomepageAbTestVariant
+					}
 				/>
 			);
 		case 'flexible/general':
@@ -257,6 +262,9 @@ export const DecideContainer = ({
 					aspectRatio={aspectRatio}
 					containerLevel={containerLevel}
 					collectionId={collectionId}
+					isInSlimHomepageAbTestVariant={
+						isInSlimHomepageAbTestVariant
+					}
 				/>
 			);
 		case 'scrollable/small':
@@ -284,6 +292,9 @@ export const DecideContainer = ({
 						serverTime={serverTime}
 						aspectRatio={aspectRatio}
 						sectionId={sectionId}
+						isInSlimHomepageAbTestVariant={
+							isInSlimHomepageAbTestVariant
+						}
 					/>
 				</Island>
 			);
@@ -296,6 +307,9 @@ export const DecideContainer = ({
 					serverTime={serverTime}
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
+					isInSlimHomepageAbTestVariant={
+						isInSlimHomepageAbTestVariant
+					}
 				/>
 			);
 		case 'scrollable/feature':
@@ -308,6 +322,9 @@ export const DecideContainer = ({
 						serverTime={serverTime}
 						aspectRatio={aspectRatio}
 						collectionId={collectionId}
+						isInSlimHomepageAbTestVariant={
+							isInSlimHomepageAbTestVariant
+						}
 					/>
 				</Island>
 			);

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

@@ -160,13 +160,17 @@ const meta = {
 		imageLoading: 'eager',
 		aspectRatio: '5:4',
 		collectionId: 1,
+		isInSlimHomepageAbTestVariant: false,
 	},
 	render: ({ frontSectionTitle, ...args }) => (
 		<FrontSection
 			title={frontSectionTitle}
 			discussionApiUrl={discussionApiUrl}
 			editionId="UK"
 			showTopBorder={true}
+			slimifySectionForSlimHomepageAbTest={
+				args.isInSlimHomepageAbTestVariant
+			}
 		>
 			<FlexibleGeneral {...args} />
 		</FrontSection>
@@ -193,6 +197,14 @@ export const SplashWithStandards: Story = {
 	},
 };
 
+export const SplashWithStandardsInSlimHomepageAbTest: Story = {
+	name: 'Splash with big and standard cards in the Slim Homepage AB Test',
+	args: {
+		...SplashWithStandards.args,
+		isInSlimHomepageAbTestVariant: true,
+	},
+};
+
 export const SplashWithSublinks: Story = {
 	name: 'Standard splash with sublinks',
 	args: {