Typography.js

import React from "react";
import styled from "styled-components";
import { color, typography, space } from "styled-system";

const Heading = styled.h1`
  ${typography}
  ${space}
  ${color}
`;

export const Title = props => {
  const { size, light, primary } = props;

  const className = `title${size}`;
  const elType = `h${size}`;
  // TODO: theme check

  const fontWeight = light ? "normal" : className;
  let color;
  if (light) {
    color = "grey";
  } else if (primary) {
    color = "primary";
  }

  return (
    <Heading
      as={elType}
      // Allow props to be paced for spacing
      {...props}
      color={color}
      fontWeight={fontWeight}
      fontSize={className}
      lineHeight={className}
    />
  );
};

Title.defaultProps = {
  size: 1,
};

const P = styled.p`
  ${typography}
  ${space}
  ${color}
`;

export const Text = props => {
  const { size, light } = props;

  const className = `body${size}`;
  // TODO: theme check

  const fontWeight = className;
  const color = light ? "grey" : "inherit";

  return (
    <P
      // Allow props to be paced for spacing
      {...props}
      color={color}
      fontWeight={fontWeight}
      fontSize={className}
      lineHeight={className}
    />
  );
};
Text.defaultProps = {
  size: 1,
};