-
Notifications
You must be signed in to change notification settings - Fork 30
Open
Milestone
Description
Context
The football liveblog scores header implemented in #14901 should be reused and adapted for cricket liveblogs.
The cricket liveblogs should use the same components, layout, transition between match states and styling for the scores header as football liveblogs, only adapting it based on the cricket-specific data requirements defined below.
Designs here show the expected output for pre-match, during-match and post-match states.
Requirements
Global (all states)
- Header background colour follows football logic:
- Pre-match: blue
- During match: yellow
- Post-match: blue
- Populate the header with cricket match data (teams, scores, overs, status, result etc) rather than football data
- All visual treatment and elements are identical to football other than the changes outlined below
Pre-match
- Display cricket match metadata (series, venue, day/date etc) at top of header
| Cricket | Football (for reference) |
|---|---|
![]() |
![]() |
During match
- Scores:
- Display scores as data becomes available
- If a team has not yet batted, display "Yet to bat" until score becomes available
- Push scores below team badge and remove surrounding circular border
- Overs:
- Display overs below the score for each team as data becomes available
- Only render the overs label when data becomes available; if no data is available it should be omitted
- Apply the same visual treatment to overs as football substitution minutes
- When a batting side is all out and the data for this becomes available, prefix the overs label with "All out"
(e.g. "All out 76.2 overs") in the same way we prefix football substitution minutes with the player's name
| Cricket | Football (for reference) |
|---|---|
![]() |
![]() |
Post-match
- When result data becomes available, display "Won by X wickets" below the overs of the winning team as per design
| Cricket | Football |
|---|---|
![]() |
![]() |
Acceptance criteria
- Cricket liveblogs render the cricket header component
- Header transitions correctly between pre-match, during-match and post-match states
- All dynamic labels based on match data (e.g. "Yet to bat", overs label, "All out", result label) disappear/appear as and when relevant data becomes available
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels





