@times-components/ts-components 1.174.0 → 1.175.0

package/src/components/opta/football/opta-match-stats/momentum/OptaMatchStatsMomentum.stories.tsx

@@ -17,7 +17,7 @@ storiesOf(
   ))
   .add('Momentum (error state with teams)', () => (
     <OptaMatchStatsMomentum
-      matchId="invalid-match"
+      match="invalid-match"
       apiBaseUrl="https://invalid.example.com"
       isApp={true}
       homeTeam="Arsenal"
@@ -27,7 +27,7 @@ storiesOf(
   ))
   .add('Momentum (error state without teams)', () => (
     <OptaMatchStatsMomentum
-      matchId="invalid-match"
+      match="invalid-match"
       apiBaseUrl="https://invalid.example.com"
       isApp={true}
       hasBorder={true}

package/src/components/opta/football/opta-match-stats/momentum/OptaMatchStatsMomentum.tsx

@@ -21,7 +21,7 @@ import { MomentumPlaceholderSvg } from './MomentumPlaceholderSvg';
 
 export const OptaMatchStatsMomentum: React.FC<{
   feed?: MatchMomentumFeed;
-  matchId?: string;
+  match?: string;
   apiBaseUrl?: string;
   isApp?: boolean;
   hasBorder?: boolean;
@@ -30,7 +30,7 @@ export const OptaMatchStatsMomentum: React.FC<{
 }> = React.memo(
   ({
     feed,
-    matchId,
+    match,
     apiBaseUrl,
     isApp = false,
     hasBorder = false,
@@ -38,7 +38,7 @@ export const OptaMatchStatsMomentum: React.FC<{
     awayTeam
   }) => {
     const fetchUrl =
-      matchId && apiBaseUrl ? buildMomentumUrl(apiBaseUrl, matchId) : undefined;
+      match && apiBaseUrl ? buildMomentumUrl(apiBaseUrl, match) : undefined;
 
     // First fetch without polling to determine match status
     const { data: fetchedFeed, loading, error } = useFetchFeed<

package/src/components/opta/football/opta-match-stats/momentum/__tests__/OptaMatchStatsMomentum.test.tsx

@@ -328,7 +328,7 @@ describe('OptaMatchStatsMomentum – error state', () => {
 
   it('renders error message when fetch fails', () => {
     const { getByTestId } = render(
-      <OptaMatchStatsMomentum matchId="123" apiBaseUrl="/api" />
+      <OptaMatchStatsMomentum match="123" apiBaseUrl="/api" />
     );
     expect(getByTestId('error-message')).toHaveTextContent(
       'Momentum data will be available once the match kicks off'
@@ -341,7 +341,7 @@ describe('OptaMatchStatsMomentum – error state', () => {
   it('renders team names when provided', () => {
     const { getByTestId } = render(
       <OptaMatchStatsMomentum
-        matchId="123"
+        match="123"
         apiBaseUrl="/api"
         homeTeam="Arsenal"
         awayTeam="Chelsea"
@@ -354,14 +354,14 @@ describe('OptaMatchStatsMomentum – error state', () => {
 
   it('does not render team names when not provided', () => {
     const { queryByTestId } = render(
-      <OptaMatchStatsMomentum matchId="123" apiBaseUrl="/api" />
+      <OptaMatchStatsMomentum match="123" apiBaseUrl="/api" />
     );
     expect(queryByTestId('error-teams')).toBeNull();
   });
 
   it('renders the placeholder SVG', () => {
     const { container } = render(
-      <OptaMatchStatsMomentum matchId="123" apiBaseUrl="/api" />
+      <OptaMatchStatsMomentum match="123" apiBaseUrl="/api" />
     );
     expect(
       container.querySelector('.momentum-placeholder-svg')

package/src/components/opta/football/opta-match-stats/win-probability/OptaMatchStatsWinProbability.stories.tsx

@@ -107,15 +107,15 @@ storiesOf(
       </div>
     );
   })
-  .add('Fetch by matchId', () => {
-    const matchId = text('Match ID', DEFAULT_MATCH_ID);
+  .add('Fetch by match', () => {
+    const match = text('Match ID', DEFAULT_MATCH_ID);
     const apiBaseUrl = text('API Base URL', DEFAULT_API_BASE_URL);
     const isApp = boolean('isApp', true);
 
     return (
       <div style={{ maxWidth: 600, margin: '0 auto' }}>
         <OptaMatchStatsWinProbability
-          matchId={matchId}
+          match={match}
           apiBaseUrl={apiBaseUrl}
           isApp={isApp}
         />

package/src/components/opta/football/opta-match-stats/win-probability/OptaMatchStatsWinProbability.tsx

@@ -122,7 +122,7 @@ export const OptaMatchStatsWinProbability: React.FC<{
   /** Pass a pre-fetched feed directly (e.g. for testing / SSR). */
   feed?: WinProbabilityFeed;
   /** Match / fixture ID used to build the API URL. */
-  matchId?: string;
+  match?: string;
   /** Base URL for the API (without trailing slash). */
   apiBaseUrl?: string;
   /** Override home team colour. */
@@ -134,15 +134,15 @@ export const OptaMatchStatsWinProbability: React.FC<{
 }> = React.memo(
   ({
     feed,
-    matchId,
+    match,
     apiBaseUrl,
     homeColor = defaultHomeColor,
     awayColor = defaultAwayColor,
     isApp = false
   }) => {
     const fetchUrl =
-      matchId && apiBaseUrl
-        ? buildWinProbabilityUrl(apiBaseUrl, matchId)
+      match && apiBaseUrl
+        ? buildWinProbabilityUrl(apiBaseUrl, match)
         : undefined;
 
     // Initial fetch (no polling) to determine match status

package/src/components/opta/football/opta-match-stats/win-probability/__tests__/OptaMatchStatsWinProbability.test.tsx

@@ -107,7 +107,7 @@ describe('OptaMatchStatsWinProbability', () => {
       error: undefined
     });
     const { getByTestId } = render(
-      <OptaMatchStatsWinProbability matchId="123" apiBaseUrl="/api" />
+      <OptaMatchStatsWinProbability match="123" apiBaseUrl="/api" />
     );
     expect(getByTestId('wp-loading')).toBeInTheDocument();
     expect(getByTestId('wp-placeholder')).toBeInTheDocument();
@@ -120,7 +120,7 @@ describe('OptaMatchStatsWinProbability', () => {
       error: 'Network error'
     });
     const { getByTestId } = render(
-      <OptaMatchStatsWinProbability matchId="123" apiBaseUrl="/api" />
+      <OptaMatchStatsWinProbability match="123" apiBaseUrl="/api" />
     );
     expect(getByTestId('wp-error')).toHaveTextContent('No data found.');
   });

package/src/components/opta/football/opta-match-stats/xG/OptaMatchStatsXG.stories.tsx

@@ -22,7 +22,7 @@ storiesOf(
   })
   .add('xG Group (error state – zero bars)', () => (
     <OptaMatchStatsXGGroup
-      matchId="invalid-match"
+      match="invalid-match"
       apiBaseUrl="https://invalid.example.com"
       isApp={true}
     />

package/src/components/opta/football/opta-match-stats/xG/OptaMatchStatsXG.tsx

@@ -94,7 +94,7 @@ const formatValue = (value: number, isInteger: boolean): string =>
 
 export const OptaMatchStatsXG: React.FC<{
   feed?: MatchExpectedGoalsFeed;
-  matchId?: string;
+  match?: string;
   apiBaseUrl?: string;
   title?: string;
   statKey?: string;
@@ -104,7 +104,7 @@ export const OptaMatchStatsXG: React.FC<{
 }> = React.memo(
   ({
     feed,
-    matchId,
+    match,
     apiBaseUrl,
     title,
     statKey = 'expectedGoals',
@@ -113,8 +113,8 @@ export const OptaMatchStatsXG: React.FC<{
     isApp = false
   }) => {
     const fetchUrl =
-      matchId && apiBaseUrl
-        ? buildExpectedGoalsUrl(apiBaseUrl, matchId)
+      match && apiBaseUrl
+        ? buildExpectedGoalsUrl(apiBaseUrl, match)
         : undefined;
 
     // First fetch without polling to determine match status

package/src/components/opta/football/opta-match-stats/xG/OptaMatchStatsXGGroup.tsx

@@ -31,7 +31,7 @@ const DEFAULT_XG_STATS: XGStatConfig[] = [
 
 export const OptaMatchStatsXGGroup: React.FC<{
   feed?: MatchExpectedGoalsFeed;
-  matchId?: string;
+  match?: string;
   apiBaseUrl?: string;
   stats?: XGStatConfig[];
   homeColor?: TeamColor;
@@ -41,7 +41,7 @@ export const OptaMatchStatsXGGroup: React.FC<{
 }> = React.memo(
   ({
     feed,
-    matchId,
+    match,
     apiBaseUrl,
     stats = DEFAULT_XG_STATS,
     homeColor = defaultHomeColor,
@@ -50,8 +50,8 @@ export const OptaMatchStatsXGGroup: React.FC<{
     hasBorder = false
   }) => {
     const fetchUrl =
-      matchId && apiBaseUrl
-        ? buildExpectedGoalsUrl(apiBaseUrl, matchId)
+      match && apiBaseUrl
+        ? buildExpectedGoalsUrl(apiBaseUrl, match)
         : undefined;
 
     const { data: fetchedFeed, loading, error } = useFetchFeed<

package/src/components/opta/football/opta-match-stats/xG/__tests__/OptaMatchStatsXGGroup.test.tsx

@@ -96,7 +96,7 @@ describe('OptaMatchStatsXGGroup – error state', () => {
 
   it('renders zero-value bars on error', () => {
     const { getAllByText } = render(
-      <OptaMatchStatsXGGroup matchId="123" apiBaseUrl="/api" isApp />
+      <OptaMatchStatsXGGroup match="123" apiBaseUrl="/api" isApp />
     );
     const zeros = getAllByText('0');
     expect(zeros.length).toBeGreaterThanOrEqual(2);
@@ -104,7 +104,7 @@ describe('OptaMatchStatsXGGroup – error state', () => {
 
   it('renders all stat titles on error', () => {
     const { getByText } = render(
-      <OptaMatchStatsXGGroup matchId="123" apiBaseUrl="/api" />
+      <OptaMatchStatsXGGroup match="123" apiBaseUrl="/api" />
     );
     expect(getByText('xG')).toBeInTheDocument();
     expect(getByText('xG from open play')).toBeInTheDocument();