Merge pull request #13685 from guardian/doml/media-sublinks

Give sublinks grey background on media cards

Author: domlander

dotcom-rendering/fixtures/manual/trails.ts

@@ -439,29 +439,71 @@ export const trails: [
 		isImmersive: false,
 	},
 	{
-		url: 'https://www.theguardian.com/uk-news/2021/feb/16/qcovid-how-improved-algorithm-can-identify-more-higher-risk-adults',
+		url: 'https://www.theguardian.com/world/video/2025/mar/06/how-nanoplastics-are-invading-our-bodies-video-report',
 		showByline: false,
-		byline: 'Sarah Boseley Health editor',
+		byline: ' Neelam Tailor, Alex Healey, Ali Assaf, Steve Glew, Ryan Baxter',
 		image: {
-			src: 'https://media.guim.co.uk/6d152e60fdb37dbbc063a68e2cffccf97cdab183/0_40_5458_3275/master/5458.jpg',
-			altText: 'A covid vaccine',
+			src: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/91_0_1800_1080/master/1800.jpg',
+			altText:
+				'Plastics are everywhere, but their smallest fragments – nanoplastics – are making their way into the deepest parts of our bodies, including our brains and breast milk',
 		},
 		format: {
 			display: ArticleDisplay.Standard,
 			theme: Pillar.News,
-			design: ArticleDesign.Analysis,
+			design: ArticleDesign.Video,
 		},
-		webPublicationDate: '2021-02-16T18:42:44.000Z',
-		headline:
-			'QCovid: how improved algorithm can identify more higher-risk adults',
-		dataLinkName: 'news | group-0 | card-@1',
+		webPublicationDate: '2025-03-06T10:14:00.000Z',
+		headline: 'How plastics are invading our brain cells – video',
+		dataLinkName: 'media | group-0 | card-@11',
 		showQuotedHeadline: false,
-		mainMedia: undefined,
+		mainMedia: {
+			type: 'Video',
+			id: '966acc06-a238-4d5f-b477-816eec0476f3',
+			videoId: '4JUvvbpx2So',
+			duration: 322,
+			title: 'How plastics are invading our brain cells – video',
+			width: 500,
+			height: 300,
+			origin: 'The Guardian',
+			images: [
+				{
+					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/1000.jpg',
+					width: 1000,
+				},
+				{
+					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/500.jpg',
+					width: 500,
+				},
+				{
+					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/140.jpg',
+					width: 140,
+				},
+				{
+					url: 'https://media.guim.co.uk/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/0_0_1920_1080/1920.jpg',
+					width: 1920,
+				},
+			],
+			expired: false,
+		},
 		isExternalLink: false,
 		showLivePlayable: false,
 		discussionApiUrl,
 		showMainVideo: true,
 		isImmersive: false,
+		trailText:
+			'Plastics are everywhere, but their smallest fragments – nanoplastics – are making their way into the deepest parts of our bodies, including our brains and breast milk',
+		supportingContent: [
+			{
+				format: {
+					display: ArticleDisplay.Standard,
+					theme: Pillar.News,
+					design: ArticleDesign.Standard,
+				},
+				headline:
+					'Edwyn Collins: ‘Could an Orange Juice reunion ever be on the cards? No!’',
+				url: '/culture/2025/mar/06/edwyn-collins-could-an-orange-juice-reunion-ever-be-on-the-cards-no',
+			},
+		],
 	},
 	{
 		url: 'https://www.theguardian.com/world/2019/nov/28/eu-parliament-declares-climate-emergency',

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

@@ -337,6 +337,40 @@ export const WithMediaType = () => {
 	);
 };
 
+export const WithMediaTypeAndSublinks = () => {
+	return (
+		<CardGroup>
+			<CardWrapper>
+				<Card
+					{...basicCardProps}
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Video,
+						theme: Pillar.Sport,
+					}}
+					containerType="flexible/general"
+					mainMedia={{ ...mainVideo, duration: 30 }}
+					headlineText="Video"
+					imagePositionOnDesktop="top"
+					imagePositionOnMobile="left"
+					supportingContent={[
+						{
+							...aBasicLink,
+							headline: 'Headline 1',
+							kickerText: 'Kicker',
+						},
+						{
+							...aBasicLink,
+							headline: 'Headline 2',
+							kickerText: 'Kicker',
+						},
+					]}
+				/>
+			</CardWrapper>
+		</CardGroup>
+	);
+};
+
 export const WithMediaTypeSpecialReportAlt = () => {
 	return (
 		<CardGroup>
@@ -1728,11 +1762,9 @@ export const WithAVerticalGapWhenScrollableSmallContainer = () => {
 export const WithBetaContainerAndSublinks = () => {
 	return (
 		<CardGroup>
-			{/* With an image */}
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					image={undefined}
 					containerType="flexible/general"
 					imagePositionOnMobile="bottom"
 					supportingContent={[
@@ -1749,10 +1781,17 @@ export const WithBetaContainerAndSublinks = () => {
 					]}
 				/>
 			</CardWrapper>
-			{/* Without an image */}
+		</CardGroup>
+	);
+};
+
+export const WithBetaContainerAndSublinksNoImage = () => {
+	return (
+		<CardGroup>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
+					image={undefined}
 					containerType="flexible/general"
 					imagePositionOnMobile="bottom"
 					supportingContent={[

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

@@ -688,41 +688,44 @@ export const Card = ({
 	 * - Returns `null` if `supportingContent` is unavailable or `sublinkPosition` is `none`.
 	 * - Renders `SupportingContent` for all breakpoints if `sublinkPosition` is `outer`.
 	 * - If `sublinkPosition` is `inner`, hides `SupportingContent` from tablet but displays it on smaller breakpoints.
-	 *
 	 */
 	const decideOuterSublinks = () => {
 		if (!hasSublinks) return null;
 		if (sublinkPosition === 'none') return null;
 
-		const OuterSublinks = () => (
+		const Sublinks = () => (
 			<SupportingContent
 				supportingContent={supportingContent}
 				containerPalette={containerPalette}
 				alignment={supportingContentAlignment}
 				isDynamo={isDynamo}
+				isMedia={isMediaCard(format)}
 				fillBackgroundOnMobile={
 					!!isFlexSplash ||
 					(isBetaContainer &&
 						!!image &&
-						imagePositionOnMobile === 'bottom')
+						(imagePositionOnMobile === 'bottom' ||
+							isMediaCard(format)))
 				}
+				fillBackgroundOnDesktop={isBetaContainer && isMediaCard(format)}
 			/>
 		);
 
 		if (sublinkPosition === 'outer') {
-			return <OuterSublinks />;
+			return <Sublinks />;
 		}
 
 		return (
 			<Hide from={isFlexSplash ? 'desktop' : 'tablet'}>
-				<OuterSublinks />
+				<Sublinks />
 			</Hide>
 		);
 	};
 
 	const decideInnerSublinks = () => {
 		if (!hasSublinks) return null;
 		if (sublinkPosition !== 'inner') return null;
+
 		return (
 			<Hide until={isFlexSplash ? 'desktop' : 'tablet'}>
 				<SupportingContent
@@ -1241,7 +1244,8 @@ export const Card = ({
 
 			<div
 				css={
-					/** We allow this area to take up more space so that cards without sublinks next to cards with sublinks have the same meta alignment */
+					/** We allow this area to take up more space so that cards without
+					 * sublinks next to cards with sublinks have the same meta alignment */
 					isBetaContainer &&
 					(imagePositionOnDesktop === 'left' ||
 						imagePositionOnDesktop === 'right') &&
@@ -1253,10 +1257,7 @@ export const Card = ({
 					`
 				}
 				style={{
-					padding:
-						isMediaCardOrNewsletter || isOnwardContent
-							? `0 ${space[2]}px`
-							: 0,
+					padding: isOnwardContent ? `0 ${space[2]}px` : 0,
 				}}
 			>
 				{showLivePlayable && liveUpdatesPosition === 'outer' && (
@@ -1276,6 +1277,7 @@ export const Card = ({
 						></LatestLinks>
 					</Island>
 				)}
+
 				{decideOuterSublinks()}
 
 				{isOpinionCardWithAvatar && (

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

@@ -46,22 +46,18 @@ const standardCards = standards.map((card, index) => {
 		}) satisfies DCRFrontCard;
 
 	switch (index + 1) {
-		// The second card has two sublinks
 		case 2:
 			return enhanceCardFields({ supportingContent: getSublinks(2) });
-		// The third card is boosted and has one sublink
 		case 3:
 			return enhanceCardFields({
 				boostLevel: 'boost',
 				supportingContent: getSublinks(1),
 			});
-		// The fifth card is megaboosted and has two sublinks
 		case 5:
 			return enhanceCardFields({
 				boostLevel: 'megaboost',
 				supportingContent: getSublinks(2),
 			});
-
 		default:
 			return enhanceCardFields({});
 	}

dotcom-rendering/src/components/SupportingContent.tsx

@@ -16,6 +16,7 @@ type Props = {
 	alignment: Alignment;
 	containerPalette?: DCRContainerPalette;
 	isDynamo?: boolean;
+	isMedia?: boolean;
 	/** Allows sublinks container to have a background colour on mobile screen sizes */
 	fillBackgroundOnMobile?: boolean;
 	/** Allows sublinks container to have a background colour on desktop screen sizes */
@@ -120,19 +121,23 @@ const wrapperStyles = css`
 	}
 `;
 
-const backgroundFillMobile = css`
+const backgroundFillMobile = (isMedia: boolean) => css`
 	${until.tablet} {
 		padding: ${space[2]}px;
 		padding-bottom: ${space[3]}px;
-		background-color: ${palette('--card-sublinks-background')};
+		background-color: ${isMedia
+			? palette('--card-media-sublinks-background')
+			: palette('--card-sublinks-background')};
 	}
 `;
 
-const backgroundFillDesktop = css`
+const backgroundFillDesktop = (isMedia: boolean) => css`
 	${from.tablet} {
 		padding: ${space[2]}px;
 		padding-bottom: ${space[3]}px;
-		background-color: ${palette('--card-sublinks-background')};
+		background-color: ${isMedia
+			? palette('--card-media-sublinks-background')
+			: palette('--card-sublinks-background')};
 	}
 `;
 
@@ -141,6 +146,7 @@ export const SupportingContent = ({
 	alignment,
 	containerPalette,
 	isDynamo,
+	isMedia = false,
 	fillBackgroundOnMobile = false,
 	fillBackgroundOnDesktop = false,
 }: Props) => {
@@ -153,8 +159,8 @@ export const SupportingContent = ({
 				wrapperStyles,
 				baseGrid,
 				(isDynamo ?? alignment === 'horizontal') && horizontalGrid,
-				fillBackgroundOnMobile && backgroundFillMobile,
-				fillBackgroundOnDesktop && backgroundFillDesktop,
+				fillBackgroundOnMobile && backgroundFillMobile(isMedia),
+				fillBackgroundOnDesktop && backgroundFillDesktop(isMedia),
 			]}
 		>
 			{supportingContent.map((subLink, index) => {

dotcom-rendering/src/paletteDeclarations.ts

@@ -5663,6 +5663,11 @@ const cardSublinksBackgroundLight: PaletteFunction = () =>
 const cardSublinksBackgroundDark: PaletteFunction = () =>
 	sourcePalette.neutral[10];
 
+const cardMediaSublinksBackgroundLight: PaletteFunction = () =>
+	sourcePalette.neutral[97];
+const cardMediaSublinksBackgroundDark: PaletteFunction = () =>
+	sourcePalette.neutral[20];
+
 const latestLinksDottedLineLight: PaletteFunction = () =>
 	sourcePalette.neutral[60];
 const latestLinksDottedLineDark: PaletteFunction = () =>
@@ -6122,6 +6127,10 @@ const paletteColours = {
 		light: cardMediaIconLight,
 		dark: cardMediaIconDark,
 	},
+	'--card-media-sublinks-background': {
+		light: cardMediaSublinksBackgroundLight,
+		dark: cardMediaSublinksBackgroundDark,
+	},
 	'--card-media-waveform': {
 		light: cardMediaWaveformLight,
 		dark: cardMediaWaveformDark,