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

<Meta of={StatusPageStories} />

<div className="header">
  <h1>StatusPage</h1>
  <p>Le composant `StatusPage` sert à afficher une page de statut.</p>
</div>

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


<Canvas of={StatusPageStories.Default} />

# API

<Controls of={StatusPageStories.Default} />

## Rôle et identifiant ARIA

Les props `role` et `unique-id` permettent de préciser le rôle sémantique du composant et de lier le titre au conteneur via `aria-labelledby`.

Lorsque `role` est défini, l'attribut `aria-labelledby` est automatiquement appliqué sur le `PageContainer` en pointant vers le `h1`.

<Canvas of={StatusPageStories.WithRole} />

## Lien de retour

Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.<br/>
L'événement `btn-click` est émis lorsque l'utilisateur clique sur le bouton.

<Canvas of={StatusPageStories.WithLink} />