Only add Match nav scoreboard placeholders for articles (#13837)

Author: andrewHEguardian

dotcom-rendering/src/components/FootballMatchSummary.tsx

@@ -54,6 +54,7 @@ export const FootballMatchSummary = ({ match }: Props) => (
 				homeTeam={match.homeTeam}
 				awayTeam={match.awayTeam}
 				comments={match.comments}
+				usage="MatchSummary"
 			/>
 		</div>
 		<div

dotcom-rendering/src/components/GetMatchNav.importable.tsx

@@ -141,6 +141,7 @@ export const GetMatchNav = ({
 				homeTeam={data.homeTeam}
 				awayTeam={data.awayTeam}
 				comments={data.comments}
+				usage="Article"
 			/>
 		);
 	}

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

@@ -54,24 +54,26 @@ export const Default = () => {
 			homeTeam={homeTeam}
 			awayTeam={awayTeam}
 			comments="Here is a comments string"
+			usage="Article"
 		/>
 	);
 };
 Default.storyName = 'default';
 
-export const ZeroZero = () => {
+export const NilNil = () => {
 	return (
 		<MatchNav
 			homeTeam={{ ...homeTeam, score: 0, scorers: [] }}
 			awayTeam={{ ...awayTeam, score: 0, scorers: [] }}
 			comments="Neither team scored any goals"
+			usage="Article"
 		/>
 	);
 };
-ZeroZero.storyName = 'zero - zero';
+NilNil.storyName = 'nil - nil';
 
 export const NoComments = () => {
-	return <MatchNav homeTeam={homeTeam} awayTeam={awayTeam} />;
+	return <MatchNav homeTeam={homeTeam} awayTeam={awayTeam} usage="Article" />;
 };
 NoComments.storyName = 'with no comments';
 
@@ -93,6 +95,7 @@ export const InContext = () => {
 						homeTeam={homeTeam}
 						awayTeam={awayTeam}
 						comments="Here is a comments string"
+						usage="Article"
 					/>
 				</ArticleContainer>
 				<RightColumn>
@@ -109,7 +112,19 @@ export const NoScore = () => {
 		<MatchNav
 			homeTeam={{ ...homeTeam, score: undefined, scorers: [] }}
 			awayTeam={{ ...awayTeam, score: undefined, scorers: [] }}
+			usage="Article"
 		/>
 	);
 };
 NoScore.storyName = 'with no scores';
+
+export const NilNilInMatchSummary = () => {
+	return (
+		<MatchNav
+			homeTeam={{ ...homeTeam, score: 0, scorers: [] }}
+			awayTeam={{ ...awayTeam, score: 0, scorers: [] }}
+			usage="MatchSummary"
+		/>
+	);
+};
+NilNilInMatchSummary.storyName = 'nil - nil in match summary';

dotcom-rendering/src/components/MatchNav.tsx

@@ -17,6 +17,7 @@ type Props = {
 	homeTeam: Team;
 	awayTeam: Team;
 	comments?: string;
+	usage: 'MatchSummary' | 'Article';
 };
 
 const Row = ({ children }: { children: React.ReactNode }) => (
@@ -155,15 +156,7 @@ const TeamNav = ({
 				`}
 			>
 				<TeamName name={name} />
-				<Scorers
-					scorers={[
-						...scorers,
-						// this ensures we reserve space for at least three scorers per team
-						'placeholder-1',
-						'placeholder-2',
-						'placeholder-3',
-					].slice(0, Math.max(3, scorers.length))}
-				/>
+				<Scorers scorers={scorers} />
 			</div>
 			<CrestRow>
 				<Crest crest={crest} />
@@ -207,7 +200,16 @@ const YellowBorder = () => (
 	/>
 );
 
-export const MatchNav = ({ homeTeam, awayTeam, comments }: Props) => (
+const addScorerPlaceholders = (scorers: string[]): string[] =>
+	[
+		...scorers,
+		// this ensures we reserve space for at least three scorers per team
+		'placeholder-1',
+		'placeholder-2',
+		'placeholder-3',
+	].slice(0, Math.max(3, scorers.length));
+
+export const MatchNav = ({ homeTeam, awayTeam, comments, usage }: Props) => (
 	<div
 		css={css`
 			display: flex;
@@ -227,14 +229,22 @@ export const MatchNav = ({ homeTeam, awayTeam, comments }: Props) => (
 				name={homeTeam.name}
 				score={homeTeam.score}
 				crest={homeTeam.crest}
-				scorers={homeTeam.scorers}
+				scorers={
+					usage === 'Article'
+						? addScorerPlaceholders(homeTeam.scorers)
+						: homeTeam.scorers
+				}
 			/>
 			<YellowBorder />
 			<TeamNav
 				name={awayTeam.name}
 				score={awayTeam.score}
 				crest={awayTeam.crest}
-				scorers={awayTeam.scorers}
+				scorers={
+					usage === 'Article'
+						? addScorerPlaceholders(awayTeam.scorers)
+						: awayTeam.scorers
+				}
 			/>
 		</Row>
 		{!!comments && <Comments comments={comments} />}