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, 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..d2c034d127b 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 { @@ -37,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'; @@ -388,7 +396,10 @@ const Team = (props: { ) : null} {props.match.kind !== 'Fixture' ? ( - + ) : null} ); @@ -505,7 +516,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/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/footballMatchV2.ts b/dotcom-rendering/src/footballMatchV2.ts index 1fd1be24822..ef6b15e18e1 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.awayTeam.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..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,6 +7469,10 @@ 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],