Revamped InteractiveLayout based on grid module

dotcom-rendering/src/components/ArticleBody.tsx

@@ -58,6 +58,7 @@ type Props = {
 	serverTime?: number;
 	idApiUrl?: string;
 	accentColor?: string;
+	isOldInteractive?: boolean;
 };
 
 const globalOlStyles = () => css`
@@ -165,6 +166,7 @@ export const ArticleBody = ({
 	serverTime,
 	idApiUrl,
 	accentColor,
+	isOldInteractive = false,
 }: Props) => {
 	const isInteractiveContent =
 		format.design === ArticleDesign.Interactive ||
@@ -292,6 +294,7 @@ export const ArticleBody = ({
 					contributionsServiceUrl={contributionsServiceUrl}
 					shouldHideAds={shouldHideAds}
 					idApiUrl={idApiUrl}
+					isOldInteractive={isOldInteractive}
 				/>
 			</div>
 			{hasObserverPublicationTag && <ObserverFooter />}

dotcom-rendering/src/components/Figure.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { breakpoints, from, space, until } from '@guardian/source/foundations';
+import { from, space, until } from '@guardian/source/foundations';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import type { FEElement, RoleType } from '../types/content';
 
@@ -74,47 +74,7 @@ const roleCss = {
 		margin-top: ${space[3]}px;
 		margin-bottom: ${space[3]}px;
 
-		${until.tablet} {
-			margin-left: -20px;
-			margin-right: -20px;
-		}
-		${until.mobileLandscape} {
-			margin-left: -10px;
-			margin-right: -10px;
-		}
-		${from.tablet} {
-			--scrollbar-width-fallback: 15px;
-			--half-scrollbar-width-fallback: 7.5px;
-
-			width: calc(
-				100vw - var(--scrollbar-width, var(--scrollbar-width-fallback))
-			);
-			max-width: calc(
-				100vw - var(--scrollbar-width, var(--scrollbar-width-fallback))
-			);
-
-			--grid-container-max-width: 740px;
-			--grid-container-left-margin: calc(
-				((-100vw + (var(--grid-container-max-width) - 42px)) / 2) +
-					var(
-						--half-scrollbar-width,
-						var(--half-scrollbar-width-fallback)
-					)
-			);
-
-			margin-left: var(--grid-container-left-margin);
-		}
-		${from.desktop} {
-			--grid-container-max-width: ${breakpoints.desktop}px;
-		}
-		${from.leftCol} {
-			--grid-container-max-width: ${breakpoints.leftCol}px;
-			--grid-left-col-width: 140px;
-		}
-		${from.wide} {
-			--grid-container-max-width: ${breakpoints.wide}px;
-			--grid-left-col-width: 219px;
-		}
+		grid-column: 1 / -1;
 	`,
 
 	showcase: css`

dotcom-rendering/src/components/SubMeta.tsx

@@ -129,6 +129,7 @@ type Props = {
 	webUrl: string;
 	webTitle: string;
 	showBottomSocialButtons: boolean;
+	isDeprecatedInteractiveLayout?: boolean;
 };
 
 const syndicationButtonOverrides = css`
@@ -204,6 +205,7 @@ export const SubMeta = ({
 	webUrl,
 	webTitle,
 	showBottomSocialButtons,
+	isDeprecatedInteractiveLayout = false,
 }: Props) => {
 	const createLinks = () => {
 		const links: BaseLinkType[] = [];
@@ -228,9 +230,7 @@ export const SubMeta = ({
 		<div
 			data-print-layout="hide"
 			css={[
-				format.design === ArticleDesign.Interactive
-					? setMetaWidth
-					: undefined,
+				isDeprecatedInteractiveLayout ? setMetaWidth : undefined,
 				format.design === ArticleDesign.Gallery
 					? galleryStyles
 					: bottomPadding,

dotcom-rendering/src/layouts/DecideLayout.tsx

@@ -12,6 +12,7 @@ import { HostedGalleryLayout } from './HostedGalleryLayout';
 import { HostedVideoLayout } from './HostedVideoLayout';
 import { ImmersiveLayout } from './ImmersiveLayout';
 import { InteractiveLayout } from './InteractiveLayout';
+import { InteractiveLayoutDeprecated } from './InteractiveLayoutDeprecated';
 import { LiveLayout } from './LiveLayout';
 import { NewsletterSignupLayout } from './NewsletterSignupLayout';
 import { PictureLayout } from './PictureLayout';
@@ -34,6 +35,8 @@ interface WebProps extends BaseProps {
 
 export type Props = WebProps | AppProps;
 
+export const interactiveLayoutSwitchoverDate = new Date('2024-06-01T00:00:00Z');
+
 const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 	const notSupported = <pre>Not supported</pre>;
 	const format = {
@@ -43,6 +46,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 	};
 
 	const serverTime = article.serverTime;
+	const publicationDate = new Date(article.frontendData.webPublicationDate);
 
 	switch (article.display) {
 		case ArticleDisplay.Immersive: {
@@ -116,15 +120,24 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 		default: {
 			switch (article.design) {
 				case ArticleDesign.Interactive:
-					return (
-						<InteractiveLayout
-							article={article.frontendData}
-							format={format}
-							renderingTarget={renderingTarget}
-							serverTime={serverTime}
-						/>
-					);
-
+					if (publicationDate < interactiveLayoutSwitchoverDate) {
+						return (
+							<InteractiveLayoutDeprecated
+								article={article.frontendData}
+								format={format}
+								renderingTarget={renderingTarget}
+								serverTime={serverTime}
+							/>
+						);
+					} else {
+						return (
+							<InteractiveLayout
+								article={article.frontendData}
+								format={format}
+								renderingTarget={renderingTarget}
+							/>
+						);
+					}
 				case ArticleDesign.FullPageInteractive: {
 					return (
 						<FullPageInteractiveLayout
@@ -214,6 +227,7 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 	};
 
 	const serverTime = article.serverTime;
+	const publicationDate = new Date(article.frontendData.webPublicationDate);
 
 	switch (article.display) {
 		case ArticleDisplay.Immersive: {
@@ -293,15 +307,26 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 		default: {
 			switch (article.design) {
 				case ArticleDesign.Interactive:
-					return (
-						<InteractiveLayout
-							article={article.frontendData}
-							NAV={NAV}
-							format={format}
-							renderingTarget={renderingTarget}
-							serverTime={serverTime}
-						/>
-					);
+					if (publicationDate < interactiveLayoutSwitchoverDate) {
+						return (
+							<InteractiveLayoutDeprecated
+								article={article.frontendData}
+								NAV={NAV}
+								format={format}
+								renderingTarget={renderingTarget}
+								serverTime={serverTime}
+							/>
+						);
+					} else {
+						return (
+							<InteractiveLayout
+								article={article.frontendData}
+								NAV={NAV}
+								format={format}
+								renderingTarget={renderingTarget}
+							/>
+						);
+					}
 				case ArticleDesign.FullPageInteractive: {
 					return (
 						<FullPageInteractiveLayout

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -27,7 +27,7 @@ import type { ArticleDeprecated } from '../types/article';
 import type { ServerSideTests, Switches } from '../types/config';
 import type { FEElement } from '../types/content';
 import type { RenderingTarget } from '../types/renderingTarget';
-import { temporaryBodyCopyColourOverride } from './InteractiveLayout';
+import { temporaryBodyCopyColourOverride } from './InteractiveLayoutDeprecated';
 import { interactiveGlobalStyles } from './lib/interactiveLegacyStyling';
 import { BannerWrapper, Stuck } from './lib/stickiness';