Skip to content

Adapt football liveblog scores header for cricket #15195

@petternitter

Description

@petternitter

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)
Image Image

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)
Image Image

Post-match

  • When result data becomes available, display "Won by X wickets" below the overs of the winning team as per design
Cricket Football
Image Image

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions