Add ability to create description on collection create

app/scenes/CollectionNew.js

@@ -5,6 +5,7 @@ import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import Button from 'components/Button';
 import Input from 'components/Input';
+import InputRich from 'components/InputRich';
 import ColorPicker from 'components/ColorPicker';
 import HelpText from 'components/HelpText';
 
@@ -21,6 +22,7 @@ type Props = {
 class CollectionNew extends React.Component<Props> {
   @observable collection: Collection;
   @observable name: string = '';
+  @observable description: string = '';
   @observable color: string = '';
   @observable isSaving: boolean;
 
@@ -32,7 +34,11 @@ class CollectionNew extends React.Component<Props> {
   handleSubmit = async (ev: SyntheticEvent<*>) => {
     ev.preventDefault();
     this.isSaving = true;
-    this.collection.updateData({ name: this.name, color: this.color });
+    this.collection.updateData({
+      name: this.name,
+      description: this.description,
+      color: this.color,
+    });
     const success = await this.collection.save();
 
     if (success) {
@@ -48,6 +54,10 @@ class CollectionNew extends React.Component<Props> {
     this.name = ev.target.value;
   };
 
+  handleDescriptionChange = getValue => {
+    this.description = getValue();
+  };
+
   handleColor = (color: string) => {
     this.color = color;
   };
@@ -68,6 +78,14 @@ class CollectionNew extends React.Component<Props> {
           required
           autoFocus
         />
+        <InputRich
+          label="Description"
+          onChange={this.handleDescriptionChange}
+          defaultValue={this.description || ''}
+          placeholder="More details about this collection…"
+          minHeight={68}
+          maxHeight={200}
+        />
         <ColorPicker onSelect={this.handleColor} />
         <Button type="submit" disabled={this.isSaving || !this.name}>
           {this.isSaving ? 'Creating…' : 'Create'}