All files / components/Typography/Text Text.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                 4x                       13x      
import React from 'react';
import { string, bool, oneOf } from 'prop-types';
import StyledText from './StyledText';
import { useBoxContext } from '../../Box';
 
const propTypes = {
  /** sizings keys in the theme passed to <TypographyProvider /> */
  sizing: string,
  /** 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,
  /** rendered html tag */
  as: oneOf(['span', 'p']),
  /** if true adds a bottom margin according to vertical rhythm */
  marginBottom: bool,
};
 
const Text = ({
  sizing = 'm',
  color = 'neutral',
  ignoreBackground = false,
  marginBottom = false,
  emphasis = 'high',
  as = 'span',
  ...rest
}) => (
  <StyledText
    as={as}
    marginBottom={marginBottom}
    sizing={sizing}
    color={color}
    emphasis={emphasis}
    ignoreBackground={ignoreBackground}
    bgColor={useBoxContext()}
    {...rest}
  />
);
 
Text.propTypes = propTypes;
 
export default Text;