All files / components/Text StyledText.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                        2x                 2x                     6x 6x 6x                     2x      
import styled, { css } from 'styled-components';
import { string, bool } from 'prop-types';
 
import { getBaseLineHeight, calcLineHeight } from '../../theme/typography';
import {
  getTextSizingStyle,
  getTextColor,
  getTextCommonStyle,
  getTextOpacity,
  getTextColorOnBg,
} from './textSelectors';
 
const propTypes = {
  color: string.isRequired,
  sizing: string.isRequired,
  marginBottom: bool.isRequired,
  emphasis: string.isRequired,
  ignoreBg: bool.isRequired,
  bgColor: string,
};
 
const StyledText = styled.span`
  display: block;
  ${({
    theme,
    color,
    sizing,
    marginBottom,
    emphasis,
    ignoreBg,
    bgColor,
  }) => {
    const baseLineHeight = getBaseLineHeight(theme);
    const sizingStyle = getTextSizingStyle(theme, sizing);
    return css`
      ${getTextCommonStyle(theme)}
      color: ${ignoreBg ? getTextColor(theme, color) : getTextColorOnBg(theme, bgColor, color)};
      line-height: ${calcLineHeight(sizingStyle.fontSize, baseLineHeight)};
      margin-bottom: ${marginBottom ? `${getBaseLineHeight(theme)}rem` : '0'};
      opacity: ${getTextOpacity(theme, emphasis)};
      ${sizingStyle}
    `;
  }}
`;
 
StyledText.propTypes = propTypes;
 
export default StyledText;