From 4213c26f1575b3b3c8913ff0e6f49ca1baa4bc09 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 4 Oct 2023 12:26:17 +0200
Subject: [PATCH 1/2] fix: #205 - [snackbar] - add success variant

---
 packages/components/snackbar/src/snackbar.ts  |  2 +-
 .../snackbar/stories/snackbar.stories.ts      | 51 ++++++++++++++++++-
 packages/theme/src/snackbar.scss              |  4 ++
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/packages/components/snackbar/src/snackbar.ts b/packages/components/snackbar/src/snackbar.ts
index caef015a..46e51e64 100644
--- a/packages/components/snackbar/src/snackbar.ts
+++ b/packages/components/snackbar/src/snackbar.ts
@@ -2,7 +2,7 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Snackbar from './snackbar.vue'
 
-export const snackbarVariants = ['default', 'danger'] as const
+export const snackbarVariants = ['default', 'danger', 'success'] as const
 export type PuikSnackbarVariant = (typeof snackbarVariants)[number]
 
 export interface SnackbarAction {
diff --git a/packages/components/snackbar/stories/snackbar.stories.ts b/packages/components/snackbar/stories/snackbar.stories.ts
index b46ccf49..ad7967cf 100644
--- a/packages/components/snackbar/stories/snackbar.stories.ts
+++ b/packages/components/snackbar/stories/snackbar.stories.ts
@@ -119,12 +119,18 @@ const WithoutActionTemplate: StoryFn = () => ({
         text: 'Unable to update settings.',
         variant: 'danger',
       })
-    return { displaySnackbar, displayErrorSnackbar }
+    const displaySuccessSnackbar = () =>
+      PuikSnackbar({
+        text: 'Settings updated successfully.',
+        variant: 'success',
+      })
+    return { displaySnackbar, displayErrorSnackbar, displaySuccessSnackbar }
   },
   template: `
     <div class="space-x-4">
       <puik-button @click="displaySnackbar">Display Snackbar</puik-button>
       <puik-button @click="displayErrorSnackbar">Display Error Snackbar</puik-button>
+      <puik-button @click="displaySuccessSnackbar">Display Success Snackbar</puik-button>
     </div>
   `,
 })
@@ -139,6 +145,7 @@ export const WithoutAction: StoryObj = {
 <template>
   <puik-button @click="displaySnackbar">Display Snackbar</puik-button>
   <puik-button @click="displayErrorSnackbar">Display Error Snackbar</puik-button>
+  <puik-button @click="displaySuccessSnackbar">Display Success Snackbar</puik-button>
 </template>
 
 <script lang="ts" setup>
@@ -151,6 +158,11 @@ const displayErrorSnackbar = () =>
     text: 'Unable to update settings.',
     variant: 'danger',
   })
+const displaySuccessSnackbar = () =>
+  PuikSnackbar({
+    text: 'Settings updated successfully.',
+    variant: 'success',
+  })
 </script>
 
 <!--HTML/CSS Snippet-->
@@ -179,6 +191,13 @@ const displayErrorSnackbar = () =>
     close
   </button>
 </div>
+
+<div class="puik-snackbar puik-snackbar--success" style="bottom: 168px">
+  <span class="puik-snackbar__text">Settings updated successfully.</span>
+  <button class="puik-snackbar__close-button">
+    close
+  </button>
+</div>
       `,
         language: 'html',
       },
@@ -208,12 +227,22 @@ const WithActionTemplate: StoryFn = () => ({
           callback: action('Error snackbar action callback function'),
         },
       })
-    return { displaySnackbar, displayErrorSnackbar }
+    const displaySuccessSnackbar = () =>
+      PuikSnackbar({
+        text: 'Settings updated successfully.',
+        variant: 'success',
+        action: {
+          label: 'Cancel',
+          callback: action('Success snackbar action callback function'),
+        },
+      })
+    return { displaySnackbar, displayErrorSnackbar, displaySuccessSnackbar }
   },
   template: `
     <div class="space-x-4">
       <puik-button @click="displaySnackbar">Display Snackbar</puik-button>
       <puik-button @click="displayErrorSnackbar">Display Error Snackbar</puik-button>
+      <puik-button @click="displaySuccessSnackbar">Display Success Snackbar</puik-button>
     </div>
   `,
 })
@@ -228,6 +257,7 @@ export const WithAction: StoryObj = {
   <template>
     <puik-button @click="displaySnackbar">Display Snackbar</puik-button>
     <puik-button @click="displayErrorSnackbar">Display Error Snackbar</puik-button>
+    <puik-button @click="displaySuccessSnackbar">Display Success Snackbar</puik-button>
   </template>
 
   <script lang="ts" setup>
@@ -248,6 +278,15 @@ export const WithAction: StoryObj = {
         callback: action('Error snackbar action callback function'),
       },
     })
+  const displaySuccessSnackbar = () =>
+    PuikSnackbar({
+      text: 'Unable to update settings.',
+      variant: 'success',
+      action: {
+        label: 'Cancel',
+        callback: action('Success snackbar action callback function'),
+      },
+    })
   </script>
 
   <!--HTML/CSS Snippet-->
@@ -278,6 +317,14 @@ export const WithAction: StoryObj = {
       close
     </button>
   </div>
+
+  <div class="puik-snackbar puik-snackbar--success" style="bottom: 168px">
+    <span class="puik-snackbar__text">Settings updated successfully.</span>
+    <button class="puik-snackbar__action">Retry</button>
+    <button class="puik-snackbar__close-button">
+      close
+    </button>
+  </div>
         `,
         language: 'html',
       },
diff --git a/packages/theme/src/snackbar.scss b/packages/theme/src/snackbar.scss
index 6d4010ba..6fcccda0 100644
--- a/packages/theme/src/snackbar.scss
+++ b/packages/theme/src/snackbar.scss
@@ -9,6 +9,10 @@
     @apply bg-red-500;
   }
 
+  &--success {
+    @apply bg-green-500;
+  }
+
   &__text {
     @apply font-primary flex-grow;
   }

From 17bd2262b8e1ac1cb44f915f96263412aab07a7a Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 4 Oct 2023 12:28:45 +0200
Subject: [PATCH 2/2] fix: #205 - [snackbar] - add tests

---
 .../components/snackbar/test/snackbar.spec.ts | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/components/snackbar/test/snackbar.spec.ts b/packages/components/snackbar/test/snackbar.spec.ts
index e851b600..afa5abf5 100644
--- a/packages/components/snackbar/test/snackbar.spec.ts
+++ b/packages/components/snackbar/test/snackbar.spec.ts
@@ -66,6 +66,14 @@ describe('Snackbar tests', () => {
     expect(findAction().exists()).toBeFalsy()
   })
 
+  it('should be a success snackbar without action', () => {
+    const text = faker.lorem.sentence()
+    factory({ text, variant: 'success' })
+    expect(findText().text()).toEqual(text)
+    expect(findSnackbar().classes()).toContain('puik-snackbar--success')
+    expect(findAction().exists()).toBeFalsy()
+  })
+
   it('should be a dangerous snackbar with action', async () => {
     const text = faker.lorem.sentence()
     const label = faker.lorem.word()
@@ -86,6 +94,26 @@ describe('Snackbar tests', () => {
     expect(callback).toBeCalled()
   })
 
+  it('should be a success snackbar with action', async () => {
+    const text = faker.lorem.sentence()
+    const label = faker.lorem.word()
+    const callback = vi.fn()
+    factory({
+      text,
+      action: {
+        label,
+        callback,
+      },
+      variant: 'success',
+    })
+    expect(findAction().exists()).toBeTruthy()
+    expect(findText().text()).toEqual(text)
+    expect(findSnackbar().classes()).toContain('puik-snackbar--success')
+    expect(findAction().text()).toEqual(label)
+    await findAction().trigger('click')
+    expect(callback).toBeCalled()
+  })
+
   it('should close the snackbar when clicking on the close button', async () => {
     const text = faker.lorem.sentence()
     await factory({ text })