@times-components/ts-components 1.35.1 → 1.35.4

package/src/components/styleguide/fonts/font-factory.tsx

@@ -1,18 +0,0 @@
-import styleguide from '../Styleguide';
-import { timesFontSizes, fontStyles } from './fonts';
-import lineHeight from '../lineHeight';
-
-export default ({
-  font,
-  fontSize
-}: {
-  font: keyof typeof fontStyles;
-  fontSize: keyof typeof timesFontSizes;
-}) => {
-  const styles = styleguide();
-  return {
-    fontFamily: styles.fonts[font],
-    fontSize: timesFontSizes[fontSize],
-    lineHeight: lineHeight({ font, fontSize })
-  };
-};

package/src/components/styleguide/fonts/font-sizes.tsx

@@ -1,46 +0,0 @@
-export default {
-  articleHeadline: 45,
-  articleMeta: 15,
-  body: 18,
-  bodyMobile: 17,
-  button: 16,
-  caption: 13,
-  cardHeadline: 27,
-  cardMeta: 13,
-  cardMetaMobile: 12,
-  commentsGuidelines: 13,
-  commentsHeadline: 27,
-  credits: 9,
-  headline: 30,
-  imageOverlayTextSmall: 11,
-  infoTitle: 22,
-  keyFactsTitle: 24,
-  leadHeadline: 26,
-  link: 13,
-  meta: 14,
-  newsletterPuffLabel: 12,
-  newsletterPuffHeadline: 28,
-  newsletterPuffCopy: 15,
-  pageComponentHeadline: 25,
-  pageHeadline: 40,
-  pageHeadlineLarge: 50,
-  pagingMeta: 15,
-  puffLink: 11,
-  secondary: 16,
-  sliceHeadline: 32,
-  smallestHeadline: 20,
-  smallHeadline: 22,
-  strapline: 22,
-  teaser: 14,
-  tertiary: 15,
-  tileLeadHeadline: 35,
-  heading2Mobile: 25,
-  heading3Mobile: 22,
-  heading4Mobile: 19,
-  heading5Mobile: 17,
-  infoSubText: 18,
-  heading2: 28,
-  heading3: 24,
-  heading4: 20,
-  heading5: 19
-};

package/src/components/styleguide/fonts/font-styles.tsx

@@ -1,12 +0,0 @@
-export default {
-  body: 'TimesDigitalW04',
-  bodyRegular: 'TimesDigitalW04-Regular',
-  bodyRegularSmallCaps: 'TimesDigitalW04-RegularSC',
-  cultureMagazine: 'Flama-Bold',
-  dropCap: 'TimesModern-Regular',
-  headline: 'TimesModern-Bold',
-  headlineRegular: 'TimesModern-Regular',
-  stMagazine: 'Tiempos-Headline-Bold',
-  styleMagazine: 'CenturyGothic-Bold',
-  supporting: 'GillSansMTStd-Medium'
-};

package/src/components/styleguide/fonts/fonts.tsx

@@ -1,5 +0,0 @@
-import fontStyles from './font-styles';
-import timesFontFactory from './font-factory';
-import timesFontSizes from './font-sizes';
-
-export { fontStyles, timesFontSizes, timesFontFactory };

package/src/components/styleguide/helpers/storybookStyles.ts

@@ -1,55 +0,0 @@
-import { fonts } from '../Styleguide';
-import { timesFontSizes as fontSizes } from '../fonts/fonts';
-
-const styles: Record<string, Record<string, number | string>> = {
-  animationBox: {
-    backgroundColor: '#CCCCCC',
-    margin: 50,
-    padding: 100
-  },
-  box: {
-    height: 100,
-    marginBottom: 10
-  },
-  container: {
-    borderColor: '#DBDBDB',
-    borderWidth: 1,
-    margin: 20,
-    paddingBottom: 10,
-    width: 250
-  },
-  display: {
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  headline: {
-    fontSize: fontSizes.body,
-    fontWeight: 'bold',
-    marginBottom: 10
-  },
-  showoffFonts: {
-    fontSize: fontSizes.headline,
-    marginBottom: 20,
-    marginLeft: 20,
-    marginTop: 10
-  },
-  showoffFontsContainer: {
-    borderBottomColor: '#CCCCCC',
-    borderBottomWidth: 1,
-    margin: 20
-  },
-  subHeadline: {
-    fontSize: fontSizes.meta,
-    fontWeight: 'bold',
-    marginLeft: 10,
-    marginTop: 10
-  },
-  text: {
-    color: '#333333',
-    fontFamily: fonts.body,
-    fontSize: fontSizes.caption,
-    textAlign: 'center'
-  }
-};
-
-export default styles;

package/src/components/styleguide/lineHeight.tsx

@@ -1,73 +0,0 @@
-const mapping: Record<string, Record<string, {}>> = {
-  body: {
-    bodyMobile: 30,
-    puffLink: 15,
-    secondary: 27,
-    teaser: 20,
-    tertiary: 26
-  },
-  bodyRegular: {
-    infoSubText: 23,
-    infoTitle: 30,
-    pageComponentHeadline: 25
-  },
-  bodyRegularSmallCaps: {
-    cardMetaMobile: 12,
-    meta: 14
-  },
-  cultureMagazine: {
-    headline: 35,
-    pageHeadline: 42
-  },
-  headline: {
-    articleHeadline: 45,
-    commentsHeadline: 29,
-    headline: 33,
-    infoTitle: 22,
-    leadHeadline: 26,
-    pageComponentHeadline: 27,
-    pageHeadline: 40,
-    smallHeadline: 27,
-    tileLeadHeadline: 35,
-    heading2Mobile: 26,
-    heading3Mobile: 26,
-    heading4Mobile: 26,
-    heading5Mobile: 26
-  },
-  headlineRegular: {
-    pageComponentHeadline: 30,
-    smallestHeadline: 26,
-    strapline: 24
-  },
-  stMagazine: {
-    headline: 35,
-    pageHeadline: 42
-  },
-  styleMagazine: {
-    headline: 35,
-    pageHeadline: 42
-  },
-  supporting: {
-    button: 16,
-    caption: 13,
-    cardMeta: 15,
-    cardMetaMobile: 14,
-    keyFactsTitle: 18,
-    link: 13,
-    meta: 14,
-    pagingMeta: 15,
-    tertiary: 17
-  }
-};
-
-type ValueOf<T> = T[keyof T];
-
-export default ({
-  font,
-  fontSize
-}: {
-  font: keyof typeof mapping;
-  fontSize: keyof ValueOf<typeof mapping>;
-}) => {
-  return mapping[font][fontSize];
-};

package/src/components/styleguide/scales.tsx

@@ -1,5 +0,0 @@
-export default Object.freeze({
-  large: 'large',
-  medium: 'medium',
-  xlarge: 'xlarge'
-});

package/src/components/styleguide/spacing.tsx

@@ -1,19 +0,0 @@
-const spacingBase = 5;
-
-const spacing = (multiple: number) => {
-  return spacingBase * multiple;
-};
-
-const globalSpacingStyles = {
-  tabletHeadline: {
-    marginBottom: spacingBase * 1
-  },
-  tabletTeaser: {
-    marginTop: spacingBase * 1
-  }
-};
-
-export default (multiple: number) => {
-  return `${spacing(multiple)}px`;
-};
-export { globalSpacingStyles };

package/src/components/styleguide/styleguide.stories.tsx

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

package/src/components/styleguide/themeFactory.tsx

@@ -1,82 +0,0 @@
-import { sectionColours, secondarySectionColours } from './colours/section';
-
-const sectionColourPickerConfig: Record<string, Record<string, string>> = {
-  indepth: {},
-  magazinecomment: {
-    ...sectionColours,
-    ...secondarySectionColours
-  },
-  magazinestandard: {
-    ...sectionColours,
-    ...secondarySectionColours
-  },
-  maincomment: {
-    ...sectionColours
-  },
-  mainstandard: {
-    ...sectionColours
-  },
-  takeoverpage: {}
-};
-
-const magazineSections: Record<string, string> = {
-  culture: 'cultureMagazine',
-  Culture: 'cultureMagazine',
-  style: 'styleMagazine',
-  Style: 'styleMagazine',
-  'The Sunday Times Magazine': 'stMagazine',
-  thesundaytimesmagazine: 'stMagazine',
-  'the sunday times magazine': 'stMagazine'
-};
-
-const magazineSectionsConfig: Record<string, Record<string, string>> = {
-  indepth: magazineSections,
-  magazinecomment: magazineSections,
-  magazinestandard: magazineSections,
-  maincomment: {},
-  mainstandard: {},
-  takeoverpage: {}
-};
-
-type ValueOf<T> = T[keyof T];
-
-const sectionColourPicker = (
-  section: keyof ValueOf<typeof sectionColourPickerConfig>,
-  template: keyof typeof sectionColourPickerConfig
-) => {
-  return sectionColourPickerConfig[template][section];
-};
-
-const magazineFontPicker = (
-  defaultFont: string,
-  section: keyof ValueOf<typeof sectionColourPickerConfig>,
-  template: keyof typeof magazineSectionsConfig
-) => {
-  return magazineSectionsConfig[template][section] || defaultFont;
-};
-
-const headlineCasePicker = (
-  section: keyof typeof magazineSectionsConfig,
-  template: keyof typeof magazineSectionsConfig
-) =>
-  section &&
-  section.toLowerCase() === 'style' &&
-  ['indepth', 'magazinestandard', 'magazinecomment'].includes(template)
-    ? 'uppercase'
-    : null;
-
-export default (
-  sectionParam?: keyof typeof magazineSectionsConfig,
-  templateParam?: keyof typeof magazineSectionsConfig
-) => {
-  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)
-  };
-};