Skip to content

Commit 19b3413

Browse files
domlanderdomlander
committed
Minor changes to tag page cards. Brings in line with modern front cards
1 parent 21800df commit 19b3413

7 files changed

Lines changed: 270 additions & 879 deletions

File tree

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,6 @@ const podcastImageStyles = (
241241
}
242242
243243
/** The image takes the full height on desktop, so that the waveform sticks to the bottom of the card. */
244-
245244
${from.desktop} {
246245
width: ${isHorizontalOnDesktop ? 'unset' : '120px'};
247246
height: ${isHorizontalOnDesktop ? 'unset' : '120px'};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export const UL = ({
9999
verticalDividerColour = palette('--section-border'),
100100
}: Props) => {
101101
const spacingPx = getSpacingPx(hasLargeSpacing);
102+
102103
return (
103104
<ul
104105
css={[

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

Lines changed: 38 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { breakpoints } from '@guardian/source/foundations';
22
import {
33
multipleBrandedTrails,
44
singleBrandedTrails,
5-
trails,
5+
trails as trailsFromFixtures,
66
} from '../../fixtures/manual/trails';
77
import { DecideContainerByTrails } from './DecideContainerByTrails';
88
import { FrontSection } from './FrontSection';
@@ -23,261 +23,157 @@ export default {
2323

2424
const ASPECT_RATIO = '5:4';
2525

26-
export const OneCardFast = () => {
26+
const trails = trailsFromFixtures.map((trail) => ({
27+
...trail,
28+
trailText:
29+
'Cat Ipsum Chase ball of string eat plants, meow, and throw up because I ate plants going to catch the red dot today going to catch the red dot today. Decide to want nothing to do with my owner today.',
30+
}));
31+
32+
export const OneCard = () => {
2733
return (
28-
<FrontSection title="Fast - One card" editionId="UK">
34+
<FrontSection title="One card" editionId="UK">
2935
<DecideContainerByTrails
3036
trails={trails.slice(0, 1)}
31-
speed="fast"
3237
imageLoading="eager"
3338
aspectRatio={ASPECT_RATIO}
3439
/>
3540
</FrontSection>
3641
);
3742
};
38-
OneCardFast.storyName = 'Fast - One card';
3943

40-
export const TwoCardFast = () => {
44+
export const TwoCards = () => {
4145
return (
42-
<FrontSection title="Fast - Two cards" editionId="UK">
46+
<FrontSection title="Two cards" editionId="UK">
4347
<DecideContainerByTrails
4448
trails={trails.slice(0, 2)}
45-
speed="fast"
4649
imageLoading="eager"
4750
aspectRatio={ASPECT_RATIO}
4851
/>
4952
</FrontSection>
5053
);
5154
};
52-
TwoCardFast.storyName = 'Fast - Two cards';
5355

54-
export const ThreeCardFast = () => {
56+
export const ThreeCards = () => {
5557
return (
56-
<FrontSection title="Fast - Three cards" editionId="UK">
58+
<FrontSection title="Three cards" editionId="UK">
5759
<DecideContainerByTrails
5860
trails={trails.slice(0, 3)}
59-
speed="fast"
6061
imageLoading="eager"
6162
aspectRatio={ASPECT_RATIO}
6263
/>
6364
</FrontSection>
6465
);
6566
};
66-
ThreeCardFast.storyName = 'Fast - Three cards';
6767

68-
export const FourCardFast = () => {
68+
export const FourCards = () => {
6969
return (
70-
<FrontSection title="Fast - Four cards" editionId="UK">
70+
<FrontSection title="Four cards" editionId="UK">
7171
<DecideContainerByTrails
7272
trails={trails.slice(0, 4)}
73-
speed="fast"
7473
imageLoading="eager"
7574
aspectRatio={ASPECT_RATIO}
7675
/>
7776
</FrontSection>
7877
);
7978
};
80-
FourCardFast.storyName = 'Fast - Four cards';
8179

82-
export const FiveCardFast = () => {
80+
export const FiveCards = () => {
8381
return (
84-
<FrontSection title="Fast - Five cards" editionId="UK">
82+
<FrontSection title="Five cards" editionId="UK">
8583
<DecideContainerByTrails
8684
trails={trails.slice(0, 5)}
87-
speed="fast"
8885
imageLoading="eager"
8986
aspectRatio={ASPECT_RATIO}
9087
/>
9188
</FrontSection>
9289
);
9390
};
94-
FiveCardFast.storyName = 'Fast - Five cards';
9591

96-
export const SixCardFast = () => {
92+
export const SixCards = () => {
9793
return (
98-
<FrontSection title="Fast - Six cards" editionId="UK">
94+
<FrontSection title="Six cards" editionId="UK">
9995
<DecideContainerByTrails
10096
trails={trails.slice(0, 6)}
101-
speed="fast"
10297
imageLoading="eager"
10398
aspectRatio={ASPECT_RATIO}
10499
/>
105100
</FrontSection>
106101
);
107102
};
108-
SixCardFast.storyName = 'Fast - Six cards';
109103

110-
export const SevenCardFast = () => {
104+
export const SevenCards = () => {
111105
return (
112-
<FrontSection title="Fast - Seven cards" editionId="UK">
106+
<FrontSection title="Seven cards" editionId="UK">
113107
<DecideContainerByTrails
114108
trails={trails.slice(0, 7)}
115-
speed="fast"
116109
imageLoading="eager"
117110
aspectRatio={ASPECT_RATIO}
118111
/>
119112
</FrontSection>
120113
);
121114
};
122-
SevenCardFast.storyName = 'Fast - Seven cards';
123115

124-
export const EightCardFast = () => {
116+
export const EightCards = () => {
125117
return (
126-
<FrontSection title="Fast - Eight cards" editionId="UK">
118+
<FrontSection title="Eight cards" editionId="UK">
127119
<DecideContainerByTrails
128120
trails={trails.slice(0, 8)}
129-
speed="fast"
130-
imageLoading="eager"
131-
aspectRatio={ASPECT_RATIO}
132-
/>
133-
</FrontSection>
134-
);
135-
};
136-
137-
EightCardFast.storyName = 'Fast - Eight cards';
138-
139-
export const TwelveCardFast = () => {
140-
return (
141-
<FrontSection title="Fast - Twelve cards" editionId="UK">
142-
<DecideContainerByTrails
143-
trails={trails.slice(0, 12)}
144-
speed="fast"
145-
imageLoading="eager"
146-
aspectRatio={ASPECT_RATIO}
147-
/>
148-
</FrontSection>
149-
);
150-
};
151-
TwelveCardFast.storyName = 'Fast - Twelve cards';
152-
153-
export const OneCardSlow = () => {
154-
return (
155-
<FrontSection title="Slow - One card" editionId="UK">
156-
<DecideContainerByTrails
157-
trails={trails.slice(0, 1)}
158-
speed="slow"
159-
imageLoading="eager"
160-
aspectRatio={ASPECT_RATIO}
161-
/>
162-
</FrontSection>
163-
);
164-
};
165-
OneCardSlow.storyName = 'Slow - One card';
166-
167-
export const TwoCardSlow = () => {
168-
return (
169-
<FrontSection title="Slow - Two cards" editionId="UK">
170-
<DecideContainerByTrails
171-
trails={trails.slice(0, 2)}
172-
speed="slow"
173-
imageLoading="eager"
174-
aspectRatio={ASPECT_RATIO}
175-
/>
176-
</FrontSection>
177-
);
178-
};
179-
TwoCardSlow.storyName = 'Slow - Two cards';
180-
181-
export const ThreeCardSlow = () => {
182-
return (
183-
<FrontSection title="Slow - Three cards" editionId="UK">
184-
<DecideContainerByTrails
185-
trails={trails.slice(0, 3)}
186-
speed="slow"
187121
imageLoading="eager"
188122
aspectRatio={ASPECT_RATIO}
189123
/>
190124
</FrontSection>
191125
);
192126
};
193-
ThreeCardSlow.storyName = 'Slow - Three cards';
194127

195-
export const FourCardSlow = () => {
128+
export const NineCards = () => {
196129
return (
197-
<FrontSection title="Slow - Four cards" editionId="UK">
130+
<FrontSection title="Nine cards" editionId="UK">
198131
<DecideContainerByTrails
199-
trails={trails.slice(0, 4)}
200-
speed="slow"
132+
trails={trails.slice(0, 9)}
201133
imageLoading="eager"
202134
aspectRatio={ASPECT_RATIO}
203135
/>
204136
</FrontSection>
205137
);
206138
};
207-
FourCardSlow.storyName = 'Slow - Four cards';
208139

209-
export const FiveCardSlow = () => {
140+
export const TenCards = () => {
210141
return (
211-
<FrontSection title="Slow - Five cards" editionId="UK">
142+
<FrontSection title="Ten cards" editionId="UK">
212143
<DecideContainerByTrails
213-
trails={trails.slice(0, 5)}
214-
speed="slow"
144+
trails={trails.slice(0, 10)}
215145
imageLoading="eager"
216146
aspectRatio={ASPECT_RATIO}
217147
/>
218148
</FrontSection>
219149
);
220150
};
221-
FiveCardSlow.storyName = 'Slow - Five cards';
222151

223-
export const SixCardSlow = () => {
152+
export const ElevenCards = () => {
224153
return (
225-
<FrontSection title="Slow - Six cards" editionId="UK">
154+
<FrontSection title="Eleven cards" editionId="UK">
226155
<DecideContainerByTrails
227-
trails={trails.slice(0, 6)}
228-
speed="slow"
156+
trails={trails.slice(0, 11)}
229157
imageLoading="eager"
230158
aspectRatio={ASPECT_RATIO}
231159
/>
232160
</FrontSection>
233161
);
234162
};
235-
SixCardSlow.storyName = 'Slow - Six cards';
236-
237-
export const SevenCardSlow = () => {
238-
return (
239-
<FrontSection title="Slow - Seven cards" editionId="UK">
240-
<DecideContainerByTrails
241-
trails={trails.slice(0, 7)}
242-
speed="slow"
243-
imageLoading="eager"
244-
aspectRatio={ASPECT_RATIO}
245-
/>
246-
</FrontSection>
247-
);
248-
};
249-
SevenCardSlow.storyName = 'Slow - Seven cards';
250-
251-
export const EightCardSlow = () => {
252-
return (
253-
<FrontSection title="Slow - Eight cards" editionId="UK">
254-
<DecideContainerByTrails
255-
trails={trails.slice(0, 8)}
256-
speed="slow"
257-
imageLoading="eager"
258-
aspectRatio={ASPECT_RATIO}
259-
/>
260-
</FrontSection>
261-
);
262-
};
263-
264-
EightCardSlow.storyName = 'Slow - Eight cards';
265163

266-
export const TwelveCardSlow = () => {
164+
export const TwelveCards = () => {
267165
return (
268-
<FrontSection title="Slow - Twelve cards" editionId="UK">
166+
<FrontSection title="Twelve cards" editionId="UK">
269167
<DecideContainerByTrails
270168
trails={trails.slice(0, 12)}
271-
speed="slow"
272169
imageLoading="eager"
273170
aspectRatio={ASPECT_RATIO}
274171
/>
275172
</FrontSection>
276173
);
277174
};
278-
TwelveCardSlow.storyName = 'Slow - Twelve cards';
279175

280-
export const FiveCardWithSingleBranding = () => {
176+
export const FiveCardsWithSingleBranding = () => {
281177
return (
282178
<FrontSection
283179
title="Five cards with single branding"
@@ -308,25 +204,23 @@ export const FiveCardWithSingleBranding = () => {
308204
>
309205
<DecideContainerByTrails
310206
trails={singleBrandedTrails}
311-
speed="fast"
312207
imageLoading="eager"
313208
aspectRatio={ASPECT_RATIO}
314209
/>
315210
</FrontSection>
316211
);
317212
};
318-
FiveCardWithSingleBranding.storyName = 'Five cards with single branding';
213+
FiveCardsWithSingleBranding.storyName = 'Five cards with single branding';
319214

320-
export const FiveCardWithMultipleBranding = () => {
215+
export const FiveCardsWithMultipleBranding = () => {
321216
return (
322217
<FrontSection title="Five cards with multiple branding" editionId="UK">
323218
<DecideContainerByTrails
324219
trails={multipleBrandedTrails}
325-
speed="fast"
326220
imageLoading="eager"
327221
aspectRatio={ASPECT_RATIO}
328222
/>
329223
</FrontSection>
330224
);
331225
};
332-
FiveCardWithMultipleBranding.storyName = 'Five cards with multiple branding';
226+
FiveCardsWithMultipleBranding.storyName = 'Five cards with multiple branding';

0 commit comments

Comments
 (0)