Pied de page
تذييل الصفحةFooter
Stable
src/dsm/components/footer.tsxLe pied de page rappelle l'identité de l'entité, relie vers l'écosystème des sites officiels et regroupe les liens secondaires (mentions légales, accessibilité, contact). Il porte aussi les réseaux sociaux et la licence des contenus.
Import
import { Footer } from "@/dsm/components/footer";Exemples
Pied de page complet
Entité, description, écosystème, colonnes de liens, réseaux sociaux et licence.
LTR
Pied de page minimal
Entité, description et liens légaux, sans colonnes ni réseaux sociaux.
LTR
Usage
Quand l'utiliser
- Reprenez le bloc marque et le nom de l'entité dans le pied de page, en plus grand que dans l'en-tête (`size="lg"`).
- Listez les sites officiels associés (`ecosystem`) pour aider l'utilisateur à distinguer les domaines gouvernementaux légitimes.
- Indiquez toujours l'état de conformité accessibilité dans `bottomLinks` (ex. « Accessibilité : partiellement conforme »).
Quand ne pas l'utiliser
- N'utilisez pas le pied de page pour de la navigation primaire : ses liens sont secondaires et moins visibles que ceux de l'en-tête.
- Ne dépassez pas trois colonnes de liens : au-delà, la lecture devient difficile sur petit écran.
Accessibilité & langues
Accessibilité
- Les colonnes de liens sont regroupées dans un `<nav aria-label="Pied de page">` distinct de la navigation principale de l'en-tête.
- Chaque icône de réseau social reçoit un `aria-label` nommant le réseau ; l'icône seule ne porte jamais l'information.
- Le lien « Haut de page » cible l'ancre `#top` posée sur le `<body>`, pour un retour clavier rapide en haut de page.
RTL & multilingue
- Le motif décoratif `dsm-khatam-fade-end` est positionné avec `end-0` : il reste toujours du côté « fin » de la page, quel que soit le sens de lecture.
- Les séparateurs verticaux entre les liens du bas de page sont posés avec des marges logiques (`mx-2`) et restent corrects dans les deux sens.
Propriétés
Footer
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| entity | Partial<Record<Locale, string>> | — | Nom de l'entité affiché à côté du bloc marque. |
| description | ReactNode | — | Court texte de présentation affiché sous le bloc marque. |
| ecosystem | FooterLink[] | [] | Liens vers les sites officiels partenaires (ex. maroc.ma), affichés en ligne sous la description. |
| columns | FooterColumn[] | [] | Colonnes de liens secondaires, chacune avec un titre. |
| bottomLinks | FooterLink[] | [] | Liens légaux affichés en bas de page, séparés par un trait vertical. |
| social | { label: string; href: string; icon: ReactNode }[] | [] | Icônes de réseaux sociaux ; l'icône doit provenir de `@/dsm/icons`. |
| license | ReactNode | — | Mention de licence des contenus, affichée en dernière ligne du pied de page. |
| extra | ReactNode | — | Emplacement libre au-dessus de la barre du bas (newsletter, partenaires…). |
| homeHref | string | / | Cible du bloc marque. |
| backToTop | boolean | true | Affiche le lien de retour en haut de page. |
| className | string | — | Classes Tailwind supplémentaires. |