| name | canopee-prospect-client |
| description | Guide d'utilisation du Design System Canopée pour les univers Prospect (Apollo, B2C) et Client (Look & Feel, B2C espace client AXA). Utilise ce skill dès qu'un développeur mentionne Apollo, Look & Feel, Prospect, Client, Canopée B2C, ou veut créer une interface pour les espaces clients ou prospects AXA. Utilise-le aussi quand le code importe depuis @axa-fr/canopee-react/prospect ou @axa-fr/canopee-react/client. |
Canopée Design System — Univers Prospect & Client
Ce skill te guide pour aider les développeurs à utiliser le Design System Canopée dans les univers Prospect (B2C acquisition) et Client (B2C espace client) dans leurs projets React.
Deux thèmes, une seule API
| Thème | Ancienne lib | Package d'import | CSS |
|---|
| Prospect (ex-Apollo) | @axa-fr/apollo-react | @axa-fr/canopee-react/prospect | @axa-fr/canopee-css/prospect/… |
| Client (ex-Look & Feel) | @axa-fr/look-and-feel-react | @axa-fr/canopee-react/client | @axa-fr/canopee-css/client/… |
Les composants ont exactement la même API. Seul l'import change. Le code partage 100 % de la logique (*Common.tsx) ; les thèmes (*Apollo.tsx / *LF.tsx) injectent uniquement les CSS et les sous-composants thématisés.
Règles toujours appliquées
CSS — BEM strict avec préfixe af-
.af-btn-client
.af-btn-client__icon
.af-btn-client--primary
Jamais de sélecteurs par tag HTML ou ID.
Props — noms HTML natifs, sans préfixe booléen
<InputText required disabled value="..." />
JSX — pas de leaked render
{
items.length > 0 ? <List items={items} /> : null;
}
{
Boolean(subtitle) && <p>{subtitle}</p>;
}
Messages de formulaire — API unifiée message + messageType
Tous les inputs utilisent message et messageType pour afficher les messages d'état :
<InputText message="Valeur invalide" messageType="error" />
<InputText message="Format correct" messageType="success" />
<InputText message="Attention" messageType="warning" />
Installation
Pour le détail complet (installation next/latest, app minimale, CSS uniquement) → lire references/16-demarrer-un-projet.md
npm install @axa-fr/canopee-react@latest @axa-fr/canopee-css@latest
npm install @material-symbols/svg-400
Import de base dans l'app — l'import depuis l'entry point charge automatiquement le reboot CSS, les tokens et la grille :
import { Button, InputText } from "@axa-fr/canopee-react/prospect";
import { Button, InputText } from "@axa-fr/canopee-react/client";
Icônes
Pour le détail complet (composant Icon, ClickIcon, accessibilité) → lire references/17-icones.md
import home from "@material-symbols/svg-400/outlined/home.svg";
import { Icon } from "@axa-fr/canopee-react/prospect";
<Icon src={home} variant="primary" size="M" hasBackground />;
Grid et layout responsive
Pour les tokens disponibles, leur surcharge, et les imports CSS par composant → lire references/18-tokens-css.md
La grille repose sur des colonnes CSS custom properties via GridContainerProps :
<InputText
label="Nom"
containerProps={{
"data-cols-mobile": "12",
"data-cols-tablet": "6",
"data-cols-desktop-medium": "4",
}}
/>
<DebugGrid />
Catalogue des composants — quand lire quelle référence
Boutons et actions
| Composant | Référence | Cas d'usage |
|---|
Button | 01-button.md | CTA, actions, 7 variantes (primary, secondary, tertiary, ghost…) |
ClickIcon | 01-button.md | Bouton icône seul |
Link | 01-button.md | Lien stylisé, ouverture nouvel onglet |
Accords et navigation
Feedback et statuts
Modale
| Composant | Référence | Cas d'usage |
|---|
Modal | 07-modal.md | Modale complète (header + body + footer) |
ModalCore | 07-modal.md | Modale low-level (<dialog>) |
ModalCoreHeader | 07-modal.md | Header de modale bas niveau |
ModalCoreBody | 07-modal.md | Corps de modale bas niveau |
ModalCoreFooter | 07-modal.md | Footer de modale bas niveau |
Formulaires — entrées
Formulaires — cases et radios
Upload de fichiers
Listes et items
Visuels et affichage de données
Tableaux
Layout
| Composant | Référence | Cas d'usage |
|---|
Footer | 12-layout.md | Pied de page avec liens, réseaux, copyright |
FormLayout | 12-layout.md | Mise en page de formulaire responsive |
ExitLayout | 12-layout.md | Page de sortie (confirmation / erreur) |
Fieldset | 12-layout.md | Groupe de form en carte |
LevelSelector | 12-layout.md | Sélecteur de niveau par incréments |
Pages complètes
| Composant | Référence | Cas d'usage |
|---|
ValidPage | 13-pages.md | Page de confirmation avec agent et lien |
ErrorPage | 13-pages.md | Page d'erreur avec lien de retour |
Utilitaires
| Composant | Cas d'usage |
|---|
BasePicture | Image simple (fallback logo AXA) |
DebugGrid | Superposition grille pour le développement |
GridContainerProps type | Props data-cols-* pour la grille responsive |
Guides transverses
Version : 2026.04.02
