Revamped InteractiveLayout based on grid module

dotcom-rendering/src/components/ArticleBody.tsx

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

dotcom-rendering/src/components/Figure.tsx

@@ -1,12 +1,5 @@
 import { css } from '@emotion/react';
-import {
-	breakpoints,
-	from,
-	palette as sourcePalette,
-	space,
-	until,
-} from '@guardian/source/foundations';
-import type { LayoutType } from '../layouts/lib/articleArrangements';
+import { from, space, until } from '@guardian/source/foundations';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import { transparentColour } from '../lib/transparentColour';
 import { palette } from '../palette';
@@ -110,47 +103,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/MostViewedRightWithAd.island.tsx

@@ -68,13 +68,13 @@ export const MostViewedRightWithAd = ({
 				/>
 			) : null}
 
-			{!isPaidContent && !shouldHideMostViewed ? (
+			{!isPaidContent && !shouldHideMostViewed && (
 				<MostViewedRightWrapper
 					maxHeightPx={MAX_HEIGHT_PX}
 					componentDataAttribute={componentDataAttribute}
 					renderAds={renderAds}
 				/>
-			) : null}
+			)}
 
 			{isApps && <RightAdsPlaceholder />}
 		</div>

dotcom-rendering/src/components/SlotBodyEnd.island.tsx

@@ -13,6 +13,7 @@ import type {
 } from '@guardian/support-dotcom-components/dist/dotcom/types';
 import type { EpicProps } from '@guardian/support-dotcom-components/dist/shared/types';
 import { useEffect, useState } from 'react';
+import { grid } from '../grid';
 import { getArticleCounts } from '../lib/articleCount';
 import {
 	BrazeBannersSystemPlacementId,
@@ -56,6 +57,10 @@ type Props = {
 
 const slotStyles = css`
 	color: ${palette.neutral[7]};
+	${grid.container};
+	& > *:first-child {
+		${grid.column.centre};
+	}
 `;
 
 const buildReaderRevenueEpicConfig = (

dotcom-rendering/src/components/SubMeta.tsx

@@ -14,6 +14,7 @@ import { grid } from '../grid';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import type { BaseLinkType } from '../model/extract-nav';
 import { palette } from '../palette';
+import { palette as themePalette } from '../palette';
 import { Island } from './Island';
 import { ShareButton } from './ShareButton.island';
 
@@ -130,6 +131,7 @@ type Props = {
 	webUrl: string;
 	webTitle: string;
 	showBottomSocialButtons: boolean;
+	isDeprecatedInteractiveLayout?: boolean;
 };
 
 const syndicationButtonOverrides = css`
@@ -205,6 +207,7 @@ export const SubMeta = ({
 	webUrl,
 	webTitle,
 	showBottomSocialButtons,
+	isDeprecatedInteractiveLayout = false,
 }: Props) => {
 	const createLinks = () => {
 		const links: BaseLinkType[] = [];
@@ -229,14 +232,29 @@ export const SubMeta = ({
 		<div
 			data-print-layout="hide"
 			css={[
-				format.design === ArticleDesign.Interactive
-					? setMetaWidth
-					: undefined,
+				isDeprecatedInteractiveLayout ? setMetaWidth : undefined,
 				format.design === ArticleDesign.Gallery
 					? galleryStyles
 					: bottomPadding,
+				format.design === ArticleDesign.Interactive &&
+				!isDeprecatedInteractiveLayout
+					? css`
+							${grid.container};
+							> * {
+								${grid.column.centre}
+							}
+						`
+					: undefined,
 			]}
 		>
+			<StraightLines
+				data-print-layout="hide"
+				count={4}
+				cssOverrides={css`
+					display: block;
+				`}
+				color={themePalette('--straight-lines')}
+			/>
 			{format.design === ArticleDesign.Gallery && (
 				<Fragment>
 					<div css={galleryBorder}></div>

dotcom-rendering/src/layouts/DecideLayout.tsx

@@ -14,7 +14,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';
@@ -137,14 +136,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
@@ -327,12 +324,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

@@ -28,7 +28,7 @@ import type { ArticleDeprecated } from '../types/article';
 import type { 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';