Localised kick off time helper and tests

Author: jamesmockett

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

@@ -1,24 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { FootballPreMatchDetails } from './FootballPreMatchDetails';
+import { FootballPreMatchDetails as FootballPreMatchDetailsComponent } from './FootballPreMatchDetails';
 
 const meta = {
 	title: 'Components/Football Pre-Match Details',
-	component: FootballPreMatchDetails,
+	component: FootballPreMatchDetailsComponent,
 	parameters: {
 		layout: 'padded',
 	},
-} satisfies Meta<typeof FootballPreMatchDetails>;
+} satisfies Meta<typeof FootballPreMatchDetailsComponent>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const FootballPreMatchDetails = {
 	args: {
 		homeTeam: 'Man United',
 		awayTeam: 'Arsenal',
 		league: 'Premier League',
 		venue: 'Old Trafford',
-		kickOff: new Date('2026-02-15T17:00:00Z'),
+		kickOff: new Date('2026-02-15T17:30:00Z'),
 		edition: 'UK',
 	},
 } satisfies Story;

dotcom-rendering/src/components/FootballPreMatchDetails.tsx

@@ -13,11 +13,8 @@ import {
 	LinkButton,
 	SvgArrowRightStraight,
 } from '@guardian/source/react-components';
-import {
-	type EditionId,
-	getLocaleFromEdition,
-	getTimeZoneFromEdition,
-} from '../lib/edition';
+import type { EditionId } from '../lib/edition';
+import { formatMatchKickOffTime } from '../lib/formatDate';
 import { palette } from '../palette';
 
 const containerCss = css`
@@ -72,47 +69,33 @@ export const FootballPreMatchDetails = ({
 	venue,
 	kickOff,
 	edition,
-}: PreMatchProps) => {
-	const kickOffTime = new Intl.DateTimeFormat(getLocaleFromEdition(edition), {
-		hour: 'numeric',
-		minute: 'numeric',
-		hour12: true,
-		weekday: 'long',
-		day: 'numeric',
-		month: 'short',
-		year: 'numeric',
-		timeZoneName: 'short',
-		timeZone: getTimeZoneFromEdition(edition),
-	}).format(kickOff);
-
-	console.log(new Date());
-
-	return (
-		<div css={containerCss}>
-			<h3 css={headingCss}>
-				{homeTeam} vs. {awayTeam}
-			</h3>
-			<div css={detailsCss}>
-				<span>{league}</span>
-				<span>{venue}</span>
-				<time css={kickOffCss}>{kickOffTime}</time>
-			</div>
-			<LinkButton
-				href="/football/fixtures"
-				size="xsmall"
-				priority="tertiary"
-				icon={<SvgArrowRightStraight />}
-				iconSide="right"
-				theme={{
-					textTertiary: palette('--football-pre-match-button'),
-					borderTertiary: palette('--football-pre-match-button'),
-					backgroundTertiaryHover: palette(
-						'--football-pre-match-button-hover',
-					),
-				}}
-			>
-				Today's fixtures
-			</LinkButton>
+}: PreMatchProps) => (
+	<div css={containerCss}>
+		<h3 css={headingCss}>
+			{homeTeam} vs. {awayTeam}
+		</h3>
+		<div css={detailsCss}>
+			<span>{league}</span>
+			<span>{venue}</span>
+			<time css={kickOffCss}>
+				{formatMatchKickOffTime(kickOff, edition)}
+			</time>
 		</div>
-	);
-};
+		<LinkButton
+			href="/football/fixtures"
+			size="xsmall"
+			priority="tertiary"
+			icon={<SvgArrowRightStraight />}
+			iconSide="right"
+			theme={{
+				textTertiary: palette('--football-pre-match-button'),
+				borderTertiary: palette('--football-pre-match-button'),
+				backgroundTertiaryHover: palette(
+					'--football-pre-match-button-hover',
+				),
+			}}
+		>
+			Today's fixtures
+		</LinkButton>
+	</div>
+);

dotcom-rendering/src/lib/formatDate.test.ts

@@ -0,0 +1,35 @@
+import { formatMatchKickOffTime } from './formatDate';
+
+describe('formatMatchKickOffTime', () => {
+	it('should return a localised kick off date and time', () => {
+		expect(
+			formatMatchKickOffTime(new Date('2026-02-15T19:30:00Z'), 'UK'),
+		).toBe('Sunday, 15 Feb 2026, 7:30 pm GMT');
+		expect(
+			formatMatchKickOffTime(new Date('2026-02-15T19:30:00Z'), 'EUR'),
+		).toBe('Sunday, 15 Feb 2026, 8:30 pm CET');
+		expect(
+			formatMatchKickOffTime(new Date('2026-02-15T19:30:00Z'), 'AU'),
+		).toBe('Monday 16 Feb 2026, 6:30 am AEDT');
+	});
+
+	it('should display "Today" if the match is today in the current timezone', () => {
+		jest.useFakeTimers().setSystemTime(new Date('2026-02-15T19:30:00Z'));
+
+		expect(
+			formatMatchKickOffTime(new Date(`2026-02-15T19:30:00Z`), 'UK'),
+		).toBe('Today, 7:30 pm GMT');
+		expect(
+			formatMatchKickOffTime(new Date(`2026-02-15T19:30:00Z`), 'US'),
+		).toBe('Today, 2:30 PM EST');
+		expect(
+			formatMatchKickOffTime(new Date(`2026-02-15T20:00:00Z`), 'AU'),
+		).toBe('Today, 7:00 am AEDT');
+		expect(
+			formatMatchKickOffTime(new Date(`2026-02-15T23:00:00Z`), 'EUR'),
+		).toBe('Monday, 16 Feb 2026, 12:00 am CET');
+		expect(
+			formatMatchKickOffTime(new Date(`2026-02-15T01:00:00Z`), 'US'),
+		).toBe('Saturday, Feb 14, 2026, 8:00 PM EST');
+	});
+});

dotcom-rendering/src/lib/formatDate.ts

@@ -0,0 +1,50 @@
+import {
+	type EditionId,
+	getLocaleFromEdition,
+	getTimeZoneFromEdition,
+} from './edition';
+
+/**
+ * Returns a localised date and time string for the given match kick off time.
+ * If the match is today in the current timezone, 'Today' is shown instead of
+ * the full date.
+ *
+ * Sunday, 15 Feb 2026, 7:30 pm GMT
+ * Today, 7:30 pm GMT
+ */
+export const formatMatchKickOffTime = (kickOff: Date, edition: EditionId) => {
+	const locale = getLocaleFromEdition(edition);
+	const timeZone = getTimeZoneFromEdition(edition);
+
+	const getLocalisedDateString = (date: Date) =>
+		date.toLocaleDateString(locale, {
+			year: 'numeric',
+			month: 'numeric',
+			day: 'numeric',
+			timeZone,
+		});
+
+	const isToday =
+		getLocalisedDateString(kickOff) === getLocalisedDateString(new Date());
+
+	const timeFormatter = new Intl.DateTimeFormat(locale, {
+		hour: 'numeric',
+		minute: 'numeric',
+		hour12: true,
+		timeZoneName: 'short',
+		timeZone: timeZone,
+	});
+
+	const dateFormatter = new Intl.DateTimeFormat(locale, {
+		day: 'numeric',
+		month: 'short',
+		year: 'numeric',
+		weekday: 'long',
+		timeZone: timeZone,
+	});
+
+	const formattedDate = isToday ? 'Today' : dateFormatter.format(kickOff);
+	const formattedTime = timeFormatter.format(kickOff);
+
+	return `${formattedDate}, ${formattedTime}`;
+};