@times-components/ts-components 1.157.0 → 1.157.1

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

@@ -82,6 +82,22 @@ export const WidgetContainer = styled.div<{
         overflow: hidden;
         height: 40px;
 
+        &:nth-of-type(2) {
+          order: 5;
+        }
+
+        &:nth-of-type(3) {
+          order: 2;
+        }
+
+        &:nth-of-type(4) {
+          order: 3;
+        }
+
+        &:nth-of-type(5) {
+          order: 4;
+        }
+
         @media(min-width: ${breakpoints.medium}px) {
           &:hover {
             border: 1px solid ${colours.functional.black};
@@ -210,6 +226,9 @@ export const WidgetContainer = styled.div<{
   }
 
   .Opta-Stats-Bars-Text {
+    display: block;
+    width: 100%;
+    text-align: center;
     font-family: Roboto, sans-serif;
     font-weight: 600;
     font-size: 16px;
@@ -241,7 +260,7 @@ export const WidgetContainer = styled.div<{
         }
     `}
     position: relative;
-    &::after {
+    &::before {
       content: ' ';
       display: inline-block;
       width: 2px;
@@ -255,7 +274,7 @@ export const WidgetContainer = styled.div<{
           }
       `}
       position: absolute;
-      right: 0;
+      left: 0;
       top: 0;
 
       @media (max-width: ${maxMDBreakpoint}px) {
@@ -272,9 +291,9 @@ export const WidgetContainer = styled.div<{
           background: ${awayTeamColor.dark} !important;
         }
     `}
-    padding-left: 3px;
+    padding-right: 3px;
     position: relative;
-    &::before {
+    &::after {
       content: ' ';
       display: inline-block;
       width: 2px;
@@ -288,7 +307,7 @@ export const WidgetContainer = styled.div<{
           }
       `}
       position: absolute;
-      left: 0;
+      right: 0;
       top: 0;
       @media (max-width: ${maxMDBreakpoint}px) {
         width: 1px;
@@ -311,8 +330,12 @@ export const WidgetContainer = styled.div<{
     `}
 
     tr {
+      display: flex;
+      align-items: center;
+
       //  Home team stat label
       td:nth-of-type(1) {
+        order: 3;
         color: ${homeTeamColor.light};
         ${props =>
           props.isApp &&
@@ -341,7 +364,7 @@ export const WidgetContainer = styled.div<{
                 color: ${darkTextColor};
             }
           `}
-          left: 0;
+          right: 0;
           transform: translateY(-25px);
           &.Opta-Outer-bigger {
             background-color: unset;
@@ -351,12 +374,15 @@ export const WidgetContainer = styled.div<{
 
       //  Stat bar
       td:nth-of-type(2) {
+        order: 2;
         width: 100%;
         padding-inline: 0px;
         @media (max-width: ${maxMDBreakpoint}px) {
           padding-inline: 16px;
         }
         .Opta-Bars-Full {
+          display: flex;
+          flex-direction: row-reverse;
           border-radius: 100px;
           height: 8px;
           .Opta-Percent {
@@ -367,6 +393,7 @@ export const WidgetContainer = styled.div<{
 
       //  Away team stat label
       td:nth-of-type(3) {
+        order: 1;
         color: ${awayTeamColor.light};
         ${props =>
           props.isApp &&
@@ -395,7 +422,7 @@ export const WidgetContainer = styled.div<{
                 color: ${darkTextColor};
             }
           `}
-          right: 0;
+          left: 0;
           transform: translateY(-25px);
           &.Opta-Outer-bigger {
             background-color: unset;
@@ -430,6 +457,5 @@ export const WidgetContainer = styled.div<{
           }
         }
       }
-    }
   }
 `;

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

@@ -9,7 +9,7 @@ exports[`OptaMatchStatsSummary should render correctly 1`] = `
       Match Stats
     </h3>
     <div
-      class="sc-ifAKCX kUBPyB"
+      class="sc-ifAKCX fOkzfb"
     />
   </div>
   <div

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

@@ -62,7 +62,7 @@ export const OptaMatchStatsSummary: React.FC<{
             competition_naming: 'full',
             team_naming: 'full',
             player_naming: 'last_name',
-            show_live: false,
+            show_live: true,
             show_logo: false,
             show_title: false
           }).outerHTML;

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

@@ -57,6 +57,7 @@ export const WidgetContainer = styled.div<{
       order: 2;
       width: 100%;
       display: flex;
+      flex-direction: row-reverse;
       align-items: center;
       padding-inline: 20px;
 
@@ -71,13 +72,13 @@ export const WidgetContainer = styled.div<{
           width: 44px;
         }
         .Opta-Crest.Opta-Home {
-          margin-right: auto;
-          margin-left: 8px;
+          margin-left: auto;
+          margin-right: 8px;
           
         }
         .Opta-Crest.Opta-Away {
-          margin-left: auto;
-          margin-right: 8px;
+          margin-right: auto;
+          margin-left: 8px;
         }
        }
 
@@ -114,13 +115,13 @@ export const WidgetContainer = styled.div<{
           top: 78px;
           width: 50%;
           &.Opta-Home {
-            left: 0px;
-            text-align: left;
-          }
-          &.Opta-Away {
             right: 0px;
             text-align: right;
           }
+          &.Opta-Away {
+            left: 0px;
+            text-align: left;
+          }
 
           font-family: ${fonts.supporting};
           font-size: 16px;
@@ -411,6 +412,5 @@ export const WidgetContainer = styled.div<{
           content: ")";
         }
       }
-    }
   }
 `;

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 egXbAM"
+    class="sc-ifAKCX hnkWOH"
   />
   <div
     class="sc-bwzfXH eSqyJ"

package/src/components/opta/football/opta-match-stats/xG/OptaMatchStatsXG.tsx

@@ -173,6 +173,14 @@ export const OptaMatchStatsXG: React.FC<{
 
     return (
       <XGWrapper isApp={isApp}>
+        <XGValueBadge
+          area="away"
+          isWinner={awayIsWinner}
+          teamColor={awayColor}
+          isApp={isApp}
+        >
+          {formatValue(awayTeam.value, isInteger)}
+        </XGValueBadge>
         <XGValueBadge
           area="home"
           isWinner={homeIsWinner}
@@ -182,25 +190,17 @@ export const OptaMatchStatsXG: React.FC<{
           {formatValue(homeTeam.value, isInteger)}
         </XGValueBadge>
         <XGTitle isApp={isApp}>{resolvedTitle}</XGTitle>
-        <XGValueBadge
-          area="away"
-          isWinner={awayIsWinner}
-          teamColor={awayColor}
-          isApp={isApp}
-        >
-          {formatValue(awayTeam.value, isInteger)}
-        </XGValueBadge>
         <XGBarTrack>
           <XGBarFill
             side="home"
-            percent={homePercent}
-            teamColor={homeColor}
+            percent={awayPercent}
+            teamColor={awayColor}
             isApp={isApp}
           />
           <XGBarFill
             side="away"
-            percent={awayPercent}
-            teamColor={awayColor}
+            percent={homePercent}
+            teamColor={homeColor}
             isApp={isApp}
           />
         </XGBarTrack>

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

@@ -3,8 +3,13 @@
 exports[`OptaMatchStatsXG renders snapshot for all four stats combined 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bwzfXH iGRuPx"
+    class="sc-bwzfXH dsTFzT"
   >
+    <span
+      class="sc-bxivhb fxnaTd"
+    >
+      1.20
+    </span>
     <span
       class="sc-bxivhb eQOylx"
     >
@@ -15,25 +20,25 @@ exports[`OptaMatchStatsXG renders snapshot for all four stats combined 1`] = `
     >
       xG
     </h3>
-    <span
-      class="sc-bxivhb fxnaTd"
-    >
-      1.20
-    </span>
     <div
       class="sc-ifAKCX cGTJPD"
     >
       <div
-        class="sc-EHOje fKDBAX"
+        class="sc-EHOje efCtwH"
       />
       <div
-        class="sc-EHOje daqtAm"
+        class="sc-EHOje ivhXJp"
       />
     </div>
   </div>
   <div
-    class="sc-bwzfXH iGRuPx"
+    class="sc-bwzfXH dsTFzT"
   >
+    <span
+      class="sc-bxivhb fxnaTd"
+    >
+      0.80
+    </span>
     <span
       class="sc-bxivhb eQOylx"
     >
@@ -44,25 +49,25 @@ exports[`OptaMatchStatsXG renders snapshot for all four stats combined 1`] = `
     >
       xG from open play
     </h3>
-    <span
-      class="sc-bxivhb fxnaTd"
-    >
-      0.80
-    </span>
     <div
       class="sc-ifAKCX cGTJPD"
     >
       <div
-        class="sc-EHOje dmKdgg"
+        class="sc-EHOje jlJsBt"
       />
       <div
-        class="sc-EHOje cTUlMY"
+        class="sc-EHOje gsbBzm"
       />
     </div>
   </div>
   <div
-    class="sc-bwzfXH iGRuPx"
+    class="sc-bwzfXH dsTFzT"
   >
+    <span
+      class="sc-bxivhb kdaltZ"
+    >
+      0.40
+    </span>
     <span
       class="sc-bxivhb lmMNBc"
     >
@@ -73,25 +78,25 @@ exports[`OptaMatchStatsXG renders snapshot for all four stats combined 1`] = `
     >
       xG from set play
     </h3>
-    <span
-      class="sc-bxivhb kdaltZ"
-    >
-      0.40
-    </span>
     <div
       class="sc-ifAKCX cGTJPD"
     >
       <div
-        class="sc-EHOje gqBFZw"
+        class="sc-EHOje bbCkQx"
       />
       <div
-        class="sc-EHOje goHtPI"
+        class="sc-EHOje cgYgyY"
       />
     </div>
   </div>
   <div
-    class="sc-bwzfXH iGRuPx"
+    class="sc-bwzfXH dsTFzT"
   >
+    <span
+      class="sc-bxivhb kdaltZ"
+    >
+      32
+    </span>
     <span
       class="sc-bxivhb lmMNBc"
     >
@@ -102,19 +107,14 @@ exports[`OptaMatchStatsXG renders snapshot for all four stats combined 1`] = `
     >
       Touches in opposition box
     </h3>
-    <span
-      class="sc-bxivhb kdaltZ"
-    >
-      32
-    </span>
     <div
       class="sc-ifAKCX cGTJPD"
     >
       <div
-        class="sc-EHOje jtwLTi"
+        class="sc-EHOje fVikHJ"
       />
       <div
-        class="sc-EHOje duPLQb"
+        class="sc-EHOje iZqqyH"
       />
     </div>
   </div>
@@ -124,8 +124,13 @@ exports[`OptaMatchStatsXG renders snapshot for all four stats combined 1`] = `
 exports[`OptaMatchStatsXG renders snapshot for touchesInOppBox 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bwzfXH iGRuPx"
+    class="sc-bwzfXH dsTFzT"
   >
+    <span
+      class="sc-bxivhb kdaltZ"
+    >
+      32
+    </span>
     <span
       class="sc-bxivhb lmMNBc"
     >
@@ -136,19 +141,14 @@ exports[`OptaMatchStatsXG renders snapshot for touchesInOppBox 1`] = `
     >
       Touches in opposition box
     </h3>
-    <span
-      class="sc-bxivhb kdaltZ"
-    >
-      32
-    </span>
     <div
       class="sc-ifAKCX cGTJPD"
     >
       <div
-        class="sc-EHOje jtwLTi"
+        class="sc-EHOje fVikHJ"
       />
       <div
-        class="sc-EHOje duPLQb"
+        class="sc-EHOje iZqqyH"
       />
     </div>
   </div>
@@ -158,8 +158,13 @@ exports[`OptaMatchStatsXG renders snapshot for touchesInOppBox 1`] = `
 exports[`OptaMatchStatsXG renders snapshot with custom feed values 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bwzfXH iGRuPx"
+    class="sc-bwzfXH dsTFzT"
   >
+    <span
+      class="sc-bxivhb fxnaTd"
+    >
+      1.30
+    </span>
     <span
       class="sc-bxivhb eQOylx"
     >
@@ -170,19 +175,14 @@ exports[`OptaMatchStatsXG renders snapshot with custom feed values 1`] = `
     >
       xG
     </h3>
-    <span
-      class="sc-bxivhb fxnaTd"
-    >
-      1.30
-    </span>
     <div
       class="sc-ifAKCX cGTJPD"
     >
       <div
-        class="sc-EHOje efDKfx"
+        class="sc-EHOje fXoxLM"
       />
       <div
-        class="sc-EHOje dSSeZC"
+        class="sc-EHOje uZEXy"
       />
     </div>
   </div>
@@ -192,8 +192,13 @@ exports[`OptaMatchStatsXG renders snapshot with custom feed values 1`] = `
 exports[`OptaMatchStatsXG renders snapshot with feed data 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bwzfXH iGRuPx"
+    class="sc-bwzfXH dsTFzT"
   >
+    <span
+      class="sc-bxivhb fxnaTd"
+    >
+      1.20
+    </span>
     <span
       class="sc-bxivhb eQOylx"
     >
@@ -204,19 +209,14 @@ exports[`OptaMatchStatsXG renders snapshot with feed data 1`] = `
     >
       xG
     </h3>
-    <span
-      class="sc-bxivhb fxnaTd"
-    >
-      1.20
-    </span>
     <div
       class="sc-ifAKCX cGTJPD"
     >
       <div
-        class="sc-EHOje fKDBAX"
+        class="sc-EHOje efCtwH"
       />
       <div
-        class="sc-EHOje daqtAm"
+        class="sc-EHOje ivhXJp"
       />
     </div>
   </div>
@@ -226,8 +226,13 @@ exports[`OptaMatchStatsXG renders snapshot with feed data 1`] = `
 exports[`OptaMatchStatsXG renders snapshot with isApp=true 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bwzfXH dBbDJg"
+    class="sc-bwzfXH gqQsSR"
   >
+    <span
+      class="sc-bxivhb esJvdJ"
+    >
+      1.20
+    </span>
     <span
       class="sc-bxivhb jRrAmL"
     >
@@ -238,19 +243,14 @@ exports[`OptaMatchStatsXG renders snapshot with isApp=true 1`] = `
     >
       xG
     </h3>
-    <span
-      class="sc-bxivhb esJvdJ"
-    >
-      1.20
-    </span>
     <div
       class="sc-ifAKCX cGTJPD"
     >
       <div
-        class="sc-EHOje fdxaix"
+        class="sc-EHOje chjQMW"
       />
       <div
-        class="sc-EHOje hwmWzZ"
+        class="sc-EHOje fVQznw"
       />
     </div>
   </div>

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

@@ -11,7 +11,7 @@ export const XGWrapper = styled.div<{ isApp: boolean }>`
   background-color: ${colours.functional.greenLight};
   display: grid;
   grid-template-areas:
-    'home title away'
+    'away title home'
     'bar bar bar';
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -22,7 +22,7 @@ export const XGWrapper = styled.div<{ isApp: boolean }>`
     padding: 0 16px;
     grid-template-areas:
       '. title .'
-      'home bar away';
+      'away bar home';
     grid-template-columns: 65px 1fr 65px;
   }
 

package/src/components/opta/shared/fixtures-ticker/OptaFixturesTicker.tsx

@@ -32,6 +32,7 @@ export type OptaFixturesTickerProps = {
   fixturesPageUrl?: string;
   sport: OptaSport;
   enableMatchStatsNavigation?: 'true' | 'false';
+  matchStatsBasePath?: string;
 };
 
 export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
@@ -47,7 +48,8 @@ export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
     showButtons,
     fixturesPageUrl,
     sport,
-    enableMatchStatsNavigation = 'false'
+    enableMatchStatsNavigation = 'false',
+    matchStatsBasePath
   }) => {
     const ref = React.createRef<HTMLDivElement>();
     const isNationalComp = isNationalCompetition(competition, sport);
@@ -109,7 +111,8 @@ export const OptaFixturesTicker: React.FC<OptaFixturesTickerProps> = React.memo(
         ref,
         sport,
         competition,
-        season
+        season,
+        matchStatsBasePath
       });
 
     return (

package/src/components/opta/utils/useAddFixtureNavigation.ts

@@ -5,11 +5,12 @@ export const useAddFixtureNavigation = (args: {
   sport: string;
   competition: string;
   season: string;
+  matchStatsBasePath?: string;
 }) => {
-  const { ref, sport, competition, season } = args;
+  const { ref, sport, competition, season, matchStatsBasePath } = args;
   useEffect(
     () => {
-      updateTimestamps(ref, sport, competition, season);
+      updateTimestamps(ref, sport, competition, season, matchStatsBasePath);
     },
     [ref]
   );
@@ -30,7 +31,8 @@ const updateTimestamps = (
   element: RefObject<HTMLDivElement>,
   sport: string,
   competition: string,
-  season: string
+  season: string,
+  matchStatsBasePath?: string
 ) => {
   let count = 0;
   const updateTimestampsInterval = setInterval(() => {
@@ -76,7 +78,16 @@ const updateTimestamps = (
 
       const isAndroid = safeWindow.Android && safeWindow.Android.postMessage;
 
-      const navigationUrl = `/sport/${sport}/match-stats?competition=${competition}&season=${season}&match=${match}&status=${status}&homeTeam=${homeTeam}&awayTeam=${awayTeam}&enableMatchStats=true`;
+      const baseMatchStatsPath =
+        matchStatsBasePath || `/sport/${sport}/match-stats`;
+      const navigationUrl =
+        `${baseMatchStatsPath}?competition=${competition}` +
+        `&season=${season}` +
+        `&match=${match}` +
+        `&status=${status}` +
+        `&homeTeam=${homeTeam}` +
+        `&awayTeam=${awayTeam}` +
+        '&enableMatchStats=true';
       const appMessage = {
         type: 'openPage',
         title: 'Football',