@times-components/ts-components 1.93.0 → 1.95.0

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

@@ -73,7 +73,8 @@ export const OptaFootballFixturesTicker: React.FC<{
               show_date: true,
               show_live: true,
               date_format: 'ddd Do MMM',
-              fixture_width: 160
+              fixture_width: 160,
+              breakpoints: 520
             }).outerHTML;
 
             initComponent();

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

@@ -3,7 +3,7 @@
 exports[`OptaFootballFixturesTicker with flags should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX kbwAVa"
+    class="sc-htpNat sc-ifAKCX jhYhmi"
   />
   <div
     class="sc-bwzfXH uxFfR"
@@ -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 kbwAVa"
+    class="sc-htpNat sc-ifAKCX jhYhmi"
   >
     <div>
       Widget
@@ -29,7 +29,7 @@ exports[`OptaFootballFixturesTicker with flags should render correctly 2`] = `
 exports[`OptaFootballFixturesTicker without flags should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX kbwAVa"
+    class="sc-htpNat sc-ifAKCX jhYhmi"
   />
   <div
     class="sc-bwzfXH uxFfR"
@@ -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 kbwAVa"
+    class="sc-htpNat sc-ifAKCX jhYhmi"
   >
     <div>
       Widget
@@ -55,7 +55,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly 2`] =
 exports[`OptaFootballFixturesTicker without flags should render correctly with fixturesPageUrl 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX kbwAVa"
+    class="sc-htpNat sc-ifAKCX jhYhmi"
   />
   <div
     class="sc-bwzfXH uxFfR"
@@ -69,7 +69,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with f
 exports[`OptaFootballFixturesTicker without flags should render correctly with fixturesPageUrl 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX kbwAVa"
+    class="sc-htpNat sc-ifAKCX jhYhmi"
   >
     <div>
       Widget
@@ -81,7 +81,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with f
 exports[`OptaFootballFixturesTicker without flags should render correctly with isApp property 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX ftpdln"
+    class="sc-htpNat sc-ifAKCX kSjimB"
   />
   <div
     class="sc-bwzfXH uxFfR"
@@ -95,7 +95,7 @@ exports[`OptaFootballFixturesTicker without flags should render correctly with i
 exports[`OptaFootballFixturesTicker without flags should render correctly with isApp property 2`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat sc-ifAKCX ftpdln"
+    class="sc-htpNat sc-ifAKCX kSjimB"
   >
     <div>
       Widget

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

@@ -53,7 +53,7 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
 
   @media (max-width: ${breakpoints.small}px) {
     .Opta-Scroller {
-      display: ${({ isApp }) => (isApp ? 'block' : 'none')} !important;
+      display: none !important;
     }
   }
 
@@ -132,7 +132,6 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
     background-color: white !important;
     border: 1px solid #999 !important;
     border-radius: 2px;
-    border-radius: 2px;
     box-sizing: border-box;
     padding: 39px 0 !important;
     width: 28px !important;
@@ -191,17 +190,17 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
   }
 
   .Opta-fixture {
-    background-color: white;
-    border-radius: 4px;
-    box-sizing: border-box;
     height: 80px;
-    margin-inline: 4px;
+    padding-inline: 4px;
     display: flex;
     flex-direction: column;
 
+    > div {
+      background-color: white !important;
+    }
+
     .Opta-Team,
     .Opta-timings {
-      background-color: transparent !important;
       border-right: 0 !important;
     }
     .Opta-Team {
@@ -217,6 +216,8 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
       height: 24px !important;
       order: -1;
       color: #696969 !important;
+      border-start-start-radius: 4px;
+      border-start-end-radius: 4px;
     }
 
     .Opta-timings .Opta-Time * {
@@ -230,8 +231,16 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
       font-family: 'Roboto-Medium' !important;
     }
 
+    .Opta-Away {
+      border-end-start-radius: 4px;
+      border-end-end-radius: 4px;
+      height: 34px !important;
+    }
+
     &.Opta-prematch {
-      background-color: #f5f5f5;
+      > div {
+        background-color: #f5f5f5 !important;
+      }
       .Opta-Team-Score::after {
         content: '-';
       }
@@ -241,11 +250,33 @@ export const WidgetContainer = styled(WidgetContainerBase)<{
       }
     }
 
-    &.Opta-result {
-      border: 1px solid #ccc;
+    &.Opta-result > div {
+      border: 1px solid #ccc !important;
+
+      &.Opta-timings {
+        border-bottom: none !important;
+      }
+      &.Opta-Home {
+        border-bottom: none !important;
+        border-top: none !important;
+      }
+      &.Opta-Away {
+        border-top: none !important;
+      }
     }
-    &.Opta-live {
-      border: 1px solid #01000d;
+    &.Opta-live > div {
+      border: 1px solid #01000d !important;
+
+      &.Opta-timings {
+        border-bottom: none !important;
+      }
+      &.Opta-Home {
+        border-bottom: none !important;
+        border-top: none !important;
+      }
+      &.Opta-Away {
+        border-top: none !important;
+      }
     }
 
     .Opta-Image-Team-Small {

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

@@ -34,6 +34,17 @@ const showcase = {
       ),
       name: 'PlayerStats (assists)',
       type: 'story'
+    },
+    {
+      component: () => (
+        <OptaFootballPlayerStats
+          season="2023"
+          competition="3"
+          visible_categories="cards_red"
+        />
+      ),
+      name: 'PlayerStats (red cards)',
+      type: 'story'
     }
   ],
   name: 'Typescript Component/In Article/Football/PlayerStats'

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

@@ -20,6 +20,7 @@ export const OptaFootballPlayerStats: React.FC<{
   competition: string;
   visible_categories: string; // goals | assists | cards_red | cards_yellow
   classes?: string;
+  hide_zeroes?: boolean;
   show_title?: boolean;
   full_width?: boolean;
 }> = React.memo(
@@ -27,6 +28,7 @@ export const OptaFootballPlayerStats: React.FC<{
     season,
     competition,
     full_width,
+    hide_zeroes = true,
     show_title = true,
     visible_categories,
     classes
@@ -48,6 +50,7 @@ export const OptaFootballPlayerStats: React.FC<{
             ref.current.innerHTML = initElement('opta-widget', {
               sport,
               widget: 'player_ranking',
+              hide_zeroes,
               season,
               competition,
               template: 'normal',