@times-components/ts-components 1.16.3 → 1.18.1

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.18.1](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.18.0...@times-components/ts-components@1.18.1) (2022-01-24)
+
+**Note:** Version bump only for package @times-components/ts-components
+
+
+
+
+
+# [1.18.0](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.17.1...@times-components/ts-components@1.18.0) (2022-01-21)
+
+
+### Features
+
+* **TDP-479:** Add article breaking flag ([#2831](https://github.com/newsuk/times-components/issues/2831)) ([f1f990a](https://github.com/newsuk/times-components/commit/f1f990ae8012fcb8d33fabc40494b1a7115cbab0))
+
+
+
+
+
+## [1.17.1](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.17.0...@times-components/ts-components@1.17.1) (2022-01-12)
+
+**Note:** Version bump only for package @times-components/ts-components
+
+
+
+
+
+# [1.17.0](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.16.3...@times-components/ts-components@1.17.0) (2022-01-10)
+
+
+### Features
+
+* **TDP-805:** No commenting for RA users ([#2833](https://github.com/newsuk/times-components/issues/2833)) ([a08c74f](https://github.com/newsuk/times-components/commit/a08c74f35b3f6d84fb484ca4e6727c1896ea0c96))
+
+
+
+
+
 ## [1.16.3](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.16.2...@times-components/ts-components@1.16.3) (2022-01-10)
 
 **Note:** Version bump only for package @times-components/ts-components

package/README.md

@@ -2,7 +2,14 @@
 
 This package contains components written in a *Typescript*. This will allow for
 easy migration when we need to move these to a more modern repository.
+# Article Flag
+Article flags are attached to an article like a label to indicate the article's
+status. Common statuses are exported as components from this package, although both the original and "live news" flags have a `title` prop to enable a bespoke status.
 
+The original article flags are styled with a circular bullet in front of the title, coloured text and no background colour. They include the "new", "updated", "exclusive", "sponsored" and "long read" flags. The "live news" flags, which include "live" and "breaking", are styled to have a diamond icon in front of the title and white text on a coloured background.
+
+The flags are currently added to an article by an editor using the CMS. These
+flags "expire" server side.
 ## Build
 
 All the build steps have been updated to handle all the build steps:

package/dist/components/article-flag/ArticleFlag.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import getActiveFlags from './getActiveFlags';
+declare const ArticleFlag: React.FC<{
+    color: string;
+    title: string;
+}>;
+declare const NewArticleFlag: React.FC;
+declare const UpdatedArticleFlag: React.FC;
+declare const ExclusiveArticleFlag: React.FC;
+declare const SponsoredArticleFlag: React.FC;
+declare const LongReadArticleFlag: React.FC;
+export declare type FlagType = Array<{
+    expiryTime: string | null;
+    type: string;
+}>;
+declare const ArticleFlags: React.FC<{
+    flags: FlagType;
+    longRead: boolean;
+    withContainer: boolean;
+}>;
+export default ArticleFlag;
+export { getActiveFlags, ArticleFlag, ArticleFlags, NewArticleFlag, UpdatedArticleFlag, ExclusiveArticleFlag, SponsoredArticleFlag, LongReadArticleFlag };

package/dist/components/article-flag/ArticleFlag.js

@@ -0,0 +1,43 @@
+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 = ({ color = colours.functional.primary, title }) => (React.createElement(ArticleFlagContainer, null,
+    React.createElement(ArticleFlagBullet, { color: color }),
+    React.createElement(ArticleFlagTextContainer, { "aria-label": `${title} Flag`, color: color, "data-testid": `flag-${title}` }, title.toLowerCase())));
+const NewArticleFlag = () => (React.createElement(ArticleFlag, { color: colours.functional.articleFlagNew, title: "new" }));
+const UpdatedArticleFlag = () => (React.createElement(ArticleFlag, { color: colours.functional.articleFlagUpdated, title: "updated" }));
+const ExclusiveArticleFlag = () => (React.createElement(ArticleFlag, { color: colours.functional.articleFlagExclusive, title: "exclusive" }));
+const SponsoredArticleFlag = () => (React.createElement(ArticleFlag, { color: colours.functional.tertiary, title: "sponsored" }));
+const LongReadArticleFlag = () => (React.createElement(ArticleFlag, { color: colours.functional.secondary, title: "long read" }));
+const flagsMapping = () => new Map([
+    ['NEW', React.createElement(NewArticleFlag, null)],
+    ['LIVE', React.createElement(LiveArticleFlag, null)],
+    ['BREAKING', React.createElement(BreakingArticleFlag, null)],
+    ['UPDATED', React.createElement(UpdatedArticleFlag, null)],
+    ['EXCLUSIVE', React.createElement(ExclusiveArticleFlag, null)],
+    ['SPONSORED', React.createElement(SponsoredArticleFlag, null)],
+    ['LONGREAD', React.createElement(LongReadArticleFlag, null)]
+]);
+const FlagsView = ({ allFlags }) => {
+    return (React.createElement(Flags, null, allFlags.map(flag => (React.createElement(FlagPadding, { key: flag.type, allFlags: allFlags }, flagsMapping().get(flag.type))))));
+};
+const ArticleFlags = ({ 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 React.createElement(FlagsView, { allFlags: allFlags });
+    }
+    return (React.createElement(FlagsContainer, null,
+        React.createElement(FlagsView, { allFlags: allFlags })));
+};
+export default ArticleFlag;
+export { getActiveFlags, ArticleFlag, ArticleFlags, NewArticleFlag, UpdatedArticleFlag, ExclusiveArticleFlag, SponsoredArticleFlag, LongReadArticleFlag };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXJ0aWNsZUZsYWcuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9hcnRpY2xlLWZsYWcvQXJ0aWNsZUZsYWcudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGVBQWUsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ3pFLE9BQU8sRUFDTCxvQkFBb0IsRUFDcEIsaUJBQWlCLEVBQ2pCLHdCQUF3QixFQUN4QixXQUFXLEVBQ1gsS0FBSyxFQUNMLGNBQWMsRUFDZixNQUFNLFVBQVUsQ0FBQztBQUNsQixPQUFPLGNBQWMsTUFBTSxrQkFBa0IsQ0FBQztBQUU5QyxNQUFNLFdBQVcsR0FBK0MsQ0FBQyxFQUMvRCxLQUFLLEdBQUcsT0FBTyxDQUFDLFVBQVUsQ0FBQyxPQUFPLEVBQ2xDLEtBQUssRUFDTixFQUFFLEVBQUUsQ0FBQyxDQUNKLG9CQUFDLG9CQUFvQjtJQUNuQixvQkFBQyxpQkFBaUIsSUFBQyxLQUFLLEVBQUUsS0FBSyxHQUFJO0lBQ25DLG9CQUFDLHdCQUF3QixrQkFDWCxHQUFHLEtBQUssT0FBTyxFQUMzQixLQUFLLEVBQUUsS0FBSyxpQkFDQyxRQUFRLEtBQUssRUFBRSxJQUUzQixLQUFLLENBQUMsV0FBVyxFQUFFLENBQ0ssQ0FDTixDQUN4QixDQUFDO0FBRUYsTUFBTSxjQUFjLEdBQWEsR0FBRyxFQUFFLENBQUMsQ0FDckMsb0JBQUMsV0FBVyxJQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsVUFBVSxDQUFDLGNBQWMsRUFBRSxLQUFLLEVBQUMsS0FBSyxHQUFHLENBQ3RFLENBQUM7QUFFRixNQUFNLGtCQUFrQixHQUFhLEdBQUcsRUFBRSxDQUFDLENBQ3pDLG9CQUFDLFdBQVcsSUFBQyxLQUFLLEVBQUUsT0FBTyxDQUFD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

package/dist/components/article-flag/ArticleFlag.stories.js

@@ -0,0 +1,29 @@
+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)', () => React.createElement(NewArticleFlag, null))
+    .add('Article Flag (Live)', () => React.createElement(LiveArticleFlag, null))
+    .add('Article Flag (Breaking)', () => React.createElement(BreakingArticleFlag, null))
+    .add('Article Flag (Updated)', () => React.createElement(UpdatedArticleFlag, null))
+    .add('Article Flag (Exclusive)', () => React.createElement(ExclusiveArticleFlag, null))
+    .add('Article Flag (Sponsored)', () => React.createElement(SponsoredArticleFlag, null))
+    .add('Article Flag (Long Read)', () => React.createElement(LongReadArticleFlag, null))
+    .add('Article Flags', () => (React.createElement(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: true, withContainer: false })))
+    .add('Article Flags with Container', () => (React.createElement(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: true, withContainer: true })));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXJ0aWNsZUZsYWcuc3Rvcmllcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FydGljbGUtZmxhZy9BcnRpY2xlRmxhZy5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQzdDLE9BQU8sRUFDTCxjQUFjLEVBQ2Qsa0JBQWtCLEVBQ2xCLG9CQUFvQixFQUNwQixvQkFBb0IsRUFDcEIsbUJBQW1CLEVBQ25CLFlBQVksRUFDYixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsZUFBZSxFQUFFLG1CQUFtQixFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFFekUsU0FBUyxDQUFDLG1DQUFtQyxFQUFFLE1BQU0sQ0FBQztLQUNuRCxHQUFHLENBQUMsb0JBQW9CLEVBQUUsR0FBRyxFQUFFLENBQUMsb0JBQUMsY0FBYyxPQUFHLENBQUM7S0FDbkQsR0FBRyxDQUFDLHFCQUFxQixFQUFFLEdBQUcsRUFBRSxDQUFDLG9CQUFDLGVBQWUsT0FBRyxDQUFDO0tBQ3JELEdBQUcsQ0FBQyx5QkFBeUIsRUFBRSxHQUFHLEVBQUUsQ0FBQyxvQkFBQyxtQkFBbUIsT0FBRyxDQUFDO0tBQzdELEdBQUcsQ0FBQyx3QkFBd0IsRUFBRSxHQUFHLEVBQUUsQ0FBQyxvQkFBQyxrQkFBa0IsT0FBRyxDQUFDO0tBQzNELEdBQUcsQ0FBQywwQkFBMEIsRUFBRSxHQUFHLEVBQUUsQ0FBQyxvQkFBQyxvQkFBb0IsT0FBRyxDQUFDO0tBQy9ELEdBQUcsQ0FBQywwQkFBMEIsRUFBRSxHQUFHLEVBQUUsQ0FBQyxvQkFBQyxvQkFBb0IsT0FBRyxDQUFDO0tBQy9ELEdBQUcsQ0FBQywwQkFBMEIsRUFBRSxHQUFHLEVBQUUsQ0FBQyxvQkFBQyxtQkFBbUIsT0FBRyxDQUFDO0tBQzlELEdBQUcsQ0FBQyxlQUFlLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FDMUIsb0JBQUMsWUFBWSxJQUNYLEtBQUssRUFBRTtRQUNMLEVBQUUsVUFBVSxFQUFFLDBCQUEwQixFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDeEQsRUFBRSxVQUFVLEVBQUUsMEJBQTBCLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtRQUM1RCxFQUFFLFVBQVUsRUFBRSwwQkFBMEIsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFO1FBQzNELEVBQUUsVUFBVSxFQUFFLDBCQUEwQixFQUFFLElBQUksRUFBRSxXQUFXLEVBQUU7UUFDN0QsRUFBRSxVQUFVLEVBQUUsMEJBQTBCLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRTtRQUN2RCxFQUFFLFVBQVUsRUFBRSwwQkFBMEIsRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFO0tBQzlELEVBQ0QsUUFBUSxRQUNSLGFBQWEsRUFBRSxLQUFLLEdBQ3BCLENBQ0gsQ0FBQztLQUNELEdBQUcsQ0FBQyw4QkFBOEIsRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUN6QyxvQkFBQyxZQUFZLElBQ1gsS0FBSyxFQUFFO1FBQ0wsRUFBRSxVQUFVLEVBQUUsMEJBQTBCLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRTtRQUN4RCxFQUFFLFVBQVUsRUFBRSwwQkFBMEIsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFO1FBQzVELEVBQUUsVUFBVSxFQUFFLDBCQUEwQixFQUFFLElBQUksRUFBRSxTQUFTLEVBQUU7UUFDM0QsRUFBRSxVQUFVLEVBQUUsMEJBQTBCLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtRQUM3RCxFQUFFLFVBQVUsRUFBRSwwQkFBMEIsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFO1FBQ3ZELEVBQUUsVUFBVSxFQUFFLDBCQUEwQixFQUFFLElBQUksRUFBRSxXQUFXLEVBQUU7S0FDOUQsRUFDRCxRQUFRLFFBQ1IsYUFBYSxTQUNiLENBQ0gsQ0FBQyxDQUFDIn0=

package/dist/components/article-flag/LiveArticleFlag.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+export declare const BaseLiveArticleFlag: React.FC<{
+    title: string;
+}>;
 export declare const LiveArticleFlag: React.FC;
+export declare const BreakingArticleFlag: React.FC;

package/dist/components/article-flag/LiveArticleFlag.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Container, BulletContainer, Title } from './styles';
-export const LiveArticleFlag = () => (React.createElement(Container, null,
-    React.createElement(BulletContainer, null, '\u25c6'),
-    React.createElement(Title, null, "LIVE")));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGl2ZUFydGljbGVGbGFnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXJ0aWNsZS1mbGFnL0xpdmVBcnRpY2xlRmxhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLEtBQUssRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUU3RCxNQUFNLENBQUMsTUFBTSxlQUFlLEdBQWEsR0FBRyxFQUFFLENBQUMsQ0FDN0Msb0JBQUMsU0FBUztJQUNSLG9CQUFDLGVBQWUsUUFBRSxRQUFRLENBQW1CO0lBQzdDLG9CQUFDLEtBQUssZUFBYSxDQUNULENBQ2IsQ0FBQyJ9
+import { LiveArticleFlagContainer, LiveDiamondContainer, LiveArticleFlagTextContainer } from './styles';
+export const BaseLiveArticleFlag = ({ title }) => (React.createElement(LiveArticleFlagContainer, null,
+    React.createElement(LiveDiamondContainer, null, '\u25c6'),
+    React.createElement(LiveArticleFlagTextContainer, null, title)));
+export const LiveArticleFlag = () => (React.createElement(BaseLiveArticleFlag, { title: "LIVE" }));
+export const BreakingArticleFlag = () => (React.createElement(BaseLiveArticleFlag, { title: "BREAKING" }));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGl2ZUFydGljbGVGbGFnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXJ0aWNsZS1mbGFnL0xpdmVBcnRpY2xlRmxhZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFDTCx3QkFBd0IsRUFDeEIsb0JBQW9CLEVBQ3BCLDRCQUE0QixFQUM3QixNQUFNLFVBQVUsQ0FBQztBQUVsQixNQUFNLENBQUMsTUFBTSxtQkFBbUIsR0FBZ0MsQ0FBQyxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUM3RSxvQkFBQyx3QkFBd0I7SUFDdkIsb0JBQUMsb0JBQW9CLFFBQUUsUUFBUSxDQUF3QjtJQUN2RCxvQkFBQyw0QkFBNEIsUUFBRSxLQUFLLENBQWdDLENBQzNDLENBQzVCLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxlQUFlLEdBQWEsR0FBRyxFQUFFLENBQUMsQ0FDN0Msb0JBQUMsbUJBQW1CLElBQUMsS0FBSyxFQUFDLE1BQU0sR0FBRyxDQUNyQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sbUJBQW1CLEdBQWEsR0FBRyxFQUFFLENBQUMsQ0FDakQsb0JBQUMsbUJBQW1CLElBQUMsS0FBSyxFQUFDLFVBQVUsR0FBRyxDQUN6QyxDQUFDIn0=

package/dist/components/article-flag/__tests__/ArticleFlag.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/article-flag/__tests__/ArticleFlag.test.js

@@ -0,0 +1,75 @@
+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(React.createElement(ArticleFlag, { title: "No Colour", color: '' }));
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('renders a red article flag', () => {
+        const { baseElement } = render(React.createElement(ArticleFlag, { color: "red", title: "Coloured Red" }));
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('renders the new article flag', () => {
+        const { baseElement, getByText } = render(React.createElement(NewArticleFlag, null));
+        expect(getByText('new')).toBeTruthy();
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('renders the updated article flag', () => {
+        const { baseElement, getByText } = render(React.createElement(UpdatedArticleFlag, null));
+        expect(getByText('updated')).toBeTruthy();
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('renders the exclusive article flag', () => {
+        const { baseElement, getByText } = render(React.createElement(ExclusiveArticleFlag, null));
+        expect(getByText('exclusive')).toBeTruthy();
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('renders the sponsored article flag', () => {
+        const { baseElement, getByText } = render(React.createElement(SponsoredArticleFlag, null));
+        expect(getByText('sponsored')).toBeTruthy();
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('renders the long read article flag', () => {
+        const { baseElement, getByText } = render(React.createElement(LongReadArticleFlag, null));
+        expect(getByText('long read')).toBeTruthy();
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('renders multiple article flags', () => {
+        const { baseElement } = render(React.createElement(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: true, withContainer: false }));
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('renders multiple article flags in a container', () => {
+        const { baseElement } = render(React.createElement(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: true, withContainer: true }));
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('does not render article flags if there are none', () => {
+        const { baseElement } = render(React.createElement(ArticleFlags, { flags: [], longRead: false, withContainer: false }));
+        expect(baseElement).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXJ0aWNsZUZsYWcudGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FydGljbGUtZmxhZy9fX3Rlc3RzX18vQXJ0aWNsZUZsYWcudGVzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNoRCxPQUFPLDJCQUEyQixDQUFDO0FBQ25DLE9BQU8sRUFDTCxXQUFXLEVBQ1gsWUFBWSxFQUNaLGNBQWMsRUFDZCxrQkFBa0IsRUFDbEIsb0JBQW9CLEVBQ3BCLG9CQUFvQixFQUNwQixtQkFBbUIsRUFDcEIsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4QixPQUFPLFFBQVEsTUFBTSxVQUFVLENBQUM7QUFFaEMsSUFBSSxDQUFDLElBQUksQ0FBQyxpQ0FBaUMsRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDO0lBQ2xELFVBQVUsRUFBRSxJQUFJO0lBQ2hCLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxpQ0FBaUMsQ0FBQztJQUN4RCxlQUFlLEVBQUUsaUJBQWlCO0NBQ25DLENBQUMsQ0FBQyxDQUFDO0FBRUosUUFBUSxDQUFDLGFBQWEsRUFBRSxHQUFHLEVBQUU7SUFDM0IseUNBQXlDO0lBQ3pDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7UUFDZCxRQUFRLENBQUMsR0FBRyxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQzlCLENBQUMsQ0FBQyxDQUFDO0lBRUgsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLFFBQVEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNuQixDQUFDLENBQUMsQ0FBQztJQUNILEVBQUUsQ0FBQyx5QkFBeUIsRUFBRSxHQUFHLEVBQUU7UUFDakMsTUFBTSxFQUFFLFdBQVcsRUFBRSxHQUFHLE1BQU0sQ0FDNUIsb0JBQUMsV0FBVyxJQUFDLEtBQUssRUFBQyxXQUFXLEVBQUMs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

package/dist/components/article-flag/__tests__/LiveArticleFlag.test.js

@@ -1,12 +1,22 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { LiveArticleFlag } from '../LiveArticleFlag';
-describe('<LiveArticleFlag>', () => {
-    it('should render the component', () => {
+import { BaseLiveArticleFlag, BreakingArticleFlag, LiveArticleFlag } from '../LiveArticleFlag';
+describe('LiveArticleFlag', () => {
+    it('should render the base live article flag', () => {
+        const { baseElement, getByText } = render(React.createElement(BaseLiveArticleFlag, { title: "BASE" }));
+        expect(getByText('BASE')).toBeTruthy();
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('should render the breaking article flag', () => {
+        const { baseElement, getByText } = render(React.createElement(BreakingArticleFlag, null));
+        expect(getByText('BREAKING')).toBeTruthy();
+        expect(baseElement).toMatchSnapshot();
+    });
+    it('should render the live article flag', () => {
         const { baseElement, getByText } = render(React.createElement(LiveArticleFlag, null));
         expect(getByText('LIVE')).toBeTruthy();
         expect(baseElement).toMatchSnapshot();
     });
 });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGl2ZUFydGljbGVGbGFnLnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9hcnRpY2xlLWZsYWcvX190ZXN0c19fL0xpdmVBcnRpY2xlRmxhZy50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ2hELE9BQU8sMkJBQTJCLENBQUM7QUFFbkMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRXJELFFBQVEsQ0FBQyxtQkFBbUIsRUFBRSxHQUFHLEVBQUU7SUFDakMsRUFBRSxDQUFDLDZCQUE2QixFQUFFLEdBQUcsRUFBRTtRQUNyQyxNQUFNLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxHQUFHLE1BQU0sQ0FBQyxvQkFBQyxlQUFlLE9BQUcsQ0FBQyxDQUFDO1FBQy9ELE1BQU0sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUN2QyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDeEMsQ0FBQyxDQUFDLENBQUM7QUFDTCxDQUFDLENBQUMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGl2ZUFydGljbGVGbGFnLnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9hcnRpY2xlLWZsYWcvX190ZXN0c19fL0xpdmVBcnRpY2xlRmxhZy50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ2hELE9BQU8sMkJBQTJCLENBQUM7QUFFbkMsT0FBTyxFQUNMLG1CQUFtQixFQUNuQixtQkFBbUIsRUFDbkIsZUFBZSxFQUNoQixNQUFNLG9CQUFvQixDQUFDO0FBRTVCLFFBQVEsQ0FBQyxpQkFBaUIsRUFBRSxHQUFHLEVBQUU7SUFDL0IsRUFBRSxDQUFDLDBDQUEwQyxFQUFFLEdBQUcsRUFBRTtRQUNsRCxNQUFNLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxHQUFHLE1BQU0sQ0FDdkMsb0JBQUMsbUJBQW1CLElBQUMsS0FBSyxFQUFDLE1BQU0sR0FBRyxDQUNyQyxDQUFDO1FBQ0YsTUFBTSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ3ZDLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUN4QyxDQUFDLENBQUMsQ0FBQztJQUNILEVBQUUsQ0FBQyx5Q0FBeUMsRUFBRSxHQUFHLEVBQUU7UUFDakQsTUFBTSxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsR0FBRyxNQUFNLENBQUMsb0JBQUMsbUJBQW1CLE9BQUcsQ0FBQyxDQUFDO1FBQ25FLE1BQU0sQ0FBQyxTQUFTLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUMzQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDeEMsQ0FBQyxDQUFDLENBQUM7SUFDSCxFQUFFLENBQUMscUNBQXFDLEVBQUUsR0FBRyxFQUFFO1FBQzdDLE1BQU0sRUFBRSxXQUFXLEVBQUUsU0FBUyxFQUFFLEdBQUcsTUFBTSxDQUFDLG9CQUFDLGVBQWUsT0FBRyxDQUFDLENBQUM7UUFDL0QsTUFBTSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ3ZDLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUN4QyxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=

package/dist/components/article-flag/__tests__/getActiveFlags.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/article-flag/__tests__/getActiveFlags.test.js

@@ -0,0 +1,36 @@
+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([]);
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0QWN0aXZlRmxhZ3MudGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FydGljbGUtZmxhZy9fX3Rlc3RzX18vZ2V0QWN0aXZlRmxhZ3MudGVzdC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLFFBQVEsTUFBTSxVQUFVLENBQUM7QUFDaEMsT0FBTyxjQUFjLE1BQU0sbUJBQW1CLENBQUM7QUFFL0MsUUFBUSxDQUFDLDJCQUEyQixFQUFFLEdBQUcsRUFBRTtJQUN6Qyx5Q0FBeUM7SUFDekMsVUFBVSxDQUFDLEdBQUcsRUFBRTtRQUNkLFFBQVEsQ0FBQyxHQUFHLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDOUIsQ0FBQyxDQUFDLENBQUM7SUFFSCxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ2IsUUFBUSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ25CLENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLDJCQUEyQixFQUFFLEdBQUcsRUFBRTtRQUNuQyxNQUFNLEtBQUssR0FBRztZQUNaLEVBQUUsVUFBVSxFQUFFLDBCQUEwQixFQUFFLElBQUksRUFBRSxTQUFTLEVBQUU7WUFDM0QsRUFBRSxVQUFVLEVBQUUsMEJBQTBCLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtTQUM5RCxDQUFDO1FBQ0YsTUFBTSxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDcEQsQ0FBQyxDQUFDLENBQUM7SUFDSCxFQUFFLENBQUMsd0NBQXdDLEVBQUUsR0FBRyxFQUFFO1FBQ2hELE1BQU0sS0FBSyxHQUFHO1lBQ1osRUFBRSxVQUFVLEVBQUUsMEJBQTBCLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRTtZQUMzRCxFQUFFLFVBQVUsRUFBRSwwQkFBMEIsRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFO1NBQzlELENBQUM7UUFDRixNQUFNLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQzVDLENBQUMsQ0FBQyxDQUFDO0lBQ0gsRUFBRSxDQUFDLHdDQUF3QyxFQUFFLEdBQUcsRUFBRTtRQUNoRCxNQUFNLEtBQUssR0FBRztZQUNaLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFO1lBQ3JDLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFO1NBQ3hDLENBQUM7UUFDRixNQUFNLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQy9DLENBQUMsQ0FBQyxDQUFDO0lBQ0gsRUFBRSxDQUFDLDZDQUE2QyxFQUFFLEdBQUcsRUFBRTtRQUNyRCxNQUFNLENBQUMsY0FBYyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3pDLENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDLENBQUMifQ==

package/dist/components/article-flag/getActiveFlags.d.ts

@@ -0,0 +1,3 @@
+import { FlagType } from './ArticleFlag';
+declare const getActiveArticleFlags: (flags: FlagType) => FlagType;
+export default getActiveArticleFlags;

package/dist/components/article-flag/getActiveFlags.js

@@ -0,0 +1,9 @@
+const getActiveArticleFlags = flags => {
+    if (!flags) {
+        return [];
+    }
+    return flags.filter(flag => flag.expiryTime === null ||
+        new Date().getTime() < new Date(flag.expiryTime).getTime());
+};
+export default getActiveArticleFlags;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0QWN0aXZlRmxhZ3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9hcnRpY2xlLWZsYWcvZ2V0QWN0aXZlRmxhZ3MudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsTUFBTSxxQkFBcUIsR0FBa0MsS0FBSyxDQUFDLEVBQUU7SUFDbkUsSUFBSSxDQUFDLEtBQUssRUFBRTtRQUNWLE9BQU8sRUFBRSxDQUFDO0tBQ1g7SUFDRCxPQUFPLEtBQUssQ0FBQyxNQUFNLENBQ2pCLElBQUksQ0FBQyxFQUFFLENBQ0wsSUFBSSxDQUFDLFVBQVUsS0FBSyxJQUFJO1FBQ3hCLElBQUksSUFBSSxFQUFFLENBQUMsT0FBTyxFQUFFLEdBQUcsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLE9BQU8sRUFBRSxDQUM3RCxDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsZUFBZSxxQkFBcUIsQ0FBQyJ9

package/dist/components/article-flag/styles.d.ts

@@ -1,3 +1,12 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BulletContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { FlagType } from './ArticleFlag';
+export declare const ArticleFlagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LiveArticleFlagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ArticleFlagBullet: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LiveDiamondContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ArticleFlagTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LiveArticleFlagTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FlagPadding: import("styled-components").StyledComponent<"div", any, {
+    allFlags: FlagType;
+}, never>;
+export declare const Flags: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FlagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/article-flag/styles.js

@@ -1,17 +1,38 @@
 import styled from 'styled-components';
 import { fonts } from '@times-components/styleguide';
-export const Container = styled.div `
+import { gqlRgbaToStyle } from '@times-components/utils';
+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;
@@ -19,4 +40,17 @@ export const Title = styled.div `
   letter-spacing: 0.1em;
   line-height: 16px;
 `;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXJ0aWNsZS1mbGFnL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFFckQsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7O0NBS2xDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxlQUFlLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7OztDQUl4QyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7aUJBQ2QsS0FBSyxDQUFDLFVBQVU7Ozs7OztDQU1oQyxDQUFDIn0=
+export const FlagPadding = styled.div `
+  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;
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXJ0aWNsZS1mbGFnL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFFckQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRXpELE1BQU0sQ0FBQyxNQUFNLG9CQUFvQixHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7Q0FJN0MsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLHdCQUF3QixHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7O0NBS2pELENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7O3NCQUlyQixDQUFDLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUMsSUFBSSxLQUFLO0NBQ2xFLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7O0NBSTdDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSx3QkFBd0IsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7Ozs7O1dBT3ZDLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxJQUFJLEtBQUs7Q0FDdkQsQ0FBQztBQUNGLE1BQU0sQ0FBQyxNQUFNLDRCQUE0QixHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7aUJBQ3JDLEtBQUssQ0FBQyxVQUFVOzs7Ozs7Q0FNaEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUF3QjtrQkFDM0MsQ0FBQyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztDQUNyRSxDQUFDO0FBQ0YsTUFBTSxDQUFDLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7O0NBSzlCLENBQUM7QUFDRixNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7O0NBR3ZDLENBQUMifQ==

package/dist/components/inline-dialog/InlineDialog.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export declare const InlineDialog: FC<{
+    title: string;
+    buttonText: string;
+    href?: string;
+    onClick: () => void;
+}>;

package/dist/components/inline-dialog/InlineDialog.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Container, Title, Description, Button } from './styles';
+export const InlineDialog = ({ title, href = '#', onClick, buttonText, children }) => (React.createElement(Container, null,
+    React.createElement(Title, null, title),
+    React.createElement(Description, null, children),
+    React.createElement(Button, { href: href, onClick: onClick }, buttonText)));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5saW5lRGlhbG9nLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaW5saW5lLWRpYWxvZy9JbmxpbmVEaWFsb2cudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBYSxNQUFNLE9BQU8sQ0FBQztBQUNsQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRWpFLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FLcEIsQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLEdBQUcsR0FBRyxFQUFFLE9BQU8sRUFBRSxVQUFVLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQzdELG9CQUFDLFNBQVM7SUFDUixvQkFBQyxLQUFLLFFBQUUsS0FBSyxDQUFTO0lBQ3RCLG9CQUFDLFdBQVcsUUFBRSxRQUFRLENBQWU7SUFDckMsb0JBQUMsTUFBTSxJQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sSUFDakMsVUFBVSxDQUNKLENBQ0MsQ0FDYixDQUFDIn0=

package/dist/components/inline-dialog/InlineDialog.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inline-dialog/InlineDialog.stories.js

@@ -0,0 +1,8 @@
+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 (React.createElement(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."));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5saW5lRGlhbG9nLnN0b3JpZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9pbmxpbmUtZGlhbG9nL0lubGluZURpYWxvZy5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFFbEQsU0FBUyxDQUFDLG1DQUFtQyxFQUFFLE1BQU0sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxTQUFTLEVBQUUsR0FBRyxFQUFFO0lBQ3pFLE9BQU8sQ0FDTCxvQkFBQyxZQUFZLElBQ1gsS0FBSyxFQUFDLHVCQUF1QixFQUM3QixVQUFVLEVBQUMsZUFBZSxFQUMxQixPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUMsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyx3RkFJakMsQ0FDaEIsQ0FBQztBQUNKLENBQUMsQ0FBQyxDQUFDIn0=

package/dist/components/inline-dialog/__tests__/InlineDialog.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/inline-dialog/__tests__/InlineDialog.test.js

@@ -0,0 +1,17 @@
+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(React.createElement(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();
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5saW5lRGlhbG9nLnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9pbmxpbmUtZGlhbG9nL19fdGVzdHNfXy9JbmxpbmVEaWFsb2cudGVzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDM0QsT0FBTywyQkFBMkIsQ0FBQztBQUVuQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsUUFBUSxDQUFDLGdCQUFnQixFQUFFLEdBQUcsRUFBRTtJQUM5QixFQUFFLENBQUMsNkJBQTZCLEVBQUUsR0FBRyxFQUFFO1FBQ3JDLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztRQUMxQixNQUFNLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxHQUFHLE1BQU0sQ0FDdkMsb0JBQUMsWUFBWSxJQUFDLEtBQUssRUFBQyxPQUFPLEVBQUMsVUFBVSxFQUFDLFFBQVEsRUFBQyxPQUFPLEVBQUUsT0FBTyxHQUFJLENBQ3JFLENBQUM7UUFDRixNQUFNLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDeEMsTUFBTSxNQUFNLEdBQUcsU0FBUyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ25DLFNBQVMsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDeEIsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDbkMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBRTVCLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUN4QyxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=

package/dist/components/inline-dialog/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Button: import("styled-components").StyledComponent<"a", any, {}, never>;

package/dist/components/inline-dialog/styles.js

@@ -0,0 +1,50 @@
+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;
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaW5saW5lLWRpYWxvZy9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxNQUFNLE1BQU0sbUJBQW1CLENBQUM7QUFDdkMsT0FBTyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUVsRSxNQUFNLENBQUMsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQTs7Ozs7O3VCQU1aLFdBQVcsQ0FBQyxNQUFNOzs7Q0FHeEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBO2lCQUNkLEtBQUssQ0FBQyxRQUFROzs7Ozs7Q0FNOUIsQ0FBQztBQUNGLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBO2lCQUNwQixLQUFLLENBQUMsSUFBSTs7Ozs7OztDQU8xQixDQUFDO0FBQ0YsTUFBTSxDQUFDLE1BQU0sTUFBTSxHQUFHLE1BQU0sQ0FBQyxDQUFDLENBQUE7Ozs7Ozs7O2lCQVFiLEtBQUssQ0FBQyxVQUFVOzs7Ozs7Ozs7OztDQVdoQyxDQUFDIn0=

package/dist/components/inline-message/styles.js

@@ -7,7 +7,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/dist/index.d.ts

@@ -3,7 +3,8 @@ export { InfoCard } from './components/in-article-info-card/InfoCard';
 export { GalleryCarousel } from './components/carousel/GalleryCarousel';
 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';
 export { AutoNewsletterPuff } from './components/newsletter-puff/AutoNewsletterPuff';
 export { InlineNewsletterPuff } from './components/newsletter-puff/InlineNewsletterPuff';
 export { PreviewNewsletterPuff } from './components/newsletter-puff/PreviewNewsletterPuff';
@@ -23,3 +24,4 @@ export { TrackingContextProvider } from './helpers/tracking/TrackingContextProvi
 export { AlgoliaSearchProvider, useAlgoliaSearch } from './helpers/algolia/AlgoliaSearchProvider';
 export { HiddenDiv } from './components/common-styles';
 export { InlineMessage } from './components/inline-message/InlineMessage';
+export { InlineDialog } from './components/inline-dialog/InlineDialog';