First steps with <Snackbar/>

components/snackbar/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import style from './style';
+
+import FontIcon from '../font_icon';
+
+export default React.createClass({
+  displayName: 'Slider',
+
+  propTypes: {
+    actions: React.PropTypes.array,
+    caption: React.PropTypes.string,
+    className: React.PropTypes.string,
+    icon: React.PropTypes.string,
+    timeout: React.PropTypes.number,
+    type: React.PropTypes.string
+  },
+
+  getDefaultProps () {
+    return {
+      className: '',
+      timeout: 10
+    };
+  },
+
+  getInitialState () {
+    return {
+      active: false
+    };
+  },
+
+  componentDidMount () {
+    setInterval( function () {
+      console.log('destroy');
+    }, this.props.timeout * 1000)
+  },
+
+  render () {
+    let className = `${style.root} ${style[this.props.type]}`;
+    if (this.props.className) className += ` ${this.props.className}`;
+
+    return (
+      <div data-react-toolbox='snackbar' className={className}>
+        <FontIcon value={this.props.icon} className={style.icon} />
+        <small>{this.props.caption}</small>
+        <nav>
+        </nav>
+      </div>
+    );
+  }
+
+});

components/snackbar/style.scss

@@ -0,0 +1,17 @@
+@import "../variables";
+@import "../mixins";
+$snackbar-background-color: $color-overlay;
+$snackbar-color: unquote("rgb(#{$color-white})");
+
+.root {
+  padding: $offset;
+  margin-top: $offset;
+  background-color: $snackbar-background-color;
+  color: $snackbar-color;
+  border-radius: $border-radius;
+  display: flex;
+}
+
+.icon {
+  margin-right: $offset;
+}

spec/components/snackbar.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Snackbar from '../../components/snackbar';
+
+export default React.createClass({
+  displayName: 'ButtonTest',
+
+  render () {
+    return (
+      <section>
+        <h5>Snackbars & Toasts</h5>
+        <p>lorem ipsum...</p>
+        <Snackbar caption='Message sent' />
+        <Snackbar caption='Message sent' icon='question-answer' />
+        <Snackbar caption='Marked as read' />
+        <Snackbar caption='Marked as read' />
+
+        <p>lorem ipsum...</p>
+      </section>
+    );
+  }
+});