@times-components/ts-components 1.160.1 → 1.161.0

package/src/components/opta/football/opta-match-stats/stats-graphs/WidgetContainer.tsx

@@ -242,6 +242,8 @@ export const WidgetContainer = styled.div<{
     }
     @media (max-width: ${maxMDBreakpoint}px) {
       font-weight: 500;
+      height: auto !important;
+      min-height: 30px;
       // Stops labels overlapping stat numbers
       padding-inline: 60px !important;
     }

package/src/components/opta/football/opta-match-stats/stats-graphs/__tests__/__snapshots__/OptaMatchStatsGraphs.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaMatchStatsSummary should render correctly 1`] = `
     class="sc-bxivhb counz"
   >
     <div
-      class="sc-ifAKCX hItLyT"
+      class="sc-ifAKCX kJAhYw"
     />
   </div>
   <div

package/src/components/opta/shared/fixtures-ticker/OptaFixturesTicker.tsx

@@ -31,7 +31,6 @@ export type OptaFixturesTickerProps = {
   showButtons?: boolean;
   fixturesPageUrl?: string;
   sport: OptaSport;
-  enableMatchStatsNavigation?: 'true' | 'false';
   matchStatsBasePath?: string;
 };
 
@@ -48,7 +47,6 @@ export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
     showButtons,
     fixturesPageUrl,
     sport,
-    enableMatchStatsNavigation = 'false',
     matchStatsBasePath
   }) => {
     const ref = React.createRef<HTMLDivElement>();
@@ -105,8 +103,7 @@ export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
       !isApp &&
       useFixturePageLink(ref, 'Opta-Room', fixturesPageUrl);
 
-    enableMatchStatsNavigation === 'true' &&
-      sport === 'football' &&
+    sport === 'football' &&
       useAddFixtureNavigation({
         ref,
         sport,
@@ -122,12 +119,7 @@ export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
             <Placeholder />
           </PlaceholderContainer>
         )}
-        <WidgetContainer
-          ref={ref}
-          isApp={isApp}
-          showButtons={showButtons}
-          enableMatchStatsNavigation={enableMatchStatsNavigation === 'true'}
-        />
+        <WidgetContainer ref={ref} isApp={isApp} showButtons={showButtons} />
       </Container>
     );
   }

package/src/components/opta/shared/fixtures-ticker/__tests__/__snapshots__/OptaFixturesTicker.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`OptaFixturesTicker rugby should render correctly 1`] = `
       Placeholder
     </div>
     <div
-      class="sc-htpNat sc-EHOje hnHrPs"
+      class="sc-htpNat sc-EHOje hGWwCO"
     />
   </div>
 </DocumentFragment>
@@ -28,7 +28,7 @@ exports[`OptaFixturesTicker with flags should render correctly 1`] = `
       Placeholder
     </div>
     <div
-      class="sc-htpNat sc-EHOje hnHrPs"
+      class="sc-htpNat sc-EHOje hGWwCO"
     />
   </div>
 </DocumentFragment>
@@ -45,7 +45,7 @@ exports[`OptaFixturesTicker without flags should render correctly 1`] = `
       Placeholder
     </div>
     <div
-      class="sc-htpNat sc-EHOje hnHrPs"
+      class="sc-htpNat sc-EHOje hGWwCO"
     />
   </div>
 </DocumentFragment>
@@ -62,7 +62,7 @@ exports[`OptaFixturesTicker without flags should render correctly with fixturesP
       Placeholder
     </div>
     <div
-      class="sc-htpNat sc-EHOje hnHrPs"
+      class="sc-htpNat sc-EHOje hGWwCO"
     />
   </div>
 </DocumentFragment>
@@ -79,7 +79,7 @@ exports[`OptaFixturesTicker without flags should render correctly with isApp pro
       Placeholder
     </div>
     <div
-      class="sc-htpNat sc-EHOje jXTwgb"
+      class="sc-htpNat sc-EHOje nwAwg"
     />
   </div>
 </DocumentFragment>

package/src/components/opta/shared/fixtures-ticker/styles.ts

@@ -48,7 +48,6 @@ export const WidgetContainerOverride = styled(WidgetContainerBase)`
 export const WidgetContainer = styled(WidgetContainerBase)<{
   isApp?: boolean;
   showButtons?: boolean;
-  enableMatchStatsNavigation?: boolean;
 }>`
 
 
@@ -206,14 +205,10 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
     display: flex;
     flex-direction: column;
 
-    ${({ enableMatchStatsNavigation }) =>
-      enableMatchStatsNavigation &&
-      `
-      &:hover {
-        cursor: pointer;
-      }
-    `}
-    
+    &[data-has-fixtures-page-link='true']:hover {
+      cursor: pointer;
+    }
+
     > div {
       background-color: white !important;
     }

package/src/components/opta/utils/__tests__/addFixturesPageLink.test.tsx

@@ -49,5 +49,6 @@ describe('addFixturesPageLink', () => {
     expect(
       (anchorElement.querySelector('span') as HTMLElement).textContent
     ).toBe('Full Fixtures & Results');
+    expect(element.getAttribute('data-has-fixtures-page-link')).toBe('true');
   });
 });

package/src/components/opta/utils/__tests__/useAddFixtureNavigation.test.tsx

@@ -232,4 +232,26 @@ describe('useAddFixtureNavigation', () => {
     const fixture = container.querySelector('.Opta-fixture') as any;
     expect(fixture._optaClickBound).toBe(true);
   });
+
+  it('does not bind click handler for PreMatch or Abandoned fixtures', () => {
+    const html = `
+      <div class="Opta-fixture" data-match="2561904" data-period="PreMatch">
+        <span class="Opta-Team Opta-Home Opta-Team-123"></span>
+        <span class="Opta-Team Opta-Away Opta-Team-456"></span>
+      </div>
+      <div class="Opta-fixture" data-match="2561905" data-period="Abandoned">
+        <span class="Opta-Team Opta-Home Opta-Team-123"></span>
+        <span class="Opta-Team Opta-Away Opta-Team-456"></span>
+      </div>
+    `;
+
+    renderFixtures(html);
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    const fixtures = container.querySelectorAll('.Opta-fixture');
+    expect((fixtures[0] as any)._optaClickBound).toBeUndefined();
+    expect((fixtures[1] as any)._optaClickBound).toBeUndefined();
+  });
 });

package/src/components/opta/utils/addFixturesPageLink.ts

@@ -22,4 +22,5 @@ export const addFixturesPageLink = (element: Element, pageUrl: string = '') => {
 
   fixturesPageUrlWrapper.appendChild(link);
   element.appendChild(fixturesPageUrlWrapper);
+  element.setAttribute('data-has-fixtures-page-link', 'true');
 };

package/src/components/opta/utils/useAddFixtureNavigation.ts

@@ -70,6 +70,11 @@ const updateTimestamps = (
         return;
       }
 
+      // Only allow navigation for Premier League games with stats available.
+      if (['PreMatch', 'Abandoned'].includes(status) || competition !== '8') {
+        return;
+      }
+
       const safeWindow = window as any;
       const isIOS =
         safeWindow.webkit &&
@@ -80,14 +85,18 @@ const updateTimestamps = (
 
       const baseMatchStatsPath =
         matchStatsBasePath || `/sport/${sport}/match-stats`;
-      const navigationUrl =
+      let navigationUrl =
         `${baseMatchStatsPath}?competition=${competition}` +
         `&season=${season}` +
         `&match=${match}` +
         `&status=${status}` +
         `&homeTeam=${homeTeam}` +
-        `&awayTeam=${awayTeam}` +
-        '&enableMatchStats=true';
+        `&awayTeam=${awayTeam}`;
+
+      if (baseMatchStatsPath.includes('world-cup-2026')) {
+        navigationUrl += '&enableMatchStats=true';
+      }
+
       const appMessage = {
         type: 'openPage',
         title: 'Football',
@@ -105,6 +114,7 @@ const updateTimestamps = (
           window.location.href = navigationUrl;
         }
       });
+      el.setAttribute('data-has-fixtures-page-link', 'true');
       (el as any)._optaClickBound = true;
       clearInterval(updateTimestampsInterval);
     });

package/src/components/trip-cards/__tests__/index.test.tsx

@@ -79,7 +79,27 @@ describe('TripCards', () => {
     titleurl: 'https://example.com'
   };
 
+  const RealDate = global.Date;
+
   beforeEach(() => {
+    const fixedDate = new RealDate('2025-12-01T00:00:00Z');
+    // tslint:disable-next-line
+    const MockDate = class extends RealDate {
+      constructor(...args: any[]) {
+        if (args.length === 0) {
+          super(fixedDate.getTime());
+        } else {
+          // @ts-ignore
+          super(...args);
+        }
+      }
+
+      // tslint:disable-next-line
+      static now() {
+        return fixedDate.getTime();
+      }
+    } as DateConstructor;
+    global.Date = MockDate;
     jest.clearAllMocks();
 
     // Mock matchMedia for each test
@@ -110,6 +130,10 @@ describe('TripCards', () => {
     });
   });
 
+  afterEach(() => {
+    global.Date = RealDate;
+  });
+
   describe('Mock Data Mode', () => {
     it('renders cards when useMockData is true', async () => {
       render(<TripCards element={mockElement} useMockData={true} />);