Merge pull request #15123 from guardian/full-width-atoms

Author: frederickobrien

dotcom-rendering/index.d.ts

@@ -94,6 +94,7 @@ declare namespace JSX {
 		'data-spacefinder-role'?:
 			| 'nested'
 			| 'immersive'
+			| 'fullWidth'
 			| 'inline'
 			| 'richLink'
 			| 'thumbnail';

dotcom-rendering/src/components/Figure.tsx

@@ -1,13 +1,13 @@
 import { css } from '@emotion/react';
-import { from, space, until } from '@guardian/source/foundations';
+import { breakpoints, from, space, until } from '@guardian/source/foundations';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import type { FEElement, RoleType } from '../types/content';
 
 type Props = {
 	children: React.ReactNode;
 	format: ArticleFormat;
 	isMainMedia: boolean;
-	role?: RoleType | 'richLink';
+	role?: RoleType | 'richLink' | 'fullWidth';
 	id?: string;
 	className?: string;
 	type?: FEElement['_type'];
@@ -70,6 +70,53 @@ const roleCss = {
 		}
 	`,
 
+	fullWidth: css`
+		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;
+		}
+	`,
+
 	showcase: css`
 		margin-top: ${space[3]}px;
 		margin-bottom: ${space[3]}px;
@@ -150,7 +197,7 @@ const roleCss = {
 
 // Used for vast majority of layouts.
 export const defaultRoleStyles = (
-	role: RoleType | 'richLink',
+	role: RoleType | 'richLink' | 'fullWidth',
 	format: ArticleFormat,
 	isTimeline = false,
 ) => {
@@ -161,6 +208,8 @@ export const defaultRoleStyles = (
 			return roleCss.supporting;
 		case 'immersive':
 			return roleCss.immersive;
+		case 'fullWidth':
+			return roleCss.fullWidth;
 		case 'showcase':
 			if (isTimeline) {
 				return css`

dotcom-rendering/src/components/InteractivesScrollbarWidth.importable.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+
+export const InteractivesScrollbarWidth = () => {
+	useEffect(() => {
+		const updateScrollbarWidth = () => {
+			const documentWidth = document.documentElement.clientWidth;
+			if (documentWidth <= 0) return;
+
+			const scrollbarWidth = window.innerWidth - documentWidth;
+			const root = document.documentElement;
+
+			root.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+			root.style.setProperty(
+				'--half-scrollbar-width',
+				`${scrollbarWidth / 2}px`,
+			);
+		};
+
+		let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+		const debouncedResize = () => {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+			}
+
+			timeoutId = setTimeout(() => {
+				updateScrollbarWidth();
+			}, 150);
+		};
+
+		updateScrollbarWidth();
+
+		window.addEventListener('resize', debouncedResize);
+
+		return () => {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+			}
+			window.removeEventListener('resize', debouncedResize);
+		};
+	}, []);
+
+	return null;
+};

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -2449,7 +2449,16 @@
                     "type": "string"
                 },
                 "role": {
-                    "$ref": "#/definitions/RoleType"
+                    "enum": [
+                        "fullWidth",
+                        "halfWidth",
+                        "immersive",
+                        "inline",
+                        "showcase",
+                        "supporting",
+                        "thumbnail"
+                    ],
+                    "type": "string"
                 }
             },
             "required": [

dotcom-rendering/src/layouts/InteractiveLayout.tsx

@@ -25,6 +25,7 @@ import { GridItem } from '../components/GridItem';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.importable';
 import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.importable';
+import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.importable';
 import { Island } from '../components/Island';
 import { LabsHeader } from '../components/LabsHeader';
 import { MainMedia } from '../components/MainMedia';
@@ -45,6 +46,7 @@ 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,
@@ -220,8 +222,23 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 
 	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 && (
+				<Island priority="critical">
+					<InteractivesScrollbarWidth />
+				</Island>
+			)}
 			{isApps && (
 				<>
 					<Island priority="critical">

dotcom-rendering/src/layouts/lib/interactiveLegacyStyling.ts

@@ -9,7 +9,7 @@ export const isInteractive = (design: ArticleDesign): boolean =>
 
 export const interactiveLegacyFigureClasses = (
 	elementType: string,
-	role?: RoleType,
+	role?: RoleType | 'fullWidth',
 ): string => {
 	const elementClasses: { [key: string]: string } = {
 		'model.dotcomrendering.pageElements.InteractiveAtomBlockElement':

dotcom-rendering/src/lib/renderElement.tsx

@@ -1065,7 +1065,11 @@ export const RenderArticleElement = ({
 	});
 
 	const needsFigure = !bareElements.has(element._type);
-	const role = 'role' in element ? (element.role as RoleType) : undefined;
+
+	const role =
+		'role' in element
+			? (element.role as RoleType | 'fullWidth' | undefined)
+			: undefined;
 
 	return needsFigure ? (
 		<Figure

dotcom-rendering/src/model/block-schema.json

@@ -1937,7 +1937,16 @@
                     "type": "string"
                 },
                 "role": {
-                    "$ref": "#/definitions/RoleType"
+                    "enum": [
+                        "fullWidth",
+                        "halfWidth",
+                        "immersive",
+                        "inline",
+                        "showcase",
+                        "supporting",
+                        "thumbnail"
+                    ],
+                    "type": "string"
                 }
             },
             "required": [

dotcom-rendering/src/model/enhance-interactive-atom.ts

@@ -0,0 +1,19 @@
+import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
+import type { FEElement } from '../types/content';
+
+export const enhanceInteractiveAtomElements =
+	(format: ArticleFormat) =>
+	(elements: FEElement[]): FEElement[] => {
+		const isInteractiveFormat =
+			format.design === ArticleDesign.Interactive ||
+			format.design === ArticleDesign.FullPageInteractive;
+
+		const enhancedAtomElements = elements.filter((element) => {
+			const isFullWidthInteractiveAtom =
+				element._type ===
+					'model.dotcomrendering.pageElements.InteractiveAtomBlockElement' &&
+				element.role === 'fullWidth';
+			return !(isFullWidthInteractiveAtom && !isInteractiveFormat);
+		});
+		return enhancedAtomElements;
+	};

dotcom-rendering/src/model/enhanceBlocks.ts

@@ -18,6 +18,7 @@ import { enhanceDots } from './enhance-dots';
 import { enhanceEmbeds } from './enhance-embeds';
 import { enhanceH2s } from './enhance-H2s';
 import { enhanceElementsImages, enhanceImages } from './enhance-images';
+import { enhanceInteractiveAtomElements } from './enhance-interactive-atom';
 import { enhanceInteractiveContentsElements } from './enhance-interactive-contents-elements';
 import { enhanceNumberedLists } from './enhance-numbered-lists';
 import { enhanceProductSummary } from './enhance-product-summary';
@@ -80,6 +81,7 @@ export const enhanceElements =
 			),
 			enhanceDividers,
 			enhanceH2s,
+			enhanceInteractiveAtomElements(format),
 			enhanceInteractiveContentsElements,
 			enhanceBlockquotes(format),
 			enhanceDots,