Support scores above ten in the match nav (#13818)

* Support scores above ten in the match nav

Author: andrewHEguardian

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

@@ -20,7 +20,16 @@ export const Default = () => {
 			<Score score={9} />
 			<Score score={10} />
 			<Score score={11} />
-			<p>^ We only go up to 10 at the moment 🤷‍♀</p>
+			<Score score={12} />
+			<Score score={13} />
+			<Score score={14} />
+			<Score score={15} />
+			<Score score={16} />
+			<Score score={17} />
+			<Score score={18} />
+			<Score score={31} />
+			<Score score={0.5} />
+			<Score score={NaN} />
 		</>
 	);
 };

dotcom-rendering/src/components/Score.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { text } from '@guardian/source/foundations';
+import { palette } from '../palette';
 import { Eight } from './numbers/Eight';
 import { Five } from './numbers/Five';
 import { Four } from './numbers/Four';
@@ -12,103 +12,69 @@ import { Three } from './numbers/Three';
 import { Two } from './numbers/Two';
 import { Zero } from './numbers/Zero';
 
+const ScoreStyles = ({ children }: { children: React.ReactNode }) => (
+	<div
+		css={css`
+			position: relative;
+			width: 3.75rem;
+			height: 3.75rem;
+			border-radius: 1.875rem;
+			border: 0.0625rem solid ${palette('--football-score-border')};
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		`}
+	>
+		{children}
+	</div>
+);
+
 type Props = {
 	score: number;
 };
 
-export const Score = ({ score }: Props) => {
-	const ScoreStyles = ({ children }: { children: React.ReactNode }) => (
-		<div
-			css={css`
-				position: relative;
-				width: 3.75rem;
-				height: 3.75rem;
-				border-radius: 1.875rem;
-				border: 0.0625rem solid ${text.primary};
-
-				svg {
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					margin: auto;
-				}
-			`}
-		>
-			{children}
-		</div>
-	);
-
-	if (Number.isNaN(score)) return <ScoreStyles> </ScoreStyles>;
+const ScoreNumber = ({ score }: Props) => {
+	if (!Number.isInteger(score) || score < 0) {
+		return null;
+	}
 
 	switch (score) {
 		case 0:
-			return (
-				<ScoreStyles>
-					<Zero />
-				</ScoreStyles>
-			);
+			return <Zero />;
 		case 1:
-			return (
-				<ScoreStyles>
-					<One />
-				</ScoreStyles>
-			);
+			return <One />;
 		case 2:
-			return (
-				<ScoreStyles>
-					<Two />
-				</ScoreStyles>
-			);
+			return <Two />;
 		case 3:
-			return (
-				<ScoreStyles>
-					<Three />
-				</ScoreStyles>
-			);
+			return <Three />;
 		case 4:
-			return (
-				<ScoreStyles>
-					<Four />
-				</ScoreStyles>
-			);
+			return <Four />;
 		case 5:
-			return (
-				<ScoreStyles>
-					<Five />
-				</ScoreStyles>
-			);
+			return <Five />;
 		case 6:
-			return (
-				<ScoreStyles>
-					<Six />
-				</ScoreStyles>
-			);
+			return <Six />;
 		case 7:
-			return (
-				<ScoreStyles>
-					<Seven />
-				</ScoreStyles>
-			);
+			return <Seven />;
 		case 8:
-			return (
-				<ScoreStyles>
-					<Eight />
-				</ScoreStyles>
-			);
+			return <Eight />;
 		case 9:
-			return (
-				<ScoreStyles>
-					<Nine />
-				</ScoreStyles>
-			);
+			return <Nine />;
 		case 10:
+			return <Ten />;
 		default:
 			return (
-				<ScoreStyles>
-					<Ten />
-				</ScoreStyles>
+				<>
+					<ScoreNumber score={Math.trunc(score / 10)} />
+					<ScoreNumber score={score % 10} />
+				</>
 			);
 	}
 };
+
+export const Score = ({ score }: Props) => {
+	return (
+		<ScoreStyles>
+			<ScoreNumber score={score} />
+		</ScoreStyles>
+	);
+};

dotcom-rendering/src/paletteDeclarations.ts

@@ -6595,6 +6595,10 @@ const paletteColours = {
 		light: () => sourcePalette.sport[500],
 		dark: () => sourcePalette.sport[500],
 	},
+	'--football-score-border': {
+		light: () => sourcePalette.neutral[7],
+		dark: () => sourcePalette.neutral[7],
+	},
 	'--football-sub-text': {
 		light: () => sourcePalette.neutral[46],
 		dark: () => sourcePalette.neutral[73],