Tweak storylines component (like/dislike, section positioning and pagination) by Georges-GNM · Pull Request #15227 · guardian/dotcom-rendering

Georges-GNM · 2026-01-27T23:07:04Z

What does this change?

Sets the correct background colour for the storylines tabs section (same background as the rest of the container)
Moves the like/dislike footer up to the under the storyline section title (remains at the bottom on mobile under the article range text)
Adds the beta label as an SVG and tweaks the text on the side
Tightens some of the spacing around the selected storyline title text
Changes the selected storyline colour and category titles to main brand colour (Guardian blue) rather than pillar colours

Mainly, this PR adjusts the positioning on tag pages which only show a single container. Previously, in that case, the Storylines component was inserted at the top of the page; it now consistently appears in the second position.

This required some additional work to ensure pagination displays correctly. This is normally rendered as part of the last regular container via the FrontSection component, but this would cause the pagination to appear above the Storylines section, which isn’t ideal. We now check whether the Storylines component is present. If so, FrontSection is passed an undefined pagination prop and pagination is instead rendered within the Storylines component.

Screenshots

Before	After

…w the text and ensuring the component and pagination get correctly displayed after the first container even if there's only one container

github-actions · 2026-01-28T10:02:27Z

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

All deployment options

From guardian/actions-riff-raff.

github-actions · 2026-01-28T11:31:54Z

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

github-actions · 2026-01-28T11:33:26Z

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

All deployment options

From guardian/actions-riff-raff.

domlander · 2026-01-28T16:41:35Z

Would it now make sense to move the call to FrontPagination into TagPageLayout, so that you'd no longer need to call FrontPagination from FrontSection and StorylinesSection? It might help simplify the code a bit and make more sense from a composition of components standpoint. I don't think any other caller of FrontSection uses the pagination prop. I wonder how this would affect Treats. Do you know any tag pages where treats are used?

dotcom-rendering/src/components/StorylinesSection.tsx

abeddow91

This looks really good so far. I've left a couple of comments to address some consistency and readability issues.

dotcom-rendering/src/components/ExpandableAtom/Footer.tsx

dotcom-rendering/src/components/StorylinesSectionContent.importable.tsx

dotcom-rendering/src/layouts/TagPageLayout.tsx

Co-authored-by: Dominik Lander <dominik.lander@guardian.co.uk> Co-authored-by: Anna Beddow <anna.beddow@gmail.com>

Georges-GNM · 2026-01-29T17:14:47Z

Would it now make sense to move the call to FrontPagination into TagPageLayout, so that you'd no longer need to call FrontPagination from FrontSection and StorylinesSection? It might help simplify the code a bit and make more sense from a composition of components standpoint. I don't think any other caller of FrontSection uses the pagination prop. I wonder how this would affect Treats. Do you know any tag pages where treats are used?

Yeah, that is a good idea - at some point I was getting the DRY bug, but also wanted to avoid refactoring existing logic as much as possible.

I can't think of any tag pages where treats might be used - from my limited knowledge, treats can only appear on curated containers, so probably safe to do this.

Edit: So I did try this, but lifting the pagination component to TagPageLayout meant adding css logic to the layout, which to my eye brought up small spacing issues which made me nervous enough about the change to prefer avoiding that approach. Could be a worthwhile refactor for the future though!

…in the selected title, and removing the pillar colours to instead just use the main brand colour

…torylinesSectionContent to palette

domlander · 2026-02-20T08:36:47Z

dotcom-rendering/src/components/ExpandableAtom/Footer.tsx


 /// LIKE/DISLIKE FEEDBACK FOOTER
-const footerStyling = css`
+// The storylines style variable enables left alignment in the tag page storylines section


The variable has been renamed so this comment can be tweaked

domlander · 2026-02-20T08:40:30Z

dotcom-rendering/src/components/StorylinesSection.tsx

-						),
-					]}
-				>
+				<div css={[sectionHeadlineUntilLeftCol]}>


Suggested change

<div css={[sectionHeadlineUntilLeftCol]}>

<div css={sectionHeadlineUntilLeftCol}>

domlander · 2026-02-20T08:56:27Z

dotcom-rendering/src/components/StorylinesSection.tsx

+										>
+											<Footer
+												dislikeHandler={
+													dislikeHandler ??


Why are these handlers passed in as props? The component is only called in one place (StorylinesSectionContent.importable.tsx Line 200) and doesn't use these props. So the handlers will always be undefined. In fact, the following props all don't appear to be used: containerName, containerLevel, description, pageId, showDateHeader, toggleable, hasNavigationButtons, dislikeHandler, likeHandler.

domlander · 2026-02-20T08:57:47Z

dotcom-rendering/src/components/StorylinesSectionContent.importable.tsx

 	}

 	return (
 		<>


This Fragment is no longer needed.

domlander · 2026-02-20T08:59:19Z

dotcom-rendering/src/components/StorylinesSectionContent.importable.tsx

 	${textSans20};
 	font-weight: 700;
-	color: ${pillarColour};
+	color: ${palette('--storylines-titles')};


Thanks for putting these in the palette

domlander · 2026-02-20T09:00:41Z

dotcom-rendering/src/components/StorylinesSectionContent.importable.tsx

+								padding-bottom: ${space[2]}px;
+							`}
+						>
+							Storylines is an experimental feature we are showing


MUCH better

domlander · 2026-02-20T09:03:40Z

dotcom-rendering/src/components/SvgBetaLabel.tsx

+ * At the moment this is just used for the AI storylines section on tag pages.
+ * If commonly reused in the future, might benefit from being uploaded to guim.co.uk or moved to source.
+ */
+export const SvgBetaLabel = () => (


I recently learned that you can give an SVG a title to make them more accessible. Try it with a screen reader (CMD + F5 on a mac) to test. I found that a screen reader would only announce "image" for an SVG without a title.

domlander · 2026-02-20T09:07:06Z

dotcom-rendering/src/layouts/TagPageLayout.tsx

 									aspectRatio={'5:4'}
 								/>
 							</FrontSection>
+							{insertStorylinesSection &&


"Mainly, this PR adjusts the positioning on tag pages which only show a single container. Previously, in that case, the Storylines component was inserted at the top of the page; it now consistently appears in the second position."

I may be wrong, but if there are multiple containers on the page, will this show the Storylines component below the first container, and is this expected?

Tweak storylines component by moving the like/dislike buttons to belo…

7ffb01f

…w the text and ensuring the component and pagination get correctly displayed after the first container even if there's only one container

Georges-GNM force-pushed the gl/tweak-storylines branch from 317f304 to 7ffb01f Compare January 28, 2026 01:04

Georges-GNM added the maintenance Departmental tracking: maintenance work, not a fix or a feature label Jan 28, 2026

Georges-GNM force-pushed the gl/tweak-storylines branch from 23fc2e1 to 281cda4 Compare January 28, 2026 09:57

lint

d6ad637

Georges-GNM force-pushed the gl/tweak-storylines branch from 281cda4 to d6ad637 Compare January 28, 2026 09:57

simplify tag page layout logic

8c13767

Georges-GNM self-assigned this Jan 28, 2026

remove unnecessary code

b838b38

Georges-GNM added the run_chromatic Runs chromatic when label is applied label Jan 28, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 28, 2026

fix syntax

c5c88ca

Georges-GNM added the run_chromatic Runs chromatic when label is applied label Jan 28, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 28, 2026

Georges-GNM marked this pull request as ready for review January 28, 2026 11:31

Merge branch 'main' into gl/tweak-storylines

25d182b

Georges-GNM added the run_chromatic Runs chromatic when label is applied label Jan 28, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 28, 2026

domlander reviewed Jan 28, 2026

View reviewed changes

dotcom-rendering/src/components/StorylinesSection.tsx Outdated Show resolved Hide resolved

abeddow91 reviewed Jan 28, 2026

View reviewed changes

Apply suggestions from code review

7522dca

Co-authored-by: Dominik Lander <dominik.lander@guardian.co.uk> Co-authored-by: Anna Beddow <anna.beddow@gmail.com>

Further tweaks, inc: adding a beta label svg, tightening the spacing …

53c049a

…in the selected title, and removing the pillar colours to instead just use the main brand colour

Georges-GNM force-pushed the gl/tweak-storylines branch from c590455 to 53c049a Compare February 11, 2026 11:57

Georges-GNM and others added 2 commits February 18, 2026 09:20

tweak pagination logic and side text

ecfe70e

Merge branch 'main' into gl/tweak-storylines

4ac5fbf

Georges-GNM added the run_chromatic Runs chromatic when label is applied label Feb 18, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 18, 2026

rename storylinesStyle in footer to isStorylines and add colours in s…

7160fa7

…torylinesSectionContent to palette

Georges-GNM added the run_chromatic Runs chromatic when label is applied label Feb 18, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 18, 2026

domlander reviewed Feb 20, 2026

View reviewed changes

	<div css={[sectionHeadlineUntilLeftCol]}>
	<div css={sectionHeadlineUntilLeftCol}>

Conversation

Georges-GNM commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

Screenshots

Uh oh!

github-actions bot commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

github-actions bot commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

domlander commented Jan 28, 2026

Uh oh!

Uh oh!

abeddow91 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Georges-GNM commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Georges-GNM commented Jan 27, 2026 •

edited

Loading

github-actions bot commented Jan 28, 2026 •

edited

Loading

github-actions bot commented Jan 28, 2026 •

edited

Loading

Georges-GNM commented Jan 29, 2026 •

edited

Loading