=>
+ getHeaderData(url)
+ .then(parseHeaderData)
+ .then((result) => {
+ if (!result.ok) {
+ log('dotcom', result.error);
+ throw new Error();
+ } else {
+ return result.value;
+ }
+ })
+ .catch(() => {
+ log('dotcom', 'Failed to fetch match header json');
+ throw new Error();
+ });
+
const StatusLine = (props: { match: CricketMatch; edition: EditionId }) => (
{
flex: '1 1 50%',
wordBreak: 'break-word',
borderLeftStyle: 'solid',
+ borderLeftColor: 'var(--border-left-colour)',
'&:last-of-type': {
paddingLeft: space[2],
borderLeftWidth: 1,
},
[from.leftCol]: {
- paddingLeft: space[2],
- borderLeftWidth: 1,
paddingTop: space[3],
+ position: 'relative',
+ '&:first-of-type::before': {
+ content: '""',
+ top: 0,
+ left: -10,
+ width: 1,
+ backgroundColor: 'var(--border-left-colour)',
+ position: 'absolute',
+ height: '100%',
+ },
},
}}
style={{
- borderLeftColor: palette(border(props.match.kind)),
+ '--border-left-colour': palette(border(props.match.kind)),
}}
>
@@ -271,13 +411,20 @@ const Team = (props: { team: CricketTeam; match: CricketMatch }) => {
innings.map((inning, index) => (
- {!!inning.overs && (
+ {!!inning.inningsTotals.overs && (
<>
-
+
{
),
}}
>
- {inning.overs} overs
+ {inning.inningsTotals.overs} overs
>
)}
@@ -313,13 +460,19 @@ const Team = (props: { team: CricketTeam; match: CricketMatch }) => {
);
};
-const EndOfInningReason = (props: { inning: InningsOverview }) => {
+const EndOfInningReason = (props: {
+ inning: {
+ wickets: number;
+ declared: boolean;
+ forfeited: boolean;
+ };
+}) => {
const styles = {
...textSans14Object,
marginRight: space[1],
};
- if (props.inning.fallOfWickets === 10) {
+ if (props.inning.wickets === 10) {
return All out;
}
if (props.inning.declared) {
@@ -510,7 +663,7 @@ const crestUrl = (teamId: string): URL | undefined => {
* But in some cases, we just get the data about the result and need to generate
* a description from that.
*/
-const resultDescription = (result: Result): string => {
+const resultDescription = (result: CricketResult): string => {
if (result.description) {
return result.description;
}
@@ -546,7 +699,7 @@ const resultDescription = (result: Result): string => {
}
};
-const ResultLine = (props: { result: Result }) => {
+const ResultLine = (props: { result: CricketResult }) => {
const description = resultDescription(props.result);
return (
=> {
+ const feData = fromValibot(safeParse(feCricketMatchHeaderSchema, json));
+
+ if (!feData.ok) {
+ return error('Failed to validate match header json');
+ }
+
+ const parsedMatch = parseCricketMatchV2(feData.value.cricketMatch);
+
+ if (!parsedMatch.ok) {
+ return error('Failed to parse the match from the header json');
+ }
+
+ const maybeTabs = createTabs(feData.value, parsedMatch.value.kind);
+
+ if (!maybeTabs.ok) {
+ return error(
+ `The match header data contained an invalid ${maybeTabs.error.kind} URL`,
+ );
+ }
+
+ return ok({
+ match: parsedMatch.value,
+ tabs: maybeTabs.value,
+ });
+};
+
+type MatchURLError = {
+ kind: 'live' | 'report';
+};
+
+const createTabs = (
+ feData: FECricketMatchHeader,
+ matchKind: CricketMatch['kind'],
+): Result
=> {
+ const reportURL =
+ feData.reportURL !== undefined
+ ? safeParseURL(feData.reportURL)
+ : undefined;
+ const liveURL =
+ feData.liveURL !== undefined ? safeParseURL(feData.liveURL) : undefined;
+ if (reportURL !== undefined && !reportURL.ok) {
+ return error({ kind: 'report' });
+ }
+
+ if (liveURL !== undefined && !liveURL.ok) {
+ return error({ kind: 'live' });
+ }
+
+ return ok({
+ matchKind,
+ sportKind: 'cricket',
+ reportURL: reportURL?.value,
+ liveURL: liveURL?.value,
+ });
+};
diff --git a/dotcom-rendering/src/components/CricketMatchHeaderTabsDemo.stories.tsx b/dotcom-rendering/src/components/CricketMatchHeaderTabsDemo.stories.tsx
new file mode 100644
index 00000000000..2a894066a7e
--- /dev/null
+++ b/dotcom-rendering/src/components/CricketMatchHeaderTabsDemo.stories.tsx
@@ -0,0 +1,156 @@
+import type { ComponentProps } from 'react';
+import { expect, userEvent, waitFor } from 'storybook/test';
+import { SWRConfig } from 'swr';
+import { allModes } from '../../.storybook/modes';
+import preview from '../../.storybook/preview';
+import { liveMatch, resultMatch } from '../../fixtures/manual/cricketMatch';
+import type { FECricketMatchHeader } from '../frontend/feCricketMatchHeader';
+import type { ArticleFormat } from '../lib/articleFormat';
+import type { ArticleDeprecated } from '../types/article';
+import { CricketMatchHeader } from './CricketMatchHeader/CricketMatchHeader';
+
+const meta = preview.meta({
+ component: CricketMatchHeader,
+ title: 'Components/CricketMatchHeaderTabsDemo',
+ parameters: {
+ chromatic: {
+ modes: {
+ 'light leftCol': allModes['light leftCol'],
+ },
+ },
+ },
+ decorators: [
+ (Story) => (
+ new Map(),
+ refreshInterval: 100,
+ dedupingInterval: 100,
+ }}
+ >
+
+
+ Initial Tab content
+
+
+ ),
+ ],
+});
+
+const baseArgs = {
+ matchHeaderURL:
+ 'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
+ selectedTab: 'live' as 'info' | 'live' | 'report',
+ edition: 'UK',
+ tabContentId: 'cricket-tab-content',
+ refreshInterval: 60_000,
+ getHeaderData: () =>
+ getMockData({
+ cricketMatch: liveMatch,
+ liveURL:
+ 'https://www.theguardian.com/sport/live/2026/jan/27/australia-v-england-second-test-day-two-live-cricket',
+ }),
+ article: {} as ArticleDeprecated,
+ format: {} as ArticleFormat,
+} satisfies ComponentProps;
+
+const liveArgs = {
+ ...baseArgs,
+ selectedTab: 'info',
+} satisfies ComponentProps;
+
+export const CricketScorecardPageNewFixture = meta.story({
+ name: 'Live',
+ args: baseArgs,
+});
+
+export const CricketScorecardPageNewLive = meta.story({
+ name: 'Scorecard',
+ args: liveArgs,
+});
+
+export const ClickScorecardTab = meta.story({
+ name: 'Live -> Scorecard',
+ args: { ...liveArgs, selectedTab: 'live' },
+ play: async ({ canvas }) => {
+ await canvas.findByText('Second Test Match');
+
+ // Click the Scorecard tab button
+ const scorecardTab = canvas.getByRole('button', { name: 'Scorecard' });
+ await userEvent.click(scorecardTab);
+
+ // Check that the scorecard renders in the main content element
+ await expect(
+ await canvas.findByRole('heading', {
+ name: 'Lineups',
+ }),
+ ).toBeInTheDocument();
+ },
+});
+
+let matchType = 'live' as 'live' | 'result';
+
+export const UpdateScorecardTab = meta.story({
+ name: 'Scorecard Update',
+ beforeEach: () => {
+ matchType = 'live';
+ },
+ args: {
+ ...liveArgs,
+ getHeaderData: async () => {
+ const value = (await getChangingHeaderData.next()).value;
+ return value;
+ },
+ refreshInterval: 100,
+ },
+ play: async ({ canvas }) => {
+ await canvas.findByRole('heading', {
+ name: 'New Zealand first innings',
+ });
+
+ await expect(
+ canvas.queryByText('England win by 115 runs'),
+ ).not.toBeInTheDocument();
+
+ await expect(
+ canvas.queryByRole('rowheader', { name: /Harry Brook/ })
+ ?.nextSibling!.textContent,
+ ).toBe('Yet to Bat');
+
+ matchType = 'result';
+
+ await waitFor(() => {
+ void expect(
+ canvas.getByText('England win by 115 runs'),
+ ).toBeInTheDocument();
+ });
+
+ await waitFor(() => {
+ void expect(
+ canvas.queryByRole('rowheader', { name: /Harry Brook/ })
+ ?.nextSibling!.textContent,
+ ).toBe('lbw b Henry');
+ });
+ },
+});
+
+const getMockData = (data: FECricketMatchHeader) => Promise.resolve(data);
+
+const getChangingHeaderData = (async function* () {
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- This is a test generator function
+ while (true) {
+ if (matchType === 'live') {
+ yield getMockData({
+ cricketMatch: liveMatch,
+ liveURL:
+ 'https://www.theguardian.com/sport/live/2026/jan/27/australia-v-england-second-test-day-two-live-cricket',
+ });
+ } else {
+ yield getMockData({
+ cricketMatch: resultMatch,
+ liveURL:
+ 'https://www.theguardian.com/sport/live/2026/jan/27/australia-v-england-second-test-day-two-live-cricket',
+ });
+ }
+ }
+})();
diff --git a/dotcom-rendering/src/components/CricketMatchHeaderWrapper.island.tsx b/dotcom-rendering/src/components/CricketMatchHeaderWrapper.island.tsx
new file mode 100644
index 00000000000..e27a988198c
--- /dev/null
+++ b/dotcom-rendering/src/components/CricketMatchHeaderWrapper.island.tsx
@@ -0,0 +1,15 @@
+import type { CricketMatchHeaderProps } from './CricketMatchHeader/CricketMatchHeader';
+import { CricketMatchHeader } from './CricketMatchHeader/CricketMatchHeader';
+
+export const CricketMatchHeaderWrapper = (props: CricketMatchHeaderProps) => {
+ return (
+
+ );
+};
+
+const getHeaderData = (url: string): Promise =>
+ fetch(url).then((res) => res.json());
diff --git a/dotcom-rendering/src/components/CricketMatchStat.tsx b/dotcom-rendering/src/components/CricketMatchStat.tsx
new file mode 100644
index 00000000000..84e2927e3be
--- /dev/null
+++ b/dotcom-rendering/src/components/CricketMatchStat.tsx
@@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+import {
+ from,
+ space,
+ textSans14,
+ textSans15,
+ textSansBold14,
+ textSansBold15,
+ visuallyHidden,
+} from '@guardian/source/foundations';
+import type { Batter } from '../cricketMatchV2';
+import { palette } from '../palette';
+
+const containerCss = css`
+ position: relative;
+ padding: 5px 10px 10px;
+ color: ${palette('--football-match-stat-text')};
+ border: 1px solid ${palette('--football-match-stat-border')};
+ border-radius: 6px;
+`;
+
+const desktopPaddingCss = css`
+ ${from.desktop} {
+ padding-bottom: 14px;
+ }
+`;
+
+const visuallyHiddenStyles = css`
+ ${visuallyHidden}
+`;
+
+const responsiveTextSans = css`
+ ${textSans14}
+ ${from.desktop} {
+ ${textSans15}
+ }
+`;
+
+const responsiveTextSansBold = css`
+ ${textSansBold14}
+ ${from.desktop} {
+ ${textSansBold15}
+ }
+`;
+
+const tableStyles = css`
+ width: 100%;
+ border-collapse: collapse;
+ ${responsiveTextSans}
+`;
+
+const cellBaseStyles = css`
+ padding: ${space[2]}px ${space[3]}px ${space[1]}px 0;
+ text-align: left;
+ vertical-align: middle;
+`;
+
+const tableHeadCellStyles = css`
+ ${cellBaseStyles}
+ ${responsiveTextSansBold}
+ color: ${palette('--football-match-stat-text')};
+`;
+
+const tableCellStyles = css`
+ ${cellBaseStyles}
+ ${responsiveTextSans}
+`;
+
+const tableRowHeaderStyles = css`
+ ${cellBaseStyles}
+ display: flex;
+ align-items: center;
+ ${responsiveTextSans}
+`;
+
+const batterNameTextStyles = css`
+ display: flex;
+ flex-direction: column;
+`;
+
+const tableRowStyles = css`
+ border-top: 1px solid ${palette('--football-match-stat-border')};
+`;
+
+const numericCellStyles = css`
+ white-space: nowrap;
+ text-align: left;
+`;
+
+const howOutStyles = css`
+ color: ${palette('--football-match-info-team-number')};
+`;
+
+export const CricketMatchStatNotOutBatters = ({
+ notOutBatters,
+}: {
+ notOutBatters: Batter[];
+}) => {
+ const currentBatters = notOutBatters.filter(
+ (batter) => batter.onStrike || batter.nonStrike,
+ );
+ return (
+
+
Current Batters
+
+
+
+ | Batter |
+
+ Runs
+ |
+
+ Balls
+ |
+
+
+
+ {currentBatters.map((batter) => {
+ return (
+
+
+
+ {batter.onStrike
+ ? '(on strike)'
+ : '(at crease)'}
+
+
+ {batter.name}
+
+ {batter.howOut}
+
+
+ |
+
+ {batter.runs}
+ |
+
+ {batter.ballsFaced}
+ |
+
+ );
+ })}
+
+
+
+ );
+};
diff --git a/dotcom-rendering/src/components/CricketMiniMatchStats.stories.tsx b/dotcom-rendering/src/components/CricketMiniMatchStats.stories.tsx
new file mode 100644
index 00000000000..3b56f24846b
--- /dev/null
+++ b/dotcom-rendering/src/components/CricketMiniMatchStats.stories.tsx
@@ -0,0 +1,100 @@
+import { css } from '@emotion/react';
+import { breakpoints, from } from '@guardian/source/foundations';
+import preview from '../../.storybook/preview';
+import type { FECricketMatchStatsSummary } from '../frontend/feCricketMatchPage';
+import { palette } from '../palette';
+import { CricketMiniMatchStats as CricketMiniMatchStatsComponent } from './CricketMiniMatchStats';
+
+const gridCss = css`
+ background-color: ${palette('--football-live-blog-background')};
+ /**
+ * Extremely simplified live blog grid layout as we're only interested in
+ * the 240px wide left column added at the desktop breakpoint.
+ * dotcom-rendering/src/layouts/LiveLayout.tsx
+ */
+ ${from.desktop} {
+ display: grid;
+ grid-column-gap: 20px;
+ grid-template-columns: 240px 1fr;
+ }
+`;
+
+const meta = preview.meta({
+ title: 'Components/Cricket Mini Match Stats',
+ component: CricketMiniMatchStatsComponent,
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+ parameters: {
+ chromatic: {
+ viewports: [
+ breakpoints.mobileMedium,
+ breakpoints.tablet,
+ breakpoints.wide,
+ ],
+ },
+ },
+});
+
+const feMatchStatsSummaryData: FECricketMatchStatsSummary = {
+ status: 'abandoned',
+ currentBattingTeam: 'England',
+ notOutBatters: [
+ {
+ name: 'Tom Latham',
+ order: 1,
+ ballsFaced: 214,
+ runs: 151,
+ fours: 15,
+ sixes: 0,
+ out: false,
+ howOut: 'not out',
+ onStrike: false,
+ nonStrike: true,
+ },
+ {
+ name: 'Devon Conway',
+ order: 2,
+ ballsFaced: 224,
+ runs: 157,
+ fours: 22,
+ sixes: 3,
+ out: false,
+ howOut: 'not out',
+ onStrike: true,
+ nonStrike: false,
+ },
+ {
+ name: 'Devon Conway',
+ order: 2,
+ ballsFaced: 224,
+ runs: 157,
+ fours: 22,
+ sixes: 3,
+ out: false,
+ howOut: 'not out',
+ onStrike: false,
+ nonStrike: false,
+ },
+ ],
+};
+
+const getMockData = (data: FECricketMatchStatsSummary) =>
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(data);
+ }, 1000);
+ });
+
+export const CricketMiniMatchStats = meta.story({
+ args: {
+ matchStatsUrl:
+ 'https://api.nextgen.guardianapps.co.uk/sport/cricket/match-stats/2026-06-25/england-cricket-team.json',
+ getMatchStatsData: () => getMockData(feMatchStatsSummaryData),
+ refreshInterval: 16_000,
+ },
+});
diff --git a/dotcom-rendering/src/components/CricketMiniMatchStats.tsx b/dotcom-rendering/src/components/CricketMiniMatchStats.tsx
new file mode 100644
index 00000000000..fe70ee8438d
--- /dev/null
+++ b/dotcom-rendering/src/components/CricketMiniMatchStats.tsx
@@ -0,0 +1,153 @@
+import { css } from '@emotion/react';
+import { log } from '@guardian/libs';
+import { from } from '@guardian/source/foundations';
+import {
+ LinkButton,
+ SvgArrowRightStraight,
+} from '@guardian/source/react-components';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
+import { safeParse } from 'valibot';
+import type { CricketMatchStatsSummary } from '../cricketMatchV2';
+import { parseMatchStatsSummary } from '../cricketMatchV2';
+import { feCricketMatchStatsSummarySchema } from '../frontend/feCricketMatchPage';
+import type { Result } from '../lib/result';
+import { error, fromValibot, ok } from '../lib/result';
+import { palette } from '../palette';
+import { CricketMatchStatNotOutBatters } from './CricketMatchStat';
+import { Placeholder } from './Placeholder';
+
+const containerCss = css`
+ isolation: isolate;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 10px;
+ background-color: ${palette('--football-live-blog-background')};
+ ${from.mobileLandscape} {
+ padding: 20px;
+ }
+ ${from.desktop} {
+ padding-top: 24px;
+ padding-right: 0;
+ }
+`;
+
+const buttonTextCss = css`
+ ${from.desktop} {
+ display: none;
+ }
+`;
+
+const buttonTextShortCss = css`
+ display: none;
+ ${from.desktop} {
+ display: inline;
+ }
+`;
+
+type Props = {
+ matchStatsUrl: string;
+ getMatchStatsData: (url: string) => Promise;
+ refreshInterval: number;
+};
+
+export const CricketMiniMatchStats = (props: Props) => {
+ const { data, error: swrError } = useSWR(
+ props.matchStatsUrl,
+ fetcher(props.getMatchStatsData),
+ swrOptions(props.refreshInterval),
+ );
+
+ if (swrError) {
+ return null;
+ }
+
+ if (data === undefined) {
+ return (
+
+ );
+ }
+
+ if (data.notOutBatters == null) {
+ return null;
+ }
+
+ return (
+
+
+
+ }
+ iconSide="right"
+ theme={{
+ backgroundPrimary: palette(
+ '--football-match-stat-button-background',
+ ),
+ backgroundPrimaryHover: palette(
+ '--football-match-stat-button-background-hover',
+ ),
+ }}
+ >
+ View full scorecard
+ View full scorecard
+
+
+ );
+};
+
+const isMatchOver = (matchStatus: string | undefined) =>
+ matchStatus === 'result' || matchStatus === 'abandoned';
+
+const swrOptions = (
+ refreshInterval: number,
+): SWRConfiguration => ({
+ errorRetryCount: 1,
+ refreshInterval: (latestData: CricketMatchStatsSummary | undefined) =>
+ isMatchOver(latestData?.status) ? 0 : refreshInterval,
+});
+
+const fetcher =
+ (getMatchStatsData: Props['getMatchStatsData']) =>
+ (url: string): Promise =>
+ getMatchStatsData(url)
+ .then(parseData)
+ .then((result) => {
+ if (!result.ok) {
+ log('dotcom', result.error);
+ throw new Error();
+ } else {
+ return result.value;
+ }
+ })
+ .catch(() => {
+ log('dotcom', 'Failed to fetch math stats summary data');
+ throw new Error();
+ });
+
+const parseData = (json: unknown): Result => {
+ const feData = fromValibot(
+ safeParse(feCricketMatchStatsSummarySchema, json),
+ );
+
+ if (!feData.ok) {
+ return error('Failed to validate match stats summary data');
+ }
+
+ const parsedMatchStats = parseMatchStatsSummary(feData.value);
+
+ if (!parsedMatchStats.ok) {
+ return error('Failed to parse match stats summary');
+ }
+
+ return ok(parsedMatchStats.value);
+};
diff --git a/dotcom-rendering/src/components/CricketMiniMatchStatsWrapper.island.tsx b/dotcom-rendering/src/components/CricketMiniMatchStatsWrapper.island.tsx
new file mode 100644
index 00000000000..691ca75f4b4
--- /dev/null
+++ b/dotcom-rendering/src/components/CricketMiniMatchStatsWrapper.island.tsx
@@ -0,0 +1,17 @@
+import { CricketMiniMatchStats } from './CricketMiniMatchStats';
+
+export const CricketMiniMatchStatsWrapper = ({
+ matchStatsUrl,
+}: {
+ matchStatsUrl: string;
+}) => (
+
+);
+
+const getMatchStatsData = (url: string): Promise => {
+ return fetch(url).then((res) => res.json());
+};
diff --git a/dotcom-rendering/src/components/CricketScoreboard.test.tsx b/dotcom-rendering/src/components/CricketScoreboard.test.tsx
index e0c13eaf1ef..8f01d3fbf28 100644
--- a/dotcom-rendering/src/components/CricketScoreboard.test.tsx
+++ b/dotcom-rendering/src/components/CricketScoreboard.test.tsx
@@ -14,7 +14,8 @@ const defaultInnings: CricketInnings = {
const defaultMatch: CricketMatch = {
matchId: 'test',
- competitionName: 'test match',
+ competitionName: 'test match series',
+ stage: 'test match',
venueName: 'venue',
gameDate: '2021-06-30T14:00:00',
teams: [
diff --git a/dotcom-rendering/src/components/CricketScoreboard.tsx b/dotcom-rendering/src/components/CricketScoreboard.tsx
index 63dad8975a6..50dc9255ca7 100644
--- a/dotcom-rendering/src/components/CricketScoreboard.tsx
+++ b/dotcom-rendering/src/components/CricketScoreboard.tsx
@@ -144,7 +144,7 @@ export const CricketScoreboard = ({ scorecardUrl, match }: Props) => {
showDate={true}
showTime={false}
/>
- {match.competitionName}, {match.venueName}
+ {match.stage}, {match.venueName}
@@ -174,7 +174,7 @@ export const CricketScoreboard = ({ scorecardUrl, match }: Props) => {
- {match.competitionName}, {match.venueName}
+ {match.stage}, {match.venueName}
diff --git a/dotcom-rendering/src/components/CricketScorecardNew.stories.tsx b/dotcom-rendering/src/components/CricketScorecardNew.stories.tsx
index 187ecf6ff98..db4c84dec67 100644
--- a/dotcom-rendering/src/components/CricketScorecardNew.stories.tsx
+++ b/dotcom-rendering/src/components/CricketScorecardNew.stories.tsx
@@ -23,6 +23,8 @@ export const CricketScorecardNew = meta.story({
{
description: 'India first innings',
battingTeam: 'India',
+ declared: false,
+ forfeited: false,
inningsTotals: {
runs: 254,
overs: '49.0',
@@ -186,6 +188,8 @@ export const CricketScorecardNew = meta.story({
{
description: 'New Zealand first innings',
battingTeam: 'New Zealand',
+ declared: false,
+ forfeited: false,
inningsTotals: {
runs: 254,
overs: '49.0',
@@ -336,13 +340,7 @@ export const CricketScorecardNew = meta.story({
homeTeam: {
paID: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
name: 'India',
- },
- awayTeam: {
- paID: 'b2c3d4e5-f6a7-8901-bcde-f12345678901',
- name: 'New Zealand',
- },
- lineups: {
- homeTeam: [
+ lineup: [
'Rohit Sharma',
'Shubman Gill',
'Virat Kohli',
@@ -355,7 +353,11 @@ export const CricketScorecardNew = meta.story({
'Kuldeep Yadav',
'Varun Chakaravarthy',
],
- awayTeam: [
+ },
+ awayTeam: {
+ paID: 'b2c3d4e5-f6a7-8901-bcde-f12345678901',
+ name: 'New Zealand',
+ lineup: [
'Rachin Ravindra',
'Will Young',
'Kane Williamson',
diff --git a/dotcom-rendering/src/components/CricketScorecardNew.tsx b/dotcom-rendering/src/components/CricketScorecardNew.tsx
index 0e34a9c9d21..18d66d3aa08 100644
--- a/dotcom-rendering/src/components/CricketScorecardNew.tsx
+++ b/dotcom-rendering/src/components/CricketScorecardNew.tsx
@@ -12,12 +12,12 @@ import { type ReactNode } from 'react';
import type {
Batter,
Bowler,
+ CricketResult,
CricketTeam,
Extras,
FallOfWicket,
Innings,
InningsTotals,
- Result,
} from '../cricketMatchV2';
import { palette } from '../palette';
@@ -253,11 +253,11 @@ const teamNameStyles = css`
`;
const homeTeamNameStyles = css`
- color: ${palette('--cricket-scorecard-first-team-color')};
+ color: ${palette('--cricket-scorecard-first-team-lineup-color')};
`;
const awayTeamNameStyles = css`
- color: ${palette('--cricket-scorecard-second-team-color')};
+ color: ${palette('--cricket-scorecard-second-team-lineup-color')};
`;
const playerListStyles = css`
@@ -631,11 +631,9 @@ const FallOfWickets = ({
const LineupTeam = ({
team,
teamType,
- lineup,
}: {
team: CricketTeam;
teamType: 'homeTeam' | 'awayTeam';
- lineup: string[];
}) => (