Add MoreGalleries component with a story #14538

marjisound · 2025-09-22T10:19:24Z

What does this change?

This PR creates a new MoreGalleries component which will be used for the more galleries onward content section on gallery articles. For this component we were given new design that is different from how this section looks currently in production.

This new component is not currently used. The usage will be implemented in an upcoming PR.

Screenshots

Desktop light	Desktop dark

Mobile light	mobile dark

This PR fixes #14310

github-actions · 2025-09-22T10:39:33Z

Deploy build 45526 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-09-22T10:42:49Z

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

All deployment options

From guardian/actions-riff-raff.

marjisound · 2025-09-22T10:52:16Z

dotcom-rendering/src/components/Card/components/TrailText.tsx

 	trailTextColour?: string;
 	/** Controls visibility of trail text on various breakpoints */
-	hideUntil?: 'tablet' | 'desktop';
+	hideUntil?: 'tablet' | 'desktop' | 'never';


Why did I need a never value?
The hideUntil can be undefined. When it's undefined, the component will always add the trail text, but in css display is set to none for viewport below tablet.

When hideUntil is not undefined, the trail text will be wrapped within a Hide element and become hidden until the viewport that's given by the hideUntil. However, the css display: none; is also set for until.tablet in this case.

So no matter what, we always have display: none; on trail text for viewport below tablet. But in our case for more-galleries onward container, we want to always display trail text within the flexSplash card for all viewports.

That's why I added the never value in order to always display the trail for all viewports.

@arelra and @abeddow91 what do you think about this change?

I wonder if it might be simpler to introduce an optional prop such as:
hide: boolean which defaults to true

This then controls whether the trail text applies the <Hide> component or not.

In existing usages of TrailText this will default to true and apply <Hide> but for the galleries onwards container we could pass hide=false which would mean the hiding behaviour would not apply ?

Great idea, I instead called the new param as hideOnSmallBreakpoints to make it clearer what it's doing, is that OK?

Having thought about this a little more I'm not sure I understand why we don't use the absence or presence of hideUntil to control whether hiding is activated?

Thanks @arelra for your ideas and for pairing with me to do a proper refactoring on TrailText component.
The changes are in this commit ac6dc74 and there's also this PR that we made in order to cover the cases for hideUntil #14586

github-actions · 2025-09-22T10:52:47Z

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.

Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com>

DanielCliftonGuardian

This looks good. Just one suggestion.

dotcom-rendering/src/components/MoreGalleries.tsx

dotcom-rendering/src/components/Card/Card.tsx

…points

Instead always pass hideUntil when hiding is required and pass undefined when hiding is not required (trail text needs to be visible for all breakpoints) Co-authored-by: Ravi <7014230+arelra@users.noreply.github.com>

arelra

Great work! ✨

JamieB-gu

Looks good! Some questions and suggestions.

dotcom-rendering/src/paletteDeclarations.ts

dotcom-rendering/src/components/MoreGalleries.stories.tsx

dotcom-rendering/src/components/MoreGalleries.tsx

abeddow91 · 2025-10-02T07:48:58Z

dotcom-rendering/src/components/Card/Card.tsx

 	uniqueId?: string;
-	/** The Splash card in a flexible container gets a different visual treatment to other cards */
+	/** The Splash card in a flexible or onward container gets a different visual treatment to other cards */
 	isFlexSplash?: boolean;


I wonder if we should rename this field or use a seperate one here. I'm not sure we should be coupling a flexible splash card with an onwards container splash, unless they are truely the same card. If they are then perhaps renaming to something more generic (ie removing the flexible part would be preferable).

Does the onwards "splash" card share the same characteristics as a flexible splash card?

Thanks for pointing this out @abeddow91
You are right, it seems the characteristics of a flexible splash card is different from an onward splash card.
The isFlexSplash is primarily used to deal with positioning the sub links. But what's important in an onward splash card is that it needs to have the trail text while the non-splash cards do not have trail text.

I created a new prop isOnwardSplash for this in here 73cd910

gu-prout · 2025-10-06T13:47:08Z

Overdue on PROD (merged by @marjisound 47 minutes and 22 seconds ago) What's gone wrong?

gu-prout · 2025-10-06T14:18:55Z

Seen on PROD (merged by @marjisound 1 hour, 19 minutes and 8 seconds ago) Please check your changes!

github-actions bot added the dotcom-rendering label Sep 22, 2025

marjisound added the run_chromatic Runs chromatic when label is applied label Sep 22, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 22, 2025

marjisound force-pushed the add-more-galleries-component branch from 85206ec to 3755b1f Compare September 22, 2025 10:37

marjisound added the run_chromatic Runs chromatic when label is applied label Sep 22, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 22, 2025

marjisound commented Sep 22, 2025

View reviewed changes

marjisound marked this pull request as ready for review September 22, 2025 10:52

marjisound added this to the Decommission AR milestone Sep 22, 2025

marjisound requested review from a team and abeddow91 September 22, 2025 10:58

Add MoreGalleries component with a story

367a603

Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com>

marjisound force-pushed the add-more-galleries-component branch from 3755b1f to 367a603 Compare September 22, 2025 11:01

DanielCliftonGuardian reviewed Sep 24, 2025

View reviewed changes

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

dotcom-rendering/src/components/MoreGalleries.tsx Show resolved Hide resolved

DanielCliftonGuardian reviewed Sep 24, 2025

View reviewed changes

dotcom-rendering/src/components/Card/Card.tsx Show resolved Hide resolved

Merge branch 'main' into add-more-galleries-component

550e771

marjisound mentioned this pull request Sep 24, 2025

Add more galleries container #14472

Closed

add new prop to TrailText to ensure it is not hidden on smaller break…

7d92d1b

…points

marjisound added the run_chromatic Runs chromatic when label is applied label Sep 26, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 26, 2025

replace px with space

044a757

marjisound added the run_chromatic Runs chromatic when label is applied label Sep 29, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 29, 2025

some cleaning up

356ebb6

marjisound added the run_chromatic Runs chromatic when label is applied label Sep 30, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 30, 2025

JamieB-gu added the run_chromatic Runs chromatic when label is applied label Sep 30, 2025

Merge branch 'main' into add-more-galleries-component

35dba38

marjisound added the run_chromatic Runs chromatic when label is applied label Sep 30, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 30, 2025

marjisound and others added 2 commits September 30, 2025 16:43

Merge branch 'main' into add-more-galleries-component

0b65da0

marjisound added the run_chromatic Runs chromatic when label is applied label Sep 30, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 30, 2025

arelra approved these changes Oct 1, 2025

View reviewed changes

arelra added the run_chromatic Runs chromatic when label is applied label Oct 1, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 1, 2025

JamieB-gu reviewed Oct 1, 2025

View reviewed changes

abeddow91 reviewed Oct 2, 2025

View reviewed changes

marjisound added 3 commits October 3, 2025 10:25

Address review comments

ce987db

decoupling a flexible splash card with an onward container splash card

73cd910

Merge branch 'main' into add-more-galleries-component

2365930

marjisound added the run_chromatic Runs chromatic when label is applied label Oct 3, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 3, 2025

Merge branch 'main' into add-more-galleries-component

d0d6f40

marjisound added the run_chromatic Runs chromatic when label is applied label Oct 6, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 6, 2025

JamieB-gu approved these changes Oct 6, 2025

View reviewed changes

marjisound merged commit a9a8403 into main Oct 6, 2025
31 checks passed

marjisound deleted the add-more-galleries-component branch October 6, 2025 12:59

gu-prout bot added Pending-on-PROD Overdue-on-PROD and removed Pending-on-PROD labels Oct 6, 2025

gu-prout bot added Seen-on-PROD and removed Overdue-on-PROD labels Oct 6, 2025

Add MoreGalleries component with a story #14538

Add MoreGalleries component with a story #14538

Uh oh!

Conversation

marjisound commented Sep 22, 2025 • 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 Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy build 45526 of Mobile::mobile-apps-rendering to CODE

Uh oh!

github-actions bot commented Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy build 21286 of dotcom:rendering-all to CODE

Uh oh!

marjisound Sep 22, 2025 • 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!

arelra Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

marjisound Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

arelra Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

marjisound Oct 1, 2025 • 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!

github-actions bot commented Sep 22, 2025

Uh oh!

DanielCliftonGuardian left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

arelra left a comment

Choose a reason for hiding this comment

Uh oh!

JamieB-gu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

abeddow91 Oct 2, 2025 • 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!

marjisound Oct 3, 2025 • 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!

gu-prout bot commented Oct 6, 2025

Uh oh!

gu-prout bot commented Oct 6, 2025

Uh oh!

Uh oh!

marjisound commented Sep 22, 2025 •

edited

Loading

github-actions bot commented Sep 22, 2025 •

edited

Loading

Deploy build 45526 of `Mobile::mobile-apps-rendering` to CODE

github-actions bot commented Sep 22, 2025 •

edited

Loading

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

marjisound Sep 22, 2025 •

edited

Loading

marjisound Oct 1, 2025 •

edited

Loading

abeddow91 Oct 2, 2025 •

edited

Loading

marjisound Oct 3, 2025 •

edited

Loading