@times-components/ts-components 1.100.1 → 1.100.2-alpha.1

package/src/components/article-flag/ArticleFlag.tsx

@@ -10,6 +10,7 @@ import {
   FlagsContainer
 } from './styles';
 import getActiveFlags from './getActiveFlags';
+import { FlagType } from './types';
 
 const ArticleFlag: React.FC<{ color?: string; title: string }> = ({
   color = colours.functional.primary,
@@ -66,11 +67,6 @@ const flagsMapping = (override = '') => {
   ]);
 };
 
-export type FlagType = Array<{
-  expiryTime: string | null;
-  type: string;
-}>;
-
 const FlagsView: React.FC<{ allFlags: FlagType; overrideColor?: string }> = ({
   allFlags,
   overrideColor = ''

package/src/components/article-flag/__tests__/ArticleFlag.test.tsx

@@ -19,7 +19,7 @@ jest.mock('@times-components/ts-components', () => ({
 }));
 
 describe('ArticleFlag', () => {
-  //  GMT: Thursday, 14 March 2019 16:22:54
+  //  GMT : Thursday, 14 March 2019 16:22:54
   beforeEach(() => {
     mockDate.set(1552580574000);
   });

package/src/components/article-flag/getActiveFlags.ts

@@ -1,4 +1,4 @@
-import { FlagType } from './ArticleFlag';
+import { FlagType } from './types';
 
 const getActiveArticleFlags: (flags: FlagType) => FlagType = flags => {
   if (!flags) {

package/src/components/article-flag/styles.ts

@@ -1,6 +1,6 @@
 import styled, { keyframes } from 'styled-components';
 import { fonts } from '@times-components/ts-styleguide';
-import { FlagType } from './ArticleFlag';
+import { FlagType } from './types';
 import { gqlRgbaToStyle } from '@times-components/utils';
 
 export const LiveArticleFlagContainer = styled.div`

package/src/components/article-flag/types.ts

@@ -0,0 +1,4 @@
+export type FlagType = Array<{
+  expiryTime: string | null;
+  type: string;
+}>;

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/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/components/banner/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/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,40 @@
+import React from 'react';
+import {
+  Body,
+  CloseIconWrapper,
+  Title,
+  TitleWrapper,
+  Wrapper,
+  StyledBanner,
+  BannerWrapper,
+  BannerContentWrapper
+} from './styles';
+import CloseIconBlack from './assets/CloseIconBlack';
+import EmailIcon from './assets/EmailIcon';
+
+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/breadcrumb/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render Breadcrumbs should render a snapshot 1`] = `
+<DocumentFragment>
+  <nav
+    aria-label="breadcrumbs"
+    class="sc-bwzfXH jIEWCi"
+  >
+    <a
+      aria-current="false"
+      class="sc-bdVaJa gZsChJ"
+      href="/sport"
+    >
+      Sport
+    </a>
+    <div
+      class="sc-htpNat jVxkgC"
+    >
+      <svg
+        color="#aaaaaa"
+        fill="none"
+        height="16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m6.667 4-.94.94L8.78 8l-3.053 3.06.94.94 4-4-4-4Z"
+          fill="#aaaaaa"
+        />
+      </svg>
+    </div>
+    <a
+      aria-current="false"
+      class="sc-bdVaJa gZsChJ"
+      href="/sport/tennis"
+    >
+      Tennis
+    </a>
+    <div
+      class="sc-htpNat jVxkgC"
+    >
+      <svg
+        color="#aaaaaa"
+        fill="none"
+        height="16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m6.667 4-.94.94L8.78 8l-3.053 3.06.94.94 4-4-4-4Z"
+          fill="#aaaaaa"
+        />
+      </svg>
+    </div>
+    <a
+      aria-current="page"
+      class="sc-bdVaJa gItCja"
+      href="/australian open"
+    >
+      Australian Open
+    </a>
+  </nav>
+</DocumentFragment>
+`;

package/src/components/breadcrumb/__tests__/index.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import { Breadcrumb } from '../breadcrumb';
+import { breadcrumbItems } from '../fixtures/breadcrumbs.json';
+import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
+
+describe('Render Breadcrumbs', () => {
+  const renderBreadcrumb = (analyticsStream?: (event: any) => void) =>
+    render(
+      <TrackingContextProvider
+        context={{
+          component: 'breadcrumb',
+          attrs: {}
+        }}
+        analyticsStream={analyticsStream}
+      >
+        <Breadcrumb data={breadcrumbItems} />
+      </TrackingContextProvider>
+    );
+  it('should render a snapshot', () => {
+    const { asFragment } = renderBreadcrumb();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render the component', () => {
+    const { getByText } = renderBreadcrumb();
+    const getBreadcrumb = getByText('Tennis');
+    expect(getBreadcrumb).toBeInTheDocument();
+  });
+
+  it('items should have link with href', () => {
+    const { getAllByRole } = renderBreadcrumb();
+    const title = getAllByRole('link')[0];
+    expect(title).toHaveAttribute('href', '/sport');
+  });
+
+  it('last breadcrumb should be selected', () => {
+    const { getAllByRole } = renderBreadcrumb();
+    const title = getAllByRole('link')[2];
+    expect(title).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('calls analyticsStream when you click', () => {
+    const analyticsStream = jest.fn();
+    const { getByText } = renderBreadcrumb(analyticsStream);
+    const breadcrumb = getByText('Tennis');
+    fireEvent.click(breadcrumb);
+    expect(analyticsStream).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/breadcrumb/assets/BreadcrumbIcon.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+const BreadcrumbIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill={props.color}
+      d="m6.667 4-.94.94L8.78 8l-3.053 3.06.94.94 4-4-4-4Z"
+    />
+  </svg>
+);
+export default BreadcrumbIcon;

package/src/components/breadcrumb/breadcrumb.stories.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story, Props } from '@storybook/addon-docs'
+import { Breadcrumb } from './breadcrumb.tsx';
+import { breadcrumbItems, breadcrumbItemsForTrackingDemo } from './fixtures/breadcrumbs.json';
+import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
+import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
+
+<Meta
+  title="Components/Navigation/Breadcrumb"
+  component={Breadcrumb}
+/>
+
+# Breadcrumb component
+The `Breadcrumb` component displays your hierarchical position on the website.
+
+This takes in a `data` prop, as below, to display the links in their order within the data object.
+
+## Props
+<Props of={Breadcrumb} />
+
+## Code Example
+`<Breadcrumb data={data} />`
+
+An example of the `data` structure can be found in the 'Controls' section on the 'Canvas' tab, where you can customise the data being fed to the Breadcrumb component.
+
+## 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 BreadcrumbStory = ({ data }) => (
+  <TrackingContextProvider
+      analyticsStream={analyticsStream}
+      context={{
+        component: 'breadcrumb',
+        attrs: {
+        }
+      }}
+    >
+    <Breadcrumb {...{ data }} />
+  </TrackingContextProvider>
+);
+
+<Story name="Breadcrumb" args={{ data: breadcrumbItems }}>
+  {BreadcrumbStory.bind({})}
+</Story>
+
+<Story name="Breadcrumb - tracking demo" args={{ data: breadcrumbItemsForTrackingDemo }}>
+  {BreadcrumbStory.bind({})}
+</Story>

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Breadcrumbs, BreadcrumbItem, IconContainer, styleMap } from './styles';
+import BreadcrumbIcon from './assets/BreadcrumbIcon';
+import {
+  TrackingContext,
+  TrackingContextProvider
+} from '../../helpers/tracking/TrackingContextProvider';
+
+type BreadcrumbsItem = {
+  title: string;
+  url?: string;
+};
+
+type BreadcrumbProps = {
+  data: BreadcrumbsItem[];
+};
+
+export const Breadcrumb = ({ data }: BreadcrumbProps) => {
+  const clickEvent = (title: string) => ({
+    object: 'Breadcrumb',
+    action: 'Clicked',
+    attrs: {
+      event_navigation_action: 'navigation',
+      event_navigation_name: 'header:selection',
+      event_navigation_browsing_method: 'click',
+      article_parent_name: `breadcrumb : ${title}`
+    }
+  });
+
+  const handleClick = (
+    fireAnalyticsEvent: (evt: TrackingContext) => void,
+    title: string
+  ) => {
+    fireAnalyticsEvent && fireAnalyticsEvent(clickEvent(title));
+  };
+
+  const getBreadcrumbSeparator = (index: number, arr: any[]) =>
+    index < arr.length - 1;
+
+  return (
+    <TrackingContextProvider>
+      {({ fireAnalyticsEvent }) => (
+        <Breadcrumbs aria-label="breadcrumbs">
+          {data.map((breadcrumbItem, breadcrumbIndex, breadcrumbArr) => {
+            const showSeparator = getBreadcrumbSeparator(
+              breadcrumbIndex,
+              breadcrumbArr
+            );
+            return showSeparator ? (
+              <>
+                <BreadcrumbItem
+                  key={breadcrumbItem.title}
+                  aria-current="false"
+                  href={breadcrumbItem.url}
+                  selected={false}
+                  onClick={() =>
+                    handleClick(fireAnalyticsEvent, breadcrumbItem.title)
+                  }
+                >
+                  {breadcrumbItem.title}
+                </BreadcrumbItem>
+                <IconContainer>
+                  <BreadcrumbIcon color={styleMap.colors.inkNonEssential} />
+                </IconContainer>
+              </>
+            ) : (
+              <BreadcrumbItem
+                aria-current="page"
+                key={breadcrumbItem.title}
+                href={breadcrumbItem.url}
+                selected={true}
+                onClick={() =>
+                  handleClick(fireAnalyticsEvent, breadcrumbItem.title)
+                }
+              >
+                {breadcrumbItem.title}
+              </BreadcrumbItem>
+            );
+          })}
+        </Breadcrumbs>
+      )}
+    </TrackingContextProvider>
+  );
+};

package/src/components/breadcrumb/fixtures/breadcrumbs.json

@@ -0,0 +1,27 @@
+{
+  "breadcrumbItems": [
+    {
+      "title": "Sport",
+      "url": "/sport"
+    },
+    {
+      "title": "Tennis",
+      "url": "/sport/tennis"
+    },
+    {
+      "title": "Australian Open",
+      "url": "/australian open"
+    }
+  ],
+  "breadcrumbItemsForTrackingDemo": [
+    {
+      "title": "Sport"
+    },
+    {
+      "title": "Tennis"
+    },
+    {
+      "title": "Australian Open"
+    }
+  ]
+}

package/src/components/breadcrumb/styles.ts

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+export const styleMap = {
+  colors: {
+    blue070: '#006699',
+    inkContrast: '#01000d',
+    inkSubtle: '#696969',
+    inkNonEssential: '#aaaaaa'
+  }
+};
+
+export const BreadcrumbItem = styled.a<{ selected: boolean }>`
+color: inherit;
+text-decoration: none;
+display: inline-grid;
+font-family: Roboto-Regular;
+font-size: 12px;
+font-weight: 500;
+line-height: 1.250;
+letter-spacing: 0%;
+font-stretch: normal
+display: inline-grid;
+background-color: transparent;
+min-height: 32px;
+border: none;
+place-content: center;
+color: ${({ selected }) =>
+  selected ? styleMap.colors.inkContrast : styleMap.colors.inkSubtle};
+&:hover {
+  color: ${styleMap.colors.blue070}
+};
+`;
+
+export const Breadcrumbs = styled.nav`
+  display: flex;
+`;
+
+export const IconContainer = styled.div`
+  height: 32px;
+  display: flex;
+  align-items: center;
+  padding-inline: 8px;
+`;