@times-components/ts-components 1.64.1 → 1.64.3

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 ijxkXb"
+              class="shared-styles__Label-sc-1kek94e-2 IvuEf"
             >
               Comment
             </p>
@@ -67,12 +67,12 @@ exports[`RelatedArticleSlice renders 1 1`] = `
               </a>
             </div>
             <p
-              class="styles__DateTime-sc-1p1alcs-0 gqTqqJ"
+              class="styles__DateTime-sc-1p1alcs-0 lgyzmN"
             >
               May 05 2021, 12.01am
             </p>
             <p
-              class="styles__Byline-sc-1p1alcs-1 dNmwSq"
+              class="styles__Byline-sc-1p1alcs-1 eJxJuH"
             >
               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 ijxkXb"
+              class="shared-styles__Label-sc-1kek94e-2 IvuEf"
             >
               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 ijxkXb"
+              class="shared-styles__Label-sc-1kek94e-2 IvuEf"
             >
               Comment
             </p>
@@ -394,7 +394,7 @@ exports[`RelatedArticleSlice renders 3 1`] = `
               </a>
             </div>
             <p
-              class="styles__TimeSince-p3h2iu-1 hXPzMf"
+              class="styles__TimeSince-p3h2iu-1 lgXIbS"
             >
               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 kAeOTu"
+    class="sc-htpNat ffLxAf"
   >
     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 kAeOTu"
+    class="sc-htpNat ffLxAf"
   >
     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 kAeOTu"
+    class="sc-htpNat ffLxAf"
   >
     Save
   </div>

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 fQYvT"
+        class="sc-bwzfXH gjKjda"
         color="yellow"
         data-testid="DateTimeUpdated"
       >

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: Roboto-Regular;
+  font-family: GillSansMTStd-Medium;
 }
 
 .c0::before,
@@ -37,7 +37,7 @@ exports[`<TextCrop> default  1`] = `
   .c0 {
   background-color: #ffb;
   padding: 0;
-  font-family: Roboto-Regular;
+  font-family: GillSansMTStd-Medium;
 }
 
 .c0::before,
@@ -69,7 +69,7 @@ exports[`<TextCrop> line height  1`] = `
   .c0 {
   background-color: #ffb;
   padding: 0;
-  font-family: Roboto-Regular;
+  font-family: GillSansMTStd-Medium;
   line-height: 1;
 }
 
@@ -133,7 +133,7 @@ exports[`<TextCrop> top adjustment 1`] = `
   .c0 {
   background-color: #ffb;
   padding: 0;
-  font-family: Roboto-Regular;
+  font-family: GillSansMTStd-Medium;
 }
 
 .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: 'Roboto-Regular'
+  supporting: 'GillSansMTStd-Medium'
 };
 
 export type Font = keyof typeof fonts;
@@ -59,16 +59,8 @@ const TimesDigitalW04RegularSC: FontTextCropSettings = {
   cropLineHeight: 1.2
 };
 
-const robotoRegular: FontTextCropSettings = {
-  font: 'Roboto-Regular',
-  topCrop: 6,
-  bottomCrop: 26,
-  cropFontSize: 64,
-  cropLineHeight: 1.2
-};
-
-const robotoMedium: FontTextCropSettings = {
-  font: 'Roboto-Medium',
+const GillSansMTStdMedium: FontTextCropSettings = {
+  font: 'GillSansMTStd-Medium',
   topCrop: 6,
   bottomCrop: 26,
   cropFontSize: 64,
@@ -82,8 +74,7 @@ const fontCropSettings: { [font: string]: FontTextCropSettings } = keyBy(
     TimesDigitalW04,
     TimesDigitalW04Regular,
     TimesDigitalW04RegularSC,
-    robotoRegular,
-    robotoMedium
+    GillSansMTStdMedium
   ],
   ({ font }) => font
 );