Add match status to the football data

dotcom-rendering/fixtures/generated/match-report.ts

@@ -563,4 +563,5 @@ export const matchReport: MatchReportType = {
 		'https://www.theguardian.com/football/live/2025/jul/08/germany-v-denmark-euro-2025-live',
 	reportUrl:
 		'https://www.theguardian.com/football/2025/jul/08/germany-denmark-women-euro-2025-group-c-match-report',
+	status: 'FT',
 };

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

@@ -24,6 +24,7 @@ export const FootballMatchSummary = {
 			homeTeam: matchReport.homeTeam,
 			awayTeam: matchReport.awayTeam,
 			comments: matchReport.comments,
+			status: matchReport.status,
 		},
 	},
 } satisfies Story;

dotcom-rendering/src/components/GetMatchNav.importable.tsx

@@ -20,6 +20,7 @@ type Props = {
 type MatchData = {
 	homeTeam: Pick<TeamType, 'name' | 'score' | 'scorers' | 'crest'>;
 	awayTeam: Pick<TeamType, 'name' | 'score' | 'scorers' | 'crest'>;
+	status: string;
 	comments?: string;
 	minByMinUrl?: string;
 	venue?: string;
@@ -35,6 +36,7 @@ const fallbackTeam = {
 const fallbackData = {
 	homeTeam: fallbackTeam,
 	awayTeam: fallbackTeam,
+	status: '',
 } satisfies MatchData;
 
 const validateMatchData = (data: unknown): data is MatchData => {

dotcom-rendering/src/footballMatch.ts

@@ -1,5 +1,5 @@
 import { isOneOf } from '@guardian/libs';
-import { listParse } from './footballMatches';
+import { listParse, replaceLiveMatchStatus } from './footballMatches';
 import type {
 	FEFootballMatch,
 	FEFootballPlayer,
@@ -48,6 +48,7 @@ export type FootballPlayer = {
 export type FootballMatch = {
 	homeTeam: FootballTeam;
 	awayTeam: FootballTeam;
+	status: string;
 	comments?: string;
 };
 
@@ -142,6 +143,7 @@ export const parse = (
 	return ok({
 		homeTeam: parsedHomeTeam.value,
 		awayTeam: parsedAwayTeam.value,
+		status: replaceLiveMatchStatus(feFootballMatch.status),
 		comments: feFootballMatch.comments,
 	});
 };

dotcom-rendering/src/footballMatches.ts

@@ -411,6 +411,6 @@ const paStatusToMatchStatus: Record<string, string> = {
 	Cancelled: 'C', // A Match has been Cancelled.
 };
 
-const replaceLiveMatchStatus = (status: string): string => {
+export const replaceLiveMatchStatus = (status: string): string => {
 	return paStatusToMatchStatus[status] ?? status.slice(0, 2);
 };

dotcom-rendering/src/frontend/feFootballMatchPage.ts

@@ -36,6 +36,7 @@ export type FEFootballMatch = {
 	id: string;
 	homeTeam: FEFootballTeam;
 	awayTeam: FEFootballTeam;
+	status: string;
 	comments?: string;
 };
 

dotcom-rendering/src/frontend/schemas/feFootballMatchPage.json

@@ -281,14 +281,18 @@
                                 "shotsOn"
                             ]
                         },
+                        "status": {
+                            "type": "string"
+                        },
                         "comments": {
                             "type": "string"
                         }
                     },
                     "required": [
                         "awayTeam",
                         "homeTeam",
-                        "id"
+                        "id",
+                        "status"
                     ]
                 }
             },

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -360,9 +360,7 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 				{footballMatchUrl ? (
 					<Section
 						showTopBorder={false}
-						backgroundColour={themePalette(
-							'--match-nav-background',
-						)}
+						backgroundColour={'red'}
 						borderColour={themePalette('--headline-border')}
 						leftContent={
 							<ArticleTitle

dotcom-rendering/src/types/matchReport.ts

@@ -13,4 +13,5 @@ export type MatchReportType = {
 	comments: string;
 	minByMinUrl: string;
 	reportUrl: string;
+	status: string;
 };