Add story packages to galleries (#14426)

The primary reason for this change is to add support for story packages
to the new gallery layout.

At the moment every layout duplicates the same transformation on the
frontend story package data, mapping over the trails with `decideTrail`.
This change extracts the story package type definition and parsing into
its own module, and calls the parsing code up front when the `Article`
type is constructed (i.e. in one place rather than several). For now, we
can only use this in galleries, as other layouts are still using the
`ArticleDeprecated` type.

Also adds a type annotation to the story package fixtures, so that we
can use them in stories without type errors.

Also changed the gallery story snapshot width to leftCol, to make it fit
the maximum snapshot size in Chromatic.

Co-authored-by: Marjan Kalanaki <[email protected]>

Author: JamieB-gu

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

@@ -11,7 +11,9 @@
  *    gen-fixtures.js directly.
  */
 
-export const storyPackage = {
+import type { FEStoryPackage } from '../../src/frontend/feArticle';
+
+export const storyPackage: FEStoryPackage = {
 	heading: 'More on this story',
 	trails: [
 		{

dotcom-rendering/scripts/test-data/gen-fixtures.js

@@ -302,11 +302,10 @@ requests.push(
 		.then((res) => res.json())
 		.then((json) => {
 			// Write the new fixture data
-			const contents = `${HEADER}export const storyPackage = ${JSON.stringify(
-				json,
-				null,
-				4,
-			)}`;
+			const contents = `${HEADER}
+			import type { FEStoryPackage } from '../../src/frontend/feArticle';
+			
+			export const storyPackage: FEStoryPackage = ${JSON.stringify(json, null, 4)}`;
 			return fs.writeFile(
 				`${root}/fixtures/generated/story-package.ts`,
 				contents,

dotcom-rendering/src/frontend/feArticle.ts

@@ -84,10 +84,7 @@ export interface FEArticle {
 	hasRelated: boolean;
 	publication: string; // TODO: check who uses?
 	hasStoryPackage: boolean;
-	storyPackage?: {
-		trails: FETrailType[];
-		heading: string;
-	};
+	storyPackage?: FEStoryPackage;
 	onwards?: FEOnwards[];
 	beaconURL: string;
 	isCommentable: boolean;
@@ -197,3 +194,8 @@ export type FEFormat = {
 	theme: FETheme;
 	display: FEDisplay;
 };
+
+export type FEStoryPackage = {
+	heading: string;
+	trails: FETrailType[];
+};

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -223,14 +223,14 @@
         "storyPackage": {
             "type": "object",
             "properties": {
+                "heading": {
+                    "type": "string"
+                },
                 "trails": {
                     "type": "array",
                     "items": {
                         "$ref": "#/definitions/FETrailType"
                     }
-                },
-                "heading": {
-                    "type": "string"
                 }
             },
             "required": [

dotcom-rendering/src/layouts/DecideLayout.stories.tsx

@@ -187,6 +187,7 @@ export const WebStandardLifestyleReviewLight: Story = {
 			display: WebStandardStandardNewsLight.args.article.display,
 			theme: Pillar.Lifestyle,
 			design: ArticleDesign.Review,
+			storyPackage: undefined,
 		},
 	},
 	parameters: webParameters,

dotcom-rendering/src/layouts/GalleryLayout.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { allModes } from '../../.storybook/modes';
 import { Gallery as GalleryFixture } from '../../fixtures/generated/fe-articles/Gallery';
+import { storyPackage } from '../../fixtures/generated/story-package';
 import { WithBranding } from '../components/ArticleMeta.web.stories';
 import { ArticleDesign } from '../lib/articleFormat';
 import { getCurrentPillar } from '../lib/layoutHelpers';
@@ -14,7 +15,7 @@ const meta = {
 	parameters: {
 		chromatic: {
 			modes: {
-				'light wide': allModes['light wide'],
+				'light leftCol': allModes['light leftCol'],
 			},
 		},
 	},
@@ -40,7 +41,13 @@ const addBrandingAndAffiliateDisclaimer = (gallery: Gallery): Gallery => ({
 	},
 });
 
-const appsArticle = enhanceArticleType(GalleryFixture, 'Apps');
+const appsArticle = enhanceArticleType(
+	{
+		...GalleryFixture,
+		storyPackage,
+	},
+	'Apps',
+);
 
 if (appsArticle.design !== ArticleDesign.Gallery) {
 	throw new Error('Expected gallery');
@@ -65,7 +72,13 @@ export const Apps = {
 	},
 } satisfies Story;
 
-const webArticle = enhanceArticleType(GalleryFixture, 'Web');
+const webArticle = enhanceArticleType(
+	{
+		...GalleryFixture,
+		storyPackage,
+	},
+	'Web',
+);
 
 if (webArticle.design !== ArticleDesign.Gallery) {
 	throw new Error('Expected gallery');

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -16,6 +16,7 @@ import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
 import { Caption } from '../components/Caption';
+import { Carousel } from '../components/Carousel.importable';
 import { DiscussionLayout } from '../components/DiscussionLayout';
 import { Footer } from '../components/Footer';
 import { DesktopAdSlot, MobileAdSlot } from '../components/GalleryAdSlots';
@@ -35,7 +36,7 @@ import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideMainMediaCaption } from '../lib/decide-caption';
 import type { NavType } from '../model/extract-nav';
-import { palette as themePalette } from '../palette';
+import { palette } from '../palette';
 import type { Gallery } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { BannerWrapper, Stuck } from './lib/stickiness';
@@ -56,10 +57,10 @@ interface AppProps extends Props {
 
 const headerStyles = css`
 	${grid.container}
-	background-color: ${themePalette('--article-inner-background')};
+	background-color: ${palette('--article-inner-background')};
 
 	${from.tablet} {
-		border-bottom: 1px solid ${themePalette('--article-border')};
+		border-bottom: 1px solid ${palette('--article-border')};
 	}
 `;
 
@@ -75,19 +76,19 @@ const metaAndDisclaimerContainer = css`
 			top: 0;
 			bottom: 0;
 			width: 1px;
-			background-color: ${themePalette('--article-border')};
+			background-color: ${palette('--article-border')};
 		}
 	}
 `;
 
 const galleryItemAdvertStyles = css`
 	${grid.paddedContainer}
 	grid-auto-flow: row dense;
-	background-color: ${themePalette('--article-inner-background')};
+	background-color: ${palette('--article-inner-background')};
 
 	${from.tablet} {
-		border-left: 1px solid ${themePalette('--article-border')};
-		border-right: 1px solid ${themePalette('--article-border')};
+		border-left: 1px solid ${palette('--article-border')};
+		border-right: 1px solid ${palette('--article-border')};
 	}
 `;
 
@@ -116,7 +117,7 @@ const galleryBorder = css`
 			top: 0;
 			bottom: 0;
 			width: 1px;
-			background-color: ${themePalette('--article-border')};
+			background-color: ${palette('--article-border')};
 		}
 	}
 
@@ -130,7 +131,7 @@ const galleryBorder = css`
 			top: 0;
 			bottom: 0;
 			width: 1px;
-			background-color: ${themePalette('--article-border')};
+			background-color: ${palette('--article-border')};
 		}
 	}
 `;
@@ -170,6 +171,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 	const isLabs = format.theme === ArticleSpecial.Labs;
 
 	const renderAds = canRenderAds(frontendData);
+	const showMerchandisingHigh = isWeb && renderAds && !isLabs;
 
 	const contributionsServiceUrl = getContributionsServiceUrl(frontendData);
 
@@ -229,7 +231,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 
 			<main
 				css={{
-					backgroundColor: themePalette('--article-background'),
+					backgroundColor: palette('--article-background'),
 				}}
 			>
 				{isApps && renderAds && (
@@ -378,14 +380,15 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					}
 				/>
 			</main>
-			{isWeb && renderAds && !isLabs && (
+			{/* More galleries container */}
+			{showMerchandisingHigh && (
 				<Section
 					fullWidth={true}
 					data-print-layout="hide"
 					padSides={false}
 					showTopBorder={false}
 					showSideBorders={false}
-					backgroundColour={themePalette('--ad-background')}
+					backgroundColour={palette('--ad-background')}
 					element="aside"
 				>
 					<AdSlot
@@ -395,17 +398,25 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					/>
 				</Section>
 			)}
+			<StoryPackage
+				absoluteServerTimes={switches['absoluteServerTimes'] ?? false}
+				discussionApiUrl={discussionApiUrl}
+				format={format}
+				renderingTarget={renderingTarget}
+				storyPackage={gallery.storyPackage}
+				topBorder={showMerchandisingHigh}
+			/>
 			{/** More Galleries container goes here */}
 			{showComments && (
 				<Section
 					fullWidth={true}
 					sectionId="comments"
 					element="section"
-					backgroundColour={themePalette(
+					backgroundColour={palette(
 						'--discussion-section-background',
 					)}
-					borderColour={themePalette('--article-border')}
-					fontColour={themePalette('--discussion-text')}
+					borderColour={palette('--article-border')}
+					fontColour={palette('--discussion-text')}
 				>
 					<DiscussionLayout
 						discussionApiUrl={frontendData.config.discussionApiUrl}
@@ -432,7 +443,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					padSides={false}
 					showTopBorder={false}
 					showSideBorders={false}
-					backgroundColour={themePalette('--ad-background')}
+					backgroundColour={palette('--ad-background')}
 					element="aside"
 				>
 					<AdSlot position="merchandising" display={format.display} />
@@ -487,9 +498,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 			{isApps && (
 				<div
 					css={{
-						backgroundColor: themePalette(
-							'--apps-footer-background',
-						),
+						backgroundColor: palette('--apps-footer-background'),
 					}}
 				>
 					<Island priority="critical">
@@ -500,3 +509,40 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 		</>
 	);
 };
+
+const StoryPackage = ({
+	storyPackage,
+	format,
+	discussionApiUrl,
+	absoluteServerTimes,
+	renderingTarget,
+	topBorder,
+}: {
+	storyPackage: Gallery['storyPackage'];
+	format: ArticleFormat;
+	discussionApiUrl: string;
+	absoluteServerTimes: boolean;
+	renderingTarget: RenderingTarget;
+	topBorder: boolean;
+}) =>
+	storyPackage === undefined ? null : (
+		<Section
+			fullWidth={true}
+			backgroundColour={palette('--article-section-background')}
+			borderColour={palette('--onward-content-border')}
+			showTopBorder={topBorder}
+		>
+			<Island priority="feature" defer={{ until: 'visible' }}>
+				<Carousel
+					heading={storyPackage.heading}
+					trails={storyPackage.trails}
+					onwardsSource="more-on-this-story"
+					format={format}
+					leftColSize="compact"
+					discussionApiUrl={discussionApiUrl}
+					absoluteServerTimes={absoluteServerTimes}
+					renderingTarget={renderingTarget}
+				/>
+			</Island>
+		</Section>
+	);

dotcom-rendering/src/paletteDeclarations.ts

@@ -6162,6 +6162,15 @@ const crosswordCluesHeaderBorderBottom: PaletteFunction = () =>
 const crosswordTextLight: PaletteFunction = () => sourcePalette.neutral[7];
 const crosswordTextDark: PaletteFunction = () => sourcePalette.neutral[86];
 
+const onwardContentBorderLight: PaletteFunction = (format) => {
+	switch (format.design) {
+		case ArticleDesign.Gallery:
+			return sourcePalette.neutral[86];
+		default:
+			return articleBorderLight(format);
+	}
+};
+
 // ----- Palette ----- //
 
 /**
@@ -7352,6 +7361,10 @@ const paletteColours = {
 		light: numberedListTitleLight,
 		dark: numberedListTitleDark,
 	},
+	'--onward-content-border': {
+		light: onwardContentBorderLight,
+		dark: () => sourcePalette.neutral[20],
+	},
 	'--pagination-text': {
 		light: paginationTextLight,
 		dark: paginationTextDark,

dotcom-rendering/src/storyPackage.ts

@@ -0,0 +1,21 @@
+import type { FEStoryPackage } from './frontend/feArticle';
+import { decideTrail } from './lib/decideTrail';
+import type { TrailType } from './types/trails';
+
+export type StoryPackage = {
+	heading: string;
+	trails: TrailType[];
+};
+
+export const parse = (
+	feStoryPackage: FEStoryPackage | undefined,
+): StoryPackage | undefined => {
+	if (feStoryPackage === undefined) {
+		return undefined;
+	}
+
+	return {
+		heading: feStoryPackage.heading,
+		trails: feStoryPackage.trails.map(decideTrail),
+	};
+};