import React from 'react' ; import styled from 'styled-components' ; import { fontSize , color , width , space } from 'design/system' ; import { fade } from 'design/theme/utils/colorManipulator' ; const kinds = ( { theme , kind , shadow } ) => { const styles = { background : theme . colors . secondary . main , color : theme . colors . text . secondary . contrastText , } ; if ( kind === 'secondary' ) { styles . background = theme . colors . primary . dark ; styles . color = theme . colors . text . primary ; } if ( kind === 'warning' ) { styles . background = theme . colors . warning ; styles . color = theme . colors . primary . contrastText ; } if ( kind === 'danger' ) { styles . background = theme . colors . danger ; styles . color = theme . colors . primary . contrastText ; } if ( kind === 'success' ) { styles . background = theme . colors . success ; styles . color = theme . colors . primary . contrastText ; } if ( shadow ) { styles . boxShadow = `
    0 0 8px ${ fade ( styles . background , 0.24 ) },
    0 4px 16px ${ fade ( styles . background , 0.56 ) }
    ` ; } return styles ; } ; const LabelState = styled . span `
  box-sizing: border-box;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  line-height: 1.4;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  ${ space }
  ${ kinds }
  ${ width }
  ${ color }
  ${ fontSize }
` ; LabelState . defaultProps = { fontSize : 0 , color : 'light' , fontWeight : 'bold' , shadow : false , } ; export default LabelState ; export const StateDanger = props => < LabelState kind = "danger" { ... props } />; export const StateInfo = props => < LabelState kind = "secondary" { ... props } />; export const StateWarning = props => < LabelState kind = "warning" { ... props } />; export const StateSuccess = props => < LabelState kind = "success" { ... props } />;