@times-components/ts-components 1.36.0 → 1.36.3

package/src/components/article-header/ArticleHeader.tsx

@@ -1,15 +1,10 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {
-  // parse,
-  format,
   differenceInSeconds,
   differenceInCalendarDays,
   formatDistanceStrict
 } from 'date-fns';
-import {
-  // zonedTimeToUtc,
-  utcToZonedTime
-} from 'date-fns-tz';
+import { format, utcToZonedTime } from 'date-fns-tz';
 
 import { BreakingArticleFlag } from '../article-flag/LiveArticleFlag';
 import safeDecodeURIComponent from '../../utils/safeDecodeURIComponent';
@@ -38,19 +33,24 @@ const anchorString = (updateTxt = '', headlineTxt = '') => {
 
 const ArticleHeader: React.FC<{
   updated: string;
-  // date: string;
-  // time: string;
   breaking?: string;
   headline?: string;
 }> = ({ updated, breaking, headline }) => {
+  const [timezone, setTimezone] = useState<string>('');
+
   const currentDateTime = new Date();
+  const updatedDate = new Date(updated);
 
-  // const updated = `${date} ${time}`;
-  // const parsedDate = parse(updated, 'dd/MM/yyyy HH:mm', new Date());
-  // const updatedDate = zonedTimeToUtc(parsedDate, 'Europe/London');
+  const timeZone = 'Europe/London';
+  const parsedDate = utcToZonedTime(updatedDate, timeZone);
 
-  const updatedDate = new Date(updated);
-  const parsedDate = utcToZonedTime(updatedDate, 'Europe/London');
+  useEffect(() => {
+    const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    if (currentTimezone !== timeZone) {
+      setTimezone(format(parsedDate, 'zzz', { timeZone }));
+    }
+  });
 
   const timeSincePublishing =
     formatDistanceStrict(updatedDate, currentDateTime, {
@@ -92,12 +92,12 @@ const ArticleHeader: React.FC<{
           <UpdatedTime
             isLessThan13Hours={!isLessThan1Minute && isLessThan13Hours}
           >
-            {format(parsedDate, 'h.mmaaa')}
+            {`${format(parsedDate, 'h.mmaaa')} ${timezone}`}
           </UpdatedTime>
         </UpdatedTimeItems>
 
         {isDaysAgo ? (
-          <UpdatedDate>{format(parsedDate, 'MMMM d yyyy')}</UpdatedDate>
+          <UpdatedDate>{format(parsedDate, 'MMMM d')}</UpdatedDate>
         ) : null}
       </UpdatesContainer>
 

package/src/components/article-header/__tests__/ArticleHeader.test.tsx

@@ -9,52 +9,52 @@ describe('ArticleHeader', () => {
   describe('Same calendar day during GMT', () => {
     afterEach(() => MockDate.reset());
 
-    const updated = '2021-12-31T06:30:00Z';
+    const updated = '2021-12-31T06:30:00+00:00';
 
     it('Within a minute of updating', () => {
-      MockDate.set('2021-12-31T06:30:10Z');
+      MockDate.set('2021-12-31T06:30:10+00:00');
 
       const { getByText, queryByTestId } = render(
         <ArticleHeader updated={updated} />
       );
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
     });
 
     it('Within an hour of updating', () => {
-      MockDate.set('2021-12-31T07:00:00Z');
+      MockDate.set('2021-12-31T07:00:00+00:00');
 
       const { getByText } = render(<ArticleHeader updated={updated} />);
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(getByText('30 minutes ago')).toBeVisible();
     });
 
     it('Between 1 and 12 hours after updating', () => {
-      MockDate.set('2021-12-31T08:30:00Z');
+      MockDate.set('2021-12-31T08:30:00+00:00');
 
       const { getByText } = render(<ArticleHeader updated={updated} />);
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(getByText('2 hours ago')).toBeVisible();
     });
 
     it('After 12 hours but same calendar day', () => {
-      MockDate.set('2021-12-20T20:30:00Z');
+      MockDate.set('2021-12-20T20:30:00+00:00');
 
       const { getByText, queryByTestId } = render(
         <ArticleHeader updated={updated} />
       );
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
     });
 
     it('With breaking flag and headline', () => {
-      MockDate.set('2021-12-31T07:00:00Z');
+      MockDate.set('2021-12-31T07:00:00+00:00');
 
-      const { baseElement, getByText } = render(
+      const { getByText } = render(
         <ArticleHeader
           updated={updated}
           breaking="true"
@@ -62,22 +62,22 @@ describe('ArticleHeader', () => {
         />
       );
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(getByText('30 minutes ago')).toBeVisible();
       expect(getByText('BREAKING')).toBeVisible();
       expect(getByText('This is the headline')).toBeVisible();
 
-      expect(baseElement).toMatchSnapshot();
+      // expect(baseElement).toMatchSnapshot();
     });
 
     it('With breaking flag expired', () => {
-      MockDate.set('2021-12-31T08:30:00Z');
+      MockDate.set('2021-12-31T08:30:00+00:00');
 
       const { getByText, queryByText } = render(
         <ArticleHeader updated={updated} breaking="true" />
       );
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(getByText('2 hours ago')).toBeVisible();
       expect(queryByText('BREAKING')).toBeFalsy();
     });
@@ -95,7 +95,7 @@ describe('ArticleHeader', () => {
         <ArticleHeader updated={updated} />
       );
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
     });
 
@@ -104,7 +104,7 @@ describe('ArticleHeader', () => {
 
       const { getByText } = render(<ArticleHeader updated={updated} />);
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(getByText('30 minutes ago')).toBeVisible();
     });
 
@@ -113,7 +113,7 @@ describe('ArticleHeader', () => {
 
       const { getByText } = render(<ArticleHeader updated={updated} />);
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(getByText('2 hours ago')).toBeVisible();
     });
 
@@ -124,7 +124,7 @@ describe('ArticleHeader', () => {
         <ArticleHeader updated={updated} />
       );
 
-      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText(/6.30am/i)).toBeVisible();
       expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
     });
   });
@@ -132,163 +132,16 @@ describe('ArticleHeader', () => {
   describe('Different calendar days', () => {
     afterEach(() => MockDate.reset());
 
-    const updated = '2021-12-31T22:30:00Z';
+    const updated = '2021-12-31T22:30:00+00:00';
 
     it('Between 1 and 12 hours after updating', () => {
-      MockDate.set('2022-01-01T02:30:00Z');
+      MockDate.set('2022-01-01T02:30:00+00:00');
 
       const { getByText } = render(<ArticleHeader updated={updated} />);
 
-      expect(getByText('10.30pm')).toBeVisible();
+      expect(getByText(/10.30pm/i)).toBeVisible();
       expect(getByText('4 hours ago')).toBeVisible();
-      expect(getByText('December 31 2021')).toBeVisible();
+      expect(getByText('December 31')).toBeVisible();
     });
   });
 });
-
-/*
-describe('ArticleHeader', () => {
-  describe('Same calendar day during GMT', () => {
-    afterEach(() => MockDate.reset());
-
-    const date = '31/12/2021';
-    const time = '06:30';
-
-    it('Within a minute of updating', () => {
-      MockDate.set('2021-12-31T06:30:10Z');
-
-      const { getByText, queryByTestId } = render(
-        <ArticleHeader date={date} time={time} />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-    });
-
-    it('Within an hour of updating', () => {
-      MockDate.set('2021-12-31T07:00:00Z');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('30 minutes ago')).toBeVisible();
-    });
-
-    it('Between 1 and 12 hours after updating', () => {
-      MockDate.set('2021-12-31T08:30:00Z');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('2 hours ago')).toBeVisible();
-    });
-
-    it('After 12 hours but same calendar day', () => {
-      MockDate.set('2021-12-20T20:30:00Z');
-
-      const { getByText, queryByTestId } = render(
-        <ArticleHeader date={date} time={time} />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-    });
-
-    it('With breaking flag and headline', () => {
-      MockDate.set('2021-12-31T07:00:00Z');
-
-      const { baseElement, getByText } = render(
-        <ArticleHeader
-          date={date}
-          time={time}
-          breaking="true"
-          headline="This%20is%20the%20headline"
-        />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('30 minutes ago')).toBeVisible();
-      expect(getByText('BREAKING')).toBeVisible();
-      expect(getByText('This is the headline')).toBeVisible();
-
-      expect(baseElement).toMatchSnapshot();
-    });
-
-    it('With breaking flag expired', () => {
-      MockDate.set('2021-12-31T08:30:00Z');
-
-      const { getByText, queryByText } = render(
-        <ArticleHeader date={date} time={time} breaking="true" />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('2 hours ago')).toBeVisible();
-      expect(queryByText('BREAKING')).toBeFalsy();
-    });
-  });
-
-  describe('Same calendar day during BST', () => {
-    afterEach(() => MockDate.reset());
-
-    const date = '20/04/2022';
-    const time = '06:30';
-
-    it('Within a minute of updating', () => {
-      MockDate.set('2022-04-20T06:30:10+01:00');
-
-      const { getByText, queryByTestId } = render(
-        <ArticleHeader date={date} time={time} />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-    });
-
-    it('Within an hour of updating', () => {
-      MockDate.set('2022-04-20T07:00:00+01:00');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('30 minutes ago')).toBeVisible();
-    });
-
-    it('Between 1 and 12 hours after updating', () => {
-      MockDate.set('2022-04-20T08:30:00+01:00');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(getByText('2 hours ago')).toBeVisible();
-    });
-
-    it('After 12 hours but same calendar day', () => {
-      MockDate.set('2022-04-20T20:30:00+01:00');
-
-      const { getByText, queryByTestId } = render(
-        <ArticleHeader date={date} time={time} />
-      );
-
-      expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-    });
-  });
-
-  describe('Different calendar days', () => {
-    afterEach(() => MockDate.reset());
-
-    const date = '31/12/2021';
-    const time = '22:30';
-
-    it('Between 1 and 12 hours after updating', () => {
-      MockDate.set('2022-01-01T02:30:00Z');
-
-      const { getByText } = render(<ArticleHeader date={date} time={time} />);
-
-      expect(getByText('10.30pm')).toBeVisible();
-      expect(getByText('4 hours ago')).toBeVisible();
-      expect(getByText('December 31 2021')).toBeVisible();
-    });
-  });
-});
-*/

package/src/components/carousel/GalleryCarousel.tsx

@@ -153,7 +153,8 @@ export const GalleryCarousel: React.FC<GalleryCarouselProps> = ({
                   fireAnalyticsEvent({
                     attrs: {
                       event_navigation_name: `button : ${buttonLabel}`,
-                      component_name: headline
+                      component_name: headline,
+                      event_navigation_browsing_method: 'click'
                     }
                   });
                 }

package/src/components/carousel/__tests__/GalleryCarousel.test.tsx

@@ -179,6 +179,7 @@ describe('GalleryCarousel', () => {
           component_type: 'in-article component : gallery : interactive',
           eventTime: '2021-05-03T00:00:00.000Z',
           event_navigation_action: 'navigation',
+          event_navigation_browsing_method: 'click',
           event_navigation_name: 'button : left',
           section_details: 'Section'
         },
@@ -212,6 +213,7 @@ describe('GalleryCarousel', () => {
           eventTime: '2021-05-03T00:00:00.000Z',
           event_navigation_action: 'navigation',
           event_navigation_name: 'button : right',
+          event_navigation_browsing_method: 'click',
           section_details: 'Section'
         },
         component: 'ArticleSkeleton',

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import RelatedArticles from '@times-components/related-articles';
 import { GetRecommendedArticles } from '@times-components/provider';
@@ -18,6 +18,16 @@ export const RecommendedArticles = ({
   section,
   analyticsStream
 }: RecommendedArticlesProps) => {
+  const [isReady, setIsReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, []);
+
+  if (!isReady) {
+    return null;
+  }
+
   return (
     <GetRecommendedArticles
       publisher={'TIMES'}

package/src/components/article-header/__tests__/__snapshots__/ArticleHeader.test.tsx.snap

@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ArticleHeader Same calendar day during GMT With breaking flag and headline 1`] = `
-<body>
-  <div>
-    <div
-      class="sc-VigVT esKZlx"
-      id="u_20211231063000T222"
-    >
-      <div
-        class="sc-jTzLTM hsNKrf"
-      >
-        <div
-          class="sc-cSHVUG jdArUK"
-        >
-          <div
-            class="sc-kpOJdX pPyiu"
-          >
-            <div
-              class="sc-EHOje cfBXHC"
-            >
-              <div
-                class="sc-bdVaJa bkSKmo"
-              >
-                <div
-                  class="sc-htpNat jcRSar"
-                >
-                  <div
-                    class="sc-bxivhb hTEbzV"
-                  />
-                </div>
-                <span
-                  class="sc-bwzfXH hBgZUv"
-                >
-                  BREAKING
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            class="sc-fjdhpX eXIoUS"
-          >
-            <div
-              class="sc-jzJRlG ektXhQ"
-              data-testid="TimeSincePublishing"
-            >
-              30 minutes ago
-            </div>
-            <div
-              class="sc-kgoBCf gsnOug"
-            />
-          </div>
-          <div
-            class="sc-kAzzGY cABvZX"
-          >
-            6.30am
-          </div>
-        </div>
-      </div>
-      <h2
-        class="sc-kGXeez crUIWF"
-      >
-        This is the headline
-      </h2>
-    </div>
-  </div>
-</body>
-`;