Skip to content

More Galleries: fixed card sizes #14981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
domlander merged 6 commits into from
Dec 12, 2025
Merged

More Galleries: fixed card sizes #14981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
66fd1fa
Add stories with fewer cards
domlander Dec 8, 2025
b2bb896
Move accompanying components above main component, move styles above …
domlander Dec 8, 2025
9901a9e
Use grid over flex for more galleries
domlander Dec 8, 2025
591327a
Rearrange css styles
domlander Dec 8, 2025
6c4fc12
Run Chromatic on mobile and desktop
domlander Dec 8, 2025
4b9c1aa
Reinstate flex display for card - needed for card to take up maximum …
domlander Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 39 additions & 1 deletion dotcom-rendering/src/components/MoreGalleries.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -12,7 +13,7 @@ export default meta;

type Story = StoryObj<typeof meta>;

export const MoreGalleries = {
export const Default = {
args: {
discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
guardianBaseUrl: 'https://www.theguardian.com',
Expand All @@ -23,4 +24,41 @@ export const MoreGalleries = {
theme: Pillar.Culture,
},
},
parameters: {
chromatic: {
viewports: [breakpoints.mobile, breakpoints.desktop],
},
},
Comment on lines +27 to +31
Copy link
Contributor

@JamieB-gu JamieB-gu Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a heads up, the viewports parameter is deprecated1 in favour of the modes API. Here are some docs on our use of modes in DCAR.

Footnotes

  1. https://www.chromatic.com/docs/legacy-viewports/#viewports-legacy-storybook-api ↩

Copy link
Contributor Author

@domlander domlander Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the heads up! I'll make sure to use modes in the future.

} 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;
208 changes: 104 additions & 104 deletions dotcom-rendering/src/components/MoreGalleries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,35 +22,14 @@ type Props = {
format: ArticleFormat;
};

const standardCardStyles = css`
flex: 1;
position: relative;
display: flex;
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: 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;
}

Expand Down Expand Up @@ -80,6 +59,107 @@ const cardsContainerStyles = css`
}
`;

const standardCardStyles = css`
position: relative;
display: flex;
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};
padding-bottom: ${space[3]}px;
padding-top: ${space[1]}px;

:hover {
text-decoration: underline;
}

${from.tablet} {
${headlineBold28};
}
`;

const Title = ({ guardianBaseUrl }: { guardianBaseUrl: string }) => (
<a
css={css`
${grid.column.centre}
color: ${palette('--caption-text')};
text-decoration: none;
align-self: start;

${from.leftCol} {
${grid.column.left}
}
`}
href={`${guardianBaseUrl}/inpictures/all`}
data-link-name="section heading"
>
<h2 css={headerStyles}>More galleries</h2>
</a>
);

const MoreGalleriesSplashCard = ({
defaultProps,
}: {
defaultProps: CardProps;
}) => {
const cardProps: Partial<CardProps> = {
headlineSizes: {
desktop: 'medium',
tablet: 'medium',
mobile: 'medium',
},
mediaPositionOnDesktop: 'right',
mediaPositionOnMobile: 'top',
mediaSize: 'medium',
isOnwardSplash: true,
};

return (
<div
css={[
cardsContainerStyles,
css`
margin-bottom: ${space[6]}px;
background-color: ${palette(
'--onward-more-galleries-card-background',
)};
padding: ${space[2]}px;
${from.leftCol} {
&::before {
content: '';
position: absolute;
left: -11px;
top: 8px;
bottom: 0;
width: 1px;
background-color: ${palette(
'--onward-content-border',
)};
}
}
`,
]}
>
<Card {...defaultProps} {...cardProps} />
</div>
);
};

const getDefaultCardProps = (
trail: TrailType,
discussionApiUrl: string,
Expand Down Expand Up @@ -121,6 +201,7 @@ const getDefaultCardProps = (
isOnwardContent: true,
onwardsSource: 'more-galleries',
};

return defaultProps;
};

Expand Down Expand Up @@ -192,84 +273,3 @@ export const MoreGalleries = (props: Props) => {
</div>
);
};

const MoreGalleriesSplashCard = ({
defaultProps,
}: {
defaultProps: CardProps;
}) => {
const cardProps: Partial<CardProps> = {
headlineSizes: {
desktop: 'medium',
tablet: 'medium',
mobile: 'medium',
},
mediaPositionOnDesktop: 'right',
mediaPositionOnMobile: 'top',
mediaSize: 'medium',
isOnwardSplash: true,
};
return (
<div
css={[
cardsContainerStyles,
css`
margin-bottom: ${space[6]}px;
background-color: ${palette(
'--onward-more-galleries-card-background',
)};
padding: ${space[2]}px;
${from.leftCol} {
&::before {
content: '';
position: absolute;
left: -11px;
top: 8px;
bottom: 0;
width: 1px;
background-color: ${palette(
'--onward-content-border',
)};
}
}
`,
]}
>
<Card {...defaultProps} {...cardProps} />
</div>
);
};

const Title = ({ guardianBaseUrl }: { guardianBaseUrl: string }) => (
<a
css={css`
${grid.column.centre}
color: ${palette('--caption-text')};
text-decoration: none;
align-self: start;

${from.leftCol} {
${grid.column.left}
}
`}
href={`${guardianBaseUrl}/inpictures/all`}
data-link-name="section heading"
>
<h2 css={headerStyles}>More galleries</h2>
</a>
);

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};
}
`;
Loading