@times-components/ts-components 1.100.1 → 1.101.0

package/src/components/delayed-component/__tests__/delayed-component.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+
+import { DelayedComponent } from '../delayed-component';
+
+describe('DelayedComponent', () => {
+  it('should remove the component after the specified delay when initial state is true', async () => {
+    const { queryByText, getByText } = render(
+      <DelayedComponent initialState={true} delay={800}>
+        <div>Children</div>
+      </DelayedComponent>
+    );
+    expect(getByText('Children')).toBeVisible();
+    await waitFor(() => {
+      expect(queryByText('Children')).toBeFalsy();
+    });
+  });
+  it('should render the component after the specified delay when initial state is false', async () => {
+    const { queryByText, getByText } = render(
+      <DelayedComponent initialState={false} delay={800}>
+        <div>Children</div>
+      </DelayedComponent>
+    );
+    expect(queryByText('Children')).toBeFalsy();
+    await waitFor(() => {
+      expect(getByText('Children')).toBeVisible();
+    });
+  });
+});

package/src/components/delayed-component/delayed-component.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Props } from '@storybook/addon-docs'
+
+import { DelayedComponent } from './delayed-component.tsx';
+
+<Meta
+  title="Components/Misc/DelayedComponent"
+  component={DelayedComponent}
+/>
+
+# DelayedComponent component
+The `DelayedComponent` component is a helper component used to delay the mount or dismount of the children passed to the component. 
+
+This component takes in three props: `initialState`, `delay` and `children`. 
+initialState - This used to set the initial component state, if it is meant to be displayed initially and removed after x amount of time intialState would be true. and Vice versa.
+delay - This is the time in milliseconds it takes for the component to mount or unmount. 
+
+Given the nature of this component you may need to play around with the controls so that you can see what it's doing. 
+
+
+
+## Props
+<Props of={DelayedComponent} />
+
+## Code Example
+`<DelayedComponent initialState={true} delay={8000}><div>Hello</div></DelayedComponent>`
+
+## View Component
+Please click the 'Canvas' tab for a better viewing experience, where you can update the props and review at the different breakpoints by clicking the preview icon and selecting from our list of pre-defined breakpoints (XS, SM, MD, LG and XL).
+
+export const DelayedComponentStory = ({ initialState, delay }) => (
+    <DelayedComponent initialState={initialState} delay={delay}><div style={{ fontSize: '20px', color: 'red'}}>I am a delayed component</div></DelayedComponent>
+);
+
+<Story name="DelayedComponent"
+  args={{ initialState: true, delay: 8000} }
+>
+  {DelayedComponentStory.bind({})}
+</Story>

package/src/components/delayed-component/delayed-component.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react';
+
+export const DelayedComponent: React.FC<{
+  delay: number;
+  initialState: boolean;
+  children: any;
+}> = ({ delay, initialState, children }) => {
+  const [showElement, setShowElement] = useState(initialState);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShowElement(!initialState);
+    }, delay);
+  }, []);
+  return <>{showElement ? children : null}</>;
+};

package/src/components/in-article-info-card/Card.tsx

@@ -6,7 +6,7 @@ import {
   HeadlineButtonContainer
 } from './styles';
 import { Label } from '../common-styles';
-import { InfoCardData } from './InfoCard';
+import { InfoCardData } from './types';
 
 export const Card: React.FC<{
   headline: string;

package/src/components/in-article-info-card/InfoCard.tsx

@@ -21,15 +21,8 @@ import { sanitiseCopy } from '../../helpers/text-formatting/SanitiseCopy';
 import { useFetch } from '../../helpers/fetch/FetchProvider';
 import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
 import { DeckData } from '../../helpers/fetch/types';
+import { InfoCardData } from './types';
 
-export type InfoCardData = {
-  type: string;
-  data: {
-    image?: string;
-    subtitle?: string;
-    copy: string;
-  };
-};
 type InfoCardFields = { headline: string; label: string; size: Layout };
 
 type InfoCardDeckData = DeckData<InfoCardFields, InfoCardData>;

package/src/components/in-article-info-card/types.ts

@@ -0,0 +1,8 @@
+export type InfoCardData = {
+  type: string;
+  data: {
+    image?: string;
+    subtitle?: string;
+    copy: string;
+  };
+};

package/src/components/job-title/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,271 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JobTitle - Larger Devices renders the Job title Tooltip on larger devices 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-EHOje cZlyCb"
+  >
+    <div
+      class="sc-bZQynM bJeBts"
+      data-testid="Tooltip-context"
+    >
+      Contractual Title
+    </div>
+    <button
+      aria-label="See contractual title, button"
+      class="sc-bdVaJa Cwdme"
+      data-testid="Tooltip"
+    >
+      <svg
+        fill="none"
+        height="16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask
+          height="16"
+          id="a"
+          maskUnits="userSpaceOnUse"
+          style="mask-type: alpha;"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M7.333 4.667h1.334V6H7.334V4.667ZM7.333 7.333h1.334v4H7.334v-4Z"
+            fill="currentcolor"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M1.333 8A6.67 6.67 0 0 1 8 1.333 6.67 6.67 0 0 1 14.667 8 6.67 6.67 0 0 1 8 14.667 6.67 6.67 0 0 1 1.333 8Zm1.334 0A5.34 5.34 0 0 0 8 13.333 5.34 5.34 0 0 0 13.334 8 5.34 5.34 0 0 0 8 2.667 5.34 5.34 0 0 0 2.667 8Z"
+            fill="currentcolor"
+            fill-rule="evenodd"
+          />
+        </mask>
+        <g
+          mask="url(#a)"
+        >
+          <path
+            d="M0 0h16v16H0z"
+            fill="currentcolor"
+          />
+        </g>
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`JobTitle - Smaller Devices renders the Job title Popover 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bwzfXH byurlq"
+  >
+    <div
+      class="sc-htpNat eLHUjT"
+      data-testid="Popover-context"
+    >
+      <div
+        class="sc-bxivhb hWtgEz"
+      >
+        <div>
+          Contractual Title
+        </div>
+        <button
+          class="sc-ifAKCX NVIZe"
+          data-testid="close-button"
+        >
+          <svg
+            fill="none"
+            height="12"
+            viewBox="0 0 14 14"
+            width="12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+              fill="#333333"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <button
+      aria-label="See contractual title, button"
+      class="sc-bdVaJa Cwdme"
+      data-testid="Popover"
+    >
+      <svg
+        fill="none"
+        height="16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask
+          height="16"
+          id="a"
+          maskUnits="userSpaceOnUse"
+          style="mask-type: alpha;"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M7.333 4.667h1.334V6H7.334V4.667ZM7.333 7.333h1.334v4H7.334v-4Z"
+            fill="currentcolor"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M1.333 8A6.67 6.67 0 0 1 8 1.333 6.67 6.67 0 0 1 14.667 8 6.67 6.67 0 0 1 8 14.667 6.67 6.67 0 0 1 1.333 8Zm1.334 0A5.34 5.34 0 0 0 8 13.333 5.34 5.34 0 0 0 13.334 8 5.34 5.34 0 0 0 8 2.667 5.34 5.34 0 0 0 2.667 8Z"
+            fill="currentcolor"
+            fill-rule="evenodd"
+          />
+        </mask>
+        <g
+          mask="url(#a)"
+        >
+          <path
+            d="M0 0h16v16H0z"
+            fill="currentcolor"
+          />
+        </g>
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`JobTitlePopover Renders the Popover when clicked 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bwzfXH byurlq"
+  >
+    <div
+      class="sc-htpNat hegnPT"
+      data-testid="Popover-context"
+    >
+      <div
+        class="sc-bxivhb hWtgEz"
+      >
+        <div>
+          Contractual Title Popover
+        </div>
+        <button
+          class="sc-ifAKCX NVIZe"
+          data-testid="close-button"
+        >
+          <svg
+            fill="none"
+            height="12"
+            viewBox="0 0 14 14"
+            width="12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+              fill="#333333"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <button
+      aria-label="See contractual title, button"
+      class="sc-bdVaJa Cwdme"
+      data-testid="Popover"
+    >
+      <svg
+        fill="none"
+        height="16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask
+          height="16"
+          id="a"
+          maskUnits="userSpaceOnUse"
+          style="mask-type: alpha;"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M7.333 4.667h1.334V6H7.334V4.667ZM7.333 7.333h1.334v4H7.334v-4Z"
+            fill="currentcolor"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M1.333 8A6.67 6.67 0 0 1 8 1.333 6.67 6.67 0 0 1 14.667 8 6.67 6.67 0 0 1 8 14.667 6.67 6.67 0 0 1 1.333 8Zm1.334 0A5.34 5.34 0 0 0 8 13.333 5.34 5.34 0 0 0 13.334 8 5.34 5.34 0 0 0 8 2.667 5.34 5.34 0 0 0 2.667 8Z"
+            fill="currentcolor"
+            fill-rule="evenodd"
+          />
+        </mask>
+        <g
+          mask="url(#a)"
+        >
+          <path
+            d="M0 0h16v16H0z"
+            fill="currentcolor"
+          />
+        </g>
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`JobTitleTooltip Renders the tooltip when clicked 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-EHOje cZlyCb"
+  >
+    <div
+      class="sc-bZQynM ldWLbn"
+      data-testid="Tooltip-context"
+    >
+      Contractual Title Tooltip
+    </div>
+    <button
+      aria-label="See contractual title, button"
+      class="sc-bdVaJa Cwdme"
+      data-testid="Tooltip"
+    >
+      <svg
+        fill="none"
+        height="16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask
+          height="16"
+          id="a"
+          maskUnits="userSpaceOnUse"
+          style="mask-type: alpha;"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <path
+            d="M7.333 4.667h1.334V6H7.334V4.667ZM7.333 7.333h1.334v4H7.334v-4Z"
+            fill="currentcolor"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M1.333 8A6.67 6.67 0 0 1 8 1.333 6.67 6.67 0 0 1 14.667 8 6.67 6.67 0 0 1 8 14.667 6.67 6.67 0 0 1 1.333 8Zm1.334 0A5.34 5.34 0 0 0 8 13.333 5.34 5.34 0 0 0 13.334 8 5.34 5.34 0 0 0 8 2.667 5.34 5.34 0 0 0 2.667 8Z"
+            fill="currentcolor"
+            fill-rule="evenodd"
+          />
+        </mask>
+        <g
+          mask="url(#a)"
+        >
+          <path
+            d="M0 0h16v16H0z"
+            fill="currentcolor"
+          />
+        </g>
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/job-title/__tests__/index.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import { JobTitleTooltip, JobTitlePopover, JobTitle } from '../job-title';
+import * as ResizeObserverModule from 'resize-observer-polyfill';
+
+(window as any).ResizeObserver = ResizeObserverModule.default;
+
+describe('JobTitle - Smaller Devices', () => {
+  it('renders the Job title Popover', () => {
+    const { asFragment, getByTestId } = render(
+      <JobTitle isLargeDevice={false} contractualTitle="Contractual Title" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+    expect(getByTestId('Popover')).toBeVisible();
+  });
+});
+
+describe('JobTitle - Larger Devices', () => {
+  it('renders the Job title Tooltip on larger devices', () => {
+    const { asFragment, getByTestId } = render(
+      <JobTitle isLargeDevice={true} contractualTitle="Contractual Title" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+    expect(getByTestId('Tooltip')).toBeVisible();
+  });
+});
+
+describe('JobTitleTooltip', () => {
+  it('Renders the tooltip when clicked', async () => {
+    const {
+      getByRole,
+      asFragment,
+      getByTestId,
+      getByText,
+      queryByTestId,
+      queryByText
+    } = render(
+      <JobTitleTooltip contractualTitle="Contractual Title Tooltip" />
+    );
+    expect(queryByTestId('Tooltip-context')).not.toBeVisible();
+    expect(queryByText('Contractual Title Tooltip')).not.toBeVisible();
+    fireEvent.mouseEnter(getByRole('button'));
+    expect(asFragment()).toMatchSnapshot();
+    expect(getByTestId('Tooltip')).toBeVisible();
+    expect(getByText('Contractual Title Tooltip')).toBeVisible();
+  });
+});
+
+describe('JobTitlePopover', () => {
+  it('Renders the Popover when clicked', () => {
+    const {
+      asFragment,
+      getByRole,
+      getByText,
+      queryByText,
+      queryByTestId,
+      getByTestId
+    } = render(
+      <JobTitlePopover contractualTitle="Contractual Title Popover" />
+    );
+    expect(queryByTestId('Popover-context')).not.toBeVisible();
+    expect(queryByText('Contractual Title Popover')).not.toBeVisible();
+    fireEvent.click(getByRole('button'));
+    expect(asFragment()).toMatchSnapshot();
+    expect(getByTestId('Popover')).toBeVisible();
+    expect(getByText('Contractual Title Popover')).toBeVisible();
+    const closeButton = getByTestId('close-button');
+    expect(closeButton).toBeVisible();
+  });
+});

package/src/components/job-title/assets/TooltipIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+const TooltipIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <mask
+      id="a"
+      width={16}
+      height={16}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: 'alpha'
+      }}
+    >
+      <path
+        fill="currentcolor"
+        d="M7.333 4.667h1.334V6H7.334V4.667ZM7.333 7.333h1.334v4H7.334v-4Z"
+      />
+      <path
+        fill="currentcolor"
+        fillRule="evenodd"
+        d="M1.333 8A6.67 6.67 0 0 1 8 1.333 6.67 6.67 0 0 1 14.667 8 6.67 6.67 0 0 1 8 14.667 6.67 6.67 0 0 1 1.333 8Zm1.334 0A5.34 5.34 0 0 0 8 13.333 5.34 5.34 0 0 0 13.334 8 5.34 5.34 0 0 0 8 2.667 5.34 5.34 0 0 0 2.667 8Z"
+        clipRule="evenodd"
+      />
+    </mask>
+    <g mask="url(#a)">
+      <path fill="currentcolor" d="M0 0h16v16H0z" />
+    </g>
+  </svg>
+);
+export default TooltipIcon;

package/src/components/job-title/assets/close-icon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const CloseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <path
+      d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+      fill="#333333"
+    />
+  </svg>
+);
+
+export default CloseIcon;

package/src/components/job-title/job-title.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Props } from '@storybook/addon-docs'
+
+import { JobTitle } from './job-title.tsx';
+
+<Meta
+  title="Components/Misc/JobTitle"
+  component={JobTitle}
+/>
+
+# Job Title component
+The `Job Title` component is not being used currently.
+We will leave JobTitle implementation as it could be required in the feature. It will require adding a floating element to fix the popover being out of screen issue.
+The `Job Title` component is used to show the author's contractual job title in either a Tooltip (Desktop) or a Popover (Smaller Devices).
+
+This component takes in two props `contractualTitle` and `isLargeDevice` as below.
+
+## Props
+<Props of={JobTitle} />
+
+## Code Example
+`<JobTitle contractualTitle="Senior Correspondent" isLargeDevice={true}/>`
+
+## View Component
+Please click the 'Canvas' tab for a better viewing experience, where you can update the props and review at the different breakpoints by clicking the preview icon and selecting from our list of pre-defined breakpoints (XS, SM, MD, LG and XL).
+
+export const JobTitleStory = ({ isLargeDevice }) => (
+  <div style={{ paddingTop: '150px'}}>
+    <JobTitle contractualTitle="Senior Correspondent" isLargeDevice={isLargeDevice} />
+  </div>
+);
+
+<Story name="JobTitle"
+  args={{ isLargeDevice: true }}
+  argTypes={{
+    isLargeDevice: { control: "select", options: [true, false] }
+  }}>
+  {JobTitleStory.bind({})}
+</Story>

package/src/components/job-title/job-title.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import TooltipIcon from './assets/TooltipIcon';
+import {
+  CloseButton,
+  IconButton,
+  Popover,
+  PopoverContext,
+  PopoverHeader,
+  Tooltip,
+  TooltipContext
+} from './styles';
+import CloseIcon from './assets/close-icon';
+
+export const JobTitleTooltip: React.FC<{ contractualTitle: string }> = ({
+  contractualTitle
+}) => {
+  const [tooltipOpen, setTooltipOpen] = React.useState(false);
+
+  return (
+    <>
+      <Tooltip>
+        <TooltipContext data-testid="Tooltip-context" isOpen={tooltipOpen}>
+          {contractualTitle}
+        </TooltipContext>
+        <IconButton
+          aria-label="See contractual title, button"
+          data-testid="Tooltip"
+          onMouseOver={() => setTooltipOpen(true)}
+          onMouseOut={() => setTooltipOpen(false)}
+        >
+          <TooltipIcon />
+        </IconButton>
+      </Tooltip>
+    </>
+  );
+};
+
+export const JobTitlePopover: React.FC<{ contractualTitle: string }> = ({
+  contractualTitle
+}) => {
+  const [popoverOpen, setPopoverOpen] = React.useState(false);
+
+  const togglePopover = () => {
+    setPopoverOpen(!popoverOpen);
+  };
+
+  return (
+    <>
+      <Popover>
+        <PopoverContext data-testid="Popover-context" isOpen={popoverOpen}>
+          <PopoverHeader>
+            <div>{contractualTitle}</div>
+            <CloseButton data-testid="close-button" onClick={togglePopover}>
+              <CloseIcon />
+            </CloseButton>
+          </PopoverHeader>
+        </PopoverContext>
+        <IconButton
+          aria-label="See contractual title, button"
+          data-testid="Popover"
+          onClick={togglePopover}
+        >
+          <TooltipIcon />
+        </IconButton>
+      </Popover>
+    </>
+  );
+};
+
+export const JobTitle: React.FC<{
+  contractualTitle: string;
+  isLargeDevice: boolean;
+}> = ({ contractualTitle, isLargeDevice }) => {
+  return isLargeDevice ? (
+    <JobTitleTooltip
+      contractualTitle={contractualTitle}
+      data-testid="Tooltip"
+    />
+  ) : (
+    <JobTitlePopover
+      contractualTitle={contractualTitle}
+      data-testid="Popover"
+    />
+  );
+};