include labs redesign switch in frontlayout and feed through to frontsection (#14512)

Author: cemms1

dotcom-rendering/src/components/FrontSection.tsx

@@ -93,6 +93,10 @@ type Props = {
 	hasNavigationButtons?: boolean;
 	isAboveDesktopAd?: boolean;
 	isAboveMobileAd?: boolean;
+	/** Indicates whether this is a Guardian Labs container */
+	isLabs?: boolean;
+	/** Feature switch for the labs redesign work */
+	showLabsRedesign?: boolean;
 };
 
 const width = (columns: number, columnWidth: number, columnGap: number) =>
@@ -592,6 +596,8 @@ export const FrontSection = ({
 	hasNavigationButtons = false,
 	isAboveDesktopAd = false,
 	isAboveMobileAd = false,
+	isLabs = false,
+	showLabsRedesign = false,
 }: Props) => {
 	const isToggleable = toggleable && !!sectionId;
 	const showVerticalRule = !hasPageSkin;
@@ -677,33 +683,41 @@ export const FrontSection = ({
 							),
 					]}
 				>
-					<FrontSectionTitle
-						title={
-							<ContainerTitle
-								title={title}
-								lightweightHeader={isTagPage}
-								description={description}
-								fontColour={
-									containerLevel === 'Secondary'
-										? schemePalette(
-												'--article-section-secondary-title',
-										  )
-										: articleSectionTitleStyles(
-												title,
-												showSectionColours,
-										  )
+					{!isLabs && !showLabsRedesign && (
+						<>
+							<FrontSectionTitle
+								title={
+									<ContainerTitle
+										title={title}
+										lightweightHeader={isTagPage}
+										description={description}
+										fontColour={
+											containerLevel === 'Secondary'
+												? schemePalette(
+														'--article-section-secondary-title',
+												  )
+												: articleSectionTitleStyles(
+														title,
+														showSectionColours,
+												  )
+										}
+										// On paid fronts the title is not treated as a link
+										url={
+											!isOnPaidContentFront
+												? url
+												: undefined
+										}
+										showDateHeader={showDateHeader}
+										editionId={editionId}
+										containerLevel={containerLevel}
+									/>
 								}
-								// On paid fronts the title is not treated as a link
-								url={!isOnPaidContentFront ? url : undefined}
-								showDateHeader={showDateHeader}
-								editionId={editionId}
-								containerLevel={containerLevel}
+								collectionBranding={collectionBranding}
 							/>
-						}
-						collectionBranding={collectionBranding}
-					/>
 
-					{leftContent}
+							{leftContent}
+						</>
+					)}
 				</div>
 
 				{(isToggleable || hasNavigationButtons) && (

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -135,6 +135,8 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const contributionsServiceUrl = getContributionsServiceUrl(front);
 
+	const showLabsRedesign = !!front.config.switches.guardianLabsRedesign;
+
 	const fallbackAspectRatio = (collectionType: DCRContainerType) => {
 		switch (collectionType) {
 			case 'scrollable/feature':
@@ -424,7 +426,10 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 						);
 					}
 
-					if (collection.containerPalette === 'Branded') {
+					if (
+						collection.containerPalette === 'Branded' &&
+						!showLabsRedesign
+					) {
 						return (
 							<Fragment key={ophanName}>
 								<LabsSection
@@ -567,6 +572,10 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 								isAboveMobileAd={mobileAdPositions.includes(
 									index,
 								)}
+								isLabs={
+									collection.containerPalette === 'Branded'
+								}
+								showLabsRedesign={showLabsRedesign}
 							>
 								<DecideContainer
 									trails={trails}