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

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

@@ -1,108 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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__/OptaMatchStatsMatchdayLive.test.tsx

@@ -1,61 +0,0 @@
-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

@@ -1,61 +0,0 @@
-// 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 iZLINp"
-      />
-    </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 iZLINp"
-        />
-        <div
-          class="away-widget-container sc-ifAKCX iZLINp"
-        />
-        <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

@@ -1,19 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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')};
-  }
-`;