add atom to football matches list

marjisound · marjisound · commit ec5bb26c672d · 2025-07-01T10:12:52.000+01:00
diff --git a/dotcom-rendering/src/components/FootballMatchesPage.tsx b/dotcom-rendering/src/components/FootballMatchesPage.tsx
@@ -6,6 +6,7 @@ import {
 	until,
 } from '@guardian/source/foundations';
 import type { FootballMatches } from '../footballMatches';
+import type { FootballNavAtom as FootballNavAtomModel } from '../footballNavAtom';
 import { grid } from '../grid';
 import type { EditionId } from '../lib/edition';
 import type { Result } from '../lib/result';
@@ -14,6 +15,7 @@ import type { FootballMatchListPageKind, Region } from '../sportDataPage';
 import { AdSlot } from './AdSlot.web';
 import { FootballCompetitionSelect } from './FootballCompetitionSelect';
 import { FootballMatchList } from './FootballMatchList';
+import { FootballNavAtom } from './FootballNavAtom';
 
 type Props = {
 	regions: Region[];
@@ -27,6 +29,7 @@ type Props = {
 	renderAds: boolean;
 	pageId: string;
 	now: string;
+	navAtom?: FootballNavAtomModel;
 };
 
 const createTitle = (kind: FootballMatchListPageKind, edition: EditionId) => {
@@ -56,6 +59,7 @@ export const FootballMatchesPage = ({
 	getMoreDays,
 	renderAds,
 	pageId,
+	navAtom,
 }: Props) => (
 	<main
 		id="maincontent"
@@ -81,12 +85,13 @@ export const FootballMatchesPage = ({
 			padding-bottom: ${space[9]}px;
 		`}
 	>
+		<FootballNavAtom navAtom={navAtom} />
 		<h1
 			css={css`
 				${headlineBold20}
 				padding: ${space[2]}px 0 ${space[3]}px;
 				${grid.column.centre}
-				grid-row: 1;
+				grid-row: ${navAtom !== undefined ? 2 : 1};
 				${from.leftCol} {
 					${grid.between('left-column-start', 'centre-column-end')}
 				}
@@ -100,7 +105,7 @@ export const FootballMatchesPage = ({
 				margin-top: ${space[3]}px;
 				margin-bottom: ${space[6]}px;
 				${grid.column.centre}
-				grid-row: 2;
+				grid-row: ${navAtom !== undefined ? 3 : 2};
 			`}
 		>
 			<FootballCompetitionSelect
@@ -114,7 +119,7 @@ export const FootballMatchesPage = ({
 		<div
 			css={css`
 				${grid.column.centre}
-				grid-row: 3;
+				grid-row: ${navAtom !== undefined ? 4 : 3};
 				${from.leftCol} {
 					${grid.between('left-column-start', 'centre-column-end')}
 				}
@@ -137,6 +142,7 @@ export const FootballMatchesPage = ({
 					${grid.column.right}
 					/** This allows the ad to grow beyond the third row content (up to line 5) */
 					grid-row: 1 / 5;
+					grid-row: ${navAtom !== undefined ? '2 / 6' : '1 / 5'};
 					${until.desktop} {
 						display: none;
 					}
diff --git a/dotcom-rendering/src/components/FootballMatchesPageWrapper.importable.tsx b/dotcom-rendering/src/components/FootballMatchesPageWrapper.importable.tsx
@@ -6,6 +6,7 @@ import {
 	getParserErrorMessage,
 	parse,
 } from '../footballMatches';
+import type { FootballNavAtom as FootballNavAtomModel } from '../footballNavAtom';
 import type { FEFootballMatchListPage } from '../frontend/feFootballMatchListPage';
 import type { EditionId } from '../lib/edition';
 import type { Result } from '../lib/result';
@@ -72,6 +73,7 @@ type Props = {
 	edition: EditionId;
 	renderAds: boolean;
 	pageId: string;
+	navAtom?: FootballNavAtomModel;
 };
 
 export const FootballMatchesPageWrapper = ({
@@ -86,6 +88,7 @@ export const FootballMatchesPageWrapper = ({
 	edition,
 	renderAds,
 	pageId,
+	navAtom,
 }: Props) => {
 	const [nextPage, setNextPage] = useState(secondPage);
 
@@ -108,6 +111,7 @@ export const FootballMatchesPageWrapper = ({
 			}
 			renderAds={renderAds}
 			pageId={pageId}
+			navAtom={navAtom}
 		/>
 	);
 };
diff --git a/dotcom-rendering/src/layouts/SportDataPageLayout.tsx b/dotcom-rendering/src/layouts/SportDataPageLayout.tsx
@@ -45,6 +45,7 @@ const SportsPage = ({
 						edition={sportData.editionId}
 						renderAds={renderAds}
 						pageId={sportData.config.pageId}
+						navAtom={sportData.navAtom}
 					/>
 				</Island>
 			);
@@ -57,6 +58,7 @@ const SportsPage = ({
 					tableCompetitions={sportData.tables}
 					renderAds={renderAds}
 					guardianBaseUrl={sportData.guardianBaseURL}
+					navAtom={sportData.navAtom}
 				/>
 			);
 		case 'CricketMatch':
diff --git a/dotcom-rendering/src/lib/unifyPageContent.tsx b/dotcom-rendering/src/lib/unifyPageContent.tsx
@@ -13,7 +13,7 @@ export const unifyPageContent = ({
 	renderingTarget: RenderingTarget;
 }): string =>
 	renderToString(
-		<html lang="en">
+		<html lang="en" style={{ overflow: 'hidden' }}>
 			<head>
 				<meta charSet="utf-8" />
 				<meta
