@times-components/ts-components 1.98.2 → 1.98.3-alpha.15

package/src/components/job-title/styles.ts

@@ -0,0 +1,154 @@
+import styled from 'styled-components';
+
+export const IconButton = styled.button`
+  margin: 0;
+  padding: 0;
+  display: inline-grid;
+  column-gap: 8px;
+  grid-template-columns: repeat(1, auto);
+  width: 32px;
+  height: 32px;
+  margin-inline-start: 8px;
+  padding-inline: 8px;
+  padding-block: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: none;
+  appearance: none;
+  background-color: #00000000;
+  border-radius: 50%;
+  color: #333333;
+  cursor: pointer;
+`;
+
+export const Popover = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+export const PopoverContext = styled.div<{ isOpen?: boolean }>`
+  display: ${({ isOpen }) => (isOpen ? 'grid' : 'none')};
+  position: absolute;
+  top: -55px;
+  left: 4px;
+  box-shadow: 0px 20px 32px 0px #11111114;
+  border-radius: 0px;
+  border-style: none;
+  z-index: 80;
+
+  div {
+    margin: 0;
+    color: #333333;
+    border-radius: 0px;
+    background-color: #ffffff;
+    white-space: nowrap;
+
+    display: grid;
+    grid-template-areas:
+      'header close'
+      'content content';
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
+
+    /* Pointer Arrow */
+    &::after {
+      content: '';
+      position: absolute;
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+      box-sizing: border-box;
+      background-color: #ffffff;
+      width: 16px;
+      height: 16px;
+      left: 12px;
+      bottom: calc(-16px / 2);
+    }
+  }
+`;
+
+export const PopoverHeader = styled.div`
+  div {
+    display: flex;
+    grid-area: header;
+    align-items: center;
+    box-sizing: border-box;
+    box-shadow: 0px 20px 32px 0px #11111114;
+    border-radius: 0px;
+    border-style: none;
+    font-family: Roboto;
+    font-size: 1.4000000000000001rem;
+    line-height: 1.5;
+    font-weight: 500;
+    letter-spacing: 0em;
+    padding-inline: 24px;
+    padding-block: 16px;
+  }
+`;
+
+export const CloseButton = styled.button`
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  padding: 16px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s;
+  &:focus-visible {
+    background-color: #eeeeee;
+    border: 1px solid #000;
+  }
+  &:hover {
+    background-color: #eeeeee;
+  }
+`;
+
+export const Tooltip = styled.div`
+  position: relative;
+  display: inline-block;
+  z-index: 80;
+`;
+export const TooltipContext = styled.div<{ isOpen?: boolean }>`
+  display: ${({ isOpen }) => (isOpen ? 'grid' : 'none')};
+  position: absolute;
+  top: -34px;
+  left: 8px;
+  grid-template-areas:
+    'header close'
+    'content content';
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+
+  color: rgb(255, 255, 255);
+  background-color: rgb(17, 17, 17);
+  font-family: 'Roboto';
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 500;
+  letter-spacing: 0em;
+  padding-inline: 8px;
+  padding-block: 8px;
+  white-space: nowrap;
+
+  /* Pointer Arrow */
+  &::after {
+    content: '';
+    position: absolute;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    box-sizing: border-box;
+    background-color: #ffffff;
+    width: 4px;
+    height: 4px;
+    left: 14px;
+    bottom: calc(-4px / 2);
+    box-sizing: border-box;
+    background-color: rgb(17, 17, 17);
+  }
+`;

package/src/components/save-star/ContentProvider.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
 import { useFetch } from '../../helpers/fetch/FetchProvider';
-import { ArticleBookmark } from './SaveStarUI';
-
-export interface ContentProps {
-  loading?: boolean;
-  error?: string;
-  data?: ArticleBookmark;
-}
+import { ArticleBookmark, ContentProps } from './types';
 
 export const ContentProvider: React.FC = React.memo(({ children }) => {
   const fetchResponse = useFetch<ArticleBookmark>();

package/src/components/save-star/SaveStar.tsx

@@ -1,7 +1,8 @@
 import React, { cloneElement, useCallback, useMemo, useState } from 'react';
 import { FetchProvider } from '../../helpers/fetch/FetchProvider';
-import { SaveStarUI, ArticleBookmark } from './SaveStarUI';
+import { SaveStarUI } from './SaveStarUI';
 import { ContentProvider } from './ContentProvider';
+import { ArticleBookmark } from './types';
 
 export const SaveStar: React.FC<{
   articleId: string;

package/src/components/save-star/SaveStarUI.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { colours } from '@times-components/ts-styleguide';
 import { IconStar } from '@times-components/icons';
-import { ContentProps } from './ContentProvider';
+import { ContentProps } from './types';
 import {
   IconContainer,
   LoadingIcon,
@@ -9,10 +9,6 @@ import {
   SaveStarButton
 } from './styles';
 
-export type ArticleBookmark = {
-  isBookmarked: boolean;
-};
-
 const getText = (isSaved: boolean) => (isSaved ? 'Saved' : 'Save');
 
 const getIconTitle = (isSaved: boolean) =>

package/src/components/save-star/types.ts

@@ -0,0 +1,9 @@
+export type ArticleBookmark = {
+  isBookmarked: boolean;
+};
+
+export interface ContentProps {
+  loading?: boolean;
+  error?: string;
+  data?: ArticleBookmark;
+}

package/src/components/update-button/__tests__/__snapshots__/update-button-with-delay.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render UpdateButtonWithDelay should render the Update button component and the DelayComponent as expected when it has an update 1`] = `
+<DocumentFragment>
+  <button
+    class="sc-bdVaJa kaAiuV"
+  >
+    <svg
+      data-testid="upward-arrow"
+      fill="none"
+      height="16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m3.166 8 .94.94 3.727-3.72v8.113h1.333V5.22l3.72 3.727.947-.947-5.334-5.333L3.166 8Z"
+        fill="currentcolor"
+      />
+    </svg>
+    New Updates
+  </button>
+</DocumentFragment>
+`;

package/src/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render UpdateButton should render the component 1`] = `
+<DocumentFragment>
+  <button
+    class="sc-bdVaJa kaAiuV"
+  >
+    <svg
+      data-testid="upward-arrow"
+      fill="none"
+      height="16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m3.166 8 .94.94 3.727-3.72v8.113h1.333V5.22l3.72 3.727.947-.947-5.334-5.333L3.166 8Z"
+        fill="currentcolor"
+      />
+    </svg>
+    New Updates
+  </button>
+</DocumentFragment>
+`;

package/src/components/update-button/__tests__/update-button-with-delay.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import { UpdateButtonWithDelay } from '../update-button-with-delay';
+
+const handleClickMock = jest.fn();
+
+const renderComponent = (
+  delay: number,
+  display: boolean,
+  label: string,
+  handleClick: any,
+  updatedTime: string,
+  articleId: string,
+  update: boolean
+) =>
+  render(
+    <UpdateButtonWithDelay
+      delay={delay}
+      display={display}
+      label={label}
+      handleClick={handleClick}
+      updatedTime={updatedTime}
+      articleId={articleId}
+      update={update}
+    />
+  );
+
+describe('Render UpdateButtonWithDelay', () => {
+  it('should render the Update button component and the DelayComponent as expected when it has an update', async () => {
+    const { asFragment, getByRole, queryByTestId } = renderComponent(
+      800,
+      true,
+      'New Updates',
+      handleClickMock,
+      '2023-10-12T00:00:00.000Z',
+      '12345',
+      true
+    );
+    expect(asFragment()).toMatchSnapshot();
+    expect(getByRole('button')).toBeVisible();
+    await waitFor(() => {
+      expect(queryByTestId('button')).toBeFalsy();
+    });
+  });
+
+  it('should not render the Update button component and the DelayComponent as expected when it has an update', async () => {
+    const { unmount, queryByTestId } = renderComponent(
+      500,
+      true,
+      'Update Now',
+      handleClickMock,
+      '2023-10-12T00:00:00.000Z',
+      '12345',
+      false
+    );
+
+    await waitFor(
+      () => {
+        expect(queryByTestId('button')).toBeNull();
+      },
+      { timeout: 500 }
+    );
+
+    unmount();
+  });
+});

package/src/components/update-button/__tests__/update-button.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+
+import { UpdateButton } from '../update-button';
+
+const handleClickMock = jest.fn();
+
+const renderComponent = (label: string, handleClick: any) =>
+  render(<UpdateButton label={label} handleClick={handleClick} />);
+
+describe('Render UpdateButton', () => {
+  it('should render the component', () => {
+    const { asFragment } = renderComponent('New Updates', handleClickMock);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render the label text you pass through', () => {
+    const { getByText } = renderComponent('Test New Updates', handleClickMock);
+    expect(getByText('Test New Updates')).toBeVisible();
+  });
+  it('should trigger an event on click', () => {
+    const { getByRole } = renderComponent('New Update', handleClickMock);
+    const Button = getByRole('button');
+    fireEvent.click(Button);
+    expect(handleClickMock).toHaveBeenCalled();
+  });
+  it('should render the upward facing arrow icon', () => {
+    const { getByTestId } = renderComponent('New Updates', handleClickMock);
+    expect(getByTestId('upward-arrow')).toBeVisible();
+  });
+});

package/src/components/update-button/assets/FilledArrowIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const FilledArrowIcon: React.FC = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentcolor"
+      d="m3.166 8 .94.94 3.727-3.72v8.113h1.333V5.22l3.72 3.727.947-.947-5.334-5.333L3.166 8Z"
+    />
+  </svg>
+);
+export default FilledArrowIcon;

package/src/components/update-button/styles.ts

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+const styleMap = {
+  colors: {
+    interactiveNegative040: '#9f0000',
+    interactiveNegative050: '#800000',
+    inkInverse: '#FFFFFF'
+  },
+  spacing: {
+    space030: '12px',
+    space020: '8px'
+  }
+};
+
+export const StyledButton = styled.button`
+  border: none;
+  background-color: ${styleMap.colors.interactiveNegative040};
+  padding-block: ${styleMap.spacing.space020};
+  padding-inline: ${styleMap.spacing.space030};
+  font-family: Roboto;
+  font-size: 1.4000000000000001rem;
+  font-weight: 500;
+  letter-spacing: 0em;
+  color: ${styleMap.colors.inkInverse};
+  display: inline-grid;
+  grid-template-columns: repeat(2, auto);
+  column-gap: 8px;
+  place-content: center;
+  place-items: center;
+  cursor: pointer;
+  transition-property: background-color;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.5, 1);
+  &:hover {
+    background-color: ${styleMap.colors.interactiveNegative050};
+  }
+  &:active {
+    background-color: ${styleMap.colors.interactiveNegative050};
+  }
+`;

package/src/components/update-button/update-button-with-delay.stories.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Props } from '@storybook/addon-docs'
+
+import { UpdateButtonWithDelay } from './update-button-with-delay.tsx';
+
+<Meta
+  title="Components/Misc/UpdateButtonWithDelay"
+  component={UpdateButtonWithDelay}
+/>
+
+# UpdateButtonWithDelay component
+The `UpdateButtonWithDelay` component is used to highlight when there is an update in an article.
+
+The `UpdateButtonWithDelay` component makes use of the `DelayedComponent` which will set the component to mount or unmount given a delay and intial state.
+
+This component takes in a six props:
+- `loading` to display the loading spinner.
+- `delay` to determine the delay in milliseconds for mounting or unmounting the component.
+- `display` which will determine if the component initially displays, or is rendered after the delay has passed.
+- `label` this is for the text label in the button.
+- `handleClick` determines the function called on interaction.
+- `arrowUp` this is to render either the upward arrow icon or the downward icon (depending on where in the article the user is vs where the update is).
+
+## Props
+<Props of={UpdateButtonWithDelay} />
+
+## Code Example
+`<UpdateButtonWithDelay display={true} delay={8000} label='New updates', arrowUp={true} updatedTime="2023-12-12T12:00:00.000Z" articleId="12345"/>`
+
+## 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 UpdateButtonWithDelayStory = ({ display, delay, label, arrowUp, updatedTime, articleId }) => (
+    <UpdateButtonWithDelay display={display} delay={delay} label={label} arrowUp={arrowUp} updatedTime={updatedTime} articleId={articleId} update={true}/>
+);
+
+<Story name="UpdateButtonWithDelay"
+  args={{ display: true, delay: 8000, label: 'New Updates', arrowUp: true, updatedTime: '2023-07-13T12:00:00.000Z', articleId: '12345'} }
+>
+  {UpdateButtonWithDelayStory.bind({})}
+</Story>

package/src/components/update-button/update-button-with-delay.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import { DelayedComponent } from '../delayed-component/delayed-component';
+import { UpdateButton } from './update-button';
+import fetch from 'isomorphic-unfetch';
+
+type UpdateWithDelayProps = {
+  display: boolean;
+  delay: number;
+  label: string;
+  handleClick: () => void;
+  updatedTime: string;
+  articleId: string;
+  update: boolean;
+};
+
+export const UpdateButtonWithDelay = ({
+  delay,
+  display,
+  label,
+  handleClick,
+  updatedTime,
+  articleId,
+  update = false
+}: UpdateWithDelayProps) => {
+  const [hasUpdate, setUpdate] = useState(update);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(`/api/article-update-time/${articleId}`);
+        const json = await response.json();
+        return json.article.publishedTime;
+      } catch (err) {
+        // tslint:disable-next-line:no-console
+        console.log(err);
+      }
+    };
+    const interval = setInterval(async () => {
+      (await fetchData()) > updatedTime && setUpdate(true);
+    }, 120000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      {hasUpdate ? (
+        <DelayedComponent delay={delay} initialState={display}>
+          <UpdateButton label={label} handleClick={handleClick} />
+        </DelayedComponent>
+      ) : null}
+    </>
+  );
+};

package/src/components/update-button/update-button.stories.mdx

@@ -0,0 +1,32 @@
+import { Meta, Story, Props } from '@storybook/addon-docs'
+
+import { UpdateButton } from './update-button.tsx';
+
+<Meta
+  title="Components/Misc/UpdateButton"
+  component={UpdateButton}
+/>
+
+# UpdateButton component
+The `UpdateButton` component is used to highlight when there is an update.
+
+This component takes in a two props, loading to display the loading spinner, arrowUp - determines the position of the arrow Icon, label - which determines the text content of the button, and handleClick which is the function called upon clicking the button. 
+
+## Props
+<Props of={UpdateButton} />
+
+## Code Example
+`<UpdateButton loading={loading} label='New updates', arrowUp={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 UpdateButtonStory = ({ loading, label, arrowUp }) => (
+    <UpdateButton loading={loading} label={label} arrowUp={arrowUp} />
+);
+
+<Story name="UpdateButton"
+  args={{ loading: false, label: 'New Updates', arrowUp: true} }
+>
+  {UpdateButtonStory.bind({})}
+</Story>

package/src/components/update-button/update-button.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import FilledArrowIcon from './assets/FilledArrowIcon';
+import { StyledButton } from './styles';
+
+type UpdateButtonProps = {
+  label: string;
+  handleClick: () => void;
+};
+
+export const UpdateButton = ({ label, handleClick }: UpdateButtonProps) => {
+  return (
+    <StyledButton onClick={() => handleClick()}>
+      <FilledArrowIcon data-testid="upward-arrow" />
+      {label}
+    </StyledButton>
+  );
+};

package/src/fixtures/article-harness/__tests__/__snapshots__/articleHarness.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render ArticleHarness renders the ArticleHarness 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa glDQbs"
+  >
+    <div
+      class="sc-bwzfXH fBhOFq"
+    >
+      <div
+        class="sc-htpNat sc-bxivhb gakSZq"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quis purus eget consequat. Maecenas pellentesque lorem at ipsum egestas sagittis. Quisque eget nisi sed diam auctor luctus. Pellentesque rutrum sem nibh, at placerat elit iaculis in. Curabitur nec turpis nec nisi pulvinar pharetra.
+      </div>
+      <div
+        class="sc-htpNat sc-bxivhb gakSZq"
+      >
+        Aenean hendrerit erat non augue sagittis rhoncus. Praesent diam lacus, vehicula ut ante et, cursus finibus justo. Curabitur sollicitudin turpis nec diam ullamcorper, sed fermentum diam tempor. Integer maximus ultrices sem, eu facilisis magna condimentum ut. Curabitur orci odio, ornare in ipsum quis, cursus scelerisque sem.
+      </div>
+      <div
+        class="sc-htpNat sc-bxivhb gakSZq"
+      >
+        Maecenas ultricies risus at libero vulputate, non accumsan ex iaculis. In vel facilisis sapien. Nam imperdiet, elit a mattis consectetur, ex purus efficitur eros, nec condimentum mi tortor facilisis orci. Donec sodales felis tortor, ut dignissim turpis rhoncus ut. Quisque lacinia ornare tortor at convallis.
+      </div>
+      <div
+        class="sc-htpNat sc-bxivhb gakSZq"
+      >
+        Praesent ac elit quis metus vulputate facilisis. Quisque ac dolor eu felis pharetra dignissim. Sed tristique egestas sollicitudin. Nulla varius, risus ornare tristique lobortis, est libero vestibulum diam, nec mollis turpis ligula eget nibh. Praesent facilisis sem lectus, et consectetur sem fringilla non. Pellentesque condimentum est sed nisl porttitor ultricies.
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/fixtures/article-harness/__tests__/articleHarness.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { ArticleHarness } from '../ArticleHarness';
+
+describe('Render ArticleHarness', () => {
+  it('renders the ArticleHarness', () => {
+    const { asFragment } = render(<ArticleHarness />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/index.ts

@@ -1,4 +1,12 @@
 // General Components
+export {
+  BreakingArticleFlag,
+  LiveArticleFlag
+} from './components/article-flag/LiveArticleFlag';
+export {
+  TrackingContext,
+  TrackingContextProvider
+} from './helpers/tracking/TrackingContextProvider';
 export { InArticlePuff } from './components/in-article-puff/InArticlePuff';
 export { InfoCard } from './components/in-article-info-card/InfoCard';
 export { GalleryCarousel } from './components/carousel/GalleryCarousel';
@@ -6,10 +14,6 @@ export {
   InfoCardBulletPoints
 } from './components/in-article-info-card-bulletpoints/InfoCardBulletPoints';
 export { BigNumbers } from './components/in-article-big-numbers/BigNumbers';
-export {
-  BreakingArticleFlag,
-  LiveArticleFlag
-} from './components/article-flag/LiveArticleFlag';
 export {
   ArticleFlag,
   ArticleFlags,
@@ -21,6 +25,13 @@ export {
 } from './components/article-flag/ArticleFlag';
 export { Timelines } from './components/in-article-timelines/Timelines';
 export { SaveStar } from './components/save-star/SaveStar';
+export { Breadcrumb } from './components/breadcrumb/breadcrumb';
+export { UpdateButton } from './components/update-button/update-button';
+export {
+  UpdateButtonWithDelay
+} from './components/update-button/update-button-with-delay';
+export { Banner } from './components/banner/banner';
+export { JobTitle } from './components/job-title/job-title';
 
 // Newsletter Components
 export {
@@ -83,9 +94,6 @@ export { FetchProvider } from './helpers/fetch/FetchProvider';
 export {
   ViewCountWrapper
 } from './helpers/view-count-wrapper/ViewCountWrapper';
-export {
-  TrackingContextProvider
-} from './helpers/tracking/TrackingContextProvider';
 
 export { HiddenDiv } from './components/common-styles';
 export { InlineMessage } from './components/inline-message/InlineMessage';

package/tsconfig.json

@@ -9,6 +9,7 @@
     "declaration": true,
     "inlineSourceMap": true,
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    "resolveJsonModule": true,
 
     "strict": true /* Enable all strict type-checking options. */,
 
@@ -40,7 +41,11 @@
 
     "lib": ["es6", "dom", "es2017", "dom.iterable"],
     "types": ["jest"],
-    "typeRoots": ["node_modules/@types", "src/types", "../../node_modules/@types"]
+    "typeRoots": [
+      "node_modules/@types",
+      "src/types",
+      "../../node_modules/@types"
+    ]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules/**"],