wip

guardian · Dec 16, 2024 · f8901e9 · f8901e9
1 parent 5556115
commit f8901e9
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 69 deletions.
diff --git a/dotcom-rendering/src/components/MultiByline.tsx b/dotcom-rendering/src/components/MultiByline.tsx
@@ -22,7 +22,6 @@ import {
 import { slugify } from '../model/enhance-H2s';
 import { palette } from '../palette';
 import type { MultiByline as MultiBylineModel } from '../types/content';
-import type { TagType } from '../types/tag';
 import { Avatar } from './Avatar';
 import { Bio } from './Bio';
 import { EndNote } from './EndNote';
@@ -162,21 +161,18 @@ const bylineImageStyles = css`
 interface Props {
 	multiByline: MultiBylineModel;
 	format: ArticleFormat;
-	tags: TagType[];
 	children: React.ReactNode;
 }
 
-export const MultiByline = ({ multiByline, format, tags, children }: Props) => {
+export const MultiByline = ({ multiByline, format, children }: Props) => {
 	return (
 		<div css={multiBylineStyles} data-spacefinder-role="nested">
 			<Byline
 				title={multiByline.title}
 				byline={multiByline.byline}
 				bylineHtml={multiByline.bylineHtml}
-				contributorIds={multiByline.contributorIds}
-				imageOverrideUrl={multiByline.imageOverrideUrl}
+				imageUrl={multiByline.imageUrl}
 				format={format}
-				tags={tags}
 			/>
 			<Bio html={multiByline.bio} />
 			{children}
@@ -191,30 +187,23 @@ type BylineProps = {
 	title: string;
 	bylineHtml: string;
 	byline: string;
-	imageOverrideUrl?: string;
-	contributorIds: string[];
+	imageUrl?: string;
 	format: ArticleFormat;
-	tags: TagType[];
 };
 
 const Byline = ({
 	title,
 	bylineHtml,
 	byline,
-	imageOverrideUrl,
-	contributorIds,
+	imageUrl,
 	format,
-	tags,
 }: BylineProps) => {
 	const sanitizedHtml = sanitise(bylineHtml, {
 		allowedAttributes: {
 			...defaults.allowedAttributes,
 			span: ['data-contributor-rel'],
 		},
 	});
-	const imageUrl =
-		imageOverrideUrl ??
-		tags.find((tag) => tag.id === contributorIds[0])?.bylineImageUrl;
 
 	return (
 		<div css={bylineWrapperStyles}>

diff --git a/dotcom-rendering/src/components/MultiBylines.stories.tsx b/dotcom-rendering/src/components/MultiBylines.stories.tsx
@@ -44,17 +44,7 @@ const multiBylineWithLongHeader = {
 	byline: 'Richard Hillgrove Political Editor',
 	bylineHtml:
 		"<a href='/profile/richard-hillgrove'>Richard Hillgrove</a> Political Editor",
-	contributorIds: ['profile/richard-hillgrove'],
-};
-
-const multiBylineWithImageOverride = {
-	title: 'A byline with an image override url',
-	bio: testBioText,
-	body: [testTextElement],
-	byline: 'Guardian Contributor',
-	bylineHtml: "<a href='/profile/richard-hillgrove'>Richard Hillgrove</a>",
-	contributorIds: ['profile/richard-hillgrove'],
-	imageOverrideUrl:
+	imageUrl:
 		'https://i.guim.co.uk/img/uploads/2024/09/17/Maurice_Casey.png?width=180&dpr=1&s=none',
 };
 
@@ -65,25 +55,14 @@ const multiBylineWithNoContributorLink = {
 	byline: 'Steve McQueen on Paul Gilroy',
 	bylineHtml:
 		"<span data-contributor-rel='author'>Steve McQueen</span> on Paul Gilroy",
-	contributorIds: [],
 };
 
 export const ThemeVariations = {
 	args: {
 		multiBylines: [
 			multiBylineWithLongHeader,
-			multiBylineWithImageOverride,
 			multiBylineWithNoContributorLink,
 		],
-		tags: [
-			{
-				title: 'Richard Hillgrove',
-				id: 'profile/richard-hillgrove',
-				type: 'contributor',
-				bylineImageUrl:
-					'https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2011/5/24/1306249890287/Richard-Hillgrove.jpg?width=100&dpr=2&s=none',
-			},
-		],
 		isLastElement: true,
 		/**
 		 * This will be replaced by the `formats` parameter, but it's
@@ -142,14 +121,6 @@ export const DesignVariations = {
 	},
 } satisfies Story;
 
-export const DesignVariationsWithImageOverride = {
-	args: {
-		...ThemeVariations.args,
-		multiBylines: [multiBylineWithImageOverride],
-	},
-	parameters: DesignVariations.parameters,
-} satisfies Story;
-
 export const DesignVariationsWithNoContributorLink = {
 	args: {
 		...ThemeVariations.args,
@@ -217,7 +188,6 @@ export const Images = {
 				byline: 'Richard Hillgrove Guardian Contributor',
 				bylineHtml:
 					"<a href='/profile/richard-hillgrove'>Richard Hillgrove</a>",
-				contributorIds: ['profile/richard-hillgrove'],
 			},
 			{
 				title: 'The second byline',
@@ -232,7 +202,6 @@ export const Images = {
 				byline: 'Steve McQueen on Paul Gilroy',
 				bylineHtml:
 					"<span data-contributor-rel='author'>Steve McQueen</span> on Paul Gilroy",
-				contributorIds: [],
 			},
 		],
 	},

diff --git a/dotcom-rendering/src/components/MultiBylines.tsx b/dotcom-rendering/src/components/MultiBylines.tsx
@@ -8,7 +8,6 @@ import type {
 	MultiByline as MultiBylineModel,
 	StarRating,
 } from '../types/content';
-import type { TagType } from '../types/tag';
 import { MultiByline } from './MultiByline';
 
 interface MultiBylineProps {
@@ -25,7 +24,6 @@ interface MultiBylineProps {
 	starRating?: StarRating;
 	multiBylines: MultiBylineModel[];
 	RenderArticleElement: ArticleElementRenderer;
-	tags: TagType[];
 	/**
 	 * Whether this is the last element in the article. If true, no separator will be rendered.
 	 */
@@ -52,7 +50,6 @@ export const MultiBylines = ({
 	hideCaption,
 	starRating,
 	RenderArticleElement,
-	tags,
 	isLastElement,
 }: MultiBylineProps) => {
 	return (
@@ -61,7 +58,6 @@ export const MultiBylines = ({
 				<MultiByline
 					multiByline={multiByline}
 					format={format}
-					tags={tags}
 					key={multiByline.title}
 				>
 					{multiByline.body.map((element) => (

diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx
@@ -83,7 +83,6 @@ export const ArticleRenderer = ({
 				editionId={editionId}
 				totalElements={length}
 				isSectionedMiniProfilesArticle={isSectionedMiniProfilesArticle}
-				tags={tags}
 			/>
 		);
 	});

diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
@@ -67,7 +67,6 @@ import {
 } from '../layouts/lib/interactiveLegacyStyling';
 import type { ServerSideTests, Switches } from '../types/config';
 import type { FEElement, RoleType, StarRating } from '../types/content';
-import type { TagType } from '../types/tag';
 import { ArticleDesign, type ArticleFormat } from './articleFormat';
 import type { EditionId } from './edition';
 import { getSharingUrls } from './sharing-urls';
@@ -94,7 +93,6 @@ type Props = {
 	totalElements?: number;
 	isListElement?: boolean;
 	isSectionedMiniProfilesArticle?: boolean;
-	tags?: TagType[];
 };
 
 // updateRole modifies the role of an element in a way appropriate for most
@@ -155,7 +153,6 @@ export const renderElement = ({
 	totalElements = 0,
 	isListElement = false,
 	isSectionedMiniProfilesArticle = false,
-	tags = [],
 }: Props) => {
 	const isBlog =
 		format.design === ArticleDesign.LiveBlog ||
@@ -509,7 +506,6 @@ export const renderElement = ({
 					switches={switches}
 					editionId={editionId}
 					RenderArticleElement={RenderArticleElement}
-					tags={tags}
 					isLastElement={index === totalElements - 1}
 				/>
 			);
@@ -914,7 +910,6 @@ export const RenderArticleElement = ({
 	totalElements,
 	isListElement,
 	isSectionedMiniProfilesArticle,
-	tags = [],
 }: Props) => {
 	const withUpdatedRole = updateRole(element, format);
 
@@ -940,7 +935,6 @@ export const RenderArticleElement = ({
 		totalElements,
 		isListElement,
 		isSectionedMiniProfilesArticle,
-		tags,
 	});
 
 	const needsFigure = !bareElements.has(element._type);

diff --git a/dotcom-rendering/src/model/enhanceBlocks.ts b/dotcom-rendering/src/model/enhanceBlocks.ts
@@ -8,6 +8,7 @@ import type {
 	Newsletter,
 } from '../types/content';
 import type { RenderingTarget } from '../types/renderingTarget';
+import type { TagType } from '../types/tag';
 import { enhanceAdPlaceholders } from './enhance-ad-placeholders';
 import { enhanceBlockquotes } from './enhance-blockquotes';
 import { enhanceDisclaimer } from './enhance-disclaimer';
@@ -30,6 +31,7 @@ type Options = {
 	imagesForLightbox: ImageForLightbox[];
 	hasAffiliateLinksDisclaimer: boolean;
 	audioArticleImage?: ImageBlockElement;
+	tags?: TagType[];
 };
 
 const enhanceNewsletterSignup =
@@ -55,7 +57,10 @@ export const enhanceElements =
 	(format: ArticleFormat, blockId: string, options: Options) =>
 	(elements: FEElement[]): FEElement[] =>
 		[
-			enhanceLists(enhanceElements(format, blockId, options)),
+			enhanceLists(
+				enhanceElements(format, blockId, options),
+				options.tags,
+			),
 			enhanceTimeline(enhanceElements(format, blockId, options)),
 			enhanceDividers,
 			enhanceH2s,

diff --git a/dotcom-rendering/src/model/enhanceLists.ts b/dotcom-rendering/src/model/enhanceLists.ts
@@ -1,5 +1,6 @@
 import { isUndefined } from '@guardian/libs';
 import type { FEElement, ListBlockElement, ListItem } from '../types/content';
+import type { TagType } from '../types/tag';
 
 type ElementsEnhancer = (elements: FEElement[]) => FEElement[];
 
@@ -61,7 +62,7 @@ const constructMiniProfile =
 	};
 
 const constructMultiByline =
-	(enhanceElements: ElementsEnhancer) =>
+	(enhanceElements: ElementsEnhancer, tags?: TagType[]) =>
 	({
 		title,
 		elements,
@@ -72,15 +73,24 @@ const constructMultiByline =
 		byline,
 		bylineHtml,
 	}: ListItem) => {
+		const contributorIdsArray = contributorIds ?? [];
+
+		let imageUrl;
+		if (imageOverrideUrl) {
+			imageUrl = imageOverrideUrl;
+		} else if (tags) {
+			imageUrl = tags.find((tag) => tag.id === contributorIdsArray[0])
+				?.bylineImageUrl;
+		}
+
 		// if the element is missing its title for any reason, we will skip it
 		if (!isUndefined(title) && title !== '') {
 			return [
 				{
 					title,
 					bio,
 					endNote,
-					imageOverrideUrl,
-					contributorIds: contributorIds ?? [],
+					imageUrl,
 					byline: byline ?? '',
 					bylineHtml: bylineHtml ?? '',
 					body: enhanceElements(elements),
@@ -93,6 +103,7 @@ const constructMultiByline =
 const enhanceListBlockElement = (
 	element: ListBlockElement,
 	elementsEnhancer: ElementsEnhancer,
+	tags?: TagType[],
 ): FEElement[] => {
 	switch (element.listElementType) {
 		case 'KeyTakeaways':
@@ -127,7 +138,7 @@ const enhanceListBlockElement = (
 				{
 					_type: 'model.dotcomrendering.pageElements.MultiBylinesBlockElement',
 					multiBylines: element.items.flatMap(
-						constructMultiByline(elementsEnhancer),
+						constructMultiByline(elementsEnhancer, tags),
 					),
 				},
 			];
@@ -141,18 +152,18 @@ const enhanceListBlockElement = (
 };
 
 const enhance =
-	(elementsEnhancer: ElementsEnhancer) =>
+	(elementsEnhancer: ElementsEnhancer, tags?: TagType[]) =>
 	(element: FEElement): FEElement[] => {
 		switch (element._type) {
 			case 'model.dotcomrendering.pageElements.ListBlockElement': {
-				return enhanceListBlockElement(element, elementsEnhancer);
+				return enhanceListBlockElement(element, elementsEnhancer, tags);
 			}
 			default:
 				return [element];
 		}
 	};
 
 export const enhanceLists =
-	(elementsEnhancer: ElementsEnhancer) =>
+	(elementsEnhancer: ElementsEnhancer, tags?: TagType[]) =>
 	(elements: FEElement[]): FEElement[] =>
-		elements.flatMap(enhance(elementsEnhancer));
+		elements.flatMap(enhance(elementsEnhancer, tags));
diff --git a/dotcom-rendering/src/types/article.ts b/dotcom-rendering/src/types/article.ts
@@ -46,6 +46,7 @@ export const enhanceArticleType = (
 		imagesForLightbox,
 		hasAffiliateLinksDisclaimer: !!data.affiliateLinksDisclaimer,
 		audioArticleImage: data.audioArticleImage,
+		tags: data.tags,
 	});
 
 	const mainMediaElements = enhanceMainMedia(

diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
@@ -355,8 +355,7 @@ export interface MultiByline {
 	body: FEElement[];
 	bio?: string;
 	endNote?: string;
-	imageOverrideUrl?: string;
-	contributorIds: string[];
+	imageUrl?: string;
 	byline: string;
 	bylineHtml: string;
 }