Add Football Matches (#13238)

Add football match types and component to render live matches. This will eventually be used for rendering the live football pages on DCAR, but for now we're breaking down the work into pieces.

Co-authored-by: Marjan Kalanaki <[email protected]>

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
+import { FootballLiveMatches as FootballLiveMatchesComponent } from './FootballLiveMatches';
+
+const meta = {
+	title: 'Components/Football Live Matches',
+	component: FootballLiveMatchesComponent,
+	decorators: [centreColumnDecorator],
+} satisfies Meta<typeof FootballLiveMatchesComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const FootballLiveMatches = {
+	args: {
+		matches: [
+			{
+				date: new Date('2025-01-24T00:00:00Z'),
+				competitions: [
+					{
+						competitionId: '635',
+						name: 'Serie A',
+						nation: 'European',
+						matches: [
+							{
+								dateTime: new Date('2025-01-24T19:45:00Z'),
+								paId: '4482093',
+								homeTeam: {
+									name: 'Torino',
+									score: 1,
+								},
+								awayTeam: {
+									name: 'Cagliari',
+									score: 0,
+								},
+								status: 'FT',
+							},
+							{
+								dateTime: new Date('2025-01-24T19:45:00Z'),
+								paId: '4482890',
+								homeTeam: {
+									name: 'Auxerre',
+									score: 0,
+								},
+								awayTeam: {
+									name: 'St Etienne',
+									score: 0,
+								},
+								status: 'FT',
+							},
+						],
+					},
+					{
+						competitionId: '650',
+						name: 'La Liga',
+						nation: 'European',
+						matches: [
+							{
+								dateTime: new Date('2025-01-24T20:00:00Z'),
+								paId: '4482835',
+								homeTeam: {
+									name: 'Las Palmas',
+									score: 2,
+								},
+								awayTeam: {
+									name: 'Osasuna',
+									score: 3,
+								},
+								status: 'FT',
+							},
+						],
+					},
+				],
+			},
+		],
+	},
+} satisfies Story;

dotcom-rendering/src/components/FootballLiveMatches.tsx

@@ -0,0 +1,36 @@
+import { Fragment } from 'react';
+import type { FootballMatches } from '../footballMatches';
+
+type Props = {
+	matches: FootballMatches;
+};
+
+export const FootballLiveMatches = ({ matches }: Props) => (
+	<>
+		{matches.map((day) => (
+			<Fragment key={day.date.toISOString()}>
+				<h2>{day.date.toString()}</h2>
+				{day.competitions.map((competition) => (
+					<Fragment key={competition.competitionId}>
+						<h3>{competition.name}</h3>
+						<ul>
+							{competition.matches.map((match) => (
+								<li key={match.paId}>
+									<time
+										dateTime={match.dateTime.toISOString()}
+									>
+										{match.dateTime.getUTCHours()}:
+										{match.dateTime.getUTCMinutes()}
+									</time>
+									{match.homeTeam.name} {match.homeTeam.score}
+									-{match.awayTeam.score}{' '}
+									{match.awayTeam.name}
+								</li>
+							))}
+						</ul>
+					</Fragment>
+				))}
+			</Fragment>
+		))}
+	</>
+);

dotcom-rendering/src/footballMatches.ts

@@ -0,0 +1,37 @@
+type TeamScore = {
+	name: string;
+	score: number;
+};
+
+type MatchData = {
+	paId: string;
+	dateTime: Date;
+};
+
+export type MatchResult = MatchData & {
+	homeTeam: TeamScore;
+	awayTeam: TeamScore;
+};
+
+export type MatchFixture = MatchData & {
+	homeTeam: string;
+	awayTeam: string;
+};
+
+export type LiveMatch = MatchData & {
+	homeTeam: TeamScore;
+	awayTeam: TeamScore;
+	status: string;
+};
+
+type Competition = {
+	competitionId: string;
+	name: string;
+	nation: string;
+	matches: LiveMatch[];
+};
+
+export type FootballMatches = Array<{
+	date: Date;
+	competitions: Competition[];
+}>;