Match lineup coming soon state (#15280)

* Coming soon state when lineup unavailable

* 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

@@ -42,8 +42,17 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const LineupsStory = {
+export const WithLineup = {
 	args: {
 		matchStats,
 	},
 } satisfies Story;
+
+export const ComingSoon = {
+	args: {
+		matchStats: {
+			homeTeam: { ...matchStats.homeTeam, players: [] },
+			awayTeam: { ...matchStats.awayTeam, players: [] },
+		},
+	},
+} satisfies Story;

dotcom-rendering/src/components/Lineups.tsx

@@ -25,40 +25,52 @@ 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} />
-				<PlayerList
-					team={matchStats.homeTeam}
-					isSubstitute={false}
-					isHome={true}
-				/>
-				<PlayerList
-					team={matchStats.awayTeam}
-					isSubstitute={false}
-					isHome={false}
-				/>
-			</section>
-			<section
-				css={playerListSectionGridStyles}
-				aria-labelledby={substitutesSectionId}
-			>
-				<Title text="Substitutes" id={substitutesSectionId} />
-				<PlayerList
-					team={matchStats.homeTeam}
-					isSubstitute={true}
-					isHome={true}
-				/>
-				<PlayerList
-					team={matchStats.awayTeam}
-					isSubstitute={true}
-					isHome={false}
-				/>
+				{lineupAvailable ? (
+					<>
+						<PlayerList
+							team={matchStats.homeTeam}
+							isSubstitute={false}
+							isHome={true}
+						/>
+						<PlayerList
+							team={matchStats.awayTeam}
+							isSubstitute={false}
+							isHome={false}
+						/>{' '}
+					</>
+				) : (
+					<span css={comingSoon}>Coming soon</span>
+				)}
 			</section>
+			{lineupAvailable && (
+				<section
+					css={playerListSectionGridStyles}
+					aria-labelledby={substitutesSectionId}
+				>
+					<Title text="Substitutes" id={substitutesSectionId} />
+					<PlayerList
+						team={matchStats.homeTeam}
+						isSubstitute={true}
+						isHome={true}
+					/>
+					<PlayerList
+						team={matchStats.awayTeam}
+						isSubstitute={true}
+						isHome={false}
+					/>
+				</section>
+			)}
 		</section>
 	);
 };
@@ -154,9 +166,8 @@ const PlayerList = ({
 const sectionStyles = css`
 	border: 1px solid ${palette('--football-match-stat-border')};
 	border-radius: 6px;
-
 	padding-top: 6px;
-
+	color: ${palette('--football-match-stat-text')};
 	background-color: ${palette('--football-match-info-background')};
 `;
 
@@ -190,7 +201,6 @@ const shirtNumber = css`
 	display: inline-block;
 	width: ${space[5]}px;
 	${textSansBold14}
-	color: ${palette('--football-match-stat-text')};
 	${from.desktop} {
 		${textSansBold15}
 	}
@@ -213,7 +223,14 @@ const playerName = css`
 	${from.desktop} {
 		${textSans15}
 	}
-	color: ${palette('--football-match-stat-text')};
+`;
+
+const comingSoon = css`
+	padding-top: ${space[2]}px;
+	${textSans14}
+	${from.desktop} {
+		${textSans15}
+	}
 `;
 
 const BackgroundRed = sourcePalette.news[400];