@times-components/ts-components 1.43.2 → 1.44.2

package/src/components/recommended-articles/RecommendedArticles.stories.tsx

@@ -1,60 +1,48 @@
 import React from 'react';
-
-import { showcaseConverter } from '@times-components/storybook';
+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';
 
-const recommArticles = {
-  children: [
-    {
-      component: () => (
-        <FetchProvider previewData={getArticles(previewData, 1)}>
-          <RecommendedArticles
-            heading="Today's news"
-            isVisible
-            analyticsStream={analyticsStream}
-          />
-        </FetchProvider>
-      ),
-      name: 'Recommended Articles - 1 Article',
-      platform: 'web',
-      type: 'story'
-    },
-    {
-      component: () => (
-        <FetchProvider previewData={getArticles(previewData, 2)}>
-          <RecommendedArticles
-            heading="Today's business"
-            isVisible
-            analyticsStream={analyticsStream}
-          />
-        </FetchProvider>
-      ),
-      name: 'Recommended Articles - 2 Article',
-      platform: 'web',
-      type: 'story'
-    },
-    {
-      component: () => (
-        <FetchProvider previewData={previewData}>
-          <RecommendedArticles
-            heading="Today's sport"
-            isVisible
-            analyticsStream={analyticsStream}
-          />
-        </FetchProvider>
-      ),
-      name: 'Recommended Articles - 3 Article',
-      platform: 'web',
-      type: 'story'
-    }
-  ],
-  name: 'Typescript Component/Recommended Articles'
-};
-
-showcaseConverter(module, recommArticles);
+storiesOf('Typescript Component/Recommended Articles', module)
+  .addDecorator((storyFn: () => React.ReactNode) => (
+    <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}
+    >
+      <div>{storyFn()}</div>
+    </TrackingContextProvider>
+  ))
+  .add('Recommended Articles - 1 Article', () => (
+    <FetchProvider previewData={getArticles(previewData, 1)}>
+      <RecommendedArticles heading="Today's news" isVisible />
+    </FetchProvider>
+  ))
+  .add('Recommended Articles - 2 Article', () => (
+    <FetchProvider previewData={getArticles(previewData, 2)}>
+      <RecommendedArticles heading="Today's business" isVisible />
+    </FetchProvider>
+  ))
+  .add('Recommended Articles - 3 Article', () => (
+    <FetchProvider previewData={previewData}>
+      <RecommendedArticles heading="Today's sport" isVisible />
+    </FetchProvider>
+  ));

package/src/components/recommended-articles/RecommendedArticles.tsx

@@ -9,8 +9,7 @@ import { getRelatedArticlesSlice } from './formatters';
 export const RecommendedArticles: React.FC<{
   heading: string;
   isVisible?: boolean;
-  analyticsStream?: (evt: any) => void;
-}> = ({ heading, isVisible, analyticsStream }) => {
+}> = ({ heading, isVisible }) => {
   const { loading, error, data } = useFetch<any>();
 
   if (loading || error || data === undefined) {
@@ -29,7 +28,6 @@ export const RecommendedArticles: React.FC<{
     if (fireAnalyticsEvent) {
       fireAnalyticsEvent({
         action: 'Clicked',
-        object: 'RecommendedArticles',
         attrs: { article_parent_name: found ? found.article.headline : '' }
       });
     }
@@ -45,7 +43,8 @@ export const RecommendedArticles: React.FC<{
         slice={slice}
         isVisible
         onPress={onClickHandler}
-        analyticsStream={analyticsStream}
+        // tslint:disable-next-line: no-empty
+        analyticsStream={() => {}}
       />
     </div>
   );

package/src/components/recommended-articles/RecommendedFetch.tsx

@@ -9,14 +9,7 @@ export const RecommendedFetch: React.FC<{
   articleHeadline: string;
   articleSection: string;
   isVisible?: boolean;
-  analyticsStream?: (evt: any) => void;
-}> = ({
-  articleId,
-  articleHeadline,
-  articleSection,
-  isVisible,
-  analyticsStream
-}) => {
+}> = ({ articleId, articleHeadline, articleSection, isVisible }) => {
   const [isClientSide, setIsClientSide] = useState<boolean>(false);
 
   useEffect(() => {
@@ -26,7 +19,9 @@ export const RecommendedFetch: React.FC<{
   const heading = `Today's ${articleSection}`;
 
   return isClientSide ? (
-    <FetchProvider url={`/api/recommended-articles/${articleId}`}>
+    <FetchProvider
+      url={`/api/recommended-articles/${articleId}/todays_section`}
+    >
       <TrackingContextProvider
         context={{
           object: 'RecommendedArticles',
@@ -42,11 +37,7 @@ export const RecommendedFetch: React.FC<{
           }
         }}
       >
-        <RecommendedArticles
-          heading={heading}
-          isVisible={isVisible}
-          analyticsStream={analyticsStream}
-        />
+        <RecommendedArticles heading={heading} isVisible={isVisible} />
       </TrackingContextProvider>
     </FetchProvider>
   ) : null;

package/src/components/recommended-articles/__tests__/RecommendedArticles.test.tsx

@@ -63,9 +63,7 @@ describe('<RecommendedArticles>', () => {
   it('should render the initial loading state correctly', () => {
     (useFetch as jest.Mock).mockReturnValue({ loading: true });
 
-    const { asFragment } = render(
-      <RecommendedArticles heading={heading} analyticsStream={() => ({})} />
-    );
+    const { asFragment } = render(<RecommendedArticles heading={heading} />);
 
     expect(asFragment().firstChild).toBeNull();
   });
@@ -73,9 +71,7 @@ describe('<RecommendedArticles>', () => {
   it('should render the error state correctly', () => {
     (useFetch as jest.Mock).mockReturnValue({ error: 'Some error occurred' });
 
-    const { asFragment } = render(
-      <RecommendedArticles heading={heading} analyticsStream={() => ({})} />
-    );
+    const { asFragment } = render(<RecommendedArticles heading={heading} />);
 
     expect(asFragment().firstChild).toBeNull();
   });
@@ -86,11 +82,7 @@ describe('<RecommendedArticles>', () => {
     });
 
     const { asFragment, getByText } = render(
-      <RecommendedArticles
-        heading={heading}
-        isVisible
-        analyticsStream={() => ({})}
-      />
+      <RecommendedArticles heading={heading} isVisible />
     );
 
     expect(getByText(heading));
@@ -104,7 +96,7 @@ describe('<RecommendedArticles>', () => {
     });
 
     const { asFragment, getByText } = render(
-      <RecommendedArticles heading={heading} analyticsStream={() => ({})} />
+      <RecommendedArticles heading={heading} />
     );
 
     expect(getByText(heading));
@@ -117,11 +109,7 @@ describe('<RecommendedArticles>', () => {
     (useFetch as jest.Mock).mockReturnValue({ data: previewData });
 
     const { asFragment, getByText } = render(
-      <RecommendedArticles
-        heading={heading}
-        isVisible
-        analyticsStream={() => ({})}
-      />
+      <RecommendedArticles heading={heading} isVisible />
     );
 
     expect(getByText(heading));
@@ -141,11 +129,7 @@ describe('<RecommendedArticles>', () => {
         context={initialContext}
         analyticsStream={analyticsStream}
       >
-        <RecommendedArticles
-          heading={heading}
-          isVisible
-          analyticsStream={() => ({})}
-        />
+        <RecommendedArticles heading={heading} isVisible />
       </TrackingContextProvider>
     );
 

package/src/components/recommended-articles/__tests__/RecommendedFetch.test.tsx

@@ -23,7 +23,6 @@ describe('<RecommendedFetch>', () => {
         articleId="1234"
         articleHeadline="Some headline"
         articleSection="News"
-        analyticsStream={() => ({})}
       />
     );