Skip to content

Commit f4af771

Browse files
authored
Football match header (#15020)
The new designs for the football match header that will appear across match info pages, liveblogs, and match reports. It makes use of a similar implementation for displaying scores as the previous version, i.e. SVGs, but uses the existing `BigNumber` component. Note that this does not yet include the designs for the live version.
1 parent 5fe28ba commit f4af771

File tree

2 files changed

+424
-0
lines changed

2 files changed

+424
-0
lines changed
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
2+
import { FootballMatchHeader as FootballMatchHeaderComponent } from './FootballMatchHeader';
3+
4+
const meta = {
5+
component: FootballMatchHeaderComponent,
6+
} satisfies Meta<typeof FootballMatchHeaderComponent>;
7+
8+
export default meta;
9+
10+
type Story = StoryObj<typeof meta>;
11+
12+
export const Fixture = {
13+
args: {
14+
leagueName: 'Premier League',
15+
match: {
16+
kind: 'Fixture',
17+
kickOff: new Date('2025-11-05T20:30:00Z'),
18+
venue: 'Old Trafford',
19+
homeTeam: {
20+
name: 'Wolverhampton Wanderers',
21+
paID: '44',
22+
},
23+
awayTeam: {
24+
name: 'Belgium',
25+
paID: '997',
26+
},
27+
paId: 'matchId',
28+
},
29+
tabs: {
30+
selected: 'info',
31+
},
32+
edition: 'UK',
33+
},
34+
} satisfies Story;
35+
36+
export const Result = {
37+
args: {
38+
leagueName: 'Premier League',
39+
match: {
40+
...Fixture.args.match,
41+
kind: 'Result',
42+
homeTeam: {
43+
...Fixture.args.match.homeTeam,
44+
score: 0,
45+
scorers: [],
46+
},
47+
awayTeam: {
48+
...Fixture.args.match.awayTeam,
49+
score: 13,
50+
scorers: [
51+
'Carlos Casemiro 12 Pen',
52+
'Carlos Casemiro 4',
53+
'Mason Mount 82 O.g.',
54+
],
55+
},
56+
comment: undefined,
57+
},
58+
tabs: {
59+
selected: 'info',
60+
liveURL: new URL(
61+
'https://www.theguardian.com/football/live/2025/nov/26/arsenal-v-bayern-munich-champions-league-live',
62+
),
63+
reportURL: new URL(
64+
'https://www.theguardian.com/football/2025/nov/26/arsenal-bayern-munich-champions-league-match-report',
65+
),
66+
},
67+
edition: 'AU',
68+
},
69+
} satisfies Story;

0 commit comments

Comments
 (0)