@times-components/ts-components 1.88.1 → 1.88.2-alpha.5

package/src/components/opta/football/player-stats/OptaFootballPlayerStats.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { showcaseConverter } from '@times-components/storybook';
+
+import { ArticleHarness } from '../../../../fixtures/article-harness/ArticleHarness';
+import { OptaFootballPlayerStats } from './OptaFootballPlayerStats';
+
+const showcase = {
+  children: [
+    {
+      decorator: (storyFn: () => React.ReactNode) => (
+        <ArticleHarness>{storyFn()}</ArticleHarness>
+      ),
+      type: 'decorator'
+    },
+    {
+      component: () => (
+        <OptaFootballPlayerStats
+          season="2020"
+          competition="3"
+          visible_categories="goals"
+          match="2041900"
+        />
+      ),
+      name: 'PlayerStats (goals)',
+      type: 'story'
+    },
+    {
+      component: () => (
+        <OptaFootballPlayerStats
+          season="2020"
+          competition="3"
+          visible_categories="assists"
+          match="2041900"
+        />
+      ),
+      name: 'PlayerStats (assists)',
+      type: 'story'
+    }
+  ],
+  name: 'Typescript Component/In Article/Football/PlayerStats'
+};
+
+// @ts-ignore
+showcaseConverter(module, showcase);

package/src/components/opta/football/player-stats/OptaFootballPlayerStats.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+
+import { Placeholder } from '@times-components/image';
+
+import {
+  initSettings,
+  initStyleSheet,
+  initScript,
+  initElement,
+  initComponent
+} from '../../utils/config';
+
+import { Container, PlaceholderContainer } from '../shared-styles';
+import { WidgetContainer } from './styles';
+import { isNationalCompetition } from '../../utils/replaceNationalTeamDetails';
+import { useUpdateNationalTeamDetails } from '../../utils/useUpdateNationalTeamDetails';
+
+export const OptaFootballPlayerStats: React.FC<{
+  season: string;
+  competition: string;
+  match: string;
+  visible_categories: string; // goals | assists | cards_red | cards_yellow
+  full_width?: boolean;
+}> = React.memo(
+  ({ season, competition, match, full_width, visible_categories }) => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    const [isReady, setIsReady] = useState<boolean>(false);
+    const isNationalComp = isNationalCompetition(competition);
+
+    useEffect(
+      () => {
+        const sport = 'football';
+
+        initSettings();
+        initStyleSheet(sport);
+
+        initScript().then(() => {
+          if (ref.current) {
+            ref.current.innerHTML = initElement('opta-widget', {
+              sport,
+              widget: 'player_ranking',
+              season,
+              competition,
+              match,
+              template: 'normal',
+              graph_style: 'relative',
+              visible_categories,
+              live: true,
+              show_match_header: true,
+              show_halftime_score: true,
+              show_competition_name: true,
+              show_date: true,
+              show_crests: true,
+              date_format: 'DD/MM/YYYY',
+              breakpoints: '520'
+            }).outerHTML;
+
+            initComponent();
+            setIsReady(true);
+          }
+        });
+      },
+      [ref]
+    );
+
+    isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-Image-Team');
+
+    return (
+      <Container border={isReady} fullWidth={full_width}>
+        <WidgetContainer ref={ref} />
+
+        {!isReady && (
+          <PlaceholderContainer>
+            <Placeholder />
+          </PlaceholderContainer>
+        )}
+      </Container>
+    );
+  }
+);

package/src/components/opta/football/player-stats/__tests__/OptaFootballMatchStats.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, waitForElementToBeRemoved } 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 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 { OptaFootballPlayerStats } from '../OptaFootballPlayerStats';
+
+const requiredProps = {
+  season: '2020',
+  competition: '3',
+  visible_categories: 'goals',
+  match: '2041900'
+};
+
+describe('OptaFootballPlayerStats', () => {
+  it('should render correctly', async () => {
+    const { asFragment, getByText } = render(
+      <OptaFootballPlayerStats {...requiredProps} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+
+    await waitForElementToBeRemoved(getByText('Placeholder'));
+
+    expect(mockInitSettings).toHaveBeenCalledTimes(2);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(2);
+    expect(mockInitComponent).toHaveBeenCalledTimes(2);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptaFootballPlayerStats should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa giUBsz"
+  >
+    <div
+      class="sc-htpNat sc-bxivhb iNxpQd team-flags"
+    />
+    <div
+      class="sc-bwzfXH kVYHKf"
+    >
+      Placeholder
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`OptaFootballPlayerStats should render correctly 2`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa hGXeaj"
+  >
+    <div
+      class="sc-htpNat sc-bxivhb iNxpQd team-flags"
+    >
+      <div>
+        Widget
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/opta/football/player-stats/styles.ts

@@ -0,0 +1,154 @@
+import styled from 'styled-components';
+import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
+
+import { WidgetContainerBase } from '../shared-styles';
+
+export const WidgetContainer = styled(WidgetContainerBase)`
+  .Opta {
+    h2 {
+      margin: 20px 0 10px 0 !important;
+    }
+
+    .Opta-Cf {
+      padding: 0;
+      background-color: transparent;
+
+      table {
+        tbody {
+          tr {
+            th.Opta-Stats-Bars-Text {
+              height: auto;
+              padding: 20px 0 0 0;
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.supporting};
+              font-size: 13px;
+              line-height: 14px;
+            }
+
+            td {
+              height: auto;
+              color: ${colours.functional.brandColour};
+              font-family: ${fonts.headline};
+              font-size: 18px;
+              line-height: 18px;
+              padding: 0;
+
+              &.Opta-Crest {
+                text-align: left;
+
+                &.Opta-Home {
+                  text-align: right;
+                }
+
+                img {
+                  width: 40px;
+                }
+              }
+
+              &.Opta-Team {
+                padding-left: 10px;
+                font-size: 18px;
+                line-height: 18px;
+
+                &.Opta-Home {
+                  padding-right: 10px;
+                  padding-left: 0;
+                  text-align: right;
+                }
+              }
+
+              &.Opta-Score {
+                width: 20px;
+                font-size: 24px;
+                line-height: 24px;
+                text-align: left;
+
+                &.Opta-Home {
+                  text-align: right;
+                }
+
+                span {
+                  min-width: 0;
+                  padding: 0;
+                  color: inherit;
+                  font-family: inherit;
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-align: inherit;
+                  background-color: transparent !important;
+                }
+
+                @media (min-width: ${breakpoints.medium}px) {
+                  width: 30px;
+                  font-size: 32px;
+                  line-height: 32px;
+                }
+              }
+
+              &.Opta-Divider {
+                width: 20px;
+                text-align: center;
+
+                abbr {
+                  font-size: inherit;
+                  line-height: inherit;
+                  text-decoration: none;
+                }
+              }
+
+              .Opta-Bars {
+                margin: 0;
+
+                .Opta-Percent.Opta-Home {
+                  background-color: ${colours.section.sport};
+                }
+
+                .Opta-Percent.Opta-Away {
+                  background-color: ${colours.section.sport};
+                  opacity: 0.5;
+                }
+              }
+            }
+
+            &.Opta-Score-Extras {
+              td {
+                color: ${colours.functional.brandColour};
+                font-family: ${fonts.supporting};
+                font-size: 14px;
+                line-height: 28px;
+
+                span {
+                  color: inherit;
+                  font-size: inherit;
+                }
+              }
+            }
+
+            &.Opta-MatchHeader-Details {
+              div {
+                padding: 0;
+                color: ${colours.section.sport};
+                font-family: ${fonts.supporting};
+                font-size: 12px;
+                line-height: 12px;
+                letter-spacing: 1px;
+                text-transform: uppercase;
+                background-color: transparent;
+
+                span {
+                  margin: 0 6px;
+                  color: inherit;
+                  font-size: inherit;
+                }
+              }
+            }
+          }
+        }
+
+        &.Opta-Stats-Bars {
+          margin-bottom: 20px;
+        }
+      }
+    }
+  }
+`;

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

@@ -30,26 +30,42 @@ const countries: Record<string, string> = {
 
 const flagStyles = Object.keys(countries).map(
   (countryCode: string) => `
-  .Opta-Team-${countryCode} .Opta-Team, .Opta-Team-${countryCode}.Opta-Team  {
+  .Opta-Team-${countryCode} .Opta-Team, .Opta-Team-${countryCode}.Opta-Team, .Opta-Player .Opta-Image-Team-${countryCode} {
     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;
+    
+    @media (max-width: ${breakpoints.small}px) {
+      background-image: none;
+      padding-left: 0 !important;
+    }
   }
   .Opta-Team-${countryCode}.Opta-Team  {
     background-position: 10px 8px;
     padding-left: 38px !important;
   }
+
+  .Opta-Player .Opta-Image-Team-${countryCode} {
+    width: 100%;
+    display: block;
+    height: 100%;
+    background-position: 7px 3px;
+
+    &.Opta-Image-Medium {
+      background-size: 35px;
+      background-position: 0 6px;
+    }
+
+    img {
+      display: none;
+    }
+  }
 `
 );
 

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

@@ -17,6 +17,18 @@ const showcase = {
       name: 'Standings',
       type: 'story'
     },
+    {
+      component: () => (
+        <OptaFootballStandings
+          season="2023"
+          competition="3"
+          full_width
+          columns
+        />
+      ),
+      name: 'Standings (2 columns - desktop)',
+      type: 'story'
+    },
     {
       component: () => <OptaFootballStandings season="2023" competition="3" />,
       name: 'Standings (inline)',

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

@@ -21,48 +21,53 @@ export const OptaFootballStandings: React.FC<{
   default_nav?: string;
   navigation?: boolean;
   full_width?: boolean;
+  columns?: boolean;
 }> = React.memo(
-  ({ season, competition, default_nav = 1, navigation, full_width }) => {
+  ({
+    season,
+    competition,
+    default_nav = 1,
+    navigation,
+    full_width,
+    columns
+  }) => {
     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: !isNationalComp,
-              team_naming: 'brief',
-              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);
-          }
-        });
-      },
-      [ref]
-    );
+          initComponent();
+          setIsReady(true);
+        }
+      });
+    }, []);
 
     isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-Team');
 
     return (
       <Container border={isReady} fullWidth={full_width}>
-        <WidgetContainer ref={ref} />
+        <WidgetContainer ref={ref} columns={columns} />
 
         {!isReady && (
           <PlaceholderContainer>

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

@@ -42,6 +42,21 @@ describe('OptaFootballStandings', () => {
 
     await waitForElementToBeRemoved(getByText('Placeholder'));
 
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+    expect(mockInitComponent).toHaveBeenCalledTimes(1);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly, with columns', async () => {
+    const { asFragment, getByText } = render(
+      <OptaFootballStandings columns {...requiredProps} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+
+    await waitForElementToBeRemoved(getByText('Placeholder'));
+
     expect(mockInitSettings).toHaveBeenCalledTimes(2);
     expect(mockInitStyleSheet).toHaveBeenCalledTimes(2);
     expect(mockInitComponent).toHaveBeenCalledTimes(2);

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 elfuvD team-flags"
+      class="sc-htpNat sc-bxivhb jlQRkQ team-flags"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,40 @@ exports[`OptaFootballStandings should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-bxivhb elfuvD team-flags"
+      class="sc-htpNat sc-bxivhb jlQRkQ team-flags"
+    >
+      <div>
+        Widget
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`OptaFootballStandings should render correctly, with columns 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa giUBsz"
+  >
+    <div
+      class="sc-htpNat sc-bxivhb hCEQsc team-flags"
+    />
+    <div
+      class="sc-bwzfXH kVYHKf"
+    >
+      Placeholder
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`OptaFootballStandings should render correctly, with columns 2`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa hGXeaj"
+  >
+    <div
+      class="sc-htpNat sc-bxivhb hCEQsc team-flags"
     >
       <div>
         Widget

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

@@ -3,7 +3,9 @@ import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
 import { WidgetContainerBase } from '../shared-styles';
 
-export const WidgetContainer = styled(WidgetContainerBase)`
+export const WidgetContainer = styled(WidgetContainerBase)<{
+  columns?: boolean;
+}>`
   .Opta {
     h3.Opta-groupname {
       height: 40px;
@@ -33,6 +35,10 @@ export const WidgetContainer = styled(WidgetContainerBase)`
       padding: 0;
       background-color: transparent;
 
+      @media (min-width: ${breakpoints.medium}px) {
+        ${({ columns }) => columns && 'column-count: 2;'};
+      }
+
       &.Opta-Dropdown {
         .Opta-Nav {
           width: 110px;

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 bhudKL"
+      class="sc-htpNat sc-bxivhb kUcFdM"
     />
     <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 bhudKL"
+      class="sc-htpNat sc-bxivhb kUcFdM"
     >
       <div>
         Widget

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

@@ -16,5 +16,5 @@ export const replaceWithTBD = (element: HTMLCollectionOf<Element>) => {
         (optaFlagContainer as HTMLElement).innerText = 'TBD';
       }
     }
-  }, 500);
+  }, 1000);
 };

package/src/index.ts

@@ -44,6 +44,9 @@ export {
 export {
   OptaFootballFixtures
 } from './components/opta/football/fixtures/OptaFootballFixtures';
+export {
+  OptaFootballFixturesTournament
+} from './components/opta/football/fixtures-tournament/OptaFootballFixturesTournament';
 export {
   OptaFootballStandings
 } from './components/opta/football/standings/OptaFootballStandings';
@@ -53,6 +56,9 @@ export {
 export {
   OptaFootballMatchStats
 } from './components/opta/football/match-stats/OptaFootballMatchStats';
+export {
+  OptaFootballPlayerStats
+} from './components/opta/football/player-stats/OptaFootballPlayerStats';
 
 export {
   OptaRugbyFixtures