From 7fc6e0c10d967f43e21477a315b9c8c0f9a59d99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susanna=20Landstr=C3=B6m?= <susanna.landstrom@lyyti.com>
Date: Fri, 22 Dec 2023 13:23:49 +0200
Subject: [PATCH 1/4] enable action in snackbar

---
 src/components/Snackbar.tsx           |  7 ++++---
 stories/Feedback/Snackbar.stories.tsx | 24 +++++++++++++++++++-----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index eb6b21c69..94bf8ad02 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -1,4 +1,4 @@
-import { Snackbar as MuiSnackbar, SnackbarProps as MuiSnackbarProps } from '@mui/material';
+import { Divider, Snackbar as MuiSnackbar, SnackbarProps as MuiSnackbarProps } from '@mui/material';
 import AlertBase from './AlertBase';
 import Slide from '@mui/material/Slide';
 import { TransitionProps } from '@mui/material/transitions';
@@ -14,7 +14,7 @@ export interface SnackbarProps extends MuiSnackbarProps {
   direction?: 'right' | 'left' | 'up' | 'down';
   severity?: 'success' | 'info' | 'warning' | 'error';
   variant?: 'standard' | 'filled' | 'outlined';
-  ref?: Ref<HTMLDivElement>
+  ref?: Ref<HTMLDivElement>;
 }
 
 const Snackbar = (
@@ -28,6 +28,7 @@ const Snackbar = (
     direction = 'left',
     severity = 'success',
     variant = 'standard',
+    action,
     ...props
   }: SnackbarProps,
   ref: Ref<HTMLDivElement>
@@ -43,7 +44,7 @@ const Snackbar = (
       {...props}
     >
       <div>
-        <AlertBase color={color} severity={severity} variant={variant}>
+        <AlertBase color={color} severity={severity} variant={variant} action={action}>
           {props.message}
         </AlertBase>
       </div>
diff --git a/stories/Feedback/Snackbar.stories.tsx b/stories/Feedback/Snackbar.stories.tsx
index faaeee499..7592e1676 100644
--- a/stories/Feedback/Snackbar.stories.tsx
+++ b/stories/Feedback/Snackbar.stories.tsx
@@ -3,6 +3,7 @@ import { useState, SyntheticEvent } from 'react';
 import Snackbar, { SnackbarProps } from '../../src/components/Snackbar';
 import Button from '../../src/components/Button';
 import { modifyExcludedParams } from '../../.storybook/excludedParams';
+import { Box } from '@mui/material';
 
 const meta: Meta = {
   title: 'Components/Feedback/Snackbar',
@@ -50,12 +51,10 @@ const Template: StoryFn<SnackbarProps> = (args) => {
   args.onClose = handleClose;
 
   return (
-    <>
-      <Button variant="contained" color="primary" onClick={() => setShowSnackbar(true)}>
-        {'Open snackbar'}
-      </Button>
+    <Box sx={{ width: '800px', display: 'flex', justifyContent: 'center' }}>
+      <Button onClick={() => setShowSnackbar(true)}>{'Open snackbar'}</Button>
       <Snackbar {...args} />
-    </>
+    </Box>
   );
 };
 
@@ -64,6 +63,16 @@ Success.args = {
   message: 'Success message',
 };
 
+export const SuccessWithAction = Template.bind({});
+SuccessWithAction.args = {
+  message: 'Success message',
+  action: (
+    <Button color="inherit" onClick={() => console.log('clicked snackbar button')} variant="text">
+      Click me
+    </Button>
+  ),
+};
+
 export const Error = Template.bind({});
 Error.args = {
   message: 'Error occured',
@@ -86,4 +95,9 @@ Info.args = {
     horizontal: 'left',
   },
   direction: 'up',
+  action: (
+    <Button color="inherit" onClick={() => console.log('clicked snackbar button')} variant="text">
+      click me
+    </Button>
+  ),
 };

From 567cbeecceb88329c7f520652e81f91322133d04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susanna=20Landstr=C3=B6m?= <susanna.landstrom@lyyti.com>
Date: Fri, 22 Dec 2023 13:24:11 +0200
Subject: [PATCH 2/4] adjust styling

---
 src/components/AlertBase.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/AlertBase.tsx b/src/components/AlertBase.tsx
index c4aaf982c..96deecd87 100644
--- a/src/components/AlertBase.tsx
+++ b/src/components/AlertBase.tsx
@@ -12,7 +12,15 @@ const AlertBase = (
   { severity = 'success', variant = 'standard', ...props }: AlertBaseProps,
   ref: Ref<HTMLDivElement>
 ): JSX.Element => {
-  return <MuiAlert ref={ref} severity={severity} variant={variant} {...props} />;
+  return (
+    <MuiAlert
+      ref={ref}
+      severity={severity}
+      variant={variant}
+      sx={{ alignItems: 'center', '& .MuiAlert-action': { pt: 0, pl: 5 } }}
+      {...props}
+    />
+  );
 };
 
 export default forwardRef(AlertBase);

From be85fd615a8f38845b3b5419d17b1995a095c651 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susanna=20Landstr=C3=B6m?= <susanna.landstrom@lyyti.com>
Date: Fri, 22 Dec 2023 13:25:44 +0200
Subject: [PATCH 3/4] bump version to 3.6.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d7ae9b27..e799b8a47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lyyti/design-system",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@lyyti/design-system",
-      "version": "3.6.0",
+      "version": "3.6.1",
       "license": "MIT",
       "dependencies": {
         "@emotion/react": "11.11.1",
diff --git a/package.json b/package.json
index f5494cb70..80d896a55 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "engines": {
     "node": "^18",
     "npm": "^9"

From 50b68a77275494fbe5de29bd7a46277f76e33ccb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susanna=20Landstr=C3=B6m?= <susanna.landstrom@lyyti.com>
Date: Fri, 22 Dec 2023 13:30:12 +0200
Subject: [PATCH 4/4] remove redundant import

---
 src/components/Snackbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index 94bf8ad02..253c0a685 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -1,4 +1,4 @@
-import { Divider, Snackbar as MuiSnackbar, SnackbarProps as MuiSnackbarProps } from '@mui/material';
+import { Snackbar as MuiSnackbar, SnackbarProps as MuiSnackbarProps } from '@mui/material';
 import AlertBase from './AlertBase';
 import Slide from '@mui/material/Slide';
 import { TransitionProps } from '@mui/material/transitions';