import {Controls, Canvas, Meta, Source} from '@storybook/addon-docs/blocks';
import '../../stories/styles/shared.css';

import * as SyAlertStories from './SyAlert.stories';

<Meta of={SyAlertStories} />

<div className="header">
  <h1>SyAlert</h1>
  <p>Le composant `SyAlert` est utilisé pour afficher une alerte à l’utilisateur.</p>
</div>

{/* func-version-start */}
<p className="func-version-badge">Dernière mise à jour fonctionnelle : V1.1.4 - 07/08/2026</p>
{/* func-version-end */}
{/* a11y-version-start */}
<p className="a11y-version-badge">Dernière mise à jour accessibilité : V1.1.3 - 10/08/2026</p>
{/* a11y-version-end */}


<Canvas of={SyAlertStories.Default}  />

## Densité

Utilisez la prop <code>density="compact"</code> pour les messages courts affichés dans un espace contraint. Elle réduit les espacements et la taille de l’icône, sans modifier le contenu ni le comportement d’annonce.

<Canvas of={SyAlertStories.Density} />

## Annonce aux technologies d’assistance

`SyAlert` utilise <code>role="alert"</code> par défaut. Pour un message de confirmation ou d’information non urgent, vous pouvez personnaliser les props <code>role</code> et <code>ariaLive</code> avec <code>role="status"</code> et <code>aria-live="polite"</code> dans le template.

<Canvas of={SyAlertStories.StatusMessage} />

# API

<Controls of={SyAlertStories.Default} />

# Exemple d'utilisation

<Source dark code={`
<script setup lang="ts">
import { SyAlert } from '@cnamts/synapse'
import { ref } from 'vue'

const showAlert = ref(true)
;
</script>

<template>
  <SyAlert v-model="showAlert" type="warning" variant="tonal" :closable="true">
    Ceci est une alerte de type "warning".
  </SyAlert>

  <SyAlert role="status" aria-live="polite" type="success" variant="outlined">
    Votre action a bien été prise en compte.
  </SyAlert>
</template>
`} />