Improvement/snackbar add a success state

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 {

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',
       },

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 })

packages/theme/src/snackbar.scss

@@ -9,6 +9,10 @@
     @apply bg-red-500;
   }
 
+  &--success {
+    @apply bg-green-500;
+  }
+
   &__text {
     @apply font-primary flex-grow;
   }