All files / components/Heading Heading.js

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

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 46        1x                         1x           1x               9x                   1x 1x      
import React from 'react';
import { string, bool, oneOf } from 'prop-types';
import StyledHeading from './StyledHeading';
 
const propTypes = {
  /** determines the size of the heading */
  sizing: oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
  /** one of: high, normal, low */
  emphasis: string,
  /** determines the html tag and size, if sizing prop is not specified */
  as: oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).isRequired,
  /** one of: neutral, primary, success, danger, warning */
  color: string,
  /** if true adds a bottom margin according to vertical rhythm */
  marginBottom: bool,
};
 
const defaultProps = {
  color: 'neutral',
  marginBottom: false,
  emphasis: 'high',
};
 
const Heading = ({
  sizing,
  color,
  emphasis,
  marginBottom,
  as,
  ...rest
}) => (
    <StyledHeading
      as={as}
      sizing={sizing || as}
      marginBottom={marginBottom}
      color={color}
      emphasis={emphasis}
      {...rest}
    />
);
 
Heading.propTypes = propTypes;
Heading.defaultProps = defaultProps;
 
export default Heading;