@times-components/ts-components 1.145.1-777882a8b99dc7733f00b94202a91fa8b7dc2a7e.1 → 1.145.1-7822206a549cb799b9eb65f35228b22be1db32a1.5

package/src/components/travel-mini-cta/index.tsx

@@ -0,0 +1,164 @@
+import React, { FC, useState, useRef, useEffect, MouseEvent } from 'react';
+import { TravelMiniCTAProps } from './types';
+import {
+  Container,
+  ContentWrapper,
+  LeftSection,
+  LogoContainer,
+  LogoBox,
+  LogoText,
+  TextContainer,
+  Label,
+  MobileLabel,
+  Description,
+  RightSection,
+  ContactInfo,
+  PhoneLabel,
+  PhoneNumber,
+  WorkingHoursContainer,
+  WorkingHoursText,
+  ButtonsContainer,
+  PrimaryButton,
+  SecondaryButton
+} from './styles';
+
+export const TravelMiniCTA: FC<TravelMiniCTAProps> = ({
+  description,
+  phoneLabel,
+  phoneNumber,
+  workingHours,
+  primaryButtonText,
+  secondaryButtonText,
+  secondaryButtonUrl,
+  isApp
+}) => {
+  const [chatReady, setChatReady] = useState(false);
+  const [chatFailed, setChatFailed] = useState(false);
+  const chatDivRef = useRef<HTMLDivElement>(null);
+
+  const formattedWorkingHours = workingHours
+    ? workingHours.split(',').map(hour => hour.trim())
+    : [];
+
+  const handlePrimaryButtonClick = (
+    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+  ) => {
+    e.preventDefault();
+
+    const chatDiv = chatDivRef.current;
+    if (chatDiv) {
+      const lpEventElement = chatDiv.querySelector(
+        '[data-lp-event]'
+      ) as HTMLElement;
+      if (lpEventElement) {
+        lpEventElement.click();
+      }
+    }
+  };
+
+  useEffect(
+    () => {
+      const chatDiv = chatDivRef.current;
+      if (!chatDiv || typeof window === 'undefined') {
+        return;
+      }
+
+      let timeoutId: NodeJS.Timeout | null = null;
+      let previouslyFound = false;
+
+      const observer = new MutationObserver(() => {
+        const lpEventElement = chatDiv.querySelector(
+          '[data-lp-event]'
+        ) as HTMLElement;
+
+        if (lpEventElement && !previouslyFound) {
+          previouslyFound = true;
+          setChatReady(true);
+          setChatFailed(false);
+
+          if (primaryButtonText) {
+            lpEventElement.textContent = primaryButtonText;
+          }
+
+          // Clear timeout since chat loaded successfully
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+          }
+        } else if (!lpEventElement && previouslyFound) {
+          previouslyFound = false;
+          setChatReady(false);
+          setChatFailed(false);
+        }
+      });
+
+      observer.observe(chatDiv, { childList: true, subtree: true });
+
+      timeoutId = setTimeout(() => {
+        if (!previouslyFound) {
+          observer.disconnect();
+          setChatFailed(true);
+        }
+      }, 15000);
+
+      return () => {
+        observer.disconnect();
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    },
+    [primaryButtonText]
+  );
+
+  return (
+    <Container data-testid="travel-mini-cta" isApp={isApp}>
+      <ContentWrapper>
+        <LeftSection>
+          <LogoContainer>
+            <LogoBox isApp={isApp}>
+              <LogoText isApp={isApp}>T</LogoText>
+            </LogoBox>
+            <MobileLabel isApp={isApp}>VISIT TIMES HOLIDAYS</MobileLabel>
+          </LogoContainer>
+          <TextContainer>
+            <Label isApp={isApp}>VISIT TIMES HOLIDAYS</Label>
+            <Description isApp={isApp}>{description}</Description>
+          </TextContainer>
+        </LeftSection>
+
+        <RightSection>
+          <ContactInfo>
+            <PhoneLabel href={`tel:${phoneNumber}`} isApp={isApp}>
+              {phoneLabel}{' '}
+              <PhoneNumber isApp={isApp}>{phoneNumber}</PhoneNumber>
+            </PhoneLabel>
+            <WorkingHoursContainer>
+              {formattedWorkingHours.map((hours, index) => (
+                <WorkingHoursText key={index} isApp={isApp}>
+                  {hours}
+                </WorkingHoursText>
+              ))}
+            </WorkingHoursContainer>
+          </ContactInfo>
+          <ButtonsContainer>
+            <PrimaryButton
+              as="button"
+              type="button"
+              onClick={handlePrimaryButtonClick}
+              isApp={isApp}
+              disabled={!chatReady}
+            >
+              {chatFailed && 'Chat unavailable'}
+              {!chatReady && !chatFailed && 'Loading chat...'}
+              <div id="LP_DIV_TRAVEL_1239001" ref={chatDivRef} />
+            </PrimaryButton>
+            <SecondaryButton href={secondaryButtonUrl} isApp={isApp}>
+              {secondaryButtonText}
+            </SecondaryButton>
+          </ButtonsContainer>
+        </RightSection>
+      </ContentWrapper>
+    </Container>
+  );
+};

package/src/components/travel-mini-cta/styles.ts

@@ -0,0 +1,331 @@
+import styled from 'styled-components';
+import { getMediaQuery, applyDarkMode } from '../../utils';
+
+const BaseLabel = styled.div<{ isApp?: boolean }>`
+  font-family: 'Roboto';
+  font-weight: 500;
+  line-height: 1.125;
+  font-size: 14px;
+  letter-spacing: 0em;
+  color: #236fa3;
+  text-transform: uppercase;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        color: #f5f5f5 !important;
+    `,
+      isApp
+    )};
+`;
+
+export const Container = styled.div<{ isApp?: boolean }>`
+  background-color: #ffffff;
+  padding: 24px;
+  border-top: 1px dashed;
+  border-bottom: 1px dashed;
+  border-color: #cccccc;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        background-color: #f5f5f5 !important;
+        border-color: #e4e4e4 !important;
+    `,
+      isApp
+    )};
+`;
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+
+  ${getMediaQuery('xs', 'md')} {
+    flex-direction: column;
+    gap: 24px;
+  }
+`;
+
+export const LeftSection = styled.div`
+  display: flex;
+  align-items: flex-start;
+  width: 50%;
+  gap: 24px;
+
+  ${getMediaQuery('xs', 'md')} {
+    width: 100%;
+    flex-direction: column;
+    gap: 16px;
+  }
+`;
+
+export const LogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  ${getMediaQuery('xs', 'md')} {
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+    justify-content: space-between;
+    width: 100%;
+  }
+`;
+
+export const LogoBox = styled.div<{ isApp?: boolean }>`
+  width: 40px;
+  height: 40px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #236fa3;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        background-color: #c2c2c2 !important;
+    `,
+      isApp
+    )};
+`;
+
+export const LogoText = styled.span<{ isApp?: boolean }>`
+  font-family: 'Times Modern', serif;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 1.125;
+  letter-spacing: 0.02em;
+  color: #ffffff;
+  padding-top: 4px;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        color: #1d1d1b !important;
+    `,
+      isApp
+    )};
+`;
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 375px;
+
+  ${getMediaQuery('xs', 'md')} {
+    gap: 24px;
+  }
+`;
+
+export const Label = styled(BaseLabel)`
+  ${getMediaQuery('xs', 'md')} {
+    display: none;
+  }
+`;
+
+export const MobileLabel = styled(BaseLabel)`
+  display: none;
+
+  ${getMediaQuery('xs', 'md')} {
+    display: block;
+  }
+`;
+
+export const Description = styled.div<{ isApp?: boolean }>`
+  font-family: 'Times Modern';
+  font-weight: 700;
+  line-height: 1.125;
+  font-size: 24px;
+  letter-spacing: 0em;
+  color: #333333;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        color: #cccccc !important;
+    `,
+      isApp
+    )};
+
+  ${getMediaQuery('xs', 'md')} {
+    margin-right: 64px;
+  }
+`;
+
+export const RightSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 50%;
+
+  ${getMediaQuery('xs', 'md')} {
+    gap: 32px;
+    width: 100%;
+  }
+`;
+
+export const ContactInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+export const PhoneLabel = styled.a<{ isApp?: boolean }>`
+  text-decoration: none;
+  display: inline;
+  font-family: 'Times Digital W04 Regular';
+  font-weight: 400;
+  line-height: 1.5;
+  font-size: 18px;
+  letter-spacing: 0em;
+  color: #333333;
+  cursor: pointer;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        color: #c2c2c2 !important;
+    `,
+      isApp
+    )};
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const PhoneNumber = styled.span<{ isApp?: boolean }>`
+  font-family: 'Times Modern';
+  font-weight: 700;
+  line-height: 1.125;
+  font-size: 22px;
+  letter-spacing: 0em;
+  color: #333333;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        color: #c2c2c2 !important;
+    `,
+      isApp
+    )};
+`;
+
+export const WorkingHoursContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  ${getMediaQuery('xs', 'md')} {
+    flex-direction: column;
+  }
+`;
+
+export const WorkingHoursText = styled.div<{ isApp?: boolean }>`
+  font-family: 'Times Digital W04 Regular';
+  font-weight: 400;
+  line-height: 1.5;
+  font-size: 18px;
+  letter-spacing: 0em;
+  color: #333333;
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        color: #cccccc !important;
+    `,
+      isApp
+    )};
+`;
+
+export const ButtonsContainer = styled.div`
+  display: flex;
+  gap: 16px;
+
+  ${getMediaQuery('xs', 'md')} {
+    flex-direction: column;
+  }
+`;
+
+const BaseButton = styled.a`
+  text-decoration: none;
+  border-radius: 0px;
+  width: 100%;
+  min-height: 44px;
+  font-family: 'Roboto';
+  font-weight: 500;
+  line-height: 1.5;
+  font-size: 16px;
+  letter-spacing: 0em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+`;
+
+export const PrimaryButton = styled(BaseButton)<{
+  disabled?: boolean;
+  isApp?: boolean;
+}>`
+  border: none;
+  background-color: #005c8a;
+  color: #ffffff;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+
+  div[data-lp-event] {
+    cursor: pointer;
+    font-family: 'Roboto';
+    font-weight: 500;
+    line-height: 1.5;
+    font-size: 16px;
+    letter-spacing: 0em;
+  }
+
+  &:hover {
+    background-color: #00527a;
+  }
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        background-color: #74bade !important;
+        color: #1d1d1b !important;
+
+        &:hover {
+            background-color: #93cbe8 !important;
+        }
+    `,
+      isApp
+    )};
+`;
+
+export const SecondaryButton = styled(BaseButton)<{ isApp?: boolean }>`
+  border: 1px solid #005c8a;
+  background-color: transparent;
+  color: #005c8a;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  ${({ isApp }) =>
+    applyDarkMode(
+      `
+        border-color: #74bade !important;
+        color: #74bade !important;
+
+        &:hover {
+            background-color: #01000d !important;
+        }
+    `,
+      isApp
+    )};
+`;

package/src/components/travel-mini-cta/travel-mini-cta.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TravelMiniCTA } from './index';
+import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
+
+storiesOf('Typescript Component/In Article/Travel Mini CTA', module).add(
+  'Travel Mini CTA',
+  () => (
+    <ArticleHarness>
+      <div style={{ padding: '16px' }}>
+        <TravelMiniCTA
+          description="Begin your journey to Croatia with a holiday designed around you, guided by a dedicated travel expert."
+          phoneLabel="Call us on"
+          phoneNumber="08083049757"
+          workingHours="Mon - Fri: 9am - 6pm, Sat: 10am - 5pm"
+          primaryButtonText="Chat with us"
+          secondaryButtonText="Enquire now"
+          secondaryButtonUrl="/enquire"
+        />
+      </div>
+    </ArticleHarness>
+  )
+);

package/src/components/travel-mini-cta/types.ts

@@ -0,0 +1,10 @@
+export interface TravelMiniCTAProps {
+  description?: string;
+  phoneLabel?: string;
+  phoneNumber?: string;
+  workingHours?: string;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  secondaryButtonUrl?: string;
+  isApp?: boolean;
+}

package/src/index.ts

@@ -32,6 +32,7 @@ export {
 } from './components/update-button/update-button-with-delay';
 export { Banner } from './components/banner/banner';
 export { JobTitle } from './components/job-title/job-title';
+export { TravelMiniCTA } from './components/travel-mini-cta';
 
 // Newsletter Components
 export {
@@ -152,6 +153,3 @@ 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/src/utils/applyDarkMode.ts

@@ -0,0 +1,12 @@
+// Helper for dark mode styling
+export const applyDarkMode = (styles: string, isApp?: boolean) => {
+  if (!isApp) {
+    return '';
+  }
+
+  return `
+        @media (prefers-color-scheme: dark) {
+            ${styles}
+        }
+    `;
+};

package/src/utils/getMediaQuery.ts

@@ -0,0 +1,25 @@
+export const breakpoints = {
+  xs: 0,
+  sm: 520,
+  md: 768,
+  lg: 1024,
+  xl: 1320,
+  all: 0
+};
+
+export type BreakPointKeys = keyof typeof breakpoints;
+export type MQ = Partial<Record<BreakPointKeys, string>> | string;
+
+export const getMediaQuery = (
+  minWidth?: keyof typeof breakpoints,
+  maxWidth?: keyof typeof breakpoints
+) => () => {
+  const queries = ['@media screen'];
+  if (minWidth && breakpoints[minWidth]) {
+    queries.push(` and (min-width: ${breakpoints[minWidth]}px)`);
+  }
+  if (maxWidth) {
+    queries.push(` and (max-width: ${breakpoints[maxWidth] - 1}px)`);
+  }
+  return queries.join('');
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { applyDarkMode } from './applyDarkMode';
+export { getMediaQuery } from './getMediaQuery';

package/dist/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { TeamColor } from '../shared/types';
-export declare const DesktopWidget: React.FC<{
-    season: string;
-    competition: string;
-    match: string;
-    isApp?: boolean;
-    homeTeamColor?: TeamColor;
-    awayTeamColor?: TeamColor;
-}>;

package/dist/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.js

@@ -1,69 +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';
-export const DesktopWidget = React.memo(({ season, competition, match, isApp = false, homeTeamColor = { light: '#000000', dark: '#a19c9cff' }, awayTeamColor = { light: '#007A3F', dark: '#007A3F' } }) => {
-    const ref = React.createRef();
-    const [isReady, setIsReady] = useState(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 (React.createElement(React.Fragment, null,
-        React.createElement(WidgetWrapper, { isApp: isApp, className: "matchday-live-widget-desktop" },
-            React.createElement("h3", null, "Line-ups"),
-            React.createElement(WidgetContainer, { ref: ref, isApp: isApp, homeTeamColor: homeTeamColor, awayTeamColor: awayTeamColor })),
-        !isReady && (React.createElement(PlaceholderContainer, { "data-testid": "placeholder" },
-            React.createElement(Placeholder, null)))));
-});
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGVza3RvcFdpZGdldC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL29wdGEvZm9vdGJhbGwvb3B0YS1tYXRjaC1zdGF0cy9tYXRjaGRheS1saXZlL0Rlc2t0b3BXaWRnZXQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNuRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEQsT0FBTyxFQUNMLFlBQVksRUFDWixjQUFjLEVBQ2QsVUFBVSxFQUNWLFdBQVcsRUFDWCxhQUFhLEVBQ2QsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNyRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBR2pELE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FPckIsS0FBSyxDQUFDLElBQUksQ0FDYixDQUFDLEVBQ0MsTUFBTSxFQUNOLFdBQVcsRUFDWCxLQUFLLEVBQ0wsS0FBSyxHQUFHLEtBQUssRUFDYixhQUFhLEdBQUcsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUUsRUFDdkQsYUFBYSxHQUFHLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLEVBQ3RELEVBQUUsRUFBRTtJQUNILE1BQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxTQUFTLEVBQWtCLENBQUM7SUFDOUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxVQUFVLENBQUMsR0FBRyxRQUFRLENBQVUsS0FBSyxDQUFDLENBQUM7SUFFdkQsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLE1BQU0sS0FBSyxHQUFHLFVBQVUsQ0FBQztRQUV6QixZQUFZLEVBQUUsQ0FBQztRQUNmLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN0QixVQUFVLEVBQUU7YUFDVCxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ1QsSUFBSSxHQUFHLENBQUMsT0FBTyxFQUFFO2dCQUNmLEdBQUcsQ0FBQyxPQUFPLENBQUMsU0FBUyxHQUFHLFdBQVcsQ0FBQyxhQUFhLEVBQUU7b0JBQ2pELEtBQUs7b0JBQ0wsTUFBTSxFQUFFLGVBQWU7b0JBQ3ZCLE1BQU07b0JBQ04sV0FBVztvQkFDWCxLQUFLO29CQUNMLFFBQVEsRUFBRSxRQUFRO29CQUNsQixJQUFJLEVBQUUsSUFBSTtvQkFDVixXQUFXLEVBQUUsWUFBWTtvQkFDekIsSUFBSSxFQUFFLE1BQU07b0JBQ1osaUJBQWlCLEVBQUUsSUFBSTtvQkFDdkIsV0FBVyxFQUFFLElBQUk7b0JBQ2pCLGlCQUFpQixFQUFFLEtBQUs7b0JBQ3hCLG1CQUFtQixFQUFFLElBQUk7b0JBQ3pCLFVBQVUsRUFBRSxLQUFLO29CQUNqQixtQkFBbUIsRUFBRSxLQUFLO29CQUMxQixxQkFBcUIsRUFBRSxLQUFLO29CQUM1QixTQUFTLEVBQUUsS0FBSztvQkFDaEIsV0FBVyxFQUFFLGtCQUFrQjtvQkFDL0Isa0JBQWtCLEVBQUUsVUFBVTtvQkFDOUIsWUFBWSxFQUFFLElBQUk7b0JBQ2xCLFVBQVUsRUFBRSxJQUFJO29CQUNoQixlQUFlLEVBQUUsSUFBSTtvQkFDckIsV0FBVyxFQUFFLEtBQUs7b0JBQ2xCLGlCQUFpQixFQUFFLEtBQUs7b0JBQ3hCLGdCQUFnQixFQUFFLEtBQUs7b0JBQ3ZCLGdCQUFnQixFQUFFLElBQUk7b0JBQ3RCLGlCQUFpQixFQUFFLElBQUk7b0JBQ3ZCLGlCQUFpQixFQUFFLElBQUk7b0JBQ3ZCLFNBQVMsRUFBRSxLQUFLO29CQUNoQixrQkFBa0IsRUFBRSxPQUFPO29CQUMzQixXQUFXLEVBQUUsTUFBTTtvQkFDbkIsYUFBYSxFQUFFLFdBQVc7b0JBQzFCLFNBQVMsRUFBRSxLQUFLO29CQUNoQixTQUFTLEVBQUUsS0FBSztvQkFDaEIsVUFBVSxFQUFFLEtBQUs7b0JBQ2pCLFdBQVcsRUFBRSxVQUFVO2lCQUN4QixDQUFDLENBQUMsU0FBUyxDQUFDO2dCQUViLGFBQWEsRUFBRSxDQUFDO2FBQ2pCO1FBQ0gsQ0FBQyxDQUFDO2FBQ0QsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUNULFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuQixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUVQLE9BQU8sQ0FDTDtRQUNFLG9CQUFDLGFBQWEsSUFBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBQyw4QkFBOEI7WUFDbkUsMkNBQWlCO1lBQ2pCLG9CQUFDLGVBQWUsSUFDZCxHQUFHLEVBQUUsR0FBRyxFQUNSLEtBQUssRUFBRSxLQUFLLEVBQ1osYUFBYSxFQUFFLGFBQWEsRUFDNUIsYUFBYSxFQUFFLGFBQWEsR0FDNUIsQ0FDWTtRQUNmLENBQUMsT0FBTyxJQUFJLENBQ1gsb0JBQUMsb0JBQW9CLG1CQUFhLGFBQWE7WUFDN0Msb0JBQUMsV0FBVyxPQUFHLENBQ00sQ0FDeEIsQ0FDQSxDQUNKLENBQUM7QUFDSixDQUFDLENBQ0YsQ0FBQyJ9

package/dist/components/opta/football/opta-match-stats/matchday-live/MobileWidget.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { TeamColor } from '../shared/types';
-export declare const MobileWidget: React.FC<{
-    season: string;
-    competition: string;
-    match: string;
-    isApp?: boolean;
-    homeTeamColor?: TeamColor;
-    awayTeamColor?: TeamColor;
-    homeTeamName: string;
-    awayTeamName: string;
-}>;