Add new onward container to gallery layout

Author: marjisound

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

@@ -855,7 +855,7 @@ export const Card = ({
 			showTopBarMobile={showTopBarMobile}
 			isOnwardContent={isOnwardContent}
 			containerPalette={containerPalette}
-			colour={
+			topBarColour={
 				isGallerySecondaryOnward
 					? palette('--onward-content-border')
 					: undefined

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

@@ -14,7 +14,7 @@ type Props = {
 	showTopBarMobile: boolean;
 	isOnwardContent: boolean;
 	containerPalette?: DCRContainerPalette;
-	colour?: string;
+	topBarColour?: string;
 };
 
 const baseCardStyles = css`
@@ -112,7 +112,7 @@ export const CardWrapper = ({
 	showTopBarMobile,
 	isOnwardContent,
 	containerPalette,
-	colour = palette('--card-border-top'),
+	topBarColour = palette('--card-border-top'),
 }: Props) => {
 	return (
 		<FormatBoundary format={format}>
@@ -121,8 +121,8 @@ export const CardWrapper = ({
 					css={[
 						baseCardStyles,
 						hoverStyles,
-						showTopBarDesktop && desktopTopBarStyles(colour),
-						showTopBarMobile && mobileTopBarStyles(colour),
+						showTopBarDesktop && desktopTopBarStyles(topBarColour),
+						showTopBarMobile && mobileTopBarStyles(topBarColour),
 						isOnwardContent &&
 							contextFormat?.design !== ArticleDesign.Gallery &&
 							onwardContentStyles,

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

@@ -4,7 +4,11 @@ import type { ComponentEvent } from '@guardian/ophan-tracker-js';
 import { useEffect, useState } from 'react';
 import { submitComponentEvent } from '../client/ophan/ophan';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
-import { decideTrail, dedupeTrail } from '../lib/decideTrail';
+import {
+	decideTrail,
+	decideTrailWithMasterImage,
+	dedupeTrail,
+} from '../lib/decideTrail';
 import { useApi } from '../lib/useApi';
 import { addDiscussionIds } from '../lib/useCommentCount';
 import { useIsInView } from '../lib/useIsInView';
@@ -14,6 +18,7 @@ import type { RenderingTarget } from '../types/renderingTarget';
 import type { FETrailType, TrailType } from '../types/trails';
 import { Carousel } from './Carousel.importable';
 import { Placeholder } from './Placeholder';
+import { ScrollableSmallOnwards } from './ScrollableSmallOnwards';
 
 type Props = {
 	url: string;
@@ -35,8 +40,8 @@ type OnwardsResponse = {
 	description: string;
 };
 
-const minHeight = css`
-	min-height: 300px;
+const minHeight = (design: ArticleDesign) => css`
+	min-height: ${design === ArticleDesign.Gallery ? '250px' : '300px'};
 `;
 
 const isTrailPaidContent = (trailType: FETrailType) =>
@@ -47,12 +52,13 @@ const buildTrails = (
 	trailLimit: number,
 	isAdFreeUser: boolean,
 	webURL: string,
+	withMasterImage: boolean,
 ): TrailType[] => {
 	return trails
 		.filter((trailType) => !(isTrailPaidContent(trailType) && isAdFreeUser))
 		.filter((trailType) => dedupeTrail(trailType, webURL))
 		.slice(0, trailLimit)
-		.map(decideTrail);
+		.map(withMasterImage ? decideTrailWithMasterImage : decideTrail);
 };
 
 export const FetchOnwardsData = ({
@@ -117,26 +123,38 @@ export const FetchOnwardsData = ({
 			.filter(isNonNullable),
 	);
 
-	const trails = buildTrails(data.trails, limit, isAdFreeUser, webURL);
+	const trails = ({ withMasterImage }: { withMasterImage: boolean }) =>
+		buildTrails(data.trails, limit, isAdFreeUser, webURL, withMasterImage);
 
 	return (
-		<div ref={setIsInViewRef} css={minHeight}>
-			<Carousel
-				heading={data.heading || data.displayname} // Sometimes the api returns heading as 'displayName'
-				trails={trails}
-				description={data.description}
-				onwardsSource={onwardsSource}
-				format={format}
-				leftColSize={
-					format.design === ArticleDesign.LiveBlog ||
-					format.design === ArticleDesign.DeadBlog
-						? 'wide'
-						: 'compact'
-				}
-				discussionApiUrl={discussionApiUrl}
-				serverTime={serverTime}
-				renderingTarget={renderingTarget}
-			/>
+		<div id="marjan" ref={setIsInViewRef} css={minHeight(format.design)}>
+			{format.design === ArticleDesign.Gallery ? (
+				<ScrollableSmallOnwards
+					serverTime={serverTime}
+					trails={trails({ withMasterImage: true })}
+					discussionApiUrl={discussionApiUrl}
+					heading={data.heading || data.displayname}
+					onwardsSource={onwardsSource}
+					format={format}
+				/>
+			) : (
+				<Carousel
+					heading={data.heading || data.displayname} // Sometimes the api returns heading as 'displayName'
+					trails={trails({ withMasterImage: false })}
+					description={data.description}
+					onwardsSource={onwardsSource}
+					format={format}
+					leftColSize={
+						format.design === ArticleDesign.LiveBlog ||
+						format.design === ArticleDesign.DeadBlog
+							? 'wide'
+							: 'compact'
+					}
+					discussionApiUrl={discussionApiUrl}
+					serverTime={serverTime}
+					renderingTarget={renderingTarget}
+				/>
+			)}
 		</div>
 	);
 };

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

@@ -321,6 +321,15 @@ export const OnwardsUpper = ({
 				<Section
 					fullWidth={true}
 					borderColour={palette('--article-section-border')}
+					padSides={
+						format.design === ArticleDesign.Gallery ? false : true
+					}
+					showTopBorder={
+						format.design === ArticleDesign.Gallery ? false : true
+					}
+					showSideBorders={
+						format.design === ArticleDesign.Gallery ? false : true
+					}
 				>
 					<FetchOnwardsData
 						url={url}
@@ -340,6 +349,15 @@ export const OnwardsUpper = ({
 				<Section
 					fullWidth={true}
 					borderColour={palette('--article-section-border')}
+					showTopBorder={
+						format.design === ArticleDesign.Gallery ? false : true
+					}
+					showSideBorders={
+						format.design === ArticleDesign.Gallery ? false : true
+					}
+					padSides={
+						format.design === ArticleDesign.Gallery ? false : true
+					}
 				>
 					<FetchOnwardsData
 						url={curatedDataUrl}

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -411,18 +411,18 @@ export const ScrollableCarousel = ({
 ScrollableCarousel.Item = ({
 	isStackingCarousel = false,
 	children,
-	colour = palette('--card-border-top'),
+	borderColour = palette('--card-border-top'),
 }: {
 	isStackingCarousel?: boolean;
 	children: React.ReactNode;
-	colour?: string;
+	borderColour?: string;
 }) => (
 	<li
 		css={[
 			itemStyles,
 			isStackingCarousel
-				? stackedRowLeftBorderStyles(colour)
-				: singleRowLeftBorderStyles(colour),
+				? stackedRowLeftBorderStyles(borderColour)
+				: singleRowLeftBorderStyles(borderColour),
 		]}
 	>
 		{children}

dotcom-rendering/src/components/ScrollableSmallOnwards.tsx

@@ -109,7 +109,9 @@ export const ScrollableSmallOnwards = (props: Props) => {
 							<ScrollableCarousel.Item
 								key={trail.url}
 								isStackingCarousel={true}
-								colour={palette('--onward-content-border')}
+								borderColour={palette(
+									'--onward-content-border',
+								)}
 							>
 								<Card
 									{...getDefaultCardProps(

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -16,7 +16,6 @@ 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 { FetchMoreGalleriesData } from '../components/FetchMoreGalleriesData.importable';
 import { Footer } from '../components/Footer';
@@ -30,6 +29,7 @@ import { Masthead } from '../components/Masthead/Masthead';
 import { MostViewedFooterData } from '../components/MostViewedFooterData.importable';
 import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
 import { OnwardsUpper } from '../components/OnwardsUpper.importable';
+import { ScrollableSmallOnwards } from '../components/ScrollableSmallOnwards';
 import { Section } from '../components/Section';
 import { Standfirst } from '../components/Standfirst';
 import { StickyBottomBanner } from '../components/StickyBottomBanner.importable';
@@ -212,13 +212,13 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 				show={showMerchandisingHigh}
 				display={format.display}
 			/>
-			<StoryPackage
+			<ScrollableSmallOnwards
 				serverTime={serverTime}
+				trails={gallery.storyPackage?.trails ?? []}
 				discussionApiUrl={discussionApiUrl}
 				format={format}
-				renderingTarget={renderingTarget}
-				storyPackage={gallery.storyPackage}
-				topBorder={showMerchandisingHigh}
+				heading={gallery.storyPackage?.heading ?? 'More on this story'}
+				onwardsSource={'more-on-this-story'}
 			/>
 			<Island priority="feature" defer={{ until: 'visible' }}>
 				<OnwardsUpper
@@ -655,40 +655,3 @@ const MerchandisingHigh = (props: {
 			/>
 		</Section>
 	) : null;
-
-const StoryPackage = ({
-	storyPackage,
-	format,
-	discussionApiUrl,
-	serverTime,
-	renderingTarget,
-	topBorder,
-}: {
-	storyPackage: Gallery['storyPackage'];
-	format: ArticleFormat;
-	discussionApiUrl: string;
-	serverTime?: number;
-	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}
-					serverTime={serverTime}
-					renderingTarget={renderingTarget}
-				/>
-			</Island>
-		</Section>
-	);

dotcom-rendering/src/lib/decideTrail.ts

@@ -32,3 +32,25 @@ export const decideTrail = (trail: FETrailType, index = 0): TrailType => {
 		dataLinkName: getDataLinkNameCard(format, '0', index),
 	};
 };
+
+// This is used for the new ScrollableSmallOnwards component which relies on the masterImage
+// In future work, we will need to fully migrate to this function and deprecate decideTrail
+export const decideTrailWithMasterImage = (
+	trail: FETrailType,
+	index = 0,
+): TrailType => {
+	const format: ArticleFormat = decideFormat(trail.format);
+	const image: DCRFrontImage | undefined = trail.masterImage
+		? {
+				src: trail.masterImage,
+				altText: '',
+		  }
+		: undefined;
+
+	return {
+		...trail,
+		image,
+		format,
+		dataLinkName: getDataLinkNameCard(format, '0', index),
+	};
+};

dotcom-rendering/src/storyPackage.ts

@@ -1,5 +1,5 @@
 import type { FEStoryPackage } from './frontend/feArticle';
-import { decideTrail } from './lib/decideTrail';
+import { decideTrail, decideTrailWithMasterImage } from './lib/decideTrail';
 import type { TrailType } from './types/trails';
 
 export type StoryPackage = {
@@ -9,13 +9,16 @@ export type StoryPackage = {
 
 export const parse = (
 	feStoryPackage: FEStoryPackage | undefined,
+	withMasterImage: boolean = false,
 ): StoryPackage | undefined => {
 	if (feStoryPackage === undefined) {
 		return undefined;
 	}
 
 	return {
 		heading: feStoryPackage.heading,
-		trails: feStoryPackage.trails.map(decideTrail),
+		trails: feStoryPackage.trails.map(
+			withMasterImage ? decideTrailWithMasterImage : decideTrail,
+		),
 	};
 };

dotcom-rendering/src/types/article.ts

@@ -117,7 +117,10 @@ export const enhanceArticleType = (
 		data.main,
 	)(data.mainMediaElements);
 
-	const storyPackage = parseStoryPackage(data.storyPackage);
+	const storyPackage = parseStoryPackage(
+		data.storyPackage,
+		format.design === ArticleDesign.Gallery,
+	);
 
 	if (format.design === ArticleDesign.Gallery) {
 		const design = ArticleDesign.Gallery;