Merge pull request #14291 from guardian/doml/scrollable-highlights-stories

Update Scrollable Highlights divider and stories

Author: domlander

dotcom-rendering/fixtures/manual/highlights-trails.ts

@@ -163,160 +163,123 @@ export const trails: Array<DCRFrontCard> = [
 		isImmersive: false,
 	},
 	{
-		format: {
-			theme: Pillar.Sport,
-			design: ArticleDesign.Feature,
-			display: ArticleDisplay.NumberedList,
-		},
+		format: { design: 15, display: 0, theme: 3 },
 		dataLinkName: 'feature | group-0 | card-@1',
-		url: '/football/article/2024/may/13/premier-league-10-talking-points-from-the-weekends-action',
-		headline: 'Conceição off the bench to score injury time winner',
+		url: '/film/2025/jul/26/jamie-lee-curtis-interview-plastic-surgery-power-age-freakier-friday',
+		headline: '‘Generations of women have been disfigured’',
 		trailText:
-			'Arsenal can still improve, Erling Haaland perplexes and Thomas Frank feels the love from his players',
-		starRating: undefined,
-		webPublicationDate: '2024-05-13T07:00:21.000Z',
-		kickerText: 'Football',
+			'The actor explains how she is fighting back against the ‘cosmeceutical industrial complex’ and why she has finally found freedom at 66 years old',
+		webPublicationDate: '2025-07-26T05:00:46.000Z',
+		kickerText: 'Jamie Lee Curtis',
 		supportingContent: [],
-		discussionApiUrl:
-			'https://discussion.code.dev-theguardian.com/discussion-api',
-		discussionId: '/p/qhy2h',
-		byline: 'Guardian sport',
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		byline: 'Emma Brockes',
 		showByline: false,
 		snapData: {},
 		isBoosted: false,
+		boostLevel: 'default',
+		isImmersive: false,
 		isCrossword: false,
+		isNewsletter: false,
 		showQuotedHeadline: false,
 		showLivePlayable: false,
-		avatarUrl: undefined,
-		mainMedia: undefined,
 		isExternalLink: false,
-		embedUri: undefined,
-		branding: undefined,
-		slideshowImages: undefined,
 		showVideo: false,
 		image: {
-			src: 'https://media.guim.co.uk/ae0cb00e76ef1aa0ec283cfcfb91ba7378f8b9ec/0_0_5000_3000/master/5000.jpg',
+			src: 'https://media.guim.co.uk/124e05fe0a184da074cca3d7037f3771fb1f794d/0_393_5504_5504/master/5504.jpg',
 			altText:
-				'From left: Nottingham Forest’s Murillo, Tottenham’s Micky van de Ven and Manchester City’s Erling Haaland.',
+				'Portrait of Jamie Lee Curtis in a tartan jacket with her hands on her hips and sporting a huge pair of plastic red lips',
 		},
-		isImmersive: false,
 	},
 	{
-		format: {
-			theme: Pillar.Culture,
-			design: ArticleDesign.Feature,
-			display: ArticleDisplay.Standard,
-		},
-		dataLinkName: 'feature | group-0 | card-@2',
-		url: '/tv-and-radio/article/2024/may/12/eurovision-2024-everything-we-learned-from-to-the-uk-wild-unpopularity',
-		headline: 'Eurovision 2024: everything we learned',
+		format: { design: 10, display: 0, theme: 2 },
+		dataLinkName: 'feature | group-0 | card-@4',
+		url: '/football/2025/jul/26/rise-of-michelle-agyemang-lioness-euro-2025',
+		headline: 'The rapid rise of Michelle Agyemang',
 		trailText:
-			'Why did Olly Alexander fall flat in the public vote? Why didn’t Abba show up? And how did the trophy get smashed?',
-		starRating: undefined,
-		webPublicationDate: '2024-05-12T12:18:13.000Z',
-		kickerText: 'Television',
+			'Lioness has gone from prospect to superstar at Euro 2025 – and she’s got more than just football in her locker',
+		webPublicationDate: '2025-07-26T10:00:49.000Z',
+		kickerText: '‘She’s an inspiration’',
 		supportingContent: [],
-		discussionApiUrl:
-			'https://discussion.code.dev-theguardian.com/discussion-api',
-		discussionId: undefined,
-		byline: 'Michael Hogan',
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		discussionId: '/p/x2zav2',
+		byline: 'Sammy Gecsoyler',
 		showByline: false,
 		snapData: {},
 		isBoosted: false,
+		boostLevel: 'default',
+		isImmersive: false,
 		isCrossword: false,
+		isNewsletter: false,
 		showQuotedHeadline: false,
 		showLivePlayable: false,
-		avatarUrl: undefined,
-		mainMedia: undefined,
 		isExternalLink: false,
-		embedUri: undefined,
-		branding: undefined,
-		slideshowImages: undefined,
 		showVideo: false,
 		image: {
-			src: 'https://media.guim.co.uk/b403e3cfdc32f5b6ba5d3f38fa44ba2ebf388a1c/0_130_4178_2508/master/4178.jpg',
+			src: 'https://media.guim.co.uk/66cbecaa6c7ee8533f9438d3ebe8d1ee0288b550/542_0_5417_4334/master/5417.jpg',
 			altText:
-				'Olly Alexander and four dancers on stage during his performace.',
+				"England v Italy - UEFA Women's EURO 2025 Semi-Final, Geneva, Switzerland - 22 Jul 2025<br>RESTRICTED TO EDITORIAL USE Mandatory Credit: Photo by Jose Breton/NurPhoto/Shutterstock (15409762ay) Michelle Agyemang forward of England and Arsenal FC with her teammates celebrate victory after the UEFA Womens EURO 2025 Semi-Final match between England and Italy at Stade de Geneve on July 22, 2025 in Geneva, Switzerland. England v Italy - UEFA Women's EURO 2025 Semi-Final, Geneva, Switzerland - 22 Jul 2025",
 		},
-		isImmersive: false,
 	},
 	{
-		format: {
-			theme: Pillar.Lifestyle,
-			design: ArticleDesign.Standard,
-			display: ArticleDisplay.Standard,
-		},
-		dataLinkName: 'news | group-0 | card-@3',
-		url: '/money/article/2024/jul/22/number-of-new-uk-buy-to-let-mortgages-halves-in-just-over-a-year',
-		headline:
-			'Number of new UK buy-to-let mortgages halves in just over a year',
+		format: { design: 8, display: 0, theme: 1 },
+		dataLinkName: 'comment | group-0 | card-@5',
+		url: '/commentisfree/2025/jul/26/keir-starmer-donald-trump-britain-scotland',
+		headline: 'Donald Trump could drag Britain down with him',
 		trailText:
-			'Sector shrinks in size for first time since launch of products in 1996 as higher costs drive out investors',
-		starRating: undefined,
-		webPublicationDate: '2024-07-22T16:19:52.000Z',
-		kickerText: undefined,
+			'Why is the prime minister chasing after Trump in Scotland? His time would be better spent planning for a world beyond the ‘special relationship’, says Guardian foreign affairs commentator Simon Tisdall',
+		webPublicationDate: '2025-07-26T05:00:46.000Z',
+		kickerText: 'Simon Tisdall',
 		supportingContent: [],
-		discussionApiUrl:
-			'https://discussion.code.dev-theguardian.com/discussion-api',
-		discussionId: undefined,
-		byline: 'Rupert Jones',
-		showByline: false,
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		byline: 'Simon Tisdall',
+		showByline: true,
 		snapData: {},
 		isBoosted: false,
+		boostLevel: 'default',
+		isImmersive: false,
 		isCrossword: false,
-		showQuotedHeadline: false,
+		isNewsletter: false,
+		showQuotedHeadline: true,
 		showLivePlayable: false,
-		avatarUrl: undefined,
-		mainMedia: undefined,
+		avatarUrl:
+			'https://uploads.guim.co.uk/2024/11/08/Simon_Tisdall_2024.png',
 		isExternalLink: false,
-		embedUri: undefined,
-		branding: undefined,
-		slideshowImages: undefined,
 		showVideo: false,
 		image: {
-			src: 'https://media.guim.co.uk/dc9dcb8a8d29815e132f798b1d3e7acd528a9df3/0_295_5256_3153/master/5256.jpg',
-			altText: 'A row of terraced houses with many To Let signs',
+			src: 'https://media.guim.co.uk/1333864eaf5b9f618b033107857a4635f86f292f/487_0_7200_5760/master/7200.jpg',
+			altText:
+				'Keir Starmer handing an invitation from King Charles for a second state visit to Donald Trump, the White House, Washington, 27 February 2025.',
 		},
-		isImmersive: false,
 	},
 	{
-		format: {
-			theme: Pillar.Opinion,
-			design: ArticleDesign.Comment,
-			display: ArticleDisplay.Standard,
-		},
-		dataLinkName: 'comment | group-0 | card-@4',
-		url: '/commentisfree/article/2024/may/10/piers-morgan-baby-reindeer-netflix-interview',
-		headline: 'Restaurants are disproportionately expensive',
+		format: { design: 18, display: 0, theme: 1 },
+		dataLinkName: 'news | group-0 | card-@6',
+		url: '/commentisfree/ng-interactive/2025/jul/26/ukraine-war-drawing-ella-baron',
+		headline: 'Battles of the mind: drawing this endless war',
 		trailText:
-			'An interview with the woman who allegedly inspired the stalker character has been the latest jaw-dropper in the hit show’s afterlife, says the Guardian columnist Marina Hyde',
-		starRating: undefined,
-		webPublicationDate: '2024-05-10T14:02:28.000Z',
-		kickerText: 'Marina Hyde',
+			'The Guardian Opinion cartoonist reports on lives for ever changed by conflict',
+		webPublicationDate: '2025-07-26T05:59:39.000Z',
+		kickerText: 'Ella Baron in Ukraine',
 		supportingContent: [],
-		discussionApiUrl:
-			'https://discussion.code.dev-theguardian.com/discussion-api',
-		discussionId: undefined,
-		byline: 'Marina Hyde',
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		discussionId: '/p/x2m8hn',
+		byline: 'Ella Baron in Ukraine',
 		showByline: true,
 		snapData: {},
 		isBoosted: false,
+		boostLevel: 'default',
+		isImmersive: false,
 		isCrossword: false,
-		showQuotedHeadline: true,
+		isNewsletter: false,
+		showQuotedHeadline: false,
 		showLivePlayable: false,
-		avatarUrl: 'https://uploads.guim.co.uk/2022/12/05/Marina_Hyde.png',
-		mainMedia: undefined,
 		isExternalLink: false,
-		embedUri: undefined,
-		branding: undefined,
-		slideshowImages: undefined,
 		showVideo: false,
 		image: {
-			src: 'https://media.guim.co.uk/3718341a0b0da9a1d13f640c097a1388177fee8b/0_22_6000_3600/master/6000.jpg',
-			altText:
-				'Baby Reindeer writer and actor Richard Gadd (Donny Dunn) and Jessica Gunning, who plays Martha, in a still from the series.',
+			src: 'https://media.guim.co.uk/87bf9c036b7e17cb220f539fb30c599673ddf4bc/1256_1721_4258_3407/master/4258.jpg',
+			altText: 'Illustration',
 		},
-		isImmersive: false,
 	},
 ];
 

dotcom-rendering/src/components/ScrollableHighlights.importable.tsx

@@ -91,7 +91,7 @@ const verticalLineStyles = css`
 		bottom: 0;
 		right: -10px;
 		width: 1px;
-		background-color: ${palette('--card-border-top')};
+		background-color: ${palette('--highlights-container-separator')};
 		transform: translateX(-50%);
 	}
 `;

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

@@ -1,70 +1,96 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { defaultCard, trails } from '../../fixtures/manual/highlights-trails';
 import { ScrollableHighlights } from './ScrollableHighlights.importable';
+import { Section } from './Section';
 
-export default {
+const meta: Meta<typeof ScrollableHighlights> = {
 	title: 'Components/Masthead/ScrollableHighlights',
 	component: ScrollableHighlights,
-	args: {
-		trails,
-	},
-} as Meta;
+	render: ({ ...args }) => (
+		<Section
+			shouldCenter={true}
+			showSideBorders={false}
+			fullWidth={true}
+			showTopBorder={false}
+			padSides={false}
+			element="section"
+		>
+			<ScrollableHighlights {...args} />
+		</Section>
+	),
+};
 
+export default meta;
 type Story = StoryObj<typeof ScrollableHighlights>;
 
-export const Default = {};
+export const Default = {
+	args: {
+		trails: trails.slice(0, 6),
+	},
+};
+
+export const withEightCards = {
+	name: 'With Eight Cards',
+	args: {
+		trails: trails.slice(0, 8),
+	},
+};
 
 export const withTwoLineKicker: Story = {
+	...Default,
+	name: 'With Two Line Kicker',
 	args: {
 		trails: [
 			{
 				...defaultCard,
 				kickerText: 'UK Housing and Mortgages',
 			},
-			...trails,
+			...Default.args.trails,
 		],
 	},
-	name: 'With Two Line Kicker',
 };
 
 export const withLiveKicker: Story = {
+	...Default,
+	name: 'With Live Kicker',
 	args: {
 		trails: [
 			{
 				...defaultCard,
 				kickerText: 'Live',
 				format: { display: 0, theme: 3, design: 11 },
 			},
-			...trails,
+			...Default.args.trails,
 		],
 	},
-	name: 'With Live Kicker',
 };
 
 export const withFourLineHeadline: Story = {
+	...Default,
+	name: 'With Four Line Headline',
 	args: {
 		trails: [
 			{
 				...defaultCard,
 				headline:
 					'Really long headline to show what happens when it is long',
 			},
-			...trails,
+			...Default.args.trails,
 		],
 	},
-	name: 'With Four Line Headline',
 };
 
 export const withExcessivleyLongHeadline: Story = {
+	...Default,
+	name: 'With Excessively Long Headline',
 	args: {
 		trails: [
 			{
 				...defaultCard,
 				headline:
 					'Really long headline to show what happens when there is a really long headline that we will never ever have but we should check how it looks anyway',
 			},
-			...trails,
+			...Default.args.trails,
 		],
 	},
-	name: 'With Four Line Headline',
 };

dotcom-rendering/src/paletteDeclarations.ts

@@ -5771,7 +5771,12 @@ const highlightsContainerBackgroundLight: PaletteFunction = () =>
 const highlightsContainerBackgroundDark: PaletteFunction = () =>
 	sourcePalette.neutral[10];
 
-const hghlightsContainerBorderLight: PaletteFunction = () =>
+const highlightsContainerSeparatorLight: PaletteFunction = () =>
+	sourcePalette.neutral[86];
+const highlightsContainerSeparatorDark: PaletteFunction = () =>
+	sourcePalette.neutral[46];
+
+const highlightsContainerBorderLight: PaletteFunction = () =>
 	sourcePalette.neutral[60];
 const highlightsContainerBorderDark: PaletteFunction = () =>
 	sourcePalette.neutral[46];
@@ -7040,7 +7045,7 @@ const paletteColours = {
 		dark: highlightsContainerBackgroundDark,
 	},
 	'--highlights-container-border': {
-		light: hghlightsContainerBorderLight,
+		light: highlightsContainerBorderLight,
 		dark: highlightsContainerBorderDark,
 	},
 	'--highlights-container-end-fade': {
@@ -7051,6 +7056,10 @@ const paletteColours = {
 		light: highlightContainerMidFadeLight,
 		dark: highlightContainerMidFadeDark,
 	},
+	'--highlights-container-separator': {
+		light: highlightsContainerSeparatorLight,
+		dark: highlightsContainerSeparatorDark,
+	},
 	'--highlights-container-start-fade': {
 		light: highlightContainerStartLight,
 		dark: highlightContainerStartDark,