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 (
+
+
+
+ );
+};
+
+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 97d54b9a1..9c3aa7228 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 @@
+
+
+ Slot title
+ Slot description
+
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..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
@@ -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,
+ ariaLabelCloseButton: '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,
+ ariaLabelCloseButton: '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..88aff878d 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,
+ ariaLabelCloseButton,
+ ...attributes
+ }) {
this._alerts.update((state) => [
...state,
{
@@ -15,6 +22,7 @@ class VtmnAlertStore {
title,
description,
withCloseButton,
+ 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 bf9395ed3..03a04c47e 100644
--- a/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
+++ b/packages/sources/vue/src/components/overlays/VtmnAlert/VtmnAlert.vue
@@ -26,6 +26,10 @@ export default /*#__PURE__*/ defineComponent({
type: Boolean as PropType,
default: false,
},
+ ariaLabelCloseButton: {
+ type: String as PropType,
+ default: 'Close alert'
+ },
timeout: {
type: Number as PropType,
default: 8000,
@@ -45,7 +49,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,
@@ -57,18 +61,18 @@ export default /*#__PURE__*/ defineComponent({
-
+
{{ title }}
-
+
{{ message }}