Add match info component

Author: marjisound

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

@@ -1,6 +1,10 @@
+import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../.storybook/modes';
+import { table } from '../../fixtures/manual/footballTable';
 import { matchStats } from '../../fixtures/manual/matchStats';
+import { grid } from '../grid';
+import { palette } from '../palette';
 import { FootballMatchInfo as FootballMatchInfoComponent } from './FootballMatchInfo';
 
 const meta = {
@@ -13,13 +17,36 @@ const meta = {
 			},
 		},
 	},
+	decorators: [
+		(Story) => (
+			<div
+				css={css`
+					background-color: ${palette(
+						'--football-match-info-background',
+					)};
+					${grid.paddedContainer}
+				`}
+			>
+				<div
+					css={css`
+						${grid.column.centre}
+						padding-top: 10px;
+						padding-bottom: 10px;
+					`}
+				>
+					<Story />
+				</div>
+			</div>
+		),
+	],
 } satisfies Meta<typeof FootballMatchInfoComponent>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const FootballMatchSummary = {
+export const FootballMatchInfo = {
 	args: {
 		match: matchStats,
+		table,
 	},
 } satisfies Story;

dotcom-rendering/src/components/FootballMatchInfo.tsx

@@ -1,42 +1,115 @@
 import { css } from '@emotion/react';
-import { from } from '@guardian/source/foundations';
-import { type FootballMatchStats } from '../footballMatchStats';
+import type {
+	FootballMatchStats,
+	FootballMatchTeamWithStats,
+} from '../footballMatchStats';
+import type { FootballTable as FootballTableData } from '../footballTables';
 import { grid } from '../grid';
-import { palette } from '../palette';
+import { FootballMatchStat } from './FootballMatchStat';
+import { LeagueTable } from './LeagueTable';
 import { Lineups } from './Lineups';
 
-const gridStyles = css`
-	${grid.paddedContainer}
-	position: relative;
-	${from.tablet} {
-		&::before,
-		&::after {
-			content: '';
-			position: absolute;
-			border-left: 1px solid ${palette('--article-border')};
-			z-index: 1;
-			top: 0;
-			bottom: 0;
-		}
-
-		&::after {
-			right: 0;
-		}
-	}
-`;
-
 type Props = {
 	match: FootballMatchStats;
+	table?: FootballTableData;
 };
 
-export const FootballMatchInfo = ({ match }: Props) => (
-	<main id="maincontent" css={gridStyles}>
-		<div
-			css={css`
-				${grid.column.centre}
-			`}
-		>
-			<Lineups matchStats={match} />
-		</div>
-	</main>
+function teamHasStats({
+	shotsOffTarget,
+	shotsOnTarget,
+	fouls,
+	corners,
+}: FootballMatchTeamWithStats) {
+	return !(
+		shotsOffTarget === 0 &&
+		shotsOnTarget === 0 &&
+		fouls === 0 &&
+		corners === 0
+	);
+}
+
+export const FootballMatchInfo = ({ match, table }: Props) => {
+	const showStats =
+		teamHasStats(match.homeTeam) && teamHasStats(match.awayTeam);
+	const showLineups =
+		match.homeTeam.players.length > 0 && match.awayTeam.players.length > 0;
+	return (
+		<section aria-label={'match-info'}>
+			{showStats && (
+				<>
+					<StatsContainer
+						label="Possession"
+						match={match}
+						homeValue={match.homeTeam.possession}
+						awayValue={match.awayTeam.possession}
+					/>
+					{/* Add Goal Attempts here */}
+					<StatsContainer
+						label="Corrners"
+						match={match}
+						homeValue={match.homeTeam.corners}
+						awayValue={match.awayTeam.corners}
+					/>
+					<StatsContainer
+						label="Fouls"
+						match={match}
+						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>
+			)}
+		</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/Lineups.tsx

@@ -150,7 +150,6 @@ const PlayerList = ({
 
 const sectionStyles = css`
 	border: 1px solid ${palette('--football-match-stat-border')};
-	margin: ${space[2]}px;
 	border-radius: 6px;
 
 	padding-top: 6px;