@times-components/ts-components 1.21.0 → 1.22.0

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

@@ -16,19 +16,23 @@ exports[`ArticleHeader In one calendar day Within the first minute of update - B
             class="sc-dnqmqq bGasAc"
           >
             <div
-              class="sc-gZMcBi bcfOTp"
+              class="sc-gZMcBi erfHmy"
             >
               <div
-                class="sc-VigVT bvOrBW"
+                class="sc-gqjmRU fwGLTx"
               >
-                ■
-              </div>
-              <div>
-                <span
-                  class="sc-fjdhpX cvtGYv"
+                <div
+                  class="sc-jTzLTM bTqqzd"
                 >
-                  BREAKING
-                </span>
+                  ■
+                </div>
+                <div>
+                  <span
+                    class="sc-jzJRlG erbwEj"
+                  >
+                    BREAKING
+                  </span>
+                </div>
               </div>
             </div>
           </div>

package/src/components/updated-timestamp/UpdatedTimestamp.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { date } from '@storybook/addon-knobs';
+
+import { UpdatedTimestamp } from './UpdatedTimestamp';
+
+storiesOf('Typescript Component/Updated Timestamp', module).add(
+  'Updated Timestamp',
+  () => {
+    const label = 'Updated Date/Time';
+    const defaultValue = new Date();
+    const groupId = 'Options';
+    const value = date(label, defaultValue, groupId);
+    const updated = new Date(value).toISOString();
+
+    return <UpdatedTimestamp updatedTime={updated} />;
+  }
+);

package/src/components/updated-timestamp/UpdatedTimestamp.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { differenceInSeconds, format, formatDistanceStrict } from 'date-fns';
+
+import { Container, TimeSinceUpdate } from './styles';
+
+export const UpdatedTimestamp: React.FC<{
+  updatedTime?: string;
+}> = ({ updatedTime }) => {
+  if (!updatedTime) {
+    return null;
+  }
+  const currentDateTime = new Date();
+  const updatedDate = new Date(updatedTime);
+  const timeSincePublishing =
+    formatDistanceStrict(updatedDate, currentDateTime, {
+      roundingMethod: 'floor'
+    }) + ' ago';
+  const diffInSeconds = differenceInSeconds(currentDateTime, updatedDate);
+
+  const isLessThan1Minute = diffInSeconds < 60;
+  const isLessThan13Hours = diffInSeconds < 60 * 60 * 13;
+
+  return (
+    <Container>
+      {!isLessThan1Minute && isLessThan13Hours ? (
+        <TimeSinceUpdate data-testId="MinutesHoursSinceUpdate">
+          {`Updated ${timeSincePublishing}`}
+        </TimeSinceUpdate>
+      ) : !isLessThan13Hours ? (
+        <TimeSinceUpdate data-testId="DateTimeUpdated">
+          {`Updated `}
+          {format(updatedDate, 'MMMM d, ')}
+          {format(updatedDate, 'h.mmaaa')}
+        </TimeSinceUpdate>
+      ) : null}
+    </Container>
+  );
+};

package/src/components/updated-timestamp/__tests__/UpdatedTimestamp.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { UpdatedTimestamp } from '../UpdatedTimestamp';
+import MockDate from 'mockdate';
+
+describe('UpdatedTimestamp', () => {
+  const updated = '2022-02-28T09:00:00Z';
+  afterEach(() => MockDate.reset());
+
+  it('does not show the timestamp within the first minute after the last update', () => {
+    MockDate.set('2022-02-28T09:00:00Z');
+    const { baseElement, queryByTestId } = render(
+      <UpdatedTimestamp updatedTime={updated} />
+    );
+    expect(baseElement).toMatchSnapshot();
+    expect(queryByTestId('MinutesHoursSinceUpdate')).toBeFalsy();
+  });
+  it('appears one minute after the last update', () => {
+    MockDate.set('2022-02-28T09:01:00Z');
+    const { queryByTestId } = render(
+      <UpdatedTimestamp updatedTime={updated} />
+    );
+    expect(queryByTestId('MinutesHoursSinceUpdate')).toBeTruthy();
+    expect(queryByTestId('MinutesHoursSinceUpdate')!.textContent).toBe(
+      'Updated 1 minute ago'
+    );
+  });
+  it('appears between 1 and 12 hours after the last update', () => {
+    MockDate.set('2022-02-28T11:30:00Z');
+    const { queryByTestId } = render(
+      <UpdatedTimestamp updatedTime={updated} />
+    );
+    expect(queryByTestId('MinutesHoursSinceUpdate')).toBeTruthy();
+    expect(queryByTestId('MinutesHoursSinceUpdate')!.textContent).toBe(
+      'Updated 2 hours ago'
+    );
+  });
+  it('shows the date and time of update 13 hours or more after the last update', () => {
+    MockDate.set('2022-02-28T23:30:00Z');
+    const { queryByTestId } = render(
+      <UpdatedTimestamp updatedTime={updated} />
+    );
+    expect(queryByTestId('DateTimeUpdated')).toBeTruthy();
+    expect(queryByTestId('DateTimeUpdated')!.textContent).toBe(
+      'Updated February 28, 9.00am'
+    );
+  });
+});

package/src/components/updated-timestamp/__tests__/__snapshots__/UpdatedTimestamp.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UpdatedTimestamp does not show the timestamp within the first minute after the last update 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa cSmEjS"
+    />
+  </div>
+</body>
+`;

package/src/components/updated-timestamp/styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { colours, fonts } from '@times-components/styleguide';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 3px 0 0 8px;
+`;
+
+export const TimeSinceUpdate = styled.div`
+  color: ${colours.functional.primary};
+  font-family: ${fonts.supporting};
+  font-size: 12px;
+  line-height: 16px;
+`;

package/src/helpers/time/UpdatedTimeProvider.tsx

@@ -0,0 +1,17 @@
+import React, { createContext, useContext } from 'react';
+
+const UpdatedTimeProviderContext = createContext<string | undefined>(undefined);
+
+export const UpdatedTimeProvider: React.FC<{
+  updatedTime: string;
+}> = ({ updatedTime, children }) => {
+  return (
+    <UpdatedTimeProviderContext.Provider value={updatedTime}>
+      {children}
+    </UpdatedTimeProviderContext.Provider>
+  );
+};
+
+export const useUpdatedTime = () => {
+  return useContext(UpdatedTimeProviderContext);
+};

package/src/helpers/time/__tests__/UpdatedTimeProvider.test.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { useUpdatedTime, UpdatedTimeProvider } from '../UpdatedTimeProvider';
+import 'regenerator-runtime';
+
+const TestComponent = () => {
+  const updatedTime = useUpdatedTime();
+  return <>{updatedTime}</>;
+};
+
+describe('UpdatedTimeProvider', () => {
+  it('should pass the updated time to the context value', () => {
+    const updatedTime = '2022-03-01T09:00:00.000Z';
+
+    const { findByText } = render(
+      <UpdatedTimeProvider updatedTime={updatedTime}>
+        <TestComponent />
+      </UpdatedTimeProvider>
+    );
+
+    findByText(updatedTime);
+  });
+});

package/src/index.ts

@@ -88,6 +88,12 @@ export {
   default as ArticleHeader
 } from './components/article-header/ArticleHeader';
 
+export {
+  UpdatedTimestamp
+} from './components/updated-timestamp/UpdatedTimestamp';
+
+export { UpdatedTimeProvider } from './helpers/time/UpdatedTimeProvider';
+
 export {
   default as safeDecodeURIComponent
 } from './utils/safeDecodeURIComponent';