@times-components/ts-components 1.16.3 → 1.18.1

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { colours } from '@times-components/styleguide';
+import { LiveArticleFlag, BreakingArticleFlag } from './LiveArticleFlag';
+import {
+  ArticleFlagContainer,
+  ArticleFlagBullet,
+  ArticleFlagTextContainer,
+  FlagPadding,
+  Flags,
+  FlagsContainer
+} from './styles';
+import getActiveFlags from './getActiveFlags';
+
+const ArticleFlag: React.FC<{ color: string; title: string }> = ({
+  color = colours.functional.primary,
+  title
+}) => (
+  <ArticleFlagContainer>
+    <ArticleFlagBullet color={color} />
+    <ArticleFlagTextContainer
+      aria-label={`${title} Flag`}
+      color={color}
+      data-testid={`flag-${title}`}
+    >
+      {title.toLowerCase()}
+    </ArticleFlagTextContainer>
+  </ArticleFlagContainer>
+);
+
+const NewArticleFlag: React.FC = () => (
+  <ArticleFlag color={colours.functional.articleFlagNew} title="new" />
+);
+
+const UpdatedArticleFlag: React.FC = () => (
+  <ArticleFlag color={colours.functional.articleFlagUpdated} title="updated" />
+);
+
+const ExclusiveArticleFlag: React.FC = () => (
+  <ArticleFlag
+    color={colours.functional.articleFlagExclusive}
+    title="exclusive"
+  />
+);
+
+const SponsoredArticleFlag: React.FC = () => (
+  <ArticleFlag color={colours.functional.tertiary} title="sponsored" />
+);
+
+const LongReadArticleFlag: React.FC = () => (
+  <ArticleFlag color={colours.functional.secondary} title="long read" />
+);
+
+const flagsMapping = () =>
+  new Map([
+    ['NEW', <NewArticleFlag />],
+    ['LIVE', <LiveArticleFlag />],
+    ['BREAKING', <BreakingArticleFlag />],
+    ['UPDATED', <UpdatedArticleFlag />],
+    ['EXCLUSIVE', <ExclusiveArticleFlag />],
+    ['SPONSORED', <SponsoredArticleFlag />],
+    ['LONGREAD', <LongReadArticleFlag />]
+  ]);
+
+export type FlagType = Array<{
+  expiryTime: string | null;
+  type: string;
+}>;
+
+const FlagsView: React.FC<{ allFlags: FlagType }> = ({ allFlags }) => {
+  return (
+    <Flags>
+      {allFlags.map(flag => (
+        <FlagPadding key={flag.type} allFlags={allFlags}>
+          {flagsMapping().get(flag.type)}
+        </FlagPadding>
+      ))}
+    </Flags>
+  );
+};
+
+const ArticleFlags: React.FC<{
+  flags: FlagType;
+  longRead: boolean;
+  withContainer: boolean;
+}> = ({ flags = [], longRead = false, withContainer = false }) => {
+  const activeFlags = getActiveFlags(flags);
+  const allFlags = [
+    ...activeFlags,
+    ...(longRead ? [{ expiryTime: null, type: 'LONGREAD' }] : [])
+  ];
+
+  if (!allFlags.length) {
+    return null;
+  }
+
+  if (!withContainer) {
+    return <FlagsView allFlags={allFlags} />;
+  }
+
+  return (
+    <FlagsContainer>
+      <FlagsView allFlags={allFlags} />
+    </FlagsContainer>
+  );
+};
+
+export default ArticleFlag;
+
+export {
+  getActiveFlags,
+  ArticleFlag,
+  ArticleFlags,
+  NewArticleFlag,
+  UpdatedArticleFlag,
+  ExclusiveArticleFlag,
+  SponsoredArticleFlag,
+  LongReadArticleFlag
+};

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

@@ -1,9 +1,21 @@
 import React from 'react';
-import { Container, BulletContainer, Title } from './styles';
+import {
+  LiveArticleFlagContainer,
+  LiveDiamondContainer,
+  LiveArticleFlagTextContainer
+} from './styles';
+
+export const BaseLiveArticleFlag: React.FC<{ title: string }> = ({ title }) => (
+  <LiveArticleFlagContainer>
+    <LiveDiamondContainer>{'\u25c6'}</LiveDiamondContainer>
+    <LiveArticleFlagTextContainer>{title}</LiveArticleFlagTextContainer>
+  </LiveArticleFlagContainer>
+);
 
 export const LiveArticleFlag: React.FC = () => (
-  <Container>
-    <BulletContainer>{'\u25c6'}</BulletContainer>
-    <Title>LIVE</Title>
-  </Container>
+  <BaseLiveArticleFlag title="LIVE" />
+);
+
+export const BreakingArticleFlag: React.FC = () => (
+  <BaseLiveArticleFlag title="BREAKING" />
 );

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

@@ -0,0 +1,111 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  ArticleFlag,
+  ArticleFlags,
+  NewArticleFlag,
+  UpdatedArticleFlag,
+  ExclusiveArticleFlag,
+  SponsoredArticleFlag,
+  LongReadArticleFlag
+} from '../ArticleFlag';
+import mockDate from 'mockdate';
+
+jest.mock('@times-components/ts-components', () => ({
+  __esModule: true,
+  ...jest.requireActual('@times-components/ts-components'),
+  LiveArticleFlag: 'LiveArticleFlag'
+}));
+
+describe('ArticleFlag', () => {
+  //  GMT: Thursday, 14 March 2019 16:22:54
+  beforeEach(() => {
+    mockDate.set(1552580574000);
+  });
+
+  afterEach(() => {
+    mockDate.reset();
+  });
+  it('renders an article flag', () => {
+    const { baseElement } = render(
+      <ArticleFlag title="No Colour" color={''} />
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders a red article flag', () => {
+    const { baseElement } = render(
+      <ArticleFlag color="red" title="Coloured Red" />
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the new article flag', () => {
+    const { baseElement, getByText } = render(<NewArticleFlag />);
+    expect(getByText('new')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the updated article flag', () => {
+    const { baseElement, getByText } = render(<UpdatedArticleFlag />);
+    expect(getByText('updated')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the exclusive article flag', () => {
+    const { baseElement, getByText } = render(<ExclusiveArticleFlag />);
+    expect(getByText('exclusive')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the sponsored article flag', () => {
+    const { baseElement, getByText } = render(<SponsoredArticleFlag />);
+    expect(getByText('sponsored')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders the long read article flag', () => {
+    const { baseElement, getByText } = render(<LongReadArticleFlag />);
+    expect(getByText('long read')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('renders multiple article flags', () => {
+    const { baseElement } = render(
+      <ArticleFlags
+        flags={[
+          { expiryTime: '2030-03-13T12:00:00.000Z', type: 'UPDATED' },
+          { expiryTime: '2030-03-14T12:00:00.000Z', type: 'EXCLUSIVE' },
+          { expiryTime: '2030-03-14T12:00:00.000Z', type: 'NEW' },
+          { expiryTime: '2030-03-14T12:00:00.000Z', type: 'SPONSORED' }
+        ]}
+        longRead
+        withContainer={false}
+      />
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('renders multiple article flags in a container', () => {
+    const { baseElement } = render(
+      <ArticleFlags
+        flags={[
+          { expiryTime: '2030-03-13T12:00:00.000Z', type: 'UPDATED' },
+          { expiryTime: '2030-03-14T12:00:00.000Z', type: 'EXCLUSIVE' },
+          { expiryTime: '2030-03-14T12:00:00.000Z', type: 'NEW' },
+          { expiryTime: '2030-03-14T12:00:00.000Z', type: 'SPONSORED' }
+        ]}
+        longRead
+        withContainer
+      />
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('does not render article flags if there are none', () => {
+    const { baseElement } = render(
+      <ArticleFlags flags={[]} longRead={false} withContainer={false} />
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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

@@ -2,10 +2,26 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { LiveArticleFlag } from '../LiveArticleFlag';
+import {
+  BaseLiveArticleFlag,
+  BreakingArticleFlag,
+  LiveArticleFlag
+} from '../LiveArticleFlag';
 
-describe('<LiveArticleFlag>', () => {
-  it('should render the component', () => {
+describe('LiveArticleFlag', () => {
+  it('should render the base live article flag', () => {
+    const { baseElement, getByText } = render(
+      <BaseLiveArticleFlag title="BASE" />
+    );
+    expect(getByText('BASE')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render the breaking article flag', () => {
+    const { baseElement, getByText } = render(<BreakingArticleFlag />);
+    expect(getByText('BREAKING')).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render the live article flag', () => {
     const { baseElement, getByText } = render(<LiveArticleFlag />);
     expect(getByText('LIVE')).toBeTruthy();
     expect(baseElement).toMatchSnapshot();

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

@@ -0,0 +1,394 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArticleFlag does not render article flags if there are none 1`] = `
+<body>
+  <div />
+</body>
+`;
+
+exports[`ArticleFlag renders a red article flag 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa fXEEbM"
+    >
+      <div
+        class="sc-htpNat ZOZQE"
+        color="red"
+      />
+      <div
+        aria-label="Coloured Red Flag"
+        class="sc-ifAKCX dTECV"
+        color="red"
+        data-testid="flag-Coloured Red"
+      >
+        coloured red
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleFlag renders an article flag 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa fXEEbM"
+    >
+      <div
+        class="sc-htpNat qvwfW"
+        color=""
+      />
+      <div
+        aria-label="No Colour Flag"
+        class="sc-ifAKCX juPnZa"
+        color=""
+        data-testid="flag-No Colour"
+      >
+        no colour
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleFlag renders multiple article flags 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-gzVnrw kpMYNz"
+    >
+      <div
+        class="sc-bZQynM fMCtl"
+      >
+        <div
+          class="sc-bdVaJa fXEEbM"
+        >
+          <div
+            class="sc-htpNat fugARQ"
+            color="#3C81BE"
+          />
+          <div
+            aria-label="updated Flag"
+            class="sc-ifAKCX hSeRZN"
+            color="#3C81BE"
+            data-testid="flag-updated"
+          >
+            updated
+          </div>
+        </div>
+      </div>
+      <div
+        class="sc-bZQynM fMCtl"
+      >
+        <div
+          class="sc-bdVaJa fXEEbM"
+        >
+          <div
+            class="sc-htpNat dZoUoM"
+            color="#C51D24"
+          />
+          <div
+            aria-label="exclusive Flag"
+            class="sc-ifAKCX fupmhj"
+            color="#C51D24"
+            data-testid="flag-exclusive"
+          >
+            exclusive
+          </div>
+        </div>
+      </div>
+      <div
+        class="sc-bZQynM fMCtl"
+      >
+        <div
+          class="sc-bdVaJa fXEEbM"
+        >
+          <div
+            class="sc-htpNat jkDJOE"
+            color="#E34605"
+          />
+          <div
+            aria-label="new Flag"
+            class="sc-ifAKCX iquuBv"
+            color="#E34605"
+            data-testid="flag-new"
+          >
+            new
+          </div>
+        </div>
+      </div>
+      <div
+        class="sc-bZQynM fMCtl"
+      >
+        <div
+          class="sc-bdVaJa fXEEbM"
+        >
+          <div
+            class="sc-htpNat gaRHEk"
+            color="#4D4D4D"
+          />
+          <div
+            aria-label="sponsored Flag"
+            class="sc-ifAKCX fzZyiZ"
+            color="#4D4D4D"
+            data-testid="flag-sponsored"
+          >
+            sponsored
+          </div>
+        </div>
+      </div>
+      <div
+        class="sc-bZQynM fMCtl"
+      >
+        <div
+          class="sc-bdVaJa fXEEbM"
+        >
+          <div
+            class="sc-htpNat fRxTiY"
+            color="#696969"
+          />
+          <div
+            aria-label="long read Flag"
+            class="sc-ifAKCX cRBzVF"
+            color="#696969"
+            data-testid="flag-long read"
+          >
+            long read
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleFlag renders multiple article flags in a container 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-htoDjs gNxXwX"
+    >
+      <div
+        class="sc-gzVnrw kpMYNz"
+      >
+        <div
+          class="sc-bZQynM fMCtl"
+        >
+          <div
+            class="sc-bdVaJa fXEEbM"
+          >
+            <div
+              class="sc-htpNat fugARQ"
+              color="#3C81BE"
+            />
+            <div
+              aria-label="updated Flag"
+              class="sc-ifAKCX hSeRZN"
+              color="#3C81BE"
+              data-testid="flag-updated"
+            >
+              updated
+            </div>
+          </div>
+        </div>
+        <div
+          class="sc-bZQynM fMCtl"
+        >
+          <div
+            class="sc-bdVaJa fXEEbM"
+          >
+            <div
+              class="sc-htpNat dZoUoM"
+              color="#C51D24"
+            />
+            <div
+              aria-label="exclusive Flag"
+              class="sc-ifAKCX fupmhj"
+              color="#C51D24"
+              data-testid="flag-exclusive"
+            >
+              exclusive
+            </div>
+          </div>
+        </div>
+        <div
+          class="sc-bZQynM fMCtl"
+        >
+          <div
+            class="sc-bdVaJa fXEEbM"
+          >
+            <div
+              class="sc-htpNat jkDJOE"
+              color="#E34605"
+            />
+            <div
+              aria-label="new Flag"
+              class="sc-ifAKCX iquuBv"
+              color="#E34605"
+              data-testid="flag-new"
+            >
+              new
+            </div>
+          </div>
+        </div>
+        <div
+          class="sc-bZQynM fMCtl"
+        >
+          <div
+            class="sc-bdVaJa fXEEbM"
+          >
+            <div
+              class="sc-htpNat gaRHEk"
+              color="#4D4D4D"
+            />
+            <div
+              aria-label="sponsored Flag"
+              class="sc-ifAKCX fzZyiZ"
+              color="#4D4D4D"
+              data-testid="flag-sponsored"
+            >
+              sponsored
+            </div>
+          </div>
+        </div>
+        <div
+          class="sc-bZQynM fMCtl"
+        >
+          <div
+            class="sc-bdVaJa fXEEbM"
+          >
+            <div
+              class="sc-htpNat fRxTiY"
+              color="#696969"
+            />
+            <div
+              aria-label="long read Flag"
+              class="sc-ifAKCX cRBzVF"
+              color="#696969"
+              data-testid="flag-long read"
+            >
+              long read
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleFlag renders the exclusive article flag 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa fXEEbM"
+    >
+      <div
+        class="sc-htpNat dZoUoM"
+        color="#C51D24"
+      />
+      <div
+        aria-label="exclusive Flag"
+        class="sc-ifAKCX fupmhj"
+        color="#C51D24"
+        data-testid="flag-exclusive"
+      >
+        exclusive
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleFlag renders the long read article flag 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa fXEEbM"
+    >
+      <div
+        class="sc-htpNat fRxTiY"
+        color="#696969"
+      />
+      <div
+        aria-label="long read Flag"
+        class="sc-ifAKCX cRBzVF"
+        color="#696969"
+        data-testid="flag-long read"
+      >
+        long read
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleFlag renders the new article flag 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa fXEEbM"
+    >
+      <div
+        class="sc-htpNat jkDJOE"
+        color="#E34605"
+      />
+      <div
+        aria-label="new Flag"
+        class="sc-ifAKCX iquuBv"
+        color="#E34605"
+        data-testid="flag-new"
+      >
+        new
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleFlag renders the sponsored article flag 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa fXEEbM"
+    >
+      <div
+        class="sc-htpNat gaRHEk"
+        color="#4D4D4D"
+      />
+      <div
+        aria-label="sponsored Flag"
+        class="sc-ifAKCX fzZyiZ"
+        color="#4D4D4D"
+        data-testid="flag-sponsored"
+      >
+        sponsored
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`ArticleFlag renders the updated article flag 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa fXEEbM"
+    >
+      <div
+        class="sc-htpNat fugARQ"
+        color="#3C81BE"
+      />
+      <div
+        aria-label="updated Flag"
+        class="sc-ifAKCX hSeRZN"
+        color="#3C81BE"
+        data-testid="flag-updated"
+      >
+        updated
+      </div>
+    </div>
+  </div>
+</body>
+`;