Football match goal attempts

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { FootballMatchGoalAttempts as FootballMatchGoalAttemptsComponent } from './FootballMatchStat';
+
+const meta = {
+	title: 'Components/Football Match Goal Attempts',
+	component: FootballMatchGoalAttemptsComponent,
+	parameters: {
+		layout: 'padded',
+	},
+} satisfies Meta<typeof FootballMatchGoalAttemptsComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FootballMatchGoalAttempts = {
+	args: {
+		homeTeam: {
+			name: 'Manchester United',
+			colour: '#da020e',
+		},
+		awayTeam: {
+			name: 'Arsenal',
+			colour: '#023474',
+		},
+		homeValues: {
+			offTarget: 6,
+			onTarget: 5,
+		},
+		awayValues: {
+			offTarget: 6,
+			onTarget: 2,
+		},
+	},
+} satisfies Story;

dotcom-rendering/src/components/FootballMatchInfo.tsx

@@ -4,8 +4,10 @@ import type {
 	FootballMatchTeamWithStats,
 } from '../footballMatchStats';
 import type { FootballTable as FootballTableData } from '../footballTables';
-import { grid } from '../grid';
-import { FootballMatchStat } from './FootballMatchStat';
+import {
+	FootballMatchGoalAttempts,
+	FootballMatchStat,
+} from './FootballMatchStat';
 import { LeagueTable } from './LeagueTable';
 import { Lineups } from './Lineups';
 
@@ -14,6 +16,12 @@ type Props = {
 	table?: FootballTableData;
 };
 
+const layoutCss = css`
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+`;
+
 function teamHasStats({
 	shotsOffTarget,
 	shotsOnTarget,
@@ -34,82 +42,71 @@ export const FootballMatchInfo = ({ match, table }: Props) => {
 	const showLineups =
 		match.homeTeam.players.length > 0 && match.awayTeam.players.length > 0;
 	return (
-		<section aria-label={'match-info'}>
+		<section aria-label={'match-info'} css={layoutCss}>
 			{showStats && (
 				<>
-					<StatsContainer
+					<FootballMatchStat
 						label="Possession"
-						match={match}
+						homeTeam={{
+							name: match.homeTeam.name,
+							colour: match.homeTeam.statsColour,
+						}}
+						awayTeam={{
+							name: match.awayTeam.name,
+							colour: match.awayTeam.statsColour,
+						}}
 						homeValue={match.homeTeam.possession}
 						awayValue={match.awayTeam.possession}
+						isPercentage={true}
+					/>
+					<FootballMatchGoalAttempts
+						homeTeam={{
+							name: match.homeTeam.name,
+							colour: match.homeTeam.statsColour,
+						}}
+						awayTeam={{
+							name: match.awayTeam.name,
+							colour: match.awayTeam.statsColour,
+						}}
+						homeValues={{
+							onTarget: match.homeTeam.shotsOnTarget,
+							offTarget: match.homeTeam.shotsOffTarget,
+						}}
+						awayValues={{
+							onTarget: match.awayTeam.shotsOnTarget,
+							offTarget: match.awayTeam.shotsOffTarget,
+						}}
 					/>
-					{/* Add Goal Attempts here */}
-					<StatsContainer
-						label="Corrners"
-						match={match}
+					<FootballMatchStat
+						label="Corners"
+						homeTeam={{
+							name: match.homeTeam.name,
+							colour: match.homeTeam.statsColour,
+						}}
+						awayTeam={{
+							name: match.awayTeam.name,
+							colour: match.awayTeam.statsColour,
+						}}
 						homeValue={match.homeTeam.corners}
 						awayValue={match.awayTeam.corners}
 					/>
-					<StatsContainer
+					<FootballMatchStat
 						label="Fouls"
-						match={match}
+						homeTeam={{
+							name: match.homeTeam.name,
+							colour: match.homeTeam.statsColour,
+						}}
+						awayTeam={{
+							name: match.awayTeam.name,
+							colour: match.awayTeam.statsColour,
+						}}
 						homeValue={match.homeTeam.fouls}
 						awayValue={match.awayTeam.fouls}
 					/>
 				</>
 			)}
-
-			{showLineups && (
-				<div
-					css={css`
-						padding-bottom: 10px;
-					`}
-				>
-					<Lineups matchStats={match} />
-				</div>
-			)}
-			{table && (
-				<div
-					css={css`
-						padding-bottom: 10px;
-					`}
-				>
-					<LeagueTable table={table} />
-				</div>
-			)}
+			{showLineups && <Lineups matchStats={match} />}
+			{table && <LeagueTable table={table} />}
 		</section>
 	);
 };
-
-const StatsContainer = ({
-	label,
-	match,
-	homeValue,
-	awayValue,
-}: {
-	label: string;
-	match: FootballMatchStats;
-	homeValue: number;
-	awayValue: number;
-}) => (
-	<div
-		css={css`
-			${grid.column.centre}
-			padding-bottom: 10px;
-		`}
-	>
-		<FootballMatchStat
-			label={label}
-			home={{
-				teamName: match.homeTeam.name,
-				teamColour: match.homeTeam.statsColour,
-				value: homeValue,
-			}}
-			away={{
-				teamName: match.awayTeam.name,
-				teamColour: match.awayTeam.statsColour,
-				value: awayValue,
-			}}
-		/>
-	</div>
-);

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

@@ -33,47 +33,40 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
 	args: {
-		label: 'Goal Attempts',
-		home: {
-			teamName: 'Manchester United',
-			teamColour: '#da020e',
-			value: 7,
+		label: 'Goal attempts',
+		homeTeam: {
+			name: 'Manchester United',
+			colour: '#da020e',
 		},
-		away: {
-			teamName: 'Arsenal',
-			teamColour: '#023474',
-			value: 4,
+		awayTeam: {
+			name: 'Arsenal',
+			colour: '#023474',
 		},
+		homeValue: 7,
+		awayValue: 4,
 	},
 } satisfies Story;
 
 export const ShownAsPercentage = {
 	args: {
 		label: 'Possession',
-		home: {
-			teamName: 'West Ham',
-			teamColour: '#722642',
-			value: 39,
+		homeTeam: {
+			name: 'West Ham',
+			colour: '#722642',
 		},
-		away: {
-			teamName: 'Newcastle',
-			teamColour: '#383838',
-			value: 61,
+		awayTeam: {
+			name: 'Newcastle',
+			colour: '#383838',
 		},
-		showPercentage: true,
+		homeValue: 39,
+		awayValue: 61,
+		isPercentage: true,
 	},
 } satisfies Story;
 
-export const RaisedLabelOnDesktop = {
+export const CompactLayout = {
 	args: {
 		...Default.args,
-		raiseLabelOnDesktop: true,
-	},
-} satisfies Story;
-
-export const LargeNumbersOnDesktop = {
-	args: {
-		...Default.args,
-		largeNumbersOnDesktop: true,
+		layout: 'compact',
 	},
 } satisfies Story;