Skip to content

Commit 8331892

Browse files
domlanderdomlander
authored
Merge pull request #13633 from guardian/doml/new-pills
Media card pills - updated designs
2 parents bf75964 + 8a2bb9a commit 8331892

File tree

13 files changed

+169
-83
lines changed

13 files changed

+169
-83
lines changed

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -506,15 +506,14 @@ export const Card = ({
506506
<>
507507
{mainMedia.duration === 0 ? (
508508
<Pill
509-
content={'Live'}
509+
content="Live"
510510
icon={<div css={liveBulletStyles} />}
511-
iconSize="small"
512511
/>
513512
) : (
514513
<Pill
515514
content={secondsToDuration(mainMedia.duration)}
516-
icon={<SvgMediaControlsPlay />}
517-
iconSize="small"
515+
icon={<SvgMediaControlsPlay width={18} />}
516+
prefix="Video"
518517
/>
519518
)}
520519
</>
@@ -523,16 +522,15 @@ export const Card = ({
523522
{mainMedia?.type === 'Audio' && (
524523
<Pill
525524
content={mainMedia.duration}
526-
icon={<SvgMediaControlsPlay />}
527-
iconSize="small"
525+
icon={<SvgMediaControlsPlay width={18} />}
526+
prefix="Podcast"
528527
/>
529528
)}
530529
{mainMedia?.type === 'Gallery' && (
531530
<Pill
532-
prefix="Gallery"
533531
content={mainMedia.count}
534532
icon={<SvgCamera />}
535-
iconSide="right"
533+
prefix="Gallery"
536534
/>
537535
)}
538536
{isNewsletter && <Pill content="Newsletter" />}
@@ -1021,8 +1019,11 @@ export const Card = ({
10211019
content={secondsToDuration(
10221020
mainMedia.duration,
10231021
)}
1024-
icon={<SvgMediaControlsPlay />}
1025-
iconSize={'small'}
1022+
icon={
1023+
<SvgMediaControlsPlay
1024+
width={18}
1025+
/>
1026+
}
10261027
/>
10271028
</div>
10281029
)}

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,6 @@ import { palette } from '../../../palette';
55
import ClockIcon from '../../../static/icons/clock.svg';
66
import { DateTime } from '../../DateTime';
77

8-
type Props = {
9-
absoluteServerTimes: boolean;
10-
webPublication: {
11-
date: string;
12-
isWithinTwelveHours: boolean;
13-
};
14-
showClock?: boolean;
15-
isTagPage: boolean;
16-
colour?: string;
17-
};
18-
198
const ageStyles = (colour: string) => {
209
return css`
2110
${textSansBold12};
@@ -32,11 +21,22 @@ const ageStyles = (colour: string) => {
3221
`;
3322
};
3423

24+
type Props = {
25+
absoluteServerTimes: boolean;
26+
webPublication: {
27+
date: string;
28+
isWithinTwelveHours: boolean;
29+
};
30+
isTagPage: boolean;
31+
showClock?: boolean;
32+
colour?: string;
33+
};
34+
3535
export const CardAge = ({
36-
webPublication,
37-
showClock,
3836
absoluteServerTimes,
37+
webPublication,
3938
isTagPage,
39+
showClock,
4040
colour = palette('--card-footer-text'),
4141
}: Props) => {
4242
if (timeAgo(new Date(webPublication.date).getTime()) === false) {

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import {
3+
ArticleDesign,
4+
ArticleDisplay,
5+
ArticleSpecial,
6+
Pillar,
7+
} from '../../../lib/articleFormat';
8+
import { CardFooter as CardFooterComponent } from './CardFooter';
9+
10+
const meta = {
11+
component: CardFooterComponent,
12+
title: 'Components/Card Footer',
13+
} satisfies Meta<typeof CardFooterComponent>;
14+
15+
export default meta;
16+
17+
type Story = StoryObj<typeof meta>;
18+
19+
export const WithAge = {
20+
args: {
21+
format: {
22+
display: ArticleDisplay.Standard,
23+
design: ArticleDesign.Comment,
24+
theme: Pillar.Opinion,
25+
},
26+
showLivePlayable: false,
27+
age: <p>19h ago</p>,
28+
},
29+
} satisfies Story;
30+
31+
export const WithGallery = {
32+
...WithAge,
33+
args: {
34+
...WithAge.args,
35+
mainMedia: {
36+
type: 'Gallery',
37+
count: '14',
38+
},
39+
},
40+
} satisfies Story;
41+
42+
export const WithAudio = {
43+
...WithAge,
44+
args: {
45+
...WithAge.args,
46+
mainMedia: {
47+
type: 'Audio',
48+
duration: '12:34',
49+
},
50+
},
51+
} satisfies Story;
52+
53+
export const WithVideo = {
54+
...WithAge,
55+
args: {
56+
...WithAge.args,
57+
mainMedia: {
58+
type: 'Video',
59+
duration: 972,
60+
},
61+
},
62+
} satisfies Story;
63+
64+
export const WithNewsletter = {
65+
...WithAge,
66+
args: {
67+
...WithAge.args,
68+
isNewsletter: true,
69+
},
70+
} satisfies Story;
71+
72+
export const WithBranding = {
73+
...WithAge,
74+
args: {
75+
...WithAge.args,
76+
format: {
77+
...WithAge.args.format,
78+
theme: ArticleSpecial.Labs,
79+
},
80+
cardBranding: <p>Card branding</p>,
81+
},
82+
} satisfies Story;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const CardFooter = ({
7575
commentCount,
7676
cardBranding,
7777
mainMedia,
78-
isNewsletter = false,
78+
isNewsletter,
7979
shouldReserveSpace,
8080
}: Props) => {
8181
if (showLivePlayable) return null;
@@ -91,7 +91,8 @@ export const CardFooter = ({
9191
content={
9292
<time>{secondsToDuration(mainMedia.duration)}</time>
9393
}
94-
icon={<SvgMediaControlsPlay />}
94+
prefix="Video"
95+
icon={<SvgMediaControlsPlay width={18} />}
9596
/>
9697
</footer>
9798
);
@@ -102,7 +103,8 @@ export const CardFooter = ({
102103
<footer css={contentStyles}>
103104
<Pill
104105
content={<time>{mainMedia.duration}</time>}
105-
icon={<SvgMediaControlsPlay />}
106+
prefix="Podcast"
107+
icon={<SvgMediaControlsPlay width={18} />}
106108
/>
107109
</footer>
108110
);
@@ -115,7 +117,6 @@ export const CardFooter = ({
115117
content={mainMedia.count}
116118
prefix="Gallery"
117119
icon={<SvgCamera />}
118-
iconSide="right"
119120
/>
120121
</footer>
121122
);

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@ const narrowStyles = css`
5454
left: calc(50% - ${narrowPlayIconWidth / 2}px);
5555
width: ${narrowPlayIconWidth}px;
5656
height: ${narrowPlayIconWidth}px;
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
5760
background-color: ${palette('--feature-card-play-icon-background')};
5861
opacity: 0.7;
5962
border-radius: 50%;
@@ -92,7 +95,7 @@ export const PlayIcon = ({
9295
]}
9396
>
9497
{iconWidth === 'narrow' ? (
95-
<NarrowPlayIcon theme={theme} />
98+
<NarrowPlayIcon width={40} theme={theme} />
9699
) : (
97100
<WidePlayIcon theme={theme} />
98101
)}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ const decideSplashCardProperties = (
172172
}
173173
};
174174

175-
export const SplashCardLayout = ({
175+
const SplashCardLayout = ({
176176
cards,
177177
containerPalette,
178178
showAge,
@@ -347,7 +347,7 @@ const decideCardProperties = (
347347
}
348348
};
349349

350-
export const BoostedCardLayout = ({
350+
const BoostedCardLayout = ({
351351
cards,
352352
containerPalette,
353353
showAge,
@@ -431,7 +431,7 @@ export const BoostedCardLayout = ({
431431
);
432432
};
433433

434-
export const StandardCardLayout = ({
434+
const StandardCardLayout = ({
435435
cards,
436436
containerPalette,
437437
showAge,

‎dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export const WithPodcastSeriesImage: Story = {
116116
},
117117
mainMedia: {
118118
type: 'Audio',
119-
duration: '31.76',
119+
duration: '31:16',
120120
podcastImage: {
121121
src: 'https://uploads.guim.co.uk/2024/08/01/FootballWeekly_FINAL_3000_(1).jpg',
122122
altText: 'Football Weekly',

‎dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -195,23 +195,22 @@ const MediaPill = ({ mainMedia }: { mainMedia: MainMedia }) => (
195195
{mainMedia.type === 'Video' && (
196196
<Pill
197197
content={secondsToDuration(mainMedia.duration)}
198-
icon={<SvgMediaControlsPlay />}
199-
iconSize="small"
198+
prefix="Video"
199+
icon={<SvgMediaControlsPlay width={18} />}
200200
/>
201201
)}
202202
{mainMedia.type === 'Audio' && (
203203
<Pill
204204
content={mainMedia.duration}
205-
icon={<SvgMediaControlsPlay />}
206-
iconSize="small"
205+
prefix="Podcast"
206+
icon={<SvgMediaControlsPlay width={18} />}
207207
/>
208208
)}
209209
{mainMedia.type === 'Gallery' && (
210210
<Pill
211-
prefix="Gallery"
212211
content={mainMedia.count}
212+
prefix="Gallery"
213213
icon={<SvgCamera />}
214-
iconSide="right"
215214
/>
216215
)}
217216
</div>

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const Default = {} satisfies Story;
2020
export const WithVideoIcon = {
2121
args: {
2222
content: <time>3:35</time>,
23-
icon: <SvgMediaControlsPlay />,
23+
icon: <SvgMediaControlsPlay width={18} />,
2424
},
2525
} satisfies Story;
2626

@@ -32,9 +32,17 @@ export const WithGalleryIcon = {
3232
},
3333
} satisfies Story;
3434

35+
export const WithVideoIconAndPrefix = {
36+
args: {
37+
...WithVideoIcon.args,
38+
prefix: 'Video',
39+
},
40+
} satisfies Story;
41+
3542
export const WithGalleryIconAndPrefix = {
3643
args: {
3744
...WithGalleryIcon.args,
3845
prefix: 'Gallery',
46+
iconSide: 'left',
3947
},
4048
} satisfies Story;

0 commit comments

Comments
 (0)