Skip to content

Commit 354cfbe

Browse files
marjisoundmarjisound
committed
add CarousableSmallOnwards container which applies new design for onwards
also update FetchOnwardsData component to use CarousableSmallOnwards for galleries
1 parent 0b0292b commit 354cfbe

File tree

9 files changed

+528
-83
lines changed

9 files changed

+528
-83
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -533,7 +533,8 @@ export const Card = ({
533533
- */
534534
const isMediaCardOrNewsletter = isMediaCard(format) || isNewsletter;
535535

536-
const showPill = isMediaCardOrNewsletter;
536+
const isOnwardRelatedContent = containerType === 'related-content';
537+
const showPill = isMediaCardOrNewsletter && !isOnwardRelatedContent;
537538

538539
const media = getMedia({
539540
imageUrl: image?.src,

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

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
3+
import { getDataLinkNameCard } from '../lib/getDataLinkName';
4+
import { CarousableSmallOnwards } from './CarousableSmallOnwards';
5+
6+
const meta = {
7+
title: 'Components/CarousableSmallOnwards',
8+
component: CarousableSmallOnwards,
9+
} satisfies Meta<typeof CarousableSmallOnwards>;
10+
11+
export default meta;
12+
13+
type Story = StoryObj<typeof meta>;
14+
15+
export const CarousableSmallOnwardsStory = {
16+
args: {
17+
absoluteServerTimes: false,
18+
discussionApiUrl:
19+
'https://discussion.code.dev-theguardian.com/discussion-api',
20+
heading: 'More on this story',
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: '2022-01-01T06: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+
discussionId: 'zHoBy6HNKsk',
49+
dataLinkName: getDataLinkNameCard(
50+
{
51+
theme: Pillar.News,
52+
design: ArticleDesign.Gallery,
53+
display: ArticleDisplay.Standard,
54+
},
55+
'0',
56+
0,
57+
),
58+
trailText:
59+
'Guinness World Records is looking back at the extraordinary feats achieved since its inception - as well as unveiling 70 whacky and unclaimed records ',
60+
kickerText: 'Politics', // Get data for this
61+
mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this
62+
},
63+
{
64+
url: 'http://localhost:9000/money/gallery/2025/aug/22/characterful-cottages-for-sale-in-england-in-pictures',
65+
linkText:
66+
'Characterful cottages for sale in England – in pictures',
67+
showByline: false,
68+
byline: 'Anna White',
69+
image: {
70+
src: 'https://media.guim.co.uk/58cd9356e6d68e8efa6028162bb959f9798307d5/515_0_5000_4000/master/5000.jpg',
71+
altText: '',
72+
},
73+
format: {
74+
design: ArticleDesign.Gallery,
75+
theme: Pillar.Lifestyle,
76+
display: ArticleDisplay.Standard,
77+
},
78+
webPublicationDate: '2022-01-01T06:00:24.000Z',
79+
headline:
80+
'Characterful cottages for sale in England – in pictures',
81+
shortUrl: 'https://www.theguardian.com/p/x32gqj',
82+
discussion: {
83+
isCommentable: false,
84+
isClosedForComments: true,
85+
discussionId: '/p/x32gqj',
86+
},
87+
dataLinkName: getDataLinkNameCard(
88+
{
89+
design: ArticleDesign.Gallery,
90+
theme: Pillar.Lifestyle,
91+
display: ArticleDisplay.Standard,
92+
},
93+
'0',
94+
1,
95+
),
96+
trailText:
97+
'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',
98+
mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this
99+
},
100+
{
101+
url: 'http://localhost:9000/news/gallery/2025/aug/22/sunsets-aid-parachutes-and-giant-pandas-photos-of-the-day-friday',
102+
linkText:
103+
'Sunsets, aid parachutes and giant pandas: photos of the day – Friday ',
104+
showByline: false,
105+
byline: 'Eithne Staunton',
106+
image: {
107+
src: 'https://media.guim.co.uk/4ce0b080206fe9b65b976c1acf219d81072cc814/0_0_2113_1690/master/2113.png',
108+
altText: '',
109+
},
110+
format: {
111+
design: ArticleDesign.Gallery,
112+
theme: Pillar.News,
113+
display: ArticleDisplay.Standard,
114+
},
115+
webPublicationDate: '2022-01-01T08:49:42.000Z',
116+
headline:
117+
'Sunsets, aid parachutes and giant pandas: photos of the day – Friday ',
118+
shortUrl: 'https://www.theguardian.com/p/x3359z',
119+
discussion: {
120+
isCommentable: false,
121+
isClosedForComments: true,
122+
discussionId: '/p/x3359z',
123+
},
124+
dataLinkName: getDataLinkNameCard(
125+
{
126+
design: ArticleDesign.Gallery,
127+
theme: Pillar.News,
128+
display: ArticleDisplay.Standard,
129+
},
130+
'0',
131+
2,
132+
),
133+
trailText:
134+
'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',
135+
mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this
136+
},
137+
{
138+
url: 'http://localhost:9000/fashion/gallery/2025/aug/22/what-to-wear-to-notting-hill-carnival',
139+
linkText: 'On parade: what to wear to Notting Hill carnival',
140+
showByline: false,
141+
byline: 'Melanie Wilkinson',
142+
image: {
143+
src: 'https://media.guim.co.uk/49a9656cd10c4f64f8bdd54380afb915c7a3648b/207_0_1500_1200/master/1500.jpg',
144+
altText: '',
145+
},
146+
format: {
147+
design: ArticleDesign.Gallery,
148+
theme: Pillar.Lifestyle,
149+
display: ArticleDisplay.Standard,
150+
},
151+
webPublicationDate: '2025-08-22T05:00:23.000Z',
152+
headline: 'On parade: what to wear to Notting Hill carnival',
153+
shortUrl: 'https://www.theguardian.com/p/x32mte',
154+
discussion: {
155+
isCommentable: false,
156+
isClosedForComments: true,
157+
discussionId: '/p/x32mte',
158+
},
159+
dataLinkName: getDataLinkNameCard(
160+
{
161+
design: ArticleDesign.Gallery,
162+
theme: Pillar.Lifestyle,
163+
display: ArticleDisplay.Standard,
164+
},
165+
'0',
166+
1,
167+
),
168+
trailText:
169+
'The Guardian’s picture editors select photographs from around the world',
170+
mainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for thismainMedia: { type: 'Gallery', count: '6' }, // TODO: get data for this
171+
},
172+
],
173+
},
174+
} satisfies Story;

0 commit comments

Comments
 (0)