diff --git a/dotcom-rendering/src/components/MultiByline.tsx b/dotcom-rendering/src/components/MultiByline.tsx index 4b56ae8b68d..10fe5080ccd 100644 --- a/dotcom-rendering/src/components/MultiByline.tsx +++ b/dotcom-rendering/src/components/MultiByline.tsx @@ -52,7 +52,6 @@ export const MultiByline = ({ return (
    {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

  1. -

    - {multiBylineItem.title} -

    + {children}
  2. @@ -97,6 +98,51 @@ export const MultiBylineItem = ({ ); }; +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 ( +
    +
    +

    + {title} +

    + {bylineHtml ? ( +

    + ) : null} +

    + {imageOverrideUrl ?? contributors[0]?.imageUrl ? ( + {byline} + ) : null} +
    + ); +}; + const Bio = ({ html }: { html?: string }) => { if (!html) return null; const sanitizedHtml = sanitise(html, {});