Ensure visibility of match stats and info

dotcom-rendering/fixtures/manual/footballTeams.ts

@@ -0,0 +1,90 @@
+export const footballTeams = [
+	{
+		home: { name: 'Wolves', colour: '#faa01b' },
+		away: { name: 'Man Utd', colour: '#b00101' },
+	},
+	{
+		home: { name: 'Fulham', colour: '#ffffff' },
+		away: { name: 'C Palace', colour: '#af1f17' },
+	},
+	{
+		home: { name: 'Brighton', colour: '#2a449a' },
+		away: { name: 'West Ham', colour: '#7c1e42' },
+	},
+	{
+		home: { name: 'Leeds', colour: '#f5f5f5' },
+		away: { name: 'Liverpool', colour: '#ce070c' },
+	},
+	{
+		home: { name: 'AFC Bournemouth', colour: '#c80000' },
+		away: { name: 'Chelsea', colour: '#005ca4' },
+	},
+	{
+		home: { name: 'Everton', colour: '#00349a' },
+		away: { name: 'Nottm Forest', colour: '#db1812' },
+	},
+	{
+		home: { name: 'Man City', colour: '#5cbfeb' },
+		away: { name: 'Sunderland', colour: '#d51022' },
+	},
+	{
+		home: { name: 'Newcastle', colour: '#383838' },
+		away: { name: 'Burnley', colour: '#570e30' },
+	},
+	{
+		home: { name: 'Spurs', colour: '#ffffff' },
+		away: { name: 'Brentford', colour: '#c4040f' },
+	},
+	{
+		home: { name: 'Aston Villa', colour: '#720e44' },
+		away: { name: 'Arsenal', colour: '#c40007' },
+	},
+	{
+		home: { name: 'Birmingham', colour: '#01009a' },
+		away: { name: 'Norwich', colour: '#ffe400' },
+	},
+	{
+		home: { name: 'Derby', colour: '#ffffff' },
+		away: { name: 'Watford', colour: '#fef502' },
+	},
+	{
+		home: { name: 'Leicester', colour: '#4b2cd3' },
+		away: { name: 'Stoke', colour: '#cc0617' },
+	},
+	{
+		home: { name: 'Oxford Utd', colour: '#fec726' },
+		away: { name: 'Middlesbrough', colour: '#e70101' },
+	},
+	{
+		home: { name: 'Portsmouth', colour: '#0077ac' },
+		away: { name: 'Millwall', colour: '#1a2791' },
+	},
+	{
+		home: { name: 'QPR', colour: '#1f539f' },
+		away: { name: 'Hull', colour: '#f2b100' },
+	},
+	{
+		home: { name: 'Bristol City', colour: '#c70c23' },
+		away: { name: 'Swansea', colour: '#ffffff' },
+	},
+	{
+		home: { name: 'Charlton', colour: '#d4222b' },
+		away: { name: 'Southampton', colour: '#d71921' },
+	},
+	{
+		home: { name: 'Coventry', colour: '#b1d0ff' },
+		away: { name: 'West Brom', colour: '#00246a' },
+	},
+	{
+		home: { name: 'Celtic', colour: '#559861' },
+		away: { name: 'Dundee', colour: '#000033' },
+	},
+	{
+		home: { name: 'Falkirk', colour: '#002341' },
+		away: { name: 'Motherwell', colour: '#f0c650' },
+	},
+	{
+		home: { name: 'Dundee Utd', colour: '#ff6c00' },
+		away: { name: 'Rangers', colour: '#195091' },
+	},
+];

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

@@ -1,18 +1,41 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { FootballMatchGoalAttempts as FootballMatchGoalAttemptsComponent } from './FootballMatchStat';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
+import { footballTeams } from '../../fixtures/manual/footballTeams';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import { FootballMatchGoalAttempts } from './FootballMatchStat';
 
 const meta = {
 	title: 'Components/Football Match Goal Attempts',
-	component: FootballMatchGoalAttemptsComponent,
+	component: FootballMatchGoalAttempts,
+	decorators: [
+		(Story) => (
+			<div
+				css={css`
+					padding: ${space[4]}px;
+				`}
+			>
+				<Story />
+			</div>
+		),
+		splitTheme([
+			{
+				design: ArticleDesign.Standard,
+				display: ArticleDisplay.Standard,
+				theme: Pillar.News,
+			},
+		]),
+	],
 	parameters: {
 		layout: 'padded',
 	},
-} satisfies Meta<typeof FootballMatchGoalAttemptsComponent>;
+} satisfies Meta<typeof FootballMatchGoalAttempts>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const FootballMatchGoalAttempts = {
+export const Default = {
 	args: {
 		homeTeam: {
 			name: 'Manchester United',
@@ -32,3 +55,33 @@ export const FootballMatchGoalAttempts = {
 		},
 	},
 } satisfies Story;
+
+export const TeamColours = {
+	render: (args) => (
+		<div
+			css={css`
+				display: flex;
+				flex-direction: column;
+				gap: ${space[2]}px;
+			`}
+		>
+			{footballTeams.map((match, index) => (
+				<FootballMatchGoalAttempts
+					{...args}
+					homeTeam={{
+						name: match.home.name,
+						colour: match.home.colour,
+					}}
+					awayTeam={{
+						name: match.away.name,
+						colour: match.away.colour,
+					}}
+					key={index}
+				/>
+			))}
+		</div>
+	),
+	args: {
+		...Default.args,
+	},
+} satisfies Story;

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

@@ -1,6 +1,9 @@
 import { css } from '@emotion/react';
 import { space } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
+import { footballTeams } from '../../fixtures/manual/footballTeams';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { palette } from '../palette';
 import { FootballMatchStat } from './FootballMatchStat';
 
@@ -20,6 +23,13 @@ const meta = {
 				<Story />
 			</div>
 		),
+		splitTheme([
+			{
+				design: ArticleDesign.Standard,
+				display: ArticleDisplay.Standard,
+				theme: Pillar.News,
+			},
+		]),
 	],
 	parameters: {
 		viewport: {
@@ -70,3 +80,33 @@ export const CompactLayout = {
 		layout: 'compact',
 	},
 } satisfies Story;
+
+export const TeamColours = {
+	render: (args) => (
+		<div
+			css={css`
+				display: flex;
+				flex-direction: column;
+				gap: ${space[2]}px;
+			`}
+		>
+			{footballTeams.map((match, index) => (
+				<FootballMatchStat
+					{...args}
+					homeTeam={{
+						name: match.home.name,
+						colour: match.home.colour,
+					}}
+					awayTeam={{
+						name: match.away.name,
+						colour: match.away.colour,
+					}}
+					key={index}
+				/>
+			))}
+		</div>
+	),
+	args: {
+		...ShownAsPercentage.args,
+	},
+} satisfies Story;

dotcom-rendering/src/components/FootballMatchStat.tsx

@@ -11,6 +11,7 @@ import {
 	textSansBold28,
 	visuallyHidden,
 } from '@guardian/source/foundations';
+import { isLight } from '../lib/isLight';
 import { transparentColour } from '../lib/transparentColour';
 import { palette } from '../palette';
 
@@ -22,6 +23,7 @@ const containerCss = css`
 		'home-stat label away-stat'
 		'graph     graph  graph';
 	padding: 5px 10px 10px;
+	color: ${palette('--football-match-stat-text')};
 	border: 1px solid ${palette('--football-match-stat-border')};
 	border-radius: 6px;
 	&::before {
@@ -59,7 +61,6 @@ const labelCss = css`
 	${textSansBold14};
 	grid-area: label;
 	justify-self: center;
-	color: ${palette('--football-match-stat-text')};
 	${from.desktop} {
 		${textSansBold15};
 	}
@@ -68,7 +69,6 @@ const labelCss = css`
 const numberCss = css`
 	${textSansBold20};
 	grid-area: home-stat;
-	color: var(--match-stat-team-colour);
 `;
 
 const largeNumberCss = css`
@@ -93,6 +93,7 @@ const barCss = css`
 	height: ${space[2]}px;
 	width: var(--match-stat-percentage);
 	background-color: var(--match-stat-team-colour);
+	border: 1px solid ${palette('--football-match-stat-border')};
 	border-radius: 8px;
 `;
 
@@ -136,10 +137,7 @@ export const FootballMatchStat = ({
 			]}
 		>
 			<span css={labelCss}>{label}</span>
-			<span
-				css={[numberCss, !compactLayout && largeNumberCss]}
-				style={{ '--match-stat-team-colour': homeTeam.colour }}
-			>
+			<span css={[numberCss, !compactLayout && largeNumberCss]}>
 				<span
 					css={css`
 						${visuallyHidden}
@@ -151,7 +149,6 @@ export const FootballMatchStat = ({
 			</span>
 			<span
 				css={[numberCss, awayStatCss, !compactLayout && largeNumberCss]}
-				style={{ '--match-stat-team-colour': awayTeam.colour }}
 			>
 				<span
 					css={css`
@@ -193,12 +190,13 @@ const goalAttemptsLayoutCss = css`
 	}
 `;
 
-const offTargetCss = css`
+const offTargetCss = (colour: string) => css`
 	${textSans14};
 	grid-area: home-attempts;
 	margin-top: 5px;
 	padding: ${space[1]}px 0 0 6px;
-	background-color: var(--off-target-colour);
+	background-color: ${transparentColour(colour, 0.1)};
+	border: 1px solid ${palette('--football-match-stat-border')};
 	border-radius: 4px;
 	${from.desktop} {
 		${textSans15};
@@ -212,10 +210,14 @@ const offTargetAwayCss = css`
 	padding-right: 6px;
 `;
 
-const onTargetCss = css`
+const onTargetCss = (colour: string) => css`
 	padding: ${space[1]}px 0 0 6px;
-	color: ${sourcePalette.neutral[100]};
-	background-color: var(--on-target-colour);
+	color: ${isLight(colour)
+		? sourcePalette.neutral[7]
+		: sourcePalette.neutral[100]};
+	background-color: ${colour};
+	border-top: 1px solid ${palette('--football-match-stat-border')};
+	border-left: 1px solid ${palette('--football-match-stat-border')};
 	border-radius: 4px;
 	width: 80%;
 	min-height: 62px;
@@ -229,6 +231,8 @@ const onTargetAwayCss = css`
 	padding-left: 0;
 	padding-right: 6px;
 	justify-self: start;
+	border-left: none;
+	border-right: 1px solid ${palette('--football-match-stat-border')};
 `;
 
 const attemptCountCss = css`
@@ -268,19 +272,10 @@ export const FootballMatchGoalAttempts = ({
 			>
 				{homeTeam.name}
 			</span>
-			<div
-				css={offTargetCss}
-				style={{
-					'--off-target-colour': transparentColour(
-						homeTeam.colour,
-						0.1,
-					),
-					'--on-target-colour': homeTeam.colour,
-				}}
-			>
+			<div css={offTargetCss(homeTeam.colour)}>
 				Off target
 				<span css={attemptCountCss}>{homeValues.offTarget}</span>
-				<div css={onTargetCss}>
+				<div css={onTargetCss(homeTeam.colour)}>
 					On target
 					<span css={attemptCountCss}>{homeValues.onTarget}</span>
 				</div>
@@ -292,19 +287,10 @@ export const FootballMatchGoalAttempts = ({
 			>
 				{awayTeam.name}
 			</span>
-			<div
-				css={[offTargetCss, offTargetAwayCss]}
-				style={{
-					'--off-target-colour': transparentColour(
-						awayTeam.colour,
-						0.1,
-					),
-					'--on-target-colour': awayTeam.colour,
-				}}
-			>
+			<div css={[offTargetCss(awayTeam.colour), offTargetAwayCss]}>
 				Off target
 				<span css={attemptCountCss}>{awayValues.offTarget}</span>
-				<div css={[onTargetCss, onTargetAwayCss]}>
+				<div css={[onTargetCss(awayTeam.colour), onTargetAwayCss]}>
 					On target
 					<span css={attemptCountCss}>{awayValues.onTarget}</span>
 				</div>