Toast component

src/components/UI/card/Card.css

@@ -1,8 +1,7 @@
+@import "../theme.css";
+
 .card {
-  composes: base from "../theme.css";
+  composes: base container rounded depth;
-  composes: container from "../theme.css";
-  composes: rounded from "../theme.css";
-  composes: depth from "../theme.css";
   overflow: hidden;
   width: 240px;
 }

src/components/UI/index.js

@@ -1,3 +1,4 @@
 export { default as Card } from './card/Card';
 export { default as Loader } from './loader/Loader';
 export { default as Icon } from './icon/Icon';
+export { default as Toast } from './toast/Toast';

src/components/UI/theme.css

@@ -1,5 +1,6 @@
 :root {
   --defaultColor: #333;
+  --defaultColorLight: #eee;
   --backgroundColor: #fff;
   --shadowColor: rgba(0, 0, 0, 0.117647);
   --successColor: #1c7;

src/components/UI/toast/Toast.css

@@ -0,0 +1,40 @@
+@import "../theme.css";
+
+.toast {
+  composes: base container rounded depth;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 100;
+  width: 350px;
+  padding: 20px 10px;
+  font-size: 0.9rem;
+  text-align: center;
+  color: var(--defaultColorLight);
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity .3s ease-in;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.icon {
+  position: absolute;
+  top: calc(50% - 15px);
+  left: 15px;
+  font-size: 30px;
+}
+
+.success {
+  background-color: var(--successColor);
+}
+
+.warning {
+  background-color: var(--warningColor);
+}
+
+.error {
+  background-color: var(--errorColor);
+}

src/components/UI/toast/Toast.js

@@ -0,0 +1,74 @@
+import React, { PropTypes } from 'react';
+import { Icon } from '../index';
+import styles from './Toast.css';
+
+export default class Toast extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      shown: false
+    };
+
+    this.autoHideTimeout = this.autoHideTimeout.bind(this);
+  }
+
+  componentWillMount() {
+    if (this.props.show) {
+      this.autoHideTimeout();
+      this.setState({ shown: true });
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps !== this.props) {
+      if (nextProps.show) this.autoHideTimeout();
+      this.setState({ shown: nextProps.show });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timeOut) {
+      clearTimeout(this.timeOut);
+    }
+  }
+
+  autoHideTimeout() {
+    clearTimeout(this.timeOut);
+    this.timeOut = setTimeout(() => {
+      this.setState({ shown: false });
+    }, 4000);
+  }
+
+  render() {
+    const { style, type, className, children } = this.props;
+    const icons = {
+      success: 'check',
+      warning: 'attention',
+      error: 'alert'
+    };
+    const classes = [styles.toast];
+    if (className) classes.push(className);
+
+    let icon = '';
+    if (type) {
+      classes.push(styles[type]);
+      icon = <Icon type={icons[type]} className={styles.icon} />;
+    }
+
+    if (!this.state.shown) {
+      classes.push(styles.hidden);
+    }
+
+    return (
+      <div className={classes.join(' ')} style={style}>{icon}{children}</div>
+    );
+  }
+}
+
+Toast.propTypes = {
+  style: PropTypes.object,
+  type: PropTypes.oneOf(['success', 'warning', 'error']).isRequired,
+  className: PropTypes.string,
+  show: PropTypes.bool,
+  children: PropTypes.node
+};

src/components/stories/Toast.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Toast } from '../UI';
+import { storiesOf } from '@kadira/storybook';
+
+
+storiesOf('Toast', module)
+  .add('Success', () => (
+    <div>
+      <Toast type='success' show>A Toast Message</Toast>
+    </div>
+  )).add('Waring', () => (
+    <div>
+      <Toast type='warning' show>A Toast Message</Toast>
+    </div>
+  )).add('Error', () => (
+    <div>
+      <Toast type='error' show>A Toast Message</Toast>
+    </div>
+  ));

src/components/stories/index.js

@@ -1,2 +1,3 @@
 import './Card';
 import './Icon';
+import './Toast';