From f8901e93a41a593791f3f1306a0426d2fbda206f Mon Sep 17 00:00:00 2001 From: Simon Byford Date: Mon, 16 Dec 2024 16:13:18 +0000 Subject: [PATCH] wip --- .../src/components/MultiByline.tsx | 19 +++-------- .../src/components/MultiBylines.stories.tsx | 33 +------------------ .../src/components/MultiBylines.tsx | 4 --- dotcom-rendering/src/lib/ArticleRenderer.tsx | 1 - dotcom-rendering/src/lib/renderElement.tsx | 6 ---- dotcom-rendering/src/model/enhanceBlocks.ts | 7 +++- dotcom-rendering/src/model/enhanceLists.ts | 27 ++++++++++----- dotcom-rendering/src/types/article.ts | 1 + dotcom-rendering/src/types/content.ts | 3 +- 9 files changed, 32 insertions(+), 69 deletions(-) diff --git a/dotcom-rendering/src/components/MultiByline.tsx b/dotcom-rendering/src/components/MultiByline.tsx index 49d1b8b349c..3e60a01d630 100644 --- 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 (
{children} @@ -191,20 +187,16 @@ 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: { @@ -212,9 +204,6 @@ const Byline = ({ span: ['data-contributor-rel'], }, }); - const imageUrl = - imageOverrideUrl ?? - tags.find((tag) => tag.id === contributorIds[0])?.bylineImageUrl; return (
diff --git a/dotcom-rendering/src/components/MultiBylines.stories.tsx b/dotcom-rendering/src/components/MultiBylines.stories.tsx index 26b1f8cf9d3..f72108707e5 100644 --- 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: "Richard Hillgrove Political Editor", - contributorIds: ['profile/richard-hillgrove'], -}; - -const multiBylineWithImageOverride = { - title: 'A byline with an image override url', - bio: testBioText, - body: [testTextElement], - byline: 'Guardian Contributor', - bylineHtml: "Richard Hillgrove", - 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: "Steve McQueen 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: "Richard Hillgrove", - contributorIds: ['profile/richard-hillgrove'], }, { title: 'The second byline', @@ -232,7 +202,6 @@ export const Images = { byline: 'Steve McQueen on Paul Gilroy', bylineHtml: "Steve McQueen on Paul Gilroy", - contributorIds: [], }, ], }, diff --git a/dotcom-rendering/src/components/MultiBylines.tsx b/dotcom-rendering/src/components/MultiBylines.tsx index 7fd18b7961d..0f431b14dba 100644 --- 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.body.map((element) => ( diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index 713fadfbc57..85af008e9f5 100644 --- 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 index 29e1fc39ab7..72a26bb55f7 100644 --- 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 index 16a4c95b825..c8b76a7c5d0 100644 --- 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 index da4cadfe371..9af431a68a7 100644 --- 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,6 +73,16 @@ 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 [ @@ -79,8 +90,7 @@ const constructMultiByline = 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,11 +152,11 @@ 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]; @@ -153,6 +164,6 @@ const enhance = }; 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 index e1875c1f123..e3b8b7e283b 100644 --- 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 index 13d1f8c8bc7..a6aee8b9da7 100644 --- 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; }