@times-components/ts-components 1.145.1-777882a8b99dc7733f00b94202a91fa8b7dc2a7e.1 → 1.145.1-82bc6796129e892c1eb22c6257c5e3809c159767.3

package/src/components/opta/football/opta-match-stats/matchday-live/__tests__/MobileWidget.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+jest.mock('@times-components/image', () => ({
+  Placeholder: () => <>Placeholder</>
+}));
+
+const mockInitSettings = jest.fn();
+const mockInitStyleSheet = jest.fn();
+const mockInitComponent = jest.fn();
+
+const mockInitElement = () => {
+  const element = document.createElement('div');
+  element.appendChild(document.createTextNode('Widget'));
+  return element;
+};
+
+jest.mock('../../../../utils/config', () => ({
+  initSettings: mockInitSettings,
+  initStyleSheet: mockInitStyleSheet,
+  initScript: () => Promise.resolve({}),
+  initElement: mockInitElement,
+  initComponent: mockInitComponent
+}));
+
+import { MobileWidget } from '../MobileWidget';
+
+const requiredProps = {
+  season: '2020',
+  competition: '3',
+  match: '2041900',
+  homeTeamName: 'Liverpool',
+  awayTeamName: 'Manchester City'
+};
+
+describe('MobileWidget navigation buttons state', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with home active and toggles to away on click', async () => {
+    render(<MobileWidget {...requiredProps} />);
+
+    const homeBtn = screen.getByRole('button', { name: 'Liverpool' });
+    const awayBtn = screen.getByRole('button', { name: 'Manchester City' });
+    expect(homeBtn).toHaveClass('home');
+    expect(homeBtn).toHaveClass('active');
+    expect(awayBtn).toHaveClass('away');
+    expect(awayBtn).not.toHaveClass('active');
+
+    fireEvent.click(awayBtn);
+    expect(awayBtn).toHaveClass('active');
+    expect(homeBtn).not.toHaveClass('active');
+
+    expect(homeBtn).toHaveClass('home');
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+    // Placeholder may still be present during async; assert wrapper exists
+    expect(screen.getByTestId('mobile-navigation-wrapper')).toBeInTheDocument();
+
+    fireEvent.click(homeBtn);
+    expect(homeBtn).toHaveClass('active');
+    expect(awayBtn).not.toHaveClass('active');
+    expect(awayBtn).toHaveClass('away');
+  });
+});

package/src/components/opta/football/opta-match-stats/matchday-live/__tests__/__snapshots__/OptaMatchStatsMatchdayLive.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`OptaMatchStatsMatchdayLive should render correctly 1`] = `
         Line-ups
       </h3>
       <div
-        class="sc-ifAKCX iZLINp"
+        class="sc-ifAKCX hfZGOd"
       />
     </div>
     <div
@@ -43,10 +43,10 @@ exports[`OptaMatchStatsMatchdayLive should render correctly 1`] = `
           </button>
         </div>
         <div
-          class="home-widget-container sc-ifAKCX iZLINp"
+          class="home-widget-container sc-ifAKCX hfZGOd"
         />
         <div
-          class="away-widget-container sc-ifAKCX iZLINp"
+          class="away-widget-container sc-ifAKCX hfZGOd"
         />
         <div
           class="sc-bwzfXH eSqyJ"

package/src/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.tsx

@@ -253,9 +253,8 @@ export const WidgetContainer = styled.div<{
         height: auto;
 
         .Opta-Sub {
-          display: grid;
-          grid-template-columns: auto 16px auto auto;
-          grid-template-rows: auto auto;
+          display: flex;
+          align-items: center;
 
           &.Opta-Home {
             span.Opta-Circle {
@@ -296,14 +295,14 @@ export const WidgetContainer = styled.div<{
           }
 
           span.Opta-Circle {
-            grid-column: 1 / 1;
-            grid-row: 1 / 3;
             background-color: ${backgroundColor};
             font-family: ${fonts.headline};
             font-weight: 800;
             font-size: 16px;
             line-height: 112.99999%;
             margin-bottom: 0;
+            min-width: 32px;
+            margin-right: 12px;
 
             ${props =>
               props.isApp &&
@@ -314,15 +313,12 @@ export const WidgetContainer = styled.div<{
             `};
 
             & + span.Opta-PlayerName {
-              grid-column: 3 / 4;
-              grid-row: 1 / 2;
-              padding-right: 8px;
+              padding-right: 4px;
               width: max-content;
               font-size: 14px !important;
+              white-space: nowrap;
 
               & + span.Opta-PlayerName {
-                grid-column: 4 / 5;
-                grid-row: 1 / 2;
                 width: max-content;
                 font-size: 14px !important;
               }
@@ -337,10 +333,9 @@ export const WidgetContainer = styled.div<{
           }
 
           span.Opta-MatcheventsIcons {
-            grid-column: 3 / 5;
-            grid-row: 2 / 3;
             display: flex;
             gap: 4px;
+            margin-top: 0;
           }
         }
       }
@@ -428,6 +423,7 @@ export const WidgetContainer = styled.div<{
       grid-template-rows: 1fr;
       padding-inline: 32px;
       padding-block: 32px;
+      padding-bottom: 16px;
       ${props =>
         props.isApp &&
         `
@@ -463,7 +459,7 @@ export const WidgetContainer = styled.div<{
         color: ${textColor} !important;
         font-family: ${fonts.headline} !important;
         font-weight: 800;
-        font-size: 36px;
+        font-size: 28px;
         line-height: 112.999%;
         padding-bottom: 4px;
       }
@@ -475,6 +471,26 @@ export const WidgetContainer = styled.div<{
         line-height: 112.999%;
       }
     }
+
+    .Opta-Close {
+      background: none !important;
+      top: 16px !important;
+      right: 16px !important;
+      position: relative;
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        content: '\\00D7';
+        font-size: 32px;
+        color: ${textColor};
+      }
+    }
   }
 
   // Mobile styles

package/src/components/opta/football/opta-match-stats/matchday-live/styles/__tests__/NavigationWrapper.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NavigationWrapper } from '../NavigationWrapper';
+
+const HomeColour = { light: '#123456', dark: '#abcdef' };
+const AwayColour = { light: '#654321', dark: '#fedcba' };
+
+describe('Matchday Live NavigationWrapper', () => {
+  it('renders with active home', () => {
+    const { container } = render(
+      <NavigationWrapper
+        isApp={false}
+        activeTeam="home"
+        homeTeamColor={HomeColour}
+        awayTeamColor={AwayColour}
+      >
+        <div className="navigation-buttons">
+          <button className="active home">Home</button>
+          <button className="away">Away</button>
+        </div>
+        <div className="home-widget-container">Home widget</div>
+        <div className="away-widget-container">Away widget</div>
+      </NavigationWrapper>
+    );
+
+    expect(container.querySelector('.navigation-buttons')).toBeInTheDocument();
+    expect(
+      container.querySelector('.navigation-buttons .active.home')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.home-widget-container')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.away-widget-container')
+    ).toBeInTheDocument();
+  });
+
+  it('renders with active away and isApp true', () => {
+    const { container } = render(
+      <NavigationWrapper
+        isApp={true}
+        activeTeam="away"
+        homeTeamColor={HomeColour}
+        awayTeamColor={AwayColour}
+      >
+        <div className="navigation-buttons">
+          <button className="home">Home</button>
+          <button className="active away">Away</button>
+        </div>
+        <div className="home-widget-container">Home widget</div>
+        <div className="away-widget-container">Away widget</div>
+      </NavigationWrapper>
+    );
+
+    expect(container.querySelector('.navigation-buttons')).toBeInTheDocument();
+    expect(
+      container.querySelector('.navigation-buttons .active.away')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.home-widget-container')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.away-widget-container')
+    ).toBeInTheDocument();
+  });
+});

package/src/components/opta/football/opta-match-stats/matchday-live/styles/__tests__/WidgetContainer.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { WidgetContainer } from '../WidgetContainer';
+
+describe('Matchday Live WidgetContainer', () => {
+  const baseProps = {
+    isApp: true,
+    homeTeamColor: { light: '#000000', dark: '#a19c9cff' },
+    awayTeamColor: { light: '#007A3F', dark: '#007A3F' }
+  };
+
+  it('generates styles', () => {
+    const { container } = render(
+      <WidgetContainer {...baseProps}>
+        <div className="Opta">
+          <div className="Opta_W">content</div>
+        </div>
+      </WidgetContainer>
+    );
+    expect(container.querySelector('.Opta > .Opta_W')).toBeTruthy();
+  });
+
+  it('generates dark-mode styles under .Opta-Overlay .Opta-Flex', () => {
+    const { container } = render(
+      <WidgetContainer {...baseProps}>
+        <div className="Opta-Overlay">
+          <div className="Opta-Flex">flex</div>
+        </div>
+      </WidgetContainer>
+    );
+    expect(container.querySelector('.Opta-Overlay .Opta-Flex')).toBeTruthy();
+  });
+
+  it('applies home-widget-container styles', () => {
+    const { container } = render(
+      <WidgetContainer {...baseProps} className="home-widget-container">
+        <div className="Opta-MatchHeader">
+          <div className="Opta-Away">Away Team</div>
+        </div>
+      </WidgetContainer>
+    );
+    expect(
+      container.querySelector(
+        '.home-widget-container .Opta-MatchHeader .Opta-Away'
+      )
+    ).toBeTruthy();
+  });
+
+  it('applies away-widget-container styles', () => {
+    const { container } = render(
+      <WidgetContainer {...baseProps} className="away-widget-container">
+        <div className="Opta-MatchHeader">
+          <div className="Opta-Home">Home Team</div>
+        </div>
+      </WidgetContainer>
+    );
+    expect(
+      container.querySelector(
+        '.away-widget-container .Opta-MatchHeader .Opta-Home'
+      )
+    ).toBeTruthy();
+  });
+});

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

@@ -26,7 +26,7 @@ const showcase = {
           <OptaMatchStatsSummary
             season="2025"
             competition="8"
-            match="2561901"
+            match="2562044"
             isApp
           />
         </>

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

@@ -72,7 +72,7 @@ export const OptaMatchStatsSummary: React.FC<{
               show_competition_name: true,
               competition_naming: 'full',
               team_naming: 'full',
-              player_naming: 'initial',
+              player_naming: 'last_name',
               show_live: false,
               show_logo: false,
               show_title: false

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

@@ -316,14 +316,23 @@ export const WidgetContainer = styled.div<{
           display: flex;
           text-align: right;
         }
+
+        &.Opta-Home {
+          .Opta-Event-Player {
+            text-align: left;
+          }
+        }
+
+        &.Opta-Away {
+          .Opta-Event-Player {
+            text-align: right;
+          }
+        }
       }
 
       .Opta-Event-Text {
         display: flex;
         align-items: center;
-        .Opta-Event-Player {
-          text-align: left;
-        }
 
         &.Opta-Home {
           li {

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 eIVfcL"
+    class="sc-ifAKCX hkuAFt"
   />
   <div
     class="sc-bwzfXH eSqyJ"