Skip to content

Commit 8969694

Browse files
jamesmockettfrederickobrienDanielCliftonGuardian
authored
Cricket match header (#15492)
* Work in progress cricket match header component * Update data model and logic for innings * Display overs * Update stories to show fixture and live states * App notification prompts and adjust rendering across match stages * Remove app notification toggle as being refactored * Simplify fall of wicket to number We can transform when validating and parsing the data from frontend, simplifying UI logic * Include team ID and update story to match up innings team names * Add generic TeamCrest component to support cricket crests * Add story for match result * Show results overs, add reason for end of inning * Don't show fall of wicket count if all out * Add additional stories to show result types * Inline team crest component * Add note about determining match winner * Add key to inning fragment * Add ARIA label with number of runs and fallen wickets The score is rendered as an SVG so is not accessible to screen readers and other assistive technologies * Support day being undefined for single day matches * Show fallen wicket count when zero Co-authored-by: Daniel Clifton <110032454+DanielCliftonGuardian@users.noreply.github.com> --------- Co-authored-by: Frederick O'Brien <frederick.obrien@guardian.co.uk> Co-authored-by: Daniel Clifton <110032454+DanielCliftonGuardian@users.noreply.github.com>
1 parent a9e7e5f commit 8969694

2 files changed

Lines changed: 741 additions & 0 deletions

File tree

‎dotcom-rendering/src/components/CricketMatchHeader/CricketMatchHeader.stories.tsx‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
2+
import { CricketMatchHeader } from './CricketMatchHeader';
3+
4+
const meta = {
5+
component: CricketMatchHeader,
6+
} satisfies Meta<typeof CricketMatchHeader>;
7+
8+
export default meta;
9+
10+
type Story = StoryObj<typeof meta>;
11+
12+
export const Fixture = {
13+
args: {
14+
edition: 'UK',
15+
match: {
16+
kind: 'Fixture',
17+
series: 'Ashes 2025–2026',
18+
competition: 'Second Test Match',
19+
venue: 'Brisbane Cricket Ground',
20+
matchDate: new Date('2026-01-26'),
21+
homeTeam: {
22+
paID: 'f7f611a1-e667-2aa2-c3e0-6dbc6981cfa4',
23+
name: 'Australia',
24+
},
25+
awayTeam: {
26+
paID: 'a359844f-fc07-9cfa-d4cc-9a9ac0d5d075',
27+
name: 'England',
28+
},
29+
innings: [],
30+
},
31+
},
32+
} satisfies Story;
33+
34+
export const Live = {
35+
args: {
36+
edition: 'UK',
37+
match: {
38+
...Fixture.args.match,
39+
kind: 'Live',
40+
day: 2,
41+
innings: [
42+
{
43+
declared: false,
44+
forfeited: false,
45+
battingTeam: 'Australia',
46+
runsScored: 169,
47+
overs: '20.0',
48+
fallOfWicket: 0,
49+
},
50+
{
51+
declared: false,
52+
forfeited: false,
53+
battingTeam: 'England',
54+
runsScored: 173,
55+
overs: '19.3',
56+
fallOfWicket: 3,
57+
},
58+
],
59+
},
60+
},
61+
} satisfies Story;
62+
63+
export const LiveYetToBat = {
64+
name: 'Live (Team yet to bat)',
65+
args: {
66+
edition: 'UK',
67+
match: {
68+
...Fixture.args.match,
69+
kind: 'Live',
70+
day: 2,
71+
innings: [
72+
{
73+
declared: false,
74+
forfeited: false,
75+
battingTeam: 'Australia',
76+
runsScored: 169,
77+
overs: '20.0',
78+
fallOfWicket: 10,
79+
},
80+
],
81+
},
82+
},
83+
} satisfies Story;
84+
85+
export const Result = {
86+
args: {
87+
edition: 'UK',
88+
match: {
89+
...Fixture.args.match,
90+
kind: 'Result',
91+
day: 4,
92+
innings: [
93+
{
94+
declared: false,
95+
forfeited: false,
96+
battingTeam: 'Australia',
97+
runsScored: 245,
98+
overs: '65.0',
99+
fallOfWicket: 10,
100+
},
101+
{
102+
declared: false,
103+
forfeited: false,
104+
battingTeam: 'England',
105+
runsScored: 361,
106+
overs: '89.5',
107+
fallOfWicket: 10,
108+
},
109+
{
110+
declared: false,
111+
forfeited: false,
112+
battingTeam: 'Australia',
113+
runsScored: 258,
114+
overs: '78.1',
115+
fallOfWicket: 10,
116+
},
117+
{
118+
declared: false,
119+
forfeited: false,
120+
battingTeam: 'England',
121+
runsScored: 364,
122+
overs: '92.5',
123+
fallOfWicket: 10,
124+
},
125+
],
126+
},
127+
},
128+
} satisfies Story;
129+
130+
export const ResultWinByWickets = {
131+
args: {
132+
edition: 'UK',
133+
match: {
134+
...Fixture.args.match,
135+
kind: 'Result',
136+
innings: [
137+
{
138+
declared: false,
139+
forfeited: false,
140+
battingTeam: 'Australia',
141+
runsScored: 186,
142+
overs: '16.2',
143+
fallOfWicket: 3,
144+
},
145+
{
146+
declared: false,
147+
forfeited: false,
148+
battingTeam: 'England',
149+
runsScored: 182,
150+
overs: '20.0',
151+
fallOfWicket: 8,
152+
},
153+
],
154+
},
155+
},
156+
} satisfies Story;
157+
158+
export const ResultDrawn = {
159+
args: {
160+
edition: 'UK',
161+
match: {
162+
...Fixture.args.match,
163+
kind: 'Result',
164+
day: 4,
165+
innings: [
166+
{
167+
declared: false,
168+
forfeited: false,
169+
battingTeam: 'Australia',
170+
runsScored: 302,
171+
overs: '120.3',
172+
fallOfWicket: 10,
173+
},
174+
{
175+
declared: false,
176+
forfeited: false,
177+
battingTeam: 'England',
178+
runsScored: 226,
179+
overs: '60.2',
180+
fallOfWicket: 10,
181+
},
182+
{
183+
declared: true,
184+
forfeited: false,
185+
battingTeam: 'Australia',
186+
runsScored: 218,
187+
overs: '72.5',
188+
fallOfWicket: 5,
189+
},
190+
{
191+
declared: false,
192+
forfeited: false,
193+
battingTeam: 'England',
194+
runsScored: 239,
195+
overs: '67.4',
196+
fallOfWicket: 7,
197+
},
198+
],
199+
},
200+
},
201+
} satisfies Story;

0 commit comments

Comments
 (0)