Skip to content

Commit 7c018c7

Browse files
deedeehdeedeeh
committed
Merge remote-tracking branch 'origin' into dina/ads-in-galleries-dcar
2 parents 361ebe3 + 155e5bd commit 7c018c7

File tree

12 files changed

+186
-438
lines changed

12 files changed

+186
-438
lines changed

‎dotcom-rendering/playwright/tests/affiliate-links.e2e.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ test.describe('Affiliate links', () => {
2121
await expect(disclaimerLocator).toContainText('affiliate link');
2222
});
2323

24-
test('skimlinks should have the attribute rel="sponsored"', async ({
24+
test('skimlinks should have the attribute rel="sponsored noreferrer noopener"', async ({
2525
page,
2626
}) => {
2727
await loadPage({
@@ -34,7 +34,7 @@ test.describe('Affiliate links', () => {
3434
const skimlinkLocator = page.locator(skimlinkSelector).first();
3535
const skimlinkRelAttribute =
3636
await skimlinkLocator.getAttribute('rel');
37-
expect(skimlinkRelAttribute).toBe('sponsored');
37+
expect(skimlinkRelAttribute).toBe('sponsored noreferrer noopener');
3838
});
3939

4040
test('skimlinks should contain the xcust URL parameter', async ({

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,16 @@ const labsFont = css`
152152
}
153153
`;
154154

155+
const labsGalleryFont = css`
156+
${textSansBold34};
157+
line-height: 2.1875rem;
158+
${from.desktop} {
159+
${textSansBold34};
160+
font-size: 50px;
161+
line-height: 3.125rem;
162+
}
163+
`;
164+
155165
const jumboLabsFont = css`
156166
${textSansBold34};
157167
font-size: 3.125rem;
@@ -859,7 +869,7 @@ export const ArticleHeadline = ({
859869
<h1
860870
css={[
861871
format.theme === ArticleSpecial.Labs
862-
? labsFont
872+
? labsGalleryFont
863873
: headlineFont(format),
864874
css`
865875
color: ${themePalette(

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
breakpoints,
55
from,
66
textSans12,
7+
textSansBold12,
78
} from '@guardian/source/foundations';
89
import {
910
ArticleDesign,
@@ -67,6 +68,10 @@ const liveBlogLabelStyle = css`
6768
}
6869
`;
6970

71+
const galleryLabelStyle = css`
72+
${textSansBold12}
73+
`;
74+
7075
const brandingLogoAdvertisingPartnerStyle = css`
7176
padding: 0;
7277
& img {
@@ -208,6 +213,7 @@ type Props = {
208213
export const Branding = ({ branding, format }: Props) => {
209214
const isLiveBlog = format.design === ArticleDesign.LiveBlog;
210215
const isInteractive = format.design === ArticleDesign.Interactive;
216+
const isGallery = format.design === ArticleDesign.Gallery;
211217

212218
const { ophanComponentName, ophanComponentLink } = getOphanComponents({
213219
branding,
@@ -235,6 +241,7 @@ export const Branding = ({ branding, format }: Props) => {
235241
<div
236242
css={[
237243
labelStyle,
244+
isGallery && galleryLabelStyle,
238245
isAdvertisingPartnerOrExclusive &&
239246
labelAdvertisingPartnerStyle,
240247
isLiveBlog && liveBlogLabelStyle,

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,9 @@ const captionLink = css`
211211
`;
212212

213213
const galleryStyles = css`
214-
${grid.column.centre}
214+
${grid.column.centre};
215+
${textSans14};
216+
215217
margin-bottom: 0;
216218
padding-bottom: 6px;
217219
${from.leftCol} {

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

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ import { Island } from '../Island';
4040
import { LatestLinks } from '../LatestLinks.importable';
4141
import { LoopVideo } from '../LoopVideo.importable';
4242
import { Pill } from '../Pill';
43-
import { Slideshow } from '../Slideshow';
4443
import { SlideshowCarousel } from '../SlideshowCarousel.importable';
4544
import { Snap } from '../Snap';
4645
import { SnapCssSandbox } from '../SnapCssSandbox';
@@ -806,42 +805,31 @@ export const Card = ({
806805
imageType={media.type}
807806
imagePositionOnDesktop={imagePositionOnDesktop}
808807
imagePositionOnMobile={imagePositionOnMobile}
809-
hideImageOverlay={
810-
media.type === 'slideshow' && isFlexibleContainer
811-
}
808+
hideImageOverlay={media.type === 'slideshow'}
812809
padImage={isMediaCardOrNewsletter && isBetaContainer}
813810
isBetaContainer={isBetaContainer}
814811
>
815-
{media.type === 'slideshow' &&
816-
(isFlexibleContainer ? (
817-
<div
818-
css={css`
819-
position: relative;
820-
z-index: ${getZIndex(
821-
'card-nested-link',
822-
)};
823-
`}
812+
{media.type === 'slideshow' && (
813+
<div
814+
css={css`
815+
position: relative;
816+
z-index: ${getZIndex('card-nested-link')};
817+
`}
818+
>
819+
<Island
820+
priority="feature"
821+
defer={{ until: 'visible' }}
824822
>
825-
<Island
826-
priority="feature"
827-
defer={{ until: 'visible' }}
828-
>
829-
<SlideshowCarousel
830-
images={media.slideshowImages}
831-
imageSize={imageSize}
832-
hasNavigationBackgroundColour={
833-
!!hasSublinks
834-
}
835-
/>
836-
</Island>
837-
</div>
838-
) : (
839-
<Slideshow
840-
images={media.slideshowImages}
841-
imageSize={imageSize}
842-
isDynamo={isDynamo}
843-
/>
844-
))}
823+
<SlideshowCarousel
824+
images={media.slideshowImages}
825+
imageSize={imageSize}
826+
hasNavigationBackgroundColour={
827+
!!hasSublinks
828+
}
829+
/>
830+
</Island>
831+
</div>
832+
)}
845833
{media.type === 'avatar' && (
846834
<AvatarContainer
847835
imageSize={imageSize}

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
22
import {
33
headlineMedium17,
44
palette as sourcePalette,
5+
textEgyptianItalic17,
56
textSansItalic17,
67
until,
78
} from '@guardian/source/foundations';
@@ -69,10 +70,16 @@ const bylineStyles = (format: ArticleFormat) => {
6970
}
7071
};
7172

72-
const labsBylineStyles = css`
73-
${textSansItalic17};
74-
line-height: 1.4;
75-
`;
73+
const labsBylineStyles = (design: ArticleDesign) => {
74+
const textStyle =
75+
design === ArticleDesign.Gallery
76+
? textEgyptianItalic17
77+
: textSansItalic17;
78+
return css`
79+
${textStyle};
80+
line-height: 1.4;
81+
`;
82+
};
7683

7784
type Props = {
7885
byline?: string;
@@ -96,7 +103,8 @@ export const Contributor = ({ byline, tags, format, source }: Props) => (
96103
}
97104
css={[
98105
bylineStyles(format),
99-
format.theme === ArticleSpecial.Labs && labsBylineStyles,
106+
format.theme === ArticleSpecial.Labs &&
107+
labsBylineStyles(format.design),
100108
format.design === ArticleDesign.LiveBlog &&
101109
standfirstColourBelowDesktop,
102110
]}

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

Lines changed: 46 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
space,
99
textSans17,
1010
textSans20,
11+
textSansBold17,
1112
textSansBold20,
1213
until,
1314
} from '@guardian/source/foundations';
@@ -101,43 +102,60 @@ const invertedStyle = (design: ArticleDesign) => {
101102
};
102103

103104
const fontStyles = (format: ArticleFormat) => {
104-
if (format.design === ArticleDesign.Gallery) {
105-
return css`
106-
${headlineBold17}
107-
${from.desktop} {
108-
${headlineBold20}
109-
line-height: 36px;
110-
}
111-
line-height: 36px;
112-
`;
113-
}
114-
switch (format.theme) {
115-
case ArticleSpecial.Labs:
116-
switch (format.display) {
117-
case ArticleDisplay.Immersive:
105+
switch (format.design) {
106+
case ArticleDesign.Gallery:
107+
switch (format.theme) {
108+
case ArticleSpecial.Labs:
118109
return css`
119-
${textSansBold20};
120-
line-height: 23px;
121-
${from.leftCol} {
122-
line-height: 20px;
110+
${textSansBold17};
111+
line-height: 36px;
112+
${from.desktop} {
113+
${textSansBold20};
114+
/* Overrides the line-height from the font preset */
115+
line-height: 36px;
123116
}
124117
`;
125118
default:
126119
return css`
127-
${textSans20};
128-
line-height: 23px;
129-
${from.leftCol} {
130-
line-height: 20px;
120+
${headlineBold17}
121+
line-height: 36px;
122+
123+
${from.desktop} {
124+
${headlineBold20}
125+
/* Overrides the line-height from the font preset */
126+
line-height: 36px;
131127
}
132128
`;
133129
}
134130
default:
135-
return css`
136-
${headlineBold17}
137-
${from.wide} {
138-
${headlineBold20}
139-
}
140-
`;
131+
switch (format.theme) {
132+
case ArticleSpecial.Labs:
133+
switch (format.display) {
134+
case ArticleDisplay.Immersive:
135+
return css`
136+
${textSansBold20};
137+
line-height: 23px;
138+
${from.leftCol} {
139+
line-height: 20px;
140+
}
141+
`;
142+
default:
143+
return css`
144+
${textSans20};
145+
line-height: 23px;
146+
${from.leftCol} {
147+
line-height: 20px;
148+
}
149+
`;
150+
}
151+
default:
152+
return css`
153+
${headlineBold17}
154+
${from.wide} {
155+
${headlineBold20}
156+
}
157+
`;
158+
}
141159
}
142160
};
143161

0 commit comments

Comments
 (0)