All files / components/Typography/Heading Heading.js

100% Statements 4/4
100% Branches 6/6
100% Functions 1/1
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45          13x                             13x                 9x                       13x      
import React from 'react';
import { string, bool, oneOf } from 'prop-types';
import StyledHeading from './StyledHeading';
import { useBoxContext } from '../../Box';
 
const propTypes = {
  /** sizings keys in the theme passed to <TypographyProvider /> */
  sizing: oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
  /** colors keys in the theme passed to <TypographyProvider /> */
  color: string,
  /** opacities keys in the theme passed to <TypographyProvider /> */
  emphasis: string,
  /** determines whether the color defined for the background is ignored */
  ignoreBackground: bool,
  /** determines the html tag and size, if sizing prop is not specified */
  as: oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).isRequired,
  /** if true adds a bottom margin according to vertical rhythm */
  marginBottom: bool,
};
 
const Heading = ({
  color = 'neutral',
  emphasis = 'high',
  marginBottom = false,
  ignoreBackground = false,
  sizing,
  as,
  ...rest
}) => (
  <StyledHeading
    as={as}
    sizing={sizing || as}
    marginBottom={marginBottom}
    color={color}
    emphasis={emphasis}
    ignoreBackground={ignoreBackground}
    bgColor={useBoxContext()}
    {...rest}
  />
);
 
Heading.propTypes = propTypes;
 
export default Heading;