Skip to content

Commit 81ae393

Browse files
marjisoundmarjisound
committed
Add ScrollableSmallOnwards components
1 parent 9d9cb06 commit 81ae393

File tree

9 files changed

+502
-72
lines changed

9 files changed

+502
-72
lines changed

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export type Position = 'inner' | 'outer' | 'none';
7878
export type Props = {
7979
linkTo: string;
8080
format: ArticleFormat;
81+
contextFormat?: ArticleFormat;
8182
serverTime?: number;
8283
headlineText: string;
8384
headlineSizes?: ResponsiveFontSize;
@@ -350,6 +351,7 @@ const liveBulletStyles = css`
350351
export const Card = ({
351352
linkTo,
352353
format,
354+
contextFormat,
353355
headlineText,
354356
headlineSizes,
355357
showQuotedHeadline,
@@ -547,7 +549,14 @@ export const Card = ({
547549
- */
548550
const isMediaCardOrNewsletter = isMediaCard(format) || isNewsletter;
549551

550-
const showPill = isMediaCardOrNewsletter;
552+
// This is due to a re-design for onwards content.
553+
// Currently this re-design is only applied for galleries secondary onwards content.
554+
// We plan to apply this to all onwards content in the future.
555+
const isGallerySecondaryOnward =
556+
contextFormat?.design === ArticleDesign.Gallery &&
557+
onwardsSource !== 'more-galleries';
558+
559+
const showPill = isMediaCardOrNewsletter && !isGallerySecondaryOnward;
551560

552561
const media = getMedia({
553562
imageUrl: image?.src,

‎dotcom-rendering/src/components/FetchOnwardsData.importable.tsx‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import type { RenderingTarget } from '../types/renderingTarget';
1414
import type { FETrailType, TrailType } from '../types/trails';
1515
import { Carousel } from './Carousel.importable';
1616
import { Placeholder } from './Placeholder';
17+
import { ScrollableSmallOnwards } from './ScrollableSmallOnwards';
1718

1819
type Props = {
1920
url: string;
@@ -121,22 +122,33 @@ export const FetchOnwardsData = ({
121122

122123
return (
123124
<div ref={setIsInViewRef} css={minHeight}>
124-
<Carousel
125-
heading={data.heading || data.displayname} // Sometimes the api returns heading as 'displayName'
126-
trails={trails}
127-
description={data.description}
128-
onwardsSource={onwardsSource}
129-
format={format}
130-
leftColSize={
131-
format.design === ArticleDesign.LiveBlog ||
132-
format.design === ArticleDesign.DeadBlog
133-
? 'wide'
134-
: 'compact'
135-
}
136-
discussionApiUrl={discussionApiUrl}
137-
serverTime={serverTime}
138-
renderingTarget={renderingTarget}
139-
/>
125+
{format.design === ArticleDesign.Gallery ? (
126+
<ScrollableSmallOnwards
127+
serverTime={serverTime}
128+
trails={trails}
129+
discussionApiUrl={discussionApiUrl}
130+
heading={data.heading || data.displayname}
131+
onwardsSource={onwardsSource}
132+
format={format}
133+
/>
134+
) : (
135+
<Carousel
136+
heading={data.heading || data.displayname} // Sometimes the api returns heading as 'displayName'
137+
trails={trails}
138+
description={data.description}
139+
onwardsSource={onwardsSource}
140+
format={format}
141+
leftColSize={
142+
format.design === ArticleDesign.LiveBlog ||
143+
format.design === ArticleDesign.DeadBlog
144+
? 'wide'
145+
: 'compact'
146+
}
147+
discussionApiUrl={discussionApiUrl}
148+
serverTime={serverTime}
149+
renderingTarget={renderingTarget}
150+
/>
151+
)}
140152
</div>
141153
);
142154
};

‎dotcom-rendering/src/components/OnwardsUpper.importable.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,15 @@ export const OnwardsUpper = ({
321321
<Section
322322
fullWidth={true}
323323
borderColour={palette('--article-section-border')}
324+
padSides={
325+
format.design === ArticleDesign.Gallery ? false : true
326+
}
327+
showTopBorder={
328+
format.design === ArticleDesign.Gallery ? false : true
329+
}
330+
showSideBorders={
331+
format.design === ArticleDesign.Gallery ? false : true
332+
}
324333
>
325334
<FetchOnwardsData
326335
url={url}
@@ -340,6 +349,15 @@ export const OnwardsUpper = ({
340349
<Section
341350
fullWidth={true}
342351
borderColour={palette('--article-section-border')}
352+
showTopBorder={
353+
format.design === ArticleDesign.Gallery ? false : true
354+
}
355+
showSideBorders={
356+
format.design === ArticleDesign.Gallery ? false : true
357+
}
358+
padSides={
359+
format.design === ArticleDesign.Gallery ? false : true
360+
}
343361
>
344362
<FetchOnwardsData
345363
url={curatedDataUrl}

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,32 +104,34 @@ const itemStyles = css`
104104
position: relative;
105105
`;
106106

107-
const leftBorderStyles = css`
107+
const leftBorderStyles = (isOnwardContent?: boolean) => css`
108108
content: '';
109109
position: absolute;
110110
top: 0;
111111
bottom: 0;
112112
left: -10px;
113113
width: 1px;
114-
background-color: ${palette('--card-border-top')};
114+
background-color: ${isOnwardContent
115+
? palette('--onward-content-border')
116+
: palette('--card-border-top')};
115117
transform: translateX(-50%);
116118
`;
117119

118-
const singleRowLeftBorderStyles = css`
120+
const singleRowLeftBorderStyles = (isOnwardContent?: boolean) => css`
119121
:not(:first-child)::before {
120-
${leftBorderStyles}
122+
${leftBorderStyles(isOnwardContent)}
121123
}
122124
`;
123125

124-
const stackedRowLeftBorderStyles = css`
126+
const stackedRowLeftBorderStyles = (isOnwardContent?: boolean) => css`
125127
${from.tablet} {
126128
:not(:first-child)::before {
127-
${leftBorderStyles}
129+
${leftBorderStyles(isOnwardContent)}
128130
}
129131
}
130132
${until.tablet} {
131133
:not(:first-child):not(:nth-child(2))::before {
132-
${leftBorderStyles}
134+
${leftBorderStyles(isOnwardContent)}
133135
}
134136
}
135137
`;
@@ -410,17 +412,20 @@ export const ScrollableCarousel = ({
410412

411413
ScrollableCarousel.Item = ({
412414
isStackingCarousel = false,
415+
isOnwardContent = false,
413416
children,
414417
}: {
415418
isStackingCarousel?: boolean;
419+
/** The colour of borders can be overriden */
420+
isOnwardContent?: boolean;
416421
children: React.ReactNode;
417422
}) => (
418423
<li
419424
css={[
420425
itemStyles,
421426
isStackingCarousel
422-
? stackedRowLeftBorderStyles
423-
: singleRowLeftBorderStyles,
427+
? stackedRowLeftBorderStyles(isOnwardContent)
428+
: singleRowLeftBorderStyles(isOnwardContent),
424429
]}
425430
>
426431
{children}

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

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

0 commit comments

Comments
 (0)