@navinc/base-react-components/src/header.js

Nav's Pattern Library

import styled from 'styled-components'
import propTypes from 'prop-types'

const variants = {
  xl: {
    fontFamily: 'postgrotesk, Averta, Helvetica, sans-serif',
    fontSize: '32px',
    lineHeight: '38px',
    htmlElement: 'h1',
  },
  lg: {
    fontFamily: 'postgrotesk, Averta, Helvetica, sans-serif',
    fontSize: '24px',
    lineHeight: '30px',
    htmlElement: 'h2',
  },
  md: {
    fontFamily: 'postgrotesk, Averta, Helvetica, sans-serif',
    fontSize: '20px',
    lineHeight: '30px',
    htmlElement: 'h3',
  },
  sm: {
    fontFamily: 'postgrotesk, Roboto, Helvetica, sans-serif',
    fontSize: '18px',
    lineHeight: '28px',
    htmlElement: 'h4',
  },
}

export const Header = styled.h1.attrs(({ size }) => ({
  as: variants[size]?.htmlElement,
}))`
  font-family: ${({ size }) => variants[size]?.fontFamily ?? variants.md.fontFamily};
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  color: ${({ theme }) => theme.neutral500};
  font-size: ${({ size }) => variants[size]?.fontSize ?? variants.md.fontSize};
  line-height: ${({ size }) => variants[size]?.lineHeight ?? variants.md.lineHeight};
  font-weight: bold;
`
Header.displayName = 'Header'
Header.propTypes = {
  size: propTypes.string,
}
Header.defaultProps = {
  size: 'md',
}

export default Header