@times-components/ts-components 1.35.1 → 1.35.4

package/dist/components/styleguide/styleguide.stories.js

@@ -1,71 +0,0 @@
-import React, { Fragment } from 'react';
-import { storiesOf } from '@storybook/react';
-import { TcScrollView } from '@times-components/utils';
-import { TcText, TcView } from './components';
-import timesStyleguide, { Animations, colours, fonts } from './Styleguide';
-import styles from './helpers/storybookStyles';
-const getStories = (colourMap) => {
-    const colourBoxes = Object.keys(colourMap).map(colourName => (React.createElement(TcView, { style: styles.container },
-        React.createElement(TcView, { style: { ...styles.box, backgroundColor: colourMap[colourName] } }),
-        React.createElement(TcText, { style: styles.text },
-            colourName,
-            " - ",
-            colourMap[colourName]))));
-    return React.createElement(TcView, { style: styles.display }, colourBoxes);
-};
-const fontDisplayer = (fontFamily, phrase, fontSizes) => Object.keys(fontSizes).map(fontSize => (React.createElement(Fragment, { key: fontSize },
-    React.createElement(TcText, { style: styles.subHeadline }, fontSize),
-    React.createElement(TcText, { style: {
-            ...styles.showoffFonts,
-            fontFamily,
-            fontSize: fontSizes[fontSize]
-        } }, phrase))));
-const fontFixture = () => {
-    const styleguide = timesStyleguide();
-    const phrase = 'The Quick Brown Fox Jumps Over the Lazy Dog';
-    return (React.createElement(TcScrollView, null,
-        React.createElement(TcView, { style: styles.showoffFontsContainer },
-            React.createElement(TcText, { style: styles.headline }, "Body"),
-            fontDisplayer(fonts.body, phrase, styleguide.fontSizes)),
-        React.createElement(TcView, { style: styles.showoffFontsContainer },
-            React.createElement(TcText, { style: styles.headline }, "Body Regular"),
-            React.createElement(TcText, null, "Used for the body copy of articles or as the teaser copy on article links."),
-            fontDisplayer(fonts.bodyRegular, phrase, styleguide.fontSizes)),
-        React.createElement(TcView, { style: styles.showoffFontsContainer },
-            React.createElement(TcText, { style: styles.headline }, "Body Regular Small Caps"),
-            React.createElement(TcText, null, "Always used as a lowercase font, it is typically used to support the headline font. It\u2019s used in various different places e.g. Journalist pages for the Journalist job title, article flags and show more buttons on the homepage."),
-            fontDisplayer(fonts.bodyRegularSmallCaps, phrase.toLowerCase(), styleguide.fontSizes)),
-        React.createElement(TcView, { style: styles.showoffFontsContainer },
-            React.createElement(TcText, { style: styles.headline }, "Headline"),
-            React.createElement(TcText, null, "Used as the headline for components and articles across the site."),
-            fontDisplayer(fonts.headline, phrase, styleguide.fontSizes)),
-        React.createElement(TcView, { style: styles.showoffFontsContainer },
-            React.createElement(TcText, { style: styles.headline }, "Headline Regular"),
-            React.createElement(TcText, null, "Used primarily to style subheadings for components and stand firsts on the homepage and articles."),
-            fontDisplayer(fonts.headlineRegular, phrase, styleguide.fontSizes)),
-        React.createElement(TcView, { style: styles.showoffFontsContainer },
-            React.createElement(TcText, { style: styles.headline }, "Supporting"),
-            React.createElement(TcText, null, "Used as a supporting typeface in a variety of places including messaging banners, buttons, links, homepage labels and tags."),
-            fontDisplayer(fonts.supporting, phrase, styleguide.fontSizes)),
-        React.createElement(TcView, { style: styles.showoffFontsContainer },
-            React.createElement(TcText, { style: styles.headline }, "Style Magazine (Century Gothic Bold)"),
-            React.createElement(TcText, null, "Used for theme specific headlines, drop caps and pull-quotes in the Style magazine"),
-            fontDisplayer(fonts.styleMagazine, phrase, styleguide.fontSizes)),
-        React.createElement(TcView, { style: styles.showoffFontsContainer },
-            React.createElement(TcText, { style: styles.headline }, "Culture Magazine (Flama Bold)"),
-            React.createElement(TcText, null, "Used for theme specific headlines, drop caps and pull-quotes in the Culture magazine"),
-            fontDisplayer(fonts.cultureMagazine, phrase, styleguide.fontSizes)),
-        React.createElement(TcView, { style: styles.showoffFontsContainer },
-            React.createElement(TcText, { style: styles.headline }, "Sunday Times Magazine (Tiempos Headline Bold)"),
-            React.createElement(TcText, null, "Used for theme specific headlines, drop caps and pull-quotes in the Sunday Times Magazine"),
-            fontDisplayer(fonts.stMagazine, phrase, styleguide.fontSizes))));
-};
-storiesOf('Typescript Component/styleguide', module)
-    .add('Fonts', () => fontFixture())
-    .add('Animations', () => (React.createElement(Animations.FadeIn, null,
-    React.createElement(TcView, { style: styles.animationBox },
-        React.createElement(TcText, { style: styles.text }, "Fade In")))))
-    .add('Section Colours', () => getStories(colours.section))
-    .add('Functional colours', () => getStories(colours.functional))
-    .add('Secondary Section Colours', () => getStories(colours.secondarySectionColours));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVndWlkZS5zdG9yaWVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc3R5bGVndWlkZS9zdHlsZWd1aWRlLnN0b3JpZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBQ3hDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdkQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFOUMsT0FBTyxlQUFlLEVBQUUsRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUMzRSxPQUFPLE1BQU0sTUFBTSwyQkFBMkIsQ0FBQztBQUUvQyxNQUFNLFVBQVUsR0FBRyxDQUFDLFNBQWlDLEVBQUUsRUFBRTtJQUN2RCxNQUFNLFdBQVcsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDLENBQzNELG9CQUFDLE1BQU0sSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLFNBQVM7UUFDN0Isb0JBQUMsTUFBTSxJQUNMLEtBQUssRUFBRSxFQUFFLEdBQUcsTUFBTSxDQUFDLEdBQUcsRUFBRSxlQUFlLEVBQUUsU0FBUyxDQUFDLFVBQVUsQ0FBQyxFQUFFLEdBQ2hFO1FBQ0Ysb0JBQUMsTUFBTSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSTtZQUN2QixVQUFVOztZQUFLLFNBQVMsQ0FBQyxVQUFVLENBQUMsQ0FDOUIsQ0FDRixDQUNWLENBQUMsQ0FBQztJQUVILE9BQU8sb0JBQUMsTUFBTSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsT0FBTyxJQUFHLFdBQVcsQ0FBVSxD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

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

@@ -1,8 +0,0 @@
-declare const _default: (sectionParam?: string | undefined, templateParam?: string | undefined) => {
-    dropCapFont: string;
-    headlineFont: string;
-    pullQuoteFont: string;
-    sectionColour: string;
-    headlineCase: string | null;
-};
-export default _default;

package/dist/components/styleguide/themeFactory.js

@@ -1,59 +0,0 @@
-import { sectionColours, secondarySectionColours } from './colours/section';
-const sectionColourPickerConfig = {
-    indepth: {},
-    magazinecomment: {
-        ...sectionColours,
-        ...secondarySectionColours
-    },
-    magazinestandard: {
-        ...sectionColours,
-        ...secondarySectionColours
-    },
-    maincomment: {
-        ...sectionColours
-    },
-    mainstandard: {
-        ...sectionColours
-    },
-    takeoverpage: {}
-};
-const magazineSections = {
-    culture: 'cultureMagazine',
-    Culture: 'cultureMagazine',
-    style: 'styleMagazine',
-    Style: 'styleMagazine',
-    'The Sunday Times Magazine': 'stMagazine',
-    thesundaytimesmagazine: 'stMagazine',
-    'the sunday times magazine': 'stMagazine'
-};
-const magazineSectionsConfig = {
-    indepth: magazineSections,
-    magazinecomment: magazineSections,
-    magazinestandard: magazineSections,
-    maincomment: {},
-    mainstandard: {},
-    takeoverpage: {}
-};
-const sectionColourPicker = (section, template) => {
-    return sectionColourPickerConfig[template][section];
-};
-const magazineFontPicker = (defaultFont, section, template) => {
-    return magazineSectionsConfig[template][section] || defaultFont;
-};
-const headlineCasePicker = (section, template) => section &&
-    section.toLowerCase() === 'style' &&
-    ['indepth', 'magazinestandard', 'magazinecomment'].includes(template)
-    ? 'uppercase'
-    : null;
-export default (sectionParam, templateParam) => {
-    const section = sectionParam || 'default';
-    const template = templateParam || 'mainstandard';
-    return {
-        dropCapFont: magazineFontPicker('dropCap', section, template),
-        headlineFont: magazineFontPicker('headline', section, template),
-        pullQuoteFont: magazineFontPicker('headlineRegular', section, template),
-        sectionColour: sectionColourPicker(section, template),
-        headlineCase: headlineCasePicker(section, template)
-    };
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWVGYWN0b3J5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc3R5bGVndWlkZS90aGVtZUZhY3RvcnkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUU1RSxNQUFNLHlCQUF5QixHQUEyQztJQUN4RSxPQUFPLEVBQUUsRUFBRTtJQUNYLGVBQWUsRUFBRTtRQUNmLEdBQUcsY0FBYztRQUNqQixHQUFHLHVCQUF1QjtLQUMzQjtJQUNELGdCQUFnQixFQUFFO1FBQ2hCLEdBQUcsY0FBYztRQUNqQixHQUFHLHVCQUF1QjtLQUMzQjtJQUNELFdBQVcsRUFBRTtRQUNYLEdBQUcsY0FBYztLQUNsQjtJQUNELFlBQVksRUFBRTtRQUNaLEdBQUcsY0FBYztLQUNsQjtJQUNELFlBQVksRUFBRSxFQUFFO0NBQ2pCLENBQUM7QUFFRixNQUFNLGdCQUFnQixHQUEyQjtJQUMvQyxPQUFPLEVBQUUsaUJBQWlCO0lBQzFCLE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsS0FBSyxFQUFFLGVBQWU7SUFDdEIsS0FBSyxFQUFFLGVBQWU7SUFDdEIsMkJBQTJCLEVBQUUsWUFBWTtJQUN6QyxzQkFBc0IsRUFBRSxZQUFZO0lBQ3BDLDJCQUEyQixFQUFFLFlBQVk7Q0FDMUMsQ0FBQztBQUVGLE1BQU0sc0JBQXNCLEdBQTJDO0lBQ3JFLE9BQU8sRUFBRSxnQkFBZ0I7SUFDekIsZUFBZSxFQUFFLGdCQUFnQjtJQUNqQyxnQkFBZ0IsRUFBRSxnQkFBZ0I7SUFDbEMsV0FBVyxFQUFFLEVBQUU7SUFDZixZQUFZLEVBQUUsRUFBRTtJQUNoQixZQUFZLEVBQUUsRUFBRTtDQUNqQixDQUFDO0FBSUYsTUFBTSxtQkFBbUIsR0FBRyxDQUMxQixPQUF3RCxFQUN4RCxRQUFnRCxFQUNoRCxFQUFFO0lBQ0YsT0FBTyx5QkFBeUIsQ0FBQyxRQUFRLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQztBQUN0RCxDQUFDLENBQUM7QUFFRixNQUFNLGtCQUFrQixHQUFHLENBQ3pCLFdBQW1CLEVBQ25CLE9BQXdELEVBQ3hELFFBQTZDLEVBQzdDLEVBQUU7SUFDRixPQUFPLHNCQUFzQixDQUFDLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxJQUFJLFdBQVcsQ0FBQztBQUNsRSxDQUFDLENBQUM7QUFFRixNQUFNLGtCQUFrQixHQUFHLENBQ3pCLE9BQTRDLEVBQzVDLFFBQTZDLEVBQzdDLEVBQUUsQ0FDRixPQUFPO0lBQ1AsT0FBTyxDQUFDLFdBQVcsRUFBRSxLQUFLLE9BQU87SUFDakMsQ0FBQyxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsaUJBQWlCLENBQUMsQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDO0lBQ25FLENBQUMsQ0FBQyxXQUFXO0lBQ2IsQ0FBQyxDQUFDLElBQUksQ0FBQztBQUVYLGVBQWUsQ0FDYixZQUFrRCxFQUNsRCxhQUFtRCxFQUNuRCxFQUFFO0lBQ0YsTUFBTSxPQUFPLEdBQUcsWUFBWSxJQUFJLFNBQVMsQ0FBQztJQUMxQyxNQUFNLFFBQVEsR0FBRyxhQUFhLElBQUksY0FBYyxDQUFDO0lBRWpELE9BQU87UUFDTCxXQUFXLEVBQUUsa0JBQWtCLENBQUMsU0FBUyxFQUFFLE9BQU8sRUFBRSxRQUFRLENBQUM7UUFDN0QsWUFBWSxFQUFFLGtCQUFrQixDQUFDLFVBQVUsRUFBRSxPQUFPLEVBQUUsUUFBUSxDQUFDO1FBQy9ELGFBQWEsRUFBRSxrQkFBa0IsQ0FBQyxpQkFBaUIsRUFBRSxPQUFPLEVBQUUsUUFBUSxDQUFDO1FBQ3ZFLGFBQWEsRUFBRSxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsUUFBUSxDQUFDO1FBQ3JELFlBQVksRUFBRSxrQkFBa0IsQ0FBQyxPQUFPLEVBQUUsUUFBUSxDQUFDO0tBQ3BELENBQUM7QUFDSixDQUFDLENBQUMifQ==

package/src/components/styleguide/Styleguide.tsx

@@ -1,54 +0,0 @@
-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
-};

package/src/components/styleguide/__tests__/breakpoints.test.ts

@@ -1,67 +0,0 @@
-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');
-    });
-  });
-});

package/src/components/styleguide/__tests__/styleguide.test.tsx

@@ -1,68 +0,0 @@
-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(
-          <Animations.FadeIn>
-            <TcView style={styles.container}>
-              <TcText style={styles.text}>Hello World</TcText>
-            </TcView>
-          </Animations.FadeIn>
-        )
-      ).toBeTruthy();
-    });
-  });
-});

package/src/components/styleguide/__tests__/themeFactory.test.ts

@@ -1,44 +0,0 @@
-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
-    });
-  });
-});

package/src/components/styleguide/breakpoints.tsx

@@ -1,52 +0,0 @@
-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
-};

package/src/components/styleguide/colours/colours.tsx

@@ -1,8 +0,0 @@
-import { sectionColours, secondarySectionColours } from './section';
-import { functionalColours } from './functional';
-
-export default {
-  functional: functionalColours,
-  secondarySectionColours,
-  section: sectionColours
-};

package/src/components/styleguide/colours/functional.tsx

@@ -1,32 +0,0 @@
-export const functionalColours = {
-  action: '#006699',
-  actionPressed: '#0077B3',
-  articleFlagExclusive: '#C51D24',
-  articleFlagNew: '#E34605',
-  articleFlagUpdated: '#3C81BE',
-  backgroundPrimary: '#F9F9F9',
-  backgroundSecondary: '#EDEDED',
-  black: '#000000',
-  border: '#F0F0F0',
-  brandColour: '#1D1D1B',
-  bullet: '#103546',
-  contrast: '#FFFFFF',
-  darkSupplement: '#272D34',
-  greyLabel: '#CCC',
-  greyStickyBarBoxShadow: '#c9c7c7ed',
-  greyStickyBarBorderBottom: '#ffffffdb',
-  gutter: '#f0f0f0',
-  keyline: '#DBDBDB',
-  modalBackground: '#000000',
-  newsletterPuffBackground: '#F9F8F3',
-  overlayGradientEnd: '#00000000',
-  overlayGradientFallback: '#000000B3',
-  overlayGradientStart: '#000000E6',
-  primary: '#333333',
-  secondary: '#696969',
-  tertiary: '#4D4D4D',
-  transparentBlack: 'rgba(0, 0, 0, 0.6)',
-  transparentWhite: 'rgba(255, 255, 255, 0.3)',
-  white: '#FFFFFF',
-  whiteGrey: '#F5F5F5'
-};

package/src/components/styleguide/colours/section.tsx

@@ -1,81 +0,0 @@
-const primaryColoursBase = {
-  artsfeatures: '#622956',
-  bricksmortar: '#006469',
-  business: '#005B8D',
-  comment: '#850029',
-  culture: '#7B0046',
-  default: '#1D1D1B',
-  defcon: '#FF1D25',
-  driving: '#C04605',
-  focus: '#CC0000',
-  gardening: '#00313B',
-  home: '#8D724D',
-  ireland: '#004E45',
-  law: '#691D26',
-  money: '#006A74',
-  news: '#13354E',
-  newsreview: '#004D6D',
-  puzzle: '#C74600',
-  register: '#6C6C69',
-  saturdayreview: '#A31D24',
-  scotland: '#00233E',
-  sport: '#008347',
-  style: '#BC3385',
-  techgames: '#1A1F24',
-  thedish: '#DB133B',
-  thegame: '#006469',
-  thesundaytimesmagazine: '#1D1D1D',
-  thetimesmagazine: '#1D1D1D',
-  times2: '#622956',
-  todaysmagazines: '#1D1D1B',
-  travel: '#2C79AD',
-  weekend: '#05829A',
-  world: '#636C17'
-};
-
-const primaryColours = {
-  'Arts & Features': primaryColoursBase.artsfeatures,
-  'Bricks & Mortar': primaryColoursBase.bricksmortar,
-  Business: primaryColoursBase.business,
-  Comment: primaryColoursBase.comment,
-  Culture: primaryColoursBase.culture,
-  Driving: primaryColoursBase.driving,
-  Focus: primaryColoursBase.focus,
-  Gardening: primaryColoursBase.gardening,
-  Home: primaryColoursBase.home,
-  Ireland: primaryColoursBase.ireland,
-  Law: primaryColoursBase.law,
-  Money: primaryColoursBase.money,
-  News: primaryColoursBase.news,
-  'News Review': primaryColoursBase.newsreview,
-  Puzzles: primaryColoursBase.puzzle,
-  Register: primaryColoursBase.register,
-  'Saturday Review': primaryColoursBase.saturdayreview,
-  Scotland: primaryColoursBase.scotland,
-  Sport: primaryColoursBase.sport,
-  Style: primaryColoursBase.style,
-  'Tech & Games': primaryColoursBase.techgames,
-  'The Dish': primaryColoursBase.thedish,
-  'The Game': primaryColoursBase.thegame,
-  'The Sunday Times Magazine': primaryColoursBase.thesundaytimesmagazine,
-  'The Times Magazine': primaryColoursBase.thetimesmagazine,
-  Times2: primaryColoursBase.times2,
-  "Today's Magazines": primaryColoursBase.todaysmagazines,
-  Travel: primaryColoursBase.travel,
-  Weekend: primaryColoursBase.weekend,
-  World: primaryColoursBase.world
-};
-
-const secondaryColoursBase = {
-  thesundaytimesmagazine: '#F13D00'
-};
-
-const secondaryColours = {
-  'The Sunday Times Magazine': secondaryColoursBase.thesundaytimesmagazine
-};
-
-export const sectionColours = { ...primaryColoursBase, ...primaryColours };
-export const secondarySectionColours = {
-  ...secondaryColoursBase,
-  ...secondaryColours
-};

package/src/components/styleguide/components/Animations.tsx

@@ -1,22 +0,0 @@
-import { TcView } from '@times-components/utils';
-import styled, { keyframes } from 'styled-components';
-
-const fadingAnimation = keyframes`
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-`;
-
-const FadeIn = styled(TcView)`
-  animation: ${fadingAnimation} 0.3s ease-in-out;
-`;
-
-const Animations = {
-  FadeIn
-};
-
-export default Animations;

package/src/components/styleguide/components/TcText.tsx

@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-// not sure how else to put the default styles, this the default style for a React Native <Text/> component
-import { CSSProperties } from 'react';
-
-type Style = CSSProperties | undefined;
-
-export default styled.div<{ style?: Style }>`
-  border: 0px solid black;
-  box-sizing: border-box;
-  color: ${({ style }) =>
-    style && style.color ? style.color : 'rgb(0, 0, 0)'};
-  display: inline;
-  font: 14px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Ubuntu, 'Helvetica Neue', sans-serif;
-  margin: 0px;
-  padding: 0px;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-  font-size: ${({ style }) =>
-    style && style.fontSize ? style.fontSize : '14px'};
-  font-weight: ${({ style }) => style && style.fontWeight && style.fontWeight};
-  margin-bottom: ${({ style }) =>
-    style && style.marginBottom ? style.marginBottom : '0px'};
-  margin-left: ${({ style }) =>
-    style && style.marginLeft ? style.marginLeft : '0px'};
-  margin-top: ${({ style }) =>
-    style && style.marginTop ? style.marginTop : '0px'};
-  font-family: ${({ style }) =>
-    style && style.fontFamily
-      ? style.fontFamily
-      : 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif'};
-`;

package/src/components/styleguide/components/TcView.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-import { CSSProperties } from 'react';
-
-type Style = CSSProperties | undefined;
-
-export default styled.div<{ style?: Style }>`
-  border: 0px solid black;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  margin: ${({ style }) => (style && style.margin ? style.margin : '0px')};
-  border-bottom-color: ${({ style }) =>
-    style && style.borderBottomColor ? style.borderBottomColor : 'black'};
-  border-bottom-width: ${({ style }) =>
-    style && style.borderBottomWidth ? style.borderBottomWidth : '0px'};
-  border-radius: ${({ style }) =>
-    style && style.borderRadius && style.borderRadius};
-  overflow: ${({ style }) => style && style.overflow && style.overflow};
-  height: ${({ style }) => style && style.height && style.height};
-  width: ${({ style }) => style && style.width && style.width};
-  margin: 0px;
-  min-height: 0px;
-  min-width: 0px;
-  padding: 0px;
-  position: relative;
-  z-index: 0;
-`;

package/src/components/styleguide/components/index.tsx

@@ -1,5 +0,0 @@
-import TcView from './TcView';
-import TcText from './TcText';
-import Animations from './Animations';
-
-export { TcView, TcText, Animations };