Make score optional for match summaries (#13816)

* Make score optional for match summary page

* fix schema

* hide Lineup and substitute headings if no players

* sync up with FE data model.

---------

Co-authored-by: oliverabrahams <[email protected]>
Co-authored-by: Marjan Kalanaki <[email protected]>

Author: 3 people

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

@@ -103,3 +103,13 @@ export const InContext = () => {
 	);
 };
 InContext.storyName = 'when placed in article context';
+
+export const NoScore = () => {
+	return (
+		<MatchNav
+			homeTeam={{ ...homeTeam, score: undefined, scorers: [] }}
+			awayTeam={{ ...awayTeam, score: undefined, scorers: [] }}
+		/>
+	);
+};
+NoScore.storyName = 'with no scores';

dotcom-rendering/src/components/MatchNav.tsx

@@ -1,18 +1,21 @@
 import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
 import {
 	background,
 	headlineBold20,
 	space,
 	textSans15,
 	until,
 } from '@guardian/source/foundations';
+import type { FootballTeam } from '../footballMatch';
 import { palette } from '../palette';
-import type { TeamType } from '../types/sport';
 import { Score } from './Score';
 
+type Team = Pick<FootballTeam, 'name' | 'score' | 'scorers' | 'crest'>;
+
 type Props = {
-	homeTeam: Pick<TeamType, 'name' | 'score' | 'scorers' | 'crest'>;
-	awayTeam: Pick<TeamType, 'name' | 'score' | 'scorers' | 'crest'>;
+	homeTeam: Team;
+	awayTeam: Team;
 	comments?: string;
 };
 
@@ -131,7 +134,7 @@ const TeamNav = ({
 	scorers,
 }: {
 	name: string;
-	score: number;
+	score?: number;
 	crest: string;
 	scorers: string[];
 }) => (
@@ -164,13 +167,15 @@ const TeamNav = ({
 			</div>
 			<CrestRow>
 				<Crest crest={crest} />
-				<div
-					css={css`
-						margin-left: -${space[2]}px;
-					`}
-				>
-					<Score score={score} />
-				</div>
+				{!isUndefined(score) && (
+					<div
+						css={css`
+							margin-left: -${space[2]}px;
+						`}
+					>
+						<Score score={score} />
+					</div>
+				)}
 			</CrestRow>
 		</Column>
 	</div>

dotcom-rendering/src/components/MatchStats.tsx

@@ -8,10 +8,10 @@ import {
 	textSans15,
 	until,
 } from '@guardian/source/foundations';
+import type { FootballTeam } from '../footballMatch';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import { palette as themePalette } from '../palette';
 import type { ColourName } from '../paletteDeclarations';
-import type { TeamType } from '../types/sport';
 import { Distribution } from './Distribution';
 import { Doughnut } from './Doughnut';
 import { GoalAttempts } from './GoalAttempts';
@@ -20,8 +20,8 @@ import { Hide } from './Hide';
 import { Lineup } from './Lineup';
 
 type MatchStatsData = {
-	home: TeamType;
-	away: TeamType;
+	home: FootballTeam;
+	away: FootballTeam;
 };
 
 type MatchSummaryProps = MatchStatsData & {
@@ -289,8 +289,8 @@ const DecideDoughnut = ({
 	away,
 	format,
 }: {
-	home: TeamType;
-	away: TeamType;
+	home: FootballTeam;
+	away: FootballTeam;
 	format?: ArticleFormat;
 }) => {
 	const sections = [
@@ -352,13 +352,14 @@ const DecideDoughnut = ({
 	Some leagues do not return match stats - see
 	https://github.com/guardian/frontend/blob/e046d4144d0001059156f402fd5cf1af29ee9f0c/sport/app/football/controllers/MatchController.scala#L23
 */
-function teamHasStats({ shotsOff, shotsOn, fouls, corners }: TeamType) {
+function teamHasStats({ shotsOff, shotsOn, fouls, corners }: FootballTeam) {
 	return !(shotsOff === 0 && shotsOn === 0 && fouls === 0 && corners === 0);
 }
 
 export const MatchStats = (props: Props) => {
 	const { home, away, usage } = props;
 	const showStats = teamHasStats(home) && teamHasStats(away);
+	const showLineups = home.players.length > 0 && away.players.length > 0;
 
 	const format = usage === 'Article' ? props.format : undefined;
 	const backgroundColour =
@@ -447,54 +448,58 @@ export const MatchStats = (props: Props) => {
 						</GridItem>
 					</>
 				)}
-				<GridItem area="subtitle">
-					<ShiftLeft format={format}>
-						{/* Don't show the right border if this text was
+				{showLineups && (
+					<>
+						<GridItem area="subtitle">
+							<ShiftLeft format={format}>
+								{/* Don't show the right border if this text was
                         shifted into the left column */}
-						<Hide when="above" breakpoint="desktop">
+								<Hide when="above" breakpoint="desktop">
+									<RightBorder>
+										<H3>Lineups</H3>
+									</RightBorder>
+								</Hide>
+								<Hide when="below" breakpoint="desktop">
+									<H3>Lineups</H3>
+								</Hide>
+							</ShiftLeft>
+						</GridItem>
+						<GridItem area="home">
 							<RightBorder>
-								<H3>Lineups</H3>
+								<H4>{home.name}</H4>
+								<Lineup
+									players={home.players.filter(
+										(player) => !player.substitute,
+									)}
+								/>
+								<br />
+								<H4>Substitutes</H4>
+								<Lineup
+									players={home.players.filter(
+										(player) => player.substitute,
+									)}
+								/>
+								<br />
 							</RightBorder>
-						</Hide>
-						<Hide when="below" breakpoint="desktop">
-							<H3>Lineups</H3>
-						</Hide>
-					</ShiftLeft>
-				</GridItem>
-				<GridItem area="home">
-					<RightBorder>
-						<H4>{home.name}</H4>
-						<Lineup
-							players={home.players.filter(
-								(player) => !player.substitute,
-							)}
-						/>
-						<br />
-						<H4>Substitutes</H4>
-						<Lineup
-							players={home.players.filter(
-								(player) => player.substitute,
-							)}
-						/>
-						<br />
-					</RightBorder>
-				</GridItem>
-				<GridItem area="away">
-					<H4>{away.name}</H4>
-					<Lineup
-						players={away.players.filter(
-							(player) => !player.substitute,
-						)}
-					/>
-					<br />
-					<H4>Substitutes</H4>
-					<Lineup
-						players={away.players.filter(
-							(player) => player.substitute,
-						)}
-					/>
-					<br />
-				</GridItem>
+						</GridItem>
+						<GridItem area="away">
+							<H4>{away.name}</H4>
+							<Lineup
+								players={away.players.filter(
+									(player) => !player.substitute,
+								)}
+							/>
+							<br />
+							<H4>Substitutes</H4>
+							<Lineup
+								players={away.players.filter(
+									(player) => player.substitute,
+								)}
+							/>
+							<br />
+						</GridItem>
+					</>
+				)}
 			</StatsGrid>
 		</StretchBackground>
 	);

dotcom-rendering/src/footballMatch.ts

@@ -29,8 +29,7 @@ export type FootballTeam = {
 	corners: number;
 	fouls: number;
 	colours: string;
-	// ToDo: this needs to be optional
-	score: number;
+	score?: number;
 	crest: string;
 	scorers: string[];
 };
@@ -49,7 +48,7 @@ export type FootballPlayer = {
 export type FootballMatch = {
 	homeTeam: FootballTeam;
 	awayTeam: FootballTeam;
-	comments: string;
+	comments?: string;
 };
 
 type UnknownEventType = {

dotcom-rendering/src/frontend/feFootballDataPage.ts

@@ -30,7 +30,6 @@ export type FESportPageConfig = Omit<
 };
 
 export type FEFootballDataPage = {
-	filters: Record<string, FEFootballCompetition[]>;
 	nav: FENavType;
 	editionId: EditionId;
 	guardianBaseURL: string;

dotcom-rendering/src/frontend/feFootballMatchListPage.ts

@@ -1,5 +1,6 @@
 import type {
 	FECompetitionSummary,
+	FEFootballCompetition,
 	FEFootballDataPage,
 	FERound,
 } from './feFootballDataPage';
@@ -89,6 +90,7 @@ export type FEMatchByDateAndCompetition = {
 };
 
 export type FEFootballMatchListPage = FEFootballDataPage & {
+	filters: Record<string, FEFootballCompetition[]>;
 	matchesList: FEMatchByDateAndCompetition[];
 	nextPage?: string;
 	previousPage?: string;

dotcom-rendering/src/frontend/feFootballMatchPage.ts

@@ -21,7 +21,7 @@ export type FEFootballTeam = {
 	name: string;
 	codename: string;
 	players: FEFootballPlayer[];
-	score: number;
+	score?: number;
 	scorers: string[];
 	possession: number;
 	shotsOn: number;
@@ -36,9 +36,9 @@ export type FEFootballMatch = {
 	id: string;
 	homeTeam: FEFootballTeam;
 	awayTeam: FEFootballTeam;
-	comments: string;
+	comments?: string;
 };
 
 export type FEFootballMatchPage = FEFootballDataPage & {
-	match: FEFootballMatch;
+	footballMatch: FEFootballMatch;
 };

dotcom-rendering/src/frontend/feFootballTablesPage.ts

@@ -1,5 +1,6 @@
 import type {
 	FECompetitionSummary,
+	FEFootballCompetition,
 	FEFootballDataPage,
 	FERound,
 } from './feFootballDataPage';
@@ -61,5 +62,6 @@ export type FEFootballTable = {
 };
 
 export type FEFootballTablesPage = FEFootballDataPage & {
+	filters: Record<string, FEFootballCompetition[]>;
 	tables: FEFootballTable[];
 };

dotcom-rendering/src/frontend/schemas/feFootballMatchListPage.json

@@ -3,9 +3,6 @@
         {
             "type": "object",
             "properties": {
-                "filters": {
-                    "$ref": "#/definitions/Record<string,FEFootballCompetition[]>"
-                },
                 "nav": {
                     "$ref": "#/definitions/FENavType"
                 },
@@ -35,7 +32,6 @@
                 "config",
                 "contributionsServiceUrl",
                 "editionId",
-                "filters",
                 "guardianBaseURL",
                 "isAdFreeUser",
                 "nav",
@@ -45,6 +41,9 @@
         {
             "type": "object",
             "properties": {
+                "filters": {
+                    "$ref": "#/definitions/Record<string,FEFootballCompetition[]>"
+                },
                 "matchesList": {
                     "type": "array",
                     "items": {
@@ -116,14 +115,12 @@
                 }
             },
             "required": [
+                "filters",
                 "matchesList"
             ]
         }
     ],
     "definitions": {
-        "Record<string,FEFootballCompetition[]>": {
-            "type": "object"
-        },
         "FENavType": {
             "type": "object",
             "properties": {
@@ -682,6 +679,9 @@
                 "url"
             ]
         },
+        "Record<string,FEFootballCompetition[]>": {
+            "type": "object"
+        },
         "FEFootballMatch": {
             "anyOf": [
                 {