Skip to content

Commit ede4011

Browse files
DanielCliftonGuardianDanielCliftonGuardian
authored
Merge branch 'main' into skip-chromatic-check
2 parents e3f4dee + c2a48df commit ede4011

17 files changed

Lines changed: 163 additions & 161 deletions

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

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,7 @@ export const WithMediaType = () => {
355355
mainMedia={{ ...mainYoutubeVideo, duration: 30 }}
356356
articleMedia={youtubeMetaData}
357357
headlineText="Video"
358+
mediaPositionOnMobile="top"
358359
/>
359360
</CardWrapper>
360361
<CardWrapper>
@@ -371,6 +372,7 @@ export const WithMediaType = () => {
371372
duration: 0,
372373
}}
373374
headlineText="Video without duration"
375+
mediaPositionOnMobile="top"
374376
/>
375377
</CardWrapper>
376378
<CardWrapper>
@@ -392,8 +394,11 @@ export const WithMediaType = () => {
392394
isLive: true,
393395
}}
394396
headlineText="Live video"
397+
mediaPositionOnMobile="top"
395398
/>
396399
</CardWrapper>
400+
</CardGroup>
401+
<CardGroup>
397402
<CardWrapper>
398403
<Card
399404
{...basicCardProps}
@@ -404,7 +409,8 @@ export const WithMediaType = () => {
404409
}}
405410
mainMedia={{ ...mainSelfHostedVideo }}
406411
articleMedia={{ ...youtubeMetaData }}
407-
headlineText="Video with self-hosted video main media"
412+
headlineText="Self hosted video with Youtube article media"
413+
mediaPositionOnMobile="top"
408414
/>
409415
</CardWrapper>
410416
<CardWrapper>
@@ -418,6 +424,7 @@ export const WithMediaType = () => {
418424
mainMedia={{ ...mainSelfHostedVideo }}
419425
articleMedia={{ ...selfHostedMetaData }}
420426
headlineText="Self hosted video"
427+
mediaPositionOnMobile="top"
421428
/>
422429
</CardWrapper>
423430
</CardGroup>
@@ -433,6 +440,7 @@ export const WithMediaType = () => {
433440
mainMedia={mainAudio}
434441
articleMedia={audioMetaData}
435442
headlineText="Audio"
443+
mediaPositionOnMobile="top"
436444
/>
437445
</CardWrapper>
438446
<CardWrapper>
@@ -446,6 +454,7 @@ export const WithMediaType = () => {
446454
mainMedia={{ ...mainSelfHostedVideo }}
447455
articleMedia={audioMetaData}
448456
headlineText="Audio with self-hosted video main media"
457+
mediaPositionOnMobile="top"
449458
/>
450459
</CardWrapper>
451460
</CardGroup>
@@ -461,6 +470,7 @@ export const WithMediaType = () => {
461470
mainMedia={mainGallery}
462471
articleMedia={galleryMetaData}
463472
headlineText="Gallery"
473+
mediaPositionOnMobile="top"
464474
/>
465475
</CardWrapper>
466476
<CardWrapper>
@@ -474,6 +484,7 @@ export const WithMediaType = () => {
474484
mainMedia={{ ...mainSelfHostedVideo }}
475485
articleMedia={galleryMetaData}
476486
headlineText="Gallery with self-hosted video main media"
487+
mediaPositionOnMobile="top"
477488
/>
478489
</CardWrapper>
479490
</CardGroup>
@@ -496,6 +507,7 @@ export const WithMediaTypeAndSublinks = () => {
496507
articleMedia={{ ...youtubeMetaData, duration: 30 }}
497508
headlineText="Video"
498509
supportingContent={twoSublinks}
510+
mediaPositionOnMobile="top"
499511
/>
500512
</CardWrapper>
501513
<CardWrapper>
@@ -510,6 +522,7 @@ export const WithMediaTypeAndSublinks = () => {
510522
articleMedia={{ ...youtubeMetaData, duration: 0 }}
511523
headlineText="Video without duration"
512524
supportingContent={twoSublinks}
525+
mediaPositionOnMobile="top"
513526
/>
514527
</CardWrapper>
515528
<CardWrapper>
@@ -524,6 +537,7 @@ export const WithMediaTypeAndSublinks = () => {
524537
articleMedia={audioMetaData}
525538
headlineText="Audio"
526539
supportingContent={twoSublinks}
540+
mediaPositionOnMobile="top"
527541
/>
528542
</CardWrapper>
529543
<CardWrapper>
@@ -538,6 +552,7 @@ export const WithMediaTypeAndSublinks = () => {
538552
articleMedia={mainGallery}
539553
headlineText="Gallery"
540554
supportingContent={twoSublinks}
555+
mediaPositionOnMobile="top"
541556
/>
542557
</CardWrapper>
543558
</CardGroup>
@@ -558,6 +573,7 @@ export const WithMediaTypeSpecialReportAlt = () => {
558573
mainMedia={{ ...mainYoutubeVideo, duration: 30 }}
559574
articleMedia={{ ...youtubeMetaData, duration: 30 }}
560575
headlineText="Video"
576+
mediaPositionOnMobile="top"
561577
/>
562578
</CardWrapper>
563579
<CardWrapper>
@@ -571,6 +587,7 @@ export const WithMediaTypeSpecialReportAlt = () => {
571587
mainMedia={mainAudio}
572588
articleMedia={mainAudio}
573589
headlineText="Audio"
590+
mediaPositionOnMobile="top"
574591
/>
575592
</CardWrapper>
576593
<CardWrapper>
@@ -584,6 +601,7 @@ export const WithMediaTypeSpecialReportAlt = () => {
584601
mainMedia={mainGallery}
585602
articleMedia={mainGallery}
586603
headlineText="Gallery"
604+
mediaPositionOnMobile="top"
587605
/>
588606
</CardWrapper>
589607
</CardGroup>
@@ -1207,8 +1225,8 @@ export const WhenYoutubeVideoWithPlayButton = () => {
12071225
design: ArticleDesign.Video,
12081226
theme: Pillar.News,
12091227
}}
1210-
mediaPositionOnDesktop="top"
12111228
mediaSize="jumbo"
1229+
mediaPositionOnDesktop="top"
12121230
mediaPositionOnMobile="top"
12131231
mainMedia={mainYoutubeVideo}
12141232
articleMedia={youtubeMetaData}
@@ -1336,7 +1354,7 @@ export const WhenYoutubeVideoWithPlayButton = () => {
13361354
theme: Pillar.News,
13371355
}}
13381356
mediaPositionOnDesktop="top"
1339-
mediaPositionOnMobile="left"
1357+
mediaPositionOnMobile="top"
13401358
mediaSize="medium"
13411359
mainMedia={mainYoutubeVideo}
13421360
articleMedia={youtubeMetaData}

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

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1019,35 +1019,6 @@ export const Card = ({
10191019
hideCaption={true}
10201020
stickyVideos={false}
10211021
kickerText={kickerText}
1022-
/*
1023-
* TODO: IMPROVE THIS MAPPING
1024-
*
1025-
* Image size defaults to small if not provided. However, if the
1026-
* headline size is large or greater, we want to assume the image
1027-
* is also large so that the play icon is correctly sized.
1028-
*/
1029-
iconSizeOnDesktop={
1030-
[
1031-
'small',
1032-
'medium',
1033-
'large',
1034-
'xlarge',
1035-
'xxlarge',
1036-
].includes(
1037-
headlineSizes?.desktop ??
1038-
'',
1039-
) || mediaSize !== 'small'
1040-
? 'large'
1041-
: 'small'
1042-
}
1043-
iconSizeOnMobile={
1044-
mediaPositionOnMobile ===
1045-
'left' ||
1046-
mediaPositionOnMobile ===
1047-
'right'
1048-
? 'small'
1049-
: 'large'
1050-
}
10511022
hidePillOnMobile={
10521023
mediaPositionOnMobile ===
10531024
'left' ||

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import preview from '../../../../.storybook/preview';
2+
import { PlayIcon as PlayIconComponent } from './PlayIcon';
3+
4+
const meta = preview.meta({
5+
component: PlayIconComponent,
6+
title: 'Components/Play Icon',
7+
});
8+
9+
export const Narrow = meta.story({
10+
args: {
11+
iconWidth: 'narrow',
12+
},
13+
});
14+
15+
export const Wide = meta.story({
16+
render: () => (
17+
<div
18+
/**
19+
* Wide icons are centered and have absolute position.
20+
* This is required so that they are fully visible.
21+
*/
22+
style={{
23+
position: 'relative',
24+
height: '100px',
25+
width: '100px',
26+
}}
27+
>
28+
<PlayIconComponent iconWidth="wide" />
29+
</div>
30+
),
31+
});

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

Lines changed: 11 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,11 @@
11
import { css } from '@emotion/react';
2-
import { from, palette as sourcePalette } from '@guardian/source/foundations';
2+
import { palette as sourcePalette } from '@guardian/source/foundations';
33
import type { ThemeIcon } from '@guardian/source/react-components';
44
import { SvgMediaControlsPlay as WidePlayIcon } from '@guardian/source/react-components';
55
import { SvgMediaControlsPlay as NarrowPlayIcon } from '../../../components/SvgMediaControlsPlay';
66
import { palette } from '../../../palette';
77

8-
export type PlayButtonSize = keyof typeof sizes;
9-
10-
const sizes = {
11-
small: { button: 40, icon: 32 },
12-
large: { button: 80, icon: 72 },
13-
} as const satisfies Record<string, { button: number; icon: number }>;
14-
15-
const wideIconStyles = (
16-
size: PlayButtonSize,
17-
sizeOnMobile: Extract<PlayButtonSize, 'small' | 'large'>,
18-
) => css`
8+
const wideIconStyles = css`
199
display: flex;
2010
align-items: center;
2111
justify-content: center;
@@ -25,21 +15,13 @@ const wideIconStyles = (
2515
transform: translate(-50%, -50%);
2616
background-color: rgba(18, 18, 18, 0.6);
2717
border-radius: 50%;
28-
width: ${sizes[sizeOnMobile].button}px;
29-
height: ${sizes[sizeOnMobile].button}px;
30-
${from.tablet} {
31-
width: ${sizes[size].button}px;
32-
height: ${sizes[size].button}px;
33-
}
18+
width: 80px;
19+
height: 80px;
3420
3521
svg {
3622
transform: translateX(1px);
37-
width: ${sizes[sizeOnMobile].icon}px;
38-
height: ${sizes[sizeOnMobile].icon}px;
39-
${from.tablet} {
40-
width: ${sizes[size].icon}px;
41-
height: ${sizes[size].icon}px;
42-
}
23+
width: 72px;
24+
height: 72px;
4325
}
4426
`;
4527

@@ -60,30 +42,17 @@ const theme = {
6042
fill: sourcePalette.neutral[100],
6143
} satisfies Partial<ThemeIcon>;
6244

63-
type Props =
64-
| {
65-
iconWidth: 'wide';
66-
iconSizeOnDesktop: PlayButtonSize;
67-
iconSizeOnMobile: PlayButtonSize;
68-
}
69-
| {
70-
iconWidth: 'narrow';
71-
iconSizeOnDesktop?: never;
72-
iconSizeOnMobile?: never;
73-
};
45+
type Props = {
46+
iconWidth: 'wide' | 'narrow';
47+
};
7448

75-
export const PlayIcon = ({
76-
iconWidth,
77-
iconSizeOnDesktop,
78-
iconSizeOnMobile,
79-
}: Props) => {
49+
export const PlayIcon = ({ iconWidth }: Props) => {
8050
return (
8151
<div
8252
className="play-icon"
8353
css={[
8454
iconWidth === 'narrow' && narrowStyles,
85-
iconWidth === 'wide' &&
86-
wideIconStyles(iconSizeOnDesktop, iconSizeOnMobile),
55+
iconWidth === 'wide' && wideIconStyles,
8756
]}
8857
>
8958
{iconWidth === 'narrow' ? (

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -533,8 +533,6 @@ export const FeatureCard = ({
533533
kickerText={kickerText}
534534
trailText={trailText}
535535
hidePillOnMobile={false}
536-
iconSizeOnDesktop="large"
537-
iconSizeOnMobile="large"
538536
headlineSizes={headlineSizes}
539537
webPublicationDate={webPublicationDate}
540538
showClock={!!showClock}

0 commit comments

Comments
 (0)