All files / components/Typography/Heading StyledHeading.js

100% Statements 6/6
75% Branches 3/4
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 47 48 49 50 51 52                      13x                 13x                     9x 9x 9x                             13x      
import styled, { css } from 'styled-components';
import { string, bool } from 'prop-types';
import { getBaseLineHeight, calcLineHeight } from '../typographySelectors';
import {
  getHeadingSizingStyle,
  getHeadingColor,
  getHeadingColorOnBg,
  getHeadingCommonStyle,
  getHeadingOpacity,
} from './headingSelectors';
 
const propTypes = {
  color: string.isRequired,
  sizing: string.isRequired,
  marginBottom: bool.isRequired,
  emphasis: string.isRequired,
  ignoreBackground: bool.isRequired,
  bgColor: string,
};
 
const StyledHeading = styled.h1`
  display: block;
  ${({
    theme,
    color,
    sizing,
    marginBottom,
    emphasis,
    ignoreBackground,
    bgColor,
  }) => {
    const baseLineHeight = getBaseLineHeight(theme);
    const sizingStyle = getHeadingSizingStyle(theme, sizing);
    return css`
      ${getHeadingCommonStyle(theme, sizing)}
      color: ${
        ignoreBackground
          ? getHeadingColor(theme, color)
          : getHeadingColorOnBg(theme, bgColor, color)
      };
      line-height: ${calcLineHeight(sizingStyle.fontSize, baseLineHeight)};
      margin-bottom: ${marginBottom ? `${baseLineHeight}rem` : '0'};
      opacity: ${getHeadingOpacity(theme, emphasis)};
      ${sizingStyle}
    `;
  }}
`;
 
StyledHeading.propTypes = propTypes;
 
export default StyledHeading;