Tidying

Author: frederickobrien

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

@@ -18,25 +18,8 @@ export type Area =
 
 type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol';
 
-type RowPlacement = {
-	start: number;
-	span?: number;
-};
-
-type LayoutRows = Partial<
-	Record<Area, Partial<Record<Breakpoint, RowPlacement>>>
->;
-
-type BreakpointRows = Area[][];
-
-type LayoutDefinition = {
-	mobile?: BreakpointRows;
-	tablet?: BreakpointRows;
-	desktop?: BreakpointRows;
-	leftCol?: BreakpointRows;
-};
-
-const tabletVanillaRows: BreakpointRows = [
+// Rows config
+const tabletVanillaRows: Rows = [
 	['title'],
 	['headline'],
 	['standfirst'],
@@ -45,7 +28,7 @@ const tabletVanillaRows: BreakpointRows = [
 	['body'],
 ];
 
-const desktopVanillaRows: BreakpointRows = [
+const desktopVanillaRows: Rows = [
 	['title', 'right-column'],
 	['headline', 'right-column'],
 	['standfirst', 'right-column'],
@@ -54,6 +37,15 @@ const desktopVanillaRows: BreakpointRows = [
 	['body', 'right-column'],
 ];
 
+const mediaRowsUntilDesktop: Rows = [
+	['title'],
+	['headline'],
+	['main-media'],
+	['standfirst'],
+	['meta'],
+	['body'],
+];
+
 const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	standard: {
 		tablet: tabletVanillaRows,
@@ -78,22 +70,8 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	},
 
 	media: {
-		mobile: [
-			['title'],
-			['headline'],
-			['main-media'],
-			['standfirst'],
-			['meta'],
-			['body'],
-		],
-		tablet: [
-			['title'],
-			['headline'],
-			['main-media'],
-			['standfirst'],
-			['meta'],
-			['body'],
-		],
+		mobile: mediaRowsUntilDesktop,
+		tablet: mediaRowsUntilDesktop,
 		desktop: [
 			['title'],
 			['headline'],
@@ -111,12 +89,7 @@ const furnitureRowLayouts: Record<LayoutType, LayoutDefinition> = {
 	},
 };
 
-type BreakpointColumns = Partial<
-	Record<Breakpoint, ColumnPreset | [Line | number, Line | number]>
->;
-
-type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
-
+// Columns config
 const furnitureColumnDefaults: ColumnLayoutMap = {
 	title: { leftCol: 'left' },
 	meta: { leftCol: 'left' },
@@ -140,13 +113,36 @@ const furnitureColumnLayouts: Record<LayoutType, ColumnLayoutMap> = {
 	matchReport: furnitureColumnDefaults,
 };
 
-const buildRowMap = (layout: LayoutDefinition): LayoutRows => {
-	const map: LayoutRows = {};
+// Types
+type RowPlacement = {
+	start: number;
+	span?: number;
+};
+
+type CompiledLayout = Partial<
+	Record<Area, Partial<Record<Breakpoint, RowPlacement>>>
+>;
 
-	const apply = (
-		rows: BreakpointRows | undefined,
-		breakpoint: Breakpoint,
-	) => {
+type Rows = Area[][];
+
+type LayoutDefinition = {
+	mobile?: Rows;
+	tablet?: Rows;
+	desktop?: Rows;
+	leftCol?: Rows;
+};
+
+type BreakpointColumns = Partial<
+	Record<Breakpoint, ColumnPreset | [Line | number, Line | number]>
+>;
+
+type ColumnLayoutMap = Partial<Record<Area, BreakpointColumns>>;
+
+// Guardian Grid CSS generation
+const buildRowMap = (layout: LayoutDefinition): CompiledLayout => {
+	const map: CompiledLayout = {};
+
+	const apply = (rows: Rows | undefined, breakpoint: Breakpoint) => {
 		if (!rows) return;
 
 		const areaRows: Record<string, number[]> = {};
@@ -187,7 +183,7 @@ const rowMaps = Object.fromEntries(
 		name,
 		buildRowMap(layout),
 	]),
-) as Record<LayoutType, LayoutRows>;
+) as Record<LayoutType, CompiledLayout>;
 
 const breakpointQueries = {
 	mobile: until.tablet,
@@ -203,11 +199,13 @@ export const gridCss = (
 	layoutType: LayoutType,
 	columnsOverride?: ColumnConfig,
 ): SerializedStyles => {
+	const defaultColumn = grid.column.centre;
+
 	const rows = rowMaps[layoutType][area] ?? {};
 	const columns = furnitureColumnLayouts[layoutType][area] ?? {};
 
 	return css([
-		grid.column.centre, // default
+		defaultColumn,
 		Object.entries(rows).map(([bp, placement]) => {
 			const rowValue =
 				placement.span != null