From 77940ac67310eaee1065c0f19f41a24f4e8f43bc Mon Sep 17 00:00:00 2001
From: Jamie B <53781962+JamieB-gu@users.noreply.github.com>
Date: Thu, 30 Jan 2025 17:52:36 +0000
Subject: [PATCH] Applied Styles To The Football Match List (#13244)

* Applied styles to the football match list

To match the way it appears on frontend. Updated the stories to display more edge cases: narrow dates, uneven scores. Broke the component down into sub-components to which styles are applied. Added palette light and dark colours.

Also made use of `Intl.DateTimeFormat` to handle formatting the dates and times with appropriate locales and timezones for the different editions. Added functions to the `edition` module to get the timezone and locale for a given edition.

* Move the `grid` module into `src`

So it can be used outside storybook.

* Fix name shadowing in `grid` module

`from` was an import and a function argument.

* Fix name shadowing in `grid` module

`span` was the name of the function and one of its parameters.

---------

Co-authored-by: Marjan Kalanaki <marjan.kalanaki@guardian.co.uk>
---
 .../.storybook/decorators/gridDecorators.tsx  |   2 +-
 .../FootballLiveMatches.stories.tsx           |  18 +-
 .../src/components/FootballLiveMatches.tsx    | 271 ++++++++++++++++--
 .../{.storybook/decorators => src}/grid.ts    |  18 +-
 dotcom-rendering/src/lib/edition.ts           |  12 +
 dotcom-rendering/src/paletteDeclarations.ts   |  16 ++
 6 files changed, 292 insertions(+), 45 deletions(-)
 rename dotcom-rendering/{.storybook/decorators => src}/grid.ts (92%)

diff --git a/dotcom-rendering/.storybook/decorators/gridDecorators.tsx b/dotcom-rendering/.storybook/decorators/gridDecorators.tsx
index ea457589605..5c118f2e2a2 100644
--- a/dotcom-rendering/.storybook/decorators/gridDecorators.tsx
+++ b/dotcom-rendering/.storybook/decorators/gridDecorators.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import type { Decorator } from '@storybook/react';
-import { grid } from './grid';
+import { grid } from '../../src/grid';
 import { from } from '@guardian/source/foundations';
 
 /**
diff --git a/dotcom-rendering/src/components/FootballLiveMatches.stories.tsx b/dotcom-rendering/src/components/FootballLiveMatches.stories.tsx
index d17078c0bed..7039182666d 100644
--- a/dotcom-rendering/src/components/FootballLiveMatches.stories.tsx
+++ b/dotcom-rendering/src/components/FootballLiveMatches.stories.tsx
@@ -1,11 +1,18 @@
 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],
+	decorators: [
+		// To make it easier to see the top border above the date
+		(Story) => (
+			<>
+				<div css={{ padding: 4 }}></div>
+				<Story />
+			</>
+		),
+	],
 } satisfies Meta<typeof FootballLiveMatchesComponent>;
 
 export default meta;
@@ -14,7 +21,8 @@ type Story = StoryObj<typeof meta>;
 
 export const FootballLiveMatches = {
 	args: {
-		matches: [
+		edition: 'UK',
+		days: [
 			{
 				date: new Date('2025-01-24T00:00:00Z'),
 				competitions: [
@@ -24,11 +32,11 @@ export const FootballLiveMatches = {
 						nation: 'European',
 						matches: [
 							{
-								dateTime: new Date('2025-01-24T19:45:00Z'),
+								dateTime: new Date('2025-01-24T11:11:00Z'),
 								paId: '4482093',
 								homeTeam: {
 									name: 'Torino',
-									score: 1,
+									score: 10,
 								},
 								awayTeam: {
 									name: 'Cagliari',
diff --git a/dotcom-rendering/src/components/FootballLiveMatches.tsx b/dotcom-rendering/src/components/FootballLiveMatches.tsx
index e04f1003201..9afe14f3924 100644
--- a/dotcom-rendering/src/components/FootballLiveMatches.tsx
+++ b/dotcom-rendering/src/components/FootballLiveMatches.tsx
@@ -1,36 +1,247 @@
-import { Fragment } from 'react';
+import { css } from '@emotion/react';
+import {
+	from,
+	headlineBold17,
+	space,
+	textSans14,
+	textSansBold14,
+	until,
+} from '@guardian/source/foundations';
+import { Fragment, type ReactNode } from 'react';
 import type { FootballMatches } from '../footballMatches';
+import { grid } from '../grid';
+import {
+	type EditionId,
+	getLocaleFromEdition,
+	getTimeZoneFromEdition,
+} from '../lib/edition';
+import { palette } from '../palette';
 
 type Props = {
-	matches: FootballMatches;
+	days: FootballMatches;
+	edition: EditionId;
 };
 
-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>
-		))}
-	</>
+const getDateFormatter = (edition: EditionId): Intl.DateTimeFormat =>
+	new Intl.DateTimeFormat('en-GB', {
+		weekday: 'long',
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+		timeZone: getTimeZoneFromEdition(edition),
+	});
+
+const getTimeFormatter = (edition: EditionId): Intl.DateTimeFormat =>
+	new Intl.DateTimeFormat(getLocaleFromEdition(edition), {
+		hour: '2-digit',
+		minute: '2-digit',
+		timeZoneName: 'short',
+		hour12: false,
+		timeZone: getTimeZoneFromEdition(edition),
+	});
+
+const Day = (props: { children: ReactNode }) => (
+	<h2
+		css={css`
+			${textSansBold14}
+			${grid.column.centre}
+				border-top: 1px solid ${palette('--football-match-list-border')};
+			padding-top: ${space[2]}px;
+
+			${from.leftCol} {
+				padding-bottom: ${space[6]}px;
+				${grid.between('left-column-start', 'centre-column-end')}
+			}
+		`}
+	>
+		{props.children}
+	</h2>
+);
+
+const CompetitionName = (props: { children: ReactNode }) => (
+	<h3
+		css={css`
+			${textSansBold14}
+			${grid.column.centre}
+			color: ${palette('--football-match-list-competition-text')};
+			border-top: 1px solid ${palette('--football-match-list-top-border')};
+			padding: ${space[2]}px;
+			background-color: ${palette('--football-match-list-background')};
+			margin-top: ${space[9]}px;
+
+			${from.leftCol} {
+				border-top-color: ${palette('--football-match-list-border')};
+				background-color: transparent;
+				margin-top: 0;
+				padding: ${space[1]}px 0 0;
+				${grid.column.left}
+				${headlineBold17}
+			}
+		`}
+	>
+		{props.children}
+	</h3>
+);
+
+const Matches = (props: { children: ReactNode }) => (
+	<ul
+		{...props}
+		css={css`
+			${grid.column.centre}
+
+			${from.leftCol} {
+				padding-bottom: ${space[9]}px;
+			}
+		`}
+	/>
+);
+
+const Match = (props: { children: ReactNode }) => (
+	<li
+		{...props}
+		css={css`
+			${textSans14}
+			background-color: ${palette('--football-match-list-background')};
+			padding: ${space[2]}px;
+			display: flex;
+			border: 1px solid ${palette('--football-match-list-border')};
+
+			${until.mobileMedium} {
+				flex-wrap: wrap;
+			}
+
+			${from.leftCol} {
+				&:first-of-type {
+					border-top-color: ${palette(
+						'--football-match-list-top-border',
+					)};
+				}
+			}
+		`}
+	/>
+);
+
+const MatchTime = (props: { children: ReactNode; dateTime: string }) => (
+	<time
+		{...props}
+		css={css`
+			width: 5rem;
+
+			${until.mobileMedium} {
+				flex-basis: 100%;
+			}
+		`}
+	/>
+);
+
+const HomeTeam = (props: { children: ReactNode }) => (
+	<span
+		{...props}
+		css={css`
+			text-align: right;
+			flex: 1 0 0;
+			padding-right: 1rem;
+		`}
+	/>
+);
+
+const AwayTeam = (props: { children: ReactNode }) => (
+	<span
+		{...props}
+		css={css`
+			flex: 1 0 0;
+			padding-left: 1rem;
+		`}
+	/>
+);
+
+const Battleline = () => (
+	<span
+		css={css`
+			display: block;
+			padding: 0 4px;
+
+			&:before {
+				content: '-';
+			}
+		`}
+	/>
+);
+
+const Scores = ({
+	homeScore,
+	awayScore,
+}: {
+	homeScore: number;
+	awayScore: number;
+}) => (
+	<span
+		css={css`
+			width: 3rem;
+			display: flex;
+		`}
+	>
+		<span
+			css={css`
+				text-align: right;
+				flex: 1 0 0;
+			`}
+		>
+			{homeScore}
+		</span>
+		<Battleline />
+		<span
+			css={css`
+				text-align: left;
+				flex: 1 0 0;
+			`}
+		>
+			{awayScore}
+		</span>
+	</span>
 );
+
+export const FootballLiveMatches = ({ edition, days }: Props) => {
+	const dateFormatter = getDateFormatter(edition);
+	const timeFormatter = getTimeFormatter(edition);
+
+	return (
+		<>
+			{days.map((day) => (
+				<section css={css(grid.container)} key={day.date.toISOString()}>
+					<Day>{dateFormatter.format(day.date)}</Day>
+					{day.competitions.map((competition) => (
+						<Fragment key={competition.competitionId}>
+							<CompetitionName>
+								{competition.name}
+							</CompetitionName>
+							<Matches>
+								{competition.matches.map((match) => (
+									<Match key={match.paId}>
+										<MatchTime
+											dateTime={match.dateTime.toISOString()}
+										>
+											{timeFormatter.format(
+												match.dateTime,
+											)}
+										</MatchTime>
+										<HomeTeam>
+											{match.homeTeam.name}
+										</HomeTeam>
+										<Scores
+											homeScore={match.homeTeam.score}
+											awayScore={match.awayTeam.score}
+										/>
+										<AwayTeam>
+											{match.awayTeam.name}
+										</AwayTeam>
+									</Match>
+								))}
+							</Matches>
+						</Fragment>
+					))}
+				</section>
+			))}
+		</>
+	);
+};
diff --git a/dotcom-rendering/.storybook/decorators/grid.ts b/dotcom-rendering/src/grid.ts
similarity index 92%
rename from dotcom-rendering/.storybook/decorators/grid.ts
rename to dotcom-rendering/src/grid.ts
index 6f62df84b53..e835a587e04 100644
--- a/dotcom-rendering/.storybook/decorators/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -1,6 +1,6 @@
 // ----- Imports ----- //
 
-import { from } from '@guardian/source/foundations';
+import { from as fromBreakpoint } from '@guardian/source/foundations';
 
 // ----- Columns & Lines ----- //
 
@@ -38,23 +38,23 @@ const container = `
     grid-template-columns: ${mobileColumns};
     column-gap: ${mobileColumnGap};
 
-    ${from.mobileLandscape} {
+    ${fromBreakpoint.mobileLandscape} {
         column-gap: ${columnGap};
     }
 
-    ${from.tablet} {
+    ${fromBreakpoint.tablet} {
         grid-template-columns: ${tabletColumns};
     }
 
-    ${from.desktop} {
+    ${fromBreakpoint.desktop} {
         grid-template-columns: ${desktopColumns};
     }
 
-    ${from.leftCol} {
+    ${fromBreakpoint.leftCol} {
         grid-template-columns: ${leftColColumns};
     }
 
-    ${from.wide} {
+    ${fromBreakpoint.wide} {
         grid-template-columns: ${wideColumns};
     }
 `;
@@ -86,7 +86,7 @@ const between = (from: Line | number, to: Line | number): string => `
  * Ask the element to span a number of grid columns, starting at a specific
  * grid line. The line can be specified either by `Line` name or by number.
  * @param start The grid line to start from, either a `Line` name or a number.
- * @param span The number of columns to span.
+ * @param columns The number of columns to span.
  * @returns {string} CSS to place the element on the grid.
  *
  * @example <caption>The element will span 3 columns from the line.</caption>
@@ -94,8 +94,8 @@ const between = (from: Line | number, to: Line | number): string => `
  *   ${grid.span('centre-column-start', 3)}
  * `;
  */
-const span = (start: Line | number, span: number): string => `
-    grid-column: ${start} / span ${span};
+const span = (start: Line | number, columns: number): string => `
+    grid-column: ${start} / span ${columns};
 `;
 
 /**
diff --git a/dotcom-rendering/src/lib/edition.ts b/dotcom-rendering/src/lib/edition.ts
index 2273b766380..8e34e942d77 100644
--- a/dotcom-rendering/src/lib/edition.ts
+++ b/dotcom-rendering/src/lib/edition.ts
@@ -79,6 +79,9 @@ const editionList = [
 	shortTitle: string;
 }>;
 
+type TimeZone = (typeof editionList)[number]['timeZone'];
+type Locale = (typeof editionList)[number]['dateLocale'];
+
 const [ukEdition] = editionList;
 
 /**
@@ -151,9 +154,16 @@ const splitEditionalisedPage = (
 const isEditionalisedPage = (pageId: string): boolean =>
 	!!splitEditionalisedPage(pageId);
 
+const getTimeZoneFromEdition = (edition: EditionId): TimeZone =>
+	getEditionFromId(edition).timeZone;
+
+const getLocaleFromEdition = (edition: EditionId): Locale =>
+	getEditionFromId(edition).dateLocale;
+
 export {
 	EditionId,
 	Edition,
+	TimeZone,
 	editionList,
 	editionalisedPages,
 	getEditionFromId,
@@ -163,4 +173,6 @@ export {
 	isEditionalisedPage,
 	isNetworkFront,
 	splitEditionalisedPage,
+	getTimeZoneFromEdition,
+	getLocaleFromEdition,
 };
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index 213a89dd699..cd0ba51df75 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -6482,6 +6482,22 @@ const paletteColours = {
 		light: followTextLight,
 		dark: followTextDark,
 	},
+	'--football-match-list-background': {
+		light: () => sourcePalette.neutral[97],
+		dark: () => sourcePalette.neutral[20],
+	},
+	'--football-match-list-border': {
+		light: () => sourcePalette.neutral[93],
+		dark: () => sourcePalette.neutral[38],
+	},
+	'--football-match-list-competition-text': {
+		light: () => sourcePalette.sport[300],
+		dark: () => sourcePalette.neutral[86],
+	},
+	'--football-match-list-top-border': {
+		light: () => sourcePalette.sport[500],
+		dark: () => sourcePalette.neutral[60],
+	},
 	'--front-container-background': {
 		light: () => sourcePalette.neutral[100],
 		dark: () => sourcePalette.neutral[10],