Revamped immersive layout(s)

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

@@ -19,7 +19,7 @@ test.describe('Commercial E2E tests', () => {
 			'merchandising',
 		];
 
-		const totalSlotsExpected = 15; // All slots, even if unfilled ie. `display: none`
+		const totalSlotsExpected = 16; // All slots, even if unfilled ie. `display: none`
 		const inlineSlots = totalSlotsExpected - fixedSlots.length;
 
 		// We are excluding survey slot as they can be switched off

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 {
@@ -27,7 +28,6 @@ import {
 	ArticleSpecial,
 	Pillar,
 } from '../lib/articleFormat';
-import { getZIndex } from '../lib/getZIndex';
 import { palette as themePalette } from '../palette';
 import type { StarRating as Rating } from '../types/content';
 import type { TagType } from '../types/tag';
@@ -39,6 +39,7 @@ import { StarRating } from './StarRating/StarRating';
 type Props = {
 	headlineString: string;
 	format: ArticleFormat;
+	layoutType?: LayoutType;
 	byline?: string;
 	tags: TagType[];
 	webPublicationDateDeprecated: string;
@@ -214,30 +215,20 @@ const invertedStyles = css`
 	box-decoration-break: clone;
 `;
 
-const immersiveStyles = css`
-	min-height: 112px;
-	padding-bottom: ${space[6]}px;
-	padding-left: ${space[1]}px;
-
-	${from.mobileLandscape} {
-		padding-left: ${space[3]}px;
-	}
-
-	${from.tablet} {
-		padding-left: ${space[1]}px;
-	}
-
-	margin-right: ${space[5]}px;
-`;
-
 const darkBackground = css`
 	background-color: ${themePalette('--headline-background')};
 `;
 
 const invertedText = css`
-	white-space: pre-wrap;
-	padding-bottom: ${space[1]}px;
-	padding-right: ${space[1]}px;
+	${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`
@@ -255,35 +246,6 @@ 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
@@ -292,59 +254,58 @@ const zIndex = css`
 `;
 
 const ageWarningMargins = (format: ArticleFormat) => {
-	if (format.design === ArticleDesign.Gallery) {
+	if (
+		format.design === ArticleDesign.Gallery ||
+		format.display === ArticleDisplay.Immersive
+	) {
 		return '';
 	}
-	return format.display === ArticleDisplay.Immersive
-		? css`
-				margin-left: 0px;
-				margin-bottom: 0px;
-
-				${from.tablet} {
-					margin-left: 10px;
-				}
+	return css`
+		margin-top: 12px;
+		margin-left: -10px;
+		margin-bottom: 6px;
 
-				${from.leftCol} {
-					margin-left: 20px;
-				}
-			`
-		: css`
-				margin-top: 12px;
-				margin-left: -10px;
-				margin-bottom: 6px;
-
-				${from.tablet} {
-					margin-left: -20px;
-				}
+		${from.tablet} {
+			margin-left: -20px;
+		}
 
-				${from.leftCol} {
-					margin-left: -10px;
-					margin-top: 0;
-				}
-			`;
+		${from.leftCol} {
+			margin-left: -10px;
+			margin-top: 0;
+		}
+	`;
 };
 
-const backgroundStyles = css`
-	background-color: ${themePalette('--age-warning-wrapper-background')};
-`;
-
 const WithAgeWarning = ({
 	tags,
 	webPublicationDateDeprecated,
 	format,
 	children,
+	snapToInverted = false,
 }: {
 	tags: TagType[];
 	webPublicationDateDeprecated: string;
 	format: ArticleFormat;
 	children: React.ReactNode;
+	snapToInverted?: boolean;
 }) => {
 	const age = getAgeWarning(tags, webPublicationDateDeprecated);
 
 	if (age) {
 		return (
 			<>
-				<div css={[backgroundStyles, ageWarningMargins(format)]}>
+				<div
+					css={[
+						ageWarningMargins(format),
+						snapToInverted
+							? css`
+									${from.desktop} {
+										margin-left: -10px;
+									}
+								`
+							: '',
+					]}
+				>
 					<AgeWarning age={age} />
 				</div>
 				{children}
@@ -433,13 +394,15 @@ const galleryStyles = css`
 export const ArticleHeadline = ({
 	headlineString,
 	format,
+	layoutType,
 	tags,
 	byline,
 	webPublicationDateDeprecated,
 	hasAvatar,
 	isMatch,
 	starRating,
 }: Props) => {
+	const isInverted = layoutType === 'immersiveLandscapeDefault';
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
 			switch (format.design) {
@@ -465,12 +428,13 @@ export const ArticleHeadline = ({
 										format.theme === ArticleSpecial.Labs
 											? labsFont
 											: headlineFont(format),
-										invertedText,
-										css`
-											color: ${themePalette(
-												'--headline-colour',
-											)};
-										`,
+										isInverted
+											? [invertedText, darkBackground]
+											: css`
+													color: ${themePalette(
+														'--headline-colour',
+													)};
+												`,
 									]}
 								>
 									{headlineString}
@@ -496,16 +460,17 @@ export const ArticleHeadline = ({
 								webPublicationDateDeprecated
 							}
 							format={format}
+							snapToInverted={true}
 						>
 							<h1
 								css={[
-									immersiveWrapper,
-									darkBackground,
-									css`
-										color: ${themePalette(
-											'--headline-colour',
-										)};
-									`,
+									isInverted
+										? [invertedText, darkBackground]
+										: css`
+												color: ${themePalette(
+													'--headline-colour',
+												)};
+											`,
 								]}
 							>
 								<span
@@ -514,8 +479,6 @@ export const ArticleHeadline = ({
 											? jumboLabsFont
 											: headlineFont(format),
 										maxWidth,
-										invertedStyles,
-										immersiveStyles,
 										displayBlock,
 									]}
 								>