How to use @times-components/styleguide - 10 common examples

import { StyleSheet } from "react-native";
import { spacing } from "@times-components/styleguide";
import sharedStyles from "./shared";

const iosStyles = StyleSheet.create({
  ...sharedStyles,
  container: {
    ...sharedStyles.container,
    paddingTop: spacing(1),
    paddingLeft: spacing(2),
    paddingRight: spacing(2),
    paddingBottom: spacing(5),
    marginBottom: 0
  },
  // iOS Font hack
  caption: {
    ...sharedStyles.caption,
    paddingTop: 4
  },
  link: {
    ...sharedStyles.link,
    paddingTop: 4
  }
});

/* eslint-disable react/prop-types */

import React from "react";
import { View } from "react-native";
import { colours, fonts, fontSizes } from "@times-components/styleguide";

const styles = {
  color: colours.section.comment,
  fontFamily: fonts.supporting,
  fontSize: fontSizes.cardMetaMobile,
  letterSpacing: 0.6,
  lineHeight: 12
};

const authorsAST = require("./fixtures/authors.json");

const preventDefaultedAction = decorateAction =>
  decorateAction([
    ([e, ...args]) => {
      e.preventDefault();
      return ["[SyntheticEvent (storybook prevented default)]", ...args];
    }
  ]);

{({ article, isLoading, error, refetch }) => {
      // When work is completed in TPA, the schema should do this for us
      const data = {
        ...article,
        template: "magazinecomment"
      };

      return (

/* eslint-disable react/require-default-props */
import React from "react";
import styled from "styled-components";
import { breakpoints } from "@times-components/styleguide";
import PropTypes from "prop-types";

const respStylesSelector = selector => ({ responsiveLinkStyles }) =>
  (responsiveLinkStyles && responsiveLinkStyles[selector]) || "";

const RespLink = styled.a`
  text-decoration: ${props =>
    props.underlined && props.responsiveLinkStyles ? "underline" : "none"};

  ${respStylesSelector("base")};

  @media (min-width: ${breakpoints.medium}px) {
    ${respStylesSelector("medium")};
  }
`;

const Link = ({
  children,
  url,
  onPress = () => {},
  target = null,
  underlined = true,
  responsiveLinkStyles = null
}) => {
  const props = {
    underlined,
    target,
    responsiveLinkStyles

import { View } from "react-native";
import styled from "styled-components";
import { breakpoints, colours, spacing } from "@times-components/styleguide";

export const MainContainer = styled(View)`
  @media (min-width: ${breakpoints.wide}px) {
    padding-top: ${spacing(4)};
    margin: 0 auto;
    display: block;
  }
`;

/* --- HeaderAd --- */
export const HeaderAdContainer = styled(View)`
  display: none;

  @media (min-width: ${breakpoints.medium}px) {
    display: flex;
    border-top-color: ${colours.functional.keyline};
    border-bottom-color: ${colours.functional.keyline};
    border-bottom-width: 1px;
    padding-top: ${spacing(2)};

width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-left: ${spacing(2)};
  padding-right: ${spacing(2)};
  padding-bottom: 0;
  display: block;

  @media (min-width: ${breakpoints.medium}px) {
    width: 80.8%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  @media (min-width: ${breakpoints.wide}px) {
    width: 56.2%;
  }
`;

/* --- Pull Quotes --- */

export const PullQuoteResp = styled(View)`
  padding-left: ${spacing(2)};
  padding-right: ${spacing(2)};
  margin-bottom: ${spacing(2)};

  @media (min-width: ${breakpoints.medium}px) {
    width: 50%;
    float: left;
    margin-right: ${spacing(4)};
    margin-bottom: 0px;

/* --- Header --- */

export const HeaderContainer = styled(View)`
  padding-left: ${spacing(2)};
  padding-right: ${spacing(2)};

  @media (min-width: ${breakpoints.medium}px) {
    order: 1;
    width: 80.8%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  @media (min-width: ${breakpoints.wide}px) {
    width: 56.2%;
    margin-bottom: ${spacing(3)};
  }
`;

/* --- Meta --- */

export const MetaContainer = styled(View)`
  margin-bottom: ${spacing(4)};
  padding-right: ${spacing(4)};
  padding-left: ${spacing(4)};
  position: absolute;
  left: 0;
  width: 20.8333%;
  z-index: 1;
  top: 100%;

/* eslint-disable react/prop-types */

import React from "react";
import { View } from "react-native";
import { colours, fonts, fontSizes } from "@times-components/styleguide";

const styles = {
  color: colours.section.comment,
  fontFamily: fonts.supporting,
  fontSize: fontSizes.cardMetaMobile,
  letterSpacing: 0.6,
  lineHeight: 12
};

const authorsAST = require("./fixtures/authors.json");

const preventDefaultedAction = decorateAction =>
  decorateAction([
    ([e, ...args]) => {
      e.preventDefault();
      return ["[SyntheticEvent (storybook prevented default)]", ...args];
    }
  ]);

const ComponentWrapper = ({ children }) => (

/* eslint-disable react/prop-types */
import React from "react";
import { StyleSheet, Text } from "react-native";
import { colours, fonts, fontSizes } from "@times-components/styleguide";
import DatePublication from "./src/date-publication";

const styles = StyleSheet.create({
  text: {
    color: colours.functional.secondary,
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMeta,
    lineHeight: 15
  }
});

const timezones = [
  "2017-07-01T04:32:00.000Z",
  "2017-01-01T04:32:00.000Z",
  "2017-07-01T14:32:00.000Z",
  "2017-01-01T14:32:00.000Z"
];

export default {
  children: [
    {
      component: ({ select }) => (

import React from "react";
import Link from "@times-components/link";
import { colours, fonts, fontSizes } from "@times-components/styleguide";

// SHOULD BE IN STYLES
const responsiveLinkStyles = {
  base: `
      color: ${colours.functional.action};
      font-family: "${fonts.bodyRegular}";
      line-height: 26px;
      font-size: ${fontSizes.bodyMobile}px;
      margin-bottom: 25px;
      margin-top: 0;
  `,
  medium: `
      font-size: ${fontSizes.body}px;
      line-height: 30px;
  `
};

const ArticleLink = ({ children, target, url }) => (
  
    {children}
  
);