From ab6f7601769d3424602ca4f5fbc744fdb1e4d828 Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy <1731150+Jakeii@users.noreply.github.com> Date: Wed, 26 Aug 2026 11:51:18 +0100 Subject: [PATCH 1/4] Show scorer info correctly --- .../fixtures/manual/footballMatches.ts | 1 + .../FootballMatchHeader.tsx | 51 ++++++++++++++++--- dotcom-rendering/src/footballMatchV2.ts | 34 +++++++++++-- dotcom-rendering/src/paletteDeclarations.ts | 4 ++ 4 files changed, 79 insertions(+), 11 deletions(-) diff --git a/dotcom-rendering/fixtures/manual/footballMatches.ts b/dotcom-rendering/fixtures/manual/footballMatches.ts index 0e855dd27da..30a24d65744 100644 --- a/dotcom-rendering/fixtures/manual/footballMatches.ts +++ b/dotcom-rendering/fixtures/manual/footballMatches.ts @@ -19,6 +19,7 @@ const matchData = { homeTeam: { id: '44', name: 'Home Team', + scorers: 'Person (1), Person (5 Pen)', }, awayTeam: { id: '2', diff --git a/dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx b/dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx index 288b96a8631..cb1a836976c 100644 --- a/dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx +++ b/dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx @@ -5,8 +5,10 @@ import { headlineBold20Object, headlineBold24Object, space, + textSans12Object, textSans14Object, textSans15Object, + textSansBold12Object, textSansBold14Object, textSansBold17Object, textSansItalic14Object, @@ -16,7 +18,7 @@ import { import { useMemo } from 'react'; import type { SWRConfiguration } from 'swr'; import useSWR from 'swr'; -import type { FootballMatch } from '../../footballMatchV2'; +import type { FootballMatch, Scorer } from '../../footballMatchV2'; import { grid } from '../../grid'; import { ArticleDesign, type ArticleFormat } from '../../lib/articleFormat'; import type { @@ -388,7 +390,10 @@ const Team = (props: { ) : null} {props.match.kind !== 'Fixture' ? ( - + ) : null} ); @@ -505,7 +510,10 @@ const ScoreNumber = (props: { score: number }) => { } }; -const Scorers = (props: { scorers: string[] }) => +const Scorers = (props: { + scorers: Scorer[]; + matchKind: FootballMatch['kind']; +}) => props.scorers.length === 0 ? null : ( ); diff --git a/dotcom-rendering/src/footballMatchV2.ts b/dotcom-rendering/src/footballMatchV2.ts index 1fd1be24822..715f8e24be7 100644 --- a/dotcom-rendering/src/footballMatchV2.ts +++ b/dotcom-rendering/src/footballMatchV2.ts @@ -64,13 +64,19 @@ type MatchData = { venue?: string; }; +export type Scorer = { + name: string; + time?: string; + otherInfo?: string; +}; + /** * Once a match has started, we can bundle together information about a team, * such as its name, with its score and which players have scored. */ type FootballMatchTeamWithScore = FootballTeam & { score: number; - scorers: string[]; + scorers: Scorer[]; }; type FootballDayInvalidDate = { @@ -130,6 +136,24 @@ const parseMatchDate = (date: string): Result => { return parseDate(isoDate); }; +const parseScorers = (scorers: string | undefined): Scorer[] => + scorers?.split(',').map((scorer) => { + const [, name, time, otherInfo] = + scorer.match(/(.*) \((\d+)\s?(.*)?\)/) ?? []; + + if (!name || !time) { + return { + name: scorer, + }; + } + + return { + name, + time, + otherInfo, + }; + }) ?? []; + const parseFixture = ( feFixture: FEFixture | FEMatchDay, ): Result => { @@ -204,14 +228,14 @@ const parseMatchResult = ( name: cleanTeamName(feResult.homeTeam.name), paID: feResult.homeTeam.id, score: homeScore, - scorers: feResult.homeTeam.scorers?.split(',') ?? [], + scorers: parseScorers(feResult.homeTeam.scorers), teamUrl: feResult.homeTeam.teamUrl, }, awayTeam: { name: cleanTeamName(feResult.awayTeam.name), paID: feResult.awayTeam.id, score: awayScore, - scorers: feResult.awayTeam.scorers?.split(',') ?? [], + scorers: parseScorers(feResult.homeTeam.scorers), teamUrl: feResult.awayTeam.teamUrl, }, comment: feResult.comments, @@ -256,14 +280,14 @@ const parseLiveMatch = ( name: cleanTeamName(feMatchDay.homeTeam.name), paID: feMatchDay.homeTeam.id, score: homeScore, - scorers: feMatchDay.homeTeam.scorers?.split(',') ?? [], + scorers: parseScorers(feMatchDay.homeTeam.scorers), teamUrl: feMatchDay.homeTeam.teamUrl, }, awayTeam: { name: cleanTeamName(feMatchDay.awayTeam.name), paID: feMatchDay.awayTeam.id, score: awayScore, - scorers: feMatchDay.awayTeam.scorers?.split(',') ?? [], + scorers: parseScorers(feMatchDay.awayTeam.scorers), teamUrl: feMatchDay.awayTeam.teamUrl, }, dateTimeISOString, diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index dd7d58bceee..9ee0fc3bbf5 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -7469,6 +7469,10 @@ const paletteColours = { light: () => sourcePalette.neutral[7], dark: () => sourcePalette.neutral[7], }, + '--football-match-header-scorer-text': { + light: () => `${sourcePalette.neutral[100]}99`, + dark: () => `${sourcePalette.neutral[100]}99`, + }, '--football-match-hover': { light: () => sourcePalette.neutral[93], dark: () => sourcePalette.neutral[38], From ffeda4d9c181a3c08ce6cd6a217a274c90f5dda7 Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy <1731150+Jakeii@users.noreply.github.com> Date: Wed, 26 Aug 2026 11:54:22 +0100 Subject: [PATCH 2/4] update other fixture --- dotcom-rendering/fixtures/manual/footballData.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/fixtures/manual/footballData.ts b/dotcom-rendering/fixtures/manual/footballData.ts index da7491b5b45..25c1202240d 100644 --- a/dotcom-rendering/fixtures/manual/footballData.ts +++ b/dotcom-rendering/fixtures/manual/footballData.ts @@ -29,13 +29,20 @@ export const footballMatchResultV2: FootballMatchV2 = { name: 'Germany', paID: '7699', score: 2, - scorers: ['Sjoeke Nusken 56 Pen', 'Lea Schuller 66'], + scorers: [ + { + name: 'Sjoeke Nusken', + time: '56', + otherInfo: 'Pen', + }, + { name: 'Lea Schuller', time: '66' }, + ], }, awayTeam: { name: 'Denmark', paID: '35854', score: 1, - scorers: ['Amalie Vangsgaard 26'], + scorers: [{ name: 'Amalie Vangsgaard', time: '26' }], }, venue: 'St Jakob Park', comment: undefined, From eb4d0ec06a17b4e02c1daa5bc814e51861886d4b Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy <1731150+Jakeii@users.noreply.github.com> Date: Wed, 26 Aug 2026 14:05:42 +0100 Subject: [PATCH 3/4] correct away team --- dotcom-rendering/src/footballMatchV2.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/footballMatchV2.ts b/dotcom-rendering/src/footballMatchV2.ts index 715f8e24be7..ef6b15e18e1 100644 --- a/dotcom-rendering/src/footballMatchV2.ts +++ b/dotcom-rendering/src/footballMatchV2.ts @@ -235,7 +235,7 @@ const parseMatchResult = ( name: cleanTeamName(feResult.awayTeam.name), paID: feResult.awayTeam.id, score: awayScore, - scorers: parseScorers(feResult.homeTeam.scorers), + scorers: parseScorers(feResult.awayTeam.scorers), teamUrl: feResult.awayTeam.teamUrl, }, comment: feResult.comments, From 6e2bdf5244ecc2cdb312d22d764f36a7462a7dd7 Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy <1731150+Jakeii@users.noreply.github.com> Date: Wed, 26 Aug 2026 14:41:53 +0100 Subject: [PATCH 4/4] refine colours --- .../FootballMatchHeader/FootballMatchHeader.tsx | 12 +++++++++--- .../src/components/FootballMatchHeader/colours.ts | 7 +++++++ dotcom-rendering/src/paletteDeclarations.ts | 12 ++++++++---- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx b/dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx index cb1a836976c..d2c034d127b 100644 --- a/dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx +++ b/dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx @@ -39,7 +39,13 @@ import { BigNumber } from '../BigNumber'; import { FootballCrest } from '../FootballCrest'; import { MatchHeaderFallback } from '../MatchHeaderFallback'; import { Placeholder } from '../Placeholder'; -import { background, border, primaryText, secondaryText } from './colours'; +import { + background, + border, + primaryText, + scoreSecondaryText, + secondaryText, +} from './colours'; import { type HeaderData, parse as parseHeaderData } from './headerData'; import { Hr } from './Hr'; import { Notifications } from './Notifications'; @@ -531,14 +537,14 @@ const Scorers = (props: { {name} diff --git a/dotcom-rendering/src/components/FootballMatchHeader/colours.ts b/dotcom-rendering/src/components/FootballMatchHeader/colours.ts index 66ef271168f..6c6a5a2f795 100644 --- a/dotcom-rendering/src/components/FootballMatchHeader/colours.ts +++ b/dotcom-rendering/src/components/FootballMatchHeader/colours.ts @@ -16,6 +16,13 @@ export const secondaryText = (matchKind: FootballMatch['kind']): ColourName => ? '--football-match-header-live-primary-text' : '--football-match-header-fixture-result-secondary-text'; +export const scoreSecondaryText = ( + matchKind: FootballMatch['kind'], +): ColourName => + matchKind === 'Live' + ? '--football-match-header-live-score-secondary-text' + : '--football-match-header-fixture-result-score-secondary-text'; + export const background = (matchKind: FootballMatch['kind']): ColourName => matchKind === 'Live' ? '--football-match-header-live-background' diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index 9ee0fc3bbf5..5cf67285f41 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -7445,6 +7445,10 @@ const paletteColours = { light: () => sourcePalette.neutral[100], dark: () => sourcePalette.neutral[100], }, + '--football-match-header-fixture-result-score-secondary-text': { + light: () => `${sourcePalette.neutral[100]}99`, + dark: () => `${sourcePalette.neutral[100]}99`, + }, '--football-match-header-fixture-result-secondary-text': { light: () => sourcePalette.sport[700], dark: () => sourcePalette.sport[700], @@ -7465,14 +7469,14 @@ const paletteColours = { light: () => sourcePalette.neutral[7], dark: () => sourcePalette.neutral[7], }, + '--football-match-header-live-score-secondary-text': { + light: () => `${sourcePalette.neutral[7]}ab`, + dark: () => `${sourcePalette.neutral[7]}ab`, + }, '--football-match-header-live-selected': { light: () => sourcePalette.neutral[7], dark: () => sourcePalette.neutral[7], }, - '--football-match-header-scorer-text': { - light: () => `${sourcePalette.neutral[100]}99`, - dark: () => `${sourcePalette.neutral[100]}99`, - }, '--football-match-hover': { light: () => sourcePalette.neutral[93], dark: () => sourcePalette.neutral[38],