Configurable SnackBar Position (#63)

Added optional property for snackbar position

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Added keyboard accessibility to the header in `DataGrid` component
 - Added focus to the input label in `TextField` and `SelectMultiple` components
 - Fixed the width of the `Tile` action menu and corrected the focus of nested-level `Accordion` component
+- Added a configurable optional property for `Snackbar` position
 
 ### Breaking changes
 

src/Snackbar/Snackbar.stories.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 import ChevronDownIcon from '@hcl-software/enchanted-icons/dist/carbon/es/chevron--down';
 import Snackbar, { SnackbarVariants } from './Snackbar';
-import SnackbarContainer from './SnackbarContainer';
+import SnackbarContainer, { SnackbarContainerPosition } from './SnackbarContainer';
 import { CircularProgressVariants } from '../ProgressIndicator/CircularProgress';
 
 export default {
@@ -114,7 +114,7 @@ const InteractiveExampleTemplate: StoryFn<typeof Snackbar> = (args) => {
   // @ts-ignore for test only, its purpose is to show snackbar when its stack
   if (args.showStackSnackbar) {
     return (
-      <SnackbarContainer>
+      <SnackbarContainer position={SnackbarContainerPosition.LEFT}>
         <Snackbar {...args} />
         <Snackbar {...args} message={messageTwo} />
         <Snackbar {...args} message={messageThree} />

src/Snackbar/SnackbarContainer.tsx

@@ -14,11 +14,21 @@
  * ======================================================================== */
 import { styled } from '@mui/material/styles';
 
-const SnackbarContainer = styled('div')((theme) => {
+export enum SnackbarContainerPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
+export interface SnackbarContainerProps {
+  position?: SnackbarContainerPosition;
+}
+
+const SnackbarContainer = styled('div')<SnackbarContainerProps>(({ position = SnackbarContainerPosition.RIGHT }) => {
   return {
     position: 'fixed',
-    bottom: '64px',
-    right: '24px',
+    bottom: '12px',
+    right: position === SnackbarContainerPosition.RIGHT ? '12px' : 'unset',
+    left: position === SnackbarContainerPosition.LEFT ? '12px' : 'unset',
     zIndex: 2,
   };
 });