Football nav atom for euros

A draft change to see if we can render a navigation atom for the euros.

Author: JamieB-gu

dotcom-rendering/src/components/FootballNavAtom.tsx

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+import type { FootballNavAtom as FootballNavAtomModel } from '../footballNavAtom';
+import { grid } from '../grid';
+import { unifyPageContent } from '../lib/unifyPageContent';
+
+export const FootballNavAtom = ({
+	navAtom,
+}: {
+	navAtom: FootballNavAtomModel | undefined;
+}) =>
+	navAtom !== undefined ? (
+		<iframe
+			title="Navigation for the current football competition"
+			css={{
+				width: '100%',
+				['&']: css(grid.column.all),
+				gridRow: 1,
+			}}
+			srcDoc={unifyPageContent({
+				elementCss: navAtom.css,
+				elementJs: navAtom.mainJS,
+				elementHtml: navAtom.html,
+				renderingTarget: 'Web',
+			})}
+			sandbox="allow-scripts"
+		/>
+	) : null;

dotcom-rendering/src/components/FootballTablesPage.tsx

@@ -5,11 +5,13 @@ import {
 	space,
 	until,
 } from '@guardian/source/foundations';
+import type { FootballNavAtom as FootballNavAtomModel } from '../footballNavAtom';
 import type { FootballTableCompetition } from '../footballTables';
 import { grid } from '../grid';
 import { palette } from '../palette';
 import type { Region } from '../sportDataPage';
 import { AdSlot } from './AdSlot.web';
+import { FootballNavAtom } from './FootballNavAtom';
 import { FootballTableList } from './FootballTableList';
 import { FootballTablesCompetitionSelect } from './FootballTablesCompetitionSelect.importable';
 import { Island } from './Island';
@@ -20,6 +22,7 @@ type Props = {
 	tableCompetitions: FootballTableCompetition[];
 	renderAds: boolean;
 	guardianBaseUrl: string;
+	navAtom?: FootballNavAtomModel;
 };
 
 export const FootballTablesPage = ({
@@ -28,6 +31,7 @@ export const FootballTablesPage = ({
 	tableCompetitions: competitions,
 	renderAds,
 	guardianBaseUrl,
+	navAtom,
 }: Props) => (
 	<main
 		id="maincontent"
@@ -53,12 +57,13 @@ export const FootballTablesPage = ({
 			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')}
 				}
@@ -71,7 +76,7 @@ export const FootballTablesPage = ({
 				margin-top: ${space[3]}px;
 				margin-bottom: ${space[6]}px;
 				${grid.column.centre}
-				grid-row: 2;
+				grid-row: ${navAtom !== undefined ? 3 : 2};
 			`}
 		>
 			<Island priority="feature" defer={{ until: 'visible' }}>
@@ -85,7 +90,7 @@ export const FootballTablesPage = ({
 		<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')}
 				}
@@ -102,7 +107,7 @@ export const FootballTablesPage = ({
 				css={css`
 					${grid.column.right}
 					/** This allows the ad to grow beyond the third row content (up to line 5) */
-					grid-row: 1 / 4;
+					grid-row: ${navAtom !== undefined ? '2 / 5' : '1 / 4'};
 					${until.desktop} {
 						display: none;
 					}

dotcom-rendering/src/footballNavAtom.ts

@@ -0,0 +1,3 @@
+import type { FEFootballNavAtom } from './frontend/feFootballNavAtom';
+
+export type FootballNavAtom = FEFootballNavAtom;

dotcom-rendering/src/frontend/feFootballMatchListPage.ts

@@ -4,6 +4,7 @@ import type {
 	FEFootballDataPage,
 	FERound,
 } from './feFootballDataPage';
+import type { FEFootballNavAtom } from './feFootballNavAtom';
 
 type FEStage = {
 	stageNumber: string;
@@ -95,4 +96,5 @@ export type FEFootballMatchListPage = FEFootballDataPage & {
 	nextPage?: string;
 	nextPageNoJs?: string;
 	previousPage?: string;
+	atom?: FEFootballNavAtom;
 };

dotcom-rendering/src/frontend/feFootballNavAtom.ts

@@ -0,0 +1,5 @@
+export type FEFootballNavAtom = {
+	html: string;
+	css: string;
+	mainJS: string;
+};

dotcom-rendering/src/frontend/feFootballTablesPage.ts

@@ -4,6 +4,7 @@ import type {
 	FEFootballDataPage,
 	FERound,
 } from './feFootballDataPage';
+import type { FEFootballNavAtom } from './feFootballNavAtom';
 
 type FELeagueStats = {
 	played: number;
@@ -64,4 +65,5 @@ export type FEFootballTable = {
 export type FEFootballTablesPage = FEFootballDataPage & {
 	filters: Record<string, FEFootballCompetition[]>;
 	tables: FEFootballTable[];
+	atom?: FEFootballNavAtom;
 };

dotcom-rendering/src/server/handler.sportDataPage.web.ts

@@ -118,6 +118,7 @@ const parseFEFootballMatchList = (
 		isAdFreeUser: data.isAdFreeUser,
 		canonicalUrl: data.canonicalUrl,
 		contributionsServiceUrl: data.contributionsServiceUrl,
+		navAtom: data.atom,
 	};
 };
 
@@ -157,6 +158,7 @@ const parseFEFootballTables = (
 		isAdFreeUser: data.isAdFreeUser,
 		canonicalUrl: data.canonicalUrl,
 		contributionsServiceUrl: data.contributionsServiceUrl,
+		navAtom: data.atom,
 	};
 };
 

dotcom-rendering/src/sportDataPage.ts

@@ -1,6 +1,7 @@
 import type { CricketMatch } from './cricketMatch';
 import type { FootballMatch } from './footballMatch';
 import type { FootballMatches } from './footballMatches';
+import type { FootballNavAtom } from './footballNavAtom';
 import type { FootballTableCompetitions } from './footballTables';
 import type { FESportPageConfig } from './frontend/feFootballDataPage';
 import type { EditionId } from './lib/edition';
@@ -14,6 +15,7 @@ export type Region = {
 
 export type FootballData = SportPageConfig & {
 	regions: Region[];
+	navAtom?: FootballNavAtom;
 };
 
 export type SportPageConfig = {