Show a byline in the multi-byline element

guardian · Sep 25, 2024 · d6be124 · d6be124
1 parent 9a49795
commit d6be124
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 7 deletions.
diff --git a/dotcom-rendering/src/components/MultiByline.tsx b/dotcom-rendering/src/components/MultiByline.tsx
@@ -52,7 +52,6 @@ export const MultiByline = ({
 	return (
 		<ol data-ignore="global-ol-styling">
 			{multiBylineItems.map((multiBylineItem, index) => (
-				// eslint-disable-next-line react/no-array-index-key -- Title should usually be identical, but in case it isn't, also use array index
 				<MultiBylineItemComponent
 					multiBylineItem={multiBylineItem}
 					format={format}

diff --git a/dotcom-rendering/src/components/MultiBylineItem.tsx b/dotcom-rendering/src/components/MultiBylineItem.tsx
@@ -84,19 +84,65 @@ export const MultiBylineItem = ({
 		<>
 			<li css={multiBylineItemStyles} data-spacefinder-role="nested">
 				<hr css={headingLineStyles} />
-				<h3
-					id={slugify(multiBylineItem.title)}
-					css={[subheadingStyles(format), headingMarginStyle]}
-				>
-					{multiBylineItem.title}
-				</h3>
+				<Byline
+					title={multiBylineItem.title}
+					byline={multiBylineItem.byline ?? ''}
+					bylineHtml={multiBylineItem.bylineHtml ?? ''}
+					contributors={multiBylineItem.contributors ?? []}
+					format={format}
+				/>
 				<Bio html={multiBylineItem.bio} />
 				{children}
 			</li>
 		</>
 	);
 };
 
+type BylineProps = {
+	title: string;
+	bylineHtml: string;
+	byline: string;
+	imageOverrideUrl?: string;
+	contributors: BlockContributor[];
+	format: ArticleFormat;
+};
+
+const Byline = ({
+	title,
+	bylineHtml,
+	byline,
+	imageOverrideUrl,
+	contributors,
+	format,
+}: BylineProps) => {
+	const sanitizedHtml = sanitise(bylineHtml, {});
+
+	return (
+		<div>
+			<div>
+				<h3
+					id={slugify(title)}
+					css={[subheadingStyles(format), headingMarginStyle]}
+				>
+					{title}
+				</h3>
+				{bylineHtml ? (
+					<h3
+						css={[subheadingStyles(format), headingMarginStyle]}
+						dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
+					/>
+				) : null}
+			</div>
+			{imageOverrideUrl ?? contributors[0]?.imageUrl ? (
+				<img
+					src={imageOverrideUrl ?? contributors[0]?.imageUrl}
+					alt={byline}
+				></img>
+			) : null}
+		</div>
+	);
+};
+
 const Bio = ({ html }: { html?: string }) => {
 	if (!html) return null;
 	const sanitizedHtml = sanitise(html, {});