Skip to content

Commit f008656

Browse files
cemms1cemms1
authored
swap divs for fragments in front layout sections (#13613)
1 parent b2979e5 commit f008656

File tree

1 file changed

+78
-64
lines changed

1 file changed

+78
-64
lines changed

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

Lines changed: 78 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
brandBorder,
55
palette as sourcePalette,
66
} from '@guardian/source/foundations';
7+
import { Fragment } from 'react';
78
import { AdSlot } from '../components/AdSlot.web';
89
import { BETA_CONTAINERS } from '../components/Card/Card';
910
import { Carousel } from '../components/Carousel.importable';
@@ -194,65 +195,64 @@ export const FrontLayout = ({ front, NAV }: Props) => {
194195
return (
195196
<>
196197
<div data-print-layout="hide" id="bannerandheader">
197-
<>
198-
{renderAds && (
199-
<Stuck>
200-
<Section
201-
fullWidth={true}
202-
showTopBorder={false}
203-
showSideBorders={false}
204-
padSides={false}
205-
shouldCenter={false}
206-
backgroundColour={schemePalette(
207-
'--article-section-background',
208-
)}
209-
>
210-
<HeaderAdSlot
211-
isPaidContent={!!front.config.isPaidContent}
212-
shouldHideReaderRevenue={false}
213-
/>
214-
</Section>
215-
</Stuck>
216-
)}
217-
218-
{hasPageSkin && (
219-
<AdSlot
220-
data-print-layout="hide"
221-
position="pageskin"
222-
display={ArticleDisplay.Standard}
223-
hasPageskin={hasPageSkin}
224-
/>
225-
)}
226-
227-
<Masthead
228-
nav={NAV}
229-
highlights={<Highlights />}
230-
editionId={front.editionId}
231-
idUrl={front.config.idUrl}
232-
mmaUrl={front.config.mmaUrl}
233-
discussionApiUrl={front.config.discussionApiUrl}
234-
contributionsServiceUrl={contributionsServiceUrl}
235-
idApiUrl={front.config.idApiUrl}
236-
showSubNav={!isPaidContent}
237-
showSlimNav={false}
238-
hasPageSkin={hasPageSkin}
239-
hasPageSkinContentSelfConstrain={true}
240-
pageId={pageId}
241-
/>
242-
243-
{isPaidContent && (
198+
{renderAds && (
199+
<Stuck>
244200
<Section
245201
fullWidth={true}
246202
showTopBorder={false}
247-
backgroundColour={sourcePalette.labs[400]}
248-
borderColour={sourcePalette.neutral[60]}
249-
sectionId="labs-header"
203+
showSideBorders={false}
204+
padSides={false}
205+
shouldCenter={false}
206+
backgroundColour={schemePalette(
207+
'--article-section-background',
208+
)}
250209
>
251-
<LabsHeader editionId={editionId} />
210+
<HeaderAdSlot
211+
isPaidContent={!!front.config.isPaidContent}
212+
shouldHideReaderRevenue={false}
213+
/>
252214
</Section>
253-
)}
254-
</>
215+
</Stuck>
216+
)}
217+
218+
{hasPageSkin && (
219+
<AdSlot
220+
data-print-layout="hide"
221+
position="pageskin"
222+
display={ArticleDisplay.Standard}
223+
hasPageskin={hasPageSkin}
224+
/>
225+
)}
226+
227+
<Masthead
228+
nav={NAV}
229+
highlights={<Highlights />}
230+
editionId={front.editionId}
231+
idUrl={front.config.idUrl}
232+
mmaUrl={front.config.mmaUrl}
233+
discussionApiUrl={front.config.discussionApiUrl}
234+
contributionsServiceUrl={contributionsServiceUrl}
235+
idApiUrl={front.config.idApiUrl}
236+
showSubNav={!isPaidContent}
237+
showSlimNav={false}
238+
hasPageSkin={hasPageSkin}
239+
hasPageSkinContentSelfConstrain={true}
240+
pageId={pageId}
241+
/>
242+
243+
{isPaidContent && (
244+
<Section
245+
fullWidth={true}
246+
showTopBorder={false}
247+
backgroundColour={sourcePalette.labs[400]}
248+
borderColour={sourcePalette.neutral[60]}
249+
sectionId="labs-header"
250+
>
251+
<LabsHeader editionId={editionId} />
252+
</Section>
253+
)}
255254
</div>
255+
256256
<main
257257
data-layout="FrontLayout"
258258
data-link-name={`Front | /${front.pressedPage.id}`}
@@ -267,6 +267,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
267267
/>
268268
</Island>
269269
)}
270+
270271
{filteredCollections.map((collection, index) => {
271272
// Backfills should be added to the end of any curated content
272273
const trails = collection.curated.concat(
@@ -334,7 +335,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
334335

335336
if (collection.collectionType === 'fixed/thrasher') {
336337
return (
337-
<div key={ophanName}>
338+
<Fragment key={ophanName}>
338339
{desktopAdPositions.includes(index) && (
339340
<FrontsBannerAdSlot
340341
renderAds={renderAds}
@@ -344,6 +345,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
344345
)}
345346
/>
346347
)}
348+
347349
{!!trail.embedUri && (
348350
<SnapCssSandbox snapData={trail.snapData}>
349351
<Section
@@ -372,6 +374,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
372374
</Section>
373375
</SnapCssSandbox>
374376
)}
377+
375378
{mobileAdPositions.includes(index) && (
376379
<MobileAdSlot
377380
renderAds={renderAds}
@@ -380,8 +383,10 @@ export const FrontLayout = ({ front, NAV }: Props) => {
380383
)}
381384
/>
382385
)}
386+
383387
{index === merchHighAdPosition && (
384388
<MerchHighAdSlot
389+
key={ophanName}
385390
renderAds={renderAds}
386391
collectionCount={
387392
filteredCollections.length
@@ -392,7 +397,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
392397
}
393398
/>
394399
)}
395-
</div>
400+
</Fragment>
396401
);
397402
}
398403

@@ -406,7 +411,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
406411
: undefined;
407412

408413
return (
409-
<div key={ophanName}>
414+
<Fragment key={ophanName}>
410415
{desktopAdPositions.includes(index) && (
411416
<FrontsBannerAdSlot
412417
renderAds={renderAds}
@@ -416,9 +421,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
416421
)}
417422
/>
418423
)}
424+
419425
<FrontSection
420426
toggleable={true}
421-
key={ophanName}
422427
title={
423428
showMostPopular
424429
? mostPopularTitle
@@ -463,6 +468,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
463468
renderAds={renderAds}
464469
/>
465470
</FrontSection>
471+
466472
{mobileAdPositions.includes(index) && (
467473
<MobileAdSlot
468474
renderAds={renderAds}
@@ -471,13 +477,13 @@ export const FrontLayout = ({ front, NAV }: Props) => {
471477
)}
472478
/>
473479
)}
474-
</div>
480+
</Fragment>
475481
);
476482
}
477483

478484
if (collection.containerPalette === 'Branded') {
479485
return (
480-
<div key={ophanName}>
486+
<Fragment key={ophanName}>
481487
<LabsSection
482488
title={collection.displayName}
483489
collectionId={collection.id}
@@ -525,6 +531,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
525531
}
526532
/>
527533
</LabsSection>
534+
528535
{mobileAdPositions.includes(index) && (
529536
<MobileAdSlot
530537
renderAds={renderAds}
@@ -533,6 +540,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
533540
)}
534541
/>
535542
)}
543+
536544
{index === merchHighAdPosition && (
537545
<MerchHighAdSlot
538546
renderAds={renderAds}
@@ -545,7 +553,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
545553
}
546554
/>
547555
)}
548-
</div>
556+
</Fragment>
549557
);
550558
}
551559

@@ -557,7 +565,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
557565
collection.containerPalette ?? 'MediaPalette';
558566

559567
return (
560-
<div key={ophanName}>
568+
<Fragment key={ophanName}>
561569
{desktopAdPositions.includes(index) && (
562570
<FrontsBannerAdSlot
563571
renderAds={renderAds}
@@ -567,6 +575,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
567575
)}
568576
/>
569577
)}
578+
570579
<ContainerOverrides
571580
containerPalette={containerPalette}
572581
>
@@ -631,6 +640,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
631640
</Island>
632641
</Section>
633642
</ContainerOverrides>
643+
634644
{mobileAdPositions.includes(index) && (
635645
<MobileAdSlot
636646
renderAds={renderAds}
@@ -639,6 +649,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
639649
)}
640650
/>
641651
)}
652+
642653
{index === merchHighAdPosition && (
643654
<MerchHighAdSlot
644655
renderAds={renderAds}
@@ -651,12 +662,12 @@ export const FrontLayout = ({ front, NAV }: Props) => {
651662
}
652663
/>
653664
)}
654-
</div>
665+
</Fragment>
655666
);
656667
}
657668

658669
return (
659-
<div key={ophanName}>
670+
<Fragment key={ophanName}>
660671
{desktopAdPositions.includes(index) && (
661672
<FrontsBannerAdSlot
662673
renderAds={renderAds}
@@ -666,6 +677,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
666677
)}
667678
/>
668679
)}
680+
669681
<FrontSection
670682
title={collection.displayName}
671683
description={collection.description}
@@ -742,6 +754,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
742754
containerLevel={collection.containerLevel}
743755
/>
744756
</FrontSection>
757+
745758
{mobileAdPositions.includes(index) && (
746759
<MobileAdSlot
747760
renderAds={renderAds}
@@ -750,6 +763,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
750763
)}
751764
/>
752765
)}
766+
753767
{index === merchHighAdPosition && (
754768
<MerchHighAdSlot
755769
renderAds={renderAds}
@@ -760,7 +774,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
760774
}
761775
/>
762776
)}
763-
</div>
777+
</Fragment>
764778
);
765779
})}
766780
</main>

0 commit comments

Comments
 (0)