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

Component library for Muvehealth

// @flow
import styled from 'react-emotion'
import { boxShadow, space, themeGet } from 'styled-system'
import { shouldForwardProp } from '../../utils'

const backgroundColor = ({ modifier, ...rest }) => {
  switch (modifier) {
    case 'secondary':
      return themeGet('colors.superLightBlue', '#D2FEFF')(rest)
    default:
      return themeGet('colors.textBlue', '#13535F')(rest)
  }
}

const color = ({ modifier, ...rest }) => {
  switch (modifier) {
    case 'secondary':
      return themeGet('colors.textBlue', '#13535F')(rest)
    default:
      return themeGet('colors.superLightBlue', '#D2FEFF')(rest)
  }
}

const Circle = styled('div', { shouldForwardProp })(
  {
    alignItems: 'center',
    borderRadius: '50%',
    display: 'flex',
    overflow: 'hidden',
    textAlign: 'center',
    justifyContent: 'center',
    '@media print': {
      border: '1px solid',
    },
  },
  boxShadow,
  space,
  ({ size, ...rest }) => ({
    fontFamily: themeGet('secondaryFont', 'Varela Round, -apple-system, sans-serif')(rest),
    color: `${color(rest)}`,
    backgroundColor: `${backgroundColor(rest)}`,
    fontSize: `${Math.floor(size * 0.35)}px`,
    width: size || 72,
    height: size || 72,
    lineHeight: size ? `${size}px` : '72px',
  }),
)

export default Circle