@times-components/ts-components 1.129.6 → 1.130.0

package/src/components/opta/cricket/scorecard/OptaCricketScorecard.stories.tsx

@@ -21,7 +21,7 @@ const showcase = {
     },
     {
       component: () => (
-        <OptaCricketScorecard competition="3071" match="55391" height={905} />
+        <OptaCricketScorecard competition="3071" match="55391" heightSm={905} />
       ),
       name: 'Scorecard (1st inns) with set height',
       type: 'story'

package/src/components/opta/cricket/scorecard/OptaCricketScorecard.tsx

@@ -9,74 +9,85 @@ import {
   initElement,
   initComponent
 } from '../../utils/config';
-
-import { Container, PlaceholderContainer } from '../shared-styles';
+import { Container, PlaceholderContainer } from '../../shared/shared-styles';
 import { WidgetContainer } from './styles';
 
 export const OptaCricketScorecard: React.FC<{
   competition: string;
   match: string;
   full_width?: boolean;
-  height?: number;
-}> = React.memo(({ competition, match, full_width, height }) => {
-  const ref = React.createRef<HTMLDivElement>();
+  heightSm?: number;
+  heightMd?: number;
+  heightLg?: number;
+}> = React.memo(
+  ({ competition, match, full_width, heightSm, heightMd, heightLg }) => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    const [isReady, setIsReady] = useState<boolean>(false);
 
-  const [isReady, setIsReady] = useState<boolean>(false);
+    const isHeight = heightSm || heightMd || heightLg;
 
-  useEffect(() => {
-    const sport = 'cricket';
+    useEffect(() => {
+      const sport = 'cricket';
 
-    initSettings();
-    initStyleSheet(sport);
+      initSettings();
+      initStyleSheet(sport);
 
-    initScript().then(() => {
-      if (ref.current) {
-        ref.current.innerHTML = initElement('opta-widget', {
-          sport,
-          widget: 'score_card',
-          season: '0',
-          competition,
-          match,
-          template: 'normal',
-          live: true,
-          show_match_header: true,
-          show_crests: true,
-          show_competition_name: true,
-          show_match_description: true,
-          show_date: true,
-          date_format: 'DD/MM/YYYY',
-          show_venue: true,
-          show_officials: false,
-          show_toss: false,
-          show_state_of_play: true,
-          navigation: 'tabs',
-          show_batting: true,
-          show_mins_batted: false,
-          show_fours: true,
-          show_sixes: true,
-          show_strike_rate: true,
-          show_bowling: true,
-          show_economy: true,
-          show_fow: true,
-          player_naming: 'full',
-          breakpoints: '520'
-        }).outerHTML;
+      initScript().then(() => {
+        if (ref.current) {
+          ref.current.innerHTML = initElement('opta-widget', {
+            sport,
+            widget: 'score_card',
+            season: '0',
+            competition,
+            match,
+            template: 'normal',
+            live: true,
+            show_match_header: true,
+            show_crests: true,
+            show_competition_name: true,
+            show_match_description: true,
+            show_date: true,
+            date_format: 'DD/MM/YYYY',
+            show_venue: true,
+            show_officials: false,
+            show_toss: false,
+            show_state_of_play: true,
+            navigation: 'tabs',
+            show_batting: true,
+            show_mins_batted: false,
+            show_fours: true,
+            show_sixes: true,
+            show_strike_rate: true,
+            show_bowling: true,
+            show_economy: true,
+            show_fow: true,
+            player_naming: 'full',
+            breakpoints: '520'
+          }).outerHTML;
 
-        initComponent();
-        setIsReady(true);
-      }
-    });
-  }, []);
+          initComponent();
+          setIsReady(true);
+        }
+      });
+    }, []);
 
-  return (
-    <Container border={isReady} fullWidth={full_width} $height={height}>
-      <WidgetContainer ref={ref} />
+    return (
+      <Container
+        border={isReady}
+        fullWidth={full_width}
+        heightSm={heightSm}
+        heightMd={heightMd}
+        heightLg={heightLg}
+      >
+        <WidgetContainer ref={ref} />
 
-      {!isReady && (
-        <PlaceholderContainer height={height}>
-          <Placeholder />
-        </PlaceholderContainer>
-      )}
-    </Container>
-  );
-});
+        {!isReady && (
+          <PlaceholderContainer isHeight={!!isHeight}>
+            <Placeholder />
+          </PlaceholderContainer>
+        )}
+      </Container>
+    );
+  }
+);

package/src/components/opta/cricket/scorecard/__tests__/__snapshots__/OptaCricketScorecard.test.tsx.snap

@@ -3,13 +3,13 @@
 exports[`OptaCricketScorecard should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa laZDmH"
+    class="sc-bdVaJa hOxnUM"
   >
     <div
-      class="sc-htpNat sc-bxivhb cDDLep"
+      class="sc-bxivhb sc-ifAKCX eulKbd"
     />
     <div
-      class="sc-bwzfXH iCdzAV"
+      class="sc-bwzfXH kVYHKf"
     >
       Placeholder
     </div>
@@ -20,10 +20,10 @@ exports[`OptaCricketScorecard should render correctly 1`] = `
 exports[`OptaCricketScorecard should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa Ssmqo"
+    class="sc-bdVaJa iGGGrD"
   >
     <div
-      class="sc-htpNat sc-bxivhb cDDLep"
+      class="sc-bxivhb sc-ifAKCX eulKbd"
     >
       <div>
         Widget

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

@@ -1,35 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
-
-export const Container = styled.div<{
-  border: boolean;
-  fullWidth?: boolean;
-  $height?: number;
-}>`
-  ${({ $height }) =>
-    $height && `height: ${$height}px;`} margin: 0 auto 20px auto;
-  background-color: ${colours.functional.backgroundPrimary};
-  border-top: ${({ border }) =>
-    border ? `2px solid ${colours.section.sport}` : 'none'};
-
-  a {
-    text-decoration: none;
-  }
-
-  @media (min-width: ${breakpoints.medium}px) {
-    flex-direction: row;
-    width: ${({ fullWidth }) => (fullWidth ? '100%' : '80.8%')};
-  }
-
-  @media (min-width: ${breakpoints.wide}px) {
-    width: ${({ fullWidth }) => (fullWidth ? '100%' : '56.2%')};
-  }
-`;
-
-export const PlaceholderContainer = styled.div<{ height?: number }>`
-  height: ${({ height }) => height || 200}px;
-  position: relative;
-`;
+import { colours, fonts } from '@times-components/ts-styleguide';
 
 export const WidgetContainerBase = styled.div`
   .Opta {

package/src/components/opta/football/fixtures/OptaFootballFixtures.tsx

@@ -19,64 +19,86 @@ export const OptaFootballFixtures: React.FC<{
   date_from: string;
   date_to: string;
   full_width?: boolean;
-}> = React.memo(({ season, competition, date_from, date_to, full_width }) => {
-  const ref = React.createRef<HTMLDivElement>();
+  heightSm?: number;
+  heightMd?: number;
+  heightLg?: number;
+}> = React.memo(
+  ({
+    season,
+    competition,
+    date_from,
+    date_to,
+    full_width,
+    heightSm,
+    heightMd,
+    heightLg
+  }) => {
+    const ref = React.createRef<HTMLDivElement>();
 
-  const [isReady, setIsReady] = useState<boolean>(false);
+    const [isReady, setIsReady] = useState<boolean>(false);
 
-  useEffect(() => {
-    const sport = 'football';
+    const isHeight = heightSm || heightMd || heightLg;
 
-    initSettings();
-    initStyleSheet(sport);
+    useEffect(() => {
+      const sport = 'football';
 
-    initScript().then(() => {
-      if (ref.current) {
-        ref.current.innerHTML = initElement(
-          'opta-widget',
-          {
-            sport,
-            widget: 'fixtures',
-            season,
-            competition,
-            date_from,
-            date_to,
-            live: true,
-            grouping: 'date',
-            show_grouping: true,
-            show_crests: true,
-            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;
+      initSettings();
+      initStyleSheet(sport);
 
-        initComponent();
-        setIsReady(true);
-      }
-    });
-  }, []);
+      initScript().then(() => {
+        if (ref.current) {
+          ref.current.innerHTML = initElement(
+            'opta-widget',
+            {
+              sport,
+              widget: 'fixtures',
+              season,
+              competition,
+              date_from,
+              date_to,
+              live: true,
+              grouping: 'date',
+              show_grouping: true,
+              show_crests: true,
+              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;
 
-  return (
-    <Container border={isReady} fullWidth={full_width}>
-      <WidgetContainer ref={ref} />
+          initComponent();
+          setIsReady(true);
+        }
+      });
+    }, []);
 
-      {!isReady && (
-        <PlaceholderContainer>
-          <Placeholder />
-        </PlaceholderContainer>
-      )}
-    </Container>
-  );
-});
+    return (
+      <Container
+        border={isReady}
+        fullWidth={full_width}
+        heightSm={heightSm}
+        heightMd={heightMd}
+        heightLg={heightLg}
+      >
+        <WidgetContainer ref={ref} />
+
+        {!isReady && (
+          <PlaceholderContainer isHeight={!!isHeight}>
+            <Placeholder />
+          </PlaceholderContainer>
+        )}
+      </Container>
+    );
+  }
+);

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

@@ -3,7 +3,7 @@
 exports[`OptaFootballFixtures should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa laZDmH"
+    class="sc-bdVaJa hOxnUM"
   >
     <div
       class="sc-htpNat sc-ifAKCX kRuyQz"
@@ -20,7 +20,7 @@ exports[`OptaFootballFixtures should render correctly 1`] = `
 exports[`OptaFootballFixtures should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa Ssmqo"
+    class="sc-bdVaJa iGGGrD"
   >
     <div
       class="sc-htpNat sc-ifAKCX kRuyQz"

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

@@ -29,6 +29,9 @@ export const OptaFootballFixturesTournament: React.FC<{
   hide_matchday?: boolean;
   columns?: boolean;
   full_width?: boolean;
+  heightSm?: number;
+  heightMd?: number;
+  heightLg?: number;
 }> = React.memo(
   ({
     season,
@@ -43,12 +46,16 @@ export const OptaFootballFixturesTournament: React.FC<{
     hide_matchday,
     show_title = true,
     columns = true,
-    full_width
+    full_width,
+    heightSm,
+    heightMd,
+    heightLg
   }) => {
     const ref = React.createRef<HTMLDivElement>();
 
     const [isReady, setIsReady] = useState<boolean>(false);
     const isNationalComp = isNationalCompetition(competition);
+    const isHeight = heightSm || heightMd || heightLg;
 
     useEffect(() => {
       const sport = 'football';
@@ -104,7 +111,14 @@ export const OptaFootballFixturesTournament: React.FC<{
     isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-Team');
 
     return (
-      <Container border={isReady} fullWidth={full_width} className={classes}>
+      <Container
+        border={isReady}
+        fullWidth={full_width}
+        className={classes}
+        heightSm={heightSm}
+        heightMd={heightMd}
+        heightLg={heightLg}
+      >
         <WidgetContainer
           ref={ref}
           isNationalComp={isNationalComp}
@@ -113,7 +127,7 @@ export const OptaFootballFixturesTournament: React.FC<{
         />
 
         {!isReady && (
-          <PlaceholderContainer>
+          <PlaceholderContainer isHeight={!!isHeight}>
             <Placeholder />
           </PlaceholderContainer>
         )}

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

@@ -3,7 +3,7 @@
 exports[`OptaFootballFixturesTournament should render full width correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa gCTnDg"
+    class="sc-bdVaJa kYgBaB"
   >
     <div
       class="sc-htpNat sc-ifAKCX dniyMN team-flags"
@@ -20,7 +20,7 @@ exports[`OptaFootballFixturesTournament should render full width correctly 1`] =
 exports[`OptaFootballFixturesTournament should render full width correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa ecgEcY"
+    class="sc-bdVaJa hSmNfz"
   >
     <div
       class="sc-htpNat sc-ifAKCX dniyMN team-flags"
@@ -36,7 +36,7 @@ exports[`OptaFootballFixturesTournament should render full width correctly 2`] =
 exports[`OptaFootballFixturesTournament should render national competitions correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa laZDmH"
+    class="sc-bdVaJa hOxnUM"
   >
     <div
       class="sc-htpNat sc-ifAKCX dniyMN team-flags"
@@ -53,7 +53,7 @@ exports[`OptaFootballFixturesTournament should render national competitions corr
 exports[`OptaFootballFixturesTournament should render national competitions correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa Ssmqo"
+    class="sc-bdVaJa iGGGrD"
   >
     <div
       class="sc-htpNat sc-ifAKCX dniyMN team-flags"
@@ -69,7 +69,7 @@ exports[`OptaFootballFixturesTournament should render national competitions corr
 exports[`OptaFootballFixturesTournament should render national competitions correctly with single column 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa laZDmH"
+    class="sc-bdVaJa hOxnUM"
   >
     <div
       class="sc-htpNat sc-ifAKCX UELGY team-flags"
@@ -86,7 +86,7 @@ exports[`OptaFootballFixturesTournament should render national competitions corr
 exports[`OptaFootballFixturesTournament should render national competitions correctly with single column 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa Ssmqo"
+    class="sc-bdVaJa iGGGrD"
   >
     <div
       class="sc-htpNat sc-ifAKCX UELGY team-flags"
@@ -102,7 +102,7 @@ exports[`OptaFootballFixturesTournament should render national competitions corr
 exports[`OptaFootballFixturesTournament should render other competitions correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa laZDmH"
+    class="sc-bdVaJa hOxnUM"
   >
     <div
       class="sc-htpNat sc-ifAKCX bqOljm"
@@ -119,7 +119,7 @@ exports[`OptaFootballFixturesTournament should render other competitions correct
 exports[`OptaFootballFixturesTournament should render other competitions correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa Ssmqo"
+    class="sc-bdVaJa iGGGrD"
   >
     <div
       class="sc-htpNat sc-ifAKCX bqOljm"

package/src/components/opta/football/match-stats/OptaFootballMatchStats.tsx

@@ -18,55 +18,74 @@ export const OptaFootballMatchStats: React.FC<{
   competition: string;
   match: string;
   full_width?: boolean;
-  height?: number;
-}> = React.memo(({ season, competition, match, full_width, height = 640 }) => {
-  const ref = React.createRef<HTMLDivElement>();
+  heightSm?: number;
+  heightMd?: number;
+  heightLg?: number;
+}> = React.memo(
+  ({
+    season,
+    competition,
+    match,
+    full_width,
+    heightSm = 640,
+    heightMd,
+    heightLg
+  }) => {
+    const ref = React.createRef<HTMLDivElement>();
 
-  const [isReady, setIsReady] = useState<boolean>(false);
+    const [isReady, setIsReady] = useState<boolean>(false);
+    const isHeight = heightSm || heightMd || heightLg;
 
-  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: 'matchstats',
-          season,
-          competition,
-          match,
-          template: 'custom',
-          graph_style: 'relative',
-          stats_categories:
-            'Category 1|possession,shots,shots_on_target,passes,passes_accuracy,corners_won,fouls_conceded,cards_yellow,cards_red',
-          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;
+      initScript().then(() => {
+        if (ref.current) {
+          ref.current.innerHTML = initElement('opta-widget', {
+            sport,
+            widget: 'matchstats',
+            season,
+            competition,
+            match,
+            template: 'custom',
+            graph_style: 'relative',
+            stats_categories:
+              'Category 1|possession,shots,shots_on_target,passes,passes_accuracy,corners_won,fouls_conceded,cards_yellow,cards_red',
+            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);
-      }
-    });
-  }, []);
+          initComponent();
+          setIsReady(true);
+        }
+      });
+    }, []);
 
-  return (
-    <Container border={isReady} fullWidth={full_width} $height={height}>
-      <WidgetContainer ref={ref} />
+    return (
+      <Container
+        border={isReady}
+        fullWidth={full_width}
+        heightSm={heightSm}
+        heightMd={heightMd}
+        heightLg={heightLg}
+      >
+        <WidgetContainer ref={ref} />
 
-      {!isReady && (
-        <PlaceholderContainer height={height}>
-          <Placeholder />
-        </PlaceholderContainer>
-      )}
-    </Container>
-  );
-});
+        {!isReady && (
+          <PlaceholderContainer isHeight={!!isHeight}>
+            <Placeholder />
+          </PlaceholderContainer>
+        )}
+      </Container>
+    );
+  }
+);

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

@@ -3,14 +3,13 @@
 exports[`OptaFootballMatchStats should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa fmzSUJ"
+    class="sc-bdVaJa gVlQgL"
   >
     <div
       class="sc-htpNat sc-bxivhb deUMuZ"
     />
     <div
-      class="sc-bwzfXH bpOSjf"
-      height="640"
+      class="sc-bwzfXH jStUkM"
     >
       Placeholder
     </div>
@@ -21,7 +20,7 @@ exports[`OptaFootballMatchStats should render correctly 1`] = `
 exports[`OptaFootballMatchStats should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa jRWzmN"
+    class="sc-bdVaJa eqKXku"
   >
     <div
       class="sc-htpNat sc-bxivhb deUMuZ"