@times-components/ts-components 1.87.0 → 1.88.0

package/src/components/opta/football/fixtures/__tests__/__snapshots__/OptaFootballFixtures.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaFootballFixtures should render correctly 1`] = `
     class="sc-bdVaJa giUBsz"
   >
     <div
-      class="sc-htpNat sc-ifAKCX eajDtg"
+      class="sc-htpNat sc-ifAKCX eHZPwb"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,7 @@ exports[`OptaFootballFixtures should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-ifAKCX eajDtg"
+      class="sc-htpNat sc-ifAKCX eHZPwb"
     >
       <div>
         Widget

package/src/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.tsx

@@ -12,7 +12,8 @@ import {
 
 import { PlaceholderContainer } from '../shared-styles';
 import { WidgetContainer } from './styles';
-import { replaceNationalTeamDetails } from '../../utils/replaceNationalTeamDetails';
+import { isNationalCompetition } from '../../utils/replaceNationalTeamDetails';
+import { useUpdateNationalTeamDetails } from '../../utils/useUpdateNationalTeamDetails';
 
 export const OptaFootballFixturesTicker: React.FC<{
   season: string;
@@ -35,11 +36,7 @@ export const OptaFootballFixturesTicker: React.FC<{
     const ref = React.createRef<HTMLDivElement>();
 
     const [isReady, setIsReady] = useState<boolean>(false);
-    const [optaImages, setOptaImages] = useState<
-      HTMLCollectionOf<Element> | undefined
-    >();
-    const nationalCompetitions = ['3', '5', '6', '235', '941', '1125'];
-    const isNationalCompetition = nationalCompetitions.includes(competition);
+    const isNationalComp = isNationalCompetition(competition);
 
     useEffect(
       () => {
@@ -67,7 +64,7 @@ export const OptaFootballFixturesTicker: React.FC<{
               match_status: 'all',
               order_by: 'date_ascending',
               show_grouping: true,
-              show_crests: !isNationalCompetition,
+              show_crests: !isNationalComp,
               show_date: true,
               show_live: true,
               date_format: 'ddd Do MMM'
@@ -75,20 +72,13 @@ export const OptaFootballFixturesTicker: React.FC<{
 
             initComponent();
             setIsReady(true);
-
-            if (isNationalCompetition) {
-              const TeamNameContainers =
-                ref.current &&
-                ref.current.getElementsByClassName('Opta-TeamName');
-              TeamNameContainers && setOptaImages(TeamNameContainers);
-            }
           }
         });
       },
       [ref]
     );
 
-    isNationalCompetition && replaceNationalTeamDetails(optaImages);
+    isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-TeamName');
 
     return (
       <>

package/src/components/opta/football/fixtures-ticker/__tests__/OptaFootballFixturesTicker.test.tsx

@@ -9,7 +9,8 @@ jest.mock('@times-components/image', () => ({
 const mockInitSettings = jest.fn();
 const mockInitStyleSheet = jest.fn();
 const mockInitComponent = jest.fn();
-const mockReplaceFlags = jest.fn();
+const mockIsNationalComp = jest.fn();
+const mockUseUpdateNationalTeamDetails = jest.fn();
 
 const mockInitElement = () => {
   const element = document.createElement('div');
@@ -25,10 +26,14 @@ jest.mock('../../../utils/config', () => ({
   initComponent: mockInitComponent
 }));
 jest.mock('../../../utils/replaceNationalTeamDetails', () => ({
-  replaceNationalTeamDetails: mockReplaceFlags
+  isNationalCompetition: mockIsNationalComp
+}));
+jest.mock('../../../utils/useUpdateNationalTeamDetails', () => ({
+  useUpdateNationalTeamDetails: mockUseUpdateNationalTeamDetails
 }));
 
 import { OptaFootballFixturesTicker } from '../OptaFootballFixturesTicker';
+import { isNationalCompetition } from '../../../utils/replaceNationalTeamDetails';
 
 const requiredProps = {
   season: '2020',
@@ -37,6 +42,10 @@ const requiredProps = {
   date_to: '2021-07-11'
 };
 
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
 describe('OptaFootballFixturesTicker with flags', () => {
   it('should render correctly', async () => {
     const { asFragment, getByText } = render(
@@ -46,9 +55,9 @@ describe('OptaFootballFixturesTicker with flags', () => {
 
     await waitForElementToBeRemoved(getByText('Placeholder'));
 
-    expect(mockInitSettings).toHaveBeenCalledTimes(2);
-    expect(mockInitStyleSheet).toHaveBeenCalledTimes(2);
-    expect(mockInitComponent).toHaveBeenCalledTimes(2);
+    expect(mockInitSettings).toHaveBeenCalled();
+    expect(mockInitStyleSheet).toHaveBeenCalled();
+    expect(mockInitComponent).toHaveBeenCalled();
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -60,20 +69,19 @@ describe('OptaFootballFixturesTicker without flags', () => {
   });
 
   it('should render correctly', async () => {
-    React.useState = jest.fn().mockReturnValue([true, () => React.useState]);
-    React.useState = jest
-      .fn()
-      .mockReturnValue([document.createElement('div'), () => React.useState]);
+    (isNationalCompetition as jest.Mock).mockReturnValue(true);
 
-    const { asFragment } = render(
+    const { asFragment, getByText } = render(
       <OptaFootballFixturesTicker season="2023" competition="3" />
     );
     expect(asFragment()).toMatchSnapshot();
 
+    await waitForElementToBeRemoved(getByText('Placeholder'));
+
     expect(mockInitSettings).toHaveBeenCalled();
     expect(mockInitStyleSheet).toHaveBeenCalled();
     expect(mockInitComponent).toHaveBeenCalled();
-    expect(mockReplaceFlags).toHaveBeenCalled();
+    expect(mockUseUpdateNationalTeamDetails).toHaveBeenCalled();
 
     expect(asFragment()).toMatchSnapshot();
   });

package/src/components/opta/football/fixtures-ticker/__tests__/__snapshots__/OptaFootballFixturesTicker.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OptaFootballFixturesTicker with flags should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX cpKKZE"
+    class="sc-htpNat sc-ifAKCX hfzpiP"
   />
   <div
     class="sc-bwzfXH eLGWmp"
@@ -17,7 +17,7 @@ exports[`OptaFootballFixturesTicker with flags should render correctly 1`] = `
 exports[`OptaFootballFixturesTicker with flags should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX cpKKZE"
+    class="sc-htpNat sc-ifAKCX hfzpiP"
   >
     <div>
       Widget
@@ -29,15 +29,25 @@ exports[`OptaFootballFixturesTicker with flags should render correctly 2`] = `
 exports[`OptaFootballFixturesTicker without flags should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX cpKKZE"
+    class="sc-htpNat sc-ifAKCX hfzpiP"
   />
+  <div
+    class="sc-bwzfXH eLGWmp"
+    height="100"
+  >
+    Placeholder
+  </div>
 </DocumentFragment>
 `;
 
 exports[`OptaFootballFixturesTicker without flags should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX cpKKZE"
-  />
+    class="sc-htpNat sc-ifAKCX hfzpiP"
+  >
+    <div>
+      Widget
+    </div>
+  </div>
 </DocumentFragment>
 `;

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

@@ -6,7 +6,7 @@ exports[`OptaFootballMatchStats should render correctly 1`] = `
     class="sc-bdVaJa giUBsz"
   >
     <div
-      class="sc-htpNat sc-bxivhb jbuKhZ"
+      class="sc-htpNat sc-bxivhb eIGYVQ"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,7 @@ exports[`OptaFootballMatchStats should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-bxivhb jbuKhZ"
+      class="sc-htpNat sc-bxivhb eIGYVQ"
     >
       <div>
         Widget

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

@@ -1,6 +1,58 @@
 import styled from 'styled-components';
 import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
+const countries: Record<string, string> = {
+  '119': 'Italy',
+  '357': 'Germany',
+  '115': 'Scotland',
+  '538': 'Hungary',
+  '497': 'Switzerland',
+  '118': 'Spain',
+  '535': 'Croatia',
+  '534': 'Albania',
+  '511': 'Poland',
+  '366': 'Netherlands',
+  '365': 'Slovenia',
+  '369': 'Denmark',
+  '364': 'Serbia',
+  '114': 'England',
+  '358': 'Romania',
+  '510': 'Ukraine',
+  '360': 'Belgium',
+  '507': 'Slovakia',
+  '515': 'Austria',
+  '368': 'France',
+  '362': 'Turkey',
+  '520': 'Georgia',
+  '359': 'Portugal',
+  '367': 'CzechRep'
+};
+
+const flagStyles = Object.keys(countries).map(
+  (countryCode: string) => `
+  .Opta-Team-${countryCode} .Opta-Team, .Opta-Team-${countryCode}.Opta-Team  {
+    background-image: url(https://nuk-tnl-editorial-prod-staticassets.s3.eu-west-1.amazonaws.com/opta/euro-flags/${
+      countries[countryCode]
+    }.svg);
+    background-size: 20px;
+    background-repeat: no-repeat;
+
+    @media (max-width: ${breakpoints.small}px) {
+      background-image: none;
+      padding-left: 0 !important;
+    }
+  }
+  .Opta-Team-${countryCode} .Opta-Team  {
+    background-position: 0 13px;
+    padding-left: 28px;
+  }
+  .Opta-Team-${countryCode}.Opta-Team  {
+    background-position: 10px 8px;
+    padding-left: 38px !important;
+  }
+`
+);
+
 export const Container = styled.div<{ border: boolean; fullWidth?: boolean }>`
   margin: 0 auto 20px auto;
   background-color: ${colours.functional.backgroundPrimary};
@@ -27,6 +79,10 @@ export const PlaceholderContainer = styled.div<{ height?: number }>`
 `;
 
 export const WidgetContainerBase = styled.div`
+  &.team-flags {
+    ${flagStyles};
+  }
+
   .Opta {
     .Opta_W {
       margin: 0;

package/src/components/opta/football/standings/OptaFootballStandings.stories.tsx

@@ -13,18 +13,18 @@ const showcase = {
       type: 'decorator'
     },
     {
-      component: () => <OptaFootballStandings season="2020" competition="8" />,
+      component: () => <OptaFootballStandings season="2023" competition="8" />,
       name: 'Standings',
       type: 'story'
     },
     {
-      component: () => <OptaFootballStandings season="2020" competition="3" />,
+      component: () => <OptaFootballStandings season="2023" competition="3" />,
       name: 'Standings (inline)',
       type: 'story'
     },
     {
       component: () => (
-        <OptaFootballStandings season="2020" competition="3" navigation />
+        <OptaFootballStandings season="2023" competition="3" navigation />
       ),
       name: 'Standings (dropdown)',
       type: 'story'
@@ -32,7 +32,7 @@ const showcase = {
     {
       component: () => (
         <OptaFootballStandings
-          season="2020"
+          season="2023"
           competition="3"
           default_nav="4"
           navigation

package/src/components/opta/football/standings/OptaFootballStandings.tsx

@@ -12,6 +12,8 @@ import {
 
 import { Container, PlaceholderContainer } from '../shared-styles';
 import { WidgetContainer } from './styles';
+import { isNationalCompetition } from '../../utils/replaceNationalTeamDetails';
+import { useUpdateNationalTeamDetails } from '../../utils/useUpdateNationalTeamDetails';
 
 export const OptaFootballStandings: React.FC<{
   season: string;
@@ -24,32 +26,39 @@ export const OptaFootballStandings: React.FC<{
     const ref = React.createRef<HTMLDivElement>();
 
     const [isReady, setIsReady] = useState<boolean>(false);
+    const isNationalComp = isNationalCompetition(competition);
 
-    useEffect(() => {
-      const sport = 'football';
+    useEffect(
+      () => {
+        const sport = 'football';
 
-      initSettings();
-      initStyleSheet(sport);
+        initSettings();
+        initStyleSheet(sport);
 
-      initScript().then(() => {
-        if (ref.current) {
-          ref.current.innerHTML = initElement('opta-widget', {
-            sport,
-            widget: 'standings',
-            season,
-            competition,
-            live: true,
-            navigation: navigation ? 'dropdown' : undefined,
-            default_nav,
-            show_crests: true,
-            breakpoints: 520
-          }).outerHTML;
+        initScript().then(() => {
+          if (ref.current) {
+            ref.current.innerHTML = initElement('opta-widget', {
+              sport,
+              widget: 'standings',
+              season,
+              competition,
+              live: true,
+              navigation: navigation ? 'dropdown' : undefined,
+              default_nav,
+              show_crests: !isNationalComp,
+              team_naming: 'brief',
+              breakpoints: 520
+            }).outerHTML;
 
-          initComponent();
-          setIsReady(true);
-        }
-      });
-    }, []);
+            initComponent();
+            setIsReady(true);
+          }
+        });
+      },
+      [ref]
+    );
+
+    isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-Team');
 
     return (
       <Container border={isReady} fullWidth={full_width}>

package/src/components/opta/football/standings/__tests__/OptaFootballStandings.test.tsx

@@ -42,9 +42,9 @@ describe('OptaFootballStandings', () => {
 
     await waitForElementToBeRemoved(getByText('Placeholder'));
 
-    expect(mockInitSettings).toHaveBeenCalledTimes(1);
-    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
-    expect(mockInitComponent).toHaveBeenCalledTimes(1);
+    expect(mockInitSettings).toHaveBeenCalledTimes(2);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(2);
+    expect(mockInitComponent).toHaveBeenCalledTimes(2);
 
     expect(asFragment()).toMatchSnapshot();
   });

package/src/components/opta/football/standings/__tests__/__snapshots__/OptaFootballStandings.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaFootballStandings should render correctly 1`] = `
     class="sc-bdVaJa giUBsz"
   >
     <div
-      class="sc-htpNat sc-bxivhb kQLOGL"
+      class="sc-htpNat sc-bxivhb elfuvD team-flags"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,7 @@ exports[`OptaFootballStandings should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-bxivhb kQLOGL"
+      class="sc-htpNat sc-bxivhb elfuvD team-flags"
     >
       <div>
         Widget

package/src/components/opta/football/standings/styles.ts

@@ -185,7 +185,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
 
             th {
               width: 42px;
-              padding: 6px 0 0 0;
+              padding: 0;
               color: ${colours.section.sport};
               font-family: ${fonts.supporting};
               font-size: 14px;

package/src/components/opta/football/summary/__tests__/__snapshots__/OptaFootballSummary.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaFootballSummary should render correctly 1`] = `
     class="sc-bdVaJa giUBsz"
   >
     <div
-      class="sc-htpNat sc-bxivhb kplfa"
+      class="sc-htpNat sc-bxivhb bhudKL"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,7 @@ exports[`OptaFootballSummary should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-bxivhb kplfa"
+      class="sc-htpNat sc-bxivhb bhudKL"
     >
       <div>
         Widget

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

@@ -23,20 +23,34 @@ const mockReplaceNationalTeamDetails = () => {
   return mockDomContainer;
 };
 
-describe('replaceNationalTeamDetails', () => {
-  jest.spyOn(optaFn, 'replaceNationalTeamDetails');
+describe('isNationalCompetition', () => {
+  jest.spyOn(optaFn, 'isNationalCompetition');
+
+  it('should return TRUE if is in array of national competitions', async () => {
+    const isNationalCompetition = optaFn.isNationalCompetition('3');
+    expect(optaFn.isNationalCompetition).toHaveBeenCalledWith('3');
+    expect(isNationalCompetition).toBe(true);
+  });
+
+  it('should return FALSE if is in array of national competitions', async () => {
+    const isNationalCompetition = optaFn.isNationalCompetition('8');
+    expect(optaFn.isNationalCompetition).toHaveBeenCalledWith('8');
+    expect(isNationalCompetition).toBe(false);
+  });
+});
+
+describe('replaceWithTBD', () => {
+  jest.spyOn(optaFn, 'replaceWithTBD');
 
   it('should replace images when valid elements are passed', async () => {
     jest.useFakeTimers();
     const container = mockReplaceNationalTeamDetails();
     const elements = container.getElementsByClassName('Opta-TeamName');
-    const replaceNationalTeamDetails = await optaFn.replaceNationalTeamDetails(
-      elements
-    );
+    const replaceWithTBD = await optaFn.replaceWithTBD(elements);
 
-    expect(optaFn.replaceNationalTeamDetails).toHaveBeenCalledWith(elements);
+    expect(optaFn.replaceWithTBD).toHaveBeenCalledWith(elements);
     jest.advanceTimersByTime(3000);
-    expect(replaceNationalTeamDetails).toBe(undefined);
+    expect(replaceWithTBD).toBe(undefined);
     const transformedElements = Array.from(elements);
     expect(transformedElements[0].querySelector('img')).toBeInstanceOf;
     expect((transformedElements[0] as HTMLElement).innerText).toBe('Portugal');
@@ -48,13 +62,11 @@ describe('replaceNationalTeamDetails', () => {
     jest.useFakeTimers();
     const container = mockReplaceNationalTeamDetails();
     const elements = container.getElementsByClassName('Opta-TeamName');
-    const replaceNationalTeamDetails = await optaFn.replaceNationalTeamDetails(
-      elements
-    );
+    const replaceWithTBD = await optaFn.replaceWithTBD(elements);
 
-    expect(optaFn.replaceNationalTeamDetails).toHaveBeenCalledWith(elements);
+    expect(optaFn.replaceWithTBD).toHaveBeenCalledWith(elements);
     jest.advanceTimersByTime(3000);
-    expect(replaceNationalTeamDetails).toBe(undefined);
+    expect(replaceWithTBD).toBe(undefined);
     const transformedElements = Array.from(elements);
     expect(transformedElements[2].querySelector('img')).not.toBeInstanceOf;
     expect((transformedElements[2] as HTMLElement).innerText).toBe('TBD');

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

@@ -1,34 +1,20 @@
-export const replaceNationalTeamDetails = (
-  element: HTMLCollectionOf<Element> | undefined
-) => {
-  let count = 0;
-  const replaceImages = setInterval(() => {
-    if (count >= 5) {
-      clearInterval(replaceImages);
-    }
-    count++;
-
-    if (element && element.length > 0) {
-      for (let optaFlagContainer of element) {
-        const country = (optaFlagContainer as HTMLElement).innerText;
-
-        if (country && country.includes('Third Place')) {
-          (optaFlagContainer as HTMLElement).innerText = 'TBD';
-        }
+export const isNationalCompetition = (competition: string) => {
+  const nationalCompetitions = [
+    '3', // UEFA European Championship Finals
+    '235', // UEFA European Championship Qualifiers
+    '941' // UEFA Nations League
+  ];
+  return nationalCompetitions.includes(competition);
+};
 
-        if (!optaFlagContainer.querySelector('img')) {
-          const countryImg = document.createElement('img');
-          countryImg.setAttribute(
-            'src',
-            `https://nuk-tnl-editorial-prod-staticassets.s3.eu-west-1.amazonaws.com/opta/euro-flags/${country}.svg`
-          );
-          countryImg.setAttribute('onerror', 'this.remove()');
-          countryImg.classList.add('team-flag');
+export const replaceWithTBD = (element: HTMLCollectionOf<Element>) => {
+  setTimeout(() => {
+    for (let optaFlagContainer of element) {
+      const country = (optaFlagContainer as HTMLElement).innerText;
 
-          optaFlagContainer.prepend(countryImg);
-        }
+      if (country && country.includes('Third Place')) {
+        (optaFlagContainer as HTMLElement).innerText = 'TBD';
       }
-      clearInterval(replaceImages);
     }
   }, 500);
 };

package/src/components/opta/utils/useUpdateNationalTeamDetails.tsx

@@ -0,0 +1,17 @@
+import { RefObject, useEffect } from 'react';
+import { replaceWithTBD } from './replaceNationalTeamDetails';
+
+export const useUpdateNationalTeamDetails = (
+  ref: RefObject<HTMLDivElement>,
+  container: string
+) => {
+  useEffect(
+    () => {
+      ref.current && ref.current.classList.add('team-flags');
+
+      const TeamNameContainers = document.getElementsByClassName(container);
+      TeamNameContainers && replaceWithTBD(TeamNameContainers);
+    },
+    [ref]
+  );
+};