Added our new Toast component to the spec

spec/Root.js

@@ -5,6 +5,7 @@ import Dialog from './components/dialog';
 import PopoverVertical from './components/popoverVertical';
 import PopoverHorizontal from './components/popoverHorizontal';
 import LoadingMolecule from './components/loadingMolecule';
+import Toast from './components/toast';
 
 const Root = () => (
   <div>
@@ -15,6 +16,7 @@ const Root = () => (
     <PopoverHorizontal />
     <Menu />
     <Dialog />
+    <Toast />
     <LoadingMolecule />
   </div>
 );

spec/components/toast.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from '../../components/button';
+import Toast from '../../components/toast';
+
+class ToastTest extends React.Component {
+  handleSnackbarClick = () => {
+    this.setState({ active: false });
+  };
+
+  handleSnackbarTimeout = () => {
+    this.setState({ active: false });
+  };
+
+  handleClick = () => {
+    this.setState({ active: true });
+  };
+
+  state = {
+    active: false,
+  };
+
+  render () {
+    return (
+      <section>
+        <h2>Toast</h2>
+        <Button label="Make a toast" primary onClick={this.handleClick} />
+        <Toast
+          active={this.state.active}
+          label="Toast is ready!"
+          timeout={3000}
+          onClick={this.handleSnackbarClick}
+          onTimeout={this.handleSnackbarTimeout}
+        />
+      </section>
+    );
+  }
+}
+
+export default ToastTest;