Add crests to football matches (#13594)

* feat: add crests to football results

* blank alt for missing crests

* add storybook examples with wide name and badge

* use max width and height to avoid default img

- flex to centre horizontally

* fix flex behaviour at mobileMedium

---------

Co-authored-by: James Mockett <[email protected]>

Author: andrewHEguardian

dotcom-rendering/fixtures/manual/footballData.ts

@@ -37,10 +37,12 @@ export const initialDays: FootballMatches = [
 						paId: '4482093',
 						homeTeam: {
 							name: 'Torino',
+							id: '27038',
 							score: 10,
 						},
 						awayTeam: {
 							name: 'Cagliari',
+							id: '26474',
 							score: 0,
 						},
 						status: '1st',
@@ -53,9 +55,11 @@ export const initialDays: FootballMatches = [
 						paId: '12345',
 						homeTeam: {
 							name: 'Fiorentina',
+							id: '26366',
 						},
 						awayTeam: {
 							name: 'Bologna',
+							id: '26371',
 						},
 						status: 'S',
 						comment: 'Awaiting officials decision',
@@ -66,8 +70,82 @@ export const initialDays: FootballMatches = [
 							'2022-01-01T19:45:00Z',
 						).toISOString(),
 						paId: '4482890',
-						homeTeam: 'Auxerre',
-						awayTeam: 'St Etienne',
+						homeTeam: {
+							name: 'Auxerre',
+							id: '26348',
+						},
+						awayTeam: { name: 'St Etienne', id: '27408' },
+					},
+				],
+			},
+			{
+				id: '1',
+				tag: 'football/bundesligafootball',
+				name: 'Bundesliga',
+				nation: 'European',
+				matches: [
+					{
+						kind: 'Live',
+						dateTimeISOString: new Date(
+							'2022-01-01T11:11:00Z',
+						).toISOString(),
+						paId: '123',
+						homeTeam: {
+							name: 'Eintracht Frankfurt',
+							id: '26460',
+							score: 1,
+						},
+						awayTeam: {
+							name: 'Bayern Munich',
+							id: '26247',
+							score: 0,
+						},
+						status: '1st',
+					},
+				],
+			},
+
+			{
+				id: '2',
+				tag: 'football/uefa-europa-league',
+				name: 'Europa League',
+				nation: 'European',
+				matches: [
+					{
+						kind: 'Live',
+						dateTimeISOString: new Date(
+							'2022-01-01T11:11:00Z',
+						).toISOString(),
+						paId: '123',
+						homeTeam: {
+							name: 'AZ',
+							id: '26464',
+							score: 1,
+						},
+						awayTeam: {
+							name: 'Sevilla',
+							id: '27821',
+							score: 2,
+						},
+						status: 'HT',
+					},
+					{
+						kind: 'Live',
+						dateTimeISOString: new Date(
+							'2022-01-01T11:11:00Z',
+						).toISOString(),
+						paId: '1234',
+						homeTeam: {
+							name: 'Jagiellonia Białystok',
+							id: '9999999',
+							score: 3,
+						},
+						awayTeam: {
+							name: 'Shakhtar Donetsk',
+							id: '38299',
+							score: 2,
+						},
+						status: 'HT',
 					},
 				],
 			},
@@ -85,10 +163,12 @@ export const initialDays: FootballMatches = [
 						paId: '4482835',
 						homeTeam: {
 							name: 'Las Palmas',
+							id: '27804',
 							score: 2,
 						},
 						awayTeam: {
 							name: 'Osasuna',
+							id: '27152',
 							score: 3,
 						},
 						comment: 'AET',
@@ -109,10 +189,12 @@ export const initialDays: FootballMatches = [
 						paId: '4482836',
 						homeTeam: {
 							name: 'Brighton & Hove Albion Women',
+							id: '8450',
 							score: 1,
 						},
 						awayTeam: {
 							name: 'Crystal Palace Women',
+							id: '48752',
 							score: 1,
 						},
 						comment:
@@ -140,8 +222,8 @@ export const moreDays: FootballMatches = [
 							'2022-01-05T19:45:00Z',
 						).toISOString(),
 						paId: '4482890',
-						homeTeam: 'Juventus',
-						awayTeam: 'Roma',
+						homeTeam: { name: 'Juventus', id: '26359' },
+						awayTeam: { name: 'Roma', id: '26357' },
 					},
 				],
 			},

dotcom-rendering/src/components/FootballMatchList.tsx

@@ -18,6 +18,7 @@ import type {
 	FootballMatch,
 	FootballMatches,
 	FootballMatchKind,
+	Team,
 } from '../footballMatches';
 import {
 	type EditionId,
@@ -72,6 +73,10 @@ const footballMatchesGridStyles = css`
 	}
 `;
 
+function getFootballCrestImageUrl(teamId: string) {
+	return `https://sport.guim.co.uk/football/crests/60/${teamId}.png`;
+}
+
 const getTimeFormatter = (edition: EditionId): Intl.DateTimeFormat =>
 	new Intl.DateTimeFormat(getLocaleFromEdition(edition), {
 		hour: '2-digit',
@@ -141,7 +146,7 @@ const matchStatusStyles = css`
 	width: 5rem;
 	color: ${palette('--football-sub-text')};
 
-	${until.mobileMedium} {
+	${until.mobileLandscape} {
 		flex-basis: 100%;
 	}
 `;
@@ -203,6 +208,7 @@ const matchStyles = (matchKind: FootballMatchKind) => css`
 	${matchKind === 'Live' ? 'font-weight: bold;' : undefined}
 
 	display: flex;
+	align-items: center;
 	flex-wrap: wrap;
 	padding: ${space[2]}px;
 `;
@@ -260,28 +266,26 @@ const Match = ({
 		<MatchStatus match={match} timeFormatter={timeFormatter} />
 		{match.kind === 'Fixture' ? (
 			<>
-				<HomeTeam>{match.homeTeam}</HomeTeam>
-
+				<HomeTeam team={match.homeTeam} />
 				<Versus />
-				<AwayTeam>{match.awayTeam}</AwayTeam>
+				<AwayTeam team={match.awayTeam} />
 			</>
 		) : (
 			<>
-				<HomeTeam>{match.homeTeam.name}</HomeTeam>
-
+				<HomeTeam team={match.homeTeam} />
 				<Scores
 					homeScore={match.homeTeam.score}
 					awayScore={match.awayTeam.score}
 				/>
-				<AwayTeam>{match.awayTeam.name}</AwayTeam>
+				<AwayTeam team={match.awayTeam} />
 				{isUndefined(match.comment) ? null : (
 					<small
 						css={css`
 							color: ${palette('--football-sub-text')};
 							flex-basis: 100%;
 							text-align: center;
 							padding-top: ${space[2]}px;
-							${from.mobileMedium} {
+							${from.mobileLandscape} {
 								padding-left: 5rem;
 							}
 						`}
@@ -294,25 +298,63 @@ const Match = ({
 	</MatchWrapper>
 );
 
-const HomeTeam = (props: { children: ReactNode }) => (
-	<span
-		{...props}
+const FootballCrest = ({ teamId }: { teamId: string }) => (
+	<div
+		css={css`
+			width: 1.25rem;
+			height: 1.25rem;
+			flex-shrink: 0;
+			display: flex;
+			justify-content: center;
+		`}
+	>
+		<img
+			css={css`
+				max-width: 100%;
+				max-height: 100%;
+				object-fit: contain;
+			`}
+			src={getFootballCrestImageUrl(teamId)}
+			alt=""
+		/>
+	</div>
+);
+
+const HomeTeam = ({ team }: { team: Team }) => (
+	<div
 		css={css`
-			text-align: right;
+			justify-content: flex-end;
 			flex: 1 0 0;
 			padding-right: 1rem;
+			display: flex;
+			align-items: center;
+			gap: 0.325rem;
 		`}
-	/>
+	>
+		<span
+			css={css`
+				text-align: right;
+			`}
+		>
+			{team.name}
+		</span>
+		<FootballCrest teamId={team.id} />
+	</div>
 );
 
-const AwayTeam = (props: { children: ReactNode }) => (
-	<span
-		{...props}
+const AwayTeam = ({ team }: { team: Team }) => (
+	<div
 		css={css`
 			flex: 1 0 0;
 			padding-left: 1rem;
+			display: flex;
+			align-items: center;
+			gap: 0.325rem;
 		`}
-	/>
+	>
+		<FootballCrest teamId={team.id} />
+		{team.name}
+	</div>
 );
 
 const Battleline = () => (

dotcom-rendering/src/footballMatches.ts

@@ -13,8 +13,12 @@ import { error, ok, type Result } from './lib/result';
 import type { NavType } from './model/extract-nav';
 import type { FooterType } from './types/footer';
 
-export type TeamScore = {
+export type Team = {
 	name: string;
+	id: string;
+};
+
+export type TeamScore = Team & {
 	score?: number;
 };
 
@@ -32,8 +36,8 @@ export type MatchResult = MatchData & {
 
 export type MatchFixture = MatchData & {
 	kind: 'Fixture';
-	homeTeam: string;
-	awayTeam: string;
+	homeTeam: Team;
+	awayTeam: Team;
 };
 
 export type LiveMatch = MatchData & {
@@ -205,8 +209,14 @@ const parseFixture = (
 
 	return ok({
 		kind: 'Fixture',
-		homeTeam: cleanTeamName(feFixture.homeTeam.name),
-		awayTeam: cleanTeamName(feFixture.awayTeam.name),
+		homeTeam: {
+			name: cleanTeamName(feFixture.homeTeam.name),
+			id: feFixture.homeTeam.id,
+		},
+		awayTeam: {
+			name: cleanTeamName(feFixture.awayTeam.name),
+			id: feFixture.awayTeam.id,
+		},
 		dateTimeISOString: date.value,
 		paId: feFixture.id,
 	});
@@ -233,10 +243,12 @@ const parseMatchResult = (
 		homeTeam: {
 			name: cleanTeamName(feResult.homeTeam.name),
 			score: feResult.homeTeam.score,
+			id: feResult.homeTeam.id,
 		},
 		awayTeam: {
 			name: cleanTeamName(feResult.awayTeam.name),
 			score: feResult.awayTeam.score,
+			id: feResult.awayTeam.id,
 		},
 		dateTimeISOString: date.value,
 		paId: feResult.id,
@@ -265,10 +277,12 @@ const parseLiveMatch = (
 		homeTeam: {
 			name: cleanTeamName(feMatchDay.homeTeam.name),
 			score: feMatchDay.homeTeam.score,
+			id: feMatchDay.homeTeam.id,
 		},
 		awayTeam: {
 			name: cleanTeamName(feMatchDay.awayTeam.name),
 			score: feMatchDay.awayTeam.score,
+			id: feMatchDay.awayTeam.id,
 		},
 		dateTimeISOString: date.value,
 		paId: feMatchDay.id,