Skip to content

Commit 5417fee

Browse files
deedeehdeedeeh
authored
Merge pull request #14348 from guardian/md/labs-galleries-dcr
Labs Galleries migration to DCR
2 parents cc66632 + f14e17f commit 5417fee

File tree

8 files changed

+164
-74
lines changed

8 files changed

+164
-74
lines changed

‎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/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

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
textSans17,
1313
textSans20,
1414
textSans24,
15+
textSansBold15,
1516
} from '@guardian/source/foundations';
1617
import sanitise from 'sanitize-html';
1718
import { grid } from '../../src/grid';
@@ -83,6 +84,11 @@ const decideFont = ({ display, design, theme }: ArticleFormat) => {
8384
const isLabs = theme === ArticleSpecial.Labs;
8485
switch (design) {
8586
case ArticleDesign.Gallery:
87+
if (isLabs) {
88+
return css`
89+
${textSansBold15};
90+
`;
91+
}
8692
return css`
8793
${headlineBold17}
8894
`;

‎dotcom-rendering/src/layouts/GalleryLayout.tsx

Lines changed: 50 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { DesktopAdSlot, MobileAdSlot } from '../components/GalleryAdSlots';
1919
import { GalleryImage } from '../components/GalleryImage';
2020
import { HeaderAdSlot } from '../components/HeaderAdSlot';
2121
import { Island } from '../components/Island';
22+
import { LabsHeader } from '../components/LabsHeader';
2223
import { MainMediaGallery } from '../components/MainMediaGallery';
2324
import { Masthead } from '../components/Masthead/Masthead';
2425
import { Section } from '../components/Section';
@@ -51,12 +52,6 @@ interface AppProps extends Props {
5152
renderingTarget: 'Apps';
5253
}
5354

54-
const border = css({
55-
borderWidth: 1,
56-
borderStyle: 'solid',
57-
color: '#ccc',
58-
});
59-
6055
const headerStyles = css`
6156
${grid.container}
6257
background-color: ${themePalette('--article-inner-background')};
@@ -140,6 +135,23 @@ const galleryBorder = css`
140135

141136
export const GalleryLayout = (props: WebProps | AppProps) => {
142137
const { gallery, renderingTarget } = props;
138+
139+
const {
140+
config: {
141+
abTests,
142+
idUrl,
143+
mmaUrl,
144+
discussionApiUrl,
145+
idApiUrl,
146+
shortUrlId,
147+
isPreview,
148+
isSensitive,
149+
section,
150+
switches,
151+
},
152+
editionId,
153+
} = gallery.frontendData;
154+
143155
const frontendData = gallery.frontendData;
144156

145157
const isWeb = renderingTarget === 'Web';
@@ -176,36 +188,49 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
176188
padSides={false}
177189
shouldCenter={false}
178190
>
179-
<HeaderAdSlot
180-
abTests={frontendData.config.abTests}
181-
/>
191+
<HeaderAdSlot abTests={abTests} />
182192
</Section>
183193
</Stuck>
184194
)}
185195
<Masthead
186196
nav={props.NAV}
187-
editionId={frontendData.editionId}
188-
idUrl={frontendData.config.idUrl}
189-
mmaUrl={frontendData.config.mmaUrl}
190-
discussionApiUrl={frontendData.config.discussionApiUrl}
191-
idApiUrl={frontendData.config.idApiUrl}
197+
editionId={editionId}
198+
idUrl={idUrl}
199+
mmaUrl={mmaUrl}
200+
discussionApiUrl={discussionApiUrl}
201+
idApiUrl={idApiUrl}
192202
contributionsServiceUrl={
193203
frontendData.contributionsServiceUrl
194204
}
195-
showSubNav={false}
205+
showSubNav={!isLabs}
196206
showSlimNav={true}
197207
hasPageSkin={false}
198208
hasPageSkinContentSelfConstrain={false}
199209
pageId={frontendData.pageId}
200210
/>
201211
</div>
202212
)}
213+
214+
{format.theme === ArticleSpecial.Labs && (
215+
<Stuck>
216+
<Section
217+
fullWidth={true}
218+
showTopBorder={false}
219+
backgroundColour={sourcePalette.labs[400]}
220+
borderColour={sourcePalette.neutral[60]}
221+
sectionId="labs-header"
222+
element="aside"
223+
>
224+
<LabsHeader editionId={editionId} />
225+
</Section>
226+
</Stuck>
227+
)}
228+
203229
<main
204230
css={{
205231
backgroundColor: themePalette('--article-background'),
206232
}}
207233
>
208-
<div css={border}>Labs header</div>
209234
<header css={headerStyles}>
210235
<MainMediaGallery
211236
mainMedia={gallery.mainMedia}
@@ -257,10 +282,8 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
257282
frontendData.webPublicationSecondaryDateDisplay
258283
}
259284
isCommentable={frontendData.isCommentable}
260-
discussionApiUrl={
261-
frontendData.config.discussionApiUrl
262-
}
263-
shortUrlId={frontendData.config.shortUrlId}
285+
discussionApiUrl={discussionApiUrl}
286+
shortUrlId={shortUrlId}
264287
/>
265288
) : null}
266289
{isApps ? (
@@ -281,10 +304,8 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
281304
frontendData.webPublicationSecondaryDateDisplay
282305
}
283306
isCommentable={frontendData.isCommentable}
284-
discussionApiUrl={
285-
frontendData.config.discussionApiUrl
286-
}
287-
shortUrlId={frontendData.config.shortUrlId}
307+
discussionApiUrl={discussionApiUrl}
308+
shortUrlId={shortUrlId}
288309
/>
289310
) : null}
290311
</div>
@@ -396,23 +417,21 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
396417
contributionsServiceUrl={
397418
contributionsServiceUrl
398419
}
399-
idApiUrl={frontendData.config.idApiUrl}
420+
idApiUrl={idApiUrl}
400421
isMinuteArticle={
401422
frontendData.pageType.isMinuteArticle
402423
}
403424
isPaidContent={
404425
frontendData.pageType.isPaidContent
405426
}
406-
isPreview={!!frontendData.config.isPreview}
407-
isSensitive={frontendData.config.isSensitive}
427+
isPreview={!!isPreview}
428+
isSensitive={isSensitive}
408429
pageId={frontendData.pageId}
409-
sectionId={frontendData.config.section}
430+
sectionId={section}
410431
shouldHideReaderRevenue={
411432
frontendData.shouldHideReaderRevenue
412433
}
413-
remoteBannerSwitch={
414-
!!frontendData.config.switches.remoteBanner
415-
}
434+
remoteBannerSwitch={!!switches.remoteBanner}
416435
tags={frontendData.tags}
417436
/>
418437
</Island>

0 commit comments

Comments
 (0)