fix style issues

Author: Arjun-sna

docs/client/components/common/DefaultCode/Snackbar/index.js

@@ -0,0 +1,75 @@
+export const defaultCode = `
+class SnackDisplay extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showSnackbar: false,
+      showTopSnackbar: false,
+      showIndefiniteSnackbar: false,
+    }
+    this.openBottomSnackbar = this.openBottomSnackbar.bind(this);
+    this.openTopSnackbar = this.openTopSnackbar.bind(this);
+    this.openIndefiniteSnackbar = this.openIndefiniteSnackbar.bind(this);
+    this.handleSnackClose = this.handleSnackClose.bind(this);
+  }
+
+  openBottomSnackbar() {
+    this.setState({
+      showSnackbar: !this.state.showSnackbar
+    });
+  }
+
+  openTopSnackbar() {
+    this.setState({
+      showTopSnackbar: !this.state.showTopSnackbar
+    });
+  }
+
+  openIndefiniteSnackbar() {
+    this.setState({
+      showIndefiniteSnackbar: !this.state.showIndefiniteSnackbar
+    });
+  }
+  
+  
+  handleSnackClose() {
+    this.setState({
+      showSnackbar: false,
+      showTopSnackbar: false,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Snackbar
+          active={this.state.showSnackbar}
+          onClose={this.handleSnackClose}>
+          <span>This is a bottom snackbar.</span>
+        </Snackbar>
+        <Snackbar
+          active={this.state.showTopSnackbar}
+          onClose={this.handleSnackClose}
+          position='top'>
+          <span>This is a top snackbar.</span>
+        </Snackbar>
+        <Snackbar
+          active={this.state.showIndefiniteSnackbar}
+          onClose={this.handleSnackClose}
+          autoClose={false}>
+          <span>This is a indefinite snackbar.</span>
+        </Snackbar>
+        <div style={{margin: '10px'}}>
+          <Button type="primary" onClick={this.openBottomSnackbar}>Open Bottom Snackbar</Button>
+        </div>
+        <div style={{margin: '10px'}}>
+          <Button type="primary" onClick={this.openTopSnackbar}>Open Top Snackbar</Button>
+        </div>
+        <div style={{margin: '10px'}}>
+          <Button type="primary" onClick={this.openIndefiniteSnackbar}>{this.state.showIndefiniteSnackbar ? 'Close' : 'Open'} indefinite Snackbar</Button>
+        </div>
+      </div>
+    )
+  }
+}
+`

docs/client/components/common/DefaultCode/index.js

@@ -5,3 +5,4 @@ export { defaultCode as CheckboxGroupDefaultCode } from './CheckboxGroup';
 export { defaultCode as ToggleDefaultCode } from './Toggle';
 export { defaultCode as RadioButtonGroupDefaultCode } from './RadioButtonGroup';
 export { defaultCode as TextInputDefaultCode } from './TextInput';
+export { defaultCode as SnackbarDefaultCode } from './Snackbar';

docs/client/components/common/componentList.js

@@ -11,6 +11,8 @@ import ToggleReadme from '../../../../src/toggle/readMe.md';
 import RadioButtonGroup from '../../../../src/radioButtonGroup';
 import TextInput from '../../../../src/textInput';
 import TextInputReadme from '../../../../src/textInput/readMe.md';
+import Snackbar from '../../../../src/snackbar';
+import SnackbarReadme from '../../../../src/snackbar/readMe.md';
 
 import {
   CardDefaultCode,
@@ -20,6 +22,7 @@ import {
   ToggleDefaultCode,
   RadioButtonGroupDefaultCode,
   TextInputDefaultCode,
+  SnackbarDefaultCode,
 } from './DefaultCode';
 
 export const componentList = [
@@ -64,5 +67,11 @@ export const componentList = [
     docs: TextInputReadme,
     component: TextInput,
     defaultCode: TextInputDefaultCode,
+  },
+  {
+    name: 'Snackbar',
+    docs: SnackbarReadme,
+    component: Snackbar,
+    defaultCode: SnackbarDefaultCode,
   }
 ];

src/index.js

@@ -22,14 +22,15 @@ import Snackbar from './snackbar';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-// export default {
-//   Button,
-//   Card,
-//   Checkbox,
-//   CheckboxGroup,
-//   RadioButtonGroup,
-//   Toggle,
-// };
+export default {
+  Button,
+  Card,
+  Checkbox,
+  CheckboxGroup,
+  RadioButtonGroup,
+  Toggle,
+  Snackbar,
+};
 
 import theme from './theme.scss';
 
@@ -38,17 +39,34 @@ class SnackDisplay extends React.Component {
     super(props);
     this.state = {
       showSnackbar: false,
+      showTopSnackbar: false,
+      showIndefiniteSnackbar: false,
     }
   }
-  handleButtonClick = () => {
+
+  openBottomSnackbar = () => {
     this.setState({
       showSnackbar: !this.state.showSnackbar
     });
   }
+
+  openTopSnackbar = () => {
+    this.setState({
+      showTopSnackbar: !this.state.showTopSnackbar
+    });
+  }
+
+  openIndefiniteSnackbar = () => {
+    this.setState({
+      showIndefiniteSnackbar: !this.state.showIndefiniteSnackbar
+    });
+  }
+  
 
   handleSnackClose = () => {
     this.setState({
       showSnackbar: false,
+      showTopSnackbar: false,
     });
   }
 

src/snackbar/index.js

@@ -62,12 +62,14 @@ class Snackbar extends React.Component {
   }
 
   render() {
-    const { theme, additionaClasses, children } = this.props;
+    const { theme, additionaClasses, position, children } = this.props;
     const { active } = this.state;
-    const classes = classnames(theme.snackbar, active ? 'active' : '', additionaClasses)
+    const classes = classnames(theme.snackbar, additionaClasses)
     return (
-      <div className={classes}>
-        { children }
+      <div className={classnames(theme.snackbarWrapper, position, active ? 'active' : '')}>
+        <div className={classes}>
+          { children }
+        </div>
       </div>
     )
   }
@@ -78,12 +80,14 @@ Snackbar.propTypes = {
   timeout: PropTypes.number,
   onClose: PropTypes.func,
   autoClose: PropTypes.bool,
+  position: PropTypes.string,
 }
 
 Snackbar.defaultProps = {
   additionaClasses: null,
   timeout: 2000,
   autoClose: true,
+  position: 'bottom',
 };
 
 export default themr('CBSnackbar', defaultTheme)(Snackbar);

src/snackbar/theme.scss

@@ -1,19 +1,35 @@
 @import '../globals/theme';
 
+:local(.snackbarWrapper) {
+  position: fixed;
+  width: 100%;
+  right: 0;
+  &.top {
+    top: 10%;
+    &:not(.active) {
+      transform: translateY(-1000%);
+    }
+  
+    &.active {
+      transform: translateY(0%);
+    }
+  }
+  &.bottom {
+    bottom: 10%;
+    &:not(.active) {
+      transform: translateY(1000%);
+    }
+  
+    &.active {
+      transform: translateY(0%);
+    }
+  }
+}
+
 :local(.snackbar) {
   background: $primary-color;
   border-radius: 3px;
   padding: 10px;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-
-  &:not(.active) {
-    transform: translateY(100%);
-  }
-
-  &.active {
-    transform: translateY(0%);
-  }
-}
+  margin: 0 auto;
+  width: 40%;
+}