@times-components/ts-components 1.32.0 → 1.32.3

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

@@ -1,50 +1,57 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { date, select, text } from '@storybook/addon-knobs';
+import { select, text } from '@storybook/addon-knobs';
+import {
+  // format,
+  addMinutes
+} from 'date-fns';
+// import { utcToZonedTime } from 'date-fns-tz';
 
 import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
 import ArticleHeader from './ArticleHeader';
 
+const getAttributes = () => {
+  const id = 'Options';
+
+  const now = new Date();
+  const updated = text('Updated', addMinutes(now, -10).toISOString(), id);
+
+  // const now = utcToZonedTime(new Date(), 'Europe/London');
+  // const date = text('Date', format(now, 'dd/MM/yyyy'), id);
+  // const time = text('Time', format(addMinutes(now, -10), 'HH:mm'), id);
+
+  const options = { True: 'true', False: undefined };
+  const breaking = select('Breaking', options, 'true', id);
+
+  const headline = text('Headline', 'This is the headline', id);
+
+  return { updated, breaking, headline };
+};
+
 storiesOf('Typescript Component/Article Header', module)
   .addDecorator((storyFn: () => React.ReactNode) => (
     <ArticleHarness>{storyFn()}</ArticleHarness>
   ))
   .add('Article Header with headline', () => {
-    const label = 'Updated Date/Time';
-    const defaultValue = new Date();
-    const groupId = 'Options';
-    const value = date(label, defaultValue, groupId);
-    const breakingOptions = {
-      True: 'true',
-      False: undefined
-    };
-    const updated = new Date(value).toISOString();
-
-    const headline = text('Headline', 'This is the headline', groupId);
-
+    const props = getAttributes();
     return (
       <ArticleHeader
-        updated={updated}
-        breaking={select('Breaking', breakingOptions, undefined, groupId)}
-        headline={encodeURIComponent(headline)}
+        updated={props.updated}
+        // date={props.date}
+        // time={props.time}
+        breaking={props.breaking}
+        headline={encodeURIComponent(props.headline)}
       />
     );
   })
   .add('Article Header without headline', () => {
-    const label = 'Updated Date/Time';
-    const defaultValue = new Date();
-    const groupId = 'Options';
-    const value = date(label, defaultValue, groupId);
-    const breakingOptions = {
-      True: 'true',
-      False: undefined
-    };
-    const updated = new Date(value).toISOString();
-
+    const props = getAttributes();
     return (
       <ArticleHeader
-        updated={updated}
-        breaking={select('Breaking', breakingOptions, undefined, groupId)}
+        updated={props.updated}
+        // date={props.date}
+        // time={props.time}
+        breaking={props.breaking}
       />
     );
   });

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

@@ -1,10 +1,18 @@
 import React from 'react';
 import {
+  // parse,
   format,
   differenceInSeconds,
   differenceInCalendarDays,
   formatDistanceStrict
 } from 'date-fns';
+import {
+  // zonedTimeToUtc,
+  utcToZonedTime
+} from 'date-fns-tz';
+
+import { BreakingArticleFlag } from '../article-flag/LiveArticleFlag';
+import safeDecodeURIComponent from '../../utils/safeDecodeURIComponent';
 
 import {
   Container,
@@ -18,39 +26,50 @@ import {
   UpdatesContainer,
   FlagContainer
 } from './styles';
-import { BreakingArticleFlag } from '../article-flag/LiveArticleFlag';
-import safeDecodeURIComponent from '../../utils/safeDecodeURIComponent';
+
+const anchorString = (updateTxt = '', headlineTxt = '') => {
+  const onlyNumbersReg = /\D+/g;
+  const onlyNumbers = updateTxt.replace(onlyNumbersReg, '');
+  const acronymReg = /\b(\w)/g;
+  const acronymMatch = headlineTxt.match(acronymReg);
+  const acronym = acronymMatch === null ? '' : acronymMatch.join('');
+  return `u_${onlyNumbers}${acronym}`;
+};
 
 const ArticleHeader: React.FC<{
   updated: string;
+  // date: string;
+  // time: string;
   breaking?: string;
   headline?: string;
 }> = ({ updated, breaking, headline }) => {
   const currentDateTime = new Date();
+
+  // const updated = `${date} ${time}`;
+  // const parsedDate = parse(updated, 'dd/MM/yyyy HH:mm', new Date());
+  // const updatedDate = zonedTimeToUtc(parsedDate, 'Europe/London');
+
   const updatedDate = new Date(updated);
+  const parsedDate = utcToZonedTime(updatedDate, 'Europe/London');
+
   const timeSincePublishing =
     formatDistanceStrict(updatedDate, currentDateTime, {
       roundingMethod: 'floor'
     }) + ' ago';
-  const diffInSeconds = differenceInSeconds(currentDateTime, updatedDate);
-  const anchorString = (updateTxt = '', headlineTxt = '') => {
-    const onlyNumbersReg = /\D+/g;
-    const onlyNumbers = updateTxt.replace(onlyNumbersReg, '');
-    const acronymReg = /\b(\w)/g;
-    const acronymMatch = headlineTxt.match(acronymReg);
-    const acronym = acronymMatch === null ? '' : acronymMatch.join('');
-    return `u_${onlyNumbers}${acronym}`;
-  };
 
+  const diffInSeconds = differenceInSeconds(currentDateTime, updatedDate);
   const isLessThan1Minute = diffInSeconds < 60;
   const isLessThan1Hour = diffInSeconds < 60 * 60;
   const isLessThan13Hours = diffInSeconds < 60 * 60 * 13;
-  const isDaysAgo = differenceInCalendarDays(currentDateTime, updatedDate) >= 1;
-  const anchorPoint = anchorString(updated, headline);
+
+  const isDaysAgo = differenceInCalendarDays(currentDateTime, parsedDate) >= 1;
+
   const isBreaking = breaking
     ? Boolean(breaking.toLowerCase() === 'true')
     : false;
 
+  const anchorPoint = anchorString(updated, headline);
+
   return (
     <Container isBreaking={isBreaking && isLessThan1Hour} id={anchorPoint}>
       <UpdatesContainer>
@@ -60,30 +79,28 @@ const ArticleHeader: React.FC<{
               <BreakingArticleFlag />
             </FlagContainer>
           ) : null}
+
           {!isLessThan1Minute && isLessThan13Hours ? (
             <TimeSincePublishingContainer>
-              <TimeSincePublishing
-                isBreaking={isBreaking}
-                data-testId="TimeSincePublishing"
-              >
+              <TimeSincePublishing data-testId="TimeSincePublishing">
                 {timeSincePublishing}
               </TimeSincePublishing>
               <Divider />
             </TimeSincePublishingContainer>
           ) : null}
+
           <UpdatedTime
             isLessThan13Hours={!isLessThan1Minute && isLessThan13Hours}
-            data-testId="UpdatedTime"
           >
-            {format(updatedDate, 'h.mmaaa')}
+            {format(parsedDate, 'h.mmaaa')}
           </UpdatedTime>
         </UpdatedTimeItems>
+
         {isDaysAgo ? (
-          <UpdatedDate data-testid="UpdatedDate">
-            {format(updatedDate, 'MMMM d yyyy')}
-          </UpdatedDate>
+          <UpdatedDate>{format(parsedDate, 'MMMM d yyyy')}</UpdatedDate>
         ) : null}
       </UpdatesContainer>
+
       {headline && <Headline>{safeDecodeURIComponent(headline)}</Headline>}
     </Container>
   );

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

@@ -1,183 +1,294 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import MockDate from 'mockdate';
 
 import ArticleHeader from '../ArticleHeader';
-import MockDate from 'mockdate';
 
 describe('ArticleHeader', () => {
-  describe('In one calendar day', () => {
-    const updated = '2021-12-31T06:30:00Z';
+  describe('Same calendar day during GMT', () => {
     afterEach(() => MockDate.reset());
-    it('Within the first minute of update - Breaking', () => {
-      MockDate.set('2021-12-31T06:30:00Z');
-      const { baseElement, getByText, queryByTestId } = render(
-        <ArticleHeader
-          updated={updated}
-          breaking="true"
-          headline="This%20is%20the%20headline"
-        />
+
+    const updated = '2021-12-31T06:30:00Z';
+
+    it('Within a minute of updating', () => {
+      MockDate.set('2021-12-31T06:30:10Z');
+
+      const { getByText, queryByTestId } = render(
+        <ArticleHeader updated={updated} />
       );
-      expect(baseElement).toMatchSnapshot();
-      expect(getByText('BREAKING')).toBeVisible();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+
       expect(getByText('6.30am')).toBeVisible();
       expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-      expect(queryByTestId('UpdatedDate')).toBeFalsy();
-      expect(getByText('This is the headline')).toBeVisible();
     });
-    it('Within the first minute of update - Not Breaking', () => {
-      MockDate.set('2021-12-31T06:30:00Z');
-      const { baseElement, getByText, queryByTestId, queryByText } = render(
-        <ArticleHeader
-          updated={updated}
-          breaking="false"
-          headline="This%20is%20the%20headline"
-        />
-      );
-      expect(baseElement).toMatchSnapshot();
-      expect(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+
+    it('Within an hour of updating', () => {
+      MockDate.set('2021-12-31T07:00:00Z');
+
+      const { getByText } = render(<ArticleHeader updated={updated} />);
+
       expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-      expect(queryByTestId('UpdatedDate')).toBeFalsy();
-      expect(getByText('This is the headline')).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 updated={updated} />);
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText('2 hours ago')).toBeVisible();
     });
-    it('Within the first minute of update - No headline not breaking', () => {
-      MockDate.set('2021-12-31T06:30:00Z');
-      const { baseElement, getByText, queryByTestId, queryByText } = render(
+
+    it('After 12 hours but same calendar day', () => {
+      MockDate.set('2021-12-20T20:30:00Z');
+
+      const { getByText, queryByTestId } = render(
         <ArticleHeader updated={updated} />
       );
-      expect(baseElement).toMatchSnapshot();
-      expect(queryByText('This is the headline')).toBeFalsy();
-      expect(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+
       expect(getByText('6.30am')).toBeVisible();
       expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-      expect(queryByTestId('UpdatedDate')).toBeFalsy();
     });
-    it('within an hour of updating', () => {
+
+    it('With breaking flag and headline', () => {
       MockDate.set('2021-12-31T07:00:00Z');
-      const { getByText, queryByTestId } = render(
+
+      const { baseElement, getByText } = render(
         <ArticleHeader
           updated={updated}
           breaking="true"
           headline="This%20is%20the%20headline"
         />
       );
-      expect(getByText('BREAKING')).toBeVisible();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+
       expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeTruthy();
       expect(getByText('30 minutes ago')).toBeVisible();
-      expect(queryByTestId('UpdatedDate')).toBeFalsy();
+      expect(getByText('BREAKING')).toBeVisible();
       expect(getByText('This is the headline')).toBeVisible();
+
+      expect(baseElement).toMatchSnapshot();
     });
-    it('between 1 and 12 hours after update time', () => {
+
+    it('With breaking flag expired', () => {
       MockDate.set('2021-12-31T08:30:00Z');
-      const { getByText, queryByTestId, queryByText } = render(
-        <ArticleHeader
-          updated={updated}
-          breaking="true"
-          headline="This%20is%20the%20headline"
-        />
+
+      const { getByText, queryByText } = render(
+        <ArticleHeader updated={updated} breaking="true" />
       );
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText('2 hours ago')).toBeVisible();
       expect(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+    });
+  });
+
+  describe('Same calendar day during BST', () => {
+    afterEach(() => MockDate.reset());
+
+    const updated = '2022-04-20T06:30:00+01:00';
+
+    it('Within a minute of updating', () => {
+      MockDate.set('2022-04-20T06:30:10+01:00');
+
+      const { getByText, queryByTestId } = render(
+        <ArticleHeader updated={updated} />
+      );
+
+      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 updated={updated} />);
+
+      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 updated={updated} />);
+
       expect(getByText('6.30am')).toBeVisible();
-      expect(queryByTestId('TimeSincePublishing')).toBeTruthy();
       expect(getByText('2 hours ago')).toBeVisible();
-      expect(queryByTestId('UpdatedDate')).toBeFalsy();
-      expect(getByText('This is the headline')).toBeVisible();
     });
-    it('after 12 hours but on the same calendar day', () => {
-      MockDate.set('2021-12-31T19:30:00Z');
-      const { getByText, queryByTestId, queryByText } = render(
-        <ArticleHeader
-          updated={updated}
-          breaking="true"
-          headline="This%20is%20the%20headline"
-        />
+
+    it('After 12 hours but same calendar day', () => {
+      MockDate.set('2022-04-20T20:30:00+01:00');
+
+      const { getByText, queryByTestId } = render(
+        <ArticleHeader updated={updated} />
       );
-      expect(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+
       expect(getByText('6.30am')).toBeVisible();
       expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-      expect(queryByTestId('UpdatedDate')).toBeFalsy();
-      expect(getByText('This is the headline')).toBeVisible();
     });
   });
-  describe('Across calendar days', () => {
-    const updated = '2021-12-31T23:30:00Z';
+
+  describe('Different calendar days', () => {
     afterEach(() => MockDate.reset());
-    it('within an hour of updating but on a different calendar day', () => {
-      MockDate.set('2022-01-01T00:29:00Z');
-      const { getByTestId, queryByTestId, getByText } = render(
+
+    const updated = '2021-12-31T22:30:00Z';
+
+    it('Between 1 and 12 hours after updating', () => {
+      MockDate.set('2022-01-01T02:30:00Z');
+
+      const { getByText } = render(<ArticleHeader updated={updated} />);
+
+      expect(getByText('10.30pm')).toBeVisible();
+      expect(getByText('4 hours ago')).toBeVisible();
+      expect(getByText('December 31 2021')).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
-          updated={updated}
+          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(queryByTestId('UpdatedTime')).toBeTruthy();
-      expect(getByText('11.30pm')).toBeVisible();
-      expect(getByTestId('TimeSincePublishing')).toBeTruthy();
-      expect(getByTestId('UpdatedDate')).toBeVisible();
-      expect(getByText('December 31 2021')).toBeVisible();
       expect(getByText('This is the headline')).toBeVisible();
+
+      expect(baseElement).toMatchSnapshot();
     });
-    it('between 1-12 hours of updating but on a different calendar day', () => {
-      MockDate.set('2022-01-01T02:00:00Z');
-      const { getByTestId, queryByText, queryByTestId, getByText } = render(
-        <ArticleHeader
-          updated={updated}
-          breaking="true"
-          headline="This%20is%20the%20headline"
-        />
+
+    it('With breaking flag expired', () => {
+      MockDate.set('2021-12-31T08:30:00Z');
+
+      const { getByText, queryByText } = render(
+        <ArticleHeader date={date} time={time} breaking="true" />
       );
-      expect(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
-      expect(getByText('11.30pm')).toBeVisible();
-      expect(getByTestId('TimeSincePublishing')).toBeTruthy();
+
+      expect(getByText('6.30am')).toBeVisible();
       expect(getByText('2 hours ago')).toBeVisible();
-      expect(getByTestId('UpdatedDate')).toBeVisible();
-      expect(getByText('December 31 2021')).toBeVisible();
-      expect(getByText('This is the headline')).toBeVisible();
+      expect(queryByText('BREAKING')).toBeFalsy();
     });
-    it('after 12 hours but on a different calendar day', () => {
-      MockDate.set('2022-01-01T14:30:00Z');
-      const { getByTestId, queryByText, queryByTestId, getByText } = render(
-        <ArticleHeader
-          updated={updated}
-          breaking="true"
-          headline="This%20is%20the%20headline"
-        />
+  });
+
+  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(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
-      expect(getByText('11.30pm')).toBeVisible();
+
+      expect(getByText('6.30am')).toBeVisible();
       expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-      expect(getByTestId('UpdatedDate')).toBeVisible();
-      expect(getByText('December 31 2021')).toBeVisible();
-      expect(getByText('This is the headline')).toBeVisible();
     });
-    it('after multiple calendar days', () => {
-      MockDate.set('2022-01-03T14:30:00Z');
-      const { getByTestId, queryByText, queryByTestId, getByText } = render(
-        <ArticleHeader
-          updated={updated}
-          breaking="true"
-          headline="This%20is%20the%20headline"
-        />
+
+    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(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
-      expect(getByText('11.30pm')).toBeVisible();
+
+      expect(getByText('6.30am')).toBeVisible();
       expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
-      expect(getByTestId('UpdatedDate')).toBeVisible();
+    });
+  });
+
+  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();
-      expect(getByText('This is the headline')).toBeVisible();
     });
   });
 });
+*/