WS-2524: Render sport match data in Live page header on TEST by Isabella-Mitchell · Pull Request #13939 · bbc/simorgh

Isabella-Mitchell · 2026-04-22T12:31:23Z

Resolves JIRA: https://bbc.atlassian.net/browse/WS-2524 - Render sport match data in Live page header on TEST

Summary

The "bare minimum" we need to do to get the Sport Data Header component to render on test. Exploring a very agile way to migrate a PS component.

(Whatever the "bare minimum" is is up for debate - since it's pretty hacky code until it's productionised).

Notes for reviewers
Code inside of

Code changes

What does this do:

Takes the POC and gets it into a "mergeable state"; tests pass and component renders
Does some further UX tweaks on top of the POC to get it looking about right
Allows it to render on live page. Ensures automated A11y checks passes. Replicates A11y criteria of PS.
Ensures all storybook files render (disables chromatic tests)
Limits the component to TEST only.

What does it not do:

Brings component (aka files inside of SportDataHeader/head-to-head-v2) up to our standards - this is handled by a seperate ticket. As a result, sections of code are "commented out" or escaped with ts-expect-error comments since they will be useful for the engineer that does this work.
Handles badges and flags - that is coming in a follow up ticket. (I've left the placeholder in for now)

This

PS

Testing

Testing via storybook. PS have produced extensive storybook coverage of lots of different stories. I recommend reviewers take a look as it will help you understand this component. And you can do a direct comparison to PS. Steps on the subtask ticket.
Testing on local - go to http://localhost:7081/afrique/live/c7gk1vjglxn1t, compare to https://www.bbc.co.uk/sport/football/live/ce847pmy2e7t
(When can also test on preview once the BFF work is done).

Useful Links

Coding Standards
Repository use guidelines
Add Links to useful resources related to this PR if applicable.

Isabella-Mitchell · 2026-04-24T16:04:26Z


+  const sportData = sportDataEventContent?.content?.data?.sportDataEvent;
+  const isSportDataLive = sportDataEventContent?.content?.data?.live;
+  const sportDataTitle = sportDataEventContent?.content?.data?.title;


It's significant here that we're getting the title for the page from the sportDataEvent and not the LivePage itself. We should double check with editorial this is ok (I'm not sure if sportDataEvent title will be in English etc?)

Isabella-Mitchell · 2026-04-24T16:05:51Z

+            )}
+          </Heading>
+          {/* TODO - translations needed. Added H2 for accessibility reasons, matches PS */}
+          <VisuallyHiddenText as="h2">Match Summary</VisuallyHiddenText>


To do - ask editorial to provide this or equivalent

Isabella-Mitchell · 2026-04-24T16:07:45Z

        color: palette.LIVE_LIGHT,
        verticalAlign: 'middle',
-        display: 'inline',
+        position: 'relative',


I've checked storybook and I don't see adding this style `position: 'relative', has had any impact on other formats of the live header.

Copilot

Pull request overview

Introduces an initial (“bare minimum”) integration of a Sport Data Header (Head-to-Head V2) into the WS Next.js Live page, gated to non-LIVE environments (TEST), and adds Storybook stories/static fixtures to exercise the component.

Changes:

Add sportDataEventContent handling in LivePageLayout and render HeadToHeadV2 below the Live page header (TEST-only).
Add/adjust Live page header behaviour/styling when sport data is present (including Live label layout changes).
Add the head-to-head-v2 component implementation plus extensive Storybook fixtures, helpers, and asset placeholders.

Reviewed changes

Copilot reviewed 93 out of 113 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
ws-nextjs-app/pages/[service]/live/[id]/live.stories.tsx	Adds a Live page Storybook story using a fixture containing sport data.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/storybook/helpers/short-name-map.js	Adds a Storybook helper to map full team names to short names.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/storybook/helpers/base-component.jsx	Adds Storybook helper components to build `HeadToHeadV2` props from controls.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/premier-league-venues.json	Adds venue list fixture for Storybook controls.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/suspended.json	Adds transformed event fixture (suspended).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/pre-event/pre-event.json	Adds transformed event fixture (pre-event).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/pre-event/pre-event-no-time-provided.json	Adds transformed event fixture (pre-event, no time).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/pre-event/pre-event-no-teams-provided.json	Adds transformed event fixture (pre-event, no teams).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/pre-event/pre-event-no-teams-or-venue-provided.json	Adds transformed event fixture (pre-event, no teams/venue).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/pre-event/pre-event-just-home-participant.json	Adds transformed event fixture (pre-event, only home team).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/pre-event/pre-event-just-away-participant.json	Adds transformed event fixture (pre-event, only away team).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/pre-event/index.js	Exports the pre-event transformed fixtures.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/postponed.json	Adds transformed event fixture (postponed).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/post-event/post-event.json	Adds transformed event fixture (post-event).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/post-event/pens-aet.json	Adds transformed event fixture (pens after AET).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/post-event/pens-aet-agg.json	Adds transformed event fixture (pens after AET with aggregate).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/post-event/pens-90.json	Adds transformed event fixture (pens after 90).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/post-event/index.js	Exports the post-event transformed fixtures.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/post-event/cancelled.json	Adds transformed event fixture (cancelled, post-event folder).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/post-event/agg-90.json	Adds transformed event fixture (aggregate after 90).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/post-event/aet.json	Adds transformed event fixture (AET).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/second-leg-et.json	Adds transformed event fixture (mid-event, second-leg ET).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/second-leg-aet-pens.json	Adds transformed event fixture (mid-event, second-leg AET going to pens).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/second-half.json	Adds transformed event fixture (mid-event, second half).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/second-half-90.json	Adds transformed event fixture (mid-event, 90-minute variant).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/index.js	Exports the mid-event transformed fixtures.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/in-pens-aet.json	Adds transformed event fixture (in pens after AET).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/in-pens-90.json	Adds transformed event fixture (in pens after 90).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/half-time.json	Adds transformed event fixture (half time).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/first-half-agg.json	Adds transformed event fixture (first half with aggregate).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/first-half-added-time.json	Adds transformed event fixture (first-half added time).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/first-half-90.json	Adds transformed event fixture (first half, 90-minute variant).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/et-first-half.json	Adds transformed event fixture (ET first half).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/before-pens.json	Adds transformed event fixture (before pens).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/before-pens-aet.json	Adds transformed event fixture (before pens after AET).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/mid-event/before-extra-time.json	Adds transformed event fixture (before extra time).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/cancelled.json	Adds transformed event fixture (cancelled).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/static-data/event/transformed/abandoned.json	Adds transformed event fixture (abandoned).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/metadata.json	Adds component metadata (accessibility/AC references).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/index.js	Re-export entrypoint for the component folder.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/helpers/event-summary.js	Adds event summary/period label fallback helpers.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/helpers/event-status-groups.js	Adds helpers for grouping event statuses (fixture/live/result/etc).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/helpers/enums/sport-event-status.js	Adds status enum constants.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/helpers/concise-styles.jsx	Adds a concise-view style helper.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/helpers/colour-styles.js	Adds styling helpers driven by event status.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/helpers/badges/team-badge-config.js	Adds config for when badges should be shown by sport/tournament URN.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/helpers/badges/should-show-team-badges.js	Adds logic to determine whether to show team badges.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/helpers/badges/parse-urn.js	Adds URN parsing utility for badge logic.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/head-to-head-v2.jsx	Adds the main `HeadToHeadV2` component and layout.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/head-to-head-v2.d.ts	Adds TypeScript type definitions for `HeadToHeadV2` and data shape.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/head-to-head-v2-pre-events.stories.tsx	Adds Storybook stories for pre-event variants (chromatic disabled).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/team.jsx	Adds a team block component (name + optional badge).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/team-name.jsx	Adds responsive team name rendering with visually hidden full name.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/sport-badge/tests/mapping.test.js	Adds unit tests for badge mapping/fallback behaviour.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/sport-badge/tests/index.test.jsx	Adds render tests for `SportBadge` component.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/sport-badge/sport-badge.mdx	Adds Storybook docs for `SportBadge`.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/sport-badge/sport-badge.jsx	Adds `SportBadge` component implementation.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/sport-badge/index.js	Adds exports for `SportBadge` and mapping helper.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/sport-badge/badges-map.js	Adds placeholder badge/flag mapping and fallback selection.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/score.jsx	Adds score display component.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/score-details.jsx	Adds HT/FT detail line rendering.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/period.jsx	Adds match period rendering with fallback label logic.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/penalty-scores.jsx	Adds post-event penalty summary line rendering.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/match-progress.jsx	Adds aggregate score and period rendering container.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/key-events.jsx	Adds key events block (home/away) for actions.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/head-to-head-header.jsx	Adds tournament/date header for non-concise view.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/head-to-head-banner.jsx	Adds the main banner grid composition (teams/centre/progress).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/grouped-events.jsx	Adds grouped actions rendering.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/footer.jsx	Adds venue/attendance footer for non-concise view.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/fixture-time.jsx	Adds kick-off time rendering for fixtures.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/conditional-onward-journey-link.jsx	Adds placeholder wrapper for onward journey link behaviour.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/centre.jsx	Adds centre column logic to choose score vs time.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/card.jsx	Adds card icon rendering for action times.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/actions.jsx	Adds actions composition (score details + key events + grouped events).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/actions-time.jsx	Adds action time formatting and accessible text output.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/action.jsx	Adds per-team action list rendering.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/components/action-grid.jsx	Adds grid layout for actions blocks.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/placeholders/placeholder-flag.webp	Adds placeholder flag asset.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/placeholders/placeholder-flag.svg	Adds placeholder flag asset (SVG).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/placeholders/placeholder-badge.svg	Adds placeholder badge asset (SVG).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/yellowcard.webp	Adds football yellow card asset.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/yellowcard.svg	Adds football yellow card asset (SVG).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/second-yellow-card.webp	Adds second yellow card asset.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/second-yellow-card.svg	Adds second yellow card asset (SVG).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/second-yellow-card-match-momentum.webp	Adds match-momentum variant asset.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/second-yellow-card-match-momentum.svg	Adds match-momentum variant asset (SVG).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/red-card.webp	Adds red card asset.
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/red-card.svg	Adds red card asset (SVG).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/football-icon-home-team.webp	Adds football icon asset (home).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/football-icon-home-team.svg	Adds football icon asset (home, SVG).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/football-icon-away-team.webp	Adds football icon asset (away).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/assets/football/football-icon-away-team.svg	Adds football icon asset (away, SVG).
ws-nextjs-app/pages/[service]/live/[id]/SportDataHeader/head-to-head-v2/README.md	Adds component README (from PS source).
ws-nextjs-app/pages/[service]/live/[id]/LivePageLayout.tsx	Wires sport event content into Live page header + renders `HeadToHeadV2` (TEST-only).
ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx	Adds a sport-data-specific background colour style.
ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx	Adds sport-data header rendering mode and a screen-reader heading.
ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.tsx	Adjusts Live label layout when sport data is shown.
ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts	Refactors Live label styling and adds sport-data container layout.
src/app/models/types/theming.ts	Extends palette type with additional grey tokens.
src/app/components/ThemeProvider/palette.ts	Adds GREY_15 and GREY_16 constants.
src/app/components/ThemeProvider/getThemeConfig.ts	Exposes new greys in theme config.

Copilot · 2026-04-24T16:16:15Z

+const shortNamesMap = team => {
+  const map = {
+    Arsenal: 'Arsenal',
+    'Aston Villa': 'Aston Villa',
+    'AFC Bournemouth': 'Bournemouth',
+    Brentford: 'Brentford',
+    'Brighton and Hove Albion': 'Brighton',
+    Chelsea: 'Chelsea',
+    'Crystal Palace': 'Crystal Palace',
+    Everton: 'Everton',
+    Fulham: 'Fulham',
+    'Leeds United': 'Leeds',
+    'Leicester City': 'Leicester',
+    Liverpool: 'Liverpool',
+    'Manchester City': 'Man City',
+    'Manchester United': 'Man Utd',
+    'Newcastle United': 'Newcastle',
+    'Nottingham Forest': 'Nottm Forest',
+    Southampton: 'Southampton',
+    'Tottenham Hotspur': 'Tottenham',
+    'West Ham United': 'West Ham',
+    'Wolverhampton Wanderers': 'Wolves',
+    'Unknown FC': 'Unknown',
+    TBC: 'TBC'
+  };
+  return map[team] || map;
+};


shortNamesMap returns the entire map object when team isn’t found (map[team] || map). Call sites (e.g. shortName: shortNamesMap(team)) expect a string, so unknown teams will render as "[object Object]" and break story controls. Return a sensible string fallback (e.g. the original team, 'Unknown', or map['Unknown FC']) and, if you need the full map for Storybook controls, export it separately.

Copilot · 2026-04-24T16:16:15Z

+  return (
+    <HeadToHeadV2
+      data={updatedStoryBookControls}
+      renderEventSummaryHeading
+      isConciseView="true"
+    />


isConciseView is passed as a string ("true"). This will be truthy but isn’t a boolean and can cause surprising behaviour with strict checks / typings. Pass a real boolean (true) instead.

Copilot · 2026-04-24T16:16:16Z

+// import { css } from '@bbc/web-styled';
+import { css } from '@emotion/styled';
+
+// import { GROUP_3, createSize } from '@bbc/web-gel-foundations';
+
+// eslint-disable-next-line import/no-relative-packages
+import pixelsToRem from '../../../../../../../../src/app/utilities/pixelsToRem';
+
+export const fixedHeightConciseView = css`
+  min-height: '${pixelsToRem(24)}rem';
+  @media (min-width: '${pixelsToRem(600)}rem') {
+    min-height: '${pixelsToRem(32)}rem';
+  }
+`;


This helper imports css from @emotion/styled, but css should come from @emotion/react (or @emotion/css). Also the generated CSS values are wrapped in quotes (e.g. min-height: '1.5rem';), which will be emitted as invalid CSS. Update the import and remove the quotes around interpolated values/media query breakpoints.

Copilot · 2026-04-24T16:16:16Z

+            teamBadgePlaceholderFallbackType={teamBadgePlaceholderFallbackType}
+          />
+          {hasActions && shouldShowActions && <Actions data={data} />}
+          {!isConciseView && <Actions data={data} />}
+          {!isConciseView && (


Actions can be rendered twice in non-concise view when shouldShowActions is true (once via hasActions && shouldShowActions, and again via !isConciseView). Also shouldShowActions={false} is currently ignored for non-concise view because !isConciseView always renders Actions. Consolidate this logic so Actions renders at most once and the prop has a consistent effect.

Copilot · 2026-04-24T16:16:16Z

+  const isStorybook = Boolean(process.env.STORYBOOK); // TO DO - Decide if we want to remove this, it allows us to see a hardcoded placeholder on storybook. Else it does not render
+  const badgeSrc = isStorybook
+    ? 'https://static.files.bbci.co.uk/core/website/assets/static/sport/placeholders/placeholder-badge.4476e22b04.svg'
+    : src.src; // TODO - not sure src will always be an object.
+


getImage currently returns the imported placeholder SVGs, and elsewhere in this PR SVG imports are used directly as <img src={...}> (e.g. card.jsx). Here badgeSrc uses src.src, which will be undefined if the SVG import resolves to a string URL (common in webpack/Next). Make the return type consistent (string vs object) and use the correct value (likely src, not src.src) so badges don’t render with a missing src outside Storybook.

Copilot · 2026-04-24T16:16:16Z

+  // Swapped out a PS function for moment.
+  const matchDate = moment(date).locale('en').format('d MMM YYYY');
+  const day = new Date(date).toLocaleString('en-gb', { weekday: 'short' });
+  const matchTime = moment(date).locale('en').format('HH:mm');


moment(date).format('d MMM YYYY') uses d (day-of-week number 0–6), not day-of-month. This will produce incorrect dates for most fixtures (e.g. Monday becomes “1 ...”). Use the correct token for day-of-month (e.g. D MMM YYYY) or derive the date string consistently without mixing APIs.

Copilot · 2026-04-24T16:16:17Z

 import styles from './styles';
 import { StreamResponse } from './Post/types';
 import { KeyPointsResponse } from './KeyPoints/types';
+import { HeadToHeadV2Data } from './SportDataHeader/head-to-head-v2/head-to-head-v2.d';


This import path looks incorrect: the file in this folder is head-to-head-v2.d.ts, but the module specifier ends with head-to-head-v2.d. TypeScript typically resolves foo.d.ts via import ... from './foo', not ./foo.d, so this is likely a build-time “module not found” error. Import the type from the correct module path.

Suggested change

import { HeadToHeadV2Data } from './SportDataHeader/head-to-head-v2/head-to-head-v2.d';

import { HeadToHeadV2Data } from './SportDataHeader/head-to-head-v2/head-to-head-v2';

Copilot · 2026-04-24T16:16:17Z

+          </Heading>
+          {/* TODO - translations needed. Added H2 for accessibility reasons, matches PS */}
+          <VisuallyHiddenText as="h2">Match Summary</VisuallyHiddenText>
+        </div>


The new screen-reader heading text Match Summary is hard-coded. Even though it’s visually hidden, it’s still user-facing for assistive tech and should be localised like other UI strings. Please source it from the service translations/vocab system (or pass it in) rather than inlining English.

alex-magana and others added 30 commits April 9, 2026 22:03

Add sport data fetching

b7fd2d7

Add sport data fetcher module

f1985ce

Add Head2HeadV2 component to Simorgh

418821d

Setup sport header auxiliary components

1d0c069

Add sport-badge helper

e68d218

Migrate Team component

43a687b

Add MatchProgress component

ee98fff

Add PenaltyScores component

a7739d9

Fix imports

fc2f97e

Fix imports

36eb8f1

Fix styling formatting

0f5b7f6

Fix Team component

cee7628

Fix Centre component

af53e4f

Fix MatchProgress component

939258b

Fix PenaltyScores component

1717b73

Fix header styles

07415ef

WS-2524: Removes POC fetcher. Types response

4c4f456

WS-2524: Adds fixture data

634d8da

WS-2524: Lint

6d09d32

WS-2542: Add fixture for status stories

d1a90fc

WS-2524: Lint

ca121f4

WS-2524: Updates tests so they run (pt 1)

1fbfc12

WS-2524: Updates tests so they run (pt 2) [copilot]

0100e00

WS-2524: Updates tests so they run (pt 3) [copilot]

816fc66

WS-2524: Remove surplus fixture data

205c017

WS-2524: Tidies

e8be0c3

WS-2524: Updates unit tests so they run [copilot]

73baa1e

WS-2524: Adds mid event stories

7f41928

WS-2524: Gets storybook files rendering

daddfa5

WS-2524: Tidies

85b38fb

Isabella-Mitchell added 8 commits April 22, 2026 13:30

WS-2524: Tidies

a1e7ef5

WS-2524: Adds page level story

ffe0c33

WS-2524: Tidies

1cf55de

WS-2524: Condenses stories

b9f989e

WS-2524: Removes fixture data

2fa0378

WS-2524: Tidies

581ad25

WS-2524: Adds visually hidden headingS

de274a2

WS-2524: Only render on test env. Adds unit test coverage

a3d591d

Isabella-Mitchell changed the title ~~Ws 2524 sports header front end render~~ WS-2524: Render sport match data in Live page header on TEST Apr 22, 2026

Isabella-Mitchell added 14 commits April 23, 2026 12:58

WS-2524: Adds colours to palette

b8a72b3

WS-2524: Adds live label header to Sports Data live page

89378ae

WS-2524: Refactors styles

a305f9d

WS-2524: Removes static assets

8329f1a

WS-2524: Tidy up post migration

7b54734

WS-2524: Permits placeholder to render on Storybook

610ab38

WS-2524: Permits placeholder to render on Storybook

1d5abb0

WS-2524: Uses SportData Live status and Title on livePage

ad1a4a7

WS-2524: Fixes title order for A11y. Temp hardcodes a translation

e44efe2

WS-2524: Temp: overrides fixture data so local asset is live

5f83367

WS-2524: Updates storybook image handling

f8d668f

WS-2524: Updates unit tests

3afa12a

WS-2524: Improves styling and spacing

bc2d7f8

WS-2524: Updates styles

9c7fdc8

Isabella-Mitchell commented Apr 24, 2026

View reviewed changes

Isabella-Mitchell marked this pull request as ready for review April 24, 2026 16:09

Copilot AI review requested due to automatic review settings April 24, 2026 16:09

Copilot started reviewing on behalf of Isabella-Mitchell April 24, 2026 16:10 View session

Copilot AI reviewed Apr 24, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WS-2524: Render sport match data in Live page header on TEST#13939

WS-2524: Render sport match data in Live page header on TEST#13939
Isabella-Mitchell wants to merge 56 commits intolatestfrom
WS-2524-sports-header-front-end-render

Isabella-Mitchell commented Apr 22, 2026 •

edited

Loading

Uh oh!

Isabella-Mitchell Apr 24, 2026

Uh oh!

Isabella-Mitchell Apr 24, 2026

Uh oh!

Isabella-Mitchell Apr 24, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	import { HeadToHeadV2Data } from './SportDataHeader/head-to-head-v2/head-to-head-v2.d';
	import { HeadToHeadV2Data } from './SportDataHeader/head-to-head-v2/head-to-head-v2';

Conversation

Isabella-Mitchell commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Code changes

Testing

Useful Links

Uh oh!

Isabella-Mitchell Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Isabella-Mitchell Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Isabella-Mitchell Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Isabella-Mitchell commented Apr 22, 2026 •

edited

Loading