Add FootballMiniMatchStats components

Author: jamesmockett

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

@@ -20,7 +20,7 @@ const meta = {
 	],
 	parameters: {
 		viewport: {
-			defaultViewport: 'mobile',
+			defaultViewport: 'mobileMedium',
 		},
 	},
 } satisfies Meta<typeof FootballMatchStat>;

dotcom-rendering/src/components/FootballMatchStat.tsx

@@ -50,7 +50,7 @@ const barCss = css`
 	border-radius: 8px;
 `;
 
-export type MatchStatistic = {
+type MatchStatistic = {
 	teamName: string;
 	teamColour: string;
 	value: number;

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

@@ -0,0 +1,51 @@
+import { css } from '@emotion/react';
+import { palette, space } from '@guardian/source/foundations';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { FootballMiniMatchStats } from './FootballMiniMatchStats';
+
+const meta = {
+	title: 'Components/Football Mini Match Stats',
+	component: FootballMiniMatchStats,
+	decorators: [
+		(Story) => (
+			<div
+				css={css`
+					padding: ${space[4]}px;
+					background-color: ${palette.neutral[97]};
+				`}
+			>
+				<Story />
+			</div>
+		),
+	],
+	parameters: {
+		viewport: {
+			defaultViewport: 'mobileMedium',
+		},
+	},
+} satisfies Meta<typeof FootballMiniMatchStats>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FootballMiniMatchStatsMobile = {
+	args: {
+		homeTeam: {
+			name: 'Manchester United',
+			colour: '#da020e',
+		},
+		awayTeam: {
+			name: 'Arsenal',
+			colour: '#023474',
+		},
+		stats: [
+			{
+				label: 'Possession',
+				homeValue: 39,
+				awayValue: 61,
+				showPercentage: true,
+			},
+			{ label: 'Goal Attempts', homeValue: 7, awayValue: 4 },
+		],
+	},
+} satisfies Story;

dotcom-rendering/src/components/FootballMiniMatchStats.tsx

@@ -0,0 +1,69 @@
+import { css } from '@emotion/react';
+import { palette } from '@guardian/source/foundations';
+import {
+	LinkButton,
+	SvgArrowRightStraight,
+} from '@guardian/source/react-components';
+import { FootballMatchStat } from './FootballMatchStat';
+
+const containerCss = css`
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+`;
+
+type FootballTeam = {
+	name: string;
+	colour: string;
+};
+
+type MatchStatistic = {
+	label: string;
+	homeValue: number;
+	awayValue: number;
+	showPercentage?: boolean;
+};
+
+type Props = {
+	homeTeam: FootballTeam;
+	awayTeam: FootballTeam;
+	stats: MatchStatistic[];
+};
+
+export const FootballMiniMatchStats = ({
+	homeTeam,
+	awayTeam,
+	stats,
+}: Props) => {
+	console.log(homeTeam, awayTeam, stats);
+	return (
+		<div css={containerCss}>
+			{stats.map((stat) => (
+				<FootballMatchStat
+					key={stat.label}
+					label={stat.label}
+					home={{
+						teamName: homeTeam.name,
+						teamColour: homeTeam.colour,
+						value: stat.homeValue,
+					}}
+					away={{
+						teamName: awayTeam.name,
+						teamColour: awayTeam.colour,
+						value: stat.awayValue,
+					}}
+					showPercentage={stat.showPercentage}
+				/>
+			))}
+			<LinkButton
+				href="#"
+				size="small"
+				icon={<SvgArrowRightStraight />}
+				iconSide="right"
+				theme={{ backgroundPrimary: palette.sport[400] }}
+			>
+				More stats, line-ups and tables
+			</LinkButton>
+		</div>
+	);
+};