Reinstate Storylines rendering by bryophyta · Pull Request #16887 · guardian/dotcom-rendering

bryophyta · 2026-10-08T11:48:58Z

What does this change?

Reinstates the rendering of 'Storylines' content on tag pages, if passed as part of the data model from Frontend, behind a 0% test. This functionality was removed previously in #15757.

I've tried to keep things as similar as possible to the original implementation, but there are a couple of changes:

For the new test we're only showing the Storylines component for larger screens. Because of this, I've removed the ability for Storylines to render pagination if it's the last container on the page, because that could lead to missing pagination for mobile breakpoints where the container isn't rendered. The drawback is that if there is only one other container on the page then the pagination will be rendered above the Storylines container. However it means that: a) pagination is always rendered if needed, and b) we don't need custom logic for pagination in the Storylines case anymore, which was tricky to reason about. If we go ahead with this as a permanent feature, we'd probably want to look at the layout more holistically.
Because the container is rendered on tag pages, I've followed the tag page pattern of using the relevant edition's timezone to determine which date a piece was published on, in the articles published since <date> footer.
We've renamed Contrasting opinions to Opinions, so I've updated the categories type (standardising the counterintuitive Find multimedia to Multimedia, too). This is a no-op as far as the rendered page goes, while making the categories type more intuitive. The one expected behaviour change is in the Ophan data-link-name, but I think this slight change is fine because this test will be discontinuous with the previous one.

Dependencies

Builds on Use 'named props' for decideSplashCardProperties #16878 (merged already)
Goes alongside a change to Frontend to send the Storylines data through to DCR: Reinstate Storylines rendering for tag pages frontend#29303
- I've tested the current DCR branch locally against Frontend main, and vice versa, and no problems arose. The Storylines data is optional in the DCR data model, so they can be merged in any order.

Why?

We are running a new test of the Storylines component.

How has this change been tested?

Deployed to CODE alongside Reinstate Storylines rendering for tag pages frontend#29303
Opted in to the ab test and checked that the Storylines component renders as expected for the appropriate tags, and tag pages render as normal for non-participating tags.
Tested locally against Frontend main; all works as expected.
Reviewed the Storybook story for this component.

Screenshots

github-actions · 2026-10-08T11:50:23Z

🚀 Image pushed to AWS ECR

Image digest: sha256:b60b4ce4e4fa2e3ad3aeb9b649815d995aa4aed41a3ee76ecc3e00d224cf10fa

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:b60b4ce4e4fa2e3ad3aeb9b649815d995aa4aed41a3ee76ecc3e00d224cf10fa"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-pf-reinstate-storylines-rendering"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-32653"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/artifacts --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

From guardian/actions-ecr.

github-actions · 2026-10-08T11:50:42Z

Deploy build 3815 of `dotcom:ab-testing` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2026-10-08T11:53:16Z

Deploy build 32653 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

Copilot

🟡 Changes recommended

Upstream contract mismatches can reject entire tag pages, and navigation, accessibility, and hidden-image loading issues remain.

6 open issues

What changed in this PR

Restores Storylines on tag pages for a new opt-in experiment, reusing existing card layouts and accepting optional Frontend data.

Changes:

Adds Storylines models, schema validation, transformations, and tests.
Restores tablet-and-larger rendering with selectors, publication dates, and feedback controls.
Registers the zero-percent experiment and threads Storylines styling through shared cards.

File	Description
dotcom-rendering/src/types/tagPage.ts	Adds optional Storylines content.
dotcom-rendering/src/types/storylinesContent.ts	Defines input and parsed models.
dotcom-rendering/src/types/front.ts	Adds supporting-story publication dates.
dotcom-rendering/src/server/handler.front.web.ts	Passes Storylines data into tag pages.
dotcom-rendering/src/paletteDeclarations.ts	Adds Storylines colours.
dotcom-rendering/src/model/enhanceTagPageStorylinesContent.ts	Converts Storylines into card groups.
dotcom-rendering/src/model/enhanceTagPageStorylinesContent.test.ts	Tests transformations and data guards.
dotcom-rendering/src/lib/formatStorylinesDateRange.ts	Formats edition-aware date context.
dotcom-rendering/src/lib/formatStorylinesDateRange.test.ts	Tests date formatting and fallbacks.
dotcom-rendering/src/layouts/TagPageLayout.tsx	Inserts the responsive Storylines island.
dotcom-rendering/src/frontend/schemas/feTagPage.json	Adds Storylines schema validation.
dotcom-rendering/src/frontend/feTagPage.ts	Accepts optional, nullable Storylines data.
dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx	Explicitly disables Storylines age behaviour.
dotcom-rendering/src/components/SvgBetaLabel.tsx	Adds the beta badge.
dotcom-rendering/src/components/SupportingKeyStoriesContent.tsx	Renders key-story links and dates.
dotcom-rendering/src/components/StorylinesSectionContent.stories.tsx	Adds a dated Storybook example.
dotcom-rendering/src/components/StorylinesSectionContent.island.tsx	Implements selection, content, and feedback.
dotcom-rendering/src/components/StorylinesSection.tsx	Adds section layout and AI disclosure.
dotcom-rendering/src/components/StaticFeatureTwo.tsx	Disables Storylines mode for existing cards.
dotcom-rendering/src/components/ScrollableFeature.island.tsx	Disables Storylines mode for existing cards.
dotcom-rendering/src/components/FlexibleGeneral.tsx	Propagates Storylines layout behaviour.
dotcom-rendering/src/components/FlexibleGeneral.stories.tsx	Sets the standard Storybook mode.
dotcom-rendering/src/components/FeatureCardCardAge.tsx	Shows older Storylines publication dates.
dotcom-rendering/src/components/FeatureCard.tsx	Passes Storylines mode to card ages.
dotcom-rendering/src/components/FeatureCard.stories.tsx	Updates shared story props.
dotcom-rendering/src/components/ExpandableAtom/Footer.tsx	Supports left-aligned Storylines feedback.
dotcom-rendering/src/components/DecideContainer.tsx	Keeps ordinary containers outside Storylines mode.
dotcom-rendering/src/components/CardHeadline.tsx	Supports Storylines sublink typography.
dotcom-rendering/src/components/Card/Card.tsx	Adds Storylines dates and supporting-content rendering.
dotcom-rendering/fixtures/manual/storylines-section.ts	Supplies representative Storylines content.
ab-testing/config/types.ts	Adds the newsroom AI team identifier.
ab-testing/config/abTests.ts	Registers the zero-percent server experiment.

_{Review effort: Balanced}

bryophyta · 2026-10-20T08:53:38Z

+								i === 0,
+							)}
+							onClick={() => handleStorylineChange(storyline.id)}
+							type="button"


Yes, there's a bit of an issue here due to needing to re-use the ScrollableCarousel which doesn't forward aria props and so can't be given a tablist role. For this PR I think it's best not to start changing the ScrollableCarousel component, so I will make a ticket to follow up and find a way to turn this into a proper aria tab component. aria-pressed is a step in the right direction so I've applied that mitigation here now.

…y js on mobile

…linesContent

…le when we aren't showing the Storylines container on mobile

…lour

alexduf

I can't pretend I've understood it in its entirety, but I think it's looking good!

alexduf · 2026-10-20T10:53:27Z

 									webPublicationDate={webPublicationDate}
 									showClock={!!showClock}
 									serverTime={serverTime}
+									isStorylines={false}


should we default this attribute to false to avoid injecting it in many components, or is it voluntary to keep it explicit?

At one point there was a problem with the way it was plumbed through this component, so I thought it worth making a mandatory prop for explicitness. I haven't done that consistently throughout (e.g. with Card) because it would have ended up changing a whole bunch of extra files, so there might be something to be said for consistency..?

bryophyta added the feature Departmental tracking: work on a new feature label Oct 8, 2026

bryophyta force-pushed the pf/reinstate-storylines-rendering branch from b49e9d6 to 92fb78b Compare October 14, 2026 13:27

bryophyta changed the base branch from pf/use-named-props-pattern-for-decideSplashCardProperties to main October 15, 2026 10:15

bryophyta force-pushed the pf/reinstate-storylines-rendering branch from 92fb78b to a0c8181 Compare October 16, 2026 11:44

bryophyta changed the title ~~Pf/reinstate storylines rendering~~ Reinstate Storylines rendering Oct 16, 2026

bryophyta added the run_chromatic Runs chromatic when label is applied label Oct 16, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Oct 16, 2026

bryophyta force-pushed the pf/reinstate-storylines-rendering branch from 1611f9e to 0ad175d Compare October 19, 2026 12:50

bryophyta requested a balanced review from Copilot October 19, 2026 12:57

Copilot started reviewing on behalf of bryophyta October 19, 2026 12:57

View session

Copilot AI reviewed Oct 19, 2026

View reviewed changes

bryophyta mentioned this pull request Oct 19, 2026

Reinstate Storylines rendering for tag pages guardian/frontend#29303

Open

3 of 8 tasks

bryophyta added 15 commits October 20, 2026 09:55

WIP: Reinstate the standalone files for storylines

6c0dd8a

Reinstate the edited files for storylines

1d74345

WIP: Render dates on Storylines cards (todo: fix multimedia layout)

8491128

Refactor: more explicit intention for logic

e1b5dc5

Only show Storylines container for tablet size and above

9dd3bff

Don't show pub date on multimedia storylines cards

cf51510

Defer rendering Storylines until visible, to avoid loading unnecessar…

7317d7e

…y js on mobile

Fix potential disappearing pagination on mobile

e6f5570

Add fixture test to document current behaviour of enhanceTagPageStory…

4c7e012

…linesContent

WIP: Harden data enhancement

7448100

Calculate date based on edition, as per groupTrailsByDates.ts

870abe1

Refactor: use current names for categories

107a5ad

Handle the fact that image.src is optional upstream

ce3443f

Pass headline through so that the card link has an accessible name

5cb0122

Load images lazily, given that they could otherwise be loaded on mobi…

876cab5

…le when we aren't showing the Storylines container on mobile

bryophyta added 3 commits October 20, 2026 09:55

Update fixtures with valid data

7085d01

Wrap carousel items in ScrollableCarousel.Item

63cafe2

Set colour on text instead of whole item, to avoid changing border co…

3f0d3c2

…lour

bryophyta force-pushed the pf/reinstate-storylines-rendering branch from dee4665 to 3f0d3c2 Compare October 20, 2026 08:56

bryophyta added the run_chromatic Runs chromatic when label is applied label Oct 20, 2026

bryophyta marked this pull request as ready for review October 20, 2026 09:10

bryophyta requested a review from a team as a code owner October 20, 2026 09:10

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Oct 20, 2026

alexduf approved these changes Oct 20, 2026

View reviewed changes

Explicit mapping for Multimedia

d7527b9

bryophyta added the run_chromatic Runs chromatic when label is applied label Oct 20, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Oct 20, 2026

Navigation Menu

Repository navigation

Reinstate Storylines rendering - #16887

Reinstate Storylines rendering#16887
bryophyta wants to merge 19 commits into
mainfrom
pf/reinstate-storylines-rendering

bryophyta commented Oct 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 8, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

bryophyta Oct 20, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexduf left a comment

Uh oh!

alexduf Oct 20, 2026

Uh oh!

bryophyta Oct 20, 2026 •

edited

Loading

Uh oh!

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

bryophyta commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

Dependencies

Why?

How has this change been tested?

Screenshots

Uh oh!

github-actions Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Image pushed to AWS ECR

Uh oh!

github-actions Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy build 3815 of dotcom:ab-testing to CODE

Uh oh!

github-actions Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy build 32653 of dotcom:rendering-all to CODE

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

bryophyta Oct 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexduf left a comment

Choose a reason for hiding this comment

Uh oh!

alexduf Oct 20, 2026

Choose a reason for hiding this comment

Uh oh!

bryophyta Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bryophyta commented Oct 8, 2026 •

edited

Loading

github-actions Bot commented Oct 8, 2026 •

edited

Loading

github-actions Bot commented Oct 8, 2026 •

edited

Loading

Deploy build 3815 of `dotcom:ab-testing` to CODE

github-actions Bot commented Oct 8, 2026 •

edited

Loading

Deploy build 32653 of `dotcom:rendering-all` to CODE

bryophyta Oct 20, 2026 •

edited

Loading