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({