@times-components/ts-components 1.24.0 → 1.26.0

package/src/components/in-article-timelines/Timelines.tsx

@@ -0,0 +1,160 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Placeholder } from '@times-components/image';
+import { useFetch } from '../../helpers/fetch/FetchProvider';
+import {
+  TrackingContext,
+  TrackingContextProvider
+} from '../../helpers/tracking/TrackingContextProvider';
+import { sanitiseCopy } from '../../helpers/text-formatting/SanitiseCopy';
+import {
+  Container,
+  ContentContainer,
+  ListItem,
+  LeftPanel,
+  RightPanel,
+  Date,
+  SubHeading,
+  StyledShowAllButton
+} from './styles';
+import {
+  PlaceholderContainer,
+  Label,
+  Headline,
+  ListContainer,
+  List,
+  Copy,
+  ShowAllContainer
+} from '../common-styles';
+import { DeckData } from '../../helpers/fetch/types';
+
+type TimelinesData = {
+  type: string;
+  data: {
+    date: string;
+    eventHeading: string;
+    image: string;
+    copy: string;
+  };
+};
+
+type TimelinesDeckData = DeckData<never, TimelinesData>;
+
+const scrollEvent = {
+  attrs: {
+    event_navigation_name: 'in-article component displayed : timelines',
+    event_navigation_browsing_method: 'scroll'
+  }
+};
+
+const clickEvent = (buttonLabel: string) => ({
+  action: 'Clicked',
+  attrs: {
+    event_navigation_name: `button : ${buttonLabel}`,
+    event_navigation_browsing_method: 'click'
+  }
+});
+
+export const Timelines: React.FC<{
+  sectionColour: string;
+}> = ({ sectionColour }) => {
+  const { loading, error, data } = useFetch<TimelinesDeckData>();
+
+  if (loading) {
+    return (
+      <PlaceholderContainer>
+        <Placeholder />
+      </PlaceholderContainer>
+    );
+  }
+
+  if (error || data === undefined) {
+    return null;
+  }
+
+  const { headline, label } = data.fields;
+  const timelinesData = data.body.data;
+  const [showAll, setShowAll] = useState(false);
+
+  const handleShowAll = (
+    fireAnalyticsEvent: (evt: TrackingContext) => void,
+    buttonLabel: string
+  ) => {
+    fireAnalyticsEvent && fireAnalyticsEvent(clickEvent(buttonLabel));
+    setShowAll(!showAll);
+  };
+
+  const showAllRef = useRef<HTMLDivElement>(null);
+  const [displayShowAll, setShowShowAll] = useState(false);
+  const maxHeight = 375;
+  useEffect(() => {
+    const listContainer = showAllRef.current;
+    if (listContainer) {
+      setShowShowAll(listContainer.clientHeight > maxHeight);
+    }
+  }, []);
+
+  return (
+    <TrackingContextProvider
+      context={{
+        object: 'InArticleTimelines',
+        attrs: {
+          component_type:
+            'in-article component : timelines: ' +
+            (displayShowAll ? 'interactive' : 'static'),
+          event_navigation_action: 'navigation',
+          component_name: `${headline}`
+        }
+      }}
+      scrolledEvent={scrollEvent}
+    >
+      {({ fireAnalyticsEvent, intersectObserverRef }) => (
+        <Container ref={intersectObserverRef} sectionColour={sectionColour}>
+          <ContentContainer>
+            <Label sectionColour={sectionColour}>{label}</Label>
+            {headline && <Headline>{headline}</Headline>}
+            <ListContainer
+              ref={showAllRef}
+              showAll={showAll}
+              maxHeight={maxHeight}
+              displayShowAll={displayShowAll}
+            >
+              <List>
+                {timelinesData.map((row: TimelinesData, index: number) => (
+                  <ListItem key={index}>
+                    <LeftPanel
+                      sectionColour={sectionColour}
+                      circularImage={row.data.image}
+                    >
+                      {row.data.image && <img src={row.data.image} />}
+                    </LeftPanel>
+                    <RightPanel>
+                      <Date sectionColour={sectionColour}>{row.data.date}</Date>
+                      <SubHeading>{row.data.eventHeading}</SubHeading>
+                      <Copy
+                        dangerouslySetInnerHTML={{
+                          __html: sanitiseCopy(row.data.copy, ['br', 'b', 'i'])
+                        }}
+                      />
+                    </RightPanel>
+                  </ListItem>
+                ))}
+              </List>
+            </ListContainer>
+          </ContentContainer>
+          <ShowAllContainer showAll={showAll} displayShowAll={displayShowAll}>
+            <StyledShowAllButton
+              onClick={() =>
+                handleShowAll(
+                  fireAnalyticsEvent,
+                  showAll ? 'Collapse' : 'Show all'
+                )
+              }
+            >
+              {showAll ? 'Collapse' : 'Show all'}
+            </StyledShowAllButton>
+          </ShowAllContainer>
+        </Container>
+      )}
+    </TrackingContextProvider>
+  );
+};

package/src/components/in-article-timelines/__tests__/Timelines.test.tsx

@@ -0,0 +1,309 @@
+import React from 'react';
+import mockDate from 'mockdate';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { Timelines } from '../Timelines';
+import { useFetch } from '../../../helpers/fetch/FetchProvider';
+import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
+import FakeIntersectionObserver from '../../../test-utils/FakeIntersectionObserver';
+import '@testing-library/jest-dom';
+import 'regenerator-runtime';
+
+jest.mock('@times-components/image', () => ({
+  Placeholder: () => <div>Placeholder</div>
+}));
+
+jest.mock('../../../helpers/fetch/FetchProvider', () => ({
+  useFetch: jest.fn()
+}));
+
+const deckApiPayloadWrapper = () => ({
+  data: testDataBullet
+});
+
+const deckApiPayloadWrapperCircle = () => ({
+  data: testDataCircle
+});
+
+const testDataBullet = {
+  deck_id: 45060,
+  deck_name: '[TEST] Timeline with Bullet Points - 25/08/2021 11:04:10',
+  deck_type: 'Timeline with Bullet Points',
+  version: 2,
+  updated_at: {
+    date: '2021-08-16 12:48:43.000000',
+    timezone_type: 3,
+    timezone: 'UTC'
+  },
+  fields: {
+    label: 'Venezuelan Politics',
+    headline: 'A history of injury troubles'
+  },
+  body: {
+    data: [
+      {
+        type: 'event',
+        data: {
+          date: '9 June 2018',
+          eventHeading: 'Event Heading 1',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '10 June 2018',
+          eventHeading: 'Event Heading 2',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '11 June 2018',
+          eventHeading: 'Event Heading 3',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '12 June 2018',
+          eventHeading: 'Event Heading 4',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '13 June 2018',
+          eventHeading: 'Event Heading 5',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '14 June 2018',
+          eventHeading: 'Event Heading 6',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '15 June 2018',
+          eventHeading: 'Event Heading 7',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      }
+    ]
+  },
+  html:
+    '<!DOCTYPE html><html><head><title>The Times - In Article Timeline with Bullet Points</title></head><body></body></html>'
+};
+
+const testDataCircle = {
+  deck_id: 45061,
+  deck_name: '[TEST] Timeline with Images - 25/08/2021 11:11:38',
+  deck_type: 'Timeline with Circle Images',
+  version: 2,
+  updated_at: {
+    date: '2021-08-16 12:48:43.000000',
+    timezone_type: 3,
+    timezone: 'UTC'
+  },
+  fields: {
+    label: 'Venezuelan Politics',
+    headline: 'A history of injury troubles'
+  },
+  body: {
+    data: [
+      {
+        type: 'event',
+        data: {
+          date: '9 June 2018',
+          eventHeading: 'Event Heading 1',
+          image:
+            'https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2Ffee23bf0-04d7-11ec-89b3-29a9a04e8645.jpg?crop=1500%2C844%2C0%2C78&resize=1200',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '10 June 2018',
+          eventHeading: 'Event Heading 2',
+          image:
+            'https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2Ffee23bf0-04d7-11ec-89b3-29a9a04e8645.jpg?crop=1500%2C844%2C0%2C78&resize=1200',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '11 June 2018',
+          eventHeading: 'Event Heading 3',
+          image:
+            'https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2Ffee23bf0-04d7-11ec-89b3-29a9a04e8645.jpg?crop=1500%2C844%2C0%2C78&resize=1200',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '12 June 2018',
+          eventHeading: 'Event Heading 4',
+          image:
+            'https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2Ffee23bf0-04d7-11ec-89b3-29a9a04e8645.jpg?crop=1500%2C844%2C0%2C78&resize=1200',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '13 June 2018',
+          eventHeading: 'Event Heading 5',
+          image:
+            'https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2Ffee23bf0-04d7-11ec-89b3-29a9a04e8645.jpg?crop=1500%2C844%2C0%2C78&resize=1200',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '14 June 2018',
+          eventHeading: 'Event Heading 6',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      },
+      {
+        type: 'event',
+        data: {
+          date: '15 June 2018',
+          eventHeading: 'Event Heading 7',
+          image:
+            'https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2Ffee23bf0-04d7-11ec-89b3-29a9a04e8645.jpg?crop=1500%2C844%2C0%2C78&resize=1200',
+          copy:
+            'Parturient mi dictumst suspendisse torquent primis potenti donec in parturient aliquam adipiscing bibendum bibendum magna nisi bibendum dignissim in dis a. Scelerisque a ullamcorper id maecenas tempor convallis ac cras. 1'
+        }
+      }
+    ]
+  },
+  html:
+    '<!DOCTYPE html><html><head><title>The Times - In Article Timeline with Circle Images</title></head><body></body></html>'
+};
+
+const renderTimelines = () => render(<Timelines sectionColour="#636C17" />);
+
+describe('Timelines', () => {
+  beforeEach(() => {
+    mockDate.set(1620000000000);
+  });
+
+  afterEach(() => {
+    mockDate.reset();
+    jest.clearAllMocks();
+    cleanup();
+  });
+
+  it('should render the initial loading state correctly', async () => {
+    (useFetch as jest.Mock).mockReturnValue({ loading: true });
+    const { asFragment, findByText } = render(
+      <Timelines sectionColour="#636C17" />
+    );
+    await findByText('Placeholder');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render the bullet points component', () => {
+    (useFetch as jest.Mock).mockReturnValue(deckApiPayloadWrapper());
+    const { asFragment } = renderTimelines();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render the circle images component', () => {
+    (useFetch as jest.Mock).mockReturnValue(deckApiPayloadWrapperCircle());
+    const { asFragment, getAllByRole } = renderTimelines();
+    expect(getAllByRole('img')[0]).toHaveAttribute(
+      'src',
+      'https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2Ffee23bf0-04d7-11ec-89b3-29a9a04e8645.jpg?crop=1500%2C844%2C0%2C78&resize=1200'
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('click show all', async () => {
+    const { asFragment, getByText, findByText } = render(
+      <Timelines sectionColour="#636C17" />
+    );
+    fireEvent.click(getByText('Show all'));
+    await findByText('Collapse');
+    expect(asFragment()).toMatchSnapshot();
+  });
+  describe('tracking', () => {
+    (useFetch as jest.Mock).mockReturnValue(deckApiPayloadWrapper());
+    let oldIntersectionObserver: typeof IntersectionObserver;
+    const analyticsStream = jest.fn();
+
+    beforeEach(() => {
+      oldIntersectionObserver = window.IntersectionObserver;
+      // @ts-ignore
+      window.IntersectionObserver = FakeIntersectionObserver;
+    });
+
+    afterEach(() => {
+      window.IntersectionObserver = oldIntersectionObserver;
+      jest.resetAllMocks();
+    });
+
+    it('fires scroll event when viewed', () => {
+      (useFetch as jest.Mock).mockReturnValue(deckApiPayloadWrapper());
+
+      render(
+        <TrackingContextProvider
+          context={{
+            component: 'ArticleSkeleton',
+            attrs: {
+              articleHeadline: 'articleHeadline',
+              section: 'section'
+            }
+          }}
+          analyticsStream={analyticsStream}
+        >
+          <Timelines sectionColour="#636C17" />
+        </TrackingContextProvider>
+      );
+
+      FakeIntersectionObserver.intersect();
+
+      expect(analyticsStream).toHaveBeenCalledTimes(1);
+      expect(analyticsStream).toHaveBeenCalledWith({
+        action: 'Scrolled',
+        component: 'ArticleSkeleton',
+        object: 'InArticleTimelines',
+        attrs: {
+          articleHeadline: 'articleHeadline',
+          component_name: 'A history of injury troubles',
+          component_type: 'in-article component : timelines: static',
+          eventTime: '2021-05-03T00:00:00.000Z',
+          event_navigation_action: 'navigation',
+          event_navigation_browsing_method: 'scroll',
+          event_navigation_name: 'in-article component displayed : timelines',
+          section: 'section'
+        }
+      });
+    });
+  });
+});