Delete legacy immersive layout and styling

Author: frederickobrien

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -28,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';
@@ -216,56 +215,6 @@ const invertedStyles = css`
 	box-decoration-break: clone;
 `;
 
-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;
-
-	${from.mobileLandscape} {
-		padding-left: ${space[3]}px;
-	}
-
-	${from.tablet} {
-		padding-left: ${space[1]}px;
-	}
-
-	margin-right: ${space[5]}px;
-`;
-
-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 legacyInvertedText = css`
-	white-space: pre-wrap;
-	padding-bottom: ${space[1]}px;
-	padding-right: ${space[1]}px;
-`;
-
 const darkBackground = css`
 	background-color: ${themePalette('--headline-background')};
 `;
@@ -307,20 +256,7 @@ const gridHeadlineTextBelowDesktop = css`
 	}
 `;
 
-const immersiveHeadlineStyles = (
-	layoutType: LayoutType | undefined,
-	isLegacyImmersive: boolean,
-) => {
-	if (isLegacyImmersive) {
-		return [
-			legacyImmersiveWrapper,
-			darkBackground,
-			css`
-				color: ${themePalette('--headline-colour')};
-			`,
-		];
-	}
-
+const immersiveHeadlineStyles = (layoutType: LayoutType | undefined) => {
 	if (layoutType === 'immersiveLandscapeDefault') {
 		return [invertedText, darkBackground];
 	}
@@ -350,29 +286,13 @@ const zIndex = css`
 	z-index: 1;
 `;
 
-const ageWarningMargins = (
-	format: ArticleFormat,
-	isLegacyImmersive: boolean,
-) => {
-	if (format.design === ArticleDesign.Gallery) {
+const ageWarningMargins = (format: ArticleFormat) => {
+	if (
+		format.design === ArticleDesign.Gallery ||
+		format.display === ArticleDisplay.Immersive
+	) {
 		return '';
 	}
-	if (format.display === ArticleDisplay.Immersive) {
-		return isLegacyImmersive
-			? css`
-					margin-left: 0;
-					margin-bottom: 0;
-
-					${from.tablet} {
-						margin-left: 10px;
-					}
-
-					${from.leftCol} {
-						margin-left: 20px;
-					}
-				`
-			: '';
-	}
 	return css`
 		margin-top: 12px;
 		margin-left: -10px;
@@ -395,14 +315,12 @@ const WithAgeWarning = ({
 	format,
 	children,
 	snapToInverted = false,
-	isLegacyImmersive = false,
 }: {
 	tags: TagType[];
 	webPublicationDateDeprecated: string;
 	format: ArticleFormat;
 	children: React.ReactNode;
 	snapToInverted?: boolean;
-	isLegacyImmersive?: boolean;
 }) => {
 	const age = getAgeWarning(tags, webPublicationDateDeprecated);
 
@@ -411,14 +329,8 @@ const WithAgeWarning = ({
 			<>
 				<div
 					css={[
-						ageWarningMargins(format, isLegacyImmersive),
-						isLegacyImmersive &&
-							css`
-								background-color: ${themePalette(
-									'--age-warning-wrapper-background',
-								)};
-							`,
-						snapToInverted && !isLegacyImmersive
+						ageWarningMargins(format),
+						snapToInverted
 							? css`
 									${from.desktop} {
 										margin-left: -10px;
@@ -524,7 +436,6 @@ export const ArticleHeadline = ({
 	starRating,
 }: Props) => {
 	const isInverted = layoutType === 'immersiveLandscapeDefault';
-	const isLegacyImmersive = layoutType == null;
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
 			switch (format.design) {
@@ -550,18 +461,9 @@ export const ArticleHeadline = ({
 										format.theme === ArticleSpecial.Labs
 											? labsFont
 											: headlineFont(format),
-										isLegacyImmersive
-											? [
-													legacyInvertedText,
-													css`
-														color: ${themePalette(
-															'--headline-colour',
-														)};
-													`,
-												]
-											: isInverted
-												? [invertedText, darkBackground]
-												: gridHeadlineText,
+										isInverted
+											? [invertedText, darkBackground]
+											: gridHeadlineText,
 									]}
 								>
 									{headlineString}
@@ -588,26 +490,14 @@ export const ArticleHeadline = ({
 							}
 							format={format}
 							snapToInverted={isInverted}
-							isLegacyImmersive={isLegacyImmersive}
 						>
-							<h1
-								css={[
-									immersiveHeadlineStyles(
-										layoutType,
-										isLegacyImmersive,
-									),
-								]}
-							>
+							<h1 css={[immersiveHeadlineStyles(layoutType)]}>
 								<span
 									css={[
 										format.theme === ArticleSpecial.Labs
 											? jumboLabsFont
 											: headlineFont(format),
 										maxWidth,
-										isLegacyImmersive && [
-											legacyInvertedStyles,
-											legacyImmersiveStyles,
-										],
 										displayBlock,
 									]}
 								>

dotcom-rendering/src/components/ArticleTitle.tsx

@@ -29,7 +29,7 @@ const sectionStyles = css`
 	}
 `;
 
-const immersiveGridMargins = css`
+const immersiveMargins = css`
 	max-width: 500px;
 	min-width: 200px;
 	margin-bottom: 0;
@@ -39,18 +39,6 @@ const immersiveGridMargins = css`
 	}
 `;
 
-const legacyImmersiveMargins = css`
-	max-width: 400px;
-	min-width: 200px;
-	margin-bottom: 4px;
-	${from.tablet} {
-		margin-left: 16px;
-	}
-	${from.leftCol} {
-		margin-left: 25px;
-	}
-`;
-
 const galleryStyles = css`
 	${grid.column.all}
 
@@ -84,9 +72,7 @@ export const ArticleTitle = ({
 		<div
 			css={
 				format.display === ArticleDisplay.Immersive
-					? layoutType == null
-						? legacyImmersiveMargins
-						: immersiveGridMargins
+					? immersiveMargins
 					: undefined
 			}
 		>

dotcom-rendering/src/layouts/DecideLayout.tsx

@@ -1,8 +1,4 @@
-import {
-	ArticleDesign,
-	ArticleDisplay,
-	ArticleSpecial,
-} from '../lib/articleFormat';
+import { ArticleDesign, ArticleDisplay } from '../lib/articleFormat';
 import type { NavType } from '../model/extract-nav';
 import type { Article } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
@@ -13,7 +9,6 @@ import { GalleryLayout } from './GalleryLayout';
 import { HostedArticleLayout } from './HostedArticleLayout';
 import { HostedGalleryLayout } from './HostedGalleryLayout';
 import { HostedVideoLayout } from './HostedVideoLayout';
-import { ImmersiveLayout } from './ImmersiveLayout';
 import { InteractiveLayout } from './InteractiveLayout';
 import { LiveLayout } from './LiveLayout';
 import { NewsletterSignupLayout } from './NewsletterSignupLayout';
@@ -58,21 +53,13 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 					);
 				}
 				default: {
-					return article.theme === ArticleSpecial.Labs &&
-						article.design === ArticleDesign.Standard ? (
+					return (
 						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							renderingTarget={renderingTarget}
 							serverTime={serverTime}
 						/>
-					) : (
-						<ImmersiveLayout
-							article={article.frontendData}
-							format={format}
-							renderingTarget={renderingTarget}
-							serverTime={serverTime}
-						/>
 					);
 				}
 			}
@@ -242,23 +229,14 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 					);
 				}
 				default: {
-					return article.theme === ArticleSpecial.Labs &&
-						article.design === ArticleDesign.Standard ? (
+					return (
 						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							NAV={NAV}
 							renderingTarget={renderingTarget}
 							serverTime={serverTime}
 						/>
-					) : (
-						<ImmersiveLayout
-							article={article.frontendData}
-							format={format}
-							NAV={NAV}
-							renderingTarget={renderingTarget}
-							serverTime={serverTime}
-						/>
 					);
 				}
 			}