@times-components/ts-components 1.115.1-alpha.10 → 1.115.1-alpha.11

package/src/components/newsletter-puff/InlineNewsletterPuff.tsx

@@ -39,7 +39,7 @@ export const InlineNewsletterPuff = ({
 
         if (isLoading || !newsletter) {
           return (
-            <InpContainer style={{ height: 257 }}>
+            <InpContainer>
               <Placeholder />
             </InpContainer>
           );

package/src/components/newsletter-puff/styles.ts

@@ -43,13 +43,16 @@ export const InpContainer = styled(View)<{ section?: string }>`
   margin-right: ${spacing(2)};
   margin-bottom: ${spacing(4)};
   margin-left: ${spacing(2)};
+  height: 157.5px;
 
   @media (min-width: ${breakpoints.medium}px) {
     margin: 0 auto ${spacing(4)};
     width: 80.8%;
+    height: 157.5px;
   }
   @media (min-width: ${breakpoints.wide}px) {
     width: 56.2%;
+    height: 117.5px;
   }
 `;
 

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

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

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

@@ -17,7 +17,8 @@ export const OptaCricketScorecard: React.FC<{
   competition: string;
   match: string;
   full_width?: boolean;
-}> = React.memo(({ competition, match, full_width }) => {
+  height?: number;
+}> = React.memo(({ competition, match, full_width, height }) => {
   const ref = React.createRef<HTMLDivElement>();
 
   const [isReady, setIsReady] = useState<boolean>(false);
@@ -68,11 +69,11 @@ export const OptaCricketScorecard: React.FC<{
   }, []);
 
   return (
-    <Container border={isReady} fullWidth={full_width}>
+    <Container border={isReady} fullWidth={full_width} $height={height}>
       <WidgetContainer ref={ref} />
 
       {!isReady && (
-        <PlaceholderContainer>
+        <PlaceholderContainer height={height}>
           <Placeholder />
         </PlaceholderContainer>
       )}

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 giUBsz"
+    class="sc-bdVaJa laZDmH"
   >
     <div
       class="sc-htpNat sc-bxivhb cDDLep"
     />
     <div
-      class="sc-bwzfXH kVYHKf"
+      class="sc-bwzfXH iCdzAV"
     >
       Placeholder
     </div>
@@ -20,7 +20,7 @@ exports[`OptaCricketScorecard should render correctly 1`] = `
 exports[`OptaCricketScorecard should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa hGXeaj"
+    class="sc-bdVaJa Ssmqo"
   >
     <div
       class="sc-htpNat sc-bxivhb cDDLep"

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

@@ -1,8 +1,13 @@
 import styled from 'styled-components';
 import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
 
-export const Container = styled.div<{ border: boolean; fullWidth?: boolean }>`
-  margin: 0 auto 20px auto;
+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'};
@@ -21,9 +26,9 @@ export const Container = styled.div<{ border: boolean; fullWidth?: boolean }>`
   }
 `;
 
-export const PlaceholderContainer = styled.div`
+export const PlaceholderContainer = styled.div<{ height?: number }>`
+  height: ${({ height }) => height || 200}px;
   position: relative;
-  height: 200px;
 `;
 
 export const WidgetContainerBase = styled.div`

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 giUBsz"
+    class="sc-bdVaJa laZDmH"
   >
     <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 hGXeaj"
+    class="sc-bdVaJa Ssmqo"
   >
     <div
       class="sc-htpNat sc-ifAKCX kRuyQz"

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 bzdUzT"
+    class="sc-bdVaJa gCTnDg"
   >
     <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 jODlXD"
+    class="sc-bdVaJa ecgEcY"
   >
     <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 giUBsz"
+    class="sc-bdVaJa laZDmH"
   >
     <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 hGXeaj"
+    class="sc-bdVaJa Ssmqo"
   >
     <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 giUBsz"
+    class="sc-bdVaJa laZDmH"
   >
     <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 hGXeaj"
+    class="sc-bdVaJa Ssmqo"
   >
     <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 giUBsz"
+    class="sc-bdVaJa laZDmH"
   >
     <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 hGXeaj"
+    class="sc-bdVaJa Ssmqo"
   >
     <div
       class="sc-htpNat sc-ifAKCX bqOljm"

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

@@ -18,7 +18,8 @@ export const OptaFootballMatchStats: React.FC<{
   competition: string;
   match: string;
   full_width?: boolean;
-}> = React.memo(({ season, competition, match, full_width }) => {
+  height?: number;
+}> = React.memo(({ season, competition, match, full_width, height = 640 }) => {
   const ref = React.createRef<HTMLDivElement>();
 
   const [isReady, setIsReady] = useState<boolean>(false);
@@ -58,11 +59,11 @@ export const OptaFootballMatchStats: React.FC<{
   }, []);
 
   return (
-    <Container border={isReady} fullWidth={full_width}>
+    <Container border={isReady} fullWidth={full_width} $height={height}>
       <WidgetContainer ref={ref} />
 
       {!isReady && (
-        <PlaceholderContainer>
+        <PlaceholderContainer height={height}>
           <Placeholder />
         </PlaceholderContainer>
       )}

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

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

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

@@ -23,6 +23,7 @@ export const OptaFootballPlayerStats: React.FC<{
   hide_zeroes?: boolean;
   show_title?: boolean;
   full_width?: boolean;
+  height?: number;
 }> = React.memo(
   ({
     season,
@@ -31,7 +32,8 @@ export const OptaFootballPlayerStats: React.FC<{
     hide_zeroes = true,
     show_title = true,
     visible_categories,
-    classes
+    classes,
+    height
   }) => {
     const ref = React.createRef<HTMLDivElement>();
 
@@ -78,11 +80,16 @@ export const OptaFootballPlayerStats: React.FC<{
     isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-Image-Team');
 
     return (
-      <Container border={isReady} fullWidth={full_width} className={classes}>
+      <Container
+        border={isReady}
+        fullWidth={full_width}
+        className={classes}
+        $height={height}
+      >
         <WidgetContainer ref={ref} />
 
         {!isReady && (
-          <PlaceholderContainer>
+          <PlaceholderContainer height={height}>
             <Placeholder />
           </PlaceholderContainer>
         )}

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

@@ -3,7 +3,7 @@
 exports[`OptaFootballPlayerStats should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa giUBsz"
+    class="sc-bdVaJa laZDmH"
   >
     <div
       class="sc-htpNat sc-bxivhb deUMuZ team-flags"
@@ -20,7 +20,7 @@ exports[`OptaFootballPlayerStats should render correctly 1`] = `
 exports[`OptaFootballPlayerStats should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa hGXeaj"
+    class="sc-bdVaJa Ssmqo"
   >
     <div
       class="sc-htpNat sc-bxivhb deUMuZ team-flags"

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

@@ -81,8 +81,13 @@ const flagStyles = Object.keys(countries).map(
 `
 );
 
-export const Container = styled.div<{ border: boolean; fullWidth?: boolean }>`
-  margin: 0 auto 20px auto;
+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'};

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

@@ -17,6 +17,13 @@ const showcase = {
       name: 'Standings',
       type: 'story'
     },
+    {
+      component: () => (
+        <OptaFootballStandings season="2024" competition="10" height={1057} />
+      ),
+      name: 'Standings (with height)',
+      type: 'story'
+    },
     {
       component: () => (
         <OptaFootballStandings

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

@@ -24,6 +24,7 @@ export const OptaFootballStandings: React.FC<{
   full_width?: boolean;
   show_title?: boolean;
   columns?: boolean;
+  height?: number;
 }> = React.memo(
   ({
     season,
@@ -33,7 +34,8 @@ export const OptaFootballStandings: React.FC<{
     navigation,
     show_title = true,
     full_width,
-    columns
+    columns,
+    height
   }) => {
     const ref = React.createRef<HTMLDivElement>();
 
@@ -71,11 +73,16 @@ export const OptaFootballStandings: React.FC<{
     isNationalComp && useUpdateNationalTeamDetails(ref, 'Opta-Team');
 
     return (
-      <Container border={isReady} fullWidth={full_width} className={classes}>
+      <Container
+        border={isReady}
+        fullWidth={full_width}
+        className={classes}
+        $height={height}
+      >
         <WidgetContainer ref={ref} columns={columns} />
 
         {!isReady && (
-          <PlaceholderContainer>
+          <PlaceholderContainer height={height}>
             <Placeholder />
           </PlaceholderContainer>
         )}

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

@@ -3,7 +3,7 @@
 exports[`OptaFootballStandings should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa giUBsz"
+    class="sc-bdVaJa laZDmH"
   >
     <div
       class="sc-htpNat sc-bxivhb gJKBih team-flags"
@@ -20,7 +20,7 @@ exports[`OptaFootballStandings should render correctly 1`] = `
 exports[`OptaFootballStandings should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa hGXeaj"
+    class="sc-bdVaJa Ssmqo"
   >
     <div
       class="sc-htpNat sc-bxivhb gJKBih team-flags"
@@ -36,7 +36,7 @@ exports[`OptaFootballStandings should render correctly 2`] = `
 exports[`OptaFootballStandings should render correctly, with columns 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa giUBsz"
+    class="sc-bdVaJa laZDmH"
   >
     <div
       class="sc-htpNat sc-bxivhb jPAjPs team-flags"
@@ -53,7 +53,7 @@ exports[`OptaFootballStandings should render correctly, with columns 1`] = `
 exports[`OptaFootballStandings should render correctly, with columns 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa hGXeaj"
+    class="sc-bdVaJa Ssmqo"
   >
     <div
       class="sc-htpNat sc-bxivhb jPAjPs team-flags"

package/src/components/opta/football/summary/__tests__/__snapshots__/OptaFootballSummary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OptaFootballSummary should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa giUBsz"
+    class="sc-bdVaJa laZDmH"
   >
     <div
       class="sc-htpNat sc-bxivhb kRDlKQ"
@@ -20,7 +20,7 @@ exports[`OptaFootballSummary should render correctly 1`] = `
 exports[`OptaFootballSummary should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa hGXeaj"
+    class="sc-bdVaJa Ssmqo"
   >
     <div
       class="sc-htpNat sc-bxivhb kRDlKQ"