import React, { PropTypes } from 'react';
import { Callout } from 'react-foundation';
import { MdWarning } from 'react-icons/lib/md';

const Styles = {
  hidden: {
    display: 'none'
  },
  notHidden: {
    display: ''
  }
};

const ErrorPanel = ({
  errors,
  isVisible
}) => (
  <Callout
    color={'alert'}
    size={'large'}
    className="error-panel"
    style={isVisible ? Styles.hidden : Styles.notHidden}
  >
    <MdWarning />
    <h4 className="callout-title">Errors</h4>
    <ul className="no-bullet">
      {errors.map((err) => <li>{err}</li>)}
    </ul>
  </Callout>
);

ErrorPanel.propTypes = {
  errors: PropTypes.array.isRequired,
  isVisible: PropTypes.bool.isRequired
};

export default ErrorPanel;

@@ -520,16 +520,63 @@
  %7Berrors
+ != null && errors.length %3E 0 &&%0A        errors
 .map((er
@@ -580,16 +580,26 @@
 (err) =%3E
+%0A         
  %3Cli%3E%7Ber
@@ -605,16 +605,25 @@
 rr%7D%3C/li%3E
+%0A        
 )%7D%0A    %3C
@@ -707,16 +707,16 @@
 quired,%0A
-
   isVisi
@@ -750,16 +750,67 @@
 red%0A%7D;%0A%0A
+ErrorPanel.defaultProps = %7B%0A  isVisible: false%0A%7D;%0A%0A
 export d

add defaultProps for error pane