Incorporate grid rows into furniture layout config

Author: frederickobrien

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -84,18 +84,6 @@ const stretchLines = css`
 	}
 `;
 
-const rightColumnCss = (isMedia: boolean) => css`
-	display: none;
-	${from.desktop} {
-		display: block;
-		padding-top: 6px;
-		grid-row: ${isMedia ? 3 : 1} / span 999;
-	}
-	${from.leftCol} {
-		grid-row: ${isMedia ? 2 : 1} / span 999;
-	}
-`;
-
 interface GridItemProps {
 	area: Area;
 	layoutType: LayoutType;
@@ -652,28 +640,34 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						area="right-column"
 						layoutType={layoutType}
 						columns={{ desktop: 'right' }}
-						customCss={rightColumnCss(isMedia)}
+						customCss={css`
+							padding-top: 6px;
+						`}
 						element="aside"
 					>
-						<Island
-							priority="feature"
-							defer={{
-								until: 'visible',
-								// Provide a much higher value for the top margin for the intersection observer
-								// This is because the most viewed would otherwise only be lazy loaded when the
-								// bottom of the container intersects with the viewport
-								rootMargin: '700px 100px',
-							}}
-						>
-							<MostViewedRightWithAd
-								format={format}
-								isPaidContent={article.pageType.isPaidContent}
-								renderAds={isWeb && renderAds}
-								shouldHideReaderRevenue={
-									!!article.config.shouldHideReaderRevenue
-								}
-							/>
-						</Island>
+						<Hide until="desktop">
+							<Island
+								priority="feature"
+								defer={{
+									until: 'visible',
+									// Provide a much higher value for the top margin for the intersection observer
+									// This is because the most viewed would otherwise only be lazy loaded when the
+									// bottom of the container intersects with the viewport
+									rootMargin: '700px 100px',
+								}}
+							>
+								<MostViewedRightWithAd
+									format={format}
+									isPaidContent={
+										article.pageType.isPaidContent
+									}
+									renderAds={isWeb && renderAds}
+									shouldHideReaderRevenue={
+										!!article.config.shouldHideReaderRevenue
+									}
+								/>
+							</Island>
+						</Hide>
 					</GridItem>
 				</article>
 

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

@@ -16,11 +16,15 @@ export type Area =
 	// Match report specific area
 	| 'match-summary';
 
+type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol';
+
+type RowPlacement = {
+	start: number;
+	span?: number;
+};
+
 type LayoutRows = Partial<
-	Record<
-		Area,
-		{ mobile?: number; tablet?: number; desktop?: number; leftCol?: number }
-	>
+	Record<Area, Partial<Record<Breakpoint, RowPlacement>>>
 >;
 
 type BreakpointRows = Area[][];
@@ -32,65 +36,82 @@ type LayoutDefinition = {
 	leftCol?: BreakpointRows;
 };
 
+const tabletVanillaRows: BreakpointRows = [
+	['title'],
+	['headline'],
+	['standfirst'],
+	['main-media'],
+	['meta'],
+	['body'],
+];
+
 const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	standard: {
-		tablet: [
-			['title'],
-			['headline'],
-			['standfirst'],
-			['main-media'],
-			['meta'],
+		tablet: tabletVanillaRows,
+		desktop: [
+			['title', 'right-column'],
+			['headline', 'right-column'],
+			['standfirst', 'right-column'],
+			['main-media', 'right-column'],
+			['meta', 'right-column'],
+			['body', 'right-column'],
 		],
-
 		leftCol: [
-			['title', 'headline'],
-			['standfirst'],
-			['meta', 'main-media'],
+			['title', 'headline', 'right-column'],
+			['standfirst', 'right-column'],
+			['meta', 'main-media', 'right-column'],
+			['body', 'right-column'],
 		],
 	},
+
 	matchReport: {
-		tablet: [
-			['match-summary'],
-			['title'],
-			['headline'],
-			['standfirst'],
-			['main-media'],
-			['meta'],
-		],
+		tablet: [['match-summary'], ...tabletVanillaRows],
 		leftCol: [
 			['title', 'match-summary'],
 			['headline'],
 			['meta', 'main-media'],
+			['body', 'right-column'],
 		],
 	},
+
 	media: {
 		mobile: [
 			['title'],
 			['headline'],
 			['main-media'],
 			['standfirst'],
 			['meta'],
+			['body'],
 		],
 		tablet: [
 			['title'],
 			['headline'],
 			['main-media'],
 			['standfirst'],
 			['meta'],
+			['body'],
+		],
+		desktop: [
+			['title'],
+			['headline'],
+			['main-media', 'right-column'],
+			['standfirst', 'right-column'],
+			['meta', 'right-column'],
+			['body', 'right-column'],
 		],
 		leftCol: [
 			['title', 'headline'],
-			['meta', 'main-media'],
-			['standfirst'],
+			['meta', 'main-media', 'right-column'],
+			['meta', 'standfirst', 'right-column'],
+			['body', 'right-column'],
 		],
 	},
 };
 
+type Column = 'left' | 'centre' | 'right';
+
 type BreakpointColumns = Partial<
-	Record<
-		'mobile' | 'tablet' | 'desktop' | 'leftCol',
-		Column | [Line | number, Line | number]
-	>
+	Record<Breakpoint, Column | [Line | number, Line | number]>
 >;
 
 type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
@@ -112,22 +133,37 @@ const furnitureColumnLayouts: Record<LayoutType, ColumnLayoutMap> = {
 };
 
 const buildRowMap = (layout: LayoutDefinition): LayoutRows => {
-	const map: LayoutRows = {} as LayoutRows;
+	const map: LayoutRows = {};
 
 	const apply = (
-		rows: Area[][] | undefined,
-		breakpoint: 'mobile' | 'tablet' | 'desktop' | 'leftCol',
+		rows: BreakpointRows | undefined,
+		breakpoint: Breakpoint,
 	) => {
 		if (!rows) return;
 
+		const areaRows: Record<string, number[]> = {};
+
 		for (const [index, areas] of rows.entries()) {
 			const row = index + 1;
 
 			for (const area of areas) {
-				map[area] ??= {};
-				map[area][breakpoint] = row;
+				areaRows[area] ??= [];
+				areaRows[area].push(row);
 			}
 		}
+
+		for (const [area, rowList] of Object.entries(areaRows) as [
+			Area,
+			number[],
+		][]) {
+			const start = rowList[0];
+			const span = rowList.length > 1 ? rowList.length : undefined;
+
+			if (start == null) continue;
+
+			map[area] ??= {};
+			map[area][breakpoint] = { start, span };
+		}
 	};
 
 	apply(layout.mobile, 'mobile');
@@ -152,8 +188,6 @@ const breakpointQueries = {
 	desktop: from.desktop,
 } as const;
 
-type Column = 'left' | 'centre' | 'right';
-
 type ColumnConfig = Partial<Record<'tablet' | 'desktop' | 'leftCol', Column>>;
 
 export const gridCss = (
@@ -166,13 +200,18 @@ export const gridCss = (
 
 	return css([
 		grid.column.centre, // default
-		Object.entries(rows).map(
-			([bp, row]) => css`
-				${breakpointQueries[bp as keyof typeof breakpointQueries]} {
-					grid-row: ${row};
+		Object.entries(rows).map(([bp, placement]) => {
+			const rowValue =
+				placement.span != null
+					? `${placement.start} / span ${placement.span}`
+					: placement.start;
+
+			return css`
+				${breakpointQueries[bp as Breakpoint]} {
+					grid-row: ${rowValue};
 				}
-			`,
-		),
+			`;
+		}),
 		Object.entries(columns).map(([bp, colOrSpan]) => {
 			const colStyle = Array.isArray(colOrSpan)
 				? grid.between(colOrSpan[0], colOrSpan[1])