@times-components/ts-components 1.32.3 → 1.33.0

package/src/components/styleguide/Styleguide.tsx

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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,68 @@
+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

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

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

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

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,27 @@
+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

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

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,5 @@
+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

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