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 45498 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

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

Deploy build 21258 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.

JamieB-gu · 2025-10-01T15:47:05Z

dotcom-rendering/src/paletteDeclarations.ts

 	},
+	'--onward-background': {
+		light: () => sourcePalette.neutral[100],
+		dark: () => sourcePalette.neutral[0],


Is this definitely neutral.0? The rest of the article, including the other onward content, uses neutral.10 in dark mode.

The background colour for dark mode seems to be background: var(--Neutral-neutral-neutral-0, #000); in figma.
but the article itself has neutral.10 in the middle part and as you said the other onward content also use neutral.10.
I'll change it to neutral.10 for now but will raise this with the designer to confirm.

JamieB-gu · 2025-10-01T15:58:53Z

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

+		discussionApiUrl:
+			'https://discussion.code.dev-theguardian.com/discussion-api',
+		heading: 'More galleries',
+		url: 'http://localhost:9000/more-galleries',


Should this be pointing to localhost? It looks like this is just used for the heading link, in which case it's probably fine to use the PROD URL, which on frontend is https://www.theguardian.com/inpictures/all I think?

JamieB-gu · 2025-10-01T16:02:34Z

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

+		onwardsSource: 'more-galleries',
+		trails: [
+			{
+				url: 'http://localhost:9000/environment/gallery/2025/aug/22/week-in-wildlife-a-clumsy-fox-swinging-orangutang-and-rescued-jaguarundi-cub',


Similar point on localhost for each of these trail URLs. If these are just used for links it's probably fine to use the PROD URL. That way people viewing this don't need to be running frontend locally to follow them.

JamieB-gu · 2025-10-01T16:04:47Z

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

+				kickerText: 'Politics', // Get data for this
+				mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this


Are the TODOs in this file still to do?

Good spot, the todos have already been dealt with 👍

JamieB-gu · 2025-10-01T16:17:39Z

dotcom-rendering/src/components/MoreGalleries.tsx

+	heading: string;
+	onwardsSource: OnwardsSource;


Is it possible for this to have a heading that isn't "More galleries" or an onwardsSource that isn't "more-galleries"? If not we can probably hardcode these and remove the props?

JamieB-gu · 2025-10-01T16:20:06Z

dotcom-rendering/src/components/MoreGalleries.tsx

+	discussionApiUrl: string;
+	heading: string;
+	onwardsSource: OnwardsSource;
+	url?: string;


Small thing, but perhaps this could be called something like headingLink? At first glance it may not be obvious what a url would be for in this component?

JamieB-gu · 2025-10-01T16:55:38Z

dotcom-rendering/src/components/MoreGalleries.tsx

+	&::first-letter {
+		text-transform: capitalize;
+	}


If we hardcode to "More galleries", as mentioned above, we can probably remove this?

JamieB-gu · 2025-10-01T17:08:08Z

dotcom-rendering/src/components/MoreGalleries.tsx

+								{Card({
+									...getDefaultCardProps(
+										trail,
+										props.absoluteServerTimes,
+										props.discussionApiUrl,
+									),
+									mediaSize: 'medium',
+								})}


Although React components are defined as functions, it's best to use createElement (i.e. JSX) rather than call them directly¹.

Suggested change

{Card({

...getDefaultCardProps(

trail,

props.absoluteServerTimes,

props.discussionApiUrl,

),

mediaSize: 'medium',

})}

<Card

{...getDefaultCardProps(

trail,

props.absoluteServerTimes,

props.discussionApiUrl,

)}

mediaSize="medium"

/>

Footnotes

https://react.dev/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly ↩

JamieB-gu · 2025-10-01T17:14:06Z

dotcom-rendering/src/components/MoreGalleries.tsx

+				padding: ${space[2]}px;
+			`}
+		>
+			{Card({ ...defaultProps, ...cardProps })}


As mentioned above, it's best to use createElement (JSX) to render React components:

Suggested change

{Card({ ...defaultProps, ...cardProps })}

<Card {...defaultProps} {...cardProps} />

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

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

github-actions bot removed 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

		kickerText: 'Politics', // Get data for this
		mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this

	{Card({ ...defaultProps, ...cardProps })}
	<Card {...defaultProps} {...cardProps} />

Add MoreGalleries component with a story #14538

Are you sure you want to change the base?

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!

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!

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!

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!

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!

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!

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

Footnotes

Uh oh!

Choose a reason for hiding this comment

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!

marjisound commented Sep 22, 2025 •

edited

Loading

github-actions bot commented Sep 22, 2025 •

edited

Loading

github-actions bot commented Sep 22, 2025 •

edited

Loading

marjisound Sep 22, 2025 •

edited

Loading

marjisound Oct 1, 2025 •

edited

Loading

marjisound Oct 3, 2025 •

edited

Loading

abeddow91 Oct 2, 2025 •

edited

Loading

marjisound Oct 3, 2025 •

edited

Loading