import React , { forwardRef } from 'react' ; import { makeStyles , Theme } from '@material-ui/core/styles' ; import cx from 'classnames' ; import { BaseProps , TextLabelProps } from '@toptal/picasso-shared' ; import styles from './styles' ; type VariantType = 'white' | 'red' ; type SizeType = 'medium' | 'small' | 'large' ; export interface Props extends BaseProps , TextLabelProps { /** The `Badge` content */ content : number ; /** Variant of the `Badge` */ variant ? : VariantType ; /** Size of the `Badge` */ size ? : SizeType ; /**
     * Max count to show. By default 9 for small size, 99 for other sizes
     */ max ? : number ; } const useStyles = makeStyles < Theme > ( styles , { name : 'PicassoBadge' } ) ; const thresholds = { small : 9 , medium : 99 , large : 99 } ; const format = ( content , size , max ? ) : string => { const trimThreshold = max || thresholds [ size ] ; if ( content > trimThreshold ) { return `${ trimThreshold }+` ; } return String ( content ) ; } ; export const Badge = forwardRef < HTMLDivElement , Props > ( function Badge ( props , ref ) { const { style , variant = 'white' , size = 'large' , content , 'data-testid' : dataTestId , max } = props ; const classes = useStyles ( ) ; return ( < > < span ref = { ref } data - testid = { dataTestId } className = { cx ( classes . root , classes [ variant ] , classes [ size ] ) } style = { style } > { format ( content , size , max ) } < /span> < />); } ) ; Badge . defaultProps = { variant : 'white' , size : 'large' } ; Badge . displayName = 'Badge' ; export default Badge ;