WIP

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -167,6 +167,7 @@ export type Props = {
 	headlinePosition?: 'inner' | 'outer';
 	isStorylines?: boolean;
 	starRatingSize?: RatingSizeType;
+	isInSlimHomepageAbTestVariant?: boolean;
 };
 
 const waveformWrapper = (
@@ -406,6 +407,7 @@ export const Card = ({
 	isStorylines = false,
 	starRatingSize = 'small',
 	articleMedia,
+	isInSlimHomepageAbTestVariant = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -821,6 +823,17 @@ export const Card = ({
 		);
 	};
 
+	if (
+		headlineText ===
+		'Airstrikes hit Iran-Iraq border as US and Israeli plan to mobilise Kurds gathers pace'
+	) {
+		console.log(
+			'Airstrikes sublinksPosition',
+			sublinkPosition,
+			isInSlimHomepageAbTestVariant,
+		);
+	}
+
 	return (
 		<CardWrapper
 			format={format}

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,15 @@ const meta = {
 		imageLoading: 'eager',
 		aspectRatio: '5:4',
 		collectionId: 1,
+		isInSlimHomepageAbTestVariant: false,
 	},
 	render: ({ frontSectionTitle, ...args }) => (
 		<FrontSection
 			title={frontSectionTitle}
 			discussionApiUrl={discussionApiUrl}
 			editionId="UK"
 			showTopBorder={true}
+			slimifySectionForAbTest={args.isInSlimHomepageAbTestVariant}
 		>
 			<FlexibleGeneral {...args} />
 		</FrontSection>
@@ -193,6 +195,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: {