@times-components/ts-components 1.146.2-be27d508c972211ad80599875cd69c63bf67d4b1.45 → 1.146.2-e5795a0ef59e2adb61ba52aeb7332fda4405cb7a.4

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

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsCommentary renders and initialises widget 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bxivhb hlADP"
+    class="sc-bxivhb eKHCQT"
   >
     <h3>
       Commentary

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

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import { Placeholder } from '@times-components/image';
+import {
+  initSettings,
+  initStyleSheet,
+  initScript,
+  initElement,
+  initComponent
+} from '../../../utils/config';
+import { PlaceholderContainer } from '../../../shared/shared-styles';
+import { WidgetContainer } from './styles/WidgetContainer';
+import { WidgetWrapper } from '../shared/styles';
+import { TeamColor } from '../shared/types';
+
+export const DesktopWidget: React.FC<{
+  season: string;
+  competition: string;
+  match: string;
+  isApp?: boolean;
+  homeTeamColor?: TeamColor;
+  awayTeamColor?: TeamColor;
+}> = React.memo(
+  ({
+    season,
+    competition,
+    match,
+    isApp = false,
+    homeTeamColor = { light: '#000000', dark: '#a19c9cff' },
+    awayTeamColor = { light: '#007A3F', dark: '#007A3F' }
+  }) => {
+    const ref = React.createRef<HTMLDivElement>();
+    const [isReady, setIsReady] = useState<boolean>(false);
+
+    useEffect(() => {
+      const sport = 'football';
+
+      initSettings();
+      initStyleSheet(sport);
+      initScript()
+        .then(() => {
+          if (ref.current) {
+            ref.current.innerHTML = initElement('opta-widget', {
+              sport,
+              widget: 'matchday_live',
+              season,
+              competition,
+              match,
+              template: 'normal',
+              live: true,
+              orientation: 'horizontal',
+              side: 'both',
+              show_match_header: true,
+              show_crests: true,
+              show_pitch_crests: false,
+              show_team_formation: true,
+              show_score: false,
+              show_halftime_score: false,
+              show_competition_name: false,
+              show_date: false,
+              date_format: 'dddd D MMMM YYYY',
+              narrow_date_format: 'DD/MM/YY',
+              show_referee: true,
+              show_venue: true,
+              show_attendance: true,
+              show_images: false,
+              show_pitch_images: false,
+              show_team_sheets: false,
+              show_event_icons: true,
+              show_player_names: true,
+              show_player_stats: true,
+              show_subs: 'all',
+              competition_naming: 'brief',
+              team_naming: 'full',
+              player_naming: 'last_name',
+              show_live: false,
+              show_logo: false,
+              show_title: false,
+              breakpoints: '400, 700'
+            }).outerHTML;
+
+            initComponent();
+          }
+        })
+        .then(() => {
+          setIsReady(true);
+        });
+    }, []);
+
+    return (
+      <>
+        <WidgetWrapper isApp={isApp} className="matchday-live-widget-desktop">
+          <h3>Line-ups</h3>
+          <WidgetContainer
+            ref={ref}
+            isApp={isApp}
+            homeTeamColor={homeTeamColor}
+            awayTeamColor={awayTeamColor}
+          />
+        </WidgetWrapper>
+        {!isReady && (
+          <PlaceholderContainer data-testid="placeholder">
+            <Placeholder />
+          </PlaceholderContainer>
+        )}
+      </>
+    );
+  }
+);

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

@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import { Placeholder } from '@times-components/image';
+import {
+  initSettings,
+  initStyleSheet,
+  initScript,
+  initElement,
+  initComponent
+} from '../../../utils/config';
+import { PlaceholderContainer } from '../../../shared/shared-styles';
+import { TeamColor } from '../shared/types';
+import { NavigationWrapper } from './styles/NavigationWrapper';
+import { WidgetContainer } from './styles/WidgetContainer';
+
+const widgetOptions = {
+  widget: 'matchday_live',
+  template: 'normal',
+  live: true,
+  orientation: 'vertical',
+  show_match_header: true,
+  show_crests: false,
+  show_pitch_crests: false,
+  show_team_formation: true,
+  show_score: false,
+  show_halftime_score: false,
+  show_competition_name: false,
+  show_date: false,
+  date_format: 'dddd D MMMM YYYY',
+  narrow_date_format: 'DD/MM/YY',
+  show_referee: true,
+  show_venue: false,
+  show_attendance: false,
+  show_images: false,
+  show_pitch_images: false,
+  show_team_sheets: false,
+  show_event_icons: true,
+  show_player_names: true,
+  show_player_stats: true,
+  show_subs: 'all',
+  competition_naming: 'brief',
+  team_naming: 'full',
+  player_naming: 'last_name',
+  show_live: false,
+  show_logo: false,
+  show_title: false
+};
+
+export const MobileWidget: React.FC<{
+  season: string;
+  competition: string;
+  match: string;
+  isApp?: boolean;
+  homeTeamColor?: TeamColor;
+  awayTeamColor?: TeamColor;
+  homeTeamName: string;
+  awayTeamName: string;
+}> = React.memo(
+  ({
+    season,
+    competition,
+    match,
+    isApp = false,
+    homeTeamColor = { light: '#000000', dark: '#a19c9cff' },
+    awayTeamColor = { light: '#007A3F', dark: '#007A3F' },
+    homeTeamName,
+    awayTeamName
+  }) => {
+    const homeRef = React.createRef<HTMLDivElement>();
+    const awayRef = React.createRef<HTMLDivElement>();
+    const [isReady, setIsReady] = useState(false);
+    const [activeTeam, setActiveTeam] = useState<'home' | 'away'>('home');
+
+    useEffect(() => {
+      const sport = 'football';
+
+      initSettings();
+      initStyleSheet(sport);
+      initScript()
+        .then(() => {
+          if (homeRef.current) {
+            homeRef.current.innerHTML = initElement('opta-widget', {
+              ...widgetOptions,
+              sport,
+              season,
+              competition,
+              match,
+              side: 'home'
+            }).outerHTML;
+            initComponent();
+          }
+        })
+        .then(() => {
+          if (awayRef.current) {
+            awayRef.current.innerHTML = initElement('opta-widget', {
+              ...widgetOptions,
+              sport,
+              season,
+              competition,
+              match,
+              side: 'away'
+            }).outerHTML;
+            initComponent();
+          }
+        })
+        .finally(() => {
+          setIsReady(true);
+        });
+    }, []);
+
+    return (
+      <>
+        <div className="matchday-live-widget-mobile">
+          <NavigationWrapper
+            data-testid="mobile-navigation-wrapper"
+            activeTeam={activeTeam}
+            homeTeamColor={homeTeamColor}
+            awayTeamColor={awayTeamColor}
+            isApp={isApp}
+          >
+            <div className="navigation-buttons">
+              <button
+                className={activeTeam === 'home' ? 'active home' : 'home'}
+                onClick={() => setActiveTeam('home')}
+              >
+                {homeTeamName}
+              </button>
+              <button
+                className={activeTeam === 'away' ? 'active away' : 'away'}
+                onClick={() => setActiveTeam('away')}
+              >
+                {awayTeamName}
+              </button>
+            </div>
+            <WidgetContainer
+              className="home-widget-container"
+              ref={homeRef}
+              isApp={isApp}
+              homeTeamColor={homeTeamColor}
+              awayTeamColor={awayTeamColor}
+            />
+            <WidgetContainer
+              className="away-widget-container"
+              ref={awayRef}
+              isApp={isApp}
+              homeTeamColor={homeTeamColor}
+              awayTeamColor={awayTeamColor}
+            />
+            {!isReady && (
+              <PlaceholderContainer data-testid="placeholder">
+                <Placeholder />
+              </PlaceholderContainer>
+            )}
+          </NavigationWrapper>
+        </div>
+      </>
+    );
+  }
+);

package/src/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { showcaseConverter } from '@times-components/storybook';
+
+import { ArticleHarness } from '../../../../../fixtures/article-harness/ArticleHarness';
+import { OptaMatchStatsMatchdayLive } from './OptaMatchStatsMatchdayLive';
+
+const showcase = {
+  children: [
+    {
+      decorator: (storyFn: () => React.ReactNode) => (
+        <ArticleHarness>{storyFn()}</ArticleHarness>
+      ),
+      type: 'decorator'
+    },
+    {
+      component: () => {
+        return (
+          <>
+            <OptaMatchStatsMatchdayLive
+              season="2025"
+              competition="8"
+              match="2562026"
+              homeTeamName="Arsenal"
+              awayTeamName="Brentford"
+            />
+          </>
+        );
+      },
+      name: 'Summary',
+      type: 'story'
+    }
+  ],
+  name:
+    'Typescript Component/Opta Match Stats/Football/Match Stats Matchday Live'
+};
+
+// @ts-ignore
+showcaseConverter(module, showcase);

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TeamColor } from '../shared/types';
+import { DesktopWidget } from './DesktopWidget';
+import { MobileWidget } from './MobileWidget';
+import { MatchdayLiveController } from './styles/MatchdayLiveController';
+
+export const OptaMatchStatsMatchdayLive: React.FC<{
+  season: string;
+  competition: string;
+  match: string;
+  isApp?: boolean;
+  homeTeamColor?: TeamColor;
+  awayTeamColor?: TeamColor;
+  homeTeamName: string;
+  awayTeamName: string;
+}> = React.memo(props => {
+  return (
+    <MatchdayLiveController>
+      <DesktopWidget {...props} />
+      <MobileWidget {...props} />
+    </MatchdayLiveController>
+  );
+});

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__/OptaMatchStatsMatchdayLive.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, act } from '@testing-library/react';
+
+import 'regenerator-runtime';
+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 mockHasMatchEvents = 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: () => new Promise(resolve => resolve({})),
+  initElement: mockInitElement,
+  initComponent: mockInitComponent
+}));
+
+import { OptaMatchStatsMatchdayLive } from '../OptaMatchStatsMatchdayLive';
+
+const requiredProps = {
+  season: '2020',
+  competition: '3',
+  match: '2041900',
+  homeTeamName: 'Liverpool',
+  awayTeamName: 'Manchester City'
+};
+
+describe('OptaMatchStatsMatchdayLive', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly', async () => {
+    const { asFragment } = render(
+      <OptaMatchStatsMatchdayLive {...requiredProps} />
+    );
+
+    act(() => {
+      mockInitComponent();
+      mockHasMatchEvents();
+    });
+
+    expect(mockInitSettings).toHaveBeenCalledTimes(2);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(2);
+    expect(mockInitComponent).toHaveBeenCalledTimes(1);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptaMatchStatsMatchdayLive should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bZQynM inSDsQ"
+  >
+    <div
+      class="matchday-live-widget-desktop sc-bxivhb iQCzHr"
+    >
+      <h3>
+        Line-ups
+      </h3>
+      <div
+        class="sc-ifAKCX hMIqhj"
+      />
+    </div>
+    <div
+      class="sc-bwzfXH eSqyJ"
+      data-testid="placeholder"
+    >
+      Placeholder
+    </div>
+    <div
+      class="matchday-live-widget-mobile"
+    >
+      <div
+        class="sc-EHOje fBqPPh"
+        data-testid="mobile-navigation-wrapper"
+      >
+        <div
+          class="navigation-buttons"
+        >
+          <button
+            class="active home"
+          >
+            Liverpool
+          </button>
+          <button
+            class="away"
+          >
+            Manchester City
+          </button>
+        </div>
+        <div
+          class="home-widget-container sc-ifAKCX hMIqhj"
+        />
+        <div
+          class="away-widget-container sc-ifAKCX hMIqhj"
+        />
+        <div
+          class="sc-bwzfXH eSqyJ"
+          data-testid="placeholder"
+        >
+          Placeholder
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { breakpoints } from '@times-components/ts-styleguide';
+
+export const MatchdayLiveController = styled.div`
+  .matchday-live-widget-mobile {
+    display: block;
+  }
+  .matchday-live-widget-desktop {
+    display: none;
+  }
+  @media (min-width: ${breakpoints.medium}px) {
+    .matchday-live-widget-mobile {
+      display: none;
+    }
+    .matchday-live-widget-desktop {
+      display: block;
+    }
+  }
+`;

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

@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+import {
+  backgroundColor,
+  darkBackgroundColor,
+  darkTextColor,
+  textColor
+} from '../../shared/styles';
+
+export const NavigationWrapper = styled.div<{
+  homeTeamColor: { light: string; dark: string };
+  awayTeamColor: { light: string; dark: string };
+  activeTeam: 'home' | 'away';
+  isApp: boolean;
+}>`
+  background-color: ${backgroundColor};
+  ${props =>
+    props.isApp &&
+    `
+      @media (prefers-color-scheme: dark) {
+        background-color: ${darkBackgroundColor};
+      }
+    `} .navigation-buttons {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    button {
+      -webkit-tap-highlight-color: transparent;
+      background: none;
+      border: none;
+      font-family: Roboto, sans-serif;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 150%;
+      padding: 16px 8px;
+      cursor: pointer;
+      border-bottom: 2px solid ${backgroundColor};
+      color: ${textColor};
+
+      &.active {
+        &.home {
+          border-bottom: 2px solid ${props => props.homeTeamColor.light};
+          color: ${props => props.homeTeamColor.light};
+        }
+        &.away {
+          border-bottom: 2px solid ${props => props.awayTeamColor.light};
+          color: ${props => props.awayTeamColor.light};
+        }
+      }
+
+      ${props =>
+        props.isApp &&
+        `
+          @media (prefers-color-scheme: dark) {
+            border-bottom: 2px solid ${darkBackgroundColor};
+            color: ${darkTextColor};
+            &.active {
+              &.home {
+                border-bottom: 2px solid ${props.homeTeamColor.dark};
+                color: ${props.homeTeamColor.dark};
+              }
+              &.away {
+                border-bottom: 2px solid ${props.awayTeamColor.dark};
+                color: ${props.awayTeamColor.dark};
+              }
+            }
+          }
+        `};
+    }
+  }
+
+  .home-widget-container {
+    visibility: ${props =>
+      props.activeTeam === 'home' ? 'visible' : 'hidden'};
+    height: ${props => (props.activeTeam === 'home' ? 'auto' : '0')};
+  }
+
+  .away-widget-container {
+    visibility: ${props =>
+      props.activeTeam === 'away' ? 'visible' : 'hidden'};
+    height: ${props => (props.activeTeam === 'away' ? 'auto' : '0')};
+  }
+`;