Merge pull request #13857 from guardian/doml/opinion-headline-size

Don't bump Opinion cards headline size when no image

Author: domlander

dotcom-rendering/fixtures/manual/trails.ts

@@ -683,6 +683,49 @@ export const audioTrails: [DCRFrontCard, DCRFrontCard] = [
 	},
 ];
 
+export const opinionTrails: [DCRFrontCard, DCRFrontCard] = [
+	{
+		format: { design: 8, display: 0, theme: 1 },
+		dataLinkName: 'comment | group-0 | card-@6',
+		url: '/commentisfree/2025/apr/28/populists-nigel-farage-reform-chaos-brexit',
+		headline:
+			'Populists like Farage promise voters a simpler life. In fact, they produce ever more hassle and chaos',
+		trailText:
+			'Centrists won’t beat Reform UK by echoing its messages. They should emphasise the true unworkability of policies like Brexit, says Guardian columnist Andy Beckett',
+		webPublicationDate: '2025-04-28T05:00:53.000Z',
+		discussionApiUrl:
+			'https://discussion.code.dev-theguardian.com/discussion-api',
+		discussionId: '/p/x253na',
+		isImmersive: false,
+		showQuotedHeadline: true,
+		isExternalLink: false,
+		showLivePlayable: false,
+		avatarUrl: 'https://uploads.guim.co.uk/2022/09/20/Andy_Beckett_v2.png',
+		image: {
+			src: 'https://media.guim.co.uk/f55906c2b9116946c778cd1fca808a6dae764d01/0_0_9528_5715/master/9528.jpg',
+			altText:
+				'Nigel Farage on the campaign trail in Ramsgate, Kent, on 24 April.',
+		},
+	},
+	{
+		format: { design: 8, display: 0, theme: 1 },
+		dataLinkName: 'comment | group-0 | card-@5',
+		url: '/commentisfree/2025/apr/28/duttons-comments-show-we-are-back-to-punching-down-on-indigenous-australians-for-attention-and-votes',
+		headline:
+			'Dutton’s comments show we are back to punching down on Indigenous Australians for attention – and votes',
+		trailText:
+			'It is disingenuous for politicians to be shocked when people decide to turn words into action, even in the predawn hush of Anzac Day',
+		webPublicationDate: '2025-04-28T05:19:42.000Z',
+		discussionApiUrl:
+			'https://discussion.code.dev-theguardian.com/discussion-api',
+		byline: 'Lorena Allam',
+		isImmersive: false,
+		showQuotedHeadline: true,
+		showLivePlayable: false,
+		isExternalLink: false,
+	},
+];
+
 export const galleryTrails: [DCRFrontCard, DCRFrontCard] = [
 	{
 		format: { design: 2, display: 1, theme: 4 },

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

@@ -1,7 +1,11 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { getSublinks, trails } from '../../fixtures/manual/trails';
+import {
+	getSublinks,
+	opinionTrails,
+	trails,
+} from '../../fixtures/manual/trails';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { customMockFetch } from '../lib/mockRESTCalls';
 import type {
@@ -493,6 +497,17 @@ export const GigaBoostedSplashWithLiveUpdates: Story = {
 	},
 };
 
+export const OpinionStandardCardsWithImageSuppression: Story = {
+	name: 'Opinion standard cards with image supression',
+	args: {
+		frontSectionTitle: 'Opinion standard cards',
+		groupedTrails: {
+			...defaultGroupedTrails,
+			standard: opinionTrails.slice(0, 2),
+		},
+	},
+};
+
 const containerPalettes = [
 	'InvestigationPalette',
 	'LongRunningPalette',

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -156,18 +156,15 @@ const decideSplashCardProperties = (
 	boostLevel: BoostLevel,
 	supportingContentLength: number,
 	mediaCard: boolean,
-	hasLivePlayable: boolean,
-	imageSuppressed: boolean,
+	useLargerHeadlineSizeDesktop: boolean,
 	avatarUrl: boolean,
 ): BoostedSplashProperties => {
 	switch (boostLevel) {
-		// boostedfont sizing
 		// The default boost level is equal to no boost. It is the same as the default card layout.
 		case 'default':
 			return {
 				headlineSizes: {
-					desktop:
-						imageSuppressed || hasLivePlayable ? 'large' : 'medium',
+					desktop: useLargerHeadlineSizeDesktop ? 'large' : 'medium',
 					tablet: 'medium',
 					mobile: 'medium',
 				},
@@ -182,8 +179,7 @@ const decideSplashCardProperties = (
 		case 'boost':
 			return {
 				headlineSizes: {
-					desktop:
-						imageSuppressed || hasLivePlayable ? 'xlarge' : 'large',
+					desktop: useLargerHeadlineSizeDesktop ? 'xlarge' : 'large',
 					tablet: 'large',
 					mobile: 'large',
 				},
@@ -198,10 +194,9 @@ const decideSplashCardProperties = (
 		case 'megaboost':
 			return {
 				headlineSizes: {
-					desktop:
-						imageSuppressed || hasLivePlayable
-							? 'xxlarge'
-							: 'xlarge',
+					desktop: useLargerHeadlineSizeDesktop
+						? 'xxlarge'
+						: 'xlarge',
 					tablet: 'xlarge',
 					mobile: 'xlarge',
 				},
@@ -215,10 +210,9 @@ const decideSplashCardProperties = (
 		case 'gigaboost':
 			return {
 				headlineSizes: {
-					desktop:
-						imageSuppressed || hasLivePlayable
-							? 'xxxlarge'
-							: 'xxlarge',
+					desktop: useLargerHeadlineSizeDesktop
+						? 'xxxlarge'
+						: 'xxlarge',
 					tablet: 'xlarge',
 					mobile: 'xxlarge',
 				},
@@ -269,6 +263,12 @@ export const SplashCardLayout = ({
 		);
 	}
 
+	const useLargerHeadlineSizeDesktop =
+		// When there's no image, we want the text to take up more space. The exception is Opinion
+		// cards, as avatars are more common and command less visual weight than a standard image.
+		(!card.image && card.format.design !== ArticleDesign.Comment) ||
+		card.showLivePlayable;
+
 	const {
 		headlineSizes,
 		imagePositionOnDesktop,
@@ -281,8 +281,7 @@ export const SplashCardLayout = ({
 		card.boostLevel ?? 'default',
 		card.supportingContent?.length ?? 0,
 		isMediaCard(card.format),
-		card.showLivePlayable,
-		!card.image,
+		useLargerHeadlineSizeDesktop,
 		!!card.avatarUrl,
 	);
 
@@ -555,9 +554,9 @@ const HalfWidthCardLayout = ({
 								(containerLevel !== 'Primary' && cardIndex > 0)
 							}
 							trailText={undefined}
-							// On standard cards, we increase the headline size if the trail image has been hidden
 							headlineSizes={
-								!card.image
+								!card.image &&
+								card.format.design !== ArticleDesign.Comment
 									? {
 											desktop: 'small',
 											tablet: 'xsmall',