diff --git a/components/snackbar/index.js b/components/snackbar/index.js new file mode 100644 index 00000000..73a85d74 --- /dev/null +++ b/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 ( +
+ + {this.props.caption} + +
+ ); + } + +}); diff --git a/components/snackbar/style.scss b/components/snackbar/style.scss new file mode 100644 index 00000000..cbadfa3b --- /dev/null +++ b/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; +} diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx new file mode 100644 index 00000000..f4696100 --- /dev/null +++ b/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 ( +
+
Snackbars & Toasts
+

lorem ipsum...

+ + + + + +

lorem ipsum...

+
+ ); + } +});