Skip to content

WS-1985: Add a byline Live Page posts#13803

Open
alex-magana wants to merge 85 commits intolatestfrom
WS-1985-render-byline-live-page-post
Open

WS-1985: Add a byline Live Page posts#13803
alex-magana wants to merge 85 commits intolatestfrom
WS-1985-render-byline-live-page-post

Conversation

@alex-magana
Copy link
Copy Markdown
Contributor

@alex-magana alex-magana commented Mar 17, 2026

Resolves JIRA: WS-1985

Summary

Add a byline to Live Page posts

Code changes

  • Introduces separate contributor components for the Live Page, Article Page and Media Article Page.
  • Add logic to extract byline data from the Live Page post header block.
  • Add a byline to a Live Page post where provided.

NOTES

  • yarn test:dependencies fails when the import format below is used hence the need for the
    // eslint-disable-next-line import/no-relative-packages exclusions.
simorgh-nextjs/pages/[service]/live/[id]/Post/types
simorgh-nextjs/pages/[service]/live/[id]/Post/fixture

Testing

  1. Visit http://localhost.bbc.com:7081/afrique/live/c7gk1vjglxn1t?renderer_env=test
  2. The Live Page should render byline on posts.

Useful Links

Comment on lines +19 to +28
case ARTICLE_PAGE:
return (
<ArticleContributors
contributorValues={contributorValues}
isSingleContributor={isSingleContributor}
/>
);
case MEDIA_ARTICLE_PAGE:
return (
<ArticleContributors
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As they are returning the same thing, should we combine the Article and Media Article cases here? Or have the response as the default?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good spot @emilysaffron
I've updated this to combine the Article Page & Media Article Page
scenarios as seen here.
The default scenario returns null to ensure we only render supported scenarios.

<AuthorName
author={author}
authorName={authorName}
isSingleContributor
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs to be isSingleContributor={isSingleContributor}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isSingleContributor and isRtl are now being set correctly.

</li>
{jobRole && (
<li css={BylineCss.contributorTextWrapper}>
<AuthorRole jobRole={jobRole} role={role} isSingleContributor />
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be isSingleContributor={isSingleContributor}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isSingleContributor and isRtl are now being set correctly.

<AuthorLocation
location={location}
reportingFrom={reportingFrom}
isSingleContributor
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And this isSingleContributor={isSingleContributor}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isSingleContributor and isRtl are now being set correctly.


const Contributors = ({ contributorValues, isSingleContributor, pageType }) => {
switch (pageType) {
case ARTICLE_PAGE || MEDIA_ARTICLE_PAGE:
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see in a prior comment that was added, the case for ARTICLE_PAGE and MEDIA_ARTICLE_PAGE are the same, but currently this case statement will always go with ARTICLE_PAGE

| | returns the first truthy value, and since ARTICLE_PAGE is a string 'article' we will never reach MEDIA_ARTICLE_PAGE?

a pattern like this(used in the bylineExtractor):

case ARTICLE_PAGE:
case MEDIA_ARTICLE_PAGE:
case MEDIA_ASSET_PAGE:
case PHOTO_GALLERY_PAGE:
case STORY_PAGE:
  return articlePageBylineExtractor(...);

would work well here!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching this @Louis-Matsika. I've applied the
suggested approach here.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no worries!

@Louis-Matsika Louis-Matsika requested a review from a team as a code owner March 30, 2026 15:47
@alex-magana alex-magana force-pushed the WS-1985-render-byline-live-page-post branch from c508e15 to 7a42861 Compare March 30, 2026 16:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants