@times-components/ts-components 1.98.1 → 1.98.2-alpha.7

package/src/assets/CloseIconBlack.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const CloseIconBlack: React.FC<any> = ({
+  width = 24,
+  height = 24,
+  color = '#000',
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 14 14"
+    fill="none"
+    {...props}
+  >
+    <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={color}
+    />
+  </svg>
+);
+
+export default CloseIconBlack;

package/src/assets/EmailIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const EmailIcon: React.FC<any> = ({
+  width = 24,
+  height = 24,
+  color = '#000',
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M22 9.98V19C22 20.1 21.1 21 20 21H4C2.9 21 2 20.1 2 19L2.01 7C2.01 5.9 2.9 5 4 5H14.1C14.04 5.32 14 5.66 14 6C14 6.34 14.04 6.68 14.1 7H4L12 12L15.67 9.71C16.14 10.14 16.69 10.47 17.3 10.69L12 14L4 9V19H20V10.9C20.74 10.75 21.42 10.42 22 9.98ZM16 6C16 7.66 17.34 9 19 9C20.66 9 22 7.66 22 6C22 4.34 20.66 3 19 3C17.34 3 16 4.34 16 6Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default EmailIcon;

package/src/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/assets/icons.stories.mdx

@@ -0,0 +1 @@
+overrides={{size: "sizing050"}}

package/src/assets/index.tsx

@@ -0,0 +1,3 @@
+export { default as CloseIconBlack } from './CloseIconBlack';
+export { default as EmailIcon } from './EmailIcon';
+export { default as FilledArrowIcon } from './FilledArrowIcon';

package/src/components/banner/__tests__/__snapshots__/banner.test.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner renders the banner 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdVaJa VUwsZ"
+  >
+    <div
+      aria-label="Email verification banner"
+      class="sc-bwzfXH eWmkTr"
+    >
+      <div
+        class="sc-htpNat kKgziG"
+        role="region"
+      >
+        <div
+          class="sc-bxivhb iVoVQA"
+        >
+          <div
+            class="sc-ifAKCX fBzQxS"
+          >
+            <svg
+              fill="none"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M22 9.98V19C22 20.1 21.1 21 20 21H4C2.9 21 2 20.1 2 19L2.01 7C2.01 5.9 2.9 5 4 5H14.1C14.04 5.32 14 5.66 14 6C14 6.34 14.04 6.68 14.1 7H4L12 12L15.67 9.71C16.14 10.14 16.69 10.47 17.3 10.69L12 14L4 9V19H20V10.9C20.74 10.75 21.42 10.42 22 9.98ZM16 6C16 7.66 17.34 9 19 9C20.66 9 22 7.66 22 6C22 4.34 20.66 3 19 3C17.34 3 16 4.34 16 6Z"
+                fill="#000"
+              />
+            </svg>
+            <p
+              class="sc-EHOje dMjtnD"
+            >
+              Title
+            </p>
+          </div>
+          <button
+            class="sc-gzVnrw hWbcjJ"
+          >
+            <svg
+              fill="none"
+              height="14"
+              viewBox="0 0 14 14"
+              width="14"
+              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="#000"
+              />
+            </svg>
+          </button>
+        </div>
+        <p
+          class="sc-bZQynM jtrtRX"
+        >
+          Body
+        </p>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/banner/__tests__/banner.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { Banner } from '../banner';
+
+describe('Banner', () => {
+  it('renders the banner', () => {
+    const { asFragment } = render(
+      <Banner title="Title" body="Body" onClose={jest.fn} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/banner/banner.stories.mdx

@@ -0,0 +1,30 @@
+import { Meta, Story, Props } from '@storybook/addon-docs'
+
+import { Banner } from './banner';
+
+<Meta
+  title="Components/Misc/Banner"
+  component={Banner}
+/>
+
+# Banner component
+The `Banner` component is used to show and hide related content.
+
+This component takes in a two props, as below, to display text based content.
+
+## Props
+<Props of={Banner} />
+
+## Code Example
+`<Banner />`
+
+## 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 BannerStory = ({ group }) => (
+    <Banner title="Banner title" body="Banner message" onClose={() => console.log('close')} />
+);
+
+<Story name="Banner">
+  {BannerStory.bind({})}
+</Story>

package/src/components/banner/banner.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  Body,
+  CloseIconWrapper,
+  Title,
+  TitleWrapper,
+  Wrapper,
+  StyledBanner,
+  BannerWrapper,
+  BannerContentWrapper
+} from './styles';
+import { CloseIconBlack, EmailIcon } from '../../assets';
+
+type Props = {
+  onClose: () => void;
+  title: string;
+  body: string;
+};
+
+export const Banner: React.FC<Props> = ({ title, body, onClose }) => {
+  return (
+    <BannerWrapper>
+      <StyledBanner aria-label="Email verification banner">
+        <BannerContentWrapper role="region">
+          <Wrapper>
+            <TitleWrapper>
+              <EmailIcon />
+              <Title>{title}</Title>
+            </TitleWrapper>
+            <CloseIconWrapper onClick={onClose}>
+              <CloseIconBlack width={14} height={14} />
+            </CloseIconWrapper>
+          </Wrapper>
+          <Body>{body}</Body>
+        </BannerContentWrapper>
+      </StyledBanner>
+    </BannerWrapper>
+  );
+};

package/src/components/banner/styles.ts

@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+import { breakpoints } from '@times-components/ts-styleguide';
+
+export const BannerWrapper = styled.div`
+  max-width: 498px;
+  box-shadow: 0px 16px 24px 0px rgba(17, 17, 17, 0.08);
+  z-index: 100;
+  width: 100%;
+`;
+
+export const StyledBanner = styled.div`
+  border-top: 3px solid #005c8a;
+  background-color: #fff;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 16px;
+  padding-block: 12px;
+  padding-right: 16px;
+  @media screen and (min-width: ${breakpoints.wide}px) {
+    padding-block: 10px;
+  }
+  @media screen and (min-width: ${breakpoints.medium}px) {
+    padding-right: 30px;
+  }
+`;
+
+export const BannerContentWrapper = styled.div`
+  flex-direction: inherit;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 12px;
+  @media screen and (min-width: ${breakpoints.medium}px) {
+    margin-bottom: 8px;
+  }
+`;
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+
+export const Title = styled.p`
+  color: #333;
+  font-weight: 700;
+  margin: 0 0 0 16px;
+  font-size: 24px;
+  line-height: 27px;
+  font-family: 'Times Modern';
+  letter-spacing: 0em;
+  @media (max-width: ${breakpoints.medium}px) {
+    font-size: 18px;
+    line-height: 20px;
+  }
+`;
+
+export const Body = styled.p`
+  color: #696969;
+  font-weight: 400;
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+  font-family: 'Roboto';
+  letter-spacing: 0em;
+  @media (max-width: ${breakpoints.medium}px) {
+    font-size: 14px;
+    line-height: 21px;
+  }
+`;
+
+export const CloseIconWrapper = styled.button`
+  background: #fff;
+  border: none;
+  cursor: pointer;
+`;

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

@@ -0,0 +1,29 @@
+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/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,73 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import { UpdateButtonWithDelay, fetchData } 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();
+  });
+  it('should not error on fetch with a valid articleId', async () => {
+    await expect(fetchData('12345')).resolves.not.toThrowError();
+  });
+  it('should return the publishedTime on fetch with a valid articleId', async () => {
+    expect(fetchData('12345')).not.toBeUndefined();
+  });
+});

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/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>