* {
+ ${grid.column.centre}
+ }
+ `
+ : undefined,
]}
>
+
{format.design === ArticleDesign.Gallery && (
diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx
index eb0399542fa..3394500a6cc 100644
--- a/dotcom-rendering/src/layouts/DecideLayout.tsx
+++ b/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 (
-
);
-
case ArticleDesign.FullPageInteractive: {
return (
{
switch (article.design) {
case ArticleDesign.Interactive:
return (
-
);
case ArticleDesign.FullPageInteractive: {
diff --git a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
index 0bb9c91a48c..c7697bcd7f5 100644
--- a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
+++ b/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';
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
deleted file mode 100644
index 80e2f30611e..00000000000
--- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx
+++ /dev/null
@@ -1,840 +0,0 @@
-import { css, Global } from '@emotion/react';
-import {
- from,
- palette as sourcePalette,
- space,
- until,
-} from '@guardian/source/foundations';
-import { Hide } from '@guardian/source/react-components';
-import { StraightLines } from '@guardian/source-development-kitchen/react-components';
-import type React from 'react';
-import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
-import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
-import { AppsFooter } from '../components/AppsFooter.island';
-import { ArticleBody } from '../components/ArticleBody';
-import { ArticleContainer } from '../components/ArticleContainer';
-import { ArticleHeadline } from '../components/ArticleHeadline';
-import { ArticleMetaApps } from '../components/ArticleMeta.apps';
-import { ArticleMeta } from '../components/ArticleMeta.web';
-import { ArticleTitle } from '../components/ArticleTitle';
-import { Border } from '../components/Border';
-import { Carousel } from '../components/Carousel.island';
-import { DecideLines } from '../components/DecideLines';
-import { DirectoryPageNavIsland } from '../components/DirectoryPageNavIsland';
-import { DiscussionLayout } from '../components/DiscussionLayout';
-import { Footer } from '../components/Footer';
-import { GridItem } from '../components/GridItem';
-import { HeaderAdSlot } from '../components/HeaderAdSlot';
-import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island';
-import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.island';
-import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island';
-import { Island } from '../components/Island';
-import { LabsHeader } from '../components/LabsHeader';
-import { MainMedia } from '../components/MainMedia';
-import { Masthead } from '../components/Masthead/Masthead';
-import { MostViewedFooterData } from '../components/MostViewedFooterData.island';
-import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
-import { OnwardsUpper } from '../components/OnwardsUpper.island';
-import { Section } from '../components/Section';
-import { SlotBodyEnd } from '../components/SlotBodyEnd.island';
-import { Standfirst } from '../components/Standfirst';
-import { StickyBottomBanner } from '../components/StickyBottomBanner.island';
-import { SubMeta } from '../components/SubMeta';
-import { SubNav } from '../components/SubNav.island';
-import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat';
-import { canRenderAds } from '../lib/canRenderAds';
-import { getContributionsServiceUrl } from '../lib/contributions';
-import { decideStoryPackageTrails } from '../lib/decideTrail';
-import type { NavType } from '../model/extract-nav';
-import { palette as themePalette } from '../palette';
-import type { ArticleDeprecated } from '../types/article';
-import type { RoleType } from '../types/content';
-import type { RenderingTarget } from '../types/renderingTarget';
-import {
- interactiveGlobalStyles,
- interactiveLegacyClasses,
-} from './lib/interactiveLegacyStyling';
-import { BannerWrapper, Stuck } from './lib/stickiness';
-
-const InteractiveGrid = ({ children }: { children: React.ReactNode }) => (
-
- {children}
-
-);
-
-const maxWidth = css`
- ${from.desktop} {
- max-width: 620px;
- }
-`;
-
-const stretchLines = css`
- ${until.phablet} {
- margin-left: -20px;
- margin-right: -20px;
- }
- ${until.mobileLandscape} {
- margin-left: -10px;
- margin-right: -10px;
- }
-`;
-
-export const temporaryBodyCopyColourOverride = css`
- .content__main-column--interactive p {
- /* stylelint-disable-next-line declaration-no-important */
- color: ${themePalette('--article-text')} !important;
- }
-`;
-
-interface CommonProps {
- article: ArticleDeprecated;
- format: ArticleFormat;
- renderingTarget: RenderingTarget;
- serverTime?: number;
-}
-
-interface WebProps extends CommonProps {
- NAV: NavType;
- renderingTarget: 'Web';
-}
-
-interface AppsProps extends CommonProps {
- renderingTarget: 'Apps';
-}
-
-export const InteractiveLayout = (props: WebProps | AppsProps) => {
- const { article, format, renderingTarget, serverTime } = props;
- const {
- config: { isPaidContent, host, hasSurveyAd },
- editionId,
- } = article;
-
- const isApps = renderingTarget === 'Apps';
- const isWeb = renderingTarget === 'Web';
-
- const showComments = article.isCommentable && !isPaidContent;
-
- const { branding } = article.commercialProperties[article.editionId];
-
- const contributionsServiceUrl = getContributionsServiceUrl(article);
-
- const renderAds = canRenderAds(article);
-
- const includesFullWidthElement = article.blocks.some((block) =>
- block.elements.some((element) => {
- const role =
- 'role' in element
- ? (element.role as RoleType | 'fullWidth' | undefined)
- : undefined;
- return role === 'fullWidth';
- }),
- );
-
- return (
- <>
- {includesFullWidthElement && (
-
-
-
- )}
- {isApps && (
- <>
-
-
-
-
-
-
-
-
- )}
- {article.isLegacyInteractive && (
-
- )}
- {isWeb && (
- <>
-
- {renderAds && (
-
-
-
-
-
- )}
-
-
tag.id)}
- sectionId={article.config.section}
- contentType={article.contentType}
- />
-
-
-
-
-
-
-
-
-
-
-
- {format.theme === ArticleSpecial.Labs ? (
- <>
- ) : (
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
- {isApps ? (
- <>
-
-
-
-
-
-
-
- ) : (
-
- )}
-
-
-
+ {isLegacyInteractive ? (
+
+ ) : (
+
+ )}
{isWeb && renderAds && !isLabs && (
diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
index 2a2c70ede75..7139f798546 100644
--- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
import { log } from '@guardian/libs';
import { from, space, until } from '@guardian/source/foundations';
import { Hide } from '@guardian/source/react-components';
-import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
import { AppsEpic } from '../components/AppsEpic.island';
import { ArticleBody } from '../components/ArticleBody';
@@ -132,58 +131,23 @@ export const StandardLayoutArticleGrid = ({
format.design === ArticleDesign.Video ||
format.design === ArticleDesign.Audio;
const isShowcase = format.display === ArticleDisplay.Showcase;
- const isImmersive = format.display === ArticleDisplay.Immersive;
- const isFeature = format.design === ArticleDesign.Feature;
+ const isInteractive = format.design === ArticleDesign.Interactive;
- const isFootballMatchReport =
- format.design === ArticleDesign.MatchReport && !!footballMatchStatsUrl;
-
- const mainMedia = article.mainMediaElements[0];
- const captionText = decideMainMediaCaption(mainMedia);
- const mainMediaUrl: string | undefined =
- mainMedia?._type ===
- 'model.dotcomrendering.pageElements.ImageBlockElement'
- ? mainMedia.media.allImages[0]?.url
- : undefined;
- const mainMediaAspectRatio =
- mainMedia?._type ===
- 'model.dotcomrendering.pageElements.ImageBlockElement'
- ? mainMedia.media.allImages[0]?.fields.aspectRatio
+ const footballMatchUrl =
+ article.matchType === 'FootballMatchType'
+ ? article.matchUrl
: undefined;
- const mainMediaOrientation =
- mainMediaUrl != null ? getImageOrientation(mainMediaUrl) : 'landscape';
-
- const layoutType = getLayoutType({
- isImmersive,
- isFeature,
- orientation: mainMediaOrientation,
- isMedia,
- isShowcase,
- });
- const contentLayoutName = `${ArticleDisplay[format.display]}Layout`;
-
- const isImmersivePortrait =
- layoutType === 'immersivePortraitDefault' ||
- layoutType === 'immersivePortraitFeature';
- const isImmersiveLandscape =
- layoutType === 'immersiveLandscapeDefault' ||
- layoutType === 'immersiveLandscapeFeature';
- const centreRuleColumn = (() => {
- switch (layoutType) {
- case 'immersivePortraitDefault':
- case 'immersivePortraitFeature':
- case 'immersiveLandscapeDefault':
- return 4;
- default:
- return 3;
- }
- })();
+ const isFootballMatchReport =
+ format.design === ArticleDesign.MatchReport && !!footballMatchStatsUrl;
- const ageWarning = getAgeWarning(
- article.tags,
- article.webPublicationDateDeprecated,
- );
+ const layoutType: LayoutType = isMedia
+ ? 'media'
+ : isShowcase
+ ? 'showcase'
+ : isInteractive
+ ? 'interactive'
+ : 'standard';
return (
- {isImmersive && (
-
-
-
-
-
- )}
- {format.display !== ArticleDisplay.Immersive &&
- format.design !== ArticleDesign.Audio &&
- layoutType !== 'immersivePortraitDefault' && (
-
- {isWeb &&
- format.theme === ArticleSpecial.Labs &&
- format.design !== ArticleDesign.Video ? (
-
- ) : (
-
- )}
-
- )}
+ {format.design !== ArticleDesign.Audio && (
+
+ {isWeb &&
+ format.theme === ArticleSpecial.Labs &&
+ format.design !== ArticleDesign.Video ? (
+
+ ) : (
+
+ )}
+
+ )}
{isApps ? (
<>
@@ -576,14 +515,6 @@ export const StandardLayoutArticleGrid = ({
/>
)}
-
diff --git a/dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx b/dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx
new file mode 100644
index 00000000000..31e12e72702
--- /dev/null
+++ b/dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx
@@ -0,0 +1,382 @@
+import { css } from '@emotion/react';
+import { from, until } from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
+import { ArticleBody } from '../../components/ArticleBody';
+import { ArticleContainer } from '../../components/ArticleContainer';
+import { ArticleHeadline } from '../../components/ArticleHeadline';
+import { ArticleMetaApps } from '../../components/ArticleMeta.apps';
+import { ArticleMeta } from '../../components/ArticleMeta.web';
+import { ArticleTitle } from '../../components/ArticleTitle';
+import { Border } from '../../components/Border';
+import { DecideLines } from '../../components/DecideLines';
+import { GridItem } from '../../components/GridItem';
+import { MainMedia } from '../../components/MainMedia';
+import { Section } from '../../components/Section';
+import { Standfirst } from '../../components/Standfirst';
+import { type ArticleFormat, ArticleSpecial } from '../../lib/articleFormat';
+import { getContributionsServiceUrl } from '../../lib/contributions';
+import type { NavType } from '../../model/extract-nav';
+import { palette as themePalette } from '../../palette';
+import type { ArticleDeprecated } from '../../types/article';
+import type { RenderingTarget } from '../../types/renderingTarget';
+import { interactiveLegacyClasses } from '../lib/interactiveLegacyStyling';
+
+const InteractiveGrid = ({ children }: { children: React.ReactNode }) => (
+
+ {children}
+
+);
+
+const maxWidth = css`
+ ${from.desktop} {
+ max-width: 620px;
+ }
+`;
+
+const stretchLines = css`
+ ${until.phablet} {
+ margin-left: -20px;
+ margin-right: -20px;
+ }
+ ${until.mobileLandscape} {
+ margin-left: -10px;
+ margin-right: -10px;
+ }
+`;
+
+interface Props {
+ article: ArticleDeprecated;
+ format: ArticleFormat;
+ renderingTarget: RenderingTarget;
+ serverTime?: number;
+}
+
+interface WebProps extends Props {
+ NAV: NavType;
+ renderingTarget: 'Web';
+}
+
+interface AppProps extends Props {
+ renderingTarget: 'Apps';
+}
+
+export const temporaryBodyCopyColourOverride = css`
+ .content__main-column--interactive p {
+ /* stylelint-disable-next-line declaration-no-important */
+ color: ${themePalette('--article-text')} !important;
+ }
+`;
+
+export const InteractiveArticleGridDeprecated = (
+ props: WebProps | AppProps,
+) => {
+ const { article, format, renderingTarget } = props;
+ const {
+ config: { host },
+ } = article;
+ const isApps = renderingTarget === 'Apps';
+
+ const contributionsServiceUrl = getContributionsServiceUrl(article);
+
+ const { branding } = article.commercialProperties[article.editionId];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {format.theme === ArticleSpecial.Labs ? (
+ <>
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {isApps ? (
+ <>
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+
{renderingTarget === 'Apps'
? augmentedElements
diff --git a/dotcom-rendering/src/lib/adStyles.ts b/dotcom-rendering/src/lib/adStyles.ts
index 3b286d63b36..9dad558304a 100644
--- a/dotcom-rendering/src/lib/adStyles.ts
+++ b/dotcom-rendering/src/lib/adStyles.ts
@@ -126,6 +126,8 @@ const spacefinderAdSlotContainerStyles = css`
text-align: center;
display: flex;
justify-content: center;
+ /* TODO: Revisit ads positioning/sizing nicely in interactive body grid */
+ width: 100%;
max-width: 620px;
margin-left: 0;