From 268a71acb01a2e5ecdbe8ff4422e6e2d5e30b80d Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Thu, 28 Sep 2023 09:49:04 +0200
Subject: [PATCH 1/5] feat(@vtmn/svelte): export vtmnalertitem

---
 .../VtmnAlert/VtmnAlert.stories.svelte        | 33 +++++++++++++++++--
 .../overlays/VtmnAlert/VtmnAlert.tsx          |  8 ++++-
 .../sources/svelte/src/components/index.js    |  1 +
 .../overlays/VtmnAlert/VtmnAlertItem.svelte   | 32 +++++++++++++-----
 .../test/VtmnAlertItemWithSlots.test.svelte   |  8 +++++
 .../VtmnAlert/test/vtmnAlertItem.spec.js      |  9 +++++
 .../overlays/VtmnAlert/vtmnAlertStore.js      | 10 +++++-
 .../overlays/VtmnAlert/VtmnAlert.vue          |  5 ++-
 8 files changed, 93 insertions(+), 13 deletions(-)
 create mode 100644 packages/sources/svelte/src/components/overlays/VtmnAlert/test/VtmnAlertItemWithSlots.test.svelte

diff --git a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
index 97d54b9a1..2ed1ee2dd 100644
--- a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
+++ b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
@@ -1,12 +1,17 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  import { vtmnAlertStore, VtmnAlert, VtmnButton } from '@vtmn/svelte';
+  import {
+    vtmnAlertStore,
+    VtmnAlert,
+    VtmnButton,
+    VtmnAlertItem,
+  } from '@vtmn/svelte';
   import { parameters } from '@vtmn/showcase-core/csf/components/overlays/alert.csf';
   import README from '@vtmn/svelte/src/components/overlays/VtmnAlert/README.md';
 
   const argTypes = {
     title: {
-      type: { name: 'string', required: true },
+      type: { name: 'string' },
       description: 'Title of the modal',
       defaultValue: 'This is the title of the alert',
       control: { type: 'text' },
@@ -26,6 +31,13 @@
         type: 'boolean',
       },
     },
+    ariaLabelButton: {
+      type: { name: 'string', required: false },
+      description: 'Aria label displayed for the close button',
+      control: {
+        type: 'text',
+      },
+    },
     variant: {
       type: { name: 'boolean', required: false },
       description: 'Variant of the alert',
@@ -56,6 +68,7 @@
     on:click={() => {
       vtmnAlertStore.send({
         ...args,
+        ariaLabelButton: 'Close alert',
         'aria-labelledby': 'Storybook',
         'aria-describedby': args.variant,
       });
@@ -65,3 +78,19 @@
 </Template>
 
 <Story name="Overview" />
+
+<Story
+  name="Alert item"
+  args={{
+    timeout: undefined,
+    title: undefined,
+    description: undefined,
+    ariaLabelButton: 'Close alert',
+  }}
+  let:args
+>
+  <VtmnAlertItem {...args}>
+    <svelte:fragment slot="title">Slot title</svelte:fragment>
+    <svelte:fragment slot="description">Slot description</svelte:fragment>
+  </VtmnAlertItem>
+</Story>
diff --git a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
index 9840598a9..878866729 100644
--- a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
+++ b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
@@ -21,6 +21,11 @@ export interface VtmnAlertProps
    */
   variant: VtmnAlertVariant;
 
+  /**
+   * Aria label applied on the close button
+   */
+  ariaLabelButton: string;
+
   /**
    * The alert callback close function
    * @type {function}
@@ -33,6 +38,7 @@ export const VtmnAlert = ({
   title,
   message,
   onClose,
+  ariaLabelButton,
   className,
 }: VtmnAlertProps) => {
   return (
@@ -54,7 +60,7 @@ export const VtmnAlert = ({
               size="small"
               variant="ghost-reversed"
               iconAlone="close-line"
-              aria-label="Close toast"
+              aria-label={ariaLabelButton}
               onClick={onClose}
             ></VtmnButton>
           )}
diff --git a/packages/sources/svelte/src/components/index.js b/packages/sources/svelte/src/components/index.js
index f429d1d29..8c139930a 100644
--- a/packages/sources/svelte/src/components/index.js
+++ b/packages/sources/svelte/src/components/index.js
@@ -27,6 +27,7 @@ export { default as VtmnTabsItem } from './navigation/VtmnTabsItem/VtmnTabsItem.
 
 // Overlays
 export { default as VtmnAlert } from './overlays/VtmnAlert/VtmnAlert.svelte';
+export { default as VtmnAlertItem } from './overlays/VtmnAlert/VtmnAlertItem.svelte';
 export { vtmnAlertStore } from './overlays/VtmnAlert/vtmnAlertStore';
 export { default as VtmnModal } from './overlays/VtmnModal/VtmnModal.svelte';
 export { default as VtmnPopover } from './overlays/VtmnPopover/VtmnPopover.svelte';
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
index b2576de53..681e89f05 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
@@ -12,11 +12,13 @@
 
   /**
    * @type {string} title of the alert
+   * Can also be set with a slot="title"
    */
-  export let title;
+  export let title = undefined;
 
   /**
    * @type {string} description of the alert
+   * Can also be set with a slot="description"
    */
   export let description = undefined;
 
@@ -28,7 +30,12 @@
   /**
    * @type {number} time (ms) before the alert disappears
    */
-  export let timeout;
+  export let timeout = undefined;
+
+  /**
+   * @type {string} aria label on the button
+   */
+  export let ariaLabelButton;
 
   let className = undefined;
   /**
@@ -39,12 +46,13 @@
   const dispatch = createEventDispatcher();
   const closeHandler = () => dispatch('close');
   const _clearTimeout = () => timeoutId && clearTimeout(timeoutId);
-  const _setTimeout = () => (timeoutId = setTimeout(closeHandler, timeout));
+  const _setTimeout = () =>
+    (timeoutId = timeout && setTimeout(closeHandler, timeout));
   onDestroy(_clearTimeout);
   onMount(_setTimeout);
   $: componentClass = cn(
     'vtmn-alert',
-    'show',
+    timeout && 'show',
     variant && `vtmn-alert_variant--${variant}`,
     className,
   );
@@ -53,10 +61,14 @@
 <div class={componentClass} role="alert" tabindex="-1" {...$$restProps}>
   <div class="vtmn-alert_content" role="document">
     <div id="alert-title" class="vtmn-alert_content-title">
-      {title}
+      {#if $$slots.title}
+        <slot name="title" />
+      {:else}
+        {title}
+      {/if}
       {#if withCloseButton}
         <VtmnButton
-          aria-label="Close alert"
+          aria-label={ariaLabelButton}
           variant="ghost-reversed"
           size="small"
           iconAlone="close-line"
@@ -64,9 +76,13 @@
         />
       {/if}
     </div>
-    {#if description}
+    {#if description || $$slots.description}
       <p id="alert-text" class="vtmn-alert_content-description">
-        {description}
+        {#if $$slots.description}
+          <slot name="description" />
+        {:else}
+          {description}
+        {/if}
       </p>
     {/if}
   </div>
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/test/VtmnAlertItemWithSlots.test.svelte b/packages/sources/svelte/src/components/overlays/VtmnAlert/test/VtmnAlertItemWithSlots.test.svelte
new file mode 100644
index 000000000..104032651
--- /dev/null
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/test/VtmnAlertItemWithSlots.test.svelte
@@ -0,0 +1,8 @@
+<script>
+  import VtmnAlertItem from '../VtmnAlertItem.svelte';
+</script>
+
+<VtmnAlertItem {...$$restProps} on:close>
+  <svelte:fragment slot="title">Slot title</svelte:fragment>
+  <svelte:fragment slot="description">Slot description</svelte:fragment>
+</VtmnAlertItem>
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js b/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js
index baced4cf8..031fd9f6d 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js
@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
 import { fireEvent, render, waitFor } from '@testing-library/svelte';
 import VtmnAlertItem from '../VtmnAlertItem.svelte';
+import VtmnAlertItemWithSlot from './VtmnAlertItemWithSlots.test.svelte';
 
 const timeout = 5000;
 
@@ -138,6 +139,7 @@ describe('VtmnAlertItem', () => {
     const { getByLabelText } = render(VtmnAlertItem, {
       title: 'Alert unit-test',
       timeout,
+      ariaLabelButton: 'Close alert',
       withCloseButton: true,
     });
     expect(getByLabelText('Close alert')).toBeVisible();
@@ -147,6 +149,7 @@ describe('VtmnAlertItem', () => {
     const { getByLabelText, component } = render(VtmnAlertItem, {
       title: 'Alert unit-test',
       timeout,
+      ariaLabelButton: 'Close alert',
       withCloseButton: true,
     });
     await expectedCloseOnElement(getByLabelText('Close alert'), component, 1);
@@ -165,4 +168,10 @@ describe('VtmnAlertItem', () => {
       timeout: 100,
     });
   });
+
+  test('Should display the component with the slots', async () => {
+    const { getByText } = render(VtmnAlertItemWithSlot, {});
+    expect(getByText('Slot title')).toBeVisible();
+    expect(getByText('Slot description')).toBeVisible();
+  });
 });
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/vtmnAlertStore.js b/packages/sources/svelte/src/components/overlays/VtmnAlert/vtmnAlertStore.js
index 111c1c141..ea48eeb9e 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/vtmnAlertStore.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/vtmnAlertStore.js
@@ -6,7 +6,14 @@ class VtmnAlertStore {
     this._alerts = writable([]);
   }
 
-  send({ variant, title, description, withCloseButton, ...attributes }) {
+  send({
+    variant,
+    title,
+    description,
+    withCloseButton,
+    ariaLabelButton,
+    ...attributes
+  }) {
     this._alerts.update((state) => [
       ...state,
       {
@@ -15,6 +22,7 @@ class VtmnAlertStore {
         title,
         description,
         withCloseButton,
+        ariaLabelButton,
         id: `vtmn-alert-${uuid()}`,
       },
     ]);
diff --git a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
index bf9395ed3..aa9b0aada 100644
--- a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
+++ b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
@@ -26,6 +26,9 @@ export default /*#__PURE__*/ defineComponent({
       type: Boolean as PropType<boolean>,
       default: false,
     },
+    ariaLabelButton: {
+      type: String as PropType<string>,
+    },
     timeout: {
       type: Number as PropType<number>,
       default: 8000,
@@ -64,7 +67,7 @@ export default /*#__PURE__*/ defineComponent({
           iconAlone="close-line"
           variant="ghost-reversed"
           size="small"
-          aria-label="close"
+          :aria-label="ariaLabelButton"
           @click.prevent="handleClose"
         />
       </div>

From e32f25b392287bed1f04e2e60c37f141af1a409f Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Thu, 28 Sep 2023 09:56:03 +0200
Subject: [PATCH 2/5] feat(vtmnalert): rename aria-label

---
 .../components/overlays/VtmnAlert/VtmnAlert.stories.svelte  | 6 +++---
 .../react/src/components/overlays/VtmnAlert/VtmnAlert.tsx   | 6 +++---
 .../src/components/overlays/VtmnAlert/VtmnAlertItem.svelte  | 4 ++--
 .../overlays/VtmnAlert/test/vtmnAlertItem.spec.js           | 4 ++--
 .../src/components/overlays/VtmnAlert/vtmnAlertStore.js     | 4 ++--
 .../vue/src/components/overlays/VtmnAlert/VtmnAlert.vue     | 4 ++--
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
index 2ed1ee2dd..fc4c303eb 100644
--- a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
+++ b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
@@ -31,7 +31,7 @@
         type: 'boolean',
       },
     },
-    ariaLabelButton: {
+    ariaLabelCloseButton: {
       type: { name: 'string', required: false },
       description: 'Aria label displayed for the close button',
       control: {
@@ -68,7 +68,7 @@
     on:click={() => {
       vtmnAlertStore.send({
         ...args,
-        ariaLabelButton: 'Close alert',
+        ariaLabelCloseButton: 'Close alert',
         'aria-labelledby': 'Storybook',
         'aria-describedby': args.variant,
       });
@@ -85,7 +85,7 @@
     timeout: undefined,
     title: undefined,
     description: undefined,
-    ariaLabelButton: 'Close alert',
+    ariaLabelCloseButton: 'Close alert',
   }}
   let:args
 >
diff --git a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
index 878866729..f8790af9e 100644
--- a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
+++ b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
@@ -24,7 +24,7 @@ export interface VtmnAlertProps
   /**
    * Aria label applied on the close button
    */
-  ariaLabelButton: string;
+  ariaLabelCloseButton: string;
 
   /**
    * The alert callback close function
@@ -38,7 +38,7 @@ export const VtmnAlert = ({
   title,
   message,
   onClose,
-  ariaLabelButton,
+  ariaLabelCloseButton,
   className,
 }: VtmnAlertProps) => {
   return (
@@ -60,7 +60,7 @@ export const VtmnAlert = ({
               size="small"
               variant="ghost-reversed"
               iconAlone="close-line"
-              aria-label={ariaLabelButton}
+              aria-label={ariaLabelCloseButton}
               onClick={onClose}
             ></VtmnButton>
           )}
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
index 681e89f05..00a08dbb5 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
@@ -35,7 +35,7 @@
   /**
    * @type {string} aria label on the button
    */
-  export let ariaLabelButton;
+  export let ariaLabelCloseButton;
 
   let className = undefined;
   /**
@@ -68,7 +68,7 @@
       {/if}
       {#if withCloseButton}
         <VtmnButton
-          aria-label={ariaLabelButton}
+          aria-label={ariaLabelCloseButton}
           variant="ghost-reversed"
           size="small"
           iconAlone="close-line"
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js b/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js
index 031fd9f6d..8f88f53c6 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js
@@ -139,7 +139,7 @@ describe('VtmnAlertItem', () => {
     const { getByLabelText } = render(VtmnAlertItem, {
       title: 'Alert unit-test',
       timeout,
-      ariaLabelButton: 'Close alert',
+      ariaLabelCloseButton: 'Close alert',
       withCloseButton: true,
     });
     expect(getByLabelText('Close alert')).toBeVisible();
@@ -149,7 +149,7 @@ describe('VtmnAlertItem', () => {
     const { getByLabelText, component } = render(VtmnAlertItem, {
       title: 'Alert unit-test',
       timeout,
-      ariaLabelButton: 'Close alert',
+      ariaLabelCloseButton: 'Close alert',
       withCloseButton: true,
     });
     await expectedCloseOnElement(getByLabelText('Close alert'), component, 1);
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/vtmnAlertStore.js b/packages/sources/svelte/src/components/overlays/VtmnAlert/vtmnAlertStore.js
index ea48eeb9e..88aff878d 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/vtmnAlertStore.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/vtmnAlertStore.js
@@ -11,7 +11,7 @@ class VtmnAlertStore {
     title,
     description,
     withCloseButton,
-    ariaLabelButton,
+    ariaLabelCloseButton,
     ...attributes
   }) {
     this._alerts.update((state) => [
@@ -22,7 +22,7 @@ class VtmnAlertStore {
         title,
         description,
         withCloseButton,
-        ariaLabelButton,
+        ariaLabelCloseButton,
         id: `vtmn-alert-${uuid()}`,
       },
     ]);
diff --git a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
index aa9b0aada..683ffb2f8 100644
--- a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
+++ b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
@@ -26,7 +26,7 @@ export default /*#__PURE__*/ defineComponent({
       type: Boolean as PropType<boolean>,
       default: false,
     },
-    ariaLabelButton: {
+    ariaLabelCloseButton: {
       type: String as PropType<string>,
     },
     timeout: {
@@ -67,7 +67,7 @@ export default /*#__PURE__*/ defineComponent({
           iconAlone="close-line"
           variant="ghost-reversed"
           size="small"
-          :aria-label="ariaLabelButton"
+          :aria-label="ariaLabelCloseButton"
           @click.prevent="handleClose"
         />
       </div>

From 0b20119545dc0327b317c62628c9263f792b7317 Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Thu, 28 Sep 2023 10:38:41 +0200
Subject: [PATCH 3/5] feat(vtmnalert): some clean

---
 .../overlays/VtmnAlert/VtmnAlert.stories.tsx   | 11 +++++++++++
 .../VtmnAlert/VtmnAlert.stories.svelte         |  2 +-
 .../overlays/VtmnAlert/VtmnAlert.stories.js    | 15 +++++++++++++++
 .../overlays/VtmnAlert/VtmnAlert.tsx           |  9 ++++++++-
 .../overlays/VtmnAlert/VtmnAlertItem.svelte    | 18 +++++++++++++-----
 .../overlays/VtmnAlert/VtmnAlert.vue           |  6 +++---
 6 files changed, 51 insertions(+), 10 deletions(-)

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 5e08d0b5b..a4374154b 100644
--- a/packages/showcases/react/stories/components/overlays/VtmnAlert/VtmnAlert.stories.tsx
+++ b/packages/showcases/react/stories/components/overlays/VtmnAlert/VtmnAlert.stories.tsx
@@ -36,3 +36,14 @@ const OverviewTemplate: Story = (args) => {
 
 export const Overview = OverviewTemplate.bind({});
 Overview.args = {};
+
+const AlertItemTemplate: Story = (args) => {
+  return (
+    <div>
+      <VtmnAlert {...args} timeout={0} />
+    </div>
+  );
+};
+
+export const AlertItem = AlertItemTemplate.bind({});
+AlertItem.args = {};
diff --git a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
index fc4c303eb..f6c14bbdf 100644
--- a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
+++ b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
@@ -82,9 +82,9 @@
 <Story
   name="Alert item"
   args={{
-    timeout: undefined,
     title: undefined,
     description: undefined,
+    timeout: 0,
     ariaLabelCloseButton: 'Close alert',
   }}
   let:args
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 7f5b4ff11..e86e23ce0 100644
--- a/packages/showcases/vue/stories/components/overlays/VtmnAlert/VtmnAlert.stories.js
+++ b/packages/showcases/vue/stories/components/overlays/VtmnAlert/VtmnAlert.stories.js
@@ -33,3 +33,18 @@ const Template = (args) => ({
 
 export const Overview = Template.bind({});
 Overview.args = {};
+
+const AlertItemTemplate = (args) => ({
+  components: { VtmnAlert },
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<VtmnAlert v-bind="args" />`,
+});
+
+export const AlertItem = AlertItemTemplate.bind({});
+AlertItem.args = {
+  timeout: 0,
+};
diff --git a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
index f8790af9e..0cfba6023 100644
--- a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
+++ b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
@@ -26,6 +26,12 @@ export interface VtmnAlertProps
    */
   ariaLabelCloseButton: string;
 
+  /**
+   * time (ms) before the alert disappears
+   * Set to 0 to keep the alert visible
+   */
+  timeout: number;
+
   /**
    * The alert callback close function
    * @type {function}
@@ -39,6 +45,7 @@ export const VtmnAlert = ({
   message,
   onClose,
   ariaLabelCloseButton,
+  timeout = 8000,
   className,
 }: VtmnAlertProps) => {
   return (
@@ -48,7 +55,7 @@ export const VtmnAlert = ({
       className={clsx(
         'vtmn-alert',
         `vtmn-alert_variant--${variant}`,
-        'show',
+        timeout > 0 && 'show',
         className,
       )}
     >
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
index 00a08dbb5..5d1c79862 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
@@ -3,6 +3,12 @@
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { cn } from '../../../utils/classnames';
   import { VTMN_ALERT_VARIANT } from './enums';
+  import { uuid } from '../../../utils/math';
+
+  /**
+   * @type {string} unique id suffix for the component
+   */
+  export let id = uuid();
 
   /**
    * @type {'info'|'success'|'danger'|'warning'} variant of the alert
@@ -29,8 +35,10 @@
 
   /**
    * @type {number} time (ms) before the alert disappears
+   * Can't be above 8000ms.
+   * Set to 0 to keep the alert visible
    */
-  export let timeout = undefined;
+  export let timeout = 8000;
 
   /**
    * @type {string} aria label on the button
@@ -52,7 +60,7 @@
   onMount(_setTimeout);
   $: componentClass = cn(
     'vtmn-alert',
-    timeout && 'show',
+    timeout > 0 && 'show',
     variant && `vtmn-alert_variant--${variant}`,
     className,
   );
@@ -60,7 +68,7 @@
 
 <div class={componentClass} role="alert" tabindex="-1" {...$$restProps}>
   <div class="vtmn-alert_content" role="document">
-    <div id="alert-title" class="vtmn-alert_content-title">
+    <div id="alert-title-{id}" class="vtmn-alert_content-title">
       {#if $$slots.title}
         <slot name="title" />
       {:else}
@@ -77,13 +85,13 @@
       {/if}
     </div>
     {#if description || $$slots.description}
-      <p id="alert-text" class="vtmn-alert_content-description">
+      <span id="alert-text-{id}" class="vtmn-alert_content-description">
         {#if $$slots.description}
           <slot name="description" />
         {:else}
           {description}
         {/if}
-      </p>
+      </span>
     {/if}
   </div>
 </div>
diff --git a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
index 683ffb2f8..4b2f414db 100644
--- a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
+++ b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
@@ -48,7 +48,7 @@ export default /*#__PURE__*/ defineComponent({
     return {
       classes: computed(() => ({
         'vtmn-alert': true,
-        show: true,
+        show: props.timeout > 0,
         [`vtmn-alert_variant--${props.variant}`]: props.variant,
       })),
       handleClose,
@@ -60,7 +60,7 @@ export default /*#__PURE__*/ defineComponent({
 <template>
   <div :class="classes" role="alert" tabindex="-1" v-bind="$attrs">
     <div class="vtmn-alert_content" role="document">
-      <div id="alert-title" class="vtmn-alert_content-title">
+      <div class="vtmn-alert_content-title">
         {{ title }}
         <VtmnButton
           v-if="withCloseButton"
@@ -71,7 +71,7 @@ export default /*#__PURE__*/ defineComponent({
           @click.prevent="handleClose"
         />
       </div>
-      <p v-if="message" id="alert-text" class="vtmn-alert_content-description">
+      <p v-if="message" class="vtmn-alert_content-description">
         {{ message }}
       </p>
     </div>

From c0ab2d344f347b283973821aa833134815e49b78 Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Thu, 28 Sep 2023 10:39:47 +0200
Subject: [PATCH 4/5] feat(vtmnalert): some clean

---
 .../components/overlays/VtmnAlert/VtmnAlertItem.svelte | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
index 5d1c79862..f39f42d71 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
@@ -3,12 +3,6 @@
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { cn } from '../../../utils/classnames';
   import { VTMN_ALERT_VARIANT } from './enums';
-  import { uuid } from '../../../utils/math';
-
-  /**
-   * @type {string} unique id suffix for the component
-   */
-  export let id = uuid();
 
   /**
    * @type {'info'|'success'|'danger'|'warning'} variant of the alert
@@ -68,7 +62,7 @@
 
 <div class={componentClass} role="alert" tabindex="-1" {...$$restProps}>
   <div class="vtmn-alert_content" role="document">
-    <div id="alert-title-{id}" class="vtmn-alert_content-title">
+    <div class="vtmn-alert_content-title">
       {#if $$slots.title}
         <slot name="title" />
       {:else}
@@ -85,7 +79,7 @@
       {/if}
     </div>
     {#if description || $$slots.description}
-      <span id="alert-text-{id}" class="vtmn-alert_content-description">
+      <span class="vtmn-alert_content-description">
         {#if $$slots.description}
           <slot name="description" />
         {:else}

From 9b42d60726ef0b4e3ae4c36665b0584b4d98d903 Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Fri, 29 Sep 2023 11:12:30 +0200
Subject: [PATCH 5/5] feat(vtmnalert): CR

---
 .../components/overlays/VtmnAlert/VtmnAlert.stories.svelte      | 1 +
 .../react/src/components/overlays/VtmnAlert/VtmnAlert.tsx       | 2 +-
 .../src/components/overlays/VtmnAlert/VtmnAlertItem.svelte      | 2 +-
 .../sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue | 1 +
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
index f6c14bbdf..9c3aa7228 100644
--- a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
+++ b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
@@ -34,6 +34,7 @@
     ariaLabelCloseButton: {
       type: { name: 'string', required: false },
       description: 'Aria label displayed for the close button',
+      defaultValue: 'Close alert',
       control: {
         type: 'text',
       },
diff --git a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
index 0cfba6023..2080fb721 100644
--- a/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
+++ b/packages/sources/react/src/components/overlays/VtmnAlert/VtmnAlert.tsx
@@ -44,7 +44,7 @@ export const VtmnAlert = ({
   title,
   message,
   onClose,
-  ariaLabelCloseButton,
+  ariaLabelCloseButton = 'Close alert',
   timeout = 8000,
   className,
 }: VtmnAlertProps) => {
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
index f39f42d71..8a6765a33 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
@@ -37,7 +37,7 @@
   /**
    * @type {string} aria label on the button
    */
-  export let ariaLabelCloseButton;
+  export let ariaLabelCloseButton = 'Close alert';
 
   let className = undefined;
   /**
diff --git a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
index 4b2f414db..03a04c47e 100644
--- a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
+++ b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
@@ -28,6 +28,7 @@ export default /*#__PURE__*/ defineComponent({
     },
     ariaLabelCloseButton: {
       type: String as PropType<string>,
+      default: 'Close alert'
     },
     timeout: {
       type: Number as PropType<number>,