Tabs and content display for cricket liveblogs #15220
Description
Context
Similar to football liveblogs, cricket liveblogs should separate the live feed and scorecard into tabbed views. This allows users to switch between these views while remaining within the liveblog article page.
The tab behaviour, layout and interaction model should mirror football liveblogs, with adaptations driven by cricket-specific data and states as outlined below.
Requirements
Global (all states)
- Tabs should follow the same visual treatment, interaction pattern and behaviour as for football liveblogs
- The liveblog article view should remain the "parent" container for all tabs
- Tabs appear or disappear based on data availability / match state
Pre-match
When line-up data becomes available:
- Display a single "Scorecard" tab
- Populate the Scorecard tab with line-ups and umpires, using the same line-up component and design as football liveblogs
If a cricket liveblog exists but no line-up data is available yet:
- Display only the scores header
Any additional enhancements (e.g. team news) will be added post-migration
| Cricket | Football (for reference) |
|---|---|
| Screenshot to be added | Screenshot to be added |
During match
Display two tabs:
- Live feed
- Scorecard
Live feed tab:
- Contains the existing sports liveblog feed
- No design or behavioural changes
Scorecard tab:
- Retain pre-match content (line-ups and umpires) at the bottom of the tab
- Above the line-ups component, adapt the existing football line-up component to display in-play data for both teams as per design:
- Batter, runs, balls
- Bowler
- Fall of wickets
- If reusing the existing frontend rendering components over this redesigned component simplifies implementation, let's take that approach and add a task to update the design post-migration
- Display team name and innings above the gameplay component for each team
- If a team is yet to bat:
- Omit the team name, innings and gameplay components for that team
- Render them only when data becomes available
| Cricket | Football (for reference) |
|---|---|
| Screenshot to be added | Screenshot to be added |
Post-match
If a match report is available:
- Add a third tab - "Match report"
- Display the article within this tab, following the same behaviour as match reports on football liveblogs
If no match report exists:
- Retain only two tabs "Live feed" and "Scorecard"
| Cricket | Football (for reference) |
|---|---|
| Screenshot to be added | Screenshot to be added |
Acceptance criteria
- Cricket liveblogs render tabs consistent with football liveblog behaviour
- Tabs appear and disappear correctly based on match state and data available
- Live feed remains unchanged in design and fully functional
- Scorecard content updates dynamically as match data becomes available
- Teams that are yet to bat are not displayed in the Scorecard until relevant data exists
- Match report tab is conditionally rendered when an associated match report is available