@times-components/ts-components 1.64.3 → 1.65.0

package/src/components/opta/football/summary/styles.ts

@@ -132,7 +132,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
           .Opta-Event-Text {
             color: ${colours.functional.brandColour};
             font-family: ${fonts.supporting};
-            font-size: 14px;
+            font-size: 13px;
             line-height: 16px;
 
             .Opta-Event-Player,

package/src/components/opta/rugby/fixtures/__tests__/__snapshots__/OptaRugbyFixtures.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaRugbyFixtures should render correctly 1`] = `
     class="sc-bdVaJa giUBsz"
   >
     <div
-      class="sc-htpNat sc-ifAKCX cyWAhZ"
+      class="sc-htpNat sc-ifAKCX jZvPoQ"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,7 @@ exports[`OptaRugbyFixtures should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-ifAKCX cyWAhZ"
+      class="sc-htpNat sc-ifAKCX jZvPoQ"
     >
       <div>
         Widget

package/src/components/opta/rugby/fixtures/styles.ts

@@ -65,6 +65,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
               span {
                 float: none;
                 padding: 0;
+                font-size: 13px;
               }
 
               @media (min-width: ${breakpoints.medium}px) {
@@ -106,7 +107,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
                 @media (min-width: ${breakpoints.medium}px) {
                   width: 60px !important;
                   padding: 6px 0 0 20px;
-                  font-size: 14px;
+                  font-size: 13px;
                   line-height: 14px;
                 }
               }
@@ -230,7 +231,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
                       .Opta-Event-Text {
                         color: ${colours.functional.primary};
                         font-family: ${fonts.supporting};
-                        font-size: 14px;
+                        font-size: 13px;
                         line-height: 16px;
 
                         .Opta-Event-Player,

package/src/components/opta/rugby/match-stats/__tests__/__snapshots__/OptaRugbyMatchStats.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaRugbyMatchStats should render correctly 1`] = `
     class="sc-bdVaJa giUBsz"
   >
     <div
-      class="sc-htpNat sc-bxivhb ljTAFU"
+      class="sc-htpNat sc-bxivhb jbuKhZ"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,7 @@ exports[`OptaRugbyMatchStats should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-bxivhb ljTAFU"
+      class="sc-htpNat sc-bxivhb jbuKhZ"
     >
       <div>
         Widget

package/src/components/opta/rugby/match-stats/styles.ts

@@ -21,7 +21,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
               padding: 20px 0 0 0;
               color: ${colours.functional.brandColour};
               font-family: ${fonts.supporting};
-              font-size: 14px;
+              font-size: 13px;
               line-height: 14px;
             }
 

package/src/components/opta/rugby/standings/__tests__/__snapshots__/OptaRugbyStandings.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaRugbyStandings should render correctly 1`] = `
     class="sc-bdVaJa giUBsz"
   >
     <div
-      class="sc-htpNat sc-bxivhb NeYJk"
+      class="sc-htpNat sc-bxivhb kkKlzX"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,7 @@ exports[`OptaRugbyStandings should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-bxivhb NeYJk"
+      class="sc-htpNat sc-bxivhb kkKlzX"
     >
       <div>
         Widget

package/src/components/opta/rugby/standings/styles.ts

@@ -20,6 +20,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
       span {
         float: none;
         padding: 0;
+        font-size: 13px;
       }
 
       @media (min-width: ${breakpoints.medium}px) {
@@ -155,7 +156,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
               padding: 0;
               color: ${colours.functional.primary};
               font-family: ${fonts.supporting};
-              font-size: 14px;
+              font-size: 13px;
               line-height: 14px;
               font-weight: normal;
               text-align: center;
@@ -196,7 +197,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
 
               @media (min-width: ${breakpoints.medium}px) {
                 width: 50px;
-                font-size: 16px;
+                font-size: 15px;
                 line-height: 16px;
               }
             }

package/src/components/opta/rugby/summary/__tests__/__snapshots__/OptaRugbySummary.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`OptaRugbySummary should render correctly 1`] = `
     class="sc-bdVaJa giUBsz"
   >
     <div
-      class="sc-htpNat sc-bxivhb kCSvNb"
+      class="sc-htpNat sc-bxivhb goQNNn"
     />
     <div
       class="sc-bwzfXH kVYHKf"
@@ -23,7 +23,7 @@ exports[`OptaRugbySummary should render correctly 2`] = `
     class="sc-bdVaJa hGXeaj"
   >
     <div
-      class="sc-htpNat sc-bxivhb kCSvNb"
+      class="sc-htpNat sc-bxivhb goQNNn"
     >
       <div>
         Widget

package/src/components/opta/rugby/summary/styles.ts

@@ -132,7 +132,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
           .Opta-Event-Text {
             color: ${colours.functional.brandColour};
             font-family: ${fonts.supporting};
-            font-size: 14px;
+            font-size: 13px;
             line-height: 16px;
 
             .Opta-Event-Player,

package/src/components/related-article-slice/__tests__/__snapshots__/RelatedArticleSlice.test.tsx.snap

@@ -51,7 +51,7 @@ exports[`RelatedArticleSlice renders 1 1`] = `
             class="shared-styles__SideBySideColumn-sc-1kek94e-1 jOKfAL"
           >
             <p
-              class="shared-styles__Label-sc-1kek94e-2 IvuEf"
+              class="shared-styles__Label-sc-1kek94e-2 jGUcDq"
             >
               Comment
             </p>
@@ -67,12 +67,12 @@ exports[`RelatedArticleSlice renders 1 1`] = `
               </a>
             </div>
             <p
-              class="styles__DateTime-sc-1p1alcs-0 lgyzmN"
+              class="styles__DateTime-sc-1p1alcs-0 hyeEhI"
             >
               May 05 2021, 12.01am
             </p>
             <p
-              class="styles__Byline-sc-1p1alcs-1 eJxJuH"
+              class="styles__Byline-sc-1p1alcs-1 dgenH"
             >
               Steve Hewitt
             </p>
@@ -143,7 +143,7 @@ exports[`RelatedArticleSlice renders 2 1`] = `
             class="shared-styles__SideBySideColumn-sc-1kek94e-1 jNutGa"
           >
             <p
-              class="shared-styles__Label-sc-1kek94e-2 IvuEf"
+              class="shared-styles__Label-sc-1kek94e-2 jGUcDq"
             >
               Comment
             </p>
@@ -284,7 +284,7 @@ exports[`RelatedArticleSlice renders 3 1`] = `
             class="shared-styles__SideBySideColumn-sc-1kek94e-1 jNutGa"
           >
             <p
-              class="shared-styles__Label-sc-1kek94e-2 IvuEf"
+              class="shared-styles__Label-sc-1kek94e-2 jGUcDq"
             >
               Comment
             </p>
@@ -394,7 +394,7 @@ exports[`RelatedArticleSlice renders 3 1`] = `
               </a>
             </div>
             <p
-              class="styles__TimeSince-p3h2iu-1 lgXIbS"
+              class="styles__TimeSince-p3h2iu-1 hXPzMf"
             >
               3 days ago
             </p>

package/src/components/save-star/__tests__/__snapshots__/SaveStar.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SaveStar should render the initial loading state correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat ffLxAf"
+    class="sc-htpNat hvPOOD"
   >
     Save
   </div>
@@ -26,7 +26,7 @@ exports[`SaveStar should render the initial loading state correctly 1`] = `
 exports[`SaveStar should render the saved state 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat ffLxAf"
+    class="sc-htpNat hvPOOD"
   >
     Saved
   </div>
@@ -61,7 +61,7 @@ exports[`SaveStar should render the saved state 1`] = `
 exports[`SaveStar should render the unsaved state 1`] = `
 <DocumentFragment>
   <div
-    class="sc-htpNat ffLxAf"
+    class="sc-htpNat hvPOOD"
   >
     Save
   </div>

package/src/components/save-star/styles.ts

@@ -21,7 +21,7 @@ export const SaveStarText = styled.div`
   margin-right: 15px;
   color: ${colours.functional.secondary};
   font-family: ${fonts.supporting};
-  font-size: 14px;
+  font-size: 13px;
   line-height: 14px;
 `;
 

package/src/components/updated-timestamp/__tests__/__snapshots__/UpdatedTimestamp.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`UpdatedTimestamp shows timestamp with an overrided color 1`] = `
       class="sc-bdVaJa cSmEjS"
     >
       <div
-        class="sc-bwzfXH gjKjda"
+        class="sc-bwzfXH kRdged"
         color="yellow"
         data-testid="DateTimeUpdated"
       >

package/src/components/updated-timestamp/styles.ts

@@ -10,6 +10,6 @@ export const Container = styled.div`
 export const TimeSinceUpdate = styled.div<{ color?: string }>`
   color: ${({ color }) => color || colours.functional.primary};
   font-family: ${fonts.supporting};
-  font-size: 12px;
+  font-size: 11px;
   line-height: 16px;
 `;

package/src/helpers/text-crop/__tests__/__snapshots__/TextCrop.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<TextCrop> bottom adjustment 1`] = `
   .c0 {
   background-color: #ffb;
   padding: 0;
-  font-family: GillSansMTStd-Medium;
+  font-family: Roboto-Regular;
 }
 
 .c0::before,
@@ -37,7 +37,7 @@ exports[`<TextCrop> default  1`] = `
   .c0 {
   background-color: #ffb;
   padding: 0;
-  font-family: GillSansMTStd-Medium;
+  font-family: Roboto-Regular;
 }
 
 .c0::before,
@@ -69,7 +69,7 @@ exports[`<TextCrop> line height  1`] = `
   .c0 {
   background-color: #ffb;
   padding: 0;
-  font-family: GillSansMTStd-Medium;
+  font-family: Roboto-Regular;
   line-height: 1;
 }
 
@@ -133,7 +133,7 @@ exports[`<TextCrop> top adjustment 1`] = `
   .c0 {
   background-color: #ffb;
   padding: 0;
-  font-family: GillSansMTStd-Medium;
+  font-family: Roboto-Regular;
 }
 
 .c0::before,

package/src/helpers/text-crop/fonts.ts

@@ -10,7 +10,7 @@ export const fonts = {
   headlineRegular: 'TimesModern-Regular',
   stMagazine: 'TimesModern-Bold',
   styleMagazine: 'TimesModern-Bold',
-  supporting: 'GillSansMTStd-Medium'
+  supporting: 'Roboto-Regular'
 };
 
 export type Font = keyof typeof fonts;
@@ -59,8 +59,16 @@ const TimesDigitalW04RegularSC: FontTextCropSettings = {
   cropLineHeight: 1.2
 };
 
-const GillSansMTStdMedium: FontTextCropSettings = {
-  font: 'GillSansMTStd-Medium',
+const RobotoRegular: FontTextCropSettings = {
+  font: 'Roboto-Regular',
+  topCrop: 6,
+  bottomCrop: 26,
+  cropFontSize: 64,
+  cropLineHeight: 1.2
+};
+
+const RobotoMedium: FontTextCropSettings = {
+  font: 'Roboto-Medium',
   topCrop: 6,
   bottomCrop: 26,
   cropFontSize: 64,
@@ -74,7 +82,8 @@ const fontCropSettings: { [font: string]: FontTextCropSettings } = keyBy(
     TimesDigitalW04,
     TimesDigitalW04Regular,
     TimesDigitalW04RegularSC,
-    GillSansMTStdMedium
+    RobotoRegular,
+    RobotoMedium
   ],
   ({ font }) => font
 );