small tweaks

Author: williammead

dotcom-rendering/src/components/CricketMatchStat.tsx

@@ -87,15 +87,6 @@ const numericCellStyles = css`
 	text-align: left;
 `;
 
-const fixedColStyles = css`
-	flex-shrink: 0;
-`;
-
-const batColWidthStyles = css`
-	${fixedColStyles}
-	width: 42px;
-`;
-
 const howOutStyles = css`
 	color: ${palette('--football-match-info-team-number')};
 `;
@@ -106,37 +97,19 @@ export const CricketMatchStatNotOutBatters = ({
 	notOutBatters: Batter[];
 }) => {
 	const currentBatters = notOutBatters.filter(
-		(batter) => !batter.out && (batter.onStrike || batter.nonStrike),
+		(batter) => batter.onStrike || batter.nonStrike,
 	);
 	return (
 		<div css={[containerCss, desktopPaddingCss]}>
-			<span
-				css={css`
-					${visuallyHidden}
-				`}
-			>
-				Not Out Batters
-			</span>
+			<span css={visuallyHiddenStyles}>Current Batters</span>
 			<table css={tableStyles}>
 				<thead>
 					<tr>
 						<th css={tableHeadCellStyles}>Batter</th>
-						<th
-							css={[
-								tableHeadCellStyles,
-								numericCellStyles,
-								batColWidthStyles,
-							]}
-						>
+						<th css={[tableHeadCellStyles, numericCellStyles]}>
 							Runs
 						</th>
-						<th
-							css={[
-								tableHeadCellStyles,
-								numericCellStyles,
-								batColWidthStyles,
-							]}
-						>
+						<th css={[tableHeadCellStyles, numericCellStyles]}>
 							Balls
 						</th>
 					</tr>
@@ -158,22 +131,10 @@ export const CricketMatchStatNotOutBatters = ({
 										</div>
 									</div>
 								</th>
-								<td
-									css={[
-										tableCellStyles,
-										numericCellStyles,
-										batColWidthStyles,
-									]}
-								>
+								<td css={[tableCellStyles, numericCellStyles]}>
 									{batter.runs}
 								</td>
-								<td
-									css={[
-										tableCellStyles,
-										numericCellStyles,
-										batColWidthStyles,
-									]}
-								>
+								<td css={[tableCellStyles, numericCellStyles]}>
 									{batter.ballsFaced}
 								</td>
 							</tr>

dotcom-rendering/src/components/CricketMiniMatchStats.stories.tsx

@@ -41,7 +41,7 @@ const meta = preview.meta({
 });
 
 const feMatchStatsSummaryData: FECricketMatchStatsSummary = {
-	status: 'In Play',
+	status: 'abandoned',
 	currentBattingTeam: 'England',
 	notOutBatters: [
 		{
@@ -68,6 +68,18 @@ const feMatchStatsSummaryData: FECricketMatchStatsSummary = {
 			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,
+		},
 	],
 };
 

dotcom-rendering/src/components/CricketMiniMatchStats.tsx

@@ -105,12 +105,15 @@ export const CricketMiniMatchStats = (props: Props) => {
 	);
 };
 
+const isMatchOver = (matchStatus: string | undefined) =>
+	matchStatus === 'result' || matchStatus === 'abandoned';
+
 const swrOptions = (
 	refreshInterval: number,
 ): SWRConfiguration<CricketMatchStatsSummary> => ({
 	errorRetryCount: 1,
 	refreshInterval: (latestData: CricketMatchStatsSummary | undefined) =>
-		latestData?.status === 'FT' ? 0 : refreshInterval,
+		isMatchOver(latestData?.status) ? 0 : refreshInterval,
 });
 
 const fetcher =