@times-components/ts-components 1.32.3 → 1.33.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.33.0](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.32.5...@times-components/ts-components@1.33.0) (2022-04-29)
+
+
+### Features
+
+* **TDP-1830:** convert styleguide to typescript component ([#2918](https://github.com/newsuk/times-components/issues/2918)) ([24620e2](https://github.com/newsuk/times-components/commit/24620e25be9f2827ceedbb2f4cf1fe0ff6ea2ae2))
+
+
+
+
+
+## [1.32.5](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.32.4...@times-components/ts-components@1.32.5) (2022-04-26)
+
+**Note:** Version bump only for package @times-components/ts-components
+
+
+
+
+
+## [1.32.4](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.32.3...@times-components/ts-components@1.32.4) (2022-04-25)
+
+**Note:** Version bump only for package @times-components/ts-components
+
+
+
+
+
 ## [1.32.3](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.32.2...@times-components/ts-components@1.32.3) (2022-04-22)
 
 **Note:** Version bump only for package @times-components/ts-components

package/dist/components/styleguide/Styleguide.d.ts

@@ -0,0 +1,193 @@
+import 'react';
+import colours from './colours/colours';
+import Animations from './components/Animations';
+import breakpoints, { editionBreakpoints, editionMaxWidth, getEditionBreakpoint, editionBreakpointWidths, sliceContentMaxWidth } from './breakpoints';
+import lineHeight from './lineHeight';
+import { timesFontFactory, timesFontSizes, fontStyles } from './fonts/fonts';
+import themeFactory from './themeFactory';
+import scales from './scales';
+import spacing, { globalSpacingStyles } from './spacing';
+declare const nativeTablet: number, nativeTabletWide: number;
+export declare const tabletRowPadding = 20;
+declare const _default: () => {
+    Animations: {
+        FadeIn: import("styled-components").StyledComponent<import("react").FC<{
+            style?: import("react").CSSProperties | undefined;
+        }>, any, {}, never>;
+    };
+    colours: {
+        functional: {
+            action: string;
+            actionPressed: string;
+            articleFlagExclusive: string;
+            articleFlagNew: string;
+            articleFlagUpdated: string;
+            backgroundPrimary: string;
+            backgroundSecondary: string;
+            black: string;
+            border: string;
+            brandColour: string;
+            bullet: string;
+            contrast: string;
+            darkSupplement: string;
+            greyLabel: string;
+            greyStickyBarBoxShadow: string;
+            greyStickyBarBorderBottom: string;
+            gutter: string;
+            keyline: string;
+            modalBackground: string;
+            newsletterPuffBackground: string;
+            overlayGradientEnd: string;
+            overlayGradientFallback: string;
+            overlayGradientStart: string;
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            transparentBlack: string;
+            transparentWhite: string;
+            white: string;
+            whiteGrey: string;
+        };
+        secondarySectionColours: {
+            'The Sunday Times Magazine': string;
+            thesundaytimesmagazine: string;
+        };
+        section: {
+            'Arts & Features': string;
+            'Bricks & Mortar': string;
+            Business: string;
+            Comment: string;
+            Culture: string;
+            Driving: string;
+            Focus: string;
+            Gardening: string;
+            Home: string;
+            Ireland: string;
+            Law: string;
+            Money: string;
+            News: string;
+            'News Review': string;
+            Puzzles: string;
+            Register: string;
+            'Saturday Review': string;
+            Scotland: string;
+            Sport: string;
+            Style: string;
+            'Tech & Games': string;
+            'The Dish': string;
+            'The Game': string;
+            'The Sunday Times Magazine': string;
+            'The Times Magazine': string;
+            Times2: string;
+            "Today's Magazines": string;
+            Travel: string;
+            Weekend: string;
+            World: string;
+            artsfeatures: string;
+            bricksmortar: string;
+            business: string;
+            comment: string;
+            culture: string;
+            default: string;
+            defcon: string;
+            driving: string;
+            focus: string;
+            gardening: string;
+            home: string;
+            ireland: string;
+            law: string;
+            money: string;
+            news: string;
+            newsreview: string;
+            puzzle: string;
+            register: string;
+            saturdayreview: string;
+            scotland: string;
+            sport: string;
+            style: string;
+            techgames: string;
+            thedish: string;
+            thegame: string;
+            thesundaytimesmagazine: string;
+            thetimesmagazine: string;
+            times2: string;
+            todaysmagazines: string;
+            travel: string;
+            weekend: string;
+            world: string;
+        };
+    };
+    fontFactory: ({ font, fontSize }: {
+        font: "body" | "headline" | "bodyRegular" | "bodyRegularSmallCaps" | "cultureMagazine" | "dropCap" | "headlineRegular" | "stMagazine" | "styleMagazine" | "supporting";
+        fontSize: "body" | "button" | "caption" | "link" | "meta" | "headline" | "articleHeadline" | "articleMeta" | "bodyMobile" | "cardHeadline" | "cardMeta" | "cardMetaMobile" | "commentsGuidelines" | "commentsHeadline" | "credits" | "imageOverlayTextSmall" | "infoTitle" | "keyFactsTitle" | "leadHeadline" | "newsletterPuffLabel" | "newsletterPuffHeadline" | "newsletterPuffCopy" | "pageComponentHeadline" | "pageHeadline" | "pageHeadlineLarge" | "pagingMeta" | "puffLink" | "secondary" | "sliceHeadline" | "smallestHeadline" | "smallHeadline" | "strapline" | "teaser" | "tertiary" | "tileLeadHeadline" | "heading2Mobile" | "heading3Mobile" | "heading4Mobile" | "heading5Mobile" | "infoSubText" | "heading2" | "heading3" | "heading4" | "heading5";
+    }) => {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: {};
+    };
+    fonts: {
+        body: string;
+        bodyRegular: string;
+        bodyRegularSmallCaps: string;
+        cultureMagazine: string;
+        dropCap: string;
+        headline: string;
+        headlineRegular: string;
+        stMagazine: string;
+        styleMagazine: string;
+        supporting: string;
+    };
+    fontSizes: {
+        articleHeadline: number;
+        articleMeta: number;
+        body: number;
+        bodyMobile: number;
+        button: number;
+        caption: number;
+        cardHeadline: number;
+        cardMeta: number;
+        cardMetaMobile: number;
+        commentsGuidelines: number;
+        commentsHeadline: number;
+        credits: number;
+        headline: number;
+        imageOverlayTextSmall: number;
+        infoTitle: number;
+        keyFactsTitle: number;
+        leadHeadline: number;
+        link: number;
+        meta: number;
+        newsletterPuffLabel: number;
+        newsletterPuffHeadline: number;
+        newsletterPuffCopy: number;
+        pageComponentHeadline: number;
+        pageHeadline: number;
+        pageHeadlineLarge: number;
+        pagingMeta: number;
+        puffLink: number;
+        secondary: number;
+        sliceHeadline: number;
+        smallestHeadline: number;
+        smallHeadline: number;
+        strapline: number;
+        teaser: number;
+        tertiary: number;
+        tileLeadHeadline: number;
+        heading2Mobile: number;
+        heading3Mobile: number;
+        heading4Mobile: number;
+        heading5Mobile: number;
+        infoSubText: number;
+        heading2: number;
+        heading3: number;
+        heading4: number;
+        heading5: number;
+    };
+    lineHeight: ({ font, fontSize }: {
+        font: string;
+        fontSize: string;
+    }) => {};
+    spacing: (multiple: number) => string;
+};
+export default _default;
+export { Animations, breakpoints, colours, editionBreakpoints, editionBreakpointWidths, editionMaxWidth, sliceContentMaxWidth, fontStyles as fonts, timesFontFactory as fontFactory, timesFontSizes as fontSizes, getEditionBreakpoint, lineHeight, scales, spacing, globalSpacingStyles, nativeTablet as tabletWidth, nativeTabletWide as tabletWidthMax, themeFactory };

package/dist/components/styleguide/Styleguide.js

@@ -0,0 +1,24 @@
+import 'react';
+import colours from './colours/colours';
+import Animations from './components/Animations';
+import breakpoints, { editionBreakpoints, editionMaxWidth, getEditionBreakpoint, editionBreakpointWidths, sliceContentMaxWidth } from './breakpoints';
+import lineHeight from './lineHeight';
+import { timesFontFactory, timesFontSizes, fontStyles } from './fonts/fonts';
+import themeFactory from './themeFactory';
+import scales from './scales';
+import spacing, { globalSpacingStyles } from './spacing';
+const { nativeTablet, nativeTabletWide } = breakpoints;
+export const tabletRowPadding = 20;
+export default () => {
+    return {
+        Animations,
+        colours,
+        fontFactory: timesFontFactory,
+        fonts: fontStyles,
+        fontSizes: timesFontSizes,
+        lineHeight,
+        spacing
+    };
+};
+export { Animations, breakpoints, colours, editionBreakpoints, editionBreakpointWidths, editionMaxWidth, sliceContentMaxWidth, fontStyles as fonts, timesFontFactory as fontFactory, timesFontSizes as fontSizes, getEditionBreakpoint, lineHeight, scales, spacing, globalSpacingStyles, nativeTablet as tabletWidth, nativeTabletWide as tabletWidthMax, themeFactory };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3R5bGVndWlkZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3N0eWxlZ3VpZGUvU3R5bGVndWlkZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxPQUFPLENBQUM7QUFDZixPQUFPLE9BQU8sTUFBTSxtQkFBbUIsQ0FBQztBQUN4QyxPQUFPLFVBQVUsTUFBTSx5QkFBeUIsQ0FBQztBQUVqRCxPQUFPLFdBQVcsRUFBRSxFQUNsQixrQkFBa0IsRUFDbEIsZUFBZSxFQUNmLG9CQUFvQixFQUNwQix1QkFBdUIsRUFDdkIsb0JBQW9CLEVBQ3JCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sVUFBVSxNQUFNLGNBQWMsQ0FBQztBQUN0QyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsY0FBYyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RSxPQUFPLFlBQVksTUFBTSxnQkFBZ0IsQ0FBQztBQUUxQyxPQUFPLE1BQU0sTUFBTSxVQUFVLENBQUM7QUFDOUIsT0FBTyxPQUFPLEVBQUUsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUV6RCxNQUFNLEVBQUUsWUFBWSxFQUFFLGdCQUFnQixFQUFFLEdBQUcsV0FBVyxDQUFDO0FBRXZELE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLEVBQUUsQ0FBQztBQUVuQyxlQUFlLEdBQUcsRUFBRTtJQUNsQixPQUFPO1FBQ0wsVUFBVTtRQUNWLE9BQU87UUFDUCxXQUFXLEVBQUUsZ0JBQWdCO1FBQzdCLEtBQUssRUFBRSxVQUFVO1FBQ2pCLFNBQVMsRUFBRSxjQUFjO1FBQ3pCLFVBQVU7UUFDVixPQUFPO0tBQ1IsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE9BQU8sRUFDTCxVQUFVLEVBQ1YsV0FBVyxFQUNYLE9BQU8sRUFDUCxrQkFBa0IsRUFDbEIsdUJBQXVCLEVBQ3ZCLGVBQWUsRUFDZixvQkFBb0IsRUFDcEIsVUFBVSxJQUFJLEtBQUssRUFDbkIsZ0JBQWdCLElBQUksV0FBVyxFQUMvQixjQUFjLElBQUksU0FBUyxFQUMzQixvQkFBb0IsRUFDcEIsVUFBVSxFQUNWLE1BQU0sRUFDTixPQUFPLEVBQ1AsbUJBQW1CLEVBQ25CLFlBQVksSUFBSSxXQUFXLEVBQzNCLGdCQUFnQixJQUFJLGNBQWMsRUFDbEMsWUFBWSxFQUNiLENBQUMifQ==

package/dist/components/styleguide/__tests__/breakpoints.test.d.ts

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

package/dist/components/styleguide/__tests__/breakpoints.test.js

@@ -0,0 +1,46 @@
+import '@testing-library/react';
+import breakpoints, { editionBreakpointWidths, editionBreakpoints } from '../breakpoints';
+import { getEditionBreakpoint, sliceContentMaxWidth, editionMaxWidth, globalSpacingStyles, editionBreakpointWidths as styleguideEditionBreakpointWidths, editionBreakpoints as styleguideEditionBreakpoints } from '../Styleguide';
+describe('breakpoints', () => {
+    it('should return correct globalSpacingStyles value', () => {
+        expect(globalSpacingStyles).toEqual({
+            tabletHeadline: { marginBottom: 5 },
+            tabletTeaser: { marginTop: 5 }
+        });
+    });
+    it('should return correct sliceContentMaxWidth value', () => {
+        expect(sliceContentMaxWidth).toEqual(1180);
+    });
+    it('should return correct sliceContentMaxWidth value', () => {
+        expect(sliceContentMaxWidth).toEqual(1180);
+    });
+    it('should return correct editionBreakpointWidths value', () => {
+        expect(editionBreakpointWidths.wide).toEqual(1024);
+        expect(styleguideEditionBreakpointWidths.wide).toEqual(1024);
+    });
+    it('should return correct editionMaxWidth value', () => {
+        expect(editionMaxWidth).toEqual(1366);
+    });
+    it('should return correct breakpoint width value', () => {
+        expect(breakpoints.huge).toEqual(1320);
+    });
+    it('should retun correct editionBreakpoints value', () => {
+        expect(editionBreakpoints.huge).toEqual('huge');
+        expect(styleguideEditionBreakpoints.huge).toEqual('huge');
+    });
+    describe('getEditionBreakpoint()', () => {
+        it('should return correct getEditionBreakpoint value', () => {
+            expect(getEditionBreakpoint(600)).toEqual('small');
+        });
+        it('should return correct getEditionBreakpoint value', () => {
+            expect(getEditionBreakpoint(900)).toEqual('medium');
+        });
+        it('should return correct getEditionBreakpoint value', () => {
+            expect(getEditionBreakpoint(1100)).toEqual('wide');
+        });
+        it('should return correct getEditionBreakpoint value', () => {
+            expect(getEditionBreakpoint(1500)).toEqual('huge');
+        });
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWtwb2ludHMudGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3N0eWxlZ3VpZGUvX190ZXN0c19fL2JyZWFrcG9pbnRzLnRlc3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyx3QkFBd0IsQ0FBQztBQUVoQyxPQUFPLFdBQVcsRUFBRSxFQUNsQix1QkFBdUIsRUFDdkIsa0JBQWtCLEVBQ25CLE1BQU0sZ0JBQWdCLENBQUM7QUFFeEIsT0FBTyxFQUNMLG9CQUFvQixFQUNwQixvQkFBb0IsRUFDcEIsZUFBZSxFQUNmLG1CQUFtQixFQUNuQix1QkFBdUIsSUFBSSxpQ0FBaUMsRUFDNUQsa0JBQWtCLElBQUksNEJBQTRCLEVBQ25ELE1BQU0sZUFBZSxDQUFDO0FBRXZCLFFBQVEsQ0FBQyxhQUFhLEVBQUUsR0FBRyxFQUFFO0lBQzNCLEVBQUUsQ0FBQyxpREFBaUQsRUFBRSxHQUFHLEVBQUU7UUFDekQsTUFBTSxDQUFDLG1CQUFtQixDQUFDLENBQUMsT0FBTyxDQUFDO1lBQ2xDLGNBQWMsRUFBRSxFQUFFLFlBQVksRUFBRSxDQUFDLEVBQUU7WUFDbkMsWUFBWSxFQUFFLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRTtTQUMvQixDQUFDLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztJQUNILEVBQUUsQ0FBQyxrREFBa0QsRUFBRSxHQUFHLEVBQUU7UUFDMUQsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzdDLENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLGtEQUFrRCxFQUFFLEdBQUcsRUFBRTtRQUMxRCxNQUFNLENBQUMsb0JBQW9CLENBQUMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDN0MsQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMscURBQXFELEVBQUUsR0FBRyxFQUFFO1FBQzdELE1BQU0sQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkQsTUFBTSxDQUFDLGlDQUFpQyxDQUFDLElBQUksQ0FBQyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMvRCxDQUFDLENBQUMsQ0FBQztJQUVILEVBQUUsQ0FBQyw2Q0FBNkMsRUFBRSxHQUFHLEVBQUU7UUFDckQsTUFBTSxDQUFDLGVBQWUsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN4QyxDQUFDLENBQUMsQ0FBQztJQUVILEVBQUUsQ0FBQyw4Q0FBOEMsRUFBRSxHQUFHLEVBQUU7UUFDdEQsTUFBTSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDekMsQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMsK0NBQStDLEVBQUUsR0FBRyxFQUFFO1FBQ3ZELE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDaEQsTUFBTSxDQUFDLDRCQUE0QixDQUFDLElBQUksQ0FBQyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUM1RCxDQUFDLENBQUMsQ0FBQztJQUVILFFBQVEsQ0FBQyx3QkFBd0IsRUFBRSxHQUFHLEVBQUU7UUFDdEMsRUFBRSxDQUFDLGtEQUFrRCxFQUFFLEdBQUcsRUFBRTtZQUMxRCxNQUFNLENBQUMsb0JBQW9CLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDckQsQ0FBQyxDQUFDLENBQUM7UUFFSCxFQUFFLENBQUMsa0RBQWtELEVBQUUsR0FBRyxFQUFFO1lBQzFELE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN0RCxDQUFDLENBQUMsQ0FBQztRQUVILEVBQUUsQ0FBQyxrREFBa0QsRUFBRSxHQUFHLEVBQUU7WUFDMUQsTUFBTSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3JELENBQUMsQ0FBQyxDQUFDO1FBRUgsRUFBRSxDQUFDLGtEQUFrRCxFQUFFLEdBQUcsRUFBRTtZQUMxRCxNQUFNLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDckQsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=

package/dist/components/styleguide/__tests__/styleguide.test.d.ts

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

package/dist/components/styleguide/__tests__/styleguide.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import styleguide, { colours, fonts, spacing } from '../Styleguide';
+import { Animations, TcText, TcView } from '../components';
+import styles from '../helpers/storybookStyles';
+describe('styleguide', () => {
+    it('should return correct storybook style', () => {
+        expect(styles.box.height).toEqual(100);
+    });
+    it('should render the object of section colours', () => {
+        expect(typeof colours.section).toBe('object');
+    });
+    it('should render the object of functional colours', () => {
+        expect(typeof colours.functional).toBe('object');
+    });
+    it('should multiply spacing values and add px property', () => {
+        expect(spacing(10)).toEqual('50px');
+    });
+    describe('fonts', () => {
+        it('should render the font sizes at the default scale', () => {
+            expect(styleguide().fontSizes.bodyMobile).toEqual(17);
+        });
+        it('should render the line height factory default scale', () => {
+            expect(styleguide().lineHeight({
+                font: 'body',
+                fontSize: 'secondary'
+            })).toEqual(27);
+        });
+        it('should render the object of font references', () => {
+            expect(typeof fonts).toBe('object');
+        });
+        it('should return object when fontFactory is called', () => {
+            expect(styleguide().fontFactory({ font: 'headline', fontSize: 'body' })).toEqual({
+                fontFamily: 'TimesModern-Bold',
+                fontSize: 18,
+                lineHeight: undefined
+            });
+        });
+    });
+    describe('components', () => {
+        it('should render the Animations component', () => {
+            expect(render(React.createElement(Animations.FadeIn, null,
+                React.createElement(TcView, { style: styles.container },
+                    React.createElement(TcText, { style: styles.text }, "Hello World"))))).toBeTruthy();
+        });
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVndWlkZS50ZXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc3R5bGVndWlkZS9fX3Rlc3RzX18vc3R5bGVndWlkZS50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRWhELE9BQU8sVUFBVSxFQUFFLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDcEUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTNELE9BQU8sTUFBTSxNQUFNLDRCQUE0QixDQUFDO0FBRWhELFFBQVEsQ0FBQyxZQUFZLEVBQUUsR0FBRyxFQUFFO0lBQzFCLEVBQUUsQ0FBQyx1Q0FBdUMsRUFBRSxHQUFHLEVBQUU7UUFDL0MsTUFBTSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3pDLENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLDZDQUE2QyxFQUFFLEdBQUcsRUFBRTtRQUNyRCxNQUFNLENBQUMsT0FBTyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ2hELENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLGdEQUFnRCxFQUFFLEdBQUcsRUFBRTtRQUN4RCxNQUFNLENBQUMsT0FBTyxPQUFPLENBQUMsVUFBVSxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ25ELENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLG9EQUFvRCxFQUFFLEdBQUcsRUFBRTtRQUM1RCxNQUFNLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3RDLENBQUMsQ0FBQyxDQUFDO0lBRUgsUUFBUSxDQUFDLE9BQU8sRUFBRSxHQUFHLEVBQUU7UUFDckIsRUFBRSxDQUFDLG1EQUFtRCxFQUFFLEdBQUcsRUFBRTtZQUMzRCxNQUFNLENBQUMsVUFBVSxFQUFFLENBQUMsU0FBUyxDQUFDLFVBQVUsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN4RCxDQUFDLENBQUMsQ0FBQztRQUVILEVBQUUsQ0FBQyxxREFBcUQsRUFBRSxHQUFHLEVBQUU7WUFDN0QsTUFBTSxDQUNKLFVBQVUsRUFBRSxDQUFDLFVBQVUsQ0FBQztnQkFDdEIsSUFBSSxFQUFFLE1BQU07Z0JBQ1osUUFBUSxFQUFFLFdBQVc7YUFDdEIsQ0FBQyxDQUNILENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ2hCLENBQUMsQ0FBQyxDQUFDO1FBRUgsRUFBRSxDQUFDLDZDQUE2QyxFQUFFLEdBQUcsRUFBRTtZQUNyRCxNQUFNLENBQUMsT0FBTyxLQUFLLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDdEMsQ0FBQyxDQUFDLENBQUM7UUFFSCxFQUFFLENBQUMsaURBQWlELEVBQUUsR0FBRyxFQUFFO1lBQ3pELE1BQU0sQ0FDSixVQUFVLEVBQUUsQ0FBQyxXQUFXLENBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsQ0FBQyxDQUNqRSxDQUFDLE9BQU8sQ0FBQztnQkFDUixVQUFVLEVBQUUsa0JBQWtCO2dCQUM5QixRQUFRLEVBQUUsRUFBRTtnQkFDWixVQUFVLEVBQUUsU0FBUzthQUN0QixDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUMsQ0FBQyxDQUFDO0lBRUgsUUFBUSxDQUFDLFlBQVksRUFBRSxHQUFHLEVBQUU7UUFDMUIsRUFBRSxDQUFDLHdDQUF3QyxFQUFFLEdBQUcsRUFBRTtZQUNoRCxNQUFNLENBQ0osTUFBTSxDQUNKLG9CQUFDLFVBQVUsQ0FBQyxNQUFNO2dCQUNoQixvQkFBQyxNQUFNLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxTQUFTO29CQUM3QixvQkFBQyxNQUFNLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLGtCQUFzQixDQUN6QyxDQUNTLENBQ3JCLENBQ0YsQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNqQixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDLENBQUMifQ==

package/dist/components/styleguide/__tests__/themeFactory.test.d.ts

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

package/dist/components/styleguide/__tests__/themeFactory.test.js

@@ -0,0 +1,41 @@
+import '@testing-library/react';
+import themeFactory from '../themeFactory';
+describe('themeFactory()', () => {
+    it('should return correct theme when section nor template is provided', () => {
+        expect(themeFactory()).toEqual({
+            dropCapFont: 'dropCap',
+            headlineCase: null,
+            headlineFont: 'headline',
+            pullQuoteFont: 'headlineRegular',
+            sectionColour: '#1D1D1B'
+        });
+    });
+    it('should return correct theme for an indepth style page', () => {
+        expect(themeFactory('Style', 'indepth')).toEqual({
+            dropCapFont: 'styleMagazine',
+            headlineFont: 'styleMagazine',
+            pullQuoteFont: 'styleMagazine',
+            sectionColour: undefined,
+            headlineCase: 'uppercase'
+        });
+    });
+    it('should return correct theme for a maincomment style page', () => {
+        expect(themeFactory('Style', 'maincomment')).toEqual({
+            dropCapFont: 'dropCap',
+            headlineFont: 'headline',
+            pullQuoteFont: 'headlineRegular',
+            sectionColour: '#BC3385',
+            headlineCase: null
+        });
+    });
+    it('should return correct theme for an indepth cultureMagazine page', () => {
+        expect(themeFactory('culture', 'indepth')).toEqual({
+            dropCapFont: 'cultureMagazine',
+            headlineFont: 'cultureMagazine',
+            pullQuoteFont: 'cultureMagazine',
+            sectionColour: undefined,
+            headlineCase: null
+        });
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWVGYWN0b3J5LnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zdHlsZWd1aWRlL19fdGVzdHNfXy90aGVtZUZhY3RvcnkudGVzdC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLHdCQUF3QixDQUFDO0FBQ2hDLE9BQU8sWUFBWSxNQUFNLGlCQUFpQixDQUFDO0FBRTNDLFFBQVEsQ0FBQyxnQkFBZ0IsRUFBRSxHQUFHLEVBQUU7SUFDOUIsRUFBRSxDQUFDLG1FQUFtRSxFQUFFLEdBQUcsRUFBRTtRQUMzRSxNQUFNLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQyxPQUFPLENBQUM7WUFDN0IsV0FBVyxFQUFFLFNBQVM7WUFDdEIsWUFBWSxFQUFFLElBQUk7WUFDbEIsWUFBWSxFQUFFLFVBQVU7WUFDeEIsYUFBYSxFQUFFLGlCQUFpQjtZQUNoQyxhQUFhLEVBQUUsU0FBUztTQUN6QixDQUFDLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztJQUVILEVBQUUsQ0FBQyx1REFBdUQsRUFBRSxHQUFHLEVBQUU7UUFDL0QsTUFBTSxDQUFDLFlBQVksQ0FBQyxPQUFPLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUM7WUFDL0MsV0FBVyxFQUFFLGVBQWU7WUFDNUIsWUFBWSxFQUFFLGVBQWU7WUFDN0IsYUFBYSxFQUFFLGVBQWU7WUFDOUIsYUFBYSxFQUFFLFNBQVM7WUFDeEIsWUFBWSxFQUFFLFdBQVc7U0FDMUIsQ0FBQyxDQUFDO0lBQ0wsQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMsMERBQTBELEVBQUUsR0FBRyxFQUFFO1FBQ2xFLE1BQU0sQ0FBQyxZQUFZLENBQUMsT0FBTyxFQUFFLGFBQWEsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDO1lBQ25ELFdBQVcsRUFBRSxTQUFTO1lBQ3RCLFlBQVksRUFBRSxVQUFVO1lBQ3hCLGFBQWEsRUFBRSxpQkFBaUI7WUFDaEMsYUFBYSxFQUFFLFNBQVM7WUFDeEIsWUFBWSxFQUFFLElBQUk7U0FDbkIsQ0FBQyxDQUFDO0lBQ0wsQ0FBQyxDQUFDLENBQUM7SUFFSCxFQUFFLENBQUMsaUVBQWlFLEVBQUUsR0FBRyxFQUFFO1FBQ3pFLE1BQU0sQ0FBQyxZQUFZLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDO1lBQ2pELFdBQVcsRUFBRSxpQkFBaUI7WUFDOUIsWUFBWSxFQUFFLGlCQUFpQjtZQUMvQixhQUFhLEVBQUUsaUJBQWlCO1lBQ2hDLGFBQWEsRUFBRSxTQUFTO1lBQ3hCLFlBQVksRUFBRSxJQUFJO1NBQ25CLENBQUMsQ0FBQztJQUNMLENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDLENBQUMifQ==

package/dist/components/styleguide/breakpoints.d.ts

@@ -0,0 +1,37 @@
+declare const editionBreakpoints: {
+    huge: string;
+    medium: string;
+    small: string;
+    wide: string;
+};
+declare const editionBreakpointWidths: {
+    huge: number;
+    medium: number;
+    wide: number;
+};
+declare const editionMaxWidth: number;
+declare const sliceContentMaxWidth = 1180;
+declare const getEditionBreakpoint: (width: {}) => string;
+export { editionBreakpoints, editionMaxWidth, editionBreakpointWidths, sliceContentMaxWidth, getEditionBreakpoint };
+declare const _default: {
+    huge: number;
+    medium: number;
+    nativeTablet: number;
+    nativeTabletWide: number;
+    small: number;
+    wide: number;
+    editionBreakpoints: {
+        huge: string;
+        medium: string;
+        small: string;
+        wide: string;
+    };
+    editionMaxWidth: number;
+    editionBreakpointWidths: {
+        huge: number;
+        medium: number;
+        wide: number;
+    };
+    sliceContentMaxWidth: number;
+};
+export default _default;

package/dist/components/styleguide/breakpoints.js

@@ -0,0 +1,42 @@
+const widths = {
+    huge: 1320,
+    medium: 768,
+    nativeTablet: 660,
+    nativeTabletWide: 1194,
+    small: 520,
+    wide: 1024
+};
+const editionBreakpoints = {
+    huge: 'huge',
+    medium: 'medium',
+    small: 'small',
+    wide: 'wide'
+};
+const editionBreakpointWidths = {
+    huge: 1366,
+    medium: 768,
+    wide: 1024
+};
+const editionMaxWidth = editionBreakpointWidths.huge;
+const sliceContentMaxWidth = 1180;
+const getEditionBreakpoint = (width) => {
+    if (width < editionBreakpointWidths.medium) {
+        return editionBreakpoints.small;
+    }
+    if (width < editionBreakpointWidths.wide) {
+        return editionBreakpoints.medium;
+    }
+    if (width < editionBreakpointWidths.huge) {
+        return editionBreakpoints.wide;
+    }
+    return editionBreakpoints.huge;
+};
+export { editionBreakpoints, editionMaxWidth, editionBreakpointWidths, sliceContentMaxWidth, getEditionBreakpoint };
+export default {
+    editionBreakpoints,
+    editionMaxWidth,
+    editionBreakpointWidths,
+    sliceContentMaxWidth,
+    ...widths
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWtwb2ludHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zdHlsZWd1aWRlL2JyZWFrcG9pbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE1BQU0sR0FBRztJQUNiLElBQUksRUFBRSxJQUFJO0lBQ1YsTUFBTSxFQUFFLEdBQUc7SUFDWCxZQUFZLEVBQUUsR0FBRztJQUNqQixnQkFBZ0IsRUFBRSxJQUFJO0lBQ3RCLEtBQUssRUFBRSxHQUFHO0lBQ1YsSUFBSSxFQUFFLElBQUk7Q0FDWCxDQUFDO0FBRUYsTUFBTSxrQkFBa0IsR0FBRztJQUN6QixJQUFJLEVBQUUsTUFBTTtJQUNaLE1BQU0sRUFBRSxRQUFRO0lBQ2hCLEtBQUssRUFBRSxPQUFPO0lBQ2QsSUFBSSxFQUFFLE1BQU07Q0FDYixDQUFDO0FBRUYsTUFBTSx1QkFBdUIsR0FBRztJQUM5QixJQUFJLEVBQUUsSUFBSTtJQUNWLE1BQU0sRUFBRSxHQUFHO0lBQ1gsSUFBSSxFQUFFLElBQUk7Q0FDWCxDQUFDO0FBQ0YsTUFBTSxlQUFlLEdBQUcsdUJBQXVCLENBQUMsSUFBSSxDQUFDO0FBQ3JELE1BQU0sb0JBQW9CLEdBQUcsSUFBSSxDQUFDO0FBRWxDLE1BQU0sb0JBQW9CLEdBQUcsQ0FBQyxLQUFTLEVBQUUsRUFBRTtJQUN6QyxJQUFJLEtBQUssR0FBRyx1QkFBdUIsQ0FBQyxNQUFNLEVBQUU7UUFDMUMsT0FBTyxrQkFBa0IsQ0FBQyxLQUFLLENBQUM7S0FDakM7SUFDRCxJQUFJLEtBQUssR0FBRyx1QkFBdUIsQ0FBQyxJQUFJLEVBQUU7UUFDeEMsT0FBTyxrQkFBa0IsQ0FBQyxNQUFNLENBQUM7S0FDbEM7SUFDRCxJQUFJLEtBQUssR0FBRyx1QkFBdUIsQ0FBQyxJQUFJLEVBQUU7UUFDeEMsT0FBTyxrQkFBa0IsQ0FBQyxJQUFJLENBQUM7S0FDaEM7SUFDRCxPQUFPLGtCQUFrQixDQUFDLElBQUksQ0FBQztBQUNqQyxDQUFDLENBQUM7QUFFRixPQUFPLEVBQ0wsa0JBQWtCLEVBQ2xCLGVBQWUsRUFDZix1QkFBdUIsRUFDdkIsb0JBQW9CLEVBQ3BCLG9CQUFvQixFQUNyQixDQUFDO0FBRUYsZUFBZTtJQUNiLGtCQUFrQjtJQUNsQixlQUFlO0lBQ2YsdUJBQXVCO0lBQ3ZCLG9CQUFvQjtJQUNwQixHQUFHLE1BQU07Q0FDVixDQUFDIn0=

package/dist/components/styleguide/colours/colours.d.ts

@@ -0,0 +1,103 @@
+declare const _default: {
+    functional: {
+        action: string;
+        actionPressed: string;
+        articleFlagExclusive: string;
+        articleFlagNew: string;
+        articleFlagUpdated: string;
+        backgroundPrimary: string;
+        backgroundSecondary: string;
+        black: string;
+        border: string;
+        brandColour: string;
+        bullet: string;
+        contrast: string;
+        darkSupplement: string;
+        greyLabel: string;
+        greyStickyBarBoxShadow: string;
+        greyStickyBarBorderBottom: string;
+        gutter: string;
+        keyline: string;
+        modalBackground: string;
+        newsletterPuffBackground: string;
+        overlayGradientEnd: string;
+        overlayGradientFallback: string;
+        overlayGradientStart: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        transparentBlack: string;
+        transparentWhite: string;
+        white: string;
+        whiteGrey: string;
+    };
+    secondarySectionColours: {
+        'The Sunday Times Magazine': string;
+        thesundaytimesmagazine: string;
+    };
+    section: {
+        'Arts & Features': string;
+        'Bricks & Mortar': string;
+        Business: string;
+        Comment: string;
+        Culture: string;
+        Driving: string;
+        Focus: string;
+        Gardening: string;
+        Home: string;
+        Ireland: string;
+        Law: string;
+        Money: string;
+        News: string;
+        'News Review': string;
+        Puzzles: string;
+        Register: string;
+        'Saturday Review': string;
+        Scotland: string;
+        Sport: string;
+        Style: string;
+        'Tech & Games': string;
+        'The Dish': string;
+        'The Game': string;
+        'The Sunday Times Magazine': string;
+        'The Times Magazine': string;
+        Times2: string;
+        "Today's Magazines": string;
+        Travel: string;
+        Weekend: string;
+        World: string;
+        artsfeatures: string;
+        bricksmortar: string;
+        business: string;
+        comment: string;
+        culture: string;
+        default: string;
+        defcon: string;
+        driving: string;
+        focus: string;
+        gardening: string;
+        home: string;
+        ireland: string;
+        law: string;
+        money: string;
+        news: string;
+        newsreview: string;
+        puzzle: string;
+        register: string;
+        saturdayreview: string;
+        scotland: string;
+        sport: string;
+        style: string;
+        techgames: string;
+        thedish: string;
+        thegame: string;
+        thesundaytimesmagazine: string;
+        thetimesmagazine: string;
+        times2: string;
+        todaysmagazines: string;
+        travel: string;
+        weekend: string;
+        world: string;
+    };
+};
+export default _default;

package/dist/components/styleguide/colours/colours.js

@@ -0,0 +1,8 @@
+import { sectionColours, secondarySectionColours } from './section';
+import { functionalColours } from './functional';
+export default {
+    functional: functionalColours,
+    secondarySectionColours,
+    section: sectionColours
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Vycy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3N0eWxlZ3VpZGUvY29sb3Vycy9jb2xvdXJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsY0FBYyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUVqRCxlQUFlO0lBQ2IsVUFBVSxFQUFFLGlCQUFpQjtJQUM3Qix1QkFBdUI7SUFDdkIsT0FBTyxFQUFFLGNBQWM7Q0FDeEIsQ0FBQyJ9

package/dist/components/styleguide/colours/functional.d.ts

@@ -0,0 +1,32 @@
+export declare const functionalColours: {
+    action: string;
+    actionPressed: string;
+    articleFlagExclusive: string;
+    articleFlagNew: string;
+    articleFlagUpdated: string;
+    backgroundPrimary: string;
+    backgroundSecondary: string;
+    black: string;
+    border: string;
+    brandColour: string;
+    bullet: string;
+    contrast: string;
+    darkSupplement: string;
+    greyLabel: string;
+    greyStickyBarBoxShadow: string;
+    greyStickyBarBorderBottom: string;
+    gutter: string;
+    keyline: string;
+    modalBackground: string;
+    newsletterPuffBackground: string;
+    overlayGradientEnd: string;
+    overlayGradientFallback: string;
+    overlayGradientStart: string;
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    transparentBlack: string;
+    transparentWhite: string;
+    white: string;
+    whiteGrey: string;
+};