Add new onward container with new design

Author: marjisound

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-08-22T05: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;
@@ -364,6 +366,7 @@ const liveBulletStyles = css`
 export const Card = ({
 	linkTo,
 	format,
+	contextFormat,
 	headlineText,
 	headlineSizes,
 	showQuotedHeadline,
@@ -474,6 +477,11 @@ export const Card = ({
 				showClock={showClock}
 				serverTime={serverTime}
 				isTagPage={isTagPage}
+				colour={
+					isGallerySecondaryOnward
+						? palette('--onward-card-footer-text')
+						: undefined
+				}
 			/>
 		);
 	};
@@ -504,6 +512,11 @@ export const Card = ({
 					<CardCommentCount
 						discussionApiUrl={discussionApiUrl}
 						discussionId={discussionId}
+						colour={
+							isGallerySecondaryOnward
+								? palette('--onward-card-footer-text')
+								: undefined
+						}
 					/>
 				</Island>
 			</Link>
@@ -559,13 +572,24 @@ export const Card = ({
 		);
 	}
 
+	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,
@@ -605,9 +629,15 @@ export const Card = ({
 		isBetaContainer,
 	);
 
-	const backgroundColour = isMediaCardOrNewsletter
-		? palette('--card-media-background')
-		: palette('--card-background');
+	const backgroundColour = () => {
+		if (isGallerySecondaryOnward) {
+			return palette('--onward-card-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 =
@@ -634,8 +664,6 @@ export const Card = ({
 		return 'tablet';
 	};
 
-	const isMoreGalleriesOnwardContent =
-		isOnwardContent && onwardsSource === 'more-galleries';
 	const shouldShowTrailText = isMoreGalleriesOnwardContent
 		? media?.type !== 'podcast' && isOnwardSplash
 		: media?.type !== 'podcast';
@@ -645,7 +673,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',
@@ -758,6 +786,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;
@@ -845,6 +874,11 @@ export const Card = ({
 			showTopBarDesktop={showTopBarDesktop}
 			showTopBarMobile={showTopBarMobile}
 			containerPalette={containerPalette}
+			colour={
+				isGallerySecondaryOnward
+					? palette('--onward-content-border')
+					: undefined
+			}
 		>
 			<CardLink
 				linkTo={linkTo}
@@ -857,7 +891,7 @@ export const Card = ({
 					css={css`
 						padding-bottom: ${space[5]}px;
 					`}
-					style={{ backgroundColor: backgroundColour }}
+					style={{ backgroundColor: backgroundColour() }}
 				>
 					<CardHeadline
 						headlineText={headlineText}
@@ -878,6 +912,11 @@ export const Card = ({
 						showByline={showByline}
 						isExternalLink={isExternalLink}
 						showLabsRedesign={showLabsRedesign}
+						headlineColour={
+							isGallerySecondaryOnward
+								? palette('--onward-caption-text')
+								: undefined
+						}
 					/>
 					{!isUndefined(starRating) ? (
 						<StarRatingComponent
@@ -889,7 +928,7 @@ export const Card = ({
 			)}
 
 			<CardLayout
-				cardBackgroundColour={backgroundColour}
+				cardBackgroundColour={backgroundColour()}
 				mediaPositionOnDesktop={mediaPositionOnDesktop}
 				mediaPositionOnMobile={mediaPositionOnMobile}
 				minWidthInPixels={minWidthInPixels}
@@ -917,7 +956,12 @@ export const Card = ({
 						mediaType={media.type}
 						mediaPositionOnDesktop={mediaPositionOnDesktop}
 						mediaPositionOnMobile={mediaPositionOnMobile}
-						padMedia={isMediaCardOrNewsletter && isBetaContainer}
+						hideMediaOverlay={media.type === 'slideshow'}
+						padMedia={
+							isMediaCardOrNewsletter &&
+							isBetaContainer &&
+							!isGallerySecondaryOnward
+						}
 						isBetaContainer={isBetaContainer}
 						isSmallCard={isSmallCard}
 					>
@@ -1158,7 +1202,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 */}
@@ -1200,6 +1244,11 @@ export const Card = ({
 											: undefined
 									}
 									showLabsRedesign={showLabsRedesign}
+									headlineColour={
+										isGallerySecondaryOnward
+											? palette('--onward-caption-text')
+											: undefined
+									}
 								/>
 								{!isUndefined(starRating) ? (
 									<StarRatingComponent
@@ -1297,7 +1346,7 @@ export const Card = ({
 					css`
 						${from.tablet} {
 							flex-basis: 100%;
-							background-color: ${backgroundColour};
+							background-color: ${backgroundColour()};
 						}
 					`
 				}