From 4f1805eef89af29b8d2414edc870ecfea6ef7551 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 8 Dec 2025 14:12:00 +0000 Subject: [PATCH 1/6] Add stories with fewer cards --- .../src/components/MoreGalleries.stories.tsx | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/MoreGalleries.stories.tsx b/dotcom-rendering/src/components/MoreGalleries.stories.tsx index 7dd15afb3e7..206ec6e4879 100644 --- a/dotcom-rendering/src/components/MoreGalleries.stories.tsx +++ b/dotcom-rendering/src/components/MoreGalleries.stories.tsx @@ -12,7 +12,7 @@ export default meta; type Story = StoryObj; -export const MoreGalleries = { +export const Default = { args: { discussionApiUrl: 'https://discussion.theguardian.com/discussion-api', guardianBaseUrl: 'https://www.theguardian.com', @@ -24,3 +24,35 @@ export const MoreGalleries = { }, }, } satisfies Story; + +export const WithFourCards = { + ...Default, + args: { + ...Default.args, + trails: galleryOnwardsTrails.slice(0, 4), + }, +} satisfies Story; + +export const WithThreeCards = { + ...Default, + args: { + ...Default.args, + trails: galleryOnwardsTrails.slice(0, 3), + }, +} satisfies Story; + +export const WithTwoCards = { + ...Default, + args: { + ...Default.args, + trails: galleryOnwardsTrails.slice(0, 2), + }, +} satisfies Story; + +export const WithOneCard = { + ...Default, + args: { + ...Default.args, + trails: galleryOnwardsTrails.slice(0, 1), + }, +} satisfies Story; From 419d5939b8e2dfdf096a5d08757007281cff2e85 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 8 Dec 2025 14:13:02 +0000 Subject: [PATCH 2/6] Move accompanying components above main component, move styles above components --- .../src/components/MoreGalleries.tsx | 164 +++++++++--------- 1 file changed, 83 insertions(+), 81 deletions(-) diff --git a/dotcom-rendering/src/components/MoreGalleries.tsx b/dotcom-rendering/src/components/MoreGalleries.tsx index 34f38e71844..273c63fd34a 100644 --- a/dotcom-rendering/src/components/MoreGalleries.tsx +++ b/dotcom-rendering/src/components/MoreGalleries.tsx @@ -80,6 +80,88 @@ const cardsContainerStyles = css` } `; +const headerStyles = css` + color: ${palette('--carousel-text')}; + ${headlineBold24}; + padding-bottom: ${space[3]}px; + padding-top: ${space[1]}px; + + :hover { + text-decoration: underline; + } + + ${from.tablet} { + ${headlineBold28}; + } +`; + +const Title = ({ guardianBaseUrl }: { guardianBaseUrl: string }) => ( + +

More galleries

+ +); + +const MoreGalleriesSplashCard = ({ + defaultProps, +}: { + defaultProps: CardProps; +}) => { + const cardProps: Partial = { + headlineSizes: { + desktop: 'medium', + tablet: 'medium', + mobile: 'medium', + }, + mediaPositionOnDesktop: 'right', + mediaPositionOnMobile: 'top', + mediaSize: 'medium', + isOnwardSplash: true, + }; + + return ( +
+ +
+ ); +}; + const getDefaultCardProps = ( trail: TrailType, discussionApiUrl: string, @@ -121,6 +203,7 @@ const getDefaultCardProps = ( isOnwardContent: true, onwardsSource: 'more-galleries', }; + return defaultProps; }; @@ -192,84 +275,3 @@ export const MoreGalleries = (props: Props) => { ); }; - -const MoreGalleriesSplashCard = ({ - defaultProps, -}: { - defaultProps: CardProps; -}) => { - const cardProps: Partial = { - headlineSizes: { - desktop: 'medium', - tablet: 'medium', - mobile: 'medium', - }, - mediaPositionOnDesktop: 'right', - mediaPositionOnMobile: 'top', - mediaSize: 'medium', - isOnwardSplash: true, - }; - return ( -
- -
- ); -}; - -const Title = ({ guardianBaseUrl }: { guardianBaseUrl: string }) => ( - -

More galleries

- -); - -const headerStyles = css` - color: ${palette('--carousel-text')}; - ${headlineBold24}; - padding-bottom: ${space[3]}px; - padding-top: ${space[1]}px; - - :hover { - text-decoration: underline; - } - - ${from.tablet} { - ${headlineBold28}; - } -`; From aa24218833e9cd94a904087744fdfbffb2539698 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 8 Dec 2025 15:25:46 +0000 Subject: [PATCH 3/6] Use grid over flex for more galleries --- dotcom-rendering/src/components/MoreGalleries.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/dotcom-rendering/src/components/MoreGalleries.tsx b/dotcom-rendering/src/components/MoreGalleries.tsx index 273c63fd34a..6fe0a0c7ac1 100644 --- a/dotcom-rendering/src/components/MoreGalleries.tsx +++ b/dotcom-rendering/src/components/MoreGalleries.tsx @@ -23,9 +23,7 @@ type Props = { }; const standardCardStyles = css` - flex: 1; position: relative; - display: flex; padding: ${space[2]}px; background-color: ${palette('--onward-more-galleries-card-background')}; @@ -44,13 +42,12 @@ const standardCardStyles = css` const standardCardsListStyles = css` width: 100%; - display: flex; - flex-direction: column; + display: grid; gap: 20px; margin-bottom: ${space[6]}px; ${from.tablet} { - flex-direction: row; + grid-template-columns: repeat(4, 1fr); padding-top: ${space[2]}px; } From 55ad5e169b93dedfea30fa4e3bda2f4506c81fb2 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 8 Dec 2025 15:37:31 +0000 Subject: [PATCH 4/6] Rearrange css styles --- .../src/components/MoreGalleries.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/dotcom-rendering/src/components/MoreGalleries.tsx b/dotcom-rendering/src/components/MoreGalleries.tsx index 6fe0a0c7ac1..0da172d7807 100644 --- a/dotcom-rendering/src/components/MoreGalleries.tsx +++ b/dotcom-rendering/src/components/MoreGalleries.tsx @@ -22,24 +22,6 @@ type Props = { format: ArticleFormat; }; -const standardCardStyles = css` - position: relative; - padding: ${space[2]}px; - background-color: ${palette('--onward-more-galleries-card-background')}; - - ${from.tablet} { - :not(:first-child)::before { - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: -10px; /* shift into the gap */ - width: 1px; - background: ${palette('--onward-content-border')}; - } - } -`; - const standardCardsListStyles = css` width: 100%; display: grid; @@ -77,6 +59,24 @@ const cardsContainerStyles = css` } `; +const standardCardStyles = css` + position: relative; + padding: ${space[2]}px; + background-color: ${palette('--onward-more-galleries-card-background')}; + + ${from.tablet} { + :not(:first-child)::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: -10px; /* shift into the gap */ + width: 1px; + background: ${palette('--onward-content-border')}; + } + } +`; + const headerStyles = css` color: ${palette('--carousel-text')}; ${headlineBold24}; From 21ab3d932342bb59146124b8a787e5b3764adc68 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 8 Dec 2025 15:44:45 +0000 Subject: [PATCH 5/6] Run Chromatic on mobile and desktop --- dotcom-rendering/src/components/MoreGalleries.stories.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/dotcom-rendering/src/components/MoreGalleries.stories.tsx b/dotcom-rendering/src/components/MoreGalleries.stories.tsx index 206ec6e4879..644b5862eaf 100644 --- a/dotcom-rendering/src/components/MoreGalleries.stories.tsx +++ b/dotcom-rendering/src/components/MoreGalleries.stories.tsx @@ -1,3 +1,4 @@ +import { breakpoints } from '@guardian/source/foundations'; import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { galleryOnwardsTrails } from '../../fixtures/manual/onwardsTrails'; import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat'; @@ -23,6 +24,11 @@ export const Default = { theme: Pillar.Culture, }, }, + parameters: { + chromatic: { + viewports: [breakpoints.mobile, breakpoints.desktop], + }, + }, } satisfies Story; export const WithFourCards = { From d27cd3f2c1bdd30aa56b5a901a68c81fba5d5148 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 8 Dec 2025 16:29:22 +0000 Subject: [PATCH 6/6] Add padding for more galleries onwards content --- dotcom-rendering/src/components/Card/Card.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 7cbfbaa1f89..3764af5d87d 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -667,6 +667,13 @@ export const Card = ({ */ const getGapSizes = (): GapSizes => { if (isOnwardContent && !isGallerySecondaryOnward) { + if (isMoreGalleriesOnwardContent) { + return { + row: 'small', + column: 'small', + }; + } + return { row: 'none', column: 'none',