fix(snackbar): update snackbardesign (#294)

* fix(Snackbar): fix snackbar positioning and responsiveness

* feat(Snackbar): Add close icon for indefinite snackbar

#287

* docs(Snackbar): Update docs page

* style(Snackbar): fix padding

Author: KRRISH96

doc/src/components/common/componentData/Snackbar/index.js

@@ -53,6 +53,14 @@ export const componentData = {
       name: 'snackbarWrapper',
       description: 'Class used for snackbar wrapper element',
     },
+    {
+      name: 'snackbarContent',
+      description: 'Class used for snackbar content',
+    },
+    {
+      name: 'close',
+      description: 'Class used for indefinite snackbar close icon',
+    },
   ],
   basicComponent: `
     class SnackDisplay extends React.Component {
@@ -106,6 +114,7 @@ export const componentData = {
         this.openTopSnackbar = this.openTopSnackbar.bind(this);
         this.openIndefiniteSnackbar = this.openIndefiniteSnackbar.bind(this);
         this.handleSnackClose = this.handleSnackClose.bind(this);
+        this.handleIndefiniteSnackClose = this.handleIndefiniteSnackClose.bind(this);
       }
 
       openBottomSnackbar() {
@@ -134,6 +143,12 @@ export const componentData = {
         });
       }
 
+      handleIndefiniteSnackClose() {
+        this.setState({
+          showIndefiniteSnackbar: false,
+        })
+      }
+
       render() {
         return (
           <div>
@@ -176,9 +191,9 @@ export const componentData = {
 
                 <Snackbar
                   active={this.state.showIndefiniteSnackbar}
-                  onClose={this.handleSnackClose}
+                  onClose={this.handleIndefiniteSnackClose}
                   autoClose={false}>
-                  <span>This is a indefinite snackbar.</span>
+                  <span>This is a indefinite snackbar. Click x to close.</span>
                 </Snackbar>
                  
               </PreviewBlock>

lib/snackbar/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { MdClose } from 'react-icons/md';
 import { themr } from 'react-css-themr';
 import defaultTheme from './theme.module.scss';
 
@@ -81,7 +82,7 @@ class Snackbar extends React.Component {
 
   render() {
     const {
-      theme, additionaClasses, position, children,
+      theme, additionaClasses, position, children, autoClose,
     } = this.props;
     const { active } = this.state;
     const classes = classnames(theme.snackbar, additionaClasses);
@@ -95,7 +96,17 @@ class Snackbar extends React.Component {
           active ? `${theme.active} active` : '',
         )}
       >
-        <div className={classes}>{children}</div>
+        <div className={classes}>
+          <div className={theme.snackbarContent}>{children}</div>
+          {
+            !autoClose && (
+              <MdClose
+                onClick={() => this.dismissSnackbar()}
+                className={classnames(theme.close)}
+              />
+            )
+          }
+        </div>
       </div>
     );
   }

lib/snackbar/theme.module.scss

@@ -8,7 +8,7 @@
   will-change: transform;
   transition: transform 0.4s;
   &.top {
-    top: 10%;
+    top: 4%;
     &:not(.active) {
       -webkit-transform: translateY(-1000%);
       transform: translateY(-1000%);
@@ -20,7 +20,7 @@
     }
   }
   &.bottom {
-    bottom: 10%;
+    bottom: 4%;
     &:not(.active) {
       -webkit-transform: translateY(1000%);
       transform: translateY(1000%);
@@ -34,10 +34,34 @@
 }
 
 :local(.snackbar) {
-  background: $primary-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42em;
+  background: $cool-blue;
   border-radius: 3px;
-  padding: 10px 20px;
+  padding: 0.9em 1.2em;
   margin: 0 auto;
-  width: 40%;
+  text-align: center;
   box-shadow: 2px 2px 4px #33333352;
+  color: $original-white;
+  position: relative;
 }
+
+:local(.snackbarContent) {
+  margin-right: 0.7em;
+}
+
+:local(.close) {
+  color: inherit;
+  cursor: pointer;
+  justify-self: flex-end;
+  position: absolute;
+  right: 1em;
+}
+
+@media only screen and (max-width: 768px) {
+  :local(.snackbar) {
+    width: 80%;
+  }
+}