@times-components/ts-components 1.16.2 → 1.18.0

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import {
+  NewArticleFlag,
+  UpdatedArticleFlag,
+  ExclusiveArticleFlag,
+  SponsoredArticleFlag,
+  LongReadArticleFlag,
+  ArticleFlags
+} from './ArticleFlag';
+import { LiveArticleFlag, BreakingArticleFlag } from './LiveArticleFlag';
+
+storiesOf('Typescript Component/Article Flag', module)
+  .add('Article Flag (New)', () => <NewArticleFlag />)
+  .add('Article Flag (Live)', () => <LiveArticleFlag />)
+  .add('Article Flag (Breaking)', () => <BreakingArticleFlag />)
+  .add('Article Flag (Updated)', () => <UpdatedArticleFlag />)
+  .add('Article Flag (Exclusive)', () => <ExclusiveArticleFlag />)
+  .add('Article Flag (Sponsored)', () => <SponsoredArticleFlag />)
+  .add('Article Flag (Long Read)', () => <LongReadArticleFlag />)
+  .add('Article Flags', () => (
+    <ArticleFlags
+      flags={[
+        { expiryTime: '2030-03-13T12:00:00.000Z', type: 'LIVE' },
+        { expiryTime: '2030-03-13T12:00:00.000Z', type: 'BREAKING' },
+        { 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}
+    />
+  ))
+  .add('Article Flags with Container', () => (
+    <ArticleFlags
+      flags={[
+        { expiryTime: '2030-03-13T12:00:00.000Z', type: 'LIVE' },
+        { expiryTime: '2030-03-13T12:00:00.000Z', type: 'BREAKING' },
+        { 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
+    />
+  ));

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();