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 : (
[from.leftCol]: textSans15Object,
}}
>
- {props.scorers.map((scorer) => (
- - {scorer}
- ))}
+ {props.scorers.map(({ name, time, otherInfo }) => {
+ return (
+ -
+ {name}
+
+ {time && (
+
+ {time}'
+
+ )}
+ {otherInfo && ` ${otherInfo}`}
+
+
+ );
+ })}
);
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],