@times-components/ts-components 1.144.1-d88954832f63cdbc40779d5cd4f06c4568affa14.22 → 1.145.1-ffc8fe2350c1f6194dbd798c9b12b0d865cd13fb.0

package/src/components/opta/football/opta-match-stats/commentary/__tests__/OptaMatchStatsCommentary.test.tsx

@@ -11,11 +11,24 @@ jest.mock('@times-components/image', () => ({
 const mockInitSettings = jest.fn();
 const mockInitStyleSheet = jest.fn();
 const mockInitComponent = jest.fn();
-const mockHasMatchEvents = jest.fn();
 
 const mockInitElement = () => {
   const element = document.createElement('div');
-  element.appendChild(document.createTextNode('Widget'));
+  element.className = 'Opta-Root';
+  // Create structure with timestamps to exercise useUpdateTimestamps
+  const list = document.createElement('ul');
+  list.className = 'Opta-Striped';
+  const li = document.createElement('li');
+  const time1 = document.createElement('span');
+  time1.className = 'Opta-Time';
+  time1.innerHTML = ' ';
+  const time2 = document.createElement('span');
+  time2.className = 'Opta-Time';
+  time2.textContent = "45'";
+  li.appendChild(time1);
+  li.appendChild(time2);
+  list.appendChild(li);
+  element.appendChild(list);
   return element;
 };
 
@@ -35,25 +48,47 @@ const requiredProps = {
   match: '2041900'
 };
 
-describe('OptaMatchStatsSummary', () => {
+describe('OptaMatchStatsCommentary', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('should render correctly', async () => {
-    const { asFragment } = render(
-      <OptaMatchStatsCommentary {...requiredProps} />
+  it('renders and initialises widget', async () => {
+    const { asFragment, queryByTestId } = render(
+      <OptaMatchStatsCommentary {...requiredProps} isApp />
     );
 
-    act(() => {
-      mockInitComponent();
-      mockHasMatchEvents();
+    expect(queryByTestId('placeholder')).toBeInTheDocument();
+
+    // allow promises in useEffect chain to resolve
+    await act(async () => {
+      await Promise.resolve();
     });
 
     expect(mockInitSettings).toHaveBeenCalledTimes(1);
     expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
     expect(mockInitComponent).toHaveBeenCalledTimes(1);
-
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('marks empty timestamps via useUpdateTimestamps', async () => {
+    jest.useFakeTimers();
+    const { container } = render(
+      <OptaMatchStatsCommentary {...requiredProps} />
+    );
+
+    await act(async () => {
+      mockInitComponent();
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    const emptyTimes = container.querySelectorAll(
+      '.Opta-Time.Opta-Time--empty'
+    );
+    expect(emptyTimes.length).toBeGreaterThan(0);
+    jest.useRealTimers();
+  });
 });

package/src/components/opta/football/opta-match-stats/commentary/__tests__/__snapshots__/OptaMatchStatsCommentary.test.tsx.snap

@@ -1,22 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OptaMatchStatsSummary should render correctly 1`] = `
+exports[`OptaMatchStatsCommentary renders and initialises widget 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bxivhb gSyDv"
+    class="sc-bxivhb hlADP"
   >
     <h3>
       Commentary
     </h3>
     <div
-      class="sc-ifAKCX kVWUck"
-    />
-  </div>
-  <div
-    class="sc-bwzfXH eSqyJ"
-    data-testid="placeholder"
-  >
-    Placeholder
+      class="sc-ifAKCX kvhXew"
+    >
+      <div
+        class="Opta-Root"
+      >
+        <ul
+          class="Opta-Striped"
+        >
+          <li>
+            <span
+              class="Opta-Time"
+            >
+               
+            </span>
+            <span
+              class="Opta-Time"
+            >
+              45'
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/opta/football/opta-match-stats/shared/styles.ts

@@ -16,35 +16,43 @@ export const WidgetWrapper = styled.div<{
   isApp: boolean;
   roundedCorners?: boolean;
 }>`
-  background-color: ${backgroundColor};
-  color: ${textColor};
-  border: 1px solid ${borderColor};
-  ${props =>
-    props.isApp &&
-    `
+      background-color: ${backgroundColor};
+      color: ${textColor};
+      ${props =>
+        props.isApp &&
+        `
         @media(prefers-color-scheme: dark) {
           background-color: ${darkBackgroundColor} !important;
           color: ${darkTextColor} !important;
-          border: 1px solid ${darkBorderColor};
         }
-      `} border-radius: 8px;
-  overflow: hidden;
-  @media (max-width: ${maxMDBreakpoint}px) {
-    border-radius: ${props =>
-      props.roundedCorners ? '0px 0px 8px 8px' : '0px'};
-  }
-
-  h3 {
-    text-align: center;
-    font-family: ${fonts.headline};
-    font-size: 24px;
-    font-weight: 800;
-    padding-top: 24px;
-    padding-bottom: 8px;
-    margin: 0;
-
-    @media (max-width: ${maxMDBreakpoint}px) {
-      display: none;
-    }
-  }
-`;
+      `}
+    
+      border: 1px solid ${borderColor};
+      border-radius: 8px;
+      overflow: hidden;
+      @media (max-width: ${maxMDBreakpoint}px) {
+        border-radius: ${props =>
+          props.roundedCorners ? '0px 0px 8px 8px' : '0px'};
+      }
+      ${props =>
+        props.isApp &&
+        `
+        @media(prefers-color-scheme: dark) {
+          border-color: ${darkBorderColor};
+        }
+      `}
+    
+      h3 {
+        text-align: center;
+        font-family: ${fonts.headline};
+        font-size: 24px;
+        font-weight: 800;
+        padding-top: 24px;
+        padding-bottom: 8px;
+        margin: 0;
+    
+        @media (max-width: ${maxMDBreakpoint}px) {
+          display: none;
+        }
+      }
+    `;

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

@@ -45,6 +45,13 @@ export const WidgetContainer = styled.div<{
   .Opta-Nav {
     background-color: ${backgroundColor};
     border-bottom: 1px solid ${borderColor};
+    ${props =>
+      props.isApp &&
+      `
+      @media(prefers-color-scheme: dark) {
+        border-color: ${darkBorderColor} !important;
+      }
+    `}
 
     ul {
       display: flex;
@@ -106,10 +113,18 @@ export const WidgetContainer = styled.div<{
           a {
             border: 1px solid ${borderColor};
             border-radius: 100px;
+            ${props =>
+              props.isApp &&
+              `
+                @media(prefers-color-scheme: dark) {
+                  border: 1px solid ${darkBorderColor};
+                }
+            `}
           }
         }
 
         a {
+          -webkit-tap-highlight-color: transparent;
           display: flex;
           align-items: center;
           justify-content: center;

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { WidgetContainer } from '../WidgetContainer';
+
+const HomeColour = { light: '#123456', dark: '#abcdef' };
+const AwayColour = { light: '#654321', dark: '#fedcba' };
+
+describe('OptaMatchStatsGraphs WidgetContainer styles', () => {
+  it('renders default styles and structure', () => {
+    const { container } = render(
+      <WidgetContainer
+        isApp={false}
+        homeTeamColor={HomeColour}
+        awayTeamColor={AwayColour}
+      >
+        <div className="Opta-Nav">
+          <ul>
+            <li>
+              <a href="#">Tab 1</a>
+            </li>
+            <li className="Opta-On">
+              <a href="#">Tab 2</a>
+            </li>
+          </ul>
+        </div>
+        <div className="Opta-Stats-Bars-Text">Shots</div>
+        <div className="Opta-Stats-Bars">
+          <table>
+            <tbody>
+              <tr>
+                <td className="Opta-Outer Opta-Outer-bigger">H</td>
+                <td>
+                  <div className="Opta-Bars-Full">
+                    <div
+                      className="Opta-Percent Opta-Home"
+                      style={{ width: '70%' }}
+                    />
+                    <div
+                      className="Opta-Percent Opta-Away"
+                      style={{ width: '30%' }}
+                    />
+                  </div>
+                </td>
+                <td className="Opta-Outer Opta-Outer-bigger">A</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </WidgetContainer>
+    );
+    expect(container.querySelector('.Opta-Nav')).toBeInTheDocument();
+    expect(
+      container.querySelector('.Opta-Stats-Bars-Text')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.Opta-Percent.Opta-Home')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.Opta-Percent.Opta-Away')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.Opta-Outer.Opta-Outer-bigger')
+    ).toBeInTheDocument();
+  });
+
+  it('renders app styles supporting dark mode', () => {
+    const { container } = render(
+      <WidgetContainer
+        isApp={true}
+        homeTeamColor={HomeColour}
+        awayTeamColor={AwayColour}
+      >
+        <div className="Opta-Cf Opta-js-main" />
+        <div className="Opta-Nav">
+          <ul>
+            <li>
+              <a href="#">Tab</a>
+            </li>
+          </ul>
+        </div>
+        <div className="Opta-Stats-Bars-Text">Passes</div>
+        <div className="Opta-Stats-Bars">
+          <table>
+            <tbody>
+              <tr>
+                <td className="Opta-Outer Opta-Outer-bigger">H</td>
+                <td>
+                  <div className="Opta-Bars-Full">
+                    <div
+                      className="Opta-Percent Opta-Home"
+                      style={{ width: '40%' }}
+                    />
+                    <div
+                      className="Opta-Percent Opta-Away"
+                      style={{ width: '60%' }}
+                    />
+                  </div>
+                </td>
+                <td className="Opta-Outer Opta-Outer-bigger">A</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </WidgetContainer>
+    );
+
+    expect(
+      container.querySelector('.Opta-Cf.Opta-js-main')
+    ).toBeInTheDocument();
+    expect(container.querySelector('.Opta-Nav')).toBeInTheDocument();
+    expect(container.querySelectorAll('.Opta-Percent').length).toBe(2);
+    expect(
+      container.querySelectorAll('.Opta-Outer.Opta-Outer-bigger').length
+    ).toBe(2);
+  });
+});

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

@@ -3,13 +3,13 @@
 exports[`OptaMatchStatsSummary should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bxivhb hZVjBp"
+    class="sc-bxivhb JyPwY"
   >
     <h3>
       Match Stats
     </h3>
     <div
-      class="sc-ifAKCX gIQeKs"
+      class="sc-ifAKCX CKDCL"
     />
   </div>
   <div

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

@@ -7,7 +7,8 @@ import {
   darkTextColor,
   borderColor,
   maxMDBreakpoint,
-  textColor
+  textColor,
+  darkBorderColor
 } from '../shared/styles';
 
 export const WidgetContainer = styled.div<{
@@ -16,17 +17,18 @@ export const WidgetContainer = styled.div<{
   awayTeamColor: TeamColor;
 }>`
   background-color: ${backgroundColor};
+  border: 1px solid ${borderColor};
+  border-radius: 8px;
   ${props =>
     props.isApp &&
     `
     @media(prefers-color-scheme: dark) {
       background-color: ${darkBackgroundColor} !important;
       color: ${darkTextColor} !important;
+      border-color: ${darkBorderColor} !important;
     }
   `}
 
-  border: 1px solid ${borderColor};
-  border-radius: 8px;
   @media (max-width: ${maxMDBreakpoint}px) {
     border-radius: 8px 8px 0 0;
   }
@@ -43,6 +45,14 @@ export const WidgetContainer = styled.div<{
     text-align: center;
     border-bottom: 1px solid ${borderColor};
 
+    ${props =>
+      props.isApp &&
+      `
+      @media(prefers-color-scheme: dark) {
+        border-color: ${darkBorderColor} !important;
+      }
+    `}
+
     // Score row
     tr:nth-of-type(1) {
       order: 2;

package/src/components/opta/football/opta-match-stats/summary/__tests__/WidgetContainer.test.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { WidgetContainer } from '../WidgetContainer';
+
+const HomeColour = { light: '#123456', dark: '#abcdef' };
+const AwayColour = { light: '#654321', dark: '#fedcba' };
+
+describe('OptaMatchSummary WidgetContainer styles', () => {
+  it('renders default styles and header layout', () => {
+    const { container } = render(
+      <WidgetContainer
+        isApp={false}
+        homeTeamColor={HomeColour}
+        awayTeamColor={AwayColour}
+      >
+        <div className="Opta">
+          <div className="Opta_W" />
+        </div>
+        <table className="Opta-MatchHeader">
+          <tbody>
+            <tr>
+              <td className="Opta-Team Opta-Home">Home</td>
+              <td className="Opta-Score Opta-Home">
+                <span>
+                  <span className="Opta-Team-Score">1</span>
+                </span>
+              </td>
+              <td className="Opta-Score Opta-Away">
+                <span>
+                  <span className="Opta-Team-Score">2</span>
+                </span>
+              </td>
+              <td className="Opta-Team Opta-Away">Away</td>
+              <td className="Opta-Divider Opta-Dash">-</td>
+            </tr>
+            <tr className="Opta-Score-Extras">
+              <td>
+                <span className="Opta-Date">Fri 1 Dec</span>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div>
+                  <span className="Opta-MatchHeader-Venue">
+                    <span className="Opta-MatchHeader-VenueLabel">Venue</span>
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div className="Opta-Matchdata" />
+        <div className="Opta-Cf">
+          <ul className="Opta-Events Opta-Home">
+            <li>
+              <span className="Opta-Event-Text Opta-Home">
+                <span className="Opta-Event-Player">Player</span>
+              </span>
+              <span className="Opta-Event-Time">45'</span>
+              <span className="Opta-Icon" />
+            </li>
+          </ul>
+        </div>
+      </WidgetContainer>
+    );
+
+    expect(container.querySelector('.Opta_W')).toBeInTheDocument();
+    expect(
+      container.querySelector('.Opta-MatchHeader tbody')
+    ).toBeInTheDocument();
+    expect(container.querySelector('.Opta-Date')).toBeInTheDocument();
+    expect(
+      container.querySelector('.Opta-MatchHeader-VenueLabel')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.Opta-Events.Opta-Home')
+    ).toBeInTheDocument();
+    expect(container.querySelector('.Opta-Event-Time')).toBeInTheDocument();
+  });
+
+  it('renders app styles and away events layout', () => {
+    const { container } = render(
+      <WidgetContainer
+        isApp={true}
+        homeTeamColor={HomeColour}
+        awayTeamColor={AwayColour}
+      >
+        <table className="Opta-MatchHeader">
+          <tbody>
+            <tr className="Opta-Score-Extras">
+              <td>
+                <abbr className="Opta-Date">Sat 2 Dec</abbr>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div>
+                  <span className="Opta-Competition">League</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div className="Opta-Cf">
+          <ul className="Opta-Events Opta-Away">
+            <li>
+              <span className="Opta-Event-Text Opta-Away">
+                <span className="Opta-Event-Player">Player</span>
+              </span>
+              <span className="Opta-Event-Time">12'</span>
+              <span className="Opta-Icon" />
+            </li>
+          </ul>
+        </div>
+      </WidgetContainer>
+    );
+
+    expect(container.querySelector('.Opta-Competition')).toBeInTheDocument();
+    expect(
+      container.querySelector('.Opta-Events.Opta-Away')
+    ).toBeInTheDocument();
+    expect(container.querySelector('.Opta-Event-Time')).toBeInTheDocument();
+  });
+});

package/src/components/opta/football/opta-match-stats/summary/__tests__/__snapshots__/OptaMatchStatsSummary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsSummary should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-ifAKCX bzhjEs"
+    class="sc-ifAKCX eIVfcL"
   />
   <div
     class="sc-bwzfXH eSqyJ"

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

@@ -15,6 +15,7 @@ import { Container, WidgetContainer } from './styles';
 import { isNationalCompetition } from '../../utils/replaceTeamDetails';
 import { useUpdateTeamDetails } from '../../utils/useUpdateTeamDetails';
 import { useFixturePageLink } from '../../utils/useFixturePageLink';
+import { useAddFixtureNavigation } from '../../utils/useAddFixtureNavigation';
 
 export type OptaSport = 'cricket' | 'rugby' | 'football';
 
@@ -30,6 +31,7 @@ export type OptaFixturesTickerProps = {
   showButtons?: boolean;
   fixturesPageUrl?: string;
   sport: OptaSport;
+  enableMatchStatsNavigation?: boolean;
 };
 
 export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
@@ -44,7 +46,8 @@ export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
     isApp,
     showButtons,
     fixturesPageUrl,
-    sport
+    sport,
+    enableMatchStatsNavigation = false
   }) => {
     const ref = React.createRef<HTMLDivElement>();
     const isNationalComp = isNationalCompetition(competition, sport);
@@ -100,6 +103,15 @@ export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
       !isApp &&
       useFixturePageLink(ref, 'Opta-Room', fixturesPageUrl);
 
+    enableMatchStatsNavigation &&
+      sport === 'football' &&
+      useAddFixtureNavigation({
+        ref,
+        sport,
+        competition,
+        season
+      });
+
     return (
       <Container>
         {!isReady && (
@@ -107,7 +119,12 @@ export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
             <Placeholder />
           </PlaceholderContainer>
         )}
-        <WidgetContainer isApp={isApp} showButtons={showButtons} ref={ref} />
+        <WidgetContainer
+          ref={ref}
+          isApp={isApp}
+          showButtons={showButtons}
+          enableMatchStatsNavigation={enableMatchStatsNavigation}
+        />
       </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 ihtnqS"
+      class="sc-htpNat sc-EHOje hnHrPs"
     />
   </div>
 </DocumentFragment>
@@ -28,7 +28,7 @@ exports[`OptaFixturesTicker with flags should render correctly 1`] = `
       Placeholder
     </div>
     <div
-      class="sc-htpNat sc-EHOje ihtnqS"
+      class="sc-htpNat sc-EHOje hnHrPs"
     />
   </div>
 </DocumentFragment>
@@ -45,7 +45,7 @@ exports[`OptaFixturesTicker without flags should render correctly 1`] = `
       Placeholder
     </div>
     <div
-      class="sc-htpNat sc-EHOje ihtnqS"
+      class="sc-htpNat sc-EHOje hnHrPs"
     />
   </div>
 </DocumentFragment>
@@ -62,7 +62,7 @@ exports[`OptaFixturesTicker without flags should render correctly with fixturesP
       Placeholder
     </div>
     <div
-      class="sc-htpNat sc-EHOje ihtnqS"
+      class="sc-htpNat sc-EHOje hnHrPs"
     />
   </div>
 </DocumentFragment>
@@ -79,7 +79,7 @@ exports[`OptaFixturesTicker without flags should render correctly with isApp pro
       Placeholder
     </div>
     <div
-      class="sc-htpNat sc-EHOje jWTkmX"
+      class="sc-htpNat sc-EHOje jXTwgb"
     />
   </div>
 </DocumentFragment>

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

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