Interactive top hat grid layouts

dotcom-rendering/src/components/InteractiveLayoutAtom.stories.tsx

@@ -21,7 +21,7 @@ export const InteractiveLayoutAtom = meta.story({
 			design: 0,
 			theme: 0,
 		},
-		articleArrangement: 'interactive',
+		articleArrangement: 'interactiveStandard',
 	},
 	decorators: (StoryComponent) => (
 		<div

dotcom-rendering/src/components/InteractiveLayoutAtom.test.tsx

@@ -16,7 +16,7 @@ describe('InteractiveLayoutAtom', () => {
 					design: 0,
 					theme: 0,
 				}}
-				articleArrangement="interactive"
+				articleArrangement="interactiveStandard"
 			/>,
 		);
 

dotcom-rendering/src/components/SeriesSectionLink.tsx

@@ -470,13 +470,22 @@ export const SeriesSectionLink = ({
 						marginRight,
 						fontStyles(format),
 						breakWord,
-						css`
-							box-shadow:
-								-6px 0 0 0
-									${themePalette('--series-title-background')},
-								6px 0 0 0
-									${themePalette('--series-title-background')};
-						`,
+						layoutType !== 'interactiveTopHatFull' &&
+							css`
+								box-shadow:
+									-6px 0 0 0
+										${themePalette(
+											'--series-title-background',
+										)},
+									6px 0 0 0
+										${themePalette(
+											'--series-title-background',
+										)};
+							`,
+						layoutType === 'interactiveTopHatFull' &&
+							css`
+								padding: 0 4px;
+							`,
 					]}
 					data-component="series"
 					data-link-name="article series"

dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx

@@ -1,6 +1,11 @@
 import { css } from '@emotion/react';
 import { log } from '@guardian/libs';
-import { from, space, until } from '@guardian/source/foundations';
+import {
+	from,
+	headlineMedium17,
+	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/AffiliateProducts/AffiliateDisclaimer';
@@ -161,6 +166,39 @@ const GridItem = ({
 	</Element>
 );
 
+const TopHatScrollPrompt = ({ topGap }: { topGap: number }) => (
+	<div
+		css={css`
+			position: absolute;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			top: ${topGap}px;
+			${headlineMedium17}
+			color: white;
+			gap: ${space[3]}px;
+		`}
+	>
+		<svg
+			width="40"
+			height="40"
+			viewBox="0 0 40 40"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M9 15.2283L19.4977 25.726H20.5023L31 15.2283L30.0205 14.2739L20 22.7123L9.97945 14.2739L9 15.2283Z"
+				fill="white"
+			/>
+			<path
+				d="M39.5 20C39.5 30.7696 30.7696 39.5 20 39.5C9.23045 39.5 0.5 30.7696 0.5 20C0.5 9.23045 9.23045 0.5 20 0.5C30.7696 0.5 39.5 9.23045 39.5 20Z"
+				stroke="white"
+			/>
+		</svg>
+		<div>Scroll to continue</div>
+	</div>
+);
+
 export const StandardLayoutArticleGrid = ({
 	article,
 	format,
@@ -229,11 +267,38 @@ export const StandardLayoutArticleGrid = ({
 
 	const layoutType = getLayoutType(format, mainMediaOrientation);
 
+	const setCentreRule = (gridLayout: LayoutType) => {
+		if (isLabs || gridLayout === 'interactiveStandard') return undefined;
+
+		const getColumnCount = () => {
+			switch (gridLayout) {
+				case 'immersivePortrait':
+				case 'immersiveLandscape':
+					return 4;
+				case 'interactiveTopHatFull':
+					return 6;
+				case 'interactiveTopHatLite':
+					return 5;
+				default:
+					return 3;
+			}
+		};
+
+		return css`
+			${from.leftCol} {
+				${grid.centreRule(getColumnCount())}
+			}
+		`;
+	};
+
 	const contentLayoutName = `${ArticleDisplay[format.display]}Layout`;
 
 	const isImmersivePortrait = layoutType === 'immersivePortrait';
 	const isImmersiveLandscape = layoutType === 'immersiveLandscape';
 	const isImmersive = isImmersivePortrait || isImmersiveLandscape;
+	const isInteractiveTopHat =
+		layoutType === 'interactiveTopHatLite' ||
+		layoutType === 'interactiveTopHatFull';
 
 	const hasMinimumImageHeight =
 		isLabs && isImmersivePortrait && isMainMediaImage;
@@ -259,7 +324,10 @@ export const StandardLayoutArticleGrid = ({
 		}
 	`;
 	const hideCaptionBeneathMainMedia =
-		layoutType === 'media' || isImmersiveLandscape || isImmersivePortrait;
+		layoutType === 'media' ||
+		isInteractiveTopHat ||
+		isImmersiveLandscape ||
+		isImmersivePortrait;
 
 	return (
 		<article
@@ -271,7 +339,8 @@ export const StandardLayoutArticleGrid = ({
 						: themePalette('--article-background')};
 				`,
 				grid.container,
-				grid.outerRules(),
+				!isInteractiveTopHat && grid.outerRules(),
+				setCentreRule(layoutType),
 				isLabs &&
 					isImmersive &&
 					css`
@@ -288,13 +357,6 @@ export const StandardLayoutArticleGrid = ({
 								auto
 							);
 					`,
-				!isLabs &&
-					layoutType !== 'interactive' &&
-					css`
-						${from.leftCol} {
-							${grid.centreRule(isImmersive ? 4 : 3)}
-						}
-					`,
 				isImmersivePortrait &&
 					css`
 						${from.desktop} {
@@ -315,6 +377,10 @@ export const StandardLayoutArticleGrid = ({
 									: '90px'} auto auto auto auto auto;
 						}
 					`,
+				isInteractiveTopHat &&
+					css`
+						grid-template-rows: 3fr auto auto auto auto 1fr;
+					`,
 			]}
 		>
 			<GridItem
@@ -367,6 +433,13 @@ export const StandardLayoutArticleGrid = ({
 								margin-top: ${space[2]}px;
 							`
 						: undefined,
+					isInteractiveTopHat &&
+						css`
+							${until.desktop} {
+								height: 70vh;
+								aspect-ratio: 4 /5;
+							}
+						`,
 				]}
 			>
 				<div>
@@ -535,6 +608,9 @@ export const StandardLayoutArticleGrid = ({
 				area="standfirst"
 				layoutType={layoutType}
 				css={[
+					css`
+						position: relative;
+					`,
 					isImmersive &&
 						css`
 							${until.tablet} {
@@ -558,6 +634,9 @@ export const StandardLayoutArticleGrid = ({
 					standfirst={article.standfirst}
 					layoutType={layoutType}
 				/>
+				{layoutType === 'interactiveTopHatLite' && (
+					<TopHatScrollPrompt topGap={100} />
+				)}
 			</GridItem>
 			{isImmersive && (
 				<GridItem
@@ -595,6 +674,9 @@ export const StandardLayoutArticleGrid = ({
 				layoutType={layoutType}
 				element="aside"
 				css={[
+					css`
+						position: relative;
+					`,
 					isImmersive &&
 						branding != null &&
 						captionText != null &&
@@ -616,15 +698,16 @@ export const StandardLayoutArticleGrid = ({
 								padding-top: ${space[8]}px;
 							}
 						`,
-					layoutType === 'interactive' &&
+					layoutType === 'interactiveStandard' &&
 						css`
 							z-index: ${getZIndex('meta')};
 						`,
 				]}
 			>
 				{format.display !== ArticleDisplay.Immersive &&
 					format.design !== ArticleDesign.Audio &&
-					layoutType !== 'immersivePortrait' && (
+					layoutType !== 'immersivePortrait' &&
+					!isInteractiveTopHat && (
 						<div
 							css={[
 								(layoutType === 'picture' ||
@@ -725,6 +808,9 @@ export const StandardLayoutArticleGrid = ({
 						/>
 					</>
 				)}
+				{layoutType === 'interactiveTopHatFull' && (
+					<TopHatScrollPrompt topGap={180} />
+				)}
 			</GridItem>
 			<GridItem
 				area="body"
@@ -884,7 +970,7 @@ export const StandardLayoutArticleGrid = ({
 					</Hide>
 				)}
 			</GridItem>
-			{layoutType === 'interactive' && (
+			{layoutType === 'interactiveStandard' && (
 				<div
 					aria-hidden="true"
 					data-gu-name="centre-rule"

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

@@ -13,7 +13,9 @@ export type LayoutType =
 	| 'media'
 	| 'picture'
 	| 'comment'
-	| 'interactive'
+	| 'interactiveStandard'
+	| 'interactiveTopHatLite'
+	| 'interactiveTopHatFull'
 	| 'immersiveLandscape'
 	| 'immersivePortrait';
 
@@ -330,13 +332,75 @@ const immersiveLandscapeCss: LayoutCssMap = {
 	},
 };
 
+const interactiveTopHatLiteCss: LayoutCssMap = {
+	title: {
+		mobile: 'grid-row: 2; z-index: 10;',
+		tablet: 'grid-row: 2; z-index: 10;',
+	},
+	headline: {
+		mobile: 'grid-row: 3; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px;',
+		tablet: 'grid-row: 3; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px;',
+	},
+	standfirst: {
+		mobile: 'grid-row: 4; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px;',
+		tablet: 'grid-row: 4; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px;',
+	},
+	media: {
+		mobile: 'grid-row: 1 / span 6;',
+		tablet: `grid-row: 1 / span 6; ${grid.column.all}`,
+	},
+	meta: {
+		mobile: 'grid-row: 7;',
+		tablet: 'grid-row: 7;',
+	},
+	body: {
+		mobile: 'grid-row: 8;',
+		tablet: 'grid-row: 8;',
+	},
+	'right-column': {
+		mobile: 'grid-row: 7 / span 2;',
+		desktop: `grid-row: 7 / span 2; ${grid.column.right};`,
+	},
+};
+
+const interactiveTopHatFullCss: LayoutCssMap = {
+	title: {
+		mobile: 'grid-row: 2; z-index: 10;',
+		tablet: 'grid-row: 2; z-index: 10;',
+	},
+	headline: {
+		mobile: 'grid-row: 3; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px;',
+		tablet: 'grid-row: 3; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px;',
+	},
+	standfirst: {
+		mobile: 'grid-row: 4; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px;',
+		tablet: 'grid-row: 4; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px;',
+	},
+	media: {
+		mobile: 'grid-row: 1 / span 7;',
+		tablet: `grid-row: 1 / span 7; ${grid.column.all}`,
+	},
+	meta: {
+		mobile: 'grid-row: 5; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px 10px 10px;',
+		tablet: 'grid-row: 5; z-index: 10; background: rgba(255, 255, 255, 0.9); padding: 0 10px 10px 10px;',
+	},
+	body: {
+		tablet: 'grid-row: 8;',
+	},
+	'right-column': {
+		desktop: `grid-row: 8; ${grid.column.right};`,
+	},
+};
+
 const layoutCssMaps: Record<LayoutType, LayoutCssMap> = {
 	standard: standardCss,
 	showcase: showcaseCss,
 	media: mediaCss,
 	picture: pictureCss,
 	comment: commentCss,
-	interactive: standardCss,
+	interactiveStandard: standardCss,
+	interactiveTopHatLite: interactiveTopHatLiteCss,
+	interactiveTopHatFull: interactiveTopHatFullCss,
 	immersiveLandscape: immersiveLandscapeCss,
 	immersivePortrait: immersivePortraitCss,
 };
@@ -389,6 +453,8 @@ export const getLayoutType = (
 	format: ArticleFormat,
 	mainMediaOrientation: 'portrait' | 'landscape' | 'square',
 ): LayoutType => {
+	// return 'interactiveTopHatLite';
+	// return 'interactiveTopHatFull';
 	if (format.display === ArticleDisplay.Immersive) {
 		if (
 			mainMediaOrientation === 'portrait' ||
@@ -414,6 +480,8 @@ export const getLayoutType = (
 	) {
 		return 'comment';
 	}
-	if (format.design === ArticleDesign.Interactive) return 'interactive';
+	if (format.design === ArticleDesign.Interactive) {
+		return 'interactiveStandard';
+	}
 	return 'standard';
 };

dotcom-rendering/src/lib/interactiveAtoms.test.tsx

@@ -64,7 +64,7 @@ describe('Interactive atom custom data attributes', () => {
 					design: 0,
 					theme: 0,
 				}}
-				articleArrangement="interactive"
+				articleArrangement="interactiveStandard"
 			/>,
 		);
 		const el = container.querySelector(