@axeptio/design-system/src/Core/Typography/Title/index.jsx

Design System for Axeptio

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Root = styled.div`
  font-family: ${props => props.theme.fonts.text};
  font-style: normal;
  font-weight: ${props => (props.light ? 400 : 700)};
  font-size: ${props => props.theme.fontSizes[props.as]};
  line-height: 1.15;
  text-decoration: ${props => props.decoration};
  color: ${props => props.color};

  ${props =>
    props.noMargin &&
    `
    margin: 0;
  `};

  .anchor {
    font-weight: 700;
    color: ${props => props.theme.colors.grey.v300};
    opacity: 0;
  }

  &:hover {
    .anchor {
      opacity: 1;
    }
  }

  ${props =>
    props.center &&
    `
    text-align: center;
  `};

  ${props =>
    props.serif &&
    `
    font-family: ${props.theme.fonts.title};
  `};

  @media (min-width: ${props => props.theme.breakpoints.large}px) {
    line-height: 1.25;
  }
`;

const Title = ({ children, noMargin, light, className, id, center, serif, level, color, decoration }) => (
  <Root
    id={id}
    noMargin={noMargin}
    className={className}
    center={center}
    light={light}
    serif={serif}
    level={level}
    color={color}
    decoration={decoration}
    as={level}
  >
    {children}
    {id ? (
      <a className="anchor" href={`#${id}`}>
        {' '}
        #
      </a>
    ) : null}
  </Root>
);

Title.propTypes = {
  id: PropTypes.string,
  noMargin: PropTypes.boolean,
  center: PropTypes.boolean,
  light: PropTypes.boolean,
  serif: PropTypes.boolean,
  level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
  color: PropTypes.string,
  children: PropTypes.any,
  className: PropTypes.string,
  decoration: PropTypes.string,
  sourceSerif: PropTypes.bool
};

Title.defaultProps = {
  level: 'h1',
  color: '#212121',
  children: '',
  decoration: '',
  serif: false
};

export default Title;