Cricket mini match stats

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 (
+		<div css={[containerCss, desktopPaddingCss]}>
+			<span css={visuallyHiddenStyles}>Current Batters</span>
+			<table css={tableStyles}>
+				<thead>
+					<tr>
+						<th css={tableHeadCellStyles}>Batter</th>
+						<th css={[tableHeadCellStyles, numericCellStyles]}>
+							Runs
+						</th>
+						<th css={[tableHeadCellStyles, numericCellStyles]}>
+							Balls
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{currentBatters.map((batter) => {
+						return (
+							<tr key={batter.name} css={tableRowStyles}>
+								<th scope="row" css={tableRowHeaderStyles}>
+									<span css={visuallyHiddenStyles}>
+										{batter.onStrike
+											? '(on strike)'
+											: '(at crease)'}
+									</span>
+									<div css={batterNameTextStyles}>
+										{batter.name}
+										<div css={[howOutStyles]}>
+											{batter.howOut}
+										</div>
+									</div>
+								</th>
+								<td css={[tableCellStyles, numericCellStyles]}>
+									{batter.runs}
+								</td>
+								<td css={[tableCellStyles, numericCellStyles]}>
+									{batter.ballsFaced}
+								</td>
+							</tr>
+						);
+					})}
+				</tbody>
+			</table>
+		</div>
+	);
+};

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) => (
+			<div css={gridCss}>
+				<Story />
+			</div>
+		),
+	],
+	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,
+	},
+});