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

Component library for Muvehealth

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

const Decal = styled('div', { shouldForwardProp })(
  {
    '@media print': {
      fontSize: 14,
      paddingLeft: 0,
      paddingRight: 0,
      textTransform: 'capitalize',
    },
  },
  display,
  fontSize,
  maxHeight,
  space,
  textStyle,
  ({ hidden, ...rest }) => (
    hidden
      ? {
        position: 'absolute !important',
        height: 1,
        width: 1,
        overflow: 'hidden',
        clip: 'rect(1px, 1px, 1px, 1px)',
        marginBottom: 0,
      }
      : {
        color: themeGet('colors.tealBlue', '#1B8D97')(rest),
        backgroundColor: themeGet('colors.decalBlue', 'rgba(24, 175, 182, 0.1)')(rest),
      }
  ),
)

const commonProps = {
  fontSize: 2,
  px: 3,
  py: '12px',
  textStyle: 'uppercase',
}

export const DecalLabel = withProps({
  display: 'block',
  ...commonProps,
})(Decal.withComponent('label'))

export default withProps({
  ...commonProps,
})(Decal)