npm - @times-components/ts-components - Versions diffs - 1.16.3 → 1.18.1 - Mend

@times-components/ts-components 1.16.3 → 1.18.1

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 (52) hide show

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

package/src/components/inline-dialog/styles.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import { breakpoints, fonts } from '@times-components/styleguide';
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px;
+  @media (min-width: ${breakpoints.medium}px) {
+    padding: 88px;
+  }
+`;
+export const Title = styled.div`
+  font-family: ${fonts.headline};
+  font-size: 32px;
+  line-height: 32px;
+  letter-spacing: 0;
+  text-align: center;
+  padding: 24px;
+`;
+export const Description = styled.div`
+  font-family: ${fonts.body};
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 28px;
+  letter-spacing: 0;
+  text-align: center;
+  max-width: 660px;
+`;
+export const Button = styled.a`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  background-color: #008387;
+  color: white;
+  font-family: ${fonts.supporting};
+  width: 127px;
+  height: 48px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0;
+  margin: 24px;
+`;

package/src/components/inline-message/__tests__/__snapshots__/InlineMessage.test.tsx.snap CHANGED Viewed

@@ -4,7 +4,7 @@ exports[`<InlineMessage> should render the component 1`] = `
 <body>
   <div>
     <div
-      class="info sc-bdVaJa gHxzwa"
+      class="info sc-bdVaJa kXVVQy"
     >
       <div
         class="sc-bwzfXH bYsvTR"

package/src/components/inline-message/styles.ts CHANGED Viewed

@@ -8,7 +8,7 @@ const MessageConfig = {
 };
 export const Container = styled.div`
   display: flex;
+  margin-top: 50px;
   &.info {
     background-color: ${MessageConfig.info.background};
     border-left: 4px solid ${MessageConfig.info.foreground};

package/src/index.ts CHANGED Viewed

@@ -6,7 +6,19 @@ export {
   InfoCardBulletPoints
 } from './components/in-article-info-card-bulletpoints/InfoCardBulletPoints';
 export { BigNumbers } from './components/in-article-big-numbers/BigNumbers';
-export { LiveArticleFlag } from './components/article-flag/LiveArticleFlag';
+export {
+  BreakingArticleFlag,
+  LiveArticleFlag
+} from './components/article-flag/LiveArticleFlag';
+export {
+  ArticleFlag,
+  ArticleFlags,
+  NewArticleFlag,
+  UpdatedArticleFlag,
+  ExclusiveArticleFlag,
+  SponsoredArticleFlag,
+  LongReadArticleFlag
+} from './components/article-flag/ArticleFlag';
 // Newsletter Components
 export {
@@ -69,3 +81,5 @@ export {
 export { HiddenDiv } from './components/common-styles';
 export { InlineMessage } from './components/inline-message/InlineMessage';
+export { InlineDialog } from './components/inline-dialog/InlineDialog';

package/src/types/externs.d.ts CHANGED Viewed

@@ -54,6 +54,7 @@ declare module '@times-components/utils' {
   export const capitalise: (s: string) => string;
   export const stripTags: (input: string, replaceWith: string) => string;
+  export const gqlRgbaToStyle: (colour: string | undefined) => string | null;
 }
 declare module '@times-components/styleguide' {

package/dist/components/article-flag/LiveArticleFlag.stories.js DELETED Viewed

@@ -1,7 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { LiveArticleFlag } from './LiveArticleFlag';
-storiesOf('Typescript Component/LiveArticleFlag', module).add('default', () => {
-    return React.createElement(LiveArticleFlag, null);
-});
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGl2ZUFydGljbGVGbGFnLnN0b3JpZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9hcnRpY2xlLWZsYWcvTGl2ZUFydGljbGVGbGFnLnN0b3JpZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBRXBELFNBQVMsQ0FBQyxzQ0FBc0MsRUFBRSxNQUFNLENBQUMsQ0FBQyxHQUFHLENBQUMsU0FBUyxFQUFFLEdBQUcsRUFBRTtJQUM1RSxPQUFPLG9CQUFDLGVBQWUsT0FBRyxDQUFDO0FBQzdCLENBQUMsQ0FBQyxDQUFDIn0=

package/src/components/article-flag/LiveArticleFlag.stories.tsx DELETED Viewed

@@ -1,7 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { LiveArticleFlag } from './LiveArticleFlag';
-storiesOf('Typescript Component/LiveArticleFlag', module).add('default', () => {
-  return <LiveArticleFlag />;
-});