Support layout variations for use in different contexts

Author: jamesmockett

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

@@ -60,3 +60,17 @@ export const ShownAsPercentage = {
 		showPercentage: true,
 	},
 } satisfies Story;
+
+export const RaisedLabelOnDesktop = {
+	args: {
+		...Default.args,
+		raiseLabelOnDesktop: true,
+	},
+} satisfies Story;
+
+export const LargeNumbersOnDesktop = {
+	args: {
+		...Default.args,
+		largeNumbersOnDesktop: true,
+	},
+} satisfies Story;

dotcom-rendering/src/components/FootballMatchStat.tsx

@@ -1,8 +1,11 @@
 import { css } from '@emotion/react';
 import {
+	from,
 	palette,
 	textSansBold14,
+	textSansBold15,
 	textSansBold20,
+	textSansBold28,
 	visuallyHidden,
 } from '@guardian/source/foundations';
 
@@ -23,18 +26,44 @@ const containerCss = css`
 `;
 
 const headerCss = css`
-	display: flex;
-	justify-content: space-between;
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas: 'home-stat label away-stat';
 `;
 
-const statCss = css`
-	${textSansBold20};
-	color: var(--match-stat-team-colour);
+const raiseLabelCss = css`
+	${from.desktop} {
+		grid-template-areas:
+			'label     label label'
+			'home-stat .     away-stat';
+	}
 `;
 
 const labelCss = css`
 	${textSansBold14};
+	grid-area: label;
+	justify-self: center;
 	color: ${palette.neutral[7]};
+	${from.desktop} {
+		${textSansBold15};
+	}
+`;
+
+const numberCss = css`
+	${textSansBold20};
+	grid-area: home-stat;
+	color: var(--match-stat-team-colour);
+`;
+
+const largeNumberCss = css`
+	${from.desktop} {
+		${textSansBold28}
+	}
+`;
+
+const awayStatCss = css`
+	grid-area: away-stat;
+	justify-self: end;
 `;
 
 const chartCss = css`
@@ -61,6 +90,8 @@ type Props = {
 	home: MatchStatistic;
 	away: MatchStatistic;
 	showPercentage?: boolean;
+	raiseLabelOnDesktop?: boolean;
+	largeNumbersOnDesktop?: boolean;
 };
 
 const formatValue = (value: number, showPercentage: boolean) =>
@@ -71,15 +102,18 @@ export const FootballMatchStat = ({
 	home,
 	away,
 	showPercentage = false,
+	raiseLabelOnDesktop = false,
+	largeNumbersOnDesktop = false,
 }: Props) => {
 	const homePercentage = (home.value / (home.value + away.value)) * 100;
 	const awayPercentage = (away.value / (home.value + away.value)) * 100;
 
 	return (
 		<div css={containerCss}>
-			<div css={headerCss}>
+			<div css={[headerCss, raiseLabelOnDesktop && raiseLabelCss]}>
+				<span css={labelCss}>{label}</span>
 				<span
-					css={statCss}
+					css={[numberCss, largeNumbersOnDesktop && largeNumberCss]}
 					style={{ '--match-stat-team-colour': home.teamColour }}
 				>
 					<span
@@ -91,9 +125,12 @@ export const FootballMatchStat = ({
 					</span>
 					{formatValue(home.value, showPercentage)}
 				</span>
-				<span css={labelCss}>{label}</span>
 				<span
-					css={statCss}
+					css={[
+						numberCss,
+						awayStatCss,
+						largeNumbersOnDesktop && largeNumberCss,
+					]}
 					style={{ '--match-stat-team-colour': away.teamColour }}
 				>
 					<span

dotcom-rendering/src/components/FootballMiniMatchStats.tsx

@@ -66,6 +66,7 @@ export const FootballMiniMatchStats = ({
 						value: stat.awayValue,
 					}}
 					showPercentage={stat.showPercentage}
+					raiseLabelOnDesktop={true}
 				/>
 			))}
 			<LinkButton