From 0fb0d05bbd4b616cfb2f9f41e53ee42a3ebdf482 Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Thu, 15 Feb 2024 16:39:00 +0100
Subject: [PATCH 1/2] feat(@vtmn/react, @vtmn/vue): timeout enhancement

---
 .../core/csf/components/overlays/alert.csf.js |  9 +++++++++
 .../csf/components/overlays/snackbar.csf.js   |  8 ++++++++
 .../core/csf/components/overlays/toast.csf.js |  8 ++++++++
 .../overlays/VtmnAlert/VtmnAlert.stories.tsx  |  4 +++-
 .../VtmnSnackbar/VtmnSnackbar.stories.tsx     |  4 +++-
 .../overlays/VtmnToast/VtmnToast.stories.tsx  |  4 +++-
 .../VtmnSnackbar/VtmnSnackbar.stories.svelte  | 12 +----------
 .../overlays/VtmnAlert/VtmnAlert.stories.js   |  4 +++-
 .../VtmnSnackbar/VtmnSnackbar.stories.js      | 12 ++++++++++-
 .../overlays/VtmnToast/VtmnToast.stories.js   | 12 ++++++++++-
 .../overlays/VtmnAlert/VtmnAlert.tsx          | 10 +++++++++-
 .../overlays/VtmnSnackbar/VtmnSnackbar.tsx    | 20 ++++++++++++++++++-
 .../overlays/VtmnToast/VtmnToast.tsx          | 16 ++++++++++++++-
 .../overlays/VtmnAlert/VtmnAlert.vue          | 19 ++++++++++++++++--
 .../overlays/VtmnSnackbar/VtmnSnackbar.vue    | 20 ++++++++++++++++---
 .../overlays/VtmnToast/VtmnToast.vue          | 17 ++++++++++++++--
 16 files changed, 152 insertions(+), 27 deletions(-)

diff --git a/packages/showcases/core/csf/components/overlays/alert.csf.js b/packages/showcases/core/csf/components/overlays/alert.csf.js
index 8698bd2c9..578601f76 100644
--- a/packages/showcases/core/csf/components/overlays/alert.csf.js
+++ b/packages/showcases/core/csf/components/overlays/alert.csf.js
@@ -32,4 +32,13 @@ export const argTypes = {
     defaultValue: undefined,
     control: { type: 'text' },
   },
+
+  timeout: {
+    type: { name: 'number', required: false },
+    description: 'Duration of the animation',
+    defaultValue: 8000,
+    control: {
+      type: 'number',
+    },
+  },
 };
diff --git a/packages/showcases/core/csf/components/overlays/snackbar.csf.js b/packages/showcases/core/csf/components/overlays/snackbar.csf.js
index ddbdb510a..e4f0c19fe 100644
--- a/packages/showcases/core/csf/components/overlays/snackbar.csf.js
+++ b/packages/showcases/core/csf/components/overlays/snackbar.csf.js
@@ -31,4 +31,12 @@ export const argTypes = {
       type: 'text',
     },
   },
+  timeout: {
+    type: { name: 'number', required: false },
+    description: 'Duration of the animation',
+    defaultValue: 4500,
+    control: {
+      type: 'number',
+    },
+  },
 };
diff --git a/packages/showcases/core/csf/components/overlays/toast.csf.js b/packages/showcases/core/csf/components/overlays/toast.csf.js
index bc6fc9fba..4417a61ca 100644
--- a/packages/showcases/core/csf/components/overlays/toast.csf.js
+++ b/packages/showcases/core/csf/components/overlays/toast.csf.js
@@ -31,4 +31,12 @@ export const argTypes = {
       type: 'boolean',
     },
   },
+  timeout: {
+    type: { name: 'number', required: false },
+    description: 'Duration of the animation',
+    defaultValue: 4500,
+    control: {
+      type: 'number',
+    },
+  },
 };
diff --git a/packages/showcases/react/stories/components/overlays/VtmnAlert/VtmnAlert.stories.tsx b/packages/showcases/react/stories/components/overlays/VtmnAlert/VtmnAlert.stories.tsx
index a4374154b..0ba28c52b 100644
--- a/packages/showcases/react/stories/components/overlays/VtmnAlert/VtmnAlert.stories.tsx
+++ b/packages/showcases/react/stories/components/overlays/VtmnAlert/VtmnAlert.stories.tsx
@@ -7,6 +7,8 @@ import {
 import { VtmnAlert } from '@vtmn/react';
 import { VtmnButton } from '@vtmn/react';
 
+const CSS_ANIMATION_TIME_MS = 700;
+
 export default {
   title: 'Components / Overlays / VtmnAlert',
   component: VtmnAlert,
@@ -21,7 +23,7 @@ const OverviewTemplate: Story = (args) => {
     if (showAlert) {
       const timeout = setTimeout(() => {
         setShowAlert(false);
-      }, 8000);
+      }, args.timeout + CSS_ANIMATION_TIME_MS);
       return () => clearTimeout(timeout);
     }
   }, [showAlert]);
diff --git a/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx b/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx
index bcc384297..7e28ab769 100644
--- a/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx
+++ b/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx
@@ -7,6 +7,8 @@ import {
 import { VtmnSnackbar } from '@vtmn/react';
 import { VtmnButton } from '@vtmn/react';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnSnackbar',
   component: VtmnSnackbar,
@@ -21,7 +23,7 @@ const OverviewTemplate: Story = (args) => {
     if (showSnackbar) {
       const timeout = setTimeout(() => {
         setshowSnackbar(false);
-      }, 8000);
+      }, args.timeout + CSS_ANIMATION_TIME_MS);
       return () => clearTimeout(timeout);
     }
   }, [showSnackbar]);
diff --git a/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx b/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx
index f35320739..94e9f8f0c 100644
--- a/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx
+++ b/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx
@@ -7,6 +7,8 @@ import {
 import { VtmnToast } from '@vtmn/react';
 import { VtmnButton } from '@vtmn/react';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnToast',
   component: VtmnToast,
@@ -21,7 +23,7 @@ const OverviewTemplate: Story = (args) => {
     if (showToast) {
       const timeout = setTimeout(() => {
         setshowToast(false);
-      }, 8000);
+      }, args.timeout + CSS_ANIMATION_TIME_MS);
       return () => clearTimeout(timeout);
     }
   }, [showToast]);
diff --git a/packages/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte b/packages/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte
index f93c77976..1578e8802 100644
--- a/packages/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte
+++ b/packages/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte
@@ -11,17 +11,7 @@
 <Meta
   title="Components / Overlays / VtmnSnackbar"
   component={VtmnSnackbar}
-  argTypes={{
-    ...argTypes,
-    timeout: {
-      type: { name: 'number', required: false },
-      description: 'Duration of the animation',
-      defaultValue: 4500,
-      control: {
-        type: 'number',
-      },
-    },
-  }}
+  {argTypes}
   parameters={{
     ...parameters,
     readme: {
diff --git a/packages/showcases/vue/stories/components/overlays/VtmnAlert/VtmnAlert.stories.js b/packages/showcases/vue/stories/components/overlays/VtmnAlert/VtmnAlert.stories.js
index e86e23ce0..7817105b5 100644
--- a/packages/showcases/vue/stories/components/overlays/VtmnAlert/VtmnAlert.stories.js
+++ b/packages/showcases/vue/stories/components/overlays/VtmnAlert/VtmnAlert.stories.js
@@ -5,6 +5,8 @@ import {
   parameters,
 } from '@vtmn/showcase-core/csf/components/overlays/alert.csf';
 
+const CSS_ANIMATION_TIME_MS = 700;
+
 export default {
   title: 'Components / Overlays / VtmnAlert',
   component: VtmnAlert,
@@ -23,7 +25,7 @@ const Template = (args) => ({
         showAlert.value = true;
         setTimeout(() => {
           showAlert.value = false;
-        }, 8000);
+        }, args.timeout + CSS_ANIMATION_TIME_MS);
       },
       args,
     };
diff --git a/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js b/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js
index e12ea97ff..545d22d74 100644
--- a/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js
+++ b/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js
@@ -2,6 +2,8 @@ import { ref } from 'vue';
 import { VtmnSnackbar, VtmnButton } from '@vtmn/vue';
 import { parameters } from '@vtmn/showcase-core/csf/components/overlays/snackbar.csf';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnSnackbar',
   component: VtmnSnackbar,
@@ -22,6 +24,14 @@ export default {
         type: 'text',
       },
     },
+    timeout: {
+      type: { name: 'number', required: false },
+      description: 'Duration of the animation',
+      defaultValue: 4500,
+      control: {
+        type: 'number',
+      },
+    },
   },
   parameters,
 };
@@ -37,7 +47,7 @@ const Template = (args) => ({
         showSnackbar.value = true;
         setTimeout(() => {
           showSnackbar.value = false;
-        }, 8000);
+        }, args.timeout + CSS_ANIMATION_TIME_MS);
       },
       args,
     };
diff --git a/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js b/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js
index 618608d52..c31696594 100644
--- a/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js
+++ b/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js
@@ -2,6 +2,8 @@ import { ref } from 'vue';
 import { VtmnToast, VtmnButton } from '@vtmn/vue';
 import { parameters } from '@vtmn/showcase-core/csf/components/overlays/toast.csf';
 
+const CSS_ANIMATION_TIME_MS = 500;
+
 export default {
   title: 'Components / Overlays / VtmnToast',
   component: VtmnToast,
@@ -22,6 +24,14 @@ export default {
         type: 'boolean',
       },
     },
+    timeout: {
+      type: { name: 'number', required: false },
+      description: 'Duration of the animation',
+      defaultValue: 4500,
+      control: {
+        type: 'number',
+      },
+    },
   },
   parameters,
 };
@@ -37,7 +47,7 @@ const Template = (args) => ({
         showToast.value = true;
         setTimeout(() => {
           showToast.value = false;
-        }, 8000);
+        }, args.timeout + CSS_ANIMATION_TIME_MS);
       },
       args,
     };
diff --git a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
index 2080fb721..2aeb00ec0 100644
--- a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
+++ b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
@@ -4,6 +4,8 @@ import { VtmnAlertVariant } from './types';
 import clsx from 'clsx';
 import { VtmnButton } from '../../actions/VtmnButton';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export interface VtmnAlertProps
   extends Omit<React.ComponentPropsWithoutRef<'dialog'>, 'onClose'> {
   /**
@@ -48,14 +50,20 @@ export const VtmnAlert = ({
   timeout = 8000,
   className,
 }: VtmnAlertProps) => {
+  const propertyStyle: Record<string, string> = {
+    '--vtmn-animation_alert-duration': `${
+      timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS
+    }ms`,
+  };
   return (
     <div
       aria-label={title}
       role="dialog"
+      style={propertyStyle}
       className={clsx(
         'vtmn-alert',
         `vtmn-alert_variant--${variant}`,
-        timeout > 0 && 'show',
+        timeout > 0 && 'show animate-delay',
         className,
       )}
     >
diff --git a/packages/sources/react/src/components/overlays/VtmnSnackbar/VtmnSnackbar.tsx b/packages/sources/react/src/components/overlays/VtmnSnackbar/VtmnSnackbar.tsx
index 521e802b2..b7cdb5d69 100644
--- a/packages/sources/react/src/components/overlays/VtmnSnackbar/VtmnSnackbar.tsx
+++ b/packages/sources/react/src/components/overlays/VtmnSnackbar/VtmnSnackbar.tsx
@@ -3,6 +3,8 @@ import '@vtmn/css-snackbar/dist/index-with-vars.css';
 import clsx from 'clsx';
 import { VtmnButton } from '../../actions/VtmnButton';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export interface VtmnSnackbarProps
   extends Omit<React.ComponentPropsWithoutRef<'dialog'>, 'onClose'> {
   /**
@@ -20,6 +22,11 @@ export interface VtmnSnackbarProps
    */
   withCloseButton?: boolean;
 
+  /**
+   * Duration of the snackbar in ms
+   */
+  timeout?: number;
+
   /**
    * The alert callback close function
    * @type {function}
@@ -33,11 +40,22 @@ export const VtmnSnackbar = ({
   withCloseButton = false,
   onClose,
   className,
+  timeout = 4500,
 }: VtmnSnackbarProps) => {
+  const propertyStyle: Record<string, string> = {
+    '--vtmn-animation_overlay-duration': `${
+      timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS
+    }ms`,
+  };
   return (
     <div
       role="status"
-      className={clsx('vtmn-snackbar', 'show', className)}
+      style={propertyStyle}
+      className={clsx(
+        'vtmn-snackbar',
+        timeout > 0 && 'show animate-delay',
+        className,
+      )}
       onClick={onClose}
     >
       <div className="vtmn-snackbar_content">{content}</div>
diff --git a/packages/sources/react/src/components/overlays/VtmnToast/VtmnToast.tsx b/packages/sources/react/src/components/overlays/VtmnToast/VtmnToast.tsx
index 762422dc5..23df2d81c 100644
--- a/packages/sources/react/src/components/overlays/VtmnToast/VtmnToast.tsx
+++ b/packages/sources/react/src/components/overlays/VtmnToast/VtmnToast.tsx
@@ -3,6 +3,8 @@ import '@vtmn/css-toast/dist/index-with-vars.css';
 import clsx from 'clsx';
 import { VtmnButton } from '../../actions/VtmnButton';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export interface VtmnToastProps
   extends Omit<React.ComponentPropsWithoutRef<'dialog'>, 'onClose'> {
   /**
@@ -20,6 +22,11 @@ export interface VtmnToastProps
    */
   withCloseButton?: boolean;
 
+  /**
+   * Duration of the toast in ms
+   */
+  timeout?: number;
+
   /**
    * The alert callback close function
    * @type {function}
@@ -33,13 +40,20 @@ export const VtmnToast = ({
   withCloseButton = false,
   onClose,
   className,
+  timeout = 4500,
 }: VtmnToastProps) => {
+  const propertyStyle: Record<string, string> = {
+    '--vtmn-animation_overlay-duration': `${
+      timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS
+    }ms`,
+  };
   return (
     <div
       role="status"
+      style={propertyStyle}
       className={clsx(
         'vtmn-toast',
-        'show',
+        timeout > 0 && 'show animate-delay',
         withIcon && 'vtmn-toast--with-icon-info',
         className,
       )}
diff --git a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
index 96113aaaa..74ff79dda 100644
--- a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
+++ b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
@@ -4,6 +4,8 @@ import { computed, defineComponent, PropType, reactive } from 'vue';
 import { VtmnAlertVariant } from './types';
 import { VtmnButton } from '../../index';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export default /*#__PURE__*/ defineComponent({
   name: 'VtmnAlert',
   components: { VtmnButton },
@@ -49,9 +51,16 @@ export default /*#__PURE__*/ defineComponent({
     return {
       classes: computed(() => ({
         'vtmn-alert': true,
-        show: props.timeout > 0,
+        'show animate-delay': props.timeout > 0,
         [`vtmn-alert_variant--${props.variant}`]: props.variant,
       })),
+      style: {
+        '--vtmn-animation_alert-duration': `${
+          typeof props.timeout === 'number' && props.timeout < Infinity
+            ? props.timeout
+            : INFINITE_TIMEOUT_MS
+        }ms`,
+      },
       handleClose,
     };
   },
@@ -59,7 +68,13 @@ export default /*#__PURE__*/ defineComponent({
 </script>
 
 <template>
-  <div :class="classes" role="alert" tabindex="-1" v-bind="$attrs">
+  <div
+    :class="classes"
+    :style="style"
+    role="alert"
+    tabindex="-1"
+    v-bind="$attrs"
+  >
     <div class="vtmn-alert_content" role="document">
       <div class="vtmn-alert_content-title">
         {{ title }}
diff --git a/packages/sources/vue/src/components/overlays/VtmnSnackbar/VtmnSnackbar.vue b/packages/sources/vue/src/components/overlays/VtmnSnackbar/VtmnSnackbar.vue
index 57775f02a..5375b0336 100644
--- a/packages/sources/vue/src/components/overlays/VtmnSnackbar/VtmnSnackbar.vue
+++ b/packages/sources/vue/src/components/overlays/VtmnSnackbar/VtmnSnackbar.vue
@@ -2,6 +2,9 @@
 import '@vtmn/css-snackbar/dist/index-with-vars.css';
 import { computed, defineComponent, PropType } from 'vue';
 import { VtmnButton } from '../../index';
+
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export default /*#__PURE__*/ defineComponent({
   name: 'VtmnSnackbar',
   inheritAttrs: false,
@@ -11,13 +14,17 @@ export default /*#__PURE__*/ defineComponent({
       type: Boolean as PropType<boolean>,
       default: false,
     },
+    timeout: {
+      type: Number as PropType<number>,
+      default: 4500,
+    },
     actionLabel: {
       type: String as PropType<string>,
       default: undefined,
     },
   },
   emits: ['close', 'action'],
-  setup(_, { emit }) {
+  setup(props, { emit }) {
     const handleClose = (event: Event) => {
       return emit('close', (event.target as HTMLInputElement).value);
     };
@@ -29,8 +36,15 @@ export default /*#__PURE__*/ defineComponent({
     return {
       classes: computed(() => ({
         'vtmn-snackbar': true,
-        show: true,
+        'show animate-delay': props.timeout > 0,
       })),
+      style: {
+        '--vtmn-animation_overlay-duration': `${
+          typeof props.timeout === 'number' && props.timeout < Infinity
+            ? props.timeout
+            : INFINITE_TIMEOUT_MS
+        }ms`,
+      },
       handleClose,
       handleAction,
     };
@@ -39,7 +53,7 @@ export default /*#__PURE__*/ defineComponent({
 </script>
 
 <template>
-  <div :class="classes" role="status" v-bind="$attrs">
+  <div :class="classes" :style="style" role="status" v-bind="$attrs">
     <div v-if="$slots.content" class="vtmn-snackbar_content">
       <slot name="content" />
     </div>
diff --git a/packages/sources/vue/src/components/overlays/VtmnToast/VtmnToast.vue b/packages/sources/vue/src/components/overlays/VtmnToast/VtmnToast.vue
index 465130719..cf0b2c194 100644
--- a/packages/sources/vue/src/components/overlays/VtmnToast/VtmnToast.vue
+++ b/packages/sources/vue/src/components/overlays/VtmnToast/VtmnToast.vue
@@ -3,6 +3,8 @@ import '@vtmn/css-toast/dist/index-with-vars.css';
 import { computed, defineComponent, PropType, reactive } from 'vue';
 import { VtmnButton } from '../../index';
 
+const INFINITE_TIMEOUT_MS = 9999000;
+
 export default /*#__PURE__*/ defineComponent({
   name: 'VtmnToast',
   inheritAttrs: false,
@@ -12,6 +14,10 @@ export default /*#__PURE__*/ defineComponent({
       type: Boolean as PropType<boolean>,
       default: false,
     },
+    timeout: {
+      type: Number as PropType<number>,
+      default: 4500,
+    },
     withCloseButton: {
       type: Boolean as PropType<boolean>,
       default: false,
@@ -28,9 +34,16 @@ export default /*#__PURE__*/ defineComponent({
     return {
       classes: computed(() => ({
         'vtmn-toast': true,
-        show: true,
+        'show animate-delay': props.timeout > 0,
         [`vtmn-toast--with-icon-info`]: props.withIcon,
       })),
+      style: {
+        '--vtmn-animation_overlay-duration': `${
+          typeof props.timeout === 'number' && props.timeout < Infinity
+            ? props.timeout
+            : INFINITE_TIMEOUT_MS
+        }ms`,
+      },
       handleClose,
     };
   },
@@ -38,7 +51,7 @@ export default /*#__PURE__*/ defineComponent({
 </script>
 
 <template>
-  <div :class="classes" role="status" v-bind="$attrs">
+  <div :class="classes" :style="style" role="status" v-bind="$attrs">
     <div v-if="$slots.content" class="vtmn-toast_content">
       <slot name="content" />
     </div>

From 2313df6dfa6742b84dbc1b9b489434dc791dbb27 Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Wed, 21 Feb 2024 09:23:03 +0100
Subject: [PATCH 2/2] feat(@vtmn/react, @vtmn/vue): cr

---
 .../csf/components/overlays/snackbar.csf.js   |  6 ----
 .../core/csf/components/overlays/toast.csf.js |  6 ----
 .../VtmnSnackbar/VtmnSnackbar.stories.tsx     | 10 +++++-
 .../overlays/VtmnToast/VtmnToast.stories.tsx  | 10 +++++-
 .../VtmnToast/VtmnToast.stories.svelte        | 12 +------
 .../VtmnSnackbar/VtmnSnackbar.stories.js      | 32 +++----------------
 .../overlays/VtmnToast/VtmnToast.stories.js   | 32 +++----------------
 7 files changed, 29 insertions(+), 79 deletions(-)

diff --git a/packages/showcases/core/csf/components/overlays/snackbar.csf.js b/packages/showcases/core/csf/components/overlays/snackbar.csf.js
index e4f0c19fe..68a18fae6 100644
--- a/packages/showcases/core/csf/components/overlays/snackbar.csf.js
+++ b/packages/showcases/core/csf/components/overlays/snackbar.csf.js
@@ -9,12 +9,6 @@ export const parameters = {
 };
 
 export const argTypes = {
-  content: {
-    type: { name: 'string', required: true },
-    description: 'Text displayed on the snackbar',
-    defaultValue: 'This is the content of a snackbar',
-    control: { type: 'text' },
-  },
   withCloseButton: {
     type: { name: 'boolean', required: false },
     description: 'Show close button',
diff --git a/packages/showcases/core/csf/components/overlays/toast.csf.js b/packages/showcases/core/csf/components/overlays/toast.csf.js
index 4417a61ca..bbd4d3314 100644
--- a/packages/showcases/core/csf/components/overlays/toast.csf.js
+++ b/packages/showcases/core/csf/components/overlays/toast.csf.js
@@ -9,12 +9,6 @@ export const parameters = {
 };
 
 export const argTypes = {
-  content: {
-    type: { name: 'string', required: true },
-    description: 'Text displayed on the toast',
-    defaultValue: 'This is the content of a toast',
-    control: { type: 'text' },
-  },
   withCloseButton: {
     type: { name: 'boolean', required: false },
     description: 'Show close button',
diff --git a/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx b/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx
index 7e28ab769..c541c54b7 100644
--- a/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx
+++ b/packages/showcases/react/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.tsx
@@ -12,7 +12,15 @@ const CSS_ANIMATION_TIME_MS = 500;
 export default {
   title: 'Components / Overlays / VtmnSnackbar',
   component: VtmnSnackbar,
-  argTypes,
+  argTypes: {
+    ...argTypes,
+    content: {
+      type: { name: 'string', required: true },
+      description: 'Text displayed on the toast',
+      defaultValue: 'This is the content of a toast',
+      control: { type: 'text' },
+    },
+  },
   parameters,
 } as Meta;
 
diff --git a/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx b/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx
index 94e9f8f0c..deefb2f21 100644
--- a/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx
+++ b/packages/showcases/react/stories/components/overlays/VtmnToast/VtmnToast.stories.tsx
@@ -12,7 +12,15 @@ const CSS_ANIMATION_TIME_MS = 500;
 export default {
   title: 'Components / Overlays / VtmnToast',
   component: VtmnToast,
-  argTypes,
+  argTypes: {
+    ...argTypes,
+    content: {
+      type: { name: 'string', required: true },
+      description: 'Text displayed on the snackbar',
+      defaultValue: 'This is the content of a snackbar',
+      control: { type: 'text' },
+    },
+  },
   parameters,
 } as Meta;
 
diff --git a/packages/showcases/svelte/stories/components/overlays/VtmnToast/VtmnToast.stories.svelte b/packages/showcases/svelte/stories/components/overlays/VtmnToast/VtmnToast.stories.svelte
index 95556c247..ac5ef13b3 100644
--- a/packages/showcases/svelte/stories/components/overlays/VtmnToast/VtmnToast.stories.svelte
+++ b/packages/showcases/svelte/stories/components/overlays/VtmnToast/VtmnToast.stories.svelte
@@ -11,17 +11,7 @@
 <Meta
   title="Components / Overlays / VtmnToast"
   component={VtmnToast}
-  argTypes={{
-    ...argTypes,
-    timeout: {
-      type: { name: 'number', required: false },
-      description: 'Duration of the animation',
-      defaultValue: 4500,
-      control: {
-        type: 'number',
-      },
-    },
-  }}
+  {argTypes}
   parameters={{
     ...parameters,
     readme: {
diff --git a/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js b/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js
index 545d22d74..8ab7d04f8 100644
--- a/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js
+++ b/packages/showcases/vue/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.js
@@ -1,38 +1,16 @@
 import { ref } from 'vue';
 import { VtmnSnackbar, VtmnButton } from '@vtmn/vue';
-import { parameters } from '@vtmn/showcase-core/csf/components/overlays/snackbar.csf';
+import {
+  parameters,
+  argTypes,
+} from '@vtmn/showcase-core/csf/components/overlays/snackbar.csf';
 
 const CSS_ANIMATION_TIME_MS = 500;
 
 export default {
   title: 'Components / Overlays / VtmnSnackbar',
   component: VtmnSnackbar,
-  argTypes: {
-    withCloseButton: {
-      type: { name: 'boolean', required: true },
-      description: 'Show close button',
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    actionLabel: {
-      type: { name: 'string', required: false },
-      describe: 'Label of the action. If set, it displays action button',
-      defaultValue: undefined,
-      control: {
-        type: 'text',
-      },
-    },
-    timeout: {
-      type: { name: 'number', required: false },
-      description: 'Duration of the animation',
-      defaultValue: 4500,
-      control: {
-        type: 'number',
-      },
-    },
-  },
+  argTypes,
   parameters,
 };
 
diff --git a/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js b/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js
index c31696594..afb15acf7 100644
--- a/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js
+++ b/packages/showcases/vue/stories/components/overlays/VtmnToast/VtmnToast.stories.js
@@ -1,38 +1,16 @@
 import { ref } from 'vue';
 import { VtmnToast, VtmnButton } from '@vtmn/vue';
-import { parameters } from '@vtmn/showcase-core/csf/components/overlays/toast.csf';
+import {
+  parameters,
+  argTypes,
+} from '@vtmn/showcase-core/csf/components/overlays/toast.csf';
 
 const CSS_ANIMATION_TIME_MS = 500;
 
 export default {
   title: 'Components / Overlays / VtmnToast',
   component: VtmnToast,
-  argTypes: {
-    withCloseButton: {
-      type: { name: 'boolean', required: false },
-      description: 'Show close button',
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    withIcon: {
-      type: { name: 'boolean', required: false },
-      description: 'Display left icon',
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    timeout: {
-      type: { name: 'number', required: false },
-      description: 'Duration of the animation',
-      defaultValue: 4500,
-      control: {
-        type: 'number',
-      },
-    },
-  },
+  argTypes,
   parameters,
 };