Skip to content

Commit a9a8403

Browse files
marjisoundmarjisound
authored
Merge pull request #14538 from guardian/add-more-galleries-component
Add MoreGalleries component with a story
2 parents ad21271 + d0d6f40 commit a9a8403

File tree

8 files changed

+505
-11
lines changed

8 files changed

+505
-11
lines changed

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

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import type {
3333
DCRSupportingContent,
3434
} from '../../types/front';
3535
import type { MainMedia } from '../../types/mainMedia';
36-
import type { OnwardsSource } from '../../types/onwards';
36+
import type { OnwardContainerType, OnwardsSource } from '../../types/onwards';
3737
import { Avatar } from '../Avatar';
3838
import { CardCommentCount } from '../CardCommentCount.importable';
3939
import { CardHeadline, type ResponsiveFontSize } from '../CardHeadline';
@@ -124,7 +124,7 @@ export type Props = {
124124
supportingContentPosition?: Position;
125125
snapData?: DCRSnapType;
126126
containerPalette?: DCRContainerPalette;
127-
containerType?: DCRContainerType;
127+
containerType?: DCRContainerType | OnwardContainerType;
128128
showAge?: boolean;
129129
discussionApiUrl: string;
130130
discussionId?: string;
@@ -150,6 +150,8 @@ export type Props = {
150150
uniqueId?: string;
151151
/** The Splash card in a flexible container gets a different visual treatment to other cards */
152152
isFlexSplash?: boolean;
153+
/** The Splash card in an onward container gets a different visual treatment to other cards */
154+
isOnwardSplash?: boolean;
153155
showTopBarDesktop?: boolean;
154156
showTopBarMobile?: boolean;
155157
trailTextSize?: TrailTextSize;
@@ -393,6 +395,7 @@ export const Card = ({
393395
index = 0,
394396
uniqueId = '',
395397
isFlexSplash,
398+
isOnwardSplash,
396399
showTopBarDesktop = true,
397400
showTopBarMobile = true,
398401
trailTextSize,
@@ -585,6 +588,8 @@ export const Card = ({
585588
containerType === 'flexible/special' ||
586589
containerType === 'flexible/general';
587590

591+
const isOnwardContainer = containerType === 'more-galleries';
592+
588593
const isSmallCard =
589594
containerType === 'scrollable/small' ||
590595
containerType === 'scrollable/medium';
@@ -603,18 +608,26 @@ export const Card = ({
603608

604609
const hideTrailTextUntil = () => {
605610
if (isFlexibleContainer) {
611+
return 'tablet';
612+
}
613+
if (isOnwardSplash) {
606614
return undefined;
607-
} else if (
615+
}
616+
if (
608617
mediaSize === 'large' &&
609618
mediaPositionOnDesktop === 'right' &&
610619
media?.type !== 'avatar'
611620
) {
612621
return 'desktop';
613-
} else {
614-
return 'tablet';
615622
}
623+
624+
return 'tablet';
616625
};
617626

627+
const shouldShowTrailText = isOnwardContainer
628+
? media?.type !== 'podcast' && isOnwardSplash
629+
: media?.type !== 'podcast';
630+
618631
/**
619632
* Determines the gap of between card components based on card properties
620633
* Order matters here as the logic is based on the card properties
@@ -1191,7 +1204,7 @@ export const Card = ({
11911204
</HeadlineWrapper>
11921205
)}
11931206

1194-
{!!trailText && media?.type !== 'podcast' && (
1207+
{!!trailText && shouldShowTrailText && (
11951208
<TrailText
11961209
trailText={trailText}
11971210
trailTextSize={trailTextSize}

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
space,
55
textSans14,
66
textSans17,
7-
until,
87
} from '@guardian/source/foundations';
98
import { Hide } from '@guardian/source/react-components';
109
import { palette } from '../../../palette';
@@ -14,10 +13,6 @@ export type TrailTextSize = 'regular' | 'large';
1413
const trailTextStyles = css`
1514
display: flex;
1615
flex-direction: column;
17-
18-
${until.tablet} {
19-
display: none;
20-
}
2116
`;
2217

2318
const bottomPadding = css`

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -632,6 +632,7 @@ export const FeatureCard = ({
632632
)}
633633
trailTextSize="regular"
634634
padBottom={false}
635+
hideUntil="tablet"
635636
/>
636637
</div>
637638
)}

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

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
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: 'https://discussion.theguardian.com/discussion-api',
19+
headingLink: 'https://www.theguardian.com/inpictures/all',
20+
trails: [
21+
{
22+
url: 'https://www.theguardian.com/environment/gallery/2025/aug/22/week-in-wildlife-a-clumsy-fox-swinging-orangutang-and-rescued-jaguarundi-cub',
23+
linkText:
24+
'Week in wildlife: a clumsy fox, a swinging orangutan and a rescued jaguarundi cub',
25+
showByline: false,
26+
byline: 'Pejman Faratin',
27+
image: {
28+
src: 'https://media.guim.co.uk/a81e974ffee6c8c88fa280c2d02eaf5dc2af863e/151_292_1020_816/master/1020.jpg',
29+
altText: '',
30+
},
31+
format: {
32+
theme: Pillar.News,
33+
design: ArticleDesign.Gallery,
34+
display: ArticleDisplay.Standard,
35+
},
36+
webPublicationDate: '2025-08-22T06:00:25.000Z',
37+
headline:
38+
'Week in wildlife: a clumsy fox, a swinging orangutan and a rescued jaguarundi cub',
39+
shortUrl: 'https://www.theguardian.com/p/x32n89',
40+
discussion: {
41+
isCommentable: false,
42+
isClosedForComments: true,
43+
discussionId: '/p/x32n89',
44+
},
45+
dataLinkName: getDataLinkNameCard(
46+
{
47+
theme: Pillar.News,
48+
design: ArticleDesign.Gallery,
49+
display: ArticleDisplay.Standard,
50+
},
51+
'0',
52+
0,
53+
),
54+
trailText:
55+
'Guinness World Records is looking back at the extraordinary feats achieved since its inception - as well as unveiling 70 whacky and unclaimed records ',
56+
kickerText: 'Politics',
57+
mainMedia: { type: 'Gallery', count: '6' },
58+
},
59+
{
60+
url: 'https://www.theguardian.com/money/gallery/2025/aug/22/characterful-cottages-for-sale-in-england-in-pictures',
61+
linkText:
62+
'Characterful cottages for sale in England – in pictures',
63+
showByline: false,
64+
byline: 'Anna White',
65+
image: {
66+
src: 'https://media.guim.co.uk/58cd9356e6d68e8efa6028162bb959f9798307d5/515_0_5000_4000/master/5000.jpg',
67+
altText: '',
68+
},
69+
format: {
70+
design: ArticleDesign.Gallery,
71+
theme: Pillar.Lifestyle,
72+
display: ArticleDisplay.Standard,
73+
},
74+
webPublicationDate: '2025-08-22T06:00:24.000Z',
75+
headline:
76+
'Characterful cottages for sale in England – in pictures',
77+
shortUrl: 'https://www.theguardian.com/p/x32gqj',
78+
discussion: {
79+
isCommentable: false,
80+
isClosedForComments: true,
81+
discussionId: '/p/x32gqj',
82+
},
83+
dataLinkName: getDataLinkNameCard(
84+
{
85+
design: ArticleDesign.Gallery,
86+
theme: Pillar.Lifestyle,
87+
display: ArticleDisplay.Standard,
88+
},
89+
'0',
90+
1,
91+
),
92+
trailText:
93+
'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',
94+
mainMedia: { type: 'Gallery', count: '6' },
95+
},
96+
{
97+
url: 'https://www.theguardian.com/news/gallery/2025/aug/22/sunsets-aid-parachutes-and-giant-pandas-photos-of-the-day-friday',
98+
linkText:
99+
'Sunsets, aid parachutes and giant pandas: photos of the day – Friday ',
100+
showByline: false,
101+
byline: 'Eithne Staunton',
102+
image: {
103+
src: 'https://media.guim.co.uk/4ce0b080206fe9b65b976c1acf219d81072cc814/0_0_2113_1690/master/2113.png',
104+
altText: '',
105+
},
106+
format: {
107+
design: ArticleDesign.Gallery,
108+
theme: Pillar.News,
109+
display: ArticleDisplay.Standard,
110+
},
111+
webPublicationDate: '2025-08-22T12:49:42.000Z',
112+
headline:
113+
'Sunsets, aid parachutes and giant pandas: photos of the day – Friday ',
114+
shortUrl: 'https://www.theguardian.com/p/x3359z',
115+
discussion: {
116+
isCommentable: false,
117+
isClosedForComments: true,
118+
discussionId: '/p/x3359z',
119+
},
120+
dataLinkName: getDataLinkNameCard(
121+
{
122+
design: ArticleDesign.Gallery,
123+
theme: Pillar.News,
124+
display: ArticleDisplay.Standard,
125+
},
126+
'0',
127+
2,
128+
),
129+
trailText:
130+
'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',
131+
mainMedia: { type: 'Gallery', count: '6' },
132+
},
133+
{
134+
url: 'https://www.theguardian.com/fashion/gallery/2025/aug/22/what-to-wear-to-notting-hill-carnival',
135+
linkText: 'On parade: what to wear to Notting Hill carnival',
136+
showByline: false,
137+
byline: 'Melanie Wilkinson',
138+
image: {
139+
src: 'https://media.guim.co.uk/49a9656cd10c4f64f8bdd54380afb915c7a3648b/207_0_1500_1200/master/1500.jpg',
140+
altText: '',
141+
},
142+
format: {
143+
design: ArticleDesign.Gallery,
144+
theme: Pillar.Lifestyle,
145+
display: ArticleDisplay.Standard,
146+
},
147+
webPublicationDate: '2025-08-22T05:00:23.000Z',
148+
headline: 'On parade: what to wear to Notting Hill carnival',
149+
shortUrl: 'https://www.theguardian.com/p/x32mte',
150+
discussion: {
151+
isCommentable: false,
152+
isClosedForComments: true,
153+
discussionId: '/p/x32mte',
154+
},
155+
dataLinkName: getDataLinkNameCard(
156+
{
157+
design: ArticleDesign.Gallery,
158+
theme: Pillar.Lifestyle,
159+
display: ArticleDisplay.Standard,
160+
},
161+
'0',
162+
1,
163+
),
164+
trailText:
165+
'The Guardian’s picture editors select photographs from around the world',
166+
mainMedia: { type: 'Gallery', count: '6' },
167+
},
168+
{
169+
url: 'https://www.theguardian.com/artanddesign/gallery/2025/aug/21/psychedelic-rock-glass-mountain-michael-lundgren',
170+
linkText:
171+
'Psychedelic rock! Formations that mess with your mind – in pictures ',
172+
showByline: false,
173+
image: {
174+
src: 'https://media.guim.co.uk/2810af61b2d2d2d5f71ec01e56e6555e0a6d4635/55_0_2813_2250/master/2813.jpg',
175+
altText: '',
176+
},
177+
format: {
178+
design: ArticleDesign.Gallery,
179+
theme: Pillar.Culture,
180+
display: ArticleDisplay.Standard,
181+
},
182+
webPublicationDate: '2025-08-21T06:01:01.000Z',
183+
headline:
184+
'Psychedelic rock! Formations that mess with your mind – in pictures ',
185+
shortUrl: 'https://www.theguardian.com/p/x2p663',
186+
discussion: {
187+
isCommentable: false,
188+
isClosedForComments: true,
189+
discussionId: '/p/x2p663',
190+
},
191+
dataLinkName: getDataLinkNameCard(
192+
{
193+
design: ArticleDesign.Gallery,
194+
theme: Pillar.Culture,
195+
display: ArticleDisplay.Standard,
196+
},
197+
'0',
198+
1,
199+
),
200+
trailText:
201+
'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',
202+
mainMedia: { type: 'Gallery', count: '6' },
203+
},
204+
],
205+
},
206+
} satisfies Story;

0 commit comments

Comments
 (0)