Show football scorer info correctly

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,

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',

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}
 		</span>
 		{props.match.kind !== 'Fixture' ? (
-			<Scorers scorers={props.match[props.team].scorers} />
+			<Scorers
+				scorers={props.match[props.team].scorers}
+				matchKind={props.match.kind}
+			/>
 		) : null}
 	</div>
 );
@@ -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 : (
 		<ul
 			css={{
@@ -514,9 +528,40 @@ const Scorers = (props: { scorers: string[] }) =>
 				[from.leftCol]: textSans15Object,
 			}}
 		>
-			{props.scorers.map((scorer) => (
-				<li key={scorer}>{scorer}</li>
-			))}
+			{props.scorers.map(({ name, time, otherInfo }) => {
+				return (
+					<li
+						key={name + time + otherInfo}
+						css={{ paddingBottom: space[1] }}
+					>
+						{name}
+						<span
+							css={css({
+								...textSans12Object,
+								display: 'inline-block',
+								marginLeft: space[1],
+								padding: `1px ${space[1]}px`,
+								border: `1px solid ${palette(border(props.matchKind))}`,
+								borderRadius: 10,
+								minWidth: space[6],
+								color: `${palette(scoreSecondaryText(props.matchKind))}`,
+								textAlign: 'center',
+							})}
+						>
+							{time && (
+								<span
+									css={css({
+										...textSansBold12Object,
+									})}
+								>
+									{time}&apos;
+								</span>
+							)}
+							{otherInfo && ` ${otherInfo}`}
+						</span>
+					</li>
+				);
+			})}
 		</ul>
 	);
 

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'

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<string, Date> => {
 	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<ParserError, MatchFixture> => {
@@ -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,

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],