@times-components/ts-components 1.146.2-c9973aa4b92ab539c7e626ec928a64701390290d.3 → 1.147.0

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NavigationWrapper } from '../NavigationWrapper';
+
+const HomeColour = { light: '#123456', dark: '#abcdef' };
+const AwayColour = { light: '#654321', dark: '#fedcba' };
+
+describe('Matchday Live NavigationWrapper', () => {
+  it('renders with active home', () => {
+    const { container } = render(
+      <NavigationWrapper
+        isApp={false}
+        activeTeam="home"
+        homeTeamColor={HomeColour}
+        awayTeamColor={AwayColour}
+      >
+        <div className="navigation-buttons">
+          <button className="active home">Home</button>
+          <button className="away">Away</button>
+        </div>
+        <div className="home-widget-container">Home widget</div>
+        <div className="away-widget-container">Away widget</div>
+      </NavigationWrapper>
+    );
+
+    expect(container.querySelector('.navigation-buttons')).toBeInTheDocument();
+    expect(
+      container.querySelector('.navigation-buttons .active.home')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.home-widget-container')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.away-widget-container')
+    ).toBeInTheDocument();
+  });
+
+  it('renders with active away and isApp true', () => {
+    const { container } = render(
+      <NavigationWrapper
+        isApp={true}
+        activeTeam="away"
+        homeTeamColor={HomeColour}
+        awayTeamColor={AwayColour}
+      >
+        <div className="navigation-buttons">
+          <button className="home">Home</button>
+          <button className="active away">Away</button>
+        </div>
+        <div className="home-widget-container">Home widget</div>
+        <div className="away-widget-container">Away widget</div>
+      </NavigationWrapper>
+    );
+
+    expect(container.querySelector('.navigation-buttons')).toBeInTheDocument();
+    expect(
+      container.querySelector('.navigation-buttons .active.away')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.home-widget-container')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.away-widget-container')
+    ).toBeInTheDocument();
+  });
+});

package/src/components/opta/football/opta-match-stats/matchday-live/styles/__tests__/WidgetContainer.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { WidgetContainer } from '../WidgetContainer';
+
+describe('Matchday Live WidgetContainer', () => {
+  const baseProps = {
+    isApp: true,
+    homeTeamColor: { light: '#000000', dark: '#a19c9cff' },
+    awayTeamColor: { light: '#007A3F', dark: '#007A3F' }
+  };
+
+  it('generates styles', () => {
+    const { container } = render(
+      <WidgetContainer {...baseProps}>
+        <div className="Opta">
+          <div className="Opta_W">content</div>
+        </div>
+      </WidgetContainer>
+    );
+    expect(container.querySelector('.Opta > .Opta_W')).toBeTruthy();
+  });
+
+  it('generates dark-mode styles under .Opta-Overlay .Opta-Flex', () => {
+    const { container } = render(
+      <WidgetContainer {...baseProps}>
+        <div className="Opta-Overlay">
+          <div className="Opta-Flex">flex</div>
+        </div>
+      </WidgetContainer>
+    );
+    expect(container.querySelector('.Opta-Overlay .Opta-Flex')).toBeTruthy();
+  });
+
+  it('applies home-widget-container styles', () => {
+    const { container } = render(
+      <WidgetContainer {...baseProps} className="home-widget-container">
+        <div className="Opta-MatchHeader">
+          <div className="Opta-Away">Away Team</div>
+        </div>
+      </WidgetContainer>
+    );
+    expect(
+      container.querySelector(
+        '.home-widget-container .Opta-MatchHeader .Opta-Away'
+      )
+    ).toBeTruthy();
+  });
+
+  it('applies away-widget-container styles', () => {
+    const { container } = render(
+      <WidgetContainer {...baseProps} className="away-widget-container">
+        <div className="Opta-MatchHeader">
+          <div className="Opta-Home">Home Team</div>
+        </div>
+      </WidgetContainer>
+    );
+    expect(
+      container.querySelector(
+        '.away-widget-container .Opta-MatchHeader .Opta-Home'
+      )
+    ).toBeTruthy();
+  });
+});

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

@@ -54,5 +54,13 @@ export const WidgetWrapper = styled.div<{
         @media (max-width: ${maxMDBreakpoint}px) {
           display: none;
         }
+
+        ${props =>
+          props.isApp &&
+          `
+          @media(prefers-color-scheme: dark) {
+            color: ${darkTextColor} !important;
+          }
+        `}
       }
     `;

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

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsSummary should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bxivhb JyPwY"
+    class="sc-bxivhb dwwqvg"
   >
     <h3>
       Match Stats

package/src/components/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.stories.tsx

@@ -26,7 +26,7 @@ const showcase = {
           <OptaMatchStatsSummary
             season="2025"
             competition="8"
-            match="2561901"
+            match="2562044"
             isApp
           />
         </>

package/src/components/opta/football/opta-match-stats/summary/OptaMatchStatsSummary.tsx

@@ -72,7 +72,7 @@ export const OptaMatchStatsSummary: React.FC<{
               show_competition_name: true,
               competition_naming: 'full',
               team_naming: 'full',
-              player_naming: 'initial',
+              player_naming: 'last_name',
               show_live: false,
               show_logo: false,
               show_title: false

package/src/components/opta/football/opta-match-stats/summary/WidgetContainer.tsx

@@ -94,9 +94,14 @@ export const WidgetContainer = styled.div<{
       .Opta-Team {
         flex: 1;
         font-family: ${fonts.headline};
-        font-size: 24px;
+        font-size: 20px;
         font-weight: 800;
         color: ${textColor};
+        
+        @media (min-width: ${1024}px) {
+          font-size: 24px;
+        }
+
         ${props =>
           props.isApp &&
           `
@@ -316,14 +321,23 @@ export const WidgetContainer = styled.div<{
           display: flex;
           text-align: right;
         }
+
+        &.Opta-Home {
+          .Opta-Event-Player {
+            text-align: left;
+          }
+        }
+
+        &.Opta-Away {
+          .Opta-Event-Player {
+            text-align: right;
+          }
+        }
       }
 
       .Opta-Event-Text {
         display: flex;
         align-items: center;
-        .Opta-Event-Player {
-          text-align: left;
-        }
 
         &.Opta-Home {
           li {

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

@@ -3,7 +3,7 @@
 exports[`OptaMatchStatsSummary should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-ifAKCX eIVfcL"
+    class="sc-ifAKCX hyetdF"
   />
   <div
     class="sc-bwzfXH eSqyJ"

package/src/components/social-embed/SocialVendor.tsx

@@ -3,14 +3,12 @@ import { Twitter } from './components/TwitterComponent';
 import { Youtube } from './components/YoutubeComponent';
 import { TikTok } from './components/TiktokComponent';
 import { Instagram } from './components/InstagramComponent';
-import { Facebook } from './components/FacebookComponent';
 
 const vendors = {
   twitter: Twitter,
   youtube: Youtube,
   tiktok: TikTok,
-  instagram: Instagram,
-  facebook: Facebook
+  instagram: Instagram
 };
 
 export type VendorName = keyof typeof vendors;

package/src/components/social-embed/__tests__/SocialVendor.test.tsx

@@ -29,12 +29,6 @@ jest.mock('../components/InstagramComponent', () => ({
   ))
 }));
 
-jest.mock('../components/FacebookComponent', () => ({
-  Facebook: jest.fn(() => (
-    <div data-testid="facebook-component">Facebook Component</div>
-  ))
-}));
-
 describe('Vendor Component', () => {
   const renderVendor = (vendorName: VendorName, url: string) =>
     render(<Vendor vendorName={vendorName} url={url} />);
@@ -62,11 +56,6 @@ describe('Vendor Component', () => {
     expect(screen.getByTestId('instagram-component')).toBeInTheDocument();
   });
 
-   it('renders the Facebook component when vendorName is "facebook"', () => {
-    renderVendor('facebook' as VendorName, 'https://facebook.com/some/video');
-    expect(screen.getByTestId('facebook-component')).toBeInTheDocument();
-  });
-
   it('throws an error if an invalid vendorName is provided', () => {
     const renderInvalidVendor = () =>
       render(

package/src/components/social-embed/constants.ts

@@ -11,6 +11,5 @@ export const eventStatus = {
 
 export const vendors = {
   instagram: 'instagram',
-  twitter: 'twitter',
-  facebook: 'facebook'
+  twitter: 'twitter'
 } as const;

package/src/components/social-embed/helpers/socialMediaVendors.ts

@@ -20,10 +20,5 @@ export const socialMediaVendors: {
     id: '5e717c8e69966540e4554f05',
     status: 'pending',
     title: 'Instagram'
-  },
-  facebook: {
-    id: '5e8dj207kee725du372h892',
-    status: 'pending',
-    title: 'Facebook'
   }
 };

package/src/components/social-embed/styles.ts

@@ -96,33 +96,3 @@ export const InstagramContainer = styled.blockquote`
   width: calc(100% - 2px);
   position: relative;
 `;
-
-
-export const FacebookContainer = styled.div`
-  width: 100%;
-  max-width: 540px;
-  margin: 24px auto;
-
-  background: #ffffff;
-  border: 1px solid #dadde1;
-  border-radius: 8px;
-
-  min-height: 200px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  iframe {
-    width: 100% !important;
-    border: none;
-    overflow: hidden;
-  }
-
-  span,
-  .fb-post,
-  .fb-video {
-    width: 100% !important;
-  }
-`;
-

package/src/index.ts

@@ -152,3 +152,6 @@ export {
 export {
   OptaMatchStatsCommentary
 } from './components/opta/football/opta-match-stats/commentary/OptaMatchStatsCommentary';
+export {
+  OptaMatchStatsMatchdayLive
+} from './components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive';

package/dist/components/social-embed/components/FacebookComponent.d.ts

@@ -1,3 +0,0 @@
-export declare const Facebook: ({ url }: {
-    url: string;
-}) => JSX.Element;

package/dist/components/social-embed/components/FacebookComponent.js

@@ -1,28 +0,0 @@
-import React, { useEffect } from 'react';
-import { FacebookContainer } from '../styles';
-import { Placeholder } from '@times-components/image';
-export const Facebook = ({ url }) => {
-    useEffect(() => {
-        if (!document.getElementById('fb-root')) {
-            const fbRoot = document.createElement('div');
-            fbRoot.id = 'fb-root';
-            document.body.appendChild(fbRoot);
-        }
-        // Load SDK only once
-        if (!window.FB) {
-            const script = document.createElement('script');
-            script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0';
-            script.async = true;
-            script.defer = true;
-            script.crossOrigin = 'anonymous';
-            document.body.appendChild(script);
-        }
-        else {
-            // If SDK already loaded, re-parse
-            window.FB.XFBML.parse();
-        }
-    }, []);
-    return (React.createElement(FacebookContainer, { className: "fb-post", "data-href": url, "data-width": "500", "data-show-text": "true" },
-        React.createElement(Placeholder, null)));
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmFjZWJvb2tDb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zb2NpYWwtZW1iZWQvY29tcG9uZW50cy9GYWNlYm9va0NvbXBvbmVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDekMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQzlDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV0RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsQ0FBQyxFQUFFLEdBQUcsRUFBbUIsRUFBRSxFQUFFO0lBQ25ELFNBQVMsQ0FBQyxHQUFHLEVBQUU7UUFDYixJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxTQUFTLENBQUMsRUFBRTtZQUN2QyxNQUFNLE1BQU0sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQzdDLE1BQU0sQ0FBQyxFQUFFLEdBQUcsU0FBUyxDQUFDO1lBQ3RCLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1NBQ25DO1FBRUQscUJBQXFCO1FBQ3JCLElBQUksQ0FBRSxNQUFjLENBQUMsRUFBRSxFQUFFO1lBQ3ZCLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7WUFDaEQsTUFBTSxDQUFDLEdBQUcsR0FBRyxpRUFBaUUsQ0FBQztZQUMvRSxNQUFNLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztZQUNwQixNQUFNLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztZQUNwQixNQUFNLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQztZQUNqQyxRQUFRLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUNuQzthQUFNO1lBQ0wsa0NBQWtDO1lBQ2pDLE1BQWMsQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRVAsT0FBTyxDQUNMLG9CQUFDLGlCQUFpQixJQUNoQixTQUFTLEVBQUMsU0FBUyxlQUNSLEdBQUcsZ0JBQ0gsS0FBSyxvQkFDRCxNQUFNO1FBRXJCLG9CQUFDLFdBQVcsT0FBRyxDQUNHLENBQ3JCLENBQUM7QUFDSixDQUFDLENBQUMifQ==

package/src/components/social-embed/components/FacebookComponent.tsx

@@ -1,38 +0,0 @@
-import React, { useEffect } from 'react';
-import { FacebookContainer } from '../styles';
-import { Placeholder } from '@times-components/image';
-
-export const Facebook = ({ url }: { url: string }) => {
-  useEffect(() => {
-    if (!document.getElementById('fb-root')) {
-      const fbRoot = document.createElement('div');
-      fbRoot.id = 'fb-root';
-      document.body.appendChild(fbRoot);
-    }
-
-    // Load SDK only once
-    if (!(window as any).FB) {
-      const script = document.createElement('script');
-      script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0';
-      script.async = true;
-      script.defer = true;
-      script.crossOrigin = 'anonymous';
-      document.body.appendChild(script);
-    } else {
-      // If SDK already loaded, re-parse
-      (window as any).FB.XFBML.parse();
-    }
-  }, []);
-
-  return (
-    <FacebookContainer
-      className="fb-post"
-      data-href={url}
-      data-width="500"
-      data-show-text="true"
-    >
-      <Placeholder />
-    </FacebookContainer>
-  );
-};
-