Skip to content

Commit 367a603

Browse files
marjisoundJamieB-gu
marjisound
and
JamieB-gu
committed
Add MoreGalleries component with a story
Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com>
1 parent ee336a4 commit 367a603

File tree

6 files changed

+514
-14
lines changed

6 files changed

+514
-14
lines changed

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import type {
3030
DCRSupportingContent,
3131
} from '../../types/front';
3232
import type { MainMedia } from '../../types/mainMedia';
33-
import type { OnwardsSource } from '../../types/onwards';
33+
import type { OnwardContainerType, OnwardsSource } from '../../types/onwards';
3434
import { Avatar } from '../Avatar';
3535
import { CardCommentCount } from '../CardCommentCount.importable';
3636
import { CardHeadline, type ResponsiveFontSize } from '../CardHeadline';
@@ -120,7 +120,7 @@ export type Props = {
120120
supportingContentPosition?: Position;
121121
snapData?: DCRSnapType;
122122
containerPalette?: DCRContainerPalette;
123-
containerType?: DCRContainerType;
123+
containerType?: DCRContainerType | OnwardContainerType;
124124
showAge?: boolean;
125125
discussionApiUrl: string;
126126
discussionId?: string;
@@ -576,6 +576,8 @@ export const Card = ({
576576
containerType === 'flexible/special' ||
577577
containerType === 'flexible/general';
578578

579+
const isOnwardContainer = containerType === 'more-galleries';
580+
579581
const isSmallCard = containerType === 'scrollable/small';
580582

581583
const mediaFixedSizeOptions = (): MediaFixedSizeOptions => {
@@ -593,6 +595,8 @@ export const Card = ({
593595
const hideTrailTextUntil = () => {
594596
if (isFlexibleContainer) {
595597
return undefined;
598+
} else if (isOnwardContainer && isFlexSplash) {
599+
return 'never';
596600
} else if (
597601
mediaSize === 'large' &&
598602
mediaPositionOnDesktop === 'right' &&
@@ -604,6 +608,10 @@ export const Card = ({
604608
}
605609
};
606610

611+
const shouldShowTrailText = isOnwardContainer
612+
? media?.type !== 'podcast' && isFlexSplash
613+
: media?.type !== 'podcast';
614+
607615
/**
608616
* Determines the gap of between card components based on card properties
609617
* Order matters here as the logic is based on the card properties
@@ -1093,7 +1101,7 @@ export const Card = ({
10931101
)}
10941102

10951103
{!!trailText &&
1096-
media?.type !== 'podcast' &&
1104+
shouldShowTrailText &&
10971105
!isInHideTrailsAbTest && (
10981106
<TrailText
10991107
trailText={trailText}

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,13 @@ import { palette } from '../../../palette';
1111

1212
export type TrailTextSize = 'regular' | 'large';
1313

14-
const trailTextStyles = css`
15-
display: flex;
16-
flex-direction: column;
17-
18-
${until.tablet} {
19-
display: none;
20-
}
21-
`;
14+
const trailTextStyles = (hideUntil?: 'tablet' | 'desktop' | 'never') => {
15+
return css`
16+
display: flex;
17+
flex-direction: column;
18+
${hideUntil !== 'never' ? `${until.tablet} { display: none; }` : ''}
19+
`;
20+
};
2221

2322
const bottomPadding = css`
2423
padding-bottom: ${space[2]}px;
@@ -44,7 +43,7 @@ type Props = {
4443
/** Optionally overrides the trail text colour */
4544
trailTextColour?: string;
4645
/** Controls visibility of trail text on various breakpoints */
47-
hideUntil?: 'tablet' | 'desktop';
46+
hideUntil?: 'tablet' | 'desktop' | 'never';
4847
/** Defaults to `true`. Adds padding to the bottom of the trail text */
4948
padBottom?: boolean;
5049
/** Adds padding to the top of the trail text */
@@ -62,7 +61,7 @@ export const TrailText = ({
6261
const trailText = (
6362
<div
6463
css={[
65-
trailTextStyles,
64+
trailTextStyles(hideUntil),
6665
css`
6766
color: ${trailTextColour};
6867
`,
@@ -79,7 +78,7 @@ export const TrailText = ({
7978
</div>
8079
);
8180

82-
return hideUntil ? (
81+
return hideUntil && hideUntil !== 'never' ? (
8382
<Hide until={hideUntil}>{trailText}</Hide>
8483
) : (
8584
<>{trailText}</>

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

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
3+
import { getDataLinkNameCard } from '../lib/getDataLinkName';
4+
import { MoreGalleries as MoreGalleriesComponent } from './MoreGalleries';
5+
6+
const meta = {
7+
title: 'Components/MoreGalleries',
8+
component: MoreGalleriesComponent,
9+
} satisfies Meta<typeof MoreGalleriesComponent>;
10+
11+
export default meta;
12+
13+
type Story = StoryObj<typeof meta>;
14+
15+
export const MoreGalleries = {
16+
args: {
17+
absoluteServerTimes: false,
18+
discussionApiUrl:
19+
'https://discussion.code.dev-theguardian.com/discussion-api',
20+
heading: 'More galleries',
21+
url: 'http://localhost:9000/more-galleries',
22+
onwardsSource: 'more-galleries',
23+
trails: [
24+
{
25+
url: 'http://localhost:9000/environment/gallery/2025/aug/22/week-in-wildlife-a-clumsy-fox-swinging-orangutang-and-rescued-jaguarundi-cub',
26+
linkText:
27+
'Week in wildlife: a clumsy fox, a swinging orangutan and a rescued jaguarundi cub',
28+
showByline: false,
29+
byline: 'Pejman Faratin',
30+
image: {
31+
src: 'https://media.guim.co.uk/a81e974ffee6c8c88fa280c2d02eaf5dc2af863e/151_292_1020_816/master/1020.jpg',
32+
altText: '',
33+
},
34+
format: {
35+
theme: Pillar.News,
36+
design: ArticleDesign.Gallery,
37+
display: ArticleDisplay.Standard,
38+
},
39+
webPublicationDate: '2025-08-22T06:00:25.000Z',
40+
headline:
41+
'Week in wildlife: a clumsy fox, a swinging orangutan and a rescued jaguarundi cub',
42+
shortUrl: 'https://www.theguardian.com/p/x32n89',
43+
discussion: {
44+
isCommentable: false,
45+
isClosedForComments: true,
46+
discussionId: '/p/x32n89',
47+
},
48+
dataLinkName: getDataLinkNameCard(
49+
{
50+
theme: Pillar.News,
51+
design: ArticleDesign.Gallery,
52+
display: ArticleDisplay.Standard,
53+
},
54+
'0',
55+
0,
56+
),
57+
trailText:
58+
'Guinness World Records is looking back at the extraordinary feats achieved since its inception - as well as unveiling 70 whacky and unclaimed records ',
59+
kickerText: 'Politics', // Get data for this
60+
mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this
61+
},
62+
{
63+
url: 'http://localhost:9000/money/gallery/2025/aug/22/characterful-cottages-for-sale-in-england-in-pictures',
64+
linkText:
65+
'Characterful cottages for sale in England – in pictures',
66+
showByline: false,
67+
byline: 'Anna White',
68+
image: {
69+
src: 'https://media.guim.co.uk/58cd9356e6d68e8efa6028162bb959f9798307d5/515_0_5000_4000/master/5000.jpg',
70+
altText: '',
71+
},
72+
format: {
73+
design: ArticleDesign.Gallery,
74+
theme: Pillar.Lifestyle,
75+
display: ArticleDisplay.Standard,
76+
},
77+
webPublicationDate: '2025-08-22T06:00:24.000Z',
78+
headline:
79+
'Characterful cottages for sale in England – in pictures',
80+
shortUrl: 'https://www.theguardian.com/p/x32gqj',
81+
discussion: {
82+
isCommentable: false,
83+
isClosedForComments: true,
84+
discussionId: '/p/x32gqj',
85+
},
86+
dataLinkName: getDataLinkNameCard(
87+
{
88+
design: ArticleDesign.Gallery,
89+
theme: Pillar.Lifestyle,
90+
display: ArticleDisplay.Standard,
91+
},
92+
'0',
93+
1,
94+
),
95+
trailText:
96+
'Picked from a record 60,636 entries, the first images from the Natural History Museum’s wildlife photographer of the year competition have been released. The photographs, which range from a lion facing down a cobra to magnified mould spores, show the diversity, beauty and complexity of the natural world and humanity’s relationship with it',
97+
mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this
98+
},
99+
{
100+
url: 'http://localhost:9000/news/gallery/2025/aug/22/sunsets-aid-parachutes-and-giant-pandas-photos-of-the-day-friday',
101+
linkText:
102+
'Sunsets, aid parachutes and giant pandas: photos of the day – Friday ',
103+
showByline: false,
104+
byline: 'Eithne Staunton',
105+
image: {
106+
src: 'https://media.guim.co.uk/4ce0b080206fe9b65b976c1acf219d81072cc814/0_0_2113_1690/master/2113.png',
107+
altText: '',
108+
},
109+
format: {
110+
design: ArticleDesign.Gallery,
111+
theme: Pillar.News,
112+
display: ArticleDisplay.Standard,
113+
},
114+
webPublicationDate: '2025-08-22T12:49:42.000Z',
115+
headline:
116+
'Sunsets, aid parachutes and giant pandas: photos of the day – Friday ',
117+
shortUrl: 'https://www.theguardian.com/p/x3359z',
118+
discussion: {
119+
isCommentable: false,
120+
isClosedForComments: true,
121+
discussionId: '/p/x3359z',
122+
},
123+
dataLinkName: getDataLinkNameCard(
124+
{
125+
design: ArticleDesign.Gallery,
126+
theme: Pillar.News,
127+
display: ArticleDisplay.Standard,
128+
},
129+
'0',
130+
2,
131+
),
132+
trailText:
133+
'From the mock-Tudor fad of the 1920s to drivers refuelling on a roundabout, each era produces its own distinctive petrol stations – as photographer Philip Butler discovered',
134+
mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this
135+
},
136+
{
137+
url: 'http://localhost:9000/fashion/gallery/2025/aug/22/what-to-wear-to-notting-hill-carnival',
138+
linkText: 'On parade: what to wear to Notting Hill carnival',
139+
showByline: false,
140+
byline: 'Melanie Wilkinson',
141+
image: {
142+
src: 'https://media.guim.co.uk/49a9656cd10c4f64f8bdd54380afb915c7a3648b/207_0_1500_1200/master/1500.jpg',
143+
altText: '',
144+
},
145+
format: {
146+
design: ArticleDesign.Gallery,
147+
theme: Pillar.Lifestyle,
148+
display: ArticleDisplay.Standard,
149+
},
150+
webPublicationDate: '2025-08-22T05:00:23.000Z',
151+
headline: 'On parade: what to wear to Notting Hill carnival',
152+
shortUrl: 'https://www.theguardian.com/p/x32mte',
153+
discussion: {
154+
isCommentable: false,
155+
isClosedForComments: true,
156+
discussionId: '/p/x32mte',
157+
},
158+
dataLinkName: getDataLinkNameCard(
159+
{
160+
design: ArticleDesign.Gallery,
161+
theme: Pillar.Lifestyle,
162+
display: ArticleDisplay.Standard,
163+
},
164+
'0',
165+
1,
166+
),
167+
trailText:
168+
'The Guardian’s picture editors select photographs from around the world',
169+
mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for thismainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this
170+
},
171+
{
172+
url: 'http://localhost:9000/artanddesign/gallery/2025/aug/21/psychedelic-rock-glass-mountain-michael-lundgren',
173+
linkText:
174+
'Psychedelic rock! Formations that mess with your mind – in pictures ',
175+
showByline: false,
176+
image: {
177+
src: 'https://media.guim.co.uk/2810af61b2d2d2d5f71ec01e56e6555e0a6d4635/55_0_2813_2250/master/2813.jpg',
178+
altText: '',
179+
},
180+
format: {
181+
design: ArticleDesign.Gallery,
182+
theme: Pillar.Culture,
183+
display: ArticleDisplay.Standard,
184+
},
185+
webPublicationDate: '2025-08-21T06:01:01.000Z',
186+
headline:
187+
'Psychedelic rock! Formations that mess with your mind – in pictures ',
188+
shortUrl: 'https://www.theguardian.com/p/x2p663',
189+
discussion: {
190+
isCommentable: false,
191+
isClosedForComments: true,
192+
discussionId: '/p/x2p663',
193+
},
194+
dataLinkName: getDataLinkNameCard(
195+
{
196+
design: ArticleDesign.Gallery,
197+
theme: Pillar.Culture,
198+
display: ArticleDisplay.Standard,
199+
},
200+
'0',
201+
1,
202+
),
203+
trailText:
204+
'Politicians and their partners put on their best show at this year’s Midwinter Ball, an annual dinner hosted by the Federal Parliamentary Press Gallery in Canberra',
205+
mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this
206+
},
207+
],
208+
},
209+
} satisfies Story;

0 commit comments

Comments
 (0)