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

Component library for Muvehealth

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

const modifierStyles = (props) => {
  switch (props.modifier) {
    case 'disabled':
      return {
        backgroundColor: themeGet('colors.lighterGray', '#E6E7E8')(props),
        color: themeGet('colors.lightGray', '#B3B3B3')(props),
      }
    case 'secondary':
      return {
        backgroundColor: themeGet('colors.lightGreen', '#CAFC68')(props),
        color: themeGet('colors.textBlue', '#13535F')(props),
        ':hover': {
          backgroundColor: themeGet('colors.textBlue', '#13535F')(props),
          color: themeGet('colors.lightGreen', '#CAFC68')(props),
        },
        ':focus': {
          backgroundColor: themeGet('colors.textBlue', '#13535F')(props),
          color: themeGet('colors.lightGreen', '#CAFC68')(props),
        },
      }
    case 'secondaryOff':
      return {
        backgroundColor: themeGet('colors.gray', '#C7C7C7')(props),
        color: themeGet('colors.darkGray', '#4A4A4A')(props),
        ':hover': {
          backgroundColor: themeGet('colors.placeholderGray', '#9B9B9B')(props),
          color: themeGet('colors.darkGray', '#4A4A4A')(props),
        },
        ':focus': {
          backgroundColor: themeGet('colors.placeholderGray', '#9B9B9B')(props),
          color: themeGet('colors.darkGray', '#4A4A4A')(props),
        },
      }
    default:
      return {
        backgroundColor: themeGet('colors.blue', '#1FD4DB')(props),
        color: themeGet('colors.textBlue', '#13535F')(props),
        ':hover': {
          backgroundColor: themeGet('colors.darkerBlue', '#1AAEB4')(props),
          color: themeGet('colors.textBlue', '#13535F')(props),
        },
        ':focus': {
          backgroundColor: themeGet('colors.darkerBlue', '#1AAEB4')(props),
          color: themeGet('colors.textBlue', '#13535F')(props),
        },
      }
  }
}

export const buttonBase = {
  background: 'transparent',
  border: 'none',
  borderRadius: 0,
  color: 'inherit',
  cursor: 'pointer',
  font: 'inherit',
  lineHeight: 1,
  outline: 0,
  textTransform: 'none',
  verticalAlign: 'middle',
  whiteSpace: 'nowrap',
  '> svg': {
    pointerEvents: 'none',
  },
}

const Button = styled('button', { shouldForwardProp })(
  {
    ...buttonBase,
    borderRadius: 100,
    lineHeight: '40px',
    textAlign: 'center',
    textTransform: 'uppercase',
    fontWeight: 'bold',
  },
  ({ height: propHeight, width: propWidth, font, ...rest }) => ({
    height: propHeight || 40,
    width: propWidth || '100%',
    minWidth: 176,
    fontSize: font || 10,
    ...modifierStyles(rest),
  }),
  space,
)

export const ButtonBase = styled('button', {
  shouldForwardProp,
})(
  {
    ...buttonBase,
    display: 'flex',
    alignItems: 'center',
    justifyItems: 'center',
  },
  color,
  height,
  space,
  width,
)

export default Button