Apply new Labs immersive grid layouts and styling

dotcom-rendering/playwright/tests/lightbox.e2e.spec.ts

@@ -109,7 +109,7 @@ test.describe('Lightbox', () => {
 
 		// Open lightbox by clicking on the fourth image within the article body
 		// Lightbox should open at the fifth image as the first image is the main media image
-		await page.locator('article img').nth(3).click({ force: true });
+		await page.locator('button.open-lightbox').nth(4).click();
 
 		await expectToBeVisible(page, '#gu-lightbox');
 

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -18,6 +18,7 @@ import {
 	until,
 } from '@guardian/source/foundations';
 import { grid } from '../../src/grid';
+import { type LayoutType } from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import { getAgeWarning } from '../lib/age-warning';
 import {
@@ -39,6 +40,7 @@ import { StarRating } from './StarRating/StarRating';
 type Props = {
 	headlineString: string;
 	format: ArticleFormat;
+	layoutType?: LayoutType;
 	byline?: string;
 	tags: TagType[];
 	webPublicationDateDeprecated: string;
@@ -214,7 +216,16 @@ const invertedStyles = css`
 	box-decoration-break: clone;
 `;
 
-const immersiveStyles = css`
+const legacyInvertedStyles = css`
+	white-space: pre-wrap;
+	padding-right: ${space[1]}px;
+	padding-bottom: ${space[1]}px;
+	box-shadow: -6px 0 0 ${themePalette('--headline-background')};
+	/* Box decoration is required to push the box shadow out on Firefox */
+	box-decoration-break: clone;
+`;
+
+const legacyImmersiveStyles = css`
 	min-height: 112px;
 	padding-bottom: ${space[6]}px;
 	padding-left: ${space[1]}px;
@@ -230,16 +241,47 @@ const immersiveStyles = css`
 	margin-right: ${space[5]}px;
 `;
 
-const darkBackground = css`
-	background-color: ${themePalette('--headline-background')};
+const legacyImmersiveWrapper = css`
+	margin-left: 6px;
+
+	${from.tablet} {
+		margin-left: 16px;
+	}
+
+	${from.leftCol} {
+		margin-left: 25px;
+	}
+
+	flex-grow: 1;
+	z-index: ${getZIndex('articleHeadline')};
+
+	${until.mobileLandscape} {
+		margin-right: 40px;
+	}
 `;
 
-const invertedText = css`
+const legacyInvertedText = css`
 	white-space: pre-wrap;
 	padding-bottom: ${space[1]}px;
 	padding-right: ${space[1]}px;
 `;
 
+const darkBackground = css`
+	background-color: ${themePalette('--headline-background')};
+`;
+
+const invertedText = css`
+	${from.desktop} {
+		color: white;
+		background-color: black;
+		white-space: pre-wrap;
+		padding-bottom: ${space[1]}px;
+		padding-right: ${space[1]}px;
+		margin-left: -10px;
+		padding-left: 10px;
+	}
+`;
+
 const maxWidth = css`
 	${from.desktop} {
 		max-width: 620px;
@@ -255,96 +297,90 @@ const invertedWrapper = css`
 	margin-left: 6px;
 `;
 
-const immersiveWrapper = css`
-	/*
-        Make sure we vertically align the headline font with the body font
-    */
-	margin-left: 6px;
-
-	${from.tablet} {
-		margin-left: 16px;
-	}
-
-	${from.leftCol} {
-		margin-left: 25px;
-	}
-
-	/*
-        We need this grow to ensure the headline fills the main content column
-    */
-	flex-grow: 1;
-	/*
-        This z-index is what ensures the headline text shows above the pseudo black
-        box that extends the black background to the right
-    */
-	z-index: ${getZIndex('articleHeadline')};
-
-	${until.mobileLandscape} {
-		margin-right: 40px;
-	}
-`;
-
 // Due to MainMedia using position: relative, this seems to effect the rendering order
 // To mitigate we use z-index
 // TODO: find a cleaner solution
 const zIndex = css`
 	z-index: 1;
 `;
 
-const ageWarningMargins = (format: ArticleFormat) => {
+const ageWarningMargins = (
+	format: ArticleFormat,
+	isLegacyImmersive: boolean,
+) => {
 	if (format.design === ArticleDesign.Gallery) {
 		return '';
 	}
-	return format.display === ArticleDisplay.Immersive
-		? css`
-				margin-left: 0px;
-				margin-bottom: 0px;
+	if (format.display === ArticleDisplay.Immersive) {
+		return isLegacyImmersive
+			? css`
+					margin-left: 0;
+					margin-bottom: 0;
 
-				${from.tablet} {
-					margin-left: 10px;
-				}
+					${from.tablet} {
+						margin-left: 10px;
+					}
 
-				${from.leftCol} {
-					margin-left: 20px;
-				}
-			`
-		: css`
-				margin-top: 12px;
-				margin-left: -10px;
-				margin-bottom: 6px;
-
-				${from.tablet} {
-					margin-left: -20px;
-				}
+					${from.leftCol} {
+						margin-left: 20px;
+					}
+				`
+			: '';
+	}
+	return css`
+		margin-top: 12px;
+		margin-left: -10px;
+		margin-bottom: 6px;
 
-				${from.leftCol} {
-					margin-left: -10px;
-					margin-top: 0;
-				}
-			`;
-};
+		${from.tablet} {
+			margin-left: -20px;
+		}
 
-const backgroundStyles = css`
-	background-color: ${themePalette('--age-warning-wrapper-background')};
-`;
+		${from.leftCol} {
+			margin-left: -10px;
+			margin-top: 0;
+		}
+	`;
+};
 
 const WithAgeWarning = ({
 	tags,
 	webPublicationDateDeprecated,
 	format,
 	children,
+	snapToInverted = false,
+	isLegacyImmersive = false,
 }: {
 	tags: TagType[];
 	webPublicationDateDeprecated: string;
 	format: ArticleFormat;
 	children: React.ReactNode;
+	snapToInverted?: boolean;
+	isLegacyImmersive?: boolean;
 }) => {
 	const age = getAgeWarning(tags, webPublicationDateDeprecated);
 
 	if (age) {
 		return (
 			<>
-				<div css={[backgroundStyles, ageWarningMargins(format)]}>
+				<div
+					css={[
+						ageWarningMargins(format, isLegacyImmersive),
+						isLegacyImmersive &&
+							css`
+								background-color: ${themePalette(
+									'--age-warning-wrapper-background',
+								)};
+							`,
+						snapToInverted && !isLegacyImmersive
+							? css`
+									${from.desktop} {
+										margin-left: -10px;
+									}
+								`
+							: '',
+					]}
+				>
 					<AgeWarning age={age} />
 				</div>
 				{children}
@@ -433,13 +469,16 @@ const galleryStyles = css`
 export const ArticleHeadline = ({
 	headlineString,
 	format,
+	layoutType,
 	tags,
 	byline,
 	webPublicationDateDeprecated,
 	hasAvatar,
 	isMatch,
 	starRating,
 }: Props) => {
+	const isInverted = layoutType === 'immersiveLandscapeDefault';
+	const isLegacyImmersive = layoutType == null;
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
 			switch (format.design) {
@@ -465,12 +504,22 @@ export const ArticleHeadline = ({
 										format.theme === ArticleSpecial.Labs
 											? labsFont
 											: headlineFont(format),
-										invertedText,
-										css`
-											color: ${themePalette(
-												'--headline-colour',
-											)};
-										`,
+										isLegacyImmersive
+											? [
+													legacyInvertedText,
+													css`
+														color: ${themePalette(
+															'--headline-colour',
+														)};
+													`,
+												]
+											: isInverted
+												? [invertedText, darkBackground]
+												: css`
+														color: ${themePalette(
+															'--headline-colour',
+														)};
+													`,
 									]}
 								>
 									{headlineString}
@@ -496,16 +545,28 @@ export const ArticleHeadline = ({
 								webPublicationDateDeprecated
 							}
 							format={format}
+							snapToInverted={isInverted}
+							isLegacyImmersive={isLegacyImmersive}
 						>
 							<h1
 								css={[
-									immersiveWrapper,
-									darkBackground,
-									css`
-										color: ${themePalette(
-											'--headline-colour',
-										)};
-									`,
+									isLegacyImmersive
+										? [
+												legacyImmersiveWrapper,
+												darkBackground,
+												css`
+													color: ${themePalette(
+														'--headline-colour',
+													)};
+												`,
+											]
+										: isInverted
+											? [invertedText, darkBackground]
+											: css`
+													color: ${themePalette(
+														'--headline-colour',
+													)};
+												`,
 								]}
 							>
 								<span
@@ -514,8 +575,10 @@ export const ArticleHeadline = ({
 											? jumboLabsFont
 											: headlineFont(format),
 										maxWidth,
-										invertedStyles,
-										immersiveStyles,
+										isLegacyImmersive && [
+											legacyInvertedStyles,
+											legacyImmersiveStyles,
+										],
 										displayBlock,
 									]}
 								>

dotcom-rendering/src/components/ArticleMeta.apps.tsx

@@ -4,6 +4,7 @@ import { from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { ReactNode } from 'react';
 import { grid } from '../grid';
+import type { LayoutType } from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
 	ArticleDesign,
@@ -36,6 +37,7 @@ import { PodcastMeta } from './PodcastMeta';
 
 type Props = {
 	format: ArticleFormat;
+	layoutType?: LayoutType;
 	byline?: string;
 	tags: TagType[];
 	primaryDateline: string;
@@ -242,6 +244,7 @@ const galleryMetaContainer = css`
 export const ArticleMetaApps = ({
 	branding,
 	format,
+	layoutType,
 	byline,
 	tags,
 	primaryDateline,
@@ -253,9 +256,10 @@ export const ArticleMetaApps = ({
 	headline,
 	mainMediaElements,
 }: Props) => {
+	const isImmersiveGrid = layoutType?.startsWith('immersive') ?? false;
 	const soleContributor = getSoleContributor(tags, byline);
 	const authorName = soleContributor?.title ?? 'Author Image';
-	const avatarUrl = shouldShowAvatar(format)
+	const avatarUrl = shouldShowAvatar(format, isImmersiveGrid)
 		? soleContributor?.bylineLargeImageUrl
 		: undefined;
 
@@ -328,13 +332,14 @@ export const ArticleMetaApps = ({
 					</MetaGridAvatar>
 				)}
 				<MetaGridByline isComment={isComment}>
-					{shouldShowContributor(format) && !!byline && (
-						<Contributor
-							byline={byline}
-							tags={tags}
-							format={format}
-						/>
-					)}
+					{shouldShowContributor(format, isImmersiveGrid) &&
+						!!byline && (
+							<Contributor
+								byline={byline}
+								tags={tags}
+								format={format}
+							/>
+						)}
 					{shouldShowFollowButtons(
 						isComment || isAnalysis || isImmersive,
 					) &&