Skip to content

Commit e06909d

Browse files
marjisoundmarjisound
committed
Merge branch 'main' into add-gallery-affiliate-link-disclaimer
2 parents 1a62843 + 17939b2 commit e06909d

15 files changed

+180
-182
lines changed

‎dotcom-rendering/fixtures/manual/sign-in-gate.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const mockAuxiaResponseDismissible = {
88
treatmentContent: JSON.stringify({
99
title: 'Like uninterrupted reading?\nSo do we. Sign in.',
1010
subtitle:
11-
"Sign in to keep reading. It's free, and we'll bring you right back here in under a minute.",
11+
"Sign in to keep reading.\n\nIt's free, and we'll bring you right back here in under a minute.",
1212
body: '',
1313
first_cta_name: 'Create a free account',
1414
first_cta_link: 'https://profile.theguardian.com/register',

‎dotcom-rendering/src/components/AdSlot.web.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,12 +135,17 @@ const topAboveNavContainerVariantStyles = css`
135135
content: '';
136136
position: absolute;
137137
height: 250px;
138-
width: 970px;
138+
width: 728px;
139139
top: ${labelHeight}px;
140140
left: 50%;
141141
transform: translateX(-50%);
142142
background-color: ${palette.neutral[93]};
143143
}
144+
${from.desktop} {
145+
::before {
146+
width: 970px;
147+
}
148+
}
144149
}
145150
`;
146151

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,10 @@ const getDataLinkNameCarouselButton = (
425425
return `${isVideoContainer ? 'video-container' : arrowName}-${direction}`;
426426
};
427427

428+
const cleanTitle = (title: string) => {
429+
return title.replace('More', '').trimStart();
430+
};
431+
428432
const Title = ({
429433
title,
430434
isCuratedContent,
@@ -453,7 +457,9 @@ const Title = ({
453457
) : (
454458
<h2 css={headerStyles}>
455459
{isCuratedContent ? 'More from ' : ''}
456-
<span css={titleStyle(isCuratedContent)}>{title}</span>
460+
<span css={titleStyle(isCuratedContent)}>
461+
{isCuratedContent ? cleanTitle(title) : title}
462+
</span>
457463
</h2>
458464
);
459465

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ const standardCards = standards.map((card, index) => {
5454

5555
switch (index + 1) {
5656
case 2:
57-
return enhanceCardFields({ supportingContent: getSublinks(2) });
57+
return enhanceCardFields({
58+
supportingContent: getSublinks(2),
59+
});
5860
case 3:
5961
return enhanceCardFields({
6062
boostLevel: 'boost',
@@ -437,13 +439,13 @@ const slideshowCard = {
437439
],
438440
} satisfies DCRFrontCard;
439441

440-
export const DefaultSplashWithLiveUpdatesAndSlideshow: Story = {
441-
name: 'Standard splash with live updates and slideshow',
442+
// Boost level is ignored for slideshows
443+
export const SplashWithLiveUpdatesAndSlideshow: Story = {
444+
name: 'Splash with live updates and slideshow',
442445
args: {
443-
frontSectionTitle: 'Standard splash with live updates and slideshow',
446+
frontSectionTitle: 'Splash with live updates and slideshow',
444447
groupedTrails: {
445448
...emptyGroupedTrails,
446-
447449
splash: [{ ...slideshowCard }],
448450
},
449451
},
@@ -460,6 +462,21 @@ export const StandardCards: Story = {
460462
},
461463
};
462464

465+
export const StandardBoostedMediaCardWithSublinks: Story = {
466+
name: 'Standard boosted media card with sublinks',
467+
args: {
468+
frontSectionTitle: 'Standard boosted media card with sublinks',
469+
groupedTrails: {
470+
...emptyGroupedTrails,
471+
standard: [trails[1]].map((card) => ({
472+
...card,
473+
boostLevel: 'boost',
474+
supportingContent: getSublinks(2),
475+
})),
476+
},
477+
},
478+
};
479+
463480
export const OpinionStandardCards: Story = {
464481
name: 'Opinion standard cards',
465482
args: {

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

Lines changed: 35 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@ import { palette } from '../../palette';
99
import type { StarRating as Rating } from '../../types/content';
1010
import type { DCRFrontImage } from '../../types/front';
1111
import type { MainMedia } from '../../types/mainMedia';
12-
import { Avatar } from '../Avatar';
1312
import { CardLink } from '../Card/components/CardLink';
1413
import { CardHeadline } from '../CardHeadline';
1514
import type { Loading } from '../CardPicture';
16-
import { CardPicture } from '../CardPicture';
1715
import { FormatBoundary } from '../FormatBoundary';
1816
import { Pill } from '../Pill';
1917
import { StarRating } from '../StarRating/StarRating';
2018
import { SvgMediaControlsPlay } from '../SvgMediaControlsPlay';
19+
import { HighlightsCardImage } from './HighlightsCardImage';
2120

2221
export type HighlightsCardProps = {
2322
linkTo: string;
@@ -35,7 +34,7 @@ export type HighlightsCardProps = {
3534
starRating?: Rating;
3635
};
3736

38-
const gridContainer = css`
37+
const container = css`
3938
display: grid;
4039
background-color: ${palette('--highlights-container-background')};
4140
/** Relative positioning is required to absolutely
@@ -132,90 +131,6 @@ const starWrapper = css`
132131
align-self: flex-end;
133132
`;
134133

135-
const decideImage = (
136-
imageLoading: Loading,
137-
image?: DCRFrontImage,
138-
avatarUrl?: string,
139-
byline?: string,
140-
mainMedia?: MainMedia,
141-
) => {
142-
if (!image && !avatarUrl) {
143-
return null;
144-
}
145-
146-
if (avatarUrl) {
147-
return (
148-
<Avatar
149-
src={avatarUrl}
150-
alt={byline ?? ''}
151-
shape="cutout"
152-
imageSize="large"
153-
/>
154-
);
155-
}
156-
157-
if (mainMedia?.type === 'Audio' && mainMedia.podcastImage?.src) {
158-
return (
159-
<>
160-
<CardPicture
161-
imageSize="medium"
162-
mainImage={mainMedia.podcastImage.src}
163-
alt={mainMedia.podcastImage.altText}
164-
loading={imageLoading}
165-
isCircular={false}
166-
aspectRatio="1:1"
167-
/>
168-
<div className="image-overlay" />
169-
</>
170-
);
171-
}
172-
173-
if (!image) {
174-
return null;
175-
}
176-
177-
return (
178-
<>
179-
<CardPicture
180-
imageSize="highlights-card"
181-
mainImage={image.src}
182-
alt={image.altText}
183-
loading={imageLoading}
184-
isCircular={true}
185-
aspectRatio="1:1"
186-
/>
187-
{/* This image overlay is styled when the CardLink is hovered */}
188-
<div className="image-overlay circular" />
189-
</>
190-
);
191-
};
192-
193-
const MediaPill = ({ mainMedia }: { mainMedia: MainMedia }) => (
194-
<div css={mediaIcon}>
195-
{mainMedia.type === 'Video' && (
196-
<Pill
197-
content={secondsToDuration(mainMedia.duration)}
198-
prefix="Video"
199-
icon={<SvgMediaControlsPlay width={18} />}
200-
/>
201-
)}
202-
{mainMedia.type === 'Audio' && (
203-
<Pill
204-
content={mainMedia.duration}
205-
prefix="Podcast"
206-
icon={<SvgMediaControlsPlay width={18} />}
207-
/>
208-
)}
209-
{mainMedia.type === 'Gallery' && (
210-
<Pill
211-
content={mainMedia.count}
212-
prefix="Gallery"
213-
icon={<SvgCamera />}
214-
/>
215-
)}
216-
</div>
217-
);
218-
219134
export const HighlightsCard = ({
220135
linkTo,
221136
format,
@@ -235,7 +150,7 @@ export const HighlightsCard = ({
235150

236151
return (
237152
<FormatBoundary format={format}>
238-
<div css={[gridContainer, hoverStyles]}>
153+
<div css={[container, hoverStyles]}>
239154
<CardLink
240155
linkTo={linkTo}
241156
headlineText={headlineText}
@@ -264,24 +179,46 @@ export const HighlightsCard = ({
264179
/>
265180
</div>
266181

267-
{!isUndefined(starRating) ? (
182+
{!isUndefined(starRating) && (
268183
<div css={starWrapper}>
269184
<StarRating rating={starRating} size="small" />
270185
</div>
271-
) : null}
186+
)}
272187

273188
{!!mainMedia && isMediaCard && (
274-
<MediaPill mainMedia={mainMedia} />
189+
<div css={mediaIcon}>
190+
{mainMedia.type === 'Video' && (
191+
<Pill
192+
content={secondsToDuration(mainMedia.duration)}
193+
prefix="Video"
194+
icon={<SvgMediaControlsPlay width={18} />}
195+
/>
196+
)}
197+
{mainMedia.type === 'Audio' && (
198+
<Pill
199+
content={mainMedia.duration}
200+
prefix="Podcast"
201+
icon={<SvgMediaControlsPlay width={18} />}
202+
/>
203+
)}
204+
{mainMedia.type === 'Gallery' && (
205+
<Pill
206+
content={mainMedia.count}
207+
prefix="Gallery"
208+
icon={<SvgCamera />}
209+
/>
210+
)}
211+
</div>
275212
)}
276213

277214
<div css={[imageArea, avatarUrl && avatarAlignmentStyles]}>
278-
{decideImage(
279-
imageLoading,
280-
image,
281-
avatarUrl,
282-
byline,
283-
mainMedia,
284-
)}
215+
<HighlightsCardImage
216+
imageLoading={imageLoading}
217+
image={image}
218+
avatarUrl={avatarUrl}
219+
byline={byline}
220+
mainMedia={mainMedia}
221+
/>
285222
</div>
286223
</div>
287224
</FormatBoundary>

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import type { DCRFrontImage } from '../../types/front';
2+
import type { MainMedia } from '../../types/mainMedia';
3+
import { Avatar } from '../Avatar';
4+
import type { Loading } from '../CardPicture';
5+
import { CardPicture } from '../CardPicture';
6+
7+
type Props = {
8+
imageLoading: Loading;
9+
image?: DCRFrontImage;
10+
avatarUrl?: string;
11+
byline?: string;
12+
mainMedia?: MainMedia;
13+
};
14+
15+
export const HighlightsCardImage = ({
16+
imageLoading,
17+
image,
18+
avatarUrl,
19+
byline,
20+
mainMedia,
21+
}: Props) => {
22+
if (avatarUrl) {
23+
return (
24+
<Avatar
25+
src={avatarUrl}
26+
alt={byline ?? ''}
27+
shape="cutout"
28+
imageSize="large"
29+
/>
30+
);
31+
}
32+
33+
if (image) {
34+
if (mainMedia?.type === 'Audio' && mainMedia.podcastImage?.src) {
35+
return (
36+
<>
37+
<CardPicture
38+
imageSize="medium"
39+
mainImage={mainMedia.podcastImage.src}
40+
alt={mainMedia.podcastImage.altText}
41+
loading={imageLoading}
42+
isCircular={false}
43+
aspectRatio="1:1"
44+
/>
45+
<div className="image-overlay" />
46+
</>
47+
);
48+
}
49+
50+
return (
51+
<>
52+
<CardPicture
53+
imageSize="highlights-card"
54+
mainImage={image.src}
55+
alt={image.altText}
56+
loading={imageLoading}
57+
isCircular={true}
58+
aspectRatio="1:1"
59+
/>
60+
{/* This image overlay is styled when the CardLink is hovered */}
61+
<div className="image-overlay circular" />
62+
</>
63+
);
64+
}
65+
66+
return null;
67+
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,11 +103,11 @@ const containerUrls = {
103103
EUR: 'uk/commentisfree/regular-stories',
104104
},
105105
culture: {
106-
UK: 'uk/culture/regular-stories',
106+
UK: '2771a8ab-952a-4bbc-9aa0-6863fed77712',
107107
US: 'us/culture/regular-stories',
108108
AU: 'au/culture/regular-stories',
109-
INT: 'uk/culture/regular-stories',
110-
EUR: 'uk/culture/regular-stories',
109+
INT: '2771a8ab-952a-4bbc-9aa0-6863fed77712',
110+
EUR: '2771a8ab-952a-4bbc-9aa0-6863fed77712',
111111
},
112112
lifestyle: {
113113
UK: '5011-3940-8793-33a9',

0 commit comments

Comments
 (0)