Add Labs header and fix fontStyles for Gallery Labs

Co-authored-by: Marjan Kalanaki <[email protected]>

Author: deedeeh

dotcom-rendering/src/components/SeriesSectionLink.tsx

@@ -8,6 +8,7 @@ import {
 	space,
 	textSans17,
 	textSans20,
+	textSansBold17,
 	textSansBold20,
 	until,
 } from '@guardian/source/foundations';
@@ -101,43 +102,60 @@ const invertedStyle = (design: ArticleDesign) => {
 };
 
 const fontStyles = (format: ArticleFormat) => {
-	if (format.design === ArticleDesign.Gallery) {
-		return css`
-			${headlineBold17}
-			${from.desktop} {
-				${headlineBold20}
-				line-height: 36px;
-			}
-			line-height: 36px;
-		`;
-	}
-	switch (format.theme) {
-		case ArticleSpecial.Labs:
-			switch (format.display) {
-				case ArticleDisplay.Immersive:
+	switch (format.design) {
+		case ArticleDesign.Gallery:
+			switch (format.theme) {
+				case ArticleSpecial.Labs:
 					return css`
-						${textSansBold20};
-						line-height: 23px;
-						${from.leftCol} {
-							line-height: 20px;
+						${textSansBold17};
+						line-height: 36px;
+						${from.desktop} {
+							${textSansBold20};
+							// This is added again because there is a line-height in textSansBold20 so we are overriding it
+							line-height: 36px;
 						}
 					`;
 				default:
 					return css`
-						${textSans20};
-						line-height: 23px;
-						${from.leftCol} {
-							line-height: 20px;
+						${headlineBold17}
+						line-height: 36px;
+
+						${from.desktop} {
+							${headlineBold20}
+							// This is added again because there is a line-height in textSansBold20 so we are overriding it
+							line-height: 36px;
 						}
 					`;
 			}
 		default:
-			return css`
-				${headlineBold17}
-				${from.wide} {
-					${headlineBold20}
-				}
-			`;
+			switch (format.theme) {
+				case ArticleSpecial.Labs:
+					switch (format.display) {
+						case ArticleDisplay.Immersive:
+							return css`
+								${textSansBold20};
+								line-height: 23px;
+								${from.leftCol} {
+									line-height: 20px;
+								}
+							`;
+						default:
+							return css`
+								${textSans20};
+								line-height: 23px;
+								${from.leftCol} {
+									line-height: 20px;
+								}
+							`;
+					}
+				default:
+					return css`
+						${headlineBold17}
+						${from.wide} {
+							${headlineBold20}
+						}
+					`;
+			}
 	}
 };
 

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -19,6 +19,7 @@ import { DesktopAdSlot, MobileAdSlot } from '../components/GalleryAdSlots';
 import { GalleryImage } from '../components/GalleryImage';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { Island } from '../components/Island';
+import { LabsHeader } from '../components/LabsHeader';
 import { MainMediaGallery } from '../components/MainMediaGallery';
 import { Masthead } from '../components/Masthead/Masthead';
 import { Section } from '../components/Section';
@@ -51,12 +52,6 @@ interface AppProps extends Props {
 	renderingTarget: 'Apps';
 }
 
-const border = css({
-	borderWidth: 1,
-	borderStyle: 'solid',
-	color: '#ccc',
-});
-
 const headerStyles = css`
 	${grid.container}
 	background-color: ${themePalette('--article-inner-background')};
@@ -200,12 +195,27 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					/>
 				</div>
 			)}
+
+			{format.theme === ArticleSpecial.Labs && (
+				<Stuck>
+					<Section
+						fullWidth={true}
+						showTopBorder={false}
+						backgroundColour={sourcePalette.labs[400]}
+						borderColour={sourcePalette.neutral[60]}
+						sectionId="labs-header"
+						element="aside"
+					>
+						<LabsHeader editionId={frontendData.editionId} />
+					</Section>
+				</Stuck>
+			)}
+
 			<main
 				css={{
 					backgroundColor: themePalette('--article-background'),
 				}}
 			>
-				<div css={border}>Labs header</div>
 				<header css={headerStyles}>
 					<MainMediaGallery
 						mainMedia={gallery.mainMedia}