@times-components/ts-components 1.64.2 → 1.65.0

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/recommended-articles/RecommendedArticles.stories.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-
 import { getArticles } from './helpers';
 import { FetchProvider } from '../../helpers/fetch/FetchProvider';
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
 import previewData from '../../fixtures/preview-data/recommended-articles';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
-
 import { RecommendedArticles } from './RecommendedArticles';
 
 storiesOf('Typescript Component/Recommended Articles', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
+  .add('Recommended Articles - 1 Article', () => (
     <TrackingContextProvider
       context={{
         component: 'ArticleSkeleton',
@@ -28,21 +26,54 @@ storiesOf('Typescript Component/Recommended Articles', module)
       }}
       analyticsStream={analyticsStream}
     >
-      <div>{storyFn()}</div>
+      <FetchProvider previewData={getArticles(previewData, 1)}>
+        <RecommendedArticles heading="Today's News" />
+      </FetchProvider>
     </TrackingContextProvider>
   ))
-  .add('Recommended Articles - 1 Article', () => (
-    <FetchProvider previewData={getArticles(previewData, 1)}>
-      <RecommendedArticles heading="Today's News" />
-    </FetchProvider>
-  ))
   .add('Recommended Articles - 2 Article', () => (
-    <FetchProvider previewData={getArticles(previewData, 2)}>
-      <RecommendedArticles heading="Today's Business" />
-    </FetchProvider>
+    <TrackingContextProvider
+      context={{
+        component: 'ArticleSkeleton',
+        object: 'RecommendedArticles',
+        attrs: {
+          event_navigation_action: 'navigation',
+          event_navigation_name: 'widget:relevant article',
+          event_navigation_browsing_method: 'click',
+          section_details: 'section : <section>',
+          article_name: '<headline>',
+          widget_headline: '<headline>',
+          widget_section: '<section>',
+          widget_type: "today's section"
+        }
+      }}
+      analyticsStream={analyticsStream}
+    >
+      <FetchProvider previewData={getArticles(previewData, 2)}>
+        <RecommendedArticles heading="Today's Business" />
+      </FetchProvider>
+    </TrackingContextProvider>
   ))
   .add('Recommended Articles - 3 Article', () => (
-    <FetchProvider previewData={previewData}>
-      <RecommendedArticles heading="Today's Sport" />
-    </FetchProvider>
+    <TrackingContextProvider
+      context={{
+        component: 'ArticleSkeleton',
+        object: 'RecommendedArticles',
+        attrs: {
+          event_navigation_action: 'navigation',
+          event_navigation_name: 'widget:relevant article',
+          event_navigation_browsing_method: 'click',
+          section_details: 'section : <section>',
+          article_name: '<headline>',
+          widget_headline: '<headline>',
+          widget_section: '<section>',
+          widget_type: "today's section"
+        }
+      }}
+      analyticsStream={analyticsStream}
+    >
+      <FetchProvider previewData={previewData}>
+        <RecommendedArticles heading="Today's Sport" />
+      </FetchProvider>
+    </TrackingContextProvider>
   ));

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/SaveStar.stories.tsx

@@ -13,19 +13,19 @@ const Wrapper = styled.div`
   padding: 20px;
 `;
 
-storiesOf('Typescript Component/SaveStar', module)
-  .addDecorator((storyFn: () => React.ReactNode) => (
-    <TrackingContextProvider
-      context={{
-        component: 'ArticleSkeleton',
-        attrs: {
-          article_name: 'articleHeadline',
-          section_details: 'section'
-        }
-      }}
-      analyticsStream={analyticsStream}
-    >
-      <Wrapper>{storyFn()}</Wrapper>
-    </TrackingContextProvider>
-  ))
-  .add('SaveStar', () => <SaveStar articleId="12345" isPreviewMode />);
+storiesOf('Typescript Component/SaveStar', module).add('SaveStar', () => (
+  <TrackingContextProvider
+    context={{
+      component: 'ArticleSkeleton',
+      attrs: {
+        article_name: 'articleHeadline',
+        section_details: 'section'
+      }
+    }}
+    analyticsStream={analyticsStream}
+  >
+    <Wrapper>
+      <SaveStar articleId="12345" isPreviewMode />
+    </Wrapper>
+  </TrackingContextProvider>
+));

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
 );