Start adding validation to form fields

src/atoms/Tags.js

@@ -34,8 +34,6 @@ class Tags extends React.Component {
     this.props.onChange(tags)
   }
 
-  // TODO: fire change event on state change
-
   render () {
     const { tags } = this.state
     const { name, suggestions, placeholder } = this.props

src/atoms/ValidatedField.js

+import React from 'react'
+import classnames from 'classnames'
+import classes from './ValidatedField.local.css'
+
+// TODO: pass ...props.input to children automatically?
+
+const ValidatedField = ({ form, children, error, warning }) => (
+  <div>
+    {children}
+
+    <div className={classes.messages}>
+      {error && (
+        <div className={classnames(classes.message, classes.error)}>
+          {error}
+        </div>
+      )}
+
+      {warning && (
+        <div className={classnames(classes.message, classes.warning)}>
+          {warning}
+        </div>
+      )}
+    </div>
+  </div>
+)
+
+export default ValidatedField

src/atoms/ValidatedField.local.css

+.messages {
+  margin-top: 10px;
+}
+
+.message {
+  width: fit-content;
+  padding: 10px;
+}
+
+.error {
+  background-color: red;
+  color: white;
+}
+
+.warning {
+  background-color: orange;
+  color: white;
+}

src/atoms/ValidatedField.md

+A form field that displays the results of validation.
+
+```js
+<ValidatedField error="There was an error">
+  <input/>
+</ValidatedField>
+```
+
+```js
+<ValidatedField warning="There was a warning">
+  <input/>
+</ValidatedField>
+```

src/index.js

+/* atom */
 export { default as Button } from './atoms/Button'
 export { default as Checkbox } from './atoms/Checkbox'
 export { default as Icon } from './atoms/Icon'
 export { default as Menu } from './atoms/Menu'
 export { default as Radio } from './atoms/Radio'
 export { default as Tags } from './atoms/Tags'
+export { default as ValidatedField } from './atoms/ValidatedField'
+
+/* molecules */
 export { default as AppBar } from './molecules/AppBar'
 export { default as CheckboxGroup } from './molecules/CheckboxGroup'
 export { default as Files } from './molecules/Files'