Labs Galleries migration to DCR

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -152,6 +152,16 @@ const labsFont = css`
 	}
 `;
 
+const labsGalleryFont = css`
+	${textSansBold34};
+	line-height: 2.1875rem;
+	${from.desktop} {
+		${textSansBold34};
+		font-size: 50px;
+		line-height: 3.125rem;
+	}
+`;
+
 const jumboLabsFont = css`
 	${textSansBold34};
 	font-size: 3.125rem;
@@ -859,7 +869,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsGalleryFont
 											: headlineFont(format),
 										css`
 											color: ${themePalette(

dotcom-rendering/src/components/Branding.importable.tsx

@@ -4,6 +4,7 @@ import {
 	breakpoints,
 	from,
 	textSans12,
+	textSansBold12,
 } from '@guardian/source/foundations';
 import {
 	ArticleDesign,
@@ -67,6 +68,10 @@ const liveBlogLabelStyle = css`
 	}
 `;
 
+const galleryLabelStyle = css`
+	${textSansBold12}
+`;
+
 const brandingLogoAdvertisingPartnerStyle = css`
 	padding: 0;
 	& img {
@@ -208,6 +213,7 @@ type Props = {
 export const Branding = ({ branding, format }: Props) => {
 	const isLiveBlog = format.design === ArticleDesign.LiveBlog;
 	const isInteractive = format.design === ArticleDesign.Interactive;
+	const isGallery = format.design === ArticleDesign.Gallery;
 
 	const { ophanComponentName, ophanComponentLink } = getOphanComponents({
 		branding,
@@ -235,6 +241,7 @@ export const Branding = ({ branding, format }: Props) => {
 			<div
 				css={[
 					labelStyle,
+					isGallery && galleryLabelStyle,
 					isAdvertisingPartnerOrExclusive &&
 						labelAdvertisingPartnerStyle,
 					isLiveBlog && liveBlogLabelStyle,

dotcom-rendering/src/components/Caption.tsx

@@ -211,7 +211,9 @@ const captionLink = css`
 `;
 
 const galleryStyles = css`
-	${grid.column.centre}
+	${grid.column.centre};
+	${textSans14};
+
 	margin-bottom: 0;
 	padding-bottom: 6px;
 	${from.leftCol} {

dotcom-rendering/src/components/Contributor.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import {
 	headlineMedium17,
 	palette as sourcePalette,
+	textEgyptianItalic17,
 	textSansItalic17,
 	until,
 } from '@guardian/source/foundations';
@@ -69,10 +70,16 @@ const bylineStyles = (format: ArticleFormat) => {
 	}
 };
 
-const labsBylineStyles = css`
-	${textSansItalic17};
-	line-height: 1.4;
-`;
+const labsBylineStyles = (design: ArticleDesign) => {
+	const textStyle =
+		design === ArticleDesign.Gallery
+			? textEgyptianItalic17
+			: textSansItalic17;
+	return css`
+		${textStyle};
+		line-height: 1.4;
+	`;
+};
 
 type Props = {
 	byline?: string;
@@ -96,7 +103,8 @@ export const Contributor = ({ byline, tags, format, source }: Props) => (
 				}
 				css={[
 					bylineStyles(format),
-					format.theme === ArticleSpecial.Labs && labsBylineStyles,
+					format.theme === ArticleSpecial.Labs &&
+						labsBylineStyles(format.design),
 					format.design === ArticleDesign.LiveBlog &&
 						standfirstColourBelowDesktop,
 				]}

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};
+							/* Overrides the line-height from the font preset */
+							line-height: 36px;
 						}
 					`;
 				default:
 					return css`
-						${textSans20};
-						line-height: 23px;
-						${from.leftCol} {
-							line-height: 20px;
+						${headlineBold17}
+						line-height: 36px;
+
+						${from.desktop} {
+							${headlineBold20}
+							/* Overrides the line-height from the font preset */
+							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/components/Standfirst.tsx

@@ -12,6 +12,7 @@ import {
 	textSans17,
 	textSans20,
 	textSans24,
+	textSansBold15,
 } from '@guardian/source/foundations';
 import sanitise from 'sanitize-html';
 import { grid } from '../../src/grid';
@@ -83,6 +84,11 @@ const decideFont = ({ display, design, theme }: ArticleFormat) => {
 	const isLabs = theme === ArticleSpecial.Labs;
 	switch (design) {
 		case ArticleDesign.Gallery:
+			if (isLabs) {
+				return css`
+					${textSansBold15};
+				`;
+			}
 			return css`
 				${headlineBold17}
 			`;

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')};
@@ -140,6 +135,23 @@ const galleryBorder = css`
 
 export const GalleryLayout = (props: WebProps | AppProps) => {
 	const { gallery, renderingTarget } = props;
+
+	const {
+		config: {
+			abTests,
+			idUrl,
+			mmaUrl,
+			discussionApiUrl,
+			idApiUrl,
+			shortUrlId,
+			isPreview,
+			isSensitive,
+			section,
+			switches,
+		},
+		editionId,
+	} = gallery.frontendData;
+
 	const frontendData = gallery.frontendData;
 
 	const isWeb = renderingTarget === 'Web';
@@ -176,36 +188,49 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								padSides={false}
 								shouldCenter={false}
 							>
-								<HeaderAdSlot
-									abTests={frontendData.config.abTests}
-								/>
+								<HeaderAdSlot abTests={abTests} />
 							</Section>
 						</Stuck>
 					)}
 					<Masthead
 						nav={props.NAV}
-						editionId={frontendData.editionId}
-						idUrl={frontendData.config.idUrl}
-						mmaUrl={frontendData.config.mmaUrl}
-						discussionApiUrl={frontendData.config.discussionApiUrl}
-						idApiUrl={frontendData.config.idApiUrl}
+						editionId={editionId}
+						idUrl={idUrl}
+						mmaUrl={mmaUrl}
+						discussionApiUrl={discussionApiUrl}
+						idApiUrl={idApiUrl}
 						contributionsServiceUrl={
 							frontendData.contributionsServiceUrl
 						}
-						showSubNav={false}
+						showSubNav={!isLabs}
 						showSlimNav={true}
 						hasPageSkin={false}
 						hasPageSkinContentSelfConstrain={false}
 						pageId={frontendData.pageId}
 					/>
 				</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={editionId} />
+					</Section>
+				</Stuck>
+			)}
+
 			<main
 				css={{
 					backgroundColor: themePalette('--article-background'),
 				}}
 			>
-				<div css={border}>Labs header</div>
 				<header css={headerStyles}>
 					<MainMediaGallery
 						mainMedia={gallery.mainMedia}
@@ -257,10 +282,8 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 									frontendData.webPublicationSecondaryDateDisplay
 								}
 								isCommentable={frontendData.isCommentable}
-								discussionApiUrl={
-									frontendData.config.discussionApiUrl
-								}
-								shortUrlId={frontendData.config.shortUrlId}
+								discussionApiUrl={discussionApiUrl}
+								shortUrlId={shortUrlId}
 							/>
 						) : null}
 						{isApps ? (
@@ -281,10 +304,8 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 									frontendData.webPublicationSecondaryDateDisplay
 								}
 								isCommentable={frontendData.isCommentable}
-								discussionApiUrl={
-									frontendData.config.discussionApiUrl
-								}
-								shortUrlId={frontendData.config.shortUrlId}
+								discussionApiUrl={discussionApiUrl}
+								shortUrlId={shortUrlId}
 							/>
 						) : null}
 					</div>
@@ -396,23 +417,21 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								contributionsServiceUrl={
 									contributionsServiceUrl
 								}
-								idApiUrl={frontendData.config.idApiUrl}
+								idApiUrl={idApiUrl}
 								isMinuteArticle={
 									frontendData.pageType.isMinuteArticle
 								}
 								isPaidContent={
 									frontendData.pageType.isPaidContent
 								}
-								isPreview={!!frontendData.config.isPreview}
-								isSensitive={frontendData.config.isSensitive}
+								isPreview={!!isPreview}
+								isSensitive={isSensitive}
 								pageId={frontendData.pageId}
-								sectionId={frontendData.config.section}
+								sectionId={section}
 								shouldHideReaderRevenue={
 									frontendData.shouldHideReaderRevenue
 								}
-								remoteBannerSwitch={
-									!!frontendData.config.switches.remoteBanner
-								}
+								remoteBannerSwitch={!!switches.remoteBanner}
 								tags={frontendData.tags}
 							/>
 						</Island>