import React from 'react' ; import styled from 'styled-components' ; import { space } from 'design/system' ; import PropTypes from 'prop-types' ; const kind = ( { kind , theme } ) => { if ( kind === 'secondary' ) { return { backgroundColor : theme . colors . primary . dark , color : theme . colors . text . primary , } ; } if ( kind === 'warning' ) { return { backgroundColor : theme . colors . warning , color : theme . colors . primary . contrastText , } ; } if ( kind === 'danger' ) { return { backgroundColor : theme . colors . danger , color : theme . colors . primary . contrastText , } ; } return { backgroundColor : theme . colors . secondary . main , color : theme . colors . text . secondary . contrastText , } ; } ; const Label = styled . div `
  box-sizing: border-box;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  line-height: 1.4;
  font-size: 10px;
  font-weight: 500;
  padding: 0 8px;

  ${ kind }
  ${ space }
` ; Label . propTypes = { kind : PropTypes . oneOf ( [ 'primary' , 'secondary' , 'warning' , 'danger' ] ) , } ; export default Label ; export const Primary = props => < Label kind = "primary" { ... props } />; export const Secondary = props => < Label kind = "secondary" { ... props } />; export const Warning = props => < Label kind = "warning" { ... props } />; export const Danger = props => < Label kind = "danger" { ... props } />;