Revamped InteractiveLayout based on grid module

dotcom-rendering/src/components/ArticleBody.tsx

@@ -56,6 +56,7 @@ type Props = {
 	shouldHideAds: boolean;
 	serverTime?: number;
 	idApiUrl?: string;
+	isOldInteractive?: boolean;
 };
 
 const globalOlStyles = () => css`
@@ -147,6 +148,7 @@ export const ArticleBody = ({
 	shouldHideAds,
 	serverTime,
 	idApiUrl,
+	isOldInteractive = false,
 }: Props) => {
 	const isInteractiveContent =
 		format.design === ArticleDesign.Interactive ||
@@ -270,6 +272,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

@@ -130,6 +130,7 @@ type Props = {
 	webUrl: string;
 	webTitle: string;
 	showBottomSocialButtons: boolean;
+	isDeprecatedInteractiveLayout?: boolean;
 };
 
 const syndicationButtonOverrides = css`
@@ -205,6 +206,7 @@ export const SubMeta = ({
 	webUrl,
 	webTitle,
 	showBottomSocialButtons,
+	isDeprecatedInteractiveLayout = false,
 }: Props) => {
 	const createLinks = () => {
 		const links: BaseLinkType[] = [];
@@ -229,9 +231,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

@@ -11,7 +11,6 @@ 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';
 import { PictureLayout } from './PictureLayout';
@@ -116,14 +115,12 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 			switch (article.design) {
 				case ArticleDesign.Interactive:
 					return (
-						<InteractiveLayout
+						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							renderingTarget={renderingTarget}
-							serverTime={serverTime}
 						/>
 					);
-
 				case ArticleDesign.FullPageInteractive: {
 					return (
 						<FullPageInteractiveLayout
@@ -300,12 +297,11 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 			switch (article.design) {
 				case ArticleDesign.Interactive:
 					return (
-						<InteractiveLayout
+						<StandardLayout
 							article={article.frontendData}
 							NAV={NAV}
 							format={format}
 							renderingTarget={renderingTarget}
-							serverTime={serverTime}
 						/>
 					);
 				case ArticleDesign.FullPageInteractive: {

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 './interactives/InteractiveArticleGridDeprecated';
 import { interactiveGlobalStyles } from './lib/interactiveLegacyStyling';
 import { BannerWrapper, Stuck } from './lib/stickiness';