Merge pull request #14894 from guardian/gallery-secondary-onward-container

Add new scrollable onwards container with new design

Author: marjisound

dotcom-rendering/fixtures/generated/story-package.ts

@@ -38,7 +38,7 @@ export const storyPackage: FEStoryPackage = {
 				theme: 'NewsPillar',
 				display: 'StandardDisplay',
 			},
-			webPublicationDate: '2025-03-24T19:00:47.000Z',
+			webPublicationDate: '2022-01-01T11:00:47.000Z',
 			headline:
 				'Nasa rover discovers largest organic compounds yet found on Mars',
 			shortUrl: 'https://www.theguardian.com/p/xxp8eq',
@@ -69,7 +69,7 @@ export const storyPackage: FEStoryPackage = {
 				theme: 'NewsPillar',
 				display: 'StandardDisplay',
 			},
-			webPublicationDate: '2025-03-13T11:56:49.000Z',
+			webPublicationDate: '2022-01-01T11:56:49.000Z',
 			headline: 'Passing probe captures images of mysterious Mars moon',
 			shortUrl: 'https://www.theguardian.com/p/xxn2cq',
 			discussion: {
@@ -100,7 +100,7 @@ export const storyPackage: FEStoryPackage = {
 				theme: 'NewsPillar',
 				display: 'StandardDisplay',
 			},
-			webPublicationDate: '2025-02-24T23:35:09.000Z',
+			webPublicationDate: '2021-02-24T23:35:09.000Z',
 			headline:
 				'Mars once had an ocean with sandy beaches, researchers say',
 			shortUrl: 'https://www.theguardian.com/p/xxjy3h',
@@ -132,7 +132,7 @@ export const storyPackage: FEStoryPackage = {
 				theme: 'NewsPillar',
 				display: 'StandardDisplay',
 			},
-			webPublicationDate: '2025-03-07T02:59:44.000Z',
+			webPublicationDate: '2021-03-01T02:59:44.000Z',
 			headline:
 				'SpaceX’s Starship explodes in second failure for Musk’s Mars program',
 			shortUrl: 'https://www.theguardian.com/p/xxyyzx',
@@ -163,7 +163,7 @@ export const storyPackage: FEStoryPackage = {
 				theme: 'NewsPillar',
 				display: 'ImmersiveDisplay',
 			},
-			webPublicationDate: '2025-01-11T11:00:01.000Z',
+			webPublicationDate: '2021-01-11T11:00:01.000Z',
 			headline:
 				'‘I think there is life there. Today’: the race to put a human on Mars – in pictures',
 			shortUrl: 'https://www.theguardian.com/p/xx66cn',

dotcom-rendering/fixtures/manual/onwardsTrails.ts

@@ -0,0 +1,192 @@
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	Pillar,
+} from '../../src/lib/articleFormat';
+import { getDataLinkNameCard } from '../../src/lib/getDataLinkName';
+import { type TrailType } from '../../src/types/trails';
+
+export const galleryOnwardsTrails: TrailType[] = [
+	{
+		url: 'https://www.theguardian.com/environment/gallery/2025/aug/22/week-in-wildlife-a-clumsy-fox-swinging-orangutang-and-rescued-jaguarundi-cub',
+		linkText:
+			'Week in wildlife: a clumsy fox, a swinging orangutan and a rescued jaguarundi cub',
+		showByline: false,
+		byline: 'Pejman Faratin',
+		image: {
+			src: 'https://media.guim.co.uk/a81e974ffee6c8c88fa280c2d02eaf5dc2af863e/151_292_1020_816/master/1020.jpg',
+			altText: '',
+		},
+		format: {
+			theme: Pillar.News,
+			design: ArticleDesign.Gallery,
+			display: ArticleDisplay.Standard,
+		},
+		webPublicationDate: '2022-01-01T06:00:25.000Z',
+		headline:
+			'Week in wildlife: a clumsy fox, a swinging orangutan and a rescued jaguarundi cub',
+		shortUrl: 'https://www.theguardian.com/p/x32n89',
+		discussion: {
+			isCommentable: false,
+			isClosedForComments: true,
+			discussionId: '/p/x32n89',
+		},
+		discussionId: 'zHoBy6HNKsk',
+		dataLinkName: getDataLinkNameCard(
+			{
+				theme: Pillar.News,
+				design: ArticleDesign.Gallery,
+				display: ArticleDisplay.Standard,
+			},
+			'0',
+			0,
+		),
+		trailText:
+			'Guinness World Records is looking back at the extraordinary feats achieved since its inception - as well as unveiling 70 whacky and unclaimed records ',
+		kickerText: 'Politics', // Get data for this
+		mainMedia: { type: 'Gallery', count: '6' },
+	},
+	{
+		url: 'https://www.theguardian.com/money/gallery/2025/aug/22/characterful-cottages-for-sale-in-england-in-pictures',
+		linkText: 'Characterful cottages for sale in England – in pictures',
+		showByline: false,
+		byline: 'Anna White',
+		image: {
+			src: 'https://media.guim.co.uk/58cd9356e6d68e8efa6028162bb959f9798307d5/515_0_5000_4000/master/5000.jpg',
+			altText: '',
+		},
+		format: {
+			design: ArticleDesign.Gallery,
+			theme: Pillar.Lifestyle,
+			display: ArticleDisplay.Standard,
+		},
+		webPublicationDate: '2022-01-01T06:00:24.000Z',
+		headline: 'Characterful cottages for sale in England – in pictures',
+		shortUrl: 'https://www.theguardian.com/p/x32gqj',
+		discussion: {
+			isCommentable: false,
+			isClosedForComments: true,
+			discussionId: '/p/x32gqj',
+		},
+		dataLinkName: getDataLinkNameCard(
+			{
+				design: ArticleDesign.Gallery,
+				theme: Pillar.Lifestyle,
+				display: ArticleDisplay.Standard,
+			},
+			'0',
+			1,
+		),
+		trailText:
+			'Picked from a record 60,636 entries, the first images from the Natural History Museum’s wildlife photographer of the year competition have been released. The photographs, which range from a lion facing down a cobra to magnified mould spores, show the diversity, beauty and complexity of the natural world and humanity’s relationship with it',
+		mainMedia: { type: 'Gallery', count: '6' },
+	},
+	{
+		url: 'https://www.theguardian.com/news/gallery/2025/aug/22/sunsets-aid-parachutes-and-giant-pandas-photos-of-the-day-friday',
+		linkText:
+			'Sunsets, aid parachutes and giant pandas: photos of the day – Friday ',
+		showByline: false,
+		byline: 'Eithne Staunton',
+		image: {
+			src: 'https://media.guim.co.uk/4ce0b080206fe9b65b976c1acf219d81072cc814/0_0_2113_1690/master/2113.png',
+			altText: '',
+		},
+		format: {
+			design: ArticleDesign.Gallery,
+			theme: Pillar.News,
+			display: ArticleDisplay.Standard,
+		},
+		webPublicationDate: '2022-01-01T08:49:42.000Z',
+		headline:
+			'Sunsets, aid parachutes and giant pandas: photos of the day – Friday ',
+		shortUrl: 'https://www.theguardian.com/p/x3359z',
+		discussion: {
+			isCommentable: false,
+			isClosedForComments: true,
+			discussionId: '/p/x3359z',
+		},
+		dataLinkName: getDataLinkNameCard(
+			{
+				design: ArticleDesign.Gallery,
+				theme: Pillar.News,
+				display: ArticleDisplay.Standard,
+			},
+			'0',
+			2,
+		),
+		trailText:
+			'From the mock-Tudor fad of the 1920s to drivers refuelling on a roundabout, each era produces its own distinctive petrol stations – as photographer Philip Butler discovered',
+		mainMedia: { type: 'Gallery', count: '6' },
+	},
+	{
+		url: 'https://www.theguardian.com/fashion/gallery/2025/aug/22/what-to-wear-to-notting-hill-carnival',
+		linkText: 'On parade: what to wear to Notting Hill carnival',
+		showByline: false,
+		byline: 'Melanie Wilkinson',
+		image: {
+			src: 'https://media.guim.co.uk/49a9656cd10c4f64f8bdd54380afb915c7a3648b/207_0_1500_1200/master/1500.jpg',
+			altText: '',
+		},
+		format: {
+			design: ArticleDesign.Gallery,
+			theme: Pillar.Lifestyle,
+			display: ArticleDisplay.Standard,
+		},
+		webPublicationDate: '2022-01-01T05:00:23.000Z',
+		headline: 'On parade: what to wear to Notting Hill carnival',
+		shortUrl: 'https://www.theguardian.com/p/x32mte',
+		discussion: {
+			isCommentable: false,
+			isClosedForComments: true,
+			discussionId: '/p/x32mte',
+		},
+		dataLinkName: getDataLinkNameCard(
+			{
+				design: ArticleDesign.Gallery,
+				theme: Pillar.Lifestyle,
+				display: ArticleDisplay.Standard,
+			},
+			'0',
+			1,
+		),
+		trailText:
+			'The Guardian’s picture editors select photographs from around the world',
+		mainMedia: { type: 'Gallery', count: '6' },
+	},
+	{
+		url: 'https://www.theguardian.com/artanddesign/gallery/2025/aug/21/psychedelic-rock-glass-mountain-michael-lundgren',
+		linkText:
+			'Psychedelic rock! Formations that mess with your mind – in pictures ',
+		showByline: false,
+		image: {
+			src: 'https://media.guim.co.uk/2810af61b2d2d2d5f71ec01e56e6555e0a6d4635/55_0_2813_2250/master/2813.jpg',
+			altText: '',
+		},
+		format: {
+			design: ArticleDesign.Gallery,
+			theme: Pillar.Culture,
+			display: ArticleDisplay.Standard,
+		},
+		webPublicationDate: '2025-08-21T06:01:01.000Z',
+		headline:
+			'Psychedelic rock! Formations that mess with your mind – in pictures ',
+		shortUrl: 'https://www.theguardian.com/p/x2p663',
+		discussion: {
+			isCommentable: false,
+			isClosedForComments: true,
+			discussionId: '/p/x2p663',
+		},
+		dataLinkName: getDataLinkNameCard(
+			{
+				design: ArticleDesign.Gallery,
+				theme: Pillar.Culture,
+				display: ArticleDisplay.Standard,
+			},
+			'0',
+			1,
+		),
+		trailText:
+			'Politicians and their partners put on their best show at this year’s Midwinter Ball, an annual dinner hosted by the Federal Parliamentary Press Gallery in Canberra',
+		mainMedia: { type: 'Gallery', count: '6' },
+	},
+];

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

@@ -80,6 +80,8 @@ export type Position = 'inner' | 'outer' | 'none';
 export type Props = {
 	linkTo: string;
 	format: ArticleFormat;
+	/** The format of the article holding the card */
+	contextFormat?: ArticleFormat;
 	serverTime?: number;
 	headlineText: string;
 	headlineSizes?: ResponsiveFontSize;
@@ -365,6 +367,7 @@ const liveBulletStyles = css`
 export const Card = ({
 	linkTo,
 	format,
+	contextFormat,
 	headlineText,
 	headlineSizes,
 	showQuotedHeadline,
@@ -561,13 +564,25 @@ export const Card = ({
 		);
 	}
 
+	// Determine if the card is used within a gallery article
+	const isInGalleryContext = contextFormat?.design === ArticleDesign.Gallery;
+
+	// This is due to a re-design for onwards content.
+	// Currently this re-design is only applied for galleries secondary onwards content.
+	// We plan to apply this to all onwards content in the future.
+	const isGallerySecondaryOnward =
+		isInGalleryContext && onwardsSource !== 'more-galleries';
+
+	const isMoreGalleriesOnwardContent =
+		isOnwardContent && onwardsSource === 'more-galleries';
+
 	/**
 -	 * Media cards have contrasting background colours. We add additional
 	 * padding to these cards to keep the text readable.
 -	 */
 	const isMediaCardOrNewsletter = isMediaCard(format) || isNewsletter;
 
-	const showPill = isMediaCardOrNewsletter;
+	const showPill = isMediaCardOrNewsletter && !isGallerySecondaryOnward;
 
 	const media = getMedia({
 		imageUrl: image?.src,
@@ -607,9 +622,15 @@ export const Card = ({
 		isBetaContainer,
 	);
 
-	const backgroundColour = isMediaCardOrNewsletter
-		? palette('--card-media-background')
-		: palette('--card-background');
+	const backgroundColour = () => {
+		if (isGallerySecondaryOnward) {
+			return palette('--onward-background');
+		}
+		if (isMediaCardOrNewsletter) {
+			return palette('--card-media-background');
+		}
+		return palette('--card-background');
+	};
 
 	/* Whilst we migrate to the new container types, we need to check which container we are in. */
 	const isFlexibleContainer =
@@ -636,8 +657,6 @@ export const Card = ({
 		return 'tablet';
 	};
 
-	const isMoreGalleriesOnwardContent =
-		isOnwardContent && onwardsSource === 'more-galleries';
 	const shouldShowTrailText = isMoreGalleriesOnwardContent
 		? media?.type !== 'podcast' && isOnwardSplash
 		: media?.type !== 'podcast';
@@ -647,7 +666,7 @@ export const Card = ({
 	 * Order matters here as the logic is based on the card properties
 	 */
 	const getGapSizes = (): GapSizes => {
-		if (isOnwardContent) {
+		if (isOnwardContent && !isGallerySecondaryOnward) {
 			return {
 				row: 'none',
 				column: 'none',
@@ -760,6 +779,7 @@ export const Card = ({
 		betaContainer: boolean,
 		onwardContent: boolean,
 	): 'large' | 'small' | undefined => {
+		if (isInGalleryContext) return undefined;
 		if (mediaCard && betaContainer) return 'large';
 		if (mediaCard || onwardContent) return 'small';
 		return undefined;
@@ -847,6 +867,11 @@ export const Card = ({
 			showTopBarDesktop={showTopBarDesktop}
 			showTopBarMobile={showTopBarMobile}
 			containerPalette={containerPalette}
+			topBarColour={
+				isGallerySecondaryOnward
+					? palette('--onward-content-top-border')
+					: undefined
+			}
 		>
 			<CardLink
 				linkTo={linkTo}
@@ -859,7 +884,7 @@ export const Card = ({
 					css={css`
 						padding-bottom: ${space[5]}px;
 					`}
-					style={{ backgroundColor: backgroundColour }}
+					style={{ backgroundColor: backgroundColour() }}
 				>
 					<CardHeadline
 						headlineText={headlineText}
@@ -891,7 +916,7 @@ export const Card = ({
 			)}
 
 			<CardLayout
-				cardBackgroundColour={backgroundColour}
+				cardBackgroundColour={backgroundColour()}
 				mediaPositionOnDesktop={mediaPositionOnDesktop}
 				mediaPositionOnMobile={mediaPositionOnMobile}
 				minWidthInPixels={minWidthInPixels}
@@ -919,7 +944,11 @@ export const Card = ({
 						mediaType={media.type}
 						mediaPositionOnDesktop={mediaPositionOnDesktop}
 						mediaPositionOnMobile={mediaPositionOnMobile}
-						padMedia={isMediaCardOrNewsletter && isBetaContainer}
+						padMedia={
+							isMediaCardOrNewsletter &&
+							isBetaContainer &&
+							!isGallerySecondaryOnward
+						}
 						isBetaContainer={isBetaContainer}
 						isSmallCard={isSmallCard}
 					>
@@ -1161,7 +1190,7 @@ export const Card = ({
 					padContent={determinePadContent(
 						isMediaCardOrNewsletter,
 						isBetaContainer,
-						isOnwardContent && !isMoreGalleriesOnwardContent,
+						isOnwardContent,
 					)}
 				>
 					{/* This div is needed to keep the headline and trail text justified at the start */}
@@ -1300,12 +1329,15 @@ export const Card = ({
 					css`
 						${from.tablet} {
 							flex-basis: 100%;
-							background-color: ${backgroundColour};
+							background-color: ${backgroundColour()};
 						}
 					`
 				}
 				style={{
-					padding: isOnwardContent ? `0 ${space[2]}px` : 0,
+					padding:
+						isOnwardContent && !isInGalleryContext
+							? `0 ${space[2]}px`
+							: 0,
 				}}
 			>
 				{showLivePlayable && liveUpdatesPosition === 'outer' && (