npm - @times-components/ts-components - Versions diffs - 1.16.2 → 1.18.0 - Mend

@times-components/ts-components 1.16.2 → 1.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

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

@@ -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>
+`;

package/src/components/article-flag/__tests__/__snapshots__/LiveArticleFlag.test.tsx.snap CHANGED Viewed

@@ -1,18 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`<LiveArticleFlag> should render the component 1`] = `
+exports[`LiveArticleFlag should render the base live article flag 1`] = `
 <body>
   <div>
     <div
-      class="sc-bdVaJa kEyujV"
+      class="sc-bwzfXH WFEid"
     >
       <div
-        class="sc-bwzfXH htodcl"
+        class="sc-bxivhb hmIbmT"
       >
         ◆
       </div>
       <div
-        class="sc-htpNat gQxwaB"
+        class="sc-EHOje jboioV"
+      >
+        BASE
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`LiveArticleFlag should render the breaking article flag 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bwzfXH WFEid"
+    >
+      <div
+        class="sc-bxivhb hmIbmT"
+      >
+        ◆
+      </div>
+      <div
+        class="sc-EHOje jboioV"
+      >
+        BREAKING
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`LiveArticleFlag should render the live article flag 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bwzfXH WFEid"
+    >
+      <div
+        class="sc-bxivhb hmIbmT"
+      >
+        ◆
+      </div>
+      <div
+        class="sc-EHOje jboioV"
       >
         LIVE
       </div>

package/src/components/article-flag/__tests__/getActiveFlags.test.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import mockDate from 'mockdate';
+import getActiveFlags from '../getActiveFlags';
+describe('get active flags function', () => {
+  //  GMT: Thursday, 14 March 2019 16:22:54
+  beforeEach(() => {
+    mockDate.set(1552580574000);
+  });
+  afterEach(() => {
+    mockDate.reset();
+  });
+  it('returns only active flags', () => {
+    const flags = [
+      { expiryTime: '2020-03-13T12:00:00.000Z', type: 'UPDATED' },
+      { expiryTime: '2019-03-14T12:00:00.000Z', type: 'EXCLUSIVE' }
+    ];
+    expect(getActiveFlags(flags)).toEqual([flags[0]]);
+  });
+  it('returns no flags when all have expired', () => {
+    const flags = [
+      { expiryTime: '2019-03-14T16:22:54.000Z', type: 'UPDATED' },
+      { expiryTime: '2019-03-14T12:00:00.000Z', type: 'EXCLUSIVE' }
+    ];
+    expect(getActiveFlags(flags)).toEqual([]);
+  });
+  it('returns flags when expiry time is null', () => {
+    const flags = [
+      { expiryTime: null, type: 'UPDATED' },
+      { expiryTime: null, type: 'EXCLUSIVE' }
+    ];
+    expect(getActiveFlags(flags)).toEqual(flags);
+  });
+  it('returns no flags when no flags are provided', () => {
+    expect(getActiveFlags([])).toEqual([]);
+  });
+});

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

@@ -0,0 +1,14 @@
+import { FlagType } from './ArticleFlag';
+const getActiveArticleFlags: (flags: FlagType) => FlagType = flags => {
+  if (!flags) {
+    return [];
+  }
+  return flags.filter(
+    flag =>
+      flag.expiryTime === null ||
+      new Date().getTime() < new Date(flag.expiryTime).getTime()
+  );
+};
+export default getActiveArticleFlags;

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

@@ -1,20 +1,44 @@
 import styled from 'styled-components';
 import { fonts } from '@times-components/styleguide';
+import { FlagType } from './ArticleFlag';
+import { gqlRgbaToStyle } from '@times-components/utils';
-export const Container = styled.div`
+export const ArticleFlagContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+`;
+export const LiveArticleFlagContainer = styled.div`
   display: flex;
   padding: 2px 6px;
   background-color: #9f0000;
   align-items: baseline;
 `;
-export const BulletContainer = styled.div`
+export const ArticleFlagBullet = styled.div`
+  border-radius: 2.5px;
+  height: 5px;
+  width: 5px;
+  background-color: ${({ color }) => gqlRgbaToStyle(color) || color};
+`;
+export const LiveDiamondContainer = styled.div`
   margin-right: 4px;
   color: #ffffff;
   line-height: 16px;
 `;
-export const Title = styled.div`
+export const ArticleFlagTextContainer = styled.div`
+  font-family: TimesDigitalW04-RegularSC;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.6px;
+  line-height: 12px;
+  margin-left: 5px;
+  color: ${({ color }) => gqlRgbaToStyle(color) || color};
+`;
+export const LiveArticleFlagTextContainer = styled.div`
   font-family: ${fonts.supporting};
   color: #ffffff;
   font-weight: 500;
@@ -22,3 +46,17 @@ export const Title = styled.div`
   letter-spacing: 0.1em;
   line-height: 16px;
 `;
+export const FlagPadding = styled.div<{ allFlags: FlagType }>`
+  margin-right: ${({ allFlags }) => (allFlags.length > 1 ? '15px' : 0)};
+`;
+export const Flags = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+`;
+export const FlagsContainer = styled.div`
+  margin-bottom: 15px;
+  margin-top: 5px;
+`;

package/src/components/inline-dialog/InlineDialog.stories.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { InlineDialog } from './InlineDialog';
+import { action } from '@storybook/addon-actions';
+storiesOf('Typescript Component/InlineDialog', module).add('default', () => {
+  return (
+    <InlineDialog
+      title="Join the conversation"
+      buttonText="Subscribe Now"
+      onClick={() => action('InlineDialog')('click')}
+    >
+      Commenting is only for subscribers. If you would like to comment, please
+      sign up.
+    </InlineDialog>
+  );
+});

package/src/components/inline-dialog/InlineDialog.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { Container, Title, Description, Button } from './styles';
+export const InlineDialog: FC<{
+  title: string;
+  buttonText: string;
+  href?: string;
+  onClick: () => void;
+}> = ({ title, href = '#', onClick, buttonText, children }) => (
+  <Container>
+    <Title>{title}</Title>
+    <Description>{children}</Description>
+    <Button href={href} onClick={onClick}>
+      {buttonText}
+    </Button>
+  </Container>
+);

package/src/components/inline-dialog/__tests__/InlineDialog.test.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { InlineDialog } from '../InlineDialog';
+describe('<InlineDialog>', () => {
+  it('should render the component', () => {
+    const onClick = jest.fn();
+    const { baseElement, getByText } = render(
+      <InlineDialog title="Title" buttonText="Button" onClick={onClick} />
+    );
+    expect(getByText('Title')).toBeTruthy();
+    const button = getByText('Button');
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalled();
+    expect(button).toBeTruthy();
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package/src/components/inline-dialog/__tests__/__snapshots__/InlineDialog.test.tsx.snap ADDED Viewed

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`<InlineDialog> should render the component 1`] = `
+<body>
+  <div>
+    <div
+      class="sc-bdVaJa dmvPpj"
+    >
+      <div
+        class="sc-bwzfXH mYYIt"
+      >
+        Title
+      </div>
+      <div
+        class="sc-htpNat dBfnu"
+      />
+      <a
+        class="sc-bxivhb bTkHyz"
+        href="#"
+      >
+        Button
+      </a>
+    </div>
+  </div>
+</body>
+`;