Skip to content

Commit c01d797

Browse files
cemms1cemms1
committed
apply new labs header logic to all pages with labs headers present
1 parent eceff92 commit c01d797

File tree

7 files changed

+101
-64
lines changed

7 files changed

+101
-64
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const logoStyles = css`
118118
`;
119119

120120
export const LabsPageHeader = ({ editionId }: { editionId: EditionId }) => (
121-
<div css={headerStyles}>
121+
<div id="labs-header" css={headerStyles}>
122122
<div css={headerInnerStyles}>
123123
<div css={leftContentStyles}>
124124
<div

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

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { FrontSection } from '../components/FrontSection';
2121
import { HeaderAdSlot } from '../components/HeaderAdSlot';
2222
import { Island } from '../components/Island';
2323
import { LabsHeader } from '../components/LabsHeader';
24+
import { LabsPageHeader } from '../components/LabsPageHeader';
2425
import { LabsSection } from '../components/LabsSection';
2526
import { Masthead } from '../components/Masthead/Masthead';
2627
import { Section } from '../components/Section';
@@ -232,17 +233,20 @@ export const FrontLayout = ({ front, NAV }: Props) => {
232233
}
233234
/>
234235

235-
{isPaidContent && (
236-
<Section
237-
fullWidth={true}
238-
showTopBorder={false}
239-
backgroundColour={sourcePalette.labs[400]}
240-
borderColour={sourcePalette.neutral[60]}
241-
sectionId="labs-header"
242-
>
243-
<LabsHeader editionId={editionId} />
244-
</Section>
245-
)}
236+
{isPaidContent &&
237+
(showLabsRedesign ? (
238+
<LabsPageHeader editionId={editionId} />
239+
) : (
240+
<Section
241+
fullWidth={true}
242+
showTopBorder={false}
243+
backgroundColour={sourcePalette.labs[400]}
244+
borderColour={sourcePalette.neutral[60]}
245+
sectionId="labs-header"
246+
>
247+
<LabsHeader editionId={editionId} />
248+
</Section>
249+
))}
246250
</div>
247251

248252
<main

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

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisab
1111
import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.importable';
1212
import { Island } from '../components/Island';
1313
import { LabsHeader } from '../components/LabsHeader';
14+
import { LabsPageHeader } from '../components/LabsPageHeader';
1415
import { Masthead } from '../components/Masthead/Masthead';
1516
import { Section } from '../components/Section';
1617
import { StickyBottomBanner } from '../components/StickyBottomBanner.importable';
@@ -200,6 +201,8 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => {
200201

201202
const renderAds = canRenderAds(article);
202203

204+
const { guardianLabsRedesign = false } = article.config.switches;
205+
203206
return (
204207
<>
205208
{article.isLegacyInteractive && (
@@ -233,16 +236,21 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => {
233236

234237
{format.theme === ArticleSpecial.Labs && (
235238
<Stuck zIndex="subNavBanner">
236-
<Section
237-
fullWidth={true}
238-
showTopBorder={false}
239-
padSides={true}
240-
backgroundColour={sourcePalette.labs[400]}
241-
borderColour={sourcePalette.neutral[60]}
242-
sectionId="labs-header"
243-
>
244-
<LabsHeader editionId={editionId} />
245-
</Section>
239+
{guardianLabsRedesign ? (
240+
<LabsPageHeader editionId={editionId} />
241+
) : (
242+
<Section
243+
fullWidth={true}
244+
showTopBorder={false}
245+
backgroundColour={
246+
sourcePalette.labs[400]
247+
}
248+
borderColour={sourcePalette.neutral[60]}
249+
sectionId="labs-header"
250+
>
251+
<LabsHeader editionId={editionId} />
252+
</Section>
253+
)}
246254
</Stuck>
247255
)}
248256
</header>

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { GalleryImage } from '../components/GalleryImage';
2424
import { HeaderAdSlot } from '../components/HeaderAdSlot';
2525
import { Island } from '../components/Island';
2626
import { LabsHeader } from '../components/LabsHeader';
27+
import { LabsPageHeader } from '../components/LabsPageHeader';
2728
import { MainMediaGallery } from '../components/MainMediaGallery';
2829
import { Masthead } from '../components/Masthead/Masthead';
2930
import { MostViewedFooterData } from '../components/MostViewedFooterData.importable';
@@ -165,7 +166,8 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
165166
const showComments =
166167
frontendData.isCommentable && !frontendData.config.isPaidContent;
167168

168-
const { absoluteServerTimes = false } = switches;
169+
const { absoluteServerTimes = false, guardianLabsRedesign = false } =
170+
switches;
169171

170172
return (
171173
<>
@@ -179,9 +181,11 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
179181
pageId={frontendData.pageId}
180182
/>
181183
) : null}
184+
182185
<GalleryLabsHeader
183186
theme={format.theme}
184187
editionId={frontendData.editionId}
188+
showLabsRedesign={guardianLabsRedesign}
185189
/>
186190

187191
<main
@@ -512,19 +516,23 @@ const BannerAndMasthead = (props: {
512516
const GalleryLabsHeader = (props: {
513517
theme: ArticleTheme;
514518
editionId: EditionId;
519+
showLabsRedesign?: boolean;
515520
}) =>
516521
props.theme === ArticleSpecial.Labs ? (
517522
<Stuck>
518-
<Section
519-
fullWidth={true}
520-
showTopBorder={false}
521-
backgroundColour={sourcePalette.labs[400]}
522-
borderColour={sourcePalette.neutral[60]}
523-
sectionId="labs-header"
524-
element="aside"
525-
>
526-
<LabsHeader editionId={props.editionId} />
527-
</Section>
523+
{props.showLabsRedesign ? (
524+
<LabsPageHeader editionId={props.editionId} />
525+
) : (
526+
<Section
527+
fullWidth={true}
528+
showTopBorder={false}
529+
backgroundColour={sourcePalette.labs[400]}
530+
borderColour={sourcePalette.neutral[60]}
531+
sectionId="labs-header"
532+
>
533+
<LabsHeader editionId={props.editionId} />
534+
</Section>
535+
)}
528536
</Stuck>
529537
) : null;
530538

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { HeadlineByline } from '../components/HeadlineByline';
2929
import { Hide } from '../components/Hide';
3030
import { Island } from '../components/Island';
3131
import { LabsHeader } from '../components/LabsHeader';
32+
import { LabsPageHeader } from '../components/LabsPageHeader';
3233
import { MainMedia } from '../components/MainMedia';
3334
import { Masthead } from '../components/Masthead/Masthead';
3435
import { minHeaderHeightPx } from '../components/Masthead/Titlepiece/constants';
@@ -308,7 +309,8 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
308309

309310
const renderAds = canRenderAds(article);
310311

311-
const { absoluteServerTimes = false } = article.config.switches;
312+
const { absoluteServerTimes = false, guardianLabsRedesign = false } =
313+
article.config.switches;
312314

313315
return (
314316
<>
@@ -334,15 +336,19 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
334336

335337
{format.theme === ArticleSpecial.Labs && (
336338
<Stuck zIndex="subNavBanner">
337-
<Section
338-
fullWidth={true}
339-
showTopBorder={false}
340-
backgroundColour={sourcePalette.labs[400]}
341-
borderColour={sourcePalette.neutral[60]}
342-
sectionId="labs-header"
343-
>
344-
<LabsHeader editionId={editionId} />
345-
</Section>
339+
{guardianLabsRedesign ? (
340+
<LabsPageHeader editionId={editionId} />
341+
) : (
342+
<Section
343+
fullWidth={true}
344+
showTopBorder={false}
345+
backgroundColour={sourcePalette.labs[400]}
346+
borderColour={sourcePalette.neutral[60]}
347+
sectionId="labs-header"
348+
>
349+
<LabsHeader editionId={editionId} />
350+
</Section>
351+
)}
346352
</Stuck>
347353
)}
348354

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisab
2828
import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.importable';
2929
import { Island } from '../components/Island';
3030
import { LabsHeader } from '../components/LabsHeader';
31+
import { LabsPageHeader } from '../components/LabsPageHeader';
3132
import { MainMedia } from '../components/MainMedia';
3233
import { Masthead } from '../components/Masthead/Masthead';
3334
import { MostViewedFooterData } from '../components/MostViewedFooterData.importable';
@@ -239,7 +240,8 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
239240

240241
const contributionsServiceUrl = getContributionsServiceUrl(article);
241242

242-
const { absoluteServerTimes = false } = article.config.switches;
243+
const { absoluteServerTimes = false, guardianLabsRedesign = false } =
244+
article.config.switches;
243245

244246
const renderAds = canRenderAds(article);
245247

@@ -299,15 +301,19 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
299301

300302
{format.theme === ArticleSpecial.Labs && (
301303
<Stuck zIndex="subNavBanner">
302-
<Section
303-
fullWidth={true}
304-
showTopBorder={false}
305-
backgroundColour={sourcePalette.labs[400]}
306-
borderColour={sourcePalette.neutral[60]}
307-
sectionId="labs-header"
308-
>
309-
<LabsHeader editionId={editionId} />
310-
</Section>
304+
{guardianLabsRedesign ? (
305+
<LabsPageHeader editionId={editionId} />
306+
) : (
307+
<Section
308+
fullWidth={true}
309+
showTopBorder={false}
310+
backgroundColour={sourcePalette.labs[400]}
311+
borderColour={sourcePalette.neutral[60]}
312+
sectionId="labs-header"
313+
>
314+
<LabsHeader editionId={editionId} />
315+
</Section>
316+
)}
311317
</Stuck>
312318
)}
313319

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

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { GuardianLabsLines } from '../components/GuardianLabsLines';
3131
import { HeaderAdSlot } from '../components/HeaderAdSlot';
3232
import { Island } from '../components/Island';
3333
import { LabsHeader } from '../components/LabsHeader';
34+
import { LabsPageHeader } from '../components/LabsPageHeader';
3435
import { MainMedia } from '../components/MainMedia';
3536
import { Masthead } from '../components/Masthead/Masthead';
3637
import { MostViewedFooterData } from '../components/MostViewedFooterData.importable';
@@ -365,7 +366,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
365366
(parse(article.slotMachineFlags ?? '').showBodyEnd ||
366367
article.config.switches.slotBodyEnd);
367368

368-
const { absoluteServerTimes = false } = article.config.switches;
369+
const { absoluteServerTimes = false, guardianLabsRedesign = false } =
370+
article.config.switches;
369371

370372
// TODO:
371373
// 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render
@@ -431,16 +433,19 @@ export const StandardLayout = (props: WebProps | AppProps) => {
431433

432434
{format.theme === ArticleSpecial.Labs && (
433435
<Stuck zIndex="subNavBanner">
434-
<Section
435-
fullWidth={true}
436-
showTopBorder={false}
437-
backgroundColour={sourcePalette.labs[400]}
438-
borderColour={sourcePalette.neutral[60]}
439-
sectionId="labs-header"
440-
element="aside"
441-
>
442-
<LabsHeader editionId={editionId} />
443-
</Section>
436+
{guardianLabsRedesign ? (
437+
<LabsPageHeader editionId={editionId} />
438+
) : (
439+
<Section
440+
fullWidth={true}
441+
showTopBorder={false}
442+
backgroundColour={sourcePalette.labs[400]}
443+
borderColour={sourcePalette.neutral[60]}
444+
sectionId="labs-header"
445+
>
446+
<LabsHeader editionId={editionId} />
447+
</Section>
448+
)}
444449
</Stuck>
445450
)}
446451

0 commit comments

Comments
 (0)