@muvehealth/fixins/dist/elements/Tag/index.js.flow

Component library for Muvehealth

// @flow
import styled from 'react-emotion'
import withProps from 'recompose/withProps'
import { color, fontSize, space, textStyle, themeGet } from 'styled-system'
import { shouldForwardProp } from '../../utils'

const Tag = styled('div', { shouldForwardProp })(
  {
    display: 'inline-block',
    fontWeight: 'bold',
    borderRadius: 4,
    '@media print': {
      display: 'hidden',
    },
  },
  fontSize,
  textStyle,
  space,
  color,
  props => ({
    color: themeGet('colors.superLightBlue', '#D2FEFF')(props),
    backgroundColor: themeGet('colors.tealBlue', '#1B8D97')(props),
  }),
)

export default withProps({
  fontSize: 1,
  textStyle: 'uppercase',
  py: '2px',
  px: 2,
})(Tag)