import React from 'react' ; import styled from 'styled-components' ; import PropTypes from 'prop-types' ; import { space , color , width } from 'design/system' ; import defaultTheme from 'design/theme' ; const kind = props => { const { kind , theme } = props ; switch ( kind ) { case 'danger' : return { background : theme . colors . danger , color : theme . colors . primary . contrastText , } ; case 'info' : return { background : theme . colors . info , color : theme . colors . primary . contrastText , } ; case 'warning' : return { background : theme . colors . warning , color : theme . colors . primary . contrastText , } ; case 'success' : return { background : theme . colors . success , color : theme . colors . primary . contrastText , } ; default : return { background : theme . colors . danger , color : theme . colors . primary . contrastText , } ; } } ; const Alert = styled . div `
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .24);
  margin: 0 0 24px 0;
  min-height: 40px;
  padding: 8px 16px;
  overflow: auto;
  word-break: break-all;
  line-height: 1.5;
  ${ space }
  ${ kind }
  ${ width }

  a {
    color: ${ ( { theme } ) => theme . colors . light };
  }
` ; Alert . propTypes = { kind : PropTypes . oneOf ( [ 'danger' , 'info' , 'warning' , 'success' ] ) , ... color . propTypes , ... space . propTypes , ... width . propTypes , } ; Alert . defaultProps = { kind : 'danger' , theme : defaultTheme , } ; Alert . displayName = 'Alert' ; export default Alert ; export const Danger = props => < Alert kind = "danger" { ... props } />; export const Info = props => < Alert kind = "info" { ... props } />; export const Warning = props => < Alert kind = "warning" { ... props } />; export const Success = props => < Alert kind = "success" { ... props } />;