Add ValidationError component

src/components/ValidationError/ValidationError.css

@@ -0,0 +1,5 @@
+.root {
+  margin-top: 10px;
+  color: red;
+  overflow: hidden;
+}

src/components/ValidationError/ValidationError.js

@@ -0,0 +1,31 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+import css from './ValidationError.css';
+
+/**
+ * This component can be used to show validation errors next to form
+ * input fields. The component takes the redux-form Field component
+ * `meta` object as a prop and infers if an error message should be
+ * shown.
+ */
+const ValidationError = props => {
+  const { className, fieldMeta } = props;
+  const { touched, error } = fieldMeta;
+  const classes = classNames(css.root, className);
+  return touched && error ? <div className={classes}>{error}</div> : null;
+};
+
+ValidationError.defaultProps = { className: '' };
+
+const { shape, bool, string } = PropTypes;
+
+ValidationError.propTypes = {
+  className: string,
+  fieldMeta: shape({
+    touched: bool.isRequired,
+    error: string,
+  }).isRequired,
+};
+
+export default ValidationError;

src/components/index.js

@@ -31,6 +31,7 @@ import RoutesProvider from './RoutesProvider/RoutesProvider';
 import SaleDetailsPanel from './SaleDetailsPanel/SaleDetailsPanel';
 import SearchResultsPanel from './SearchResultsPanel/SearchResultsPanel';
 import StripeBankAccountToken from './StripeBankAccountToken/StripeBankAccountToken';
+import ValidationError from './ValidationError/ValidationError';
 
 export {
   AddImages,
@@ -68,4 +69,5 @@ export {
   SaleDetailsPanel,
   SearchResultsPanel,
   StripeBankAccountToken,
+  ValidationError,
 };