Move lineup available logic from match info page

Author: jamesmockett

dotcom-rendering/src/components/FootballMatchInfo.tsx

@@ -39,9 +39,6 @@ function teamHasStats({
 export const FootballMatchInfo = ({ matchStats, table }: Props) => {
 	const showStats =
 		teamHasStats(matchStats.homeTeam) && teamHasStats(matchStats.awayTeam);
-	const showLineups =
-		matchStats.homeTeam.players.length > 0 &&
-		matchStats.awayTeam.players.length > 0;
 	return (
 		<section aria-label={'match-info'} css={layoutCss}>
 			{showStats && (
@@ -106,7 +103,7 @@ export const FootballMatchInfo = ({ matchStats, table }: Props) => {
 					/>
 				</>
 			)}
-			{showLineups && <Lineups matchStats={matchStats} />}
+			<Lineups matchStats={matchStats} />
 			{table && <LeagueTable table={table} />}
 		</section>
 	);

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

@@ -48,4 +48,11 @@ export const WithLineup = {
 	},
 } satisfies Story;
 
-export const ComingSoon = {} satisfies Story;
+export const ComingSoon = {
+	args: {
+		matchStats: {
+			homeTeam: { ...matchStats.homeTeam, players: [] },
+			awayTeam: { ...matchStats.awayTeam, players: [] },
+		},
+	},
+} satisfies Story;

dotcom-rendering/src/components/Lineups.tsx

@@ -18,21 +18,25 @@ import { palette } from '../palette';
 import Union from '../static/icons/Union.svg';
 
 type Props = {
-	matchStats?: FootballMatchStats;
+	matchStats: FootballMatchStats;
 };
 
 const lineupSectionId = 'lineups';
 const substitutesSectionId = 'substitutes';
 
 export const Lineups = ({ matchStats }: Props) => {
+	const lineupAvailable =
+		matchStats.homeTeam.players.length > 0 &&
+		matchStats.awayTeam.players.length > 0;
+
 	return (
 		<section css={sectionStyles} aria-label="Team Lineups and Substitutes">
 			<section
 				css={playerListSectionGridStyles}
 				aria-labelledby={lineupSectionId}
 			>
 				<Title text="Lineups" id={lineupSectionId} />
-				{matchStats ? (
+				{lineupAvailable ? (
 					<>
 						<PlayerList
 							team={matchStats.homeTeam}
@@ -49,7 +53,7 @@ export const Lineups = ({ matchStats }: Props) => {
 					<span css={comingSoon}>Coming soon</span>
 				)}
 			</section>
-			{matchStats && (
+			{lineupAvailable && (
 				<section
 					css={playerListSectionGridStyles}
 					aria-labelledby={substitutesSectionId}