Add header to match info page

dotcom-rendering/fixtures/manual/footballData.ts

@@ -1,4 +1,5 @@
 import type { FootballMatches } from '../../src/footballMatches';
+import type { FootballMatch as FootballMatchV2 } from '../../src/footballMatchV2';
 import type { Region } from '../../src/sportDataPage';
 
 export const regions: Region[] = [
@@ -20,6 +21,26 @@ export const regions: Region[] = [
 	},
 ];
 
+export const footballMatchResultV2: FootballMatchV2 = {
+	kind: 'Result',
+	kickOff: new Date('2022-01-01T11:11:00Z'),
+	paId: '4479251',
+	homeTeam: {
+		name: 'Germany',
+		paID: '7699',
+		score: 2,
+		scorers: ['Sjoeke Nusken 56 Pen', 'Lea Schuller 66'],
+	},
+	awayTeam: {
+		name: 'Denmark',
+		paID: '35854',
+		score: 1,
+		scorers: ['Amalie Vangsgaard 26'],
+	},
+	venue: 'St Jakob Park',
+	comment: undefined,
+};
+
 export const initialDays: FootballMatches = [
 	{
 		dateISOString: new Date('2022-01-01T00:00:00Z').toISOString(),

dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx

@@ -86,7 +86,7 @@ const StatusLine = (props: {
 		}}
 	>
 		<LeagueName matchKind={props.match.kind}>{props.leagueName}</LeagueName>
-		{props.match.venue} •{' '}
+		{props.match.venue ? `${props.match.venue} • ` : null}
 		<MatchStatus edition={props.edition} match={props.match} />
 	</p>
 );

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../.storybook/modes';
+import { footballMatchResultV2 } from '../../fixtures/manual/footballData';
 import { table } from '../../fixtures/manual/footballTable';
 import { matchStats } from '../../fixtures/manual/matchStats';
 import { FootballMatchInfoPage as FootballMatchInfoPageComponent } from './FootballMatchInfoPage';
@@ -22,6 +23,9 @@ type Story = StoryObj<typeof meta>;
 export const FootballMatchInfoPage = {
 	args: {
 		matchStats,
+		matchInfo: footballMatchResultV2,
 		table,
+		competitionName: "Women's Euro 2025",
+		edition: 'UK',
 	},
 } satisfies Story;

dotcom-rendering/src/components/FootballMatchInfoPage.tsx

@@ -1,35 +1,62 @@
 import { css } from '@emotion/react';
-import { from } from '@guardian/source/foundations';
+import { from, space } from '@guardian/source/foundations';
 import { type FootballMatchStats } from '../footballMatchStats';
+import { type FootballMatch } from '../footballMatchV2';
 import { type FootballTableSummary } from '../footballTables';
 import { grid } from '../grid';
+import { type EditionId } from '../lib/edition';
 import { palette } from '../palette';
+import { FootballMatchHeader } from './FootballMatchHeader/FootballMatchHeader';
 import { FootballMatchInfo } from './FootballMatchInfo';
 
 export const FootballMatchInfoPage = ({
 	matchStats,
+	matchInfo,
+	competitionName,
+	edition,
 	table,
 }: {
 	matchStats: FootballMatchStats;
+	matchInfo: FootballMatch;
+	competitionName: string;
+	edition: EditionId;
 	table?: FootballTableSummary;
 }) => {
 	return (
-		<main id="maincontent" css={gridStyles}>
-			<div
-				css={css`
-					${grid.column.centre};
-				`}
-			>
-				<FootballMatchInfo matchStats={matchStats} table={table} />
+		<main id="maincontent">
+			<FootballMatchHeader
+				leagueName={competitionName}
+				match={matchInfo}
+				tabs={{
+					selected: 'info',
+					matchKind: matchInfo.kind,
+					// We don't have these urls in the data yet. This will be fixed in upcoming PRs.
+					reportURL: undefined,
+					liveURL: undefined,
+				}}
+				edition={edition}
+			/>
+			<div css={bodyGridStyles}>
+				<div
+					css={css`
+						${grid.column.centre};
+					`}
+				>
+					<FootballMatchInfo matchStats={matchStats} table={table} />
+				</div>
 			</div>
 		</main>
 	);
 };
 
-const gridStyles = css`
+const bodyGridStyles = css`
 	${grid.paddedContainer}
 	position: relative;
+	padding-top: ${space[4]}px;
+	padding-bottom: ${space[8]}px;
 	${from.tablet} {
+		padding-top: ${space[2]}px;
+		padding-bottom: ${space[14]}px;
 		&::before,
 		&::after {
 			content: '';

dotcom-rendering/src/footballMatch.ts

@@ -1,7 +1,7 @@
 import { isOneOf } from '@guardian/libs';
 import { listParse, replaceLiveMatchStatus } from './footballMatches';
 import type {
-	FEFootballMatch,
+	FEFootballMatchStats,
 	FEFootballPlayer,
 	FEFootballPlayerEvent,
 	FEFootballTeam,
@@ -113,7 +113,7 @@ const parseTeam = (
 	}));
 
 export const parse = (
-	feFootballMatch: FEFootballMatch,
+	feFootballMatch: FEFootballMatchStats,
 ): Result<ParserError, FootballMatch> =>
 	parseTeam(feFootballMatch.homeTeam).flatMap((homeTeam) =>
 		parseTeam(feFootballMatch.awayTeam).map((awayTeam) => ({

dotcom-rendering/src/footballMatchStats.ts

@@ -2,7 +2,7 @@ import { isOneOf } from '@guardian/libs';
 import { listParse } from './footballMatches';
 import type { FootballTeam } from './footballTeam';
 import type {
-	FEFootballMatch,
+	FEFootballMatchStats,
 	FEFootballPlayer,
 	FEFootballPlayerEvent,
 	FEFootballTeam,
@@ -141,7 +141,7 @@ const parseTeamWithStats = (
 	}));
 
 export const parseMatchStats = (
-	feFootballMatch: FEFootballMatch,
+	feFootballMatch: FEFootballMatchStats,
 ): Result<ParserError, FootballMatchStats> =>
 	parseTeamWithStats(feFootballMatch.homeTeam).flatMap((homeTeam) =>
 		parseTeamWithStats(feFootballMatch.awayTeam).map((awayTeam) => ({