@times-components/ts-components 1.88.0 → 1.88.2-alpha.10

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 eHZPwb"
+      class="sc-htpNat sc-ifAKCX iHxEZu"
     />
     <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 eHZPwb"
+      class="sc-htpNat sc-ifAKCX iHxEZu"
     >
       <div>
         Widget

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

@@ -85,7 +85,7 @@ export const OptaFootballFixturesTicker: React.FC<{
         <WidgetContainer ref={ref} />
 
         {!isReady && (
-          <PlaceholderContainer height={100}>
+          <PlaceholderContainer height={80}>
             <Placeholder />
           </PlaceholderContainer>
         )}

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

@@ -3,11 +3,11 @@
 exports[`OptaFootballFixturesTicker with flags should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX hfzpiP"
+    class="sc-htpNat sc-ifAKCX iDswry"
   />
   <div
-    class="sc-bwzfXH eLGWmp"
-    height="100"
+    class="sc-bwzfXH uxFfR"
+    height="80"
   >
     Placeholder
   </div>
@@ -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 hfzpiP"
+    class="sc-htpNat sc-ifAKCX iDswry"
   >
     <div>
       Widget
@@ -29,11 +29,11 @@ exports[`OptaFootballFixturesTicker with flags should render correctly 2`] = `
 exports[`OptaFootballFixturesTicker without flags should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX hfzpiP"
+    class="sc-htpNat sc-ifAKCX iDswry"
   />
   <div
-    class="sc-bwzfXH eLGWmp"
-    height="100"
+    class="sc-bwzfXH uxFfR"
+    height="80"
   >
     Placeholder
   </div>
@@ -43,7 +43,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly 1`] =
 exports[`OptaFootballFixturesTicker without flags should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX hfzpiP"
+    class="sc-htpNat sc-ifAKCX iDswry"
   >
     <div>
       Widget

package/src/components/opta/football/fixtures-ticker/styles.ts

@@ -44,7 +44,37 @@ export const WidgetContainer = styled(WidgetContainerBase)`
     font-family: Roboto !important;
   }
 
+  .Opta-Scroll,
+  .Opta-Window {
+    height: 80px;
+  }
+
   @media (max-width: ${breakpoints.small}px) {
+    .Opta-Scroll {
+      &::before,
+      &::after {
+        content: '';
+        pointer-events: none;
+        position: absolute;
+        z-index: 15;
+        transition: all 0.3s linear 0s;
+        background-image: linear-gradient(
+          -90deg,
+          rgba(255, 255, 255, 0) 0%,
+          rgb(255, 255, 255) 100%
+        );
+        width: 64px;
+        height: 100%;
+        bottom: 0px;
+        left: 0;
+      }
+      &::after {
+        left: unset;
+        right: 0px;
+        transform: rotate(180deg);
+      }
+    }
+
     .Opta-Window {
       left: 0 !important;
       right: 0 !important;
@@ -53,10 +83,18 @@ export const WidgetContainer = styled(WidgetContainerBase)`
 
   .Opta-Scroller {
     background-color: white !important;
-
-    border: 1px solid #999999 !important;
+    border: 1px solid #999 !important;
     border-radius: 2px;
+    box-sizing: border-box;
     padding: 39px 0 !important;
+    width: 28px !important;
+
+    &:hover {
+      background-color: #f5f5f5 !important;
+    }
+    &:active {
+      background-color: #eee !important;
+    }
 
     &::after {
       background: rgba(0, 0, 0, 0)
@@ -81,11 +119,18 @@ export const WidgetContainer = styled(WidgetContainerBase)`
     @media (max-width: ${breakpoints.small}px) {
       display: none !important;
     }
+    @media (max-width: ${breakpoints.medium}px) {
+      width: 18px !important;
+    }
+    @media (max-width: ${breakpoints.wide}px) {
+      width: 24px !important;
+    }
   }
 
   .Opta-fixture {
-    background-color: #f5f5f5;
+    background-color: white;
     border-radius: 4px;
+    box-sizing: border-box;
     height: 80px;
     width: 160px !important;
     margin-inline: 4px;
@@ -109,16 +154,36 @@ export const WidgetContainer = styled(WidgetContainerBase)`
     .Opta-timings {
       height: 24px !important;
       order: -1;
-      color: #aaaaaa !important;
+      color: #696969 !important;
+    }
+
+    .Opta-timings .Opta-Time * {
+      font-weight: 700;
+      color: #01000d !important;
     }
 
     .Opta-TeamName,
     .Opta-Team-Score {
       color: #01000d !important;
-      font-weight: 700 !important;
+      font-family: 'Roboto-Medium' !important;
+    }
+
+    &.Opta-prematch {
+      background-color: #f5f5f5;
+      .Opta-Team-Score::after {
+        content: '-';
+      }
+      .Opta-timings .Opta-Time * {
+        font-weight: 400;
+        color: #696969 !important;
+      }
+    }
+
+    &.Opta-result {
+      border: 1px solid #ccc;
     }
-    &.Opta-prematch .Opta-Team-Score::after {
-      content: '-';
+    &.Opta-live {
+      border: 1px solid #01000d;
     }
 
     .Opta-Image-Team-Small {

package/src/components/opta/football/fixtures-tournament/OptaFootballFixturesTournament.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { showcaseConverter } from '@times-components/storybook';
+
+import { ArticleHarness } from '../../../../fixtures/article-harness/ArticleHarness';
+import { OptaFootballFixturesTournament } from './OptaFootballFixturesTournament';
+
+const showcase = {
+  children: [
+    {
+      decorator: (storyFn: () => React.ReactNode) => (
+        <ArticleHarness>{storyFn()}</ArticleHarness>
+      ),
+      type: 'decorator'
+    },
+    {
+      component: () => (
+        <OptaFootballFixturesTournament
+          season="2023"
+          competition="3"
+          show_title={false}
+          full_width
+        />
+      ),
+      name: 'Fixture Tournament',
+      type: 'story'
+    }
+  ],
+  name: 'Typescript Component/In Article/Football/Fixtures'
+};
+
+// @ts-ignore
+showcaseConverter(module, showcase);

package/src/components/opta/football/fixtures-tournament/OptaFootballFixturesTournament.tsx

@@ -0,0 +1,118 @@
+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 OptaFootballFixturesTournament: React.FC<{
+  season: string;
+  competition: string;
+  date_from?: string;
+  date_to?: string;
+  days_ahead?: number;
+  days_before?: number;
+  matchday?: string;
+  round?: string;
+  show_title?: boolean;
+  columns?: boolean;
+  full_width?: boolean;
+}> = React.memo(
+  ({
+    season,
+    competition,
+    date_from,
+    date_to,
+    days_ahead,
+    days_before,
+    matchday,
+    round,
+    show_title = true,
+    columns = true,
+    full_width
+  }) => {
+    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: 'fixtures',
+              season,
+              competition,
+              date_from,
+              date_to,
+              days_ahead,
+              days_before,
+              matchday,
+              round,
+              show_title,
+              live: true,
+              grouping: 'matchday',
+              show_grouping: true,
+              sub_grouping: 'date|matchday|group',
+              show_subgrouping: true,
+              show_crests: !isNationalComp,
+              date_format: 'dddd MMMM D YYYY',
+              breakpoints: 520
+            },
+            initElement('opta-widget', {
+              sport,
+              widget: 'match_summary',
+              season: '',
+              competition: '',
+              match: '',
+              live: true,
+              show_crests: true,
+              show_goals: true,
+              show_cards: 'red',
+              breakpoints: '520'
+            })
+          ).outerHTML;
+
+          initComponent();
+          setIsReady(true);
+        }
+      });
+    }, []);
+
+    isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-Team');
+
+    return (
+      <Container border={isReady} fullWidth={full_width}>
+        <WidgetContainer
+          ref={ref}
+          isNationalComp={isNationalComp}
+          columns={columns}
+        />
+
+        {!isReady && (
+          <PlaceholderContainer>
+            <Placeholder />
+          </PlaceholderContainer>
+        )}
+      </Container>
+    );
+  }
+);

package/src/components/opta/football/fixtures-tournament/__tests__/OptaFootballFixturesTournament.test.tsx

@@ -0,0 +1,82 @@
+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 { OptaFootballFixturesTournament } from '../OptaFootballFixturesTournament';
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('OptaFootballFixturesTournament', () => {
+  it('should render national competitions correctly', async () => {
+    const { asFragment, getByText } = render(
+      <OptaFootballFixturesTournament season="2023" competition="3" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+
+    await waitForElementToBeRemoved(getByText('Placeholder'));
+
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+    expect(mockInitComponent).toHaveBeenCalledTimes(1);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render national competitions correctly with single column', async () => {
+    const { asFragment, getByText } = render(
+      <OptaFootballFixturesTournament
+        season="2023"
+        competition="3"
+        columns={false}
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+
+    await waitForElementToBeRemoved(getByText('Placeholder'));
+
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+    expect(mockInitComponent).toHaveBeenCalledTimes(1);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render other competitions correctly', async () => {
+    const { asFragment, getByText } = render(
+      <OptaFootballFixturesTournament season="2023" competition="8" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+
+    await waitForElementToBeRemoved(getByText('Placeholder'));
+
+    expect(mockInitSettings).toHaveBeenCalledTimes(1);
+    expect(mockInitStyleSheet).toHaveBeenCalledTimes(1);
+    expect(mockInitComponent).toHaveBeenCalledTimes(1);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/opta/football/fixtures-tournament/__tests__/__snapshots__/OptaFootballFixturesTournament.test.tsx.snap

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptaFootballFixturesTournament should render national competitions correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa giUBsz"
+  >
+    <div
+      class="sc-htpNat sc-ifAKCX hfjbYe team-flags"
+    />
+    <div
+      class="sc-bwzfXH kVYHKf"
+    >
+      Placeholder
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`OptaFootballFixturesTournament should render national competitions correctly 2`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa hGXeaj"
+  >
+    <div
+      class="sc-htpNat sc-ifAKCX hfjbYe team-flags"
+    >
+      <div>
+        Widget
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`OptaFootballFixturesTournament should render national competitions correctly with single column 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa giUBsz"
+  >
+    <div
+      class="sc-htpNat sc-ifAKCX dNyttf team-flags"
+    />
+    <div
+      class="sc-bwzfXH kVYHKf"
+    >
+      Placeholder
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`OptaFootballFixturesTournament should render national competitions correctly with single column 2`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa hGXeaj"
+  >
+    <div
+      class="sc-htpNat sc-ifAKCX dNyttf team-flags"
+    >
+      <div>
+        Widget
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`OptaFootballFixturesTournament should render other competitions correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa giUBsz"
+  >
+    <div
+      class="sc-htpNat sc-ifAKCX dLyiar"
+    />
+    <div
+      class="sc-bwzfXH kVYHKf"
+    >
+      Placeholder
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`OptaFootballFixturesTournament should render other competitions correctly 2`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa hGXeaj"
+  >
+    <div
+      class="sc-htpNat sc-ifAKCX dLyiar"
+    >
+      <div>
+        Widget
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;