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

Component library for Muvehealth

// @flow
import React from 'react'
import styled from 'react-emotion'
import { themeGet, maxWidth } from 'styled-system'
import { noob } from '../../utils'
import Icons from '../Icons'

type Props = {
  isPillStyle?: boolean,
  message: string,
  status?: string,
  maxWidth?: ?number,
}

const ErrorMessage = ({ isPillStyle, message, status, maxWidth: maxWidthProp }: Props) => (
  <Message isPillStyle={isPillStyle} status={status} maxWidth={maxWidthProp}>
    <Icons type="CircleBang" width={18} height={18} mr={2} />
    <Text>
      {message}
    </Text>
  </Message>
)

ErrorMessage.defaultProps = {
  status: 'error',
  isPillStyle: false,
  maxWidth: null,
}

export default ErrorMessage

// -------------------------------------

const pillRule = {
  borderRadius: 16,
  paddingLeft: 16,
  paddingRight: 24,
  '::before': {
    left: 17,
  },
}

const Message = styled('span')(
  {
    display: 'inline-flex',
    alignItems: 'center',
    position: 'relative',
    paddingLeft: 8,
    paddingRight: 16,
    height: 32,
    fontSize: 14,
    borderRadius: 4,
    '::before': {
      content: '""',
      position: 'absolute',
      top: -8,
      left: 9,
      width: 0,
      height: 0,
      borderRight: '8px solid transparent',
      borderLeft: '8px solid transparent',
    },
  },
  maxWidth,
  ({ isPillStyle, status, ...rest }) => ({
    color: themeGet('colors.white', '#FFFFFF')(rest),
    backgroundColor: status === 'warning'
      ? themeGet('colors.warning', '#FFC113')(rest)
      : themeGet('colors.error', '#D0021B')(rest),
    ':before': {
      borderBottom: `8px solid ${status === 'warning'
        ? themeGet('colors.warning', '#FFC113')(rest)
        : themeGet('colors.error', '#D0021B')(rest)}`,
    },
    ...(isPillStyle ? pillRule : noob),
  }),
)

const Text = styled('span')({})