Lien
رابطLink
Stable
src/dsm/components/link.tsxDeux liens de contenu : `TextLink` pour un lien de texte courant (interne ou externe, avec repère de nouvelle fenêtre), et `DownloadLink` pour un document téléchargeable avec son format et sa taille.
Import
import { TextLink } from "@/dsm/components/link";Exemples
Interne et externe
Un lien interne (next/link) et un lien externe détecté automatiquement.
LTR
Consultez la liste des pièces à fournir avant de déposer votre dossier, ou rendez-vous directement sur idarati.ma (nouvelle fenêtre) pour suivre son avancement.
Variantes
Les styles `default`, `subtle` et `inverse` (sur fond sombre).
Téléchargement de documents
Liste de formulaires téléchargeables avec format et taille.
Usage
Quand l'utiliser
- Utilisez `TextLink` dans un paragraphe ou une liste ; le repère « nouvelle fenêtre » s'ajoute automatiquement pour toute URL commençant par http(s).
- Utilisez `DownloadLink` pour tout document (PDF, formulaire) proposé au téléchargement, avec son format et son poids.
Quand ne pas l'utiliser
- N'utilisez pas `TextLink` pour une action qui ne change pas de page (ouvrir une modale, trier une liste) : utilisez un bouton `variant="link"`.
Accessibilité & langues
Accessibilité
- Un lien externe ouvre un nouvel onglet (`target="_blank"`, `rel="noopener noreferrer"`) et porte un texte masqué annonçant « nouvelle fenêtre ».
- `DownloadLink` porte l'attribut natif `download` et un texte masqué « Télécharger », en plus du format et de la taille visibles.
RTL & multilingue
- L'icône de nouvelle fenêtre (`ExternalLink`) a un sens fixe et ne se retourne jamais.
- Le texte du lien reste aligné en début de ligne (`text-start`) dans `DownloadLink`, quel que soit le sens de lecture.
Propriétés
TextLink
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| href* | string | — | Cible du lien. |
| external | boolean | — | Force le traitement interne/externe ; auto-détecté depuis `href` (http/https) si omis. |
| variant | "default" | "subtle" | "inverse" | default | Couleur et style de soulignement du lien. |
| size | "inherit" | "sm" | inherit | Taille du texte. |
DownloadLink
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| href* | string | — | URL du fichier. |
| label* | ReactNode | — | Nom du document. |
| format* | string | — | Format affiché dans la métadonnée, p. ex. « PDF ». |
| size* | string | — | Taille affichée, p. ex. « 1,2 Mo ». |
| lang | string | — | Langue du document, si différente de la page. |