@times-components/ts-components 1.31.0 → 1.32.1

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

@@ -1,50 +1,50 @@
 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 = 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 { date, time, 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)}
+        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)}
+        date={props.date}
+        time={props.time}
+        breaking={props.breaking}
       />
     );
   });

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

@@ -1,10 +1,15 @@
 import React from 'react';
 import {
+  parse,
   format,
   differenceInSeconds,
   differenceInCalendarDays,
   formatDistanceStrict
 } from 'date-fns';
+import { zonedTimeToUtc } from 'date-fns-tz';
+
+import { BreakingArticleFlag } from '../article-flag/LiveArticleFlag';
+import safeDecodeURIComponent from '../../utils/safeDecodeURIComponent';
 
 import {
   Container,
@@ -18,39 +23,46 @@ 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 }) => {
+}> = ({ date, time, breaking, headline }) => {
   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 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 +72,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,151 @@
 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 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(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 date={date} time={time} />);
+
       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('Within the first minute of update - No headline not breaking', () => {
-      MockDate.set('2021-12-31T06:30:00Z');
-      const { baseElement, getByText, queryByTestId, queryByText } = render(
-        <ArticleHeader updated={updated} />
+
+    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(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}
+          date={date}
+          time={time}
           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 date={date} time={time} breaking="true" />
       );
-      expect(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
+
       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"
-        />
-      );
       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('Same calendar day during BST', () => {
     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(
-        <ArticleHeader
-          updated={updated}
-          breaking="true"
-          headline="This%20is%20the%20headline"
-        />
+
+    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('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(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
     });
-    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"
-        />
-      );
-      expect(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
-      expect(getByText('11.30pm')).toBeVisible();
-      expect(getByTestId('TimeSincePublishing')).toBeTruthy();
+
+    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();
-      expect(getByTestId('UpdatedDate')).toBeVisible();
-      expect(getByText('December 31 2021')).toBeVisible();
-      expect(getByText('This is the headline')).toBeVisible();
     });
-    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"
-        />
+
+    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();
-      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"
-        />
-      );
-      expect(queryByText('BREAKING')).toBeFalsy();
-      expect(queryByTestId('UpdatedTime')).toBeTruthy();
-      expect(getByText('11.30pm')).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();
     });
   });
 });

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

@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ArticleHeader In one calendar day Within the first minute of update - Breaking 1`] = `
+exports[`ArticleHeader Same calendar day during GMT With breaking flag and headline 1`] = `
 <body>
   <div>
     <div
-      class="sc-bdVaJa cQBRMp"
-      id="u_20211231063000T222"
+      class="sc-VigVT esKZlx"
+      id="u_311220210630T222"
     >
       <div
-        class="sc-bwzfXH htoLMg"
+        class="sc-jTzLTM hsNKrf"
       >
         <div
-          class="sc-ifAKCX iDsMnF"
+          class="sc-cSHVUG jdArUK"
         >
           <div
-            class="sc-dnqmqq bGasAc"
+            class="sc-kpOJdX pPyiu"
           >
             <div
-              class="sc-fjdhpX Vdnui"
+              class="sc-EHOje cfBXHC"
             >
               <div
-                class="sc-iwsKbI fqYeBv"
+                class="sc-bdVaJa bkSKmo"
               >
                 <div
-                  class="sc-gqjmRU cTMoEm"
+                  class="sc-htpNat jcRSar"
                 >
                   <div
-                    class="sc-VigVT rGeCL"
+                    class="sc-bxivhb hTEbzV"
                   />
                 </div>
                 <span
-                  class="sc-gZMcBi iBeFrd"
+                  class="sc-bwzfXH hBgZUv"
                 >
                   BREAKING
                 </span>
@@ -38,72 +38,27 @@ exports[`ArticleHeader In one calendar day Within the first minute of update - B
             </div>
           </div>
           <div
-            class="sc-EHOje cDoFHw"
-            data-testid="UpdatedTime"
+            class="sc-fjdhpX eXIoUS"
           >
-            6.30am
-          </div>
-        </div>
-      </div>
-      <h2
-        class="sc-htoDjs ccbbfo"
-      >
-        This is the headline
-      </h2>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`ArticleHeader In one calendar day Within the first minute of update - No headline not breaking 1`] = `
-<body>
-  <div>
-    <div
-      class="sc-bdVaJa fLcQHz"
-      id="u_20211231063000"
-    >
-      <div
-        class="sc-bwzfXH htoLMg"
-      >
-        <div
-          class="sc-ifAKCX iDsMnF"
-        >
-          <div
-            class="sc-EHOje cDoFHw"
-            data-testid="UpdatedTime"
-          >
-            6.30am
+            <div
+              class="sc-jzJRlG ektXhQ"
+              data-testid="TimeSincePublishing"
+            >
+              30 minutes ago
+            </div>
+            <div
+              class="sc-kgoBCf gsnOug"
+            />
           </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`ArticleHeader In one calendar day Within the first minute of update - Not Breaking 1`] = `
-<body>
-  <div>
-    <div
-      class="sc-bdVaJa fLcQHz"
-      id="u_20211231063000T222"
-    >
-      <div
-        class="sc-bwzfXH htoLMg"
-      >
-        <div
-          class="sc-ifAKCX iDsMnF"
-        >
           <div
-            class="sc-EHOje cDoFHw"
-            data-testid="UpdatedTime"
+            class="sc-kAzzGY cABvZX"
           >
             6.30am
           </div>
         </div>
       </div>
       <h2
-        class="sc-htoDjs ccbbfo"
+        class="sc-kGXeez crUIWF"
       >
         This is the headline
       </h2>

package/src/components/article-header/styles.ts

@@ -31,7 +31,7 @@ export const TimeSincePublishingContainer = styled.div`
   flex-direction: row;
 `;
 
-export const TimeSincePublishing = styled.div<{ isBreaking?: boolean }>`
+export const TimeSincePublishing = styled.div`
   color: ${colours.functional.brandColour};
   font-family: ${fonts.supporting};
   font-size: 14px;
@@ -63,7 +63,7 @@ export const UpdatedDate = styled.div`
 export const Divider = styled.div`
   background-color: ${colours.functional.greyLabel};
   width: 1px;
-  margin: 2px 8px 6px 12px;
+  margin: 2px 8px 6px 8px;
 `;
 
 export const Headline = styled.h2`