# All files / components/Alert Alert.js

50% Statements 5/10
0% Branches 0/5
0% Functions 0/2
50% Lines 5/10

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74

    5x

    5x

    5x

    5x

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import { withProps } from 'recompose';

    import AlertIcon from './styles/AlertIcon';
    import AlertBorder from './styles/AlertBorder';
    import AlertText from './styles/AlertText';
    import icons from 'components/Icon/icons';

    const getIcon = type => {
      switch (type) {
        case 'error':
          return '!';
        case 'success':
          return icons('checkmark');
        default:
          return 'i';
      }
    };

    const Alert = props => (
      <props.Border type={props.type}>
        {!props.textOnly && <props.Icon type={props.type} />}
        <props.Text>{props.children}</props.Text>
      </props.Border>
    );

    Alert.propTypes = {
      /**
       * An alert type; one of [info, success, error].
       */
      type: PropTypes.oneOf(['info', 'success', 'error']),
      /**
       * Whether to render only text (true) or an icon alongside text (false).
       */
      textOnly: PropTypes.bool,
      /**
       * Additional class name to pass to the alert.
       */
      className: PropTypes.string,
      /**
       * Additional id to pass to the alert.
       */
      id: PropTypes.string,
      /**
       * A component to render the border container
       */
      Border: PropTypes.func,
      /**
       * A component to render the text inside
       */
      Text: PropTypes.func,
      /**
       * A component to render the icon
       */
      Icon: PropTypes.func,
    };

    Alert.defaultProps = {
      type: 'info',
      textOnly: false,
      className: null,
      id: null,
      Border: AlertBorder,
      Text: AlertText,
      Icon: AlertIcon,
    };

    Alert.Small = withProps({
      Border: AlertBorder.Small,
    })(Alert);

    export default Alert;