@times-components/ts-components 1.21.0 → 1.22.2

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/in-article-puff/InArticlePuff.stories.tsx

@@ -34,12 +34,12 @@ storiesOf('Typescript Component/In Article/In Article Puff', module)
       <InArticlePuff
         sectionColour="#13354e"
         forceImageAspectRatio="3:2"
-        isLiveOrBreakingFlag="breaking"
+        isLiveOrBreaking="breaking"
       />
     </FetchProvider>
   ))
   .add('No Image', () => (
     <FetchProvider previewData={previewData[41547]}>
-      <InArticlePuff sectionColour="#184e13" isLiveOrBreakingFlag="live" />
+      <InArticlePuff sectionColour="#184e13" isLiveOrBreaking="live" />
     </FetchProvider>
   ));

package/src/components/in-article-puff/InArticlePuff.tsx

@@ -43,26 +43,26 @@ const scrollEvent = {
   }
 };
 
-const clickEvent = (buttonLabel: string, isLiveOrBreakingFlag?: string) => ({
+const clickEvent = (buttonLabel: string, isLiveOrBreaking?: string) => ({
   action: 'Clicked',
   attrs: {
     event_navigation_name: `button : ${buttonLabel}`,
     event_navigation_browsing_method: 'click',
-    other_details: isLiveOrBreakingFlag
+    other_details: isLiveOrBreaking
   }
 });
 
 export const InArticlePuff: React.FC<{
   sectionColour: string;
   forceImageAspectRatio?: AspectRatios;
-  isLiveOrBreakingFlag?: string;
-}> = ({ sectionColour, forceImageAspectRatio, isLiveOrBreakingFlag }) => {
+  isLiveOrBreaking?: string;
+}> = ({ sectionColour, forceImageAspectRatio, isLiveOrBreaking }) => {
   const handleClick = (
     fireAnalyticsEvent: (evt: TrackingContext) => void,
     buttonLabel: string
   ) => {
     fireAnalyticsEvent &&
-      fireAnalyticsEvent(clickEvent(buttonLabel, isLiveOrBreakingFlag));
+      fireAnalyticsEvent(clickEvent(buttonLabel, isLiveOrBreaking));
   };
 
   const { loading, error, data } = useFetch<InArticlePuffDeckData>();
@@ -98,7 +98,7 @@ export const InArticlePuff: React.FC<{
           component_type: 'in-article component : puff : interactive',
           event_navigation_action: 'navigation',
           component_name: `${headline}`,
-          other_details: isLiveOrBreakingFlag
+          other_details: isLiveOrBreaking
         }
       }}
       scrolledEvent={scrollEvent}

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/helpers/tracking/TrackingContextProvider.tsx

@@ -45,21 +45,35 @@ export const TrackingContextProvider = ({
   context,
   scrolledEvent
 }: TrackingContextProps & TrackingContextChildren) => {
+  // tslint:disable-next-line:no-console
+  console.log('TC log: TCP: ==========');
+
   const parentTrackingContext = useContext(TrackingContext);
+  // tslint:disable-next-line:no-console
+  console.log('TC log: TCP: parent=', parentTrackingContext.context);
+
   const stream =
     analyticsStream !== undefined
       ? analyticsStream
       : parentTrackingContext.analyticsStream;
 
   const aggregatedContext = merge({}, parentTrackingContext.context, context);
+  // tslint:disable-next-line:no-console
+  console.log('TC log: TCP: aggregated=', aggregatedContext);
 
   const fireAnalyticsEvent = (event: TrackingContext) => {
+    // tslint:disable-next-line:no-console
+    console.log('TC log: TCP: fireEvent=', event);
+
     const aggregatedEvent = merge({}, aggregatedContext, event, {
       attrs: {
         eventTime: new Date().toISOString()
       }
     });
 
+    // tslint:disable-next-line:no-console
+    console.log('TC log: TCP: fireAggregated=', aggregatedEvent);
+
     stream
       ? stream(aggregatedEvent)
       : // tslint:disable-next-line:no-console

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';