Contenu

Chronologie

الخط الزمنيTimeline

Stablesrc/dsm/components/timeline.tsx
La chronologie affiche une suite d'étapes datées — historique d'une démarche, jalons d'un projet — le long d'un fil vertical, avec un marqueur distinct pour les étapes terminées, en cours et à venir.

Import

import { Timeline } from "@/dsm/components/timeline";

Exemples

Par défaut

Trois étapes, dont une en cours.

LTR
  1. Terminée

    12 mars 2026

    Dossier déposé

    Dépôt en ligne sur watiqa.ma.

  2. En cours

    15 mars 2026

    Dossier en instruction

    Vérification des pièces justificatives.

  3. À venir

    Estimation : 19 mars 2026

    Carte prête au retrait

Statuts

Les trois marqueurs : terminée, en cours et à venir, isolés.

LTR
  1. Terminée

    Étape 1

    Terminée

    Marqueur plein avec coche.

  2. En cours

    Étape 2

    En cours

    Marqueur plein entouré d'un halo.

  3. À venir

    Étape 3

    À venir

    Marqueur creux.

Suivi d'un dossier de passeport

Cas réel avec dates précises.

LTR

Suivi de la demande de passeport n° PB-2026-0341179

  1. Terminée

    2 septembre 2026

    Demande déposée

    Dépôt au centre CNIE de Meknès.

  2. Terminée

    4 septembre 2026

    Paiement confirmé

    Frais de 300 MAD réglés par carte bancaire.

  3. En cours

    9 septembre 2026

    Fabrication en cours

    Le passeport est en cours de personnalisation.

  4. À venir

    Estimation : 15 septembre 2026

    Disponible au retrait

Usage

Quand l'utiliser

  • Utilisez la chronologie pour retracer l'avancement d'un dossier ou l'historique d'une démarche.
  • Marquez au plus une étape `current` à la fois : c'est celle sur laquelle l'attention doit se porter.

Quand ne pas l'utiliser

  • N'utilisez pas la chronologie pour une simple liste non ordonnée dans le temps : une liste HTML classique suffit.
  • Évitez plus d'une dizaine d'étapes : résumez ou proposez un lien « voir l'historique complet ».

Accessibilité & langues

Accessibilité

  • Chaque statut (terminée, en cours, à venir) porte un texte caché (`dsm-sr-only`) : le sens n'est jamais porté par la seule forme du marqueur.
  • Le fil vertical est purement décoratif (`aria-hidden`) : la structure logique repose sur la liste ordonnée `<ol>`.

RTL & multilingue

  • Le fil et les marqueurs utilisent `start`, donc toujours du côté du début de lecture, sans classe additionnelle.

Propriétés

Timeline
PropriétéTypeDéfautDescription
items*{ date: ReactNode; title: ReactNode; description?: ReactNode; status?: "completed" | "current" | "upcoming" }[]—Liste ordonnée des étapes, dans l'ordre d'affichage.

Composants liés