jsx import { CSSObject , jsx , keyframes } from '@emotion/core' ; import React from 'react' ; import { COLOR } from '../Identity' ; import { DURATION , EASE } from '../Identity/motions' ; import type { Theme } from '../Layout' ; import { filterProps } from '../util' ; export interface PillProps < T = HTMLSpanElement > extends React . HTMLProps < T > { active ? : boolean ; type ? : PILL_TYPE ; } export enum PILL_TYPE { error = 'ERROR' , success = 'SUCCESS' , warning = 'WARNING' } export const pillStyle = ( theme , { active = false , type = null } ) => { const backgroundColors = { [ PILL_TYPE . error ] : COLOR . RED_OPAQUE_32 , [ PILL_TYPE . success ] : COLOR . GREEN_OPAQUE_32 , [ PILL_TYPE . warning ] : COLOR . YELLOW_OPAQUE_32 , } ; const backgroundColor = active ? '#eee' : type ? backgroundColors [ type ] : 'transparent' ; const pillAnimation = keyframes `
    0% {
      background-color: transparent;
    }
    100% {
      background-color: ${ backgroundColor };
    }
` ; return { '&:first-of-type' : { marginLeft : 0 , } , '&:last-of-type' : { marginRight : 0 , } , animation : `${ pillAnimation } ${ DURATION . DEFAULT }ms ${ EASE . QUART }` , backgroundColor , borderRadius : '160px' , color : active ? COLOR . TEXT : theme . general . color , cursor : active ? 'default' : undefined , display : 'inline-block' , fontSize : '12px' , lineHeight : '16px' , margin : type ? '12px 0 0 0' : '0 8px' , minHeight : '32px' , padding : '8px 24px' , textAlign : 'center' , textDecoration : 'none' , } ; } ; export const filterPillProps = ( props ) => filterProps ( props , [ 'active' ] ) ; export const Pill = ( props ) => ( < span css = { theme => pillStyle ( theme , props ) } data - uie - name = "element-pill" data - uie - status = { props . type } { ... filterPillProps ( props ) } />);