From 35601032adb83f5d4d1a6fa635d5f80654e4f29e Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 15 May 2026 21:59:10 +0100 Subject: [PATCH 01/13] Rough first pass --- dotcom-rendering/src/components/SubMeta.tsx | 9 +- dotcom-rendering/src/layouts/DecideLayout.tsx | 61 +- .../src/layouts/FullPageInteractiveLayout.tsx | 2 +- .../src/layouts/InteractiveLayout.tsx | 904 ++++++++---------- .../layouts/InteractiveLayoutDeprecated.tsx | 836 ++++++++++++++++ .../src/layouts/lib/furnitureArrangements.ts | 106 ++ 6 files changed, 1410 insertions(+), 508 deletions(-) create mode 100644 dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx create mode 100644 dotcom-rendering/src/layouts/lib/furnitureArrangements.ts diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx index 7be376741d0..71307c19d2e 100644 --- a/dotcom-rendering/src/components/SubMeta.tsx +++ b/dotcom-rendering/src/components/SubMeta.tsx @@ -16,6 +16,7 @@ import type { BaseLinkType } from '../model/extract-nav'; import { palette } from '../palette'; import { Island } from './Island'; import { ShareButton } from './ShareButton.island'; +import { interactiveLayoutSwitchoverDate } from '../layouts/DecideLayout'; const labelStyles = (design: ArticleDesign): SerializedStyles => css` ${design === ArticleDesign.Gallery ? grid.column.centre : undefined}; @@ -225,13 +226,15 @@ export const SubMeta = ({ format.design !== ArticleDesign.Interactive && format.design !== ArticleDesign.Gallery; + const usesDeprecatedInteractiveLayout = + format.design === ArticleDesign.Interactive && + interactiveLayoutSwitchoverDate > new Date(); + return (
{ const notSupported = 
Not supported
; const format = { @@ -42,6 +45,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { }; const serverTime = article.serverTime; + const publicationDate = new Date(article.frontendData.webPublicationDate); switch (article.display) { case ArticleDisplay.Immersive: { @@ -115,15 +119,24 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { default: { switch (article.design) { case ArticleDesign.Interactive: - return ( - - ); - + if (publicationDate < interactiveLayoutSwitchoverDate) { + return ( + + ); + } else { + return ( + + ); + } case ArticleDesign.FullPageInteractive: { return ( { }; const serverTime = article.serverTime; + const publicationDate = new Date(article.frontendData.webPublicationDate); switch (article.display) { case ArticleDisplay.Immersive: { @@ -299,15 +313,26 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => { default: { switch (article.design) { case ArticleDesign.Interactive: - return ( - - ); + if (publicationDate < interactiveLayoutSwitchoverDate) { + return ( + + ); + } else { + return ( + + ); + } case ArticleDesign.FullPageInteractive: { return ( ( -
- {children} -
-); - -const maxWidth = css` - ${from.desktop} { - max-width: 620px; - } -`; +import { RoleType } from '../types/content'; +import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island'; +import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.island'; +import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island'; const stretchLines = css` ${until.phablet} { @@ -181,38 +74,63 @@ const stretchLines = css` } `; -export const temporaryBodyCopyColourOverride = css` - .content__main-column--interactive p { - /* stylelint-disable-next-line declaration-no-important */ - color: ${themePalette('--article-text')} !important; - } -`; +interface GridItemProps { + area: Area; + layoutType: LayoutType; + element?: 'div' | 'aside'; + customCss?: SerializedStyles; + children: React.ReactNode; +} -interface CommonProps { +const GridItem = ({ + area, + layoutType, + element: Element = 'div', + customCss, + children, +}: GridItemProps) => ( + + {children} + +); + +interface Props { article: ArticleDeprecated; format: ArticleFormat; renderingTarget: RenderingTarget; serverTime?: number; } -interface WebProps extends CommonProps { +interface WebProps extends Props { NAV: NavType; renderingTarget: 'Web'; } -interface AppsProps extends CommonProps { +interface AppProps extends Props { renderingTarget: 'Apps'; } -export const InteractiveLayout = (props: WebProps | AppsProps) => { +export const InteractiveLayout = (props: WebProps | AppProps) => { const { article, format, renderingTarget, serverTime } = props; const { config: { isPaidContent, host, hasSurveyAd }, editionId, } = article; - const isApps = renderingTarget === 'Apps'; const isWeb = renderingTarget === 'Web'; + const isApps = renderingTarget === 'Apps'; + + const showBodyEndSlot = + isWeb && + (parse(article.slotMachineFlags ?? '').showBodyEnd || + article.config.switches.slotBodyEnd); + + // TODO: + // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render + // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. const showComments = article.isCommentable && !isPaidContent; @@ -247,367 +165,376 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { - )} - {article.isLegacyInteractive && ( - - )} {isWeb && ( - <> -
- {renderAds && ( - -
-
- -
-
- - )} - - tag.id)} - sectionId={article.config.section} - contentType={article.contentType} - /> -
- - {format.theme === ArticleSpecial.Labs && ( - +
+ {renderAds && ( +
- +
)} + tag.id)} + sectionId={article.config.section} + contentType={article.contentType} + /> +
+ )} - {renderAds && hasSurveyAd && ( - - )} - + {format.theme === ArticleSpecial.Labs && ( + +
+ +
+ + )} + + {isWeb && renderAds && hasSurveyAd && ( + )} +
-
-
+ + + - - -
- -
- - -
- + + + + + + + + +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ {isApps ? ( + <> + + -
- - - {format.theme === ArticleSpecial.Labs ? ( - <> - ) : ( - - )} - - -
- -
- - - - - -
-
- -
-
- - -
- {isApps ? ( - <> - - - - - - - - ) : ( - - )} -
- - - - + + + - - - -
-
- -
-
- - + )} + + + ) : ( + + )} + + + {/* Only show Listen to Article button on App landscape views */} + {isApps && ( + +
+ + + +
+ + )} + + - -
-
-
- + + + )} + + {showBodyEndSlot && ( + + + + )} + + + + + -
- -
- -
+ > + + + + + + + {isWeb && renderAds && (
{ {article.storyPackage && (
{ webURL={article.webURL} /> - {showComments && (
{ '--article-section-background', )} borderColour={themePalette('--article-border')} - fontColour={themePalette('--article-section-title')} > {
)}
- - {isWeb && props.NAV.subNavSections && ( -
- - - -
- )} - {isWeb && ( <> + {props.NAV.subNavSections && ( +
+ + + +
+ )}
{ editionId={article.editionId} />
- { !!article.config.switches.remoteBanner } tags={article.tags} + host={host} /> @@ -817,19 +746,22 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { /> )} + {isApps && ( -
- - - -
+ <> +
+ + + +
+ )} ); diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx new file mode 100644 index 00000000000..cef71817073 --- /dev/null +++ b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx @@ -0,0 +1,836 @@ +import { css, Global } from '@emotion/react'; +import { + from, + palette as sourcePalette, + 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 { 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 { DirectoryPageNav } from '../components/DirectoryPageNav'; +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 InteractiveLayoutDeprecated = (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 && ( + +
+ +
+ + )} + + {renderAds && hasSurveyAd && ( + + )} + + )} +
+ +
+
+ + +
+ +
+ + +
+ +
+ + + {format.theme === ArticleSpecial.Labs ? ( + <> + ) : ( + + )} + + +
+ +
+ + + + + +
+
+ +
+
+ + +
+ {isApps ? ( + <> + + + + + + + + ) : ( + + )} +
+ + + + + + + +
+
+ +
+
+ + + +
+
+ +
+ +
+ +
+ +
+ + {isWeb && renderAds && ( +
+ +
+ )} + + {article.storyPackage && ( +
+ + + +
+ )} + + + + + + {showComments && ( +
+ +
+ )} + + {!isPaidContent && ( +
+ + + + + +
+ )} + + {isWeb && renderAds && ( +
+ +
+ )} +
+ + {isWeb && props.NAV.subNavSections && ( +
+ + + +
+ )} + + {isWeb && ( + <> +
+
+
+ + + + + + + + + )} + {isApps && ( +
+ + + +
+ )} + + ); +}; diff --git a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts new file mode 100644 index 00000000000..d7e0409bfbf --- /dev/null +++ b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts @@ -0,0 +1,106 @@ +import { css, type SerializedStyles } from '@emotion/react'; +import { from, until } from '@guardian/source/foundations'; + +export type LayoutType = 'standard'; + +export type Area = + | 'title' + | 'headline' + | 'standfirst' + | 'main-media' + | 'meta' + | 'body' + | 'right-column'; + +type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol'; + +const breakpointQueries: Record = { + mobile: until.tablet, + tablet: from.tablet, + desktop: from.desktop, + leftCol: from.leftCol, +}; + +// Raw CSS overrides per area per breakpoint. Entries are only needed when an area +// deviates from the default: centre column, single-column mobile layout with areas +// in DOM order (main-media → title → headline → standfirst → meta → body → right-column). + +type AreaCss = Partial>; +type LayoutCssMap = Partial>; + +const standardCss: LayoutCssMap = { + title: { + tablet: 'grid-row: 1;', + leftCol: + 'grid-row: 1; grid-column: left-column-start / left-column-end;', + }, + headline: { + tablet: 'grid-row: 2;', + leftCol: 'grid-row: 1;', + }, + standfirst: { + tablet: 'grid-row: 3;', + leftCol: 'grid-row: 2;', + }, + 'main-media': { + tablet: 'grid-row: 4;', + leftCol: 'grid-row: 3;', + }, + meta: { + tablet: 'grid-row: 5;', + leftCol: + 'grid-row: 3 / span 2; grid-column: left-column-start / left-column-end;', + }, + body: { + tablet: 'grid-row: 6;', + leftCol: 'grid-row: 4;', + }, + 'right-column': { + desktop: + 'grid-row: 1 / span 6; grid-column: right-column-start / right-column-end;', + leftCol: + 'grid-row: 1 / span 4; grid-column: right-column-start / right-column-end;', + }, +}; + +const layoutCssMaps: Record = { + standard: standardCss, +}; + +/** + * Returns the Emotion CSS needed to position a single grid item — its + * default column, its row at each breakpoint, and any column overrides. + * The grid item _must_ be inside a {@link grid} module container. + * + * All items default to the centre column. Per-breakpoint overrides for + * `grid-row` and `grid-column` are applied on top via media queries, + * looked up from the plain CSS maps defined in this file. + * + * @param area - The named piece of article furniture to position (e.g. `'headline'`, `'body'`). + * @param layoutType - See {@link LayoutType}. Determines which CSS map to use for lookups. + * + * @example + * // In a React component: + *
+ */ +export const gridItemCss = ( + area: Area, + layoutType: LayoutType, +): SerializedStyles => { + const areaOverrides = layoutCssMaps[layoutType][area] ?? {}; + + const breakpointCss = Object.entries(areaOverrides).map( + ([bp, styles]) => css` + ${breakpointQueries[bp as Breakpoint]} { + ${styles} + } + `, + ); + + // All items default to the centre column; breakpoint entries above + // override grid-row and grid-column as needed. + return css` + grid-column: centre-column-start / centre-column-end; + ${breakpointCss} + `; +}; From 97abc9dee1ec30256a759de68286803ecbf59983 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 15 May 2026 22:35:55 +0100 Subject: [PATCH 02/13] Combine into one InteractiveLayout --- dotcom-rendering/src/layouts/DecideLayout.tsx | 62 +- .../src/layouts/FullPageInteractiveLayout.tsx | 2 +- .../src/layouts/InteractiveLayout.tsx | 1080 ++++++++++++----- .../layouts/InteractiveLayoutDeprecated.tsx | 836 ------------- dotcom-rendering/src/lib/ArticleRenderer.tsx | 1 + 5 files changed, 784 insertions(+), 1197 deletions(-) delete mode 100644 dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx index 94e98f83b0f..e10e98d23db 100644 --- a/dotcom-rendering/src/layouts/DecideLayout.tsx +++ b/dotcom-rendering/src/layouts/DecideLayout.tsx @@ -12,7 +12,6 @@ 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'; @@ -119,24 +118,17 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { default: { switch (article.design) { case ArticleDesign.Interactive: - if (publicationDate < interactiveLayoutSwitchoverDate) { - return ( - - ); - } else { - return ( - - ); - } + return ( + + ); case ArticleDesign.FullPageInteractive: { return ( { default: { switch (article.design) { case ArticleDesign.Interactive: - if (publicationDate < interactiveLayoutSwitchoverDate) { - return ( - - ); - } else { - return ( - - ); - } + return ( + + ); case ArticleDesign.FullPageInteractive: { return ( ); -interface Props { +interface NewArticleGridProps { + article: ArticleDeprecated; + format: ArticleFormat; + branding: Branding | undefined; + contributionsServiceUrl: string; + isApps: boolean; + isWeb: boolean; + renderAds: boolean; + showBodyEndSlot: boolean; + host: string | undefined; +} + +const ArticleGrid = ({ + article, + format, + branding, + contributionsServiceUrl, + isApps, + isWeb, + renderAds, + showBodyEndSlot, + host, +}: NewArticleGridProps) => ( + /* GridItem order matters — mobile layout relies on DOM order for grid placement. + See furnitureArrangements.ts if reordering. */ +
+ + + + + + + + + + + + + +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ {isApps ? ( + <> + + + + + + {!!article.affiliateLinksDisclaimer && ( + + )} + + + ) : ( + + )} + + + {/* Only show Listen to Article button on App landscape views */} + {isApps && ( + +
+ + + +
+ + )} + + + + {isApps && ( + + + + )} + + {showBodyEndSlot && ( + + + + )} + + + + + + + + + + + +
+); + +// --------------------------------------------------------------------------- +// Main layout +// --------------------------------------------------------------------------- + +interface CommonProps { article: ArticleDeprecated; format: ArticleFormat; renderingTarget: RenderingTarget; serverTime?: number; + useDeprecatedGrid?: boolean; } -interface WebProps extends Props { +interface WebProps extends CommonProps { NAV: NavType; renderingTarget: 'Web'; } -interface AppProps extends Props { +interface AppsProps extends CommonProps { renderingTarget: 'Apps'; } -export const InteractiveLayout = (props: WebProps | AppProps) => { - const { article, format, renderingTarget, serverTime } = props; +export const InteractiveLayout = (props: WebProps | AppsProps) => { + const { article, format, renderingTarget, serverTime, useDeprecatedGrid } = + props; const { config: { isPaidContent, host, hasSurveyAd }, editionId, } = article; - const isWeb = renderingTarget === 'Web'; const isApps = renderingTarget === 'Apps'; + const isWeb = renderingTarget === 'Web'; const showBodyEndSlot = isWeb && - (parse(article.slotMachineFlags ?? '').showBodyEnd || - article.config.switches.slotBodyEnd); - - // TODO: - // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render - // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. + ((parse(article.slotMachineFlags ?? '').showBodyEnd || + article.config.switches.slotBodyEnd) ?? + false); const showComments = article.isCommentable && !isPaidContent; @@ -165,8 +458,15 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { + {useDeprecatedGrid && ( + + )} )} + {useDeprecatedGrid && article.isLegacyInteractive && ( + + )} + {isWeb && (
{renderAds && ( @@ -190,9 +490,10 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { discussionApiUrl={article.config.discussionApiUrl} idApiUrl={article.config.idApiUrl} contributionsServiceUrl={contributionsServiceUrl} - showSubNav={true} - showSlimNav={false} - hasPageSkinContentSelfConstrain={true} + showSubNav={!useDeprecatedGrid} + showSlimNav={useDeprecatedGrid} + hasPageSkin={useDeprecatedGrid ? false : undefined} + hasPageSkinContentSelfConstrain={!useDeprecatedGrid} pageId={article.pageId} tagIds={article.tags.map((tag) => tag.id)} sectionId={article.config.section} @@ -209,7 +510,7 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { backgroundColour={sourcePalette.labs[400]} borderColour={sourcePalette.neutral[60]} sectionId="labs-header" - element="aside" + element={useDeprecatedGrid ? undefined : 'aside'} > @@ -225,265 +526,107 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { pageId={article.pageId} pageTags={article.tags} /> - {/* GridItem order matters — mobile layout relies on DOM order for grid placement. - See furnitureArrangements.ts if reordering. */} -
- - - - + ) : ( + + )} + + {/* SlotBodyEnd is handled inside NewArticleGrid for the new layout. + For the deprecated layout it lives here, matching the original structure. */} + {useDeprecatedGrid && ( +
- - - - - - - - - -
- {isWeb && - format.theme === ArticleSpecial.Labs && - format.design !== ArticleDesign.Video ? ( - - ) : ( - + + - )} +
- {isApps ? ( - <> - - - - - - {!!article.affiliateLinksDisclaimer && ( - - )} - - - ) : ( - - )} - - - {/* Only show Listen to Article button on App landscape views */} - {isApps && ( - -
- - - -
- - )} - - - - {isApps && ( - - - - )} +
+ )} - {showBodyEndSlot && ( - - - + {useDeprecatedGrid && ( + <> +
+
+
{ webUrl={article.webURL} webTitle={article.webTitle} showBottomSocialButtons={ - article.showBottomSocialButtons && - renderingTarget === 'Web' + article.showBottomSocialButtons && isWeb } /> - - - - - - - - - -
+ + + )} {isWeb && renderAds && (
{ {article.storyPackage && (
{ webURL={article.webURL} /> + {showComments && (
{ '--article-section-background', )} borderColour={themePalette('--article-border')} + fontColour={ + useDeprecatedGrid + ? themePalette('--article-section-title') + : undefined + } > {
)} + {isWeb && ( <> {props.NAV.subNavSections && ( @@ -735,7 +853,7 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { !!article.config.switches.remoteBanner } tags={article.tags} - host={host} + host={useDeprecatedGrid ? undefined : host} /> @@ -748,21 +866,341 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { )} {isApps && ( - <> -
- - - -
- +
+ + + +
)} ); }; + +// Temporary override until deprecated interactive articles are migrated to the +// new grid. Can be removed once useDeprecatedGrid is no longer needed. +export const temporaryBodyCopyColourOverride = css` + .content__main-column--interactive p { + /* stylelint-disable-next-line declaration-no-important */ + color: ${themePalette('--article-text')} !important; + } +`; + +// --------------------------------------------------------------------------- +// Deprecated grid (pre-switchover articles) +// --------------------------------------------------------------------------- + +const deprecatedMaxWidth = css` + ${from.desktop} { + max-width: 620px; + } +`; + +const DeprecatedInteractiveGridWrapper = ({ + children, +}: { + children: React.ReactNode; +}) => ( +
+ {children} +
+); + +interface DeprecatedArticleGridProps { + article: ArticleDeprecated; + format: ArticleFormat; + branding: Branding | undefined; + contributionsServiceUrl: string; + isApps: boolean; + host: string | undefined; +} + +const DeprecatedArticleGrid = ({ + article, + format, + branding, + contributionsServiceUrl, + isApps, + host, +}: DeprecatedArticleGridProps) => ( +
+
+ + +
+ +
+ + +
+ +
+ + + {format.theme === ArticleSpecial.Labs ? <> : } + + +
+ +
+ + + + + +
+
+ +
+
+ + +
+ {isApps ? ( + <> + + + + + + + + ) : ( + + )} +
+ + + + + + + +
+
+); diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx deleted file mode 100644 index cef71817073..00000000000 --- a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx +++ /dev/null @@ -1,836 +0,0 @@ -import { css, Global } from '@emotion/react'; -import { - from, - palette as sourcePalette, - 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 { 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 { DirectoryPageNav } from '../components/DirectoryPageNav'; -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 InteractiveLayoutDeprecated = (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 && ( - -
- -
- - )} - - {renderAds && hasSurveyAd && ( - - )} - - )} -
- -
-
- - -
- -
- - -
- -
- - - {format.theme === ArticleSpecial.Labs ? ( - <> - ) : ( - - )} - - -
- -
- - - - - -
-
- -
-
- - -
- {isApps ? ( - <> - - - - - - - - ) : ( - - )} -
- - - - - - - -
-
- -
-
- - - -
-
- -
- -
- -
- -
- - {isWeb && renderAds && ( -
- -
- )} - - {article.storyPackage && ( -
- - - -
- )} - - - - - - {showComments && ( -
- -
- )} - - {!isPaidContent && ( -
- - - - - -
- )} - - {isWeb && renderAds && ( -
- -
- )} -
- - {isWeb && props.NAV.subNavSections && ( -
- - - -
- )} - - {isWeb && ( - <> -
-
-
- - - - - - - - - )} - {isApps && ( -
- - - -
- )} - - ); -}; diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index c5878173c14..8c95be711fc 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -205,6 +205,7 @@ export const ArticleRenderer = ({ ? interactiveLegacyClasses.contentMainColumn : '', ].join(' ')} + // TODO: Conditionally apply grid for interactives? css={[commercialPosition, spacefinderAdStyles]} > {renderingTarget === 'Apps' From 90c0ec2b374b1ad4b88d12737ba6a2826f01e9b2 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 15 May 2026 23:09:22 +0100 Subject: [PATCH 03/13] Gridception --- .../src/components/ArticleBody.tsx | 5 ++ .../src/layouts/InteractiveLayout.tsx | 50 ++++++++++++------- .../src/layouts/lib/furnitureArrangements.ts | 4 +- dotcom-rendering/src/lib/ArticleRenderer.tsx | 17 ++++++- dotcom-rendering/src/lib/renderElement.tsx | 3 ++ 5 files changed, 59 insertions(+), 20 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx index 233adc190f7..5ff21a48f53 100644 --- a/dotcom-rendering/src/components/ArticleBody.tsx +++ b/dotcom-rendering/src/components/ArticleBody.tsx @@ -56,6 +56,8 @@ type Props = { shouldHideAds: boolean; serverTime?: number; idApiUrl?: string; + accentColor?: string; + isShinyNewInteractiveLayout?: boolean; }; const globalOlStyles = () => css` @@ -147,6 +149,8 @@ export const ArticleBody = ({ shouldHideAds, serverTime, idApiUrl, + accentColor, + isShinyNewInteractiveLayout = false, }: Props) => { const isInteractiveContent = format.design === ArticleDesign.Interactive || @@ -270,6 +274,7 @@ export const ArticleBody = ({ contributionsServiceUrl={contributionsServiceUrl} shouldHideAds={shouldHideAds} idApiUrl={idApiUrl} + isShinyNewInteractiveLayout={isShinyNewInteractiveLayout} />
{hasObserverPublicationTag && } diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index ca250b0702f..b5c3049cc97 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -305,6 +305,7 @@ const ArticleGrid = ({ editionId={article.editionId} shouldHideAds={article.shouldHideAds} idApiUrl={article.config.idApiUrl} + isShinyNewInteractiveLayout={true} /> {isApps && ( @@ -336,25 +337,38 @@ const ArticleGrid = ({ /> )} - - + > +
+ + +
+
{ const isSectionedMiniProfilesArticle = elements.filter( @@ -93,6 +96,7 @@ export const ArticleRenderer = ({ isSectionedMiniProfilesArticle={isSectionedMiniProfilesArticle} shouldHideAds={shouldHideAds} idApiUrl={idApiUrl} + isShinyNewInteractiveLayout={isShinyNewInteractiveLayout} /> ); }); @@ -193,6 +197,13 @@ export const ArticleRenderer = ({ // ^^ Until we decide where to do the "isomorphism split" in this this code is not safe here. // But should be soon. + const interactiveLayoutCSS = css` + ${grid.container} + > * { + ${grid.column.centre} + } + `; + return (
{renderingTarget === 'Apps' ? augmentedElements diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx index f877210f059..b512d47330b 100644 --- a/dotcom-rendering/src/lib/renderElement.tsx +++ b/dotcom-rendering/src/lib/renderElement.tsx @@ -108,6 +108,7 @@ type Props = { contentType?: string; contentLayout?: string; idApiUrl?: string; + isShinyNewInteractiveLayout?: boolean; }; // updateRole modifies the role of an element in a way appropriate for most @@ -180,6 +181,7 @@ export const renderElement = ({ contentType, contentLayout, idApiUrl, + isShinyNewInteractiveLayout = false, }: Props) => { const isBlog = format.design === ArticleDesign.LiveBlog || @@ -1051,6 +1053,7 @@ export const RenderArticleElement = ({ contentType, contentLayout, idApiUrl, + isShinyNewInteractiveLayout = false, }: Props) => { const withUpdatedRole = updateRole(element, format); From 35f2017fe6544836d62c3b6fade6bf89852f7d88 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 15 May 2026 23:33:16 +0100 Subject: [PATCH 04/13] Separate out two layouts again --- dotcom-rendering/src/components/SubMeta.tsx | 9 +- dotcom-rendering/src/layouts/DecideLayout.tsx | 62 +- .../src/layouts/FullPageInteractiveLayout.tsx | 2 +- .../src/layouts/InteractiveLayout.tsx | 1131 +++++------------ .../layouts/InteractiveLayoutDeprecated.tsx | 837 ++++++++++++ dotcom-rendering/src/lib/ArticleRenderer.tsx | 3 +- dotcom-rendering/src/lib/renderElement.tsx | 3 - 7 files changed, 1231 insertions(+), 816 deletions(-) create mode 100644 dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx index 71307c19d2e..c7f116e5cf4 100644 --- a/dotcom-rendering/src/components/SubMeta.tsx +++ b/dotcom-rendering/src/components/SubMeta.tsx @@ -16,7 +16,6 @@ import type { BaseLinkType } from '../model/extract-nav'; import { palette } from '../palette'; import { Island } from './Island'; import { ShareButton } from './ShareButton.island'; -import { interactiveLayoutSwitchoverDate } from '../layouts/DecideLayout'; const labelStyles = (design: ArticleDesign): SerializedStyles => css` ${design === ArticleDesign.Gallery ? grid.column.centre : undefined}; @@ -131,6 +130,7 @@ type Props = { webUrl: string; webTitle: string; showBottomSocialButtons: boolean; + isDeprecatedInteractiveLayout?: boolean; }; const syndicationButtonOverrides = css` @@ -206,6 +206,7 @@ export const SubMeta = ({ webUrl, webTitle, showBottomSocialButtons, + isDeprecatedInteractiveLayout = false, }: Props) => { const createLinks = () => { const links: BaseLinkType[] = []; @@ -226,15 +227,11 @@ export const SubMeta = ({ format.design !== ArticleDesign.Interactive && format.design !== ArticleDesign.Gallery; - const usesDeprecatedInteractiveLayout = - format.design === ArticleDesign.Interactive && - interactiveLayoutSwitchoverDate > new Date(); - return (
{ default: { switch (article.design) { case ArticleDesign.Interactive: - return ( - - ); + if (publicationDate < interactiveLayoutSwitchoverDate) { + return ( + + ); + } else { + return ( + + ); + } case ArticleDesign.FullPageInteractive: { return ( { default: { switch (article.design) { case ArticleDesign.Interactive: - return ( - - ); + if (publicationDate < interactiveLayoutSwitchoverDate) { + return ( + + ); + } else { + return ( + + ); + } case ArticleDesign.FullPageInteractive: { return ( ); -interface NewArticleGridProps { - article: ArticleDeprecated; - format: ArticleFormat; - branding: Branding | undefined; - contributionsServiceUrl: string; - isApps: boolean; - isWeb: boolean; - renderAds: boolean; - showBodyEndSlot: boolean; - host: string | undefined; -} - -const ArticleGrid = ({ - article, - format, - branding, - contributionsServiceUrl, - isApps, - isWeb, - renderAds, - showBodyEndSlot, - host, -}: NewArticleGridProps) => ( - /* GridItem order matters — mobile layout relies on DOM order for grid placement. - See furnitureArrangements.ts if reordering. */ -
- - - - - - - - - - - - - -
- {isWeb && - format.theme === ArticleSpecial.Labs && - format.design !== ArticleDesign.Video ? ( - - ) : ( - - )} -
- {isApps ? ( - <> - - - - - - {!!article.affiliateLinksDisclaimer && ( - - )} - - - ) : ( - - )} - - - {/* Only show Listen to Article button on App landscape views */} - {isApps && ( - -
- - - -
- - )} - - - - {isApps && ( - - - - )} - - {showBodyEndSlot && ( - - - - )} -
-
- - -
-
- - - - - - - - - -
-); - -// --------------------------------------------------------------------------- -// Main layout -// --------------------------------------------------------------------------- - -interface CommonProps { +interface Props { article: ArticleDeprecated; format: ArticleFormat; renderingTarget: RenderingTarget; serverTime?: number; - useDeprecatedGrid?: boolean; } -interface WebProps extends CommonProps { +interface WebProps extends Props { NAV: NavType; renderingTarget: 'Web'; } -interface AppsProps extends CommonProps { +interface AppProps extends Props { renderingTarget: 'Apps'; } -export const InteractiveLayout = (props: WebProps | AppsProps) => { - const { article, format, renderingTarget, serverTime, useDeprecatedGrid } = - props; +export const InteractiveLayout = (props: WebProps | AppProps) => { + const { article, format, renderingTarget, serverTime } = props; const { config: { isPaidContent, host, hasSurveyAd }, editionId, } = article; - const isApps = renderingTarget === 'Apps'; const isWeb = renderingTarget === 'Web'; + const isApps = renderingTarget === 'Apps'; const showBodyEndSlot = isWeb && - ((parse(article.slotMachineFlags ?? '').showBodyEnd || - article.config.switches.slotBodyEnd) ?? - false); + (parse(article.slotMachineFlags ?? '').showBodyEnd || + article.config.switches.slotBodyEnd); + + // TODO: + // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render + // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. const showComments = article.isCommentable && !isPaidContent; @@ -472,15 +165,8 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { - {useDeprecatedGrid && ( - - )} )} - {useDeprecatedGrid && article.isLegacyInteractive && ( - - )} - {isWeb && (
{renderAds && ( @@ -504,10 +190,9 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { discussionApiUrl={article.config.discussionApiUrl} idApiUrl={article.config.idApiUrl} contributionsServiceUrl={contributionsServiceUrl} - showSubNav={!useDeprecatedGrid} - showSlimNav={useDeprecatedGrid} - hasPageSkin={useDeprecatedGrid ? false : undefined} - hasPageSkinContentSelfConstrain={!useDeprecatedGrid} + showSubNav={true} + showSlimNav={false} + hasPageSkinContentSelfConstrain={true} pageId={article.pageId} tagIds={article.tags.map((tag) => tag.id)} sectionId={article.config.section} @@ -524,7 +209,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { backgroundColour={sourcePalette.labs[400]} borderColour={sourcePalette.neutral[60]} sectionId="labs-header" - element={useDeprecatedGrid ? undefined : 'aside'} + element="aside" > @@ -540,125 +225,337 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { pageId={article.pageId} pageTags={article.tags} /> + {/* GridItem order matters — mobile layout relies on DOM order for grid placement. + See furnitureArrangements.ts if reordering. */} +
+ + + + + + + + + + + + + +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ {isApps ? ( + <> + + + + + + {!!article.affiliateLinksDisclaimer && ( + + )} + + + ) : ( + + )} + + + {/* Only show Listen to Article button on App landscape views */} + {isApps && ( + +
+ + + +
+ + )} + + - {useDeprecatedGrid ? ( - - ) : ( - - )} + {isApps && ( + + + + )} - {/* SlotBodyEnd is handled inside NewArticleGrid for the new layout. - For the deprecated layout it lives here, matching the original structure. */} - {useDeprecatedGrid && ( -
+ + + )} +
+
+ + +
+
+ + + -
+ - -
-
- )} - - {useDeprecatedGrid && ( - <> -
- -
-
- -
- - )} + + +
{isWeb && renderAds && (
{ {article.storyPackage && (
{ webURL={article.webURL} /> - {showComments && (
{ '--article-section-background', )} borderColour={themePalette('--article-border')} - fontColour={ - useDeprecatedGrid - ? themePalette('--article-section-title') - : undefined - } > {
)} - {isWeb && ( <> {props.NAV.subNavSections && ( @@ -867,7 +756,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { !!article.config.switches.remoteBanner } tags={article.tags} - host={useDeprecatedGrid ? undefined : host} + host={host} /> @@ -880,341 +769,21 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { )} {isApps && ( -
- - - -
+ <> +
+ + + +
+ )} ); }; - -// Temporary override until deprecated interactive articles are migrated to the -// new grid. Can be removed once useDeprecatedGrid is no longer needed. -export const temporaryBodyCopyColourOverride = css` - .content__main-column--interactive p { - /* stylelint-disable-next-line declaration-no-important */ - color: ${themePalette('--article-text')} !important; - } -`; - -// --------------------------------------------------------------------------- -// Deprecated grid (pre-switchover articles) -// --------------------------------------------------------------------------- - -const deprecatedMaxWidth = css` - ${from.desktop} { - max-width: 620px; - } -`; - -const DeprecatedInteractiveGridWrapper = ({ - children, -}: { - children: React.ReactNode; -}) => ( -
- {children} -
-); - -interface DeprecatedArticleGridProps { - article: ArticleDeprecated; - format: ArticleFormat; - branding: Branding | undefined; - contributionsServiceUrl: string; - isApps: boolean; - host: string | undefined; -} - -const DeprecatedArticleGrid = ({ - article, - format, - branding, - contributionsServiceUrl, - isApps, - host, -}: DeprecatedArticleGridProps) => ( -
-
- - -
- -
- - -
- -
- - - {format.theme === ArticleSpecial.Labs ? <> : } - - -
- -
- - - - - -
-
- -
-
- - -
- {isApps ? ( - <> - - - - - - - - ) : ( - - )} -
- - - - - - - -
-
-); diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx new file mode 100644 index 00000000000..b75a8b2a2be --- /dev/null +++ b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx @@ -0,0 +1,837 @@ +import { css, Global } from '@emotion/react'; +import { + from, + palette as sourcePalette, + 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 { 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 { DirectoryPageNav } from '../components/DirectoryPageNav'; +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 InteractiveLayoutDeprecated = (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 && ( + +
+ +
+ + )} + + {renderAds && hasSurveyAd && ( + + )} + + )} +
+ +
+
+ + +
+ +
+ + +
+ +
+ + + {format.theme === ArticleSpecial.Labs ? ( + <> + ) : ( + + )} + + +
+ +
+ + + + + +
+
+ +
+
+ + +
+ {isApps ? ( + <> + + + + + + + + ) : ( + + )} +
+ + + + + + + +
+
+ +
+
+ + + +
+
+ +
+ +
+ +
+ +
+ + {isWeb && renderAds && ( +
+ +
+ )} + + {article.storyPackage && ( +
+ + + +
+ )} + + + + + + {showComments && ( +
+ +
+ )} + + {!isPaidContent && ( +
+ + + + + +
+ )} + + {isWeb && renderAds && ( +
+ +
+ )} +
+ + {isWeb && props.NAV.subNavSections && ( +
+ + + +
+ )} + + {isWeb && ( + <> +
+
+
+ + + + + + + + + )} + {isApps && ( +
+ + + +
+ )} + + ); +}; diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index 75c4bb93490..eac097dfe3f 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -3,6 +3,7 @@ import { Fragment } from 'react'; import { useConfig } from '../components/ConfigContext'; import { FeastContextualNudge } from '../components/FeastContextualNudge.island'; import { Island } from '../components/Island'; +import { grid } from '../grid'; import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling'; import type { ServerSideTests, Switches } from '../types/config'; import type { FEElement, RecipeBlockElement } from '../types/content'; @@ -12,7 +13,6 @@ import { ArticleDesign, type ArticleFormat } from './articleFormat'; import type { EditionId } from './edition'; import { RenderArticleElement } from './renderElement'; import { withSignInGateSlot } from './withSignInGateSlot'; -import { grid } from '../grid'; // This is required for spacefinder to work! const commercialPosition = css` @@ -96,7 +96,6 @@ export const ArticleRenderer = ({ isSectionedMiniProfilesArticle={isSectionedMiniProfilesArticle} shouldHideAds={shouldHideAds} idApiUrl={idApiUrl} - isShinyNewInteractiveLayout={isShinyNewInteractiveLayout} /> ); }); diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx index b512d47330b..f877210f059 100644 --- a/dotcom-rendering/src/lib/renderElement.tsx +++ b/dotcom-rendering/src/lib/renderElement.tsx @@ -108,7 +108,6 @@ type Props = { contentType?: string; contentLayout?: string; idApiUrl?: string; - isShinyNewInteractiveLayout?: boolean; }; // updateRole modifies the role of an element in a way appropriate for most @@ -181,7 +180,6 @@ export const renderElement = ({ contentType, contentLayout, idApiUrl, - isShinyNewInteractiveLayout = false, }: Props) => { const isBlog = format.design === ArticleDesign.LiveBlog || @@ -1053,7 +1051,6 @@ export const RenderArticleElement = ({ contentType, contentLayout, idApiUrl, - isShinyNewInteractiveLayout = false, }: Props) => { const withUpdatedRole = updateRole(element, format); From b9b1a5d834f627590b1f638d05f204483b72b5c5 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 19 May 2026 17:54:55 +0100 Subject: [PATCH 05/13] Adjust fullWidth element styling Bye bye scrollbar-width --- dotcom-rendering/src/components/Figure.tsx | 44 +------------------ .../src/layouts/InteractiveLayout.tsx | 19 +------- .../src/layouts/lib/furnitureArrangements.ts | 6 +-- dotcom-rendering/src/lib/ArticleRenderer.tsx | 4 +- 4 files changed, 9 insertions(+), 64 deletions(-) diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index ccb113fb4b1..d69c3414b1b 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/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` diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index b846247e7e6..eb0a2379f0c 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -25,7 +25,6 @@ import { GuardianLabsLines } from '../components/GuardianLabsLines'; 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 { ListenToArticle } from '../components/ListenToArticle.island'; @@ -54,7 +53,6 @@ import { parse } from '../lib/slot-machine-flags'; 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 { type Area, @@ -140,23 +138,8 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { 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 && ( <> @@ -240,7 +223,7 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { }), ]} > - + = { // Raw CSS overrides per area per breakpoint. Entries are only needed when an area // deviates from the default: centre column, single-column mobile layout with areas -// in DOM order (main-media → title → headline → standfirst → meta → body → right-column). +// in DOM order (media → title → headline → standfirst → meta → body → right-column). type AreaCss = Partial>; type LayoutCssMap = Partial>; @@ -43,7 +43,7 @@ const standardCss: LayoutCssMap = { tablet: 'grid-row: 3;', leftCol: 'grid-row: 2;', }, - 'main-media': { + media: { tablet: 'grid-row: 4;', leftCol: 'grid-row: 3;', }, diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index eac097dfe3f..23cda53ab5e 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -13,6 +13,7 @@ import { ArticleDesign, type ArticleFormat } from './articleFormat'; import type { EditionId } from './edition'; import { RenderArticleElement } from './renderElement'; import { withSignInGateSlot } from './withSignInGateSlot'; +import { interactiveLayoutSwitchoverDate } from '../layouts/DecideLayout'; // This is required for spacefinder to work! const commercialPosition = css` @@ -211,7 +212,8 @@ export const ArticleRenderer = ({ // Note, this class MUST be on the *direct parent* of the // elements for some legacy interactive styling to work. - format.design === ArticleDesign.Interactive + format.design === ArticleDesign.Interactive && + interactiveLayoutSwitchoverDate > new Date() ? interactiveLegacyClasses.contentMainColumn : '', ].join(' ')} From 0414a8aaf3e876d3a99276a6fe527bf1cb8397ba Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 19 May 2026 18:18:30 +0100 Subject: [PATCH 06/13] Stop applying legacy class to article element --- dotcom-rendering/src/lib/ArticleRenderer.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index 23cda53ab5e..682127b92ae 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -13,7 +13,6 @@ import { ArticleDesign, type ArticleFormat } from './articleFormat'; import type { EditionId } from './edition'; import { RenderArticleElement } from './renderElement'; import { withSignInGateSlot } from './withSignInGateSlot'; -import { interactiveLayoutSwitchoverDate } from '../layouts/DecideLayout'; // This is required for spacefinder to work! const commercialPosition = css` @@ -213,7 +212,7 @@ export const ArticleRenderer = ({ // Note, this class MUST be on the *direct parent* of the // elements for some legacy interactive styling to work. format.design === ArticleDesign.Interactive && - interactiveLayoutSwitchoverDate > new Date() + !isShinyNewInteractiveLayout ? interactiveLegacyClasses.contentMainColumn : '', ].join(' ')} From 87b96c29e7c66e7732b9654d518581239c13f45d Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 20 May 2026 15:33:37 +0100 Subject: [PATCH 07/13] Invert old/new interactive prop --- dotcom-rendering/src/components/ArticleBody.tsx | 6 +++--- dotcom-rendering/src/layouts/InteractiveLayout.tsx | 1 - .../src/layouts/InteractiveLayoutDeprecated.tsx | 1 + dotcom-rendering/src/lib/ArticleRenderer.tsx | 9 ++++----- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx index 5ff21a48f53..ff128a1afde 100644 --- a/dotcom-rendering/src/components/ArticleBody.tsx +++ b/dotcom-rendering/src/components/ArticleBody.tsx @@ -57,7 +57,7 @@ type Props = { serverTime?: number; idApiUrl?: string; accentColor?: string; - isShinyNewInteractiveLayout?: boolean; + isOldInteractive?: boolean; }; const globalOlStyles = () => css` @@ -150,7 +150,7 @@ export const ArticleBody = ({ serverTime, idApiUrl, accentColor, - isShinyNewInteractiveLayout = false, + isOldInteractive = false, }: Props) => { const isInteractiveContent = format.design === ArticleDesign.Interactive || @@ -274,7 +274,7 @@ export const ArticleBody = ({ contributionsServiceUrl={contributionsServiceUrl} shouldHideAds={shouldHideAds} idApiUrl={idApiUrl} - isShinyNewInteractiveLayout={isShinyNewInteractiveLayout} + isOldInteractive={isOldInteractive} />
{hasObserverPublicationTag && } diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index eb0a2379f0c..adc0eb56a7e 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -422,7 +422,6 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { editionId={article.editionId} shouldHideAds={article.shouldHideAds} idApiUrl={article.config.idApiUrl} - isShinyNewInteractiveLayout={true} /> {isApps && ( diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx index b75a8b2a2be..6141e64a78a 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx @@ -525,6 +525,7 @@ export const InteractiveLayoutDeprecated = (props: WebProps | AppsProps) => { editionId={article.editionId} shouldHideAds={article.shouldHideAds} idApiUrl={article.config.idApiUrl} + isOldInteractive={true} /> diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index 682127b92ae..13cc697e423 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -41,7 +41,7 @@ type Props = { contributionsServiceUrl: string; shouldHideAds: boolean; idApiUrl?: string; - isShinyNewInteractiveLayout?: boolean; + isOldInteractive?: boolean; }; export const ArticleRenderer = ({ @@ -66,7 +66,7 @@ export const ArticleRenderer = ({ contributionsServiceUrl, shouldHideAds, idApiUrl, - isShinyNewInteractiveLayout = false, + isOldInteractive = false, }: Props) => { const isSectionedMiniProfilesArticle = elements.filter( @@ -211,8 +211,7 @@ export const ArticleRenderer = ({ // Note, this class MUST be on the *direct parent* of the // elements for some legacy interactive styling to work. - format.design === ArticleDesign.Interactive && - !isShinyNewInteractiveLayout + format.design === ArticleDesign.Interactive && isOldInteractive ? interactiveLegacyClasses.contentMainColumn : '', ].join(' ')} @@ -220,7 +219,7 @@ export const ArticleRenderer = ({ css={[ commercialPosition, spacefinderAdStyles, - isShinyNewInteractiveLayout && interactiveLayoutCSS, + !isOldInteractive && interactiveLayoutCSS, ]} > {renderingTarget === 'Apps' From 2cca62bdf7fd8cd1dd564021a477b342afdd8959 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 3 Jun 2026 18:27:13 +0100 Subject: [PATCH 08/13] Rebase tidying --- dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx index 6141e64a78a..316d923d260 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx @@ -18,7 +18,7 @@ import { ArticleTitle } from '../components/ArticleTitle'; import { Border } from '../components/Border'; import { Carousel } from '../components/Carousel.island'; import { DecideLines } from '../components/DecideLines'; -import { DirectoryPageNav } from '../components/DirectoryPageNav'; +import { DirectoryPageNavIsland } from '../components/DirectoryPageNavIsland'; import { DiscussionLayout } from '../components/DiscussionLayout'; import { Footer } from '../components/Footer'; import { GridItem } from '../components/GridItem'; @@ -311,7 +311,7 @@ export const InteractiveLayoutDeprecated = (props: WebProps | AppsProps) => { )}
- From 7e216fc866a4daef58df60f6cecacd45bcff4db6 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Thu, 4 Jun 2026 10:27:06 +0100 Subject: [PATCH 09/13] Remove unused accentColor --- dotcom-rendering/src/components/ArticleBody.tsx | 2 -- dotcom-rendering/src/layouts/InteractiveLayout.tsx | 10 +++++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx index ff128a1afde..12be4083bf3 100644 --- a/dotcom-rendering/src/components/ArticleBody.tsx +++ b/dotcom-rendering/src/components/ArticleBody.tsx @@ -56,7 +56,6 @@ type Props = { shouldHideAds: boolean; serverTime?: number; idApiUrl?: string; - accentColor?: string; isOldInteractive?: boolean; }; @@ -149,7 +148,6 @@ export const ArticleBody = ({ shouldHideAds, serverTime, idApiUrl, - accentColor, isOldInteractive = false, }: Props) => { const isInteractiveContent = diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index adc0eb56a7e..9840a4d86af 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -1,5 +1,6 @@ import { css, type SerializedStyles } from '@emotion/react'; import { + from, palette as sourcePalette, space, until, @@ -218,9 +219,12 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { )}; `, grid.container, - grid.verticalRules({ - centre: true, - }), + grid.outerRules(), + css` + ${from.leftCol} { + ${grid.centreRule(3)} + } + `, ]} > From 95a129e5f0d4519898ee347beb22fc80a8e58bee Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 26 Jun 2026 16:21:00 +0100 Subject: [PATCH 10/13] Make layout content the point of forking --- dotcom-rendering/src/layouts/DecideLayout.tsx | 60 +- .../src/layouts/FullPageInteractiveLayout.tsx | 2 +- .../src/layouts/InteractiveLayout.tsx | 775 ---------------- .../layouts/InteractiveLayoutDeprecated.tsx | 838 ------------------ .../interactives/InteractiveGridV1.tsx | 382 ++++++++ .../interactives/InteractiveGridV2.tsx | 414 +++++++++ .../interactives/InteractiveLayout.tsx | 379 ++++++++ .../src/layouts/lib/articleArrangements.ts | 34 +- .../src/layouts/lib/furnitureArrangements.ts | 108 --- 9 files changed, 1225 insertions(+), 1767 deletions(-) delete mode 100644 dotcom-rendering/src/layouts/InteractiveLayout.tsx delete mode 100644 dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx create mode 100644 dotcom-rendering/src/layouts/interactives/InteractiveGridV1.tsx create mode 100644 dotcom-rendering/src/layouts/interactives/InteractiveGridV2.tsx create mode 100644 dotcom-rendering/src/layouts/interactives/InteractiveLayout.tsx delete mode 100644 dotcom-rendering/src/layouts/lib/furnitureArrangements.ts diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx index 94e98f83b0f..be8cb471cc2 100644 --- a/dotcom-rendering/src/layouts/DecideLayout.tsx +++ b/dotcom-rendering/src/layouts/DecideLayout.tsx @@ -11,8 +11,7 @@ import { HostedArticleLayout } from './HostedArticleLayout'; import { HostedGalleryLayout } from './HostedGalleryLayout'; import { HostedVideoLayout } from './HostedVideoLayout'; import { ImmersiveLayout } from './ImmersiveLayout'; -import { InteractiveLayout } from './InteractiveLayout'; -import { InteractiveLayoutDeprecated } from './InteractiveLayoutDeprecated'; +import { InteractiveLayout } from './interactives/InteractiveLayout'; import { LiveLayout } from './LiveLayout'; import { NewsletterSignupLayout } from './NewsletterSignupLayout'; import { PictureLayout } from './PictureLayout'; @@ -34,8 +33,6 @@ 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 = 
Not supported
; const format = { @@ -45,7 +42,6 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { }; const serverTime = article.serverTime; - const publicationDate = new Date(article.frontendData.webPublicationDate); switch (article.display) { case ArticleDisplay.Immersive: { @@ -119,24 +115,13 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { default: { switch (article.design) { case ArticleDesign.Interactive: - if (publicationDate < interactiveLayoutSwitchoverDate) { - return ( - - ); - } else { - return ( - - ); - } + return ( + + ); case ArticleDesign.FullPageInteractive: { return ( { }; const serverTime = article.serverTime; - const publicationDate = new Date(article.frontendData.webPublicationDate); switch (article.display) { case ArticleDisplay.Immersive: { @@ -313,26 +297,14 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => { default: { switch (article.design) { case ArticleDesign.Interactive: - if (publicationDate < interactiveLayoutSwitchoverDate) { - return ( - - ); - } else { - return ( - - ); - } + return ( + + ); case ArticleDesign.FullPageInteractive: { return ( ( - - {children} - -); - -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 InteractiveLayout = (props: WebProps | AppProps) => { - const { article, format, renderingTarget, serverTime } = props; - const { - config: { isPaidContent, host, hasSurveyAd }, - editionId, - } = article; - - const isWeb = renderingTarget === 'Web'; - const isApps = renderingTarget === 'Apps'; - - const showBodyEndSlot = - isWeb && - (parse(article.slotMachineFlags ?? '').showBodyEnd || - article.config.switches.slotBodyEnd); - - // TODO: - // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render - // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. - - const showComments = article.isCommentable && !isPaidContent; - - const { branding } = article.commercialProperties[article.editionId]; - - const contributionsServiceUrl = getContributionsServiceUrl(article); - - const renderAds = canRenderAds(article); - - return ( - <> - {isApps && ( - <> - - - - - - - - )} - {isWeb && ( -
- {renderAds && ( - -
- -
- - )} - tag.id)} - sectionId={article.config.section} - contentType={article.contentType} - /> -
- )} - - {format.theme === ArticleSpecial.Labs && ( - -
- -
- - )} - - {isWeb && renderAds && hasSurveyAd && ( - - )} - -
- - {/* GridItem order matters — mobile layout relies on DOM order for grid placement. - See furnitureArrangements.ts if reordering. */} -
- - - - - - - - - - - - - -
- {isWeb && - format.theme === ArticleSpecial.Labs && - format.design !== ArticleDesign.Video ? ( - - ) : ( - - )} -
- {isApps ? ( - <> - - - - - - {!!article.affiliateLinksDisclaimer && ( - - )} - - - ) : ( - - )} - - - {/* Only show Listen to Article button on App landscape views */} - {isApps && ( - -
- - - -
- - )} - - - - {isApps && ( - - - - )} - - {showBodyEndSlot && ( - - - - )} -
-
- - -
-
- - - - - - - - - -
- - {isWeb && renderAds && ( -
- -
- )} - - {article.storyPackage && ( -
- - - -
- )} - - - - - {showComments && ( -
- -
- )} - - {!isPaidContent && ( -
- - - - - -
- )} - - {isWeb && renderAds && ( -
- -
- )} -
- {isWeb && ( - <> - {props.NAV.subNavSections && ( -
- - - -
- )} -
-
-
- - - - - - - - )} - - {isApps && ( - <> -
- - - -
- - )} - - ); -}; diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx deleted file mode 100644 index 316d923d260..00000000000 --- a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx +++ /dev/null @@ -1,838 +0,0 @@ -import { css, Global } from '@emotion/react'; -import { - from, - palette as sourcePalette, - 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 { 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 InteractiveLayoutDeprecated = (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 && ( - -
- -
- - )} - - {renderAds && hasSurveyAd && ( - - )} - - )} -
- -
-
- - -
- -
- - -
- -
- - - {format.theme === ArticleSpecial.Labs ? ( - <> - ) : ( - - )} - - -
- -
- - - - - -
-
- -
-
- - -
- {isApps ? ( - <> - - - - - - - - ) : ( - - )} -
- - - - - - - -
-
- -
-
- - - -
-
- -
- -
- -
- -
- - {isWeb && renderAds && ( -
- -
- )} - - {article.storyPackage && ( -
- - - -
- )} - - - - - - {showComments && ( -
- -
- )} - - {!isPaidContent && ( -
- - - - - -
- )} - - {isWeb && renderAds && ( -
- -
- )} -
- - {isWeb && props.NAV.subNavSections && ( -
- - - -
- )} - - {isWeb && ( - <> -
-
-
- - - - - - - - - )} - {isApps && ( -
- - - -
- )} - - ); -}; diff --git a/dotcom-rendering/src/layouts/interactives/InteractiveGridV1.tsx b/dotcom-rendering/src/layouts/interactives/InteractiveGridV1.tsx new file mode 100644 index 00000000000..63b40f26f9f --- /dev/null +++ b/dotcom-rendering/src/layouts/interactives/InteractiveGridV1.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 InteractiveGridV1 = (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 ? ( + <> + + + + + + + + ) : ( + + )} +
+ + + + + + + +
+
+ ); +}; diff --git a/dotcom-rendering/src/layouts/interactives/InteractiveGridV2.tsx b/dotcom-rendering/src/layouts/interactives/InteractiveGridV2.tsx new file mode 100644 index 00000000000..f124864a1fc --- /dev/null +++ b/dotcom-rendering/src/layouts/interactives/InteractiveGridV2.tsx @@ -0,0 +1,414 @@ +import { css, type SerializedStyles } from '@emotion/react'; +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'; +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 { DecideLines } from '../../components/DecideLines'; +import { GuardianLabsLines } from '../../components/GuardianLabsLines'; +import { Island } from '../../components/Island'; +import { ListenToArticle } from '../../components/ListenToArticle.island'; +import { MainMedia } from '../../components/MainMedia'; +import { MostViewedRightWithAd } from '../../components/MostViewedRightWithAd.island'; +import { SlotBodyEnd } from '../../components/SlotBodyEnd.island'; +import { Standfirst } from '../../components/Standfirst'; +import { SubMeta } from '../../components/SubMeta'; +import { grid } from '../../grid'; +import { + ArticleDesign, + type ArticleFormat, + ArticleSpecial, +} from '../../lib/articleFormat'; +import { getContributionsServiceUrl } from '../../lib/contributions'; +import { parse } from '../../lib/slot-machine-flags'; +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 { + type Area, + gridItemCss, + type LayoutType, +} from '../lib/articleArrangements'; + +const stretchLines = css` + ${until.phablet} { + margin-left: -20px; + margin-right: -20px; + } + ${until.mobileLandscape} { + margin-left: -10px; + margin-right: -10px; + } +`; + +interface GridItemProps { + area: Area; + layoutType: LayoutType; + element?: 'div' | 'aside'; + customCss?: SerializedStyles; + children: React.ReactNode; +} + +const GridItem = ({ + area, + layoutType, + element: Element = 'div', + customCss, + children, +}: GridItemProps) => ( + + {children} + +); + +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 InteractiveGridV2 = (props: WebProps | AppProps) => { + const { article, format, renderingTarget } = props; + const { + config: { host }, + } = article; + const isWeb = renderingTarget === 'Web'; + const isApps = renderingTarget === 'Apps'; + const renderAds = isWeb && !article.shouldHideAds; + + const contributionsServiceUrl = getContributionsServiceUrl(article); + + const showBodyEndSlot = + isWeb && + (parse(article.slotMachineFlags ?? '').showBodyEnd || + article.config.switches.slotBodyEnd); + + const { branding } = article.commercialProperties[article.editionId]; + + return ( +
+ + + + + + + + + + + + + +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ {isApps ? ( + <> + + + + + + {!!article.affiliateLinksDisclaimer && ( + + )} + + + ) : ( + + )} + + + {/* Only show Listen to Article button on App landscape views */} + {isApps && ( + +
+ + + +
+ + )} + + + + {isApps && ( + + + + )} + + {showBodyEndSlot && ( + + + + )} +
+
+ + +
+
+ + + + + + + + + +
+ ); +}; diff --git a/dotcom-rendering/src/layouts/interactives/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/interactives/InteractiveLayout.tsx new file mode 100644 index 00000000000..b79ecd2409c --- /dev/null +++ b/dotcom-rendering/src/layouts/interactives/InteractiveLayout.tsx @@ -0,0 +1,379 @@ +import { palette as sourcePalette } from '@guardian/source/foundations'; +import { AdSlot, MobileStickyContainer } from '../../components/AdSlot.web'; +import { AppsFooter } from '../../components/AppsFooter.island'; +import { Carousel } from '../../components/Carousel.island'; +import { DirectoryPageNavIsland } from '../../components/DirectoryPageNavIsland'; +import { DiscussionLayout } from '../../components/DiscussionLayout'; +import { Footer } from '../../components/Footer'; +import { HeaderAdSlot } from '../../components/HeaderAdSlot'; +import { InteractivesDisableArticleSwipe } from '../../components/InteractivesDisableArticleSwipe.island'; +import { InteractivesNativePlatformWrapper } from '../../components/InteractivesNativePlatformWrapper.island'; +import { Island } from '../../components/Island'; +import { LabsHeader } from '../../components/LabsHeader'; +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 { StickyBottomBanner } from '../../components/StickyBottomBanner.island'; +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 { RenderingTarget } from '../../types/renderingTarget'; +import { BannerWrapper, Stuck } from '../lib/stickiness'; +import { InteractiveGridV1 } from './InteractiveGridV1'; +import { InteractiveGridV2 } from './InteractiveGridV2'; + +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 InteractiveLayout = (props: WebProps | AppProps) => { + const { article, format, renderingTarget, serverTime } = props; + const { + config: { isPaidContent, host, hasSurveyAd }, + editionId, + } = article; + + const isWeb = renderingTarget === 'Web'; + const isApps = renderingTarget === 'Apps'; + + // TODO: + // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render + // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. + + const showComments = article.isCommentable && !isPaidContent; + + const contributionsServiceUrl = getContributionsServiceUrl(article); + + const renderAds = canRenderAds(article); + + const interactiveLayoutSwitchoverDate = new Date('2024-06-01T00:00:00Z'); + const publicationDate = new Date(article.webPublicationDate); + const isLegacyInteractive = + publicationDate < interactiveLayoutSwitchoverDate; + + return ( + <> + {isApps && ( + <> + + + + + + + + )} + {isWeb && ( +
+ {renderAds && ( + +
+ +
+ + )} + tag.id)} + sectionId={article.config.section} + contentType={article.contentType} + /> +
+ )} + + {format.theme === ArticleSpecial.Labs && ( + +
+ +
+ + )} + + {isWeb && renderAds && hasSurveyAd && ( + + )} + +
+ + + {isLegacyInteractive ? ( + + ) : ( + + )} + + {isWeb && renderAds && ( +
+ +
+ )} + + {article.storyPackage && ( +
+ + + +
+ )} + + + + + {showComments && ( +
+ +
+ )} + + {!isPaidContent && ( +
+ + + + + +
+ )} + + {isWeb && renderAds && ( +
+ +
+ )} +
+ {isWeb && ( + <> + {props.NAV.subNavSections && ( +
+ + + +
+ )} +
+
+
+ + + + + + + + )} + + {isApps && ( + <> +
+ + + +
+ + )} + + ); +}; diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 2cf5fb6843f..2e4323eb67e 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -2,7 +2,7 @@ import { css, type SerializedStyles } from '@emotion/react'; import { from, until } from '@guardian/source/foundations'; import { grid } from '../../grid'; -export type LayoutType = 'standard' | 'showcase' | 'media'; +export type LayoutType = 'standard' | 'showcase' | 'media' | 'interactive'; export type Area = | 'title' @@ -149,10 +149,42 @@ const mediaCss: LayoutCssMap = { }, }; +const interactiveCss: LayoutCssMap = { + title: { + tablet: 'grid-row: 1;', + leftCol: `grid-row: 1; ${grid.column.left}`, + }, + headline: { + tablet: 'grid-row: 2;', + leftCol: 'grid-row: 1;', + }, + standfirst: { + tablet: 'grid-row: 3;', + leftCol: 'grid-row: 2;', + }, + media: { + tablet: 'grid-row: 4;', + leftCol: 'grid-row: 3;', + }, + meta: { + tablet: 'grid-row: 5;', + leftCol: `grid-row: 3 / span 2; ${grid.column.left};`, + }, + body: { + tablet: `grid-row: 6; ${grid.column.all};`, + leftCol: 'grid-row: 4;', + }, + 'right-column': { + desktop: `grid-row: 1 / span 6; ${grid.column.right};`, + leftCol: `grid-row: 1 / span 4; ${grid.column.right};`, + }, +}; + const layoutCssMaps: Record = { standard: standardCss, showcase: showcaseCss, media: mediaCss, + interactive: interactiveCss, }; /** diff --git a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts deleted file mode 100644 index 229d620e6f7..00000000000 --- a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { css, type SerializedStyles } from '@emotion/react'; -import { from, until } from '@guardian/source/foundations'; -import { grid } from '../../grid'; - -export type LayoutType = 'standard'; - -export type Area = - | 'title' - | 'headline' - | 'standfirst' - | 'media' - | 'meta' - | 'body' - | 'right-column'; - -type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol'; - -const breakpointQueries: Record = { - mobile: until.tablet, - tablet: from.tablet, - desktop: from.desktop, - leftCol: from.leftCol, -}; - -// Raw CSS overrides per area per breakpoint. Entries are only needed when an area -// deviates from the default: centre column, single-column mobile layout with areas -// in DOM order (media → title → headline → standfirst → meta → body → right-column). - -type AreaCss = Partial>; -type LayoutCssMap = Partial>; - -const standardCss: LayoutCssMap = { - title: { - tablet: 'grid-row: 1;', - leftCol: - 'grid-row: 1; grid-column: left-column-start / left-column-end;', - }, - headline: { - tablet: 'grid-row: 2;', - leftCol: 'grid-row: 1;', - }, - standfirst: { - tablet: 'grid-row: 3;', - leftCol: 'grid-row: 2;', - }, - media: { - tablet: 'grid-row: 4;', - leftCol: 'grid-row: 3;', - }, - meta: { - tablet: 'grid-row: 5;', - leftCol: - 'grid-row: 3 / span 2; grid-column: left-column-start / left-column-end;', - }, - body: { - mobile: grid.column.all, - tablet: `grid-row: 6; ${grid.column.all}`, - leftCol: 'grid-row: 4;', - }, - 'right-column': { - desktop: - 'grid-row: 1 / span 6; grid-column: right-column-start / right-column-end;', - leftCol: - 'grid-row: 1 / span 4; grid-column: right-column-start / right-column-end;', - }, -}; - -const layoutCssMaps: Record = { - standard: standardCss, -}; - -/** - * Returns the Emotion CSS needed to position a single grid item — its - * default column, its row at each breakpoint, and any column overrides. - * The grid item _must_ be inside a {@link grid} module container. - * - * All items default to the centre column. Per-breakpoint overrides for - * `grid-row` and `grid-column` are applied on top via media queries, - * looked up from the plain CSS maps defined in this file. - * - * @param area - The named piece of article furniture to position (e.g. `'headline'`, `'body'`). - * @param layoutType - See {@link LayoutType}. Determines which CSS map to use for lookups. - * - * @example - * // In a React component: - *
- */ -export const gridItemCss = ( - area: Area, - layoutType: LayoutType, -): SerializedStyles => { - const areaOverrides = layoutCssMaps[layoutType][area] ?? {}; - - const breakpointCss = Object.entries(areaOverrides).map( - ([bp, styles]) => css` - ${breakpointQueries[bp as Breakpoint]} { - ${styles} - } - `, - ); - - // All items default to the centre column; breakpoint entries above - // override grid-row and grid-column as needed. - return css` - grid-column: centre-column-start / centre-column-end; - ${breakpointCss} - `; -}; From 0f97c6c0a51f0fbb95ba56b91fa705b797862dec Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 1 Jul 2026 16:18:34 +0100 Subject: [PATCH 11/13] Rewire to fork at article content point rather than top level layout --- dotcom-rendering/src/layouts/DecideLayout.tsx | 5 +- .../src/layouts/FullPageInteractiveLayout.tsx | 2 +- .../src/layouts/StandardLayout.tsx | 496 +----------------- ...idV2.tsx => StandardLayoutContentGrid.tsx} | 363 +++++++------ ...x => InteractiveArticleGridDeprecated.tsx} | 4 +- .../interactives/InteractiveLayout.tsx | 379 ------------- 6 files changed, 229 insertions(+), 1020 deletions(-) rename dotcom-rendering/src/layouts/{interactives/InteractiveGridV2.tsx => StandardLayoutContentGrid.tsx} (52%) rename dotcom-rendering/src/layouts/interactives/{InteractiveGridV1.tsx => InteractiveArticleGridDeprecated.tsx} (99%) delete mode 100644 dotcom-rendering/src/layouts/interactives/InteractiveLayout.tsx diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx index be8cb471cc2..0e1b82422c7 100644 --- a/dotcom-rendering/src/layouts/DecideLayout.tsx +++ b/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 './interactives/InteractiveLayout'; import { LiveLayout } from './LiveLayout'; import { NewsletterSignupLayout } from './NewsletterSignupLayout'; import { PictureLayout } from './PictureLayout'; @@ -116,7 +115,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { switch (article.design) { case ArticleDesign.Interactive: return ( - { switch (article.design) { case ArticleDesign.Interactive: return ( - ( - - {children} - -); +import { StandardLayoutContentGrid } from './StandardLayoutContentGrid'; interface Props { article: ArticleDeprecated; @@ -112,12 +46,12 @@ interface Props { serverTime?: number; } -interface WebProps extends Props { +export interface WebProps extends Props { NAV: NavType; renderingTarget: 'Web'; } -interface AppProps extends Props { +export interface AppProps extends Props { renderingTarget: 'Apps'; } @@ -131,11 +65,6 @@ export const StandardLayout = (props: WebProps | AppProps) => { const isWeb = renderingTarget === 'Web'; const isApps = renderingTarget === 'Apps'; - const showBodyEndSlot = - isWeb && - (parse(article.slotMachineFlags ?? '').showBodyEnd || - article.config.switches.slotBodyEnd); - // TODO: // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. @@ -145,25 +74,21 @@ export const StandardLayout = (props: WebProps | AppProps) => { ? article.matchUrl : undefined; - const footballMatchStatsUrl = - article.matchType === 'FootballMatchType' - ? article.matchStatsUrl - : undefined; - const isFootballMatchReport = format.design === ArticleDesign.MatchReport && !!footballMatchUrl; const isMedia = format.design === ArticleDesign.Video || format.design === ArticleDesign.Audio; - - const isVideo = format.design === ArticleDesign.Video; - const isShowcase = format.display === ArticleDisplay.Showcase; + const isInteractive = format.design === ArticleDesign.Interactive; - const showComments = article.isCommentable && !isPaidContent; + const interactiveLayoutSwitchoverDate = new Date('2024-06-01T00:00:00Z'); + const publicationDate = new Date(article.webPublicationDate); + const isLegacyInteractive = + publicationDate < interactiveLayoutSwitchoverDate; - const { branding } = article.commercialProperties[article.editionId]; + const showComments = article.isCommentable && !isPaidContent; const contributionsServiceUrl = getContributionsServiceUrl(article); @@ -177,7 +102,9 @@ export const StandardLayout = (props: WebProps | AppProps) => { ? 'media' : isShowcase ? 'showcase' - : 'standard'; + : isInteractive + ? 'interactive' + : 'standard'; return ( <> @@ -256,362 +183,14 @@ export const StandardLayout = (props: WebProps | AppProps) => { See furnitureArrangements.ts if reordering. */} {/* This element is used to replace the article with the scorecard when the scorecard tab is clicked */}
-
- - - - + ) : ( + - - - - - - - - - -
- {isWeb && - format.theme === ArticleSpecial.Labs && - format.design !== ArticleDesign.Video ? ( - - ) : ( - - )} -
- {isApps ? ( - <> - - - - - - {!!article.affiliateLinksDisclaimer && ( - - )} - - - ) : ( - <> - - {!!article.affiliateLinksDisclaimer && ( - - )} - - )} - - - {/* Only show Listen to Article button on App landscape views */} - {isApps && ( - - {!isVideo && ( -
- - - -
- )} - - )} - - - - - {isApps && ( - - - - )} - - {showBodyEndSlot && ( - - - - )} - - - - - - - - - - - -
+ /> + )}
{isWeb && renderAds && !isLabs && (
{ - if (isMatchReport && !!footballMatchStatsUrl) { - const parsedUrl = safeParseURL(footballMatchStatsUrl); - if (!parsedUrl.ok) { - log( - 'dotcom', - new Error( - `Failed to parse match stats URL: ${footballMatchStatsUrl}`, - ), - ); - - return null; - } - return ( - - - - ); - } - - return null; -}; diff --git a/dotcom-rendering/src/layouts/interactives/InteractiveGridV2.tsx b/dotcom-rendering/src/layouts/StandardLayoutContentGrid.tsx similarity index 52% rename from dotcom-rendering/src/layouts/interactives/InteractiveGridV2.tsx rename to dotcom-rendering/src/layouts/StandardLayoutContentGrid.tsx index f124864a1fc..6051a0097c7 100644 --- a/dotcom-rendering/src/layouts/interactives/InteractiveGridV2.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutContentGrid.tsx @@ -1,41 +1,42 @@ -import { css, type SerializedStyles } from '@emotion/react'; +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'; -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 { DecideLines } from '../../components/DecideLines'; -import { GuardianLabsLines } from '../../components/GuardianLabsLines'; -import { Island } from '../../components/Island'; -import { ListenToArticle } from '../../components/ListenToArticle.island'; -import { MainMedia } from '../../components/MainMedia'; -import { MostViewedRightWithAd } from '../../components/MostViewedRightWithAd.island'; -import { SlotBodyEnd } from '../../components/SlotBodyEnd.island'; -import { Standfirst } from '../../components/Standfirst'; -import { SubMeta } from '../../components/SubMeta'; -import { grid } from '../../grid'; +import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; +import { AppsEpic } from '../components/AppsEpic.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 { DecideLines } from '../components/DecideLines'; +import { FootballMatchInfoWrapper } from '../components/FootballMatchInfoWrapper.island'; +import { GuardianLabsLines } from '../components/GuardianLabsLines'; +import { Island } from '../components/Island'; +import { ListenToArticle } from '../components/ListenToArticle.island'; +import { MainMedia } from '../components/MainMedia'; +import { MostViewedRightWithAd } from '../components/MostViewedRightWithAd.island'; +import { SlotBodyEnd } from '../components/SlotBodyEnd.island'; +import { Standfirst } from '../components/Standfirst'; +import { SubMeta } from '../components/SubMeta'; +import { grid } from '../grid'; import { ArticleDesign, - type ArticleFormat, + ArticleDisplay, ArticleSpecial, -} from '../../lib/articleFormat'; -import { getContributionsServiceUrl } from '../../lib/contributions'; -import { parse } from '../../lib/slot-machine-flags'; -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'; +} from '../lib/articleFormat'; +import { getContributionsServiceUrl } from '../lib/contributions'; +import { safeParseURL } from '../lib/parse'; +import { parse } from '../lib/slot-machine-flags'; +import { palette as themePalette } from '../palette'; import { type Area, gridItemCss, type LayoutType, -} from '../lib/articleArrangements'; +} from './lib/articleArrangements'; +import type { AppProps, WebProps } from './StandardLayout'; const stretchLines = css` ${until.phablet} { @@ -52,7 +53,7 @@ interface GridItemProps { area: Area; layoutType: LayoutType; element?: 'div' | 'aside'; - customCss?: SerializedStyles; + className?: string; children: React.ReactNode; } @@ -60,34 +61,25 @@ const GridItem = ({ area, layoutType, element: Element = 'div', - customCss, + className, children, }: GridItemProps) => ( {children} ); -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 InteractiveGridV2 = (props: WebProps | AppProps) => { +export const StandardLayoutContentGrid = ({ + props, + layoutType, +}: { + props: WebProps | AppProps; + layoutType: LayoutType; +}) => { const { article, format, renderingTarget } = props; const { config: { host }, @@ -105,6 +97,26 @@ export const InteractiveGridV2 = (props: WebProps | AppProps) => { const { branding } = article.commercialProperties[article.editionId]; + const footballMatchStatsUrl = + article.matchType === 'FootballMatchType' + ? article.matchStatsUrl + : undefined; + + const isLabs = format.theme === ArticleSpecial.Labs; + const isMedia = + format.design === ArticleDesign.Video || + format.design === ArticleDesign.Audio; + + const isVideo = format.design === ArticleDesign.Video; + + const footballMatchUrl = + article.matchType === 'FootballMatchType' + ? article.matchUrl + : undefined; + + const isFootballMatchReport = + format.design === ArticleDesign.MatchReport && !!footballMatchUrl; + return (
{ `, grid.container, grid.outerRules(), - css` - ${from.leftCol} { - ${grid.centreRule(3)} - } - `, + !isLabs && + css` + ${from.leftCol} { + ${grid.centreRule(3)} + } + `, ]} > - + { isAdFreeUser={article.isAdFreeUser} isSensitive={article.config.isSensitive} editionId={article.editionId} - hideCaption={false} + hideCaption={isMedia} shouldHideAds={article.shouldHideAds} contentType={article.contentType} - contentLayout="InteractiveLayout" + contentLayout={`${ArticleDisplay[format.display]}Layout`} /> - + - + { starRating={article.starRating} /> - + - +
{isWeb && format.theme === ArticleSpecial.Labs && @@ -221,6 +227,7 @@ export const InteractiveGridV2 = (props: WebProps | AppProps) => { secondaryDateline={ article.webPublicationSecondaryDateDisplay } + webPublicationDate={article.webPublicationDate} isCommentable={article.isCommentable} discussionApiUrl={ article.config.discussionApiUrl @@ -234,41 +241,51 @@ export const InteractiveGridV2 = (props: WebProps | AppProps) => { ) : ( - + <> + + {!!article.affiliateLinksDisclaimer && ( + + )} + )} - + {/* Only show Listen to Article button on App landscape views */} {isApps && ( -
- - - -
+ + + +
+ )} )} @@ -303,6 +320,10 @@ export const InteractiveGridV2 = (props: WebProps | AppProps) => { shouldHideAds={article.shouldHideAds} idApiUrl={article.config.idApiUrl} /> + {isApps && ( { } tags={article.tags} renderAds={renderAds} - isLabs={false} + isLabs={isLabs} articleEndSlot={ !!article.config.switches.articleEndSlot } @@ -340,75 +361,93 @@ export const InteractiveGridV2 = (props: WebProps | AppProps) => { /> )} -
-
+ + + + {layoutType !== 'interactive' && ( + + + - - -
-
- - - - - - - - - + + + + )}
); }; + +const MatchInfoContainer = ({ + isMatchReport, + footballMatchStatsUrl, +}: { + isMatchReport: boolean; + footballMatchStatsUrl: string | undefined; +}) => { + if (isMatchReport && !!footballMatchStatsUrl) { + const parsedUrl = safeParseURL(footballMatchStatsUrl); + if (!parsedUrl.ok) { + log( + 'dotcom', + new Error( + `Failed to parse match stats URL: ${footballMatchStatsUrl}`, + ), + ); + + return null; + } + return ( + + + + ); + } + + return null; +}; diff --git a/dotcom-rendering/src/layouts/interactives/InteractiveGridV1.tsx b/dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx similarity index 99% rename from dotcom-rendering/src/layouts/interactives/InteractiveGridV1.tsx rename to dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx index 63b40f26f9f..3f2635c63d9 100644 --- a/dotcom-rendering/src/layouts/interactives/InteractiveGridV1.tsx +++ b/dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx @@ -171,7 +171,9 @@ export const temporaryBodyCopyColourOverride = css` } `; -export const InteractiveGridV1 = (props: WebProps | AppProps) => { +export const InteractiveArticleGridDeprecated = ( + props: WebProps | AppProps, +) => { const { article, format, renderingTarget } = props; const { config: { host }, diff --git a/dotcom-rendering/src/layouts/interactives/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/interactives/InteractiveLayout.tsx deleted file mode 100644 index b79ecd2409c..00000000000 --- a/dotcom-rendering/src/layouts/interactives/InteractiveLayout.tsx +++ /dev/null @@ -1,379 +0,0 @@ -import { palette as sourcePalette } from '@guardian/source/foundations'; -import { AdSlot, MobileStickyContainer } from '../../components/AdSlot.web'; -import { AppsFooter } from '../../components/AppsFooter.island'; -import { Carousel } from '../../components/Carousel.island'; -import { DirectoryPageNavIsland } from '../../components/DirectoryPageNavIsland'; -import { DiscussionLayout } from '../../components/DiscussionLayout'; -import { Footer } from '../../components/Footer'; -import { HeaderAdSlot } from '../../components/HeaderAdSlot'; -import { InteractivesDisableArticleSwipe } from '../../components/InteractivesDisableArticleSwipe.island'; -import { InteractivesNativePlatformWrapper } from '../../components/InteractivesNativePlatformWrapper.island'; -import { Island } from '../../components/Island'; -import { LabsHeader } from '../../components/LabsHeader'; -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 { StickyBottomBanner } from '../../components/StickyBottomBanner.island'; -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 { RenderingTarget } from '../../types/renderingTarget'; -import { BannerWrapper, Stuck } from '../lib/stickiness'; -import { InteractiveGridV1 } from './InteractiveGridV1'; -import { InteractiveGridV2 } from './InteractiveGridV2'; - -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 InteractiveLayout = (props: WebProps | AppProps) => { - const { article, format, renderingTarget, serverTime } = props; - const { - config: { isPaidContent, host, hasSurveyAd }, - editionId, - } = article; - - const isWeb = renderingTarget === 'Web'; - const isApps = renderingTarget === 'Apps'; - - // TODO: - // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render - // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. - - const showComments = article.isCommentable && !isPaidContent; - - const contributionsServiceUrl = getContributionsServiceUrl(article); - - const renderAds = canRenderAds(article); - - const interactiveLayoutSwitchoverDate = new Date('2024-06-01T00:00:00Z'); - const publicationDate = new Date(article.webPublicationDate); - const isLegacyInteractive = - publicationDate < interactiveLayoutSwitchoverDate; - - return ( - <> - {isApps && ( - <> - - - - - - - - )} - {isWeb && ( -
- {renderAds && ( - -
- -
- - )} - tag.id)} - sectionId={article.config.section} - contentType={article.contentType} - /> -
- )} - - {format.theme === ArticleSpecial.Labs && ( - -
- -
- - )} - - {isWeb && renderAds && hasSurveyAd && ( - - )} - -
- - - {isLegacyInteractive ? ( - - ) : ( - - )} - - {isWeb && renderAds && ( -
- -
- )} - - {article.storyPackage && ( -
- - - -
- )} - - - - - {showComments && ( -
- -
- )} - - {!isPaidContent && ( -
- - - - - -
- )} - - {isWeb && renderAds && ( -
- -
- )} -
- {isWeb && ( - <> - {props.NAV.subNavSections && ( -
- - - -
- )} -
-
-
- - - - - - - - )} - - {isApps && ( - <> -
- - - -
- - )} - - ); -}; From 4978a42d4941f556650bc306eafbf7e65f80ca33 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 1 Jul 2026 16:23:48 +0100 Subject: [PATCH 12/13] Fold interactive grid CSS into standard --- .../src/layouts/lib/articleArrangements.ts | 33 +------------------ 1 file changed, 1 insertion(+), 32 deletions(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 2e4323eb67e..56ae419ee81 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -149,42 +149,11 @@ const mediaCss: LayoutCssMap = { }, }; -const interactiveCss: LayoutCssMap = { - title: { - tablet: 'grid-row: 1;', - leftCol: `grid-row: 1; ${grid.column.left}`, - }, - headline: { - tablet: 'grid-row: 2;', - leftCol: 'grid-row: 1;', - }, - standfirst: { - tablet: 'grid-row: 3;', - leftCol: 'grid-row: 2;', - }, - media: { - tablet: 'grid-row: 4;', - leftCol: 'grid-row: 3;', - }, - meta: { - tablet: 'grid-row: 5;', - leftCol: `grid-row: 3 / span 2; ${grid.column.left};`, - }, - body: { - tablet: `grid-row: 6; ${grid.column.all};`, - leftCol: 'grid-row: 4;', - }, - 'right-column': { - desktop: `grid-row: 1 / span 6; ${grid.column.right};`, - leftCol: `grid-row: 1 / span 4; ${grid.column.right};`, - }, -}; - const layoutCssMaps: Record = { standard: standardCss, showcase: showcaseCss, media: mediaCss, - interactive: interactiveCss, + interactive: standardCss, }; /** From 7da11f7bf8a00142de245170823dd40d51566b65 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 1 Jul 2026 16:25:48 +0100 Subject: [PATCH 13/13] Revert "Fold interactive grid CSS into standard" This reverts commit 4978a42d4941f556650bc306eafbf7e65f80ca33. --- .../src/layouts/lib/articleArrangements.ts | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 56ae419ee81..2e4323eb67e 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -149,11 +149,42 @@ const mediaCss: LayoutCssMap = { }, }; +const interactiveCss: LayoutCssMap = { + title: { + tablet: 'grid-row: 1;', + leftCol: `grid-row: 1; ${grid.column.left}`, + }, + headline: { + tablet: 'grid-row: 2;', + leftCol: 'grid-row: 1;', + }, + standfirst: { + tablet: 'grid-row: 3;', + leftCol: 'grid-row: 2;', + }, + media: { + tablet: 'grid-row: 4;', + leftCol: 'grid-row: 3;', + }, + meta: { + tablet: 'grid-row: 5;', + leftCol: `grid-row: 3 / span 2; ${grid.column.left};`, + }, + body: { + tablet: `grid-row: 6; ${grid.column.all};`, + leftCol: 'grid-row: 4;', + }, + 'right-column': { + desktop: `grid-row: 1 / span 6; ${grid.column.right};`, + leftCol: `grid-row: 1 / span 4; ${grid.column.right};`, + }, +}; + const layoutCssMaps: Record = { standard: standardCss, showcase: showcaseCss, media: mediaCss, - interactive: standardCss, + interactive: interactiveCss, }; /**