AXA France Design System

Le projet design system AXA France a pour objectif de proposer un point d'entrée unique pour utiliser le design system AXA France au sein de vos projets.

Il propose d'utiliser les deux designs systems principaux :

• Prospect (Apollo) pour le B2C, les applications exposées aux prospect (AXA.Fr)
• Client (Look & Feel) pour le B2C, les applications exposées aux clients (Espace client)
• Collab-Distrib (Slash) pour le B2B, les applications internes

Table des matières :

• AXA France Design System
  • Migration depuis @axa-fr/react-toolkit
  • Packages
    • B2B - Univers Collab-Distrib
    • B2C - Univers Prospect
    • B2C - Univers Client
  • Build status
    • Sonarcloud Quality metrics
    • Composants Collab-Distrib
    • Composants Client et Prospect
  • Structure du projet
  • Démarrer le projet
  • Utilisation des icones
  • Utilisation des CSS variables
  • Utilisation avec Copilot ou Claude
    • Comment faire ?

Migration depuis @axa-fr/react-toolkit

Si vous utilisez @axa-fr/react-toolkit et que vous souhaitez migrer vers @axa-fr/design-system, vous pouvez suivre notre guide de migration.

Packages

Pour tous les univers, les packages sont découpés en deux parties : la partie -react qui contient les composants React et la partie -css qui contient les fichiers CSS.

Installation latest

npm install @axa-fr/canopee-react@latest @axa-fr/canopee-css@latest

Installation next

npm install @axa-fr/canopee-react@next @axa-fr/canopee-css@next

B2B - Univers Collab-Distrib

Documentation

Utilisation des nouveaux packages :

import { Button } from '@axa-fr/canopee-react/distributeur';

Only CSS :

import '@axa-fr/canopee-css/distributeur/button.css';

B2C - Univers Prospect

Documentation

Utilisation des nouveaux packages :

import { Button } from '@axa-fr/canopee-react/prospect';

Only CSS :

import '@axa-fr/canopee-css/client/buttonApollo.css';

B2C - Univers Client

Documentation

Utilisation des nouveaux packages :

import { Button } from '@axa-fr/canopee-react/client';

Only CSS :

import '@axa-fr/canopee-css/client/buttonLF.css';

Build status

Sonarcloud Quality metrics

Composants Collab-Distrib

L'ensemble des composants Slash ont été migrés depuis l'ancien repository Slash, nous vous invitons à migrer vos projets vers ce nouveau package. Vous pouvez consulter notre guide de migration

Composants Client et Prospect

Les composants Client et Prospect sont également utilisables pour vos projets client mais peuvent être amenés à évoluer. Tous les composants n'ont pas encore été développés, si votre projet a besoin d'un composant non développé, nous vous invitons à créer un issue et à contribuer au Design System.

Vous pouvez suivre son avancement à travers les issues.

Si vous souhaitez contribuer, le fichier CONTRIBUTING.md est là pour vous aiguiller. Vous pouvez également consulter notre Code de conduite.

Structure du projet

Le projet proposera d'utiliser des composants React ou juste la partie CSS avec l'implémentation HTML (ou autres frameworks que vous souhaitez). Vous pouvez retrouver ces deux implémentations dans les dossiers :

• packages/canopee-css/src/distributeur
• packages/canopee-css/src/prospect-client
• packages/canopee-react/src/distributeur
• packages/canopee-react/src/prospect-client

Démarrer le projet

Pour démarrer toutes les parties du projet, il faudra lancer la commande npm run dev.

Pour démarrer la partie Collab-Distrib du projet, il faudra lancer la commande npm run dev:distributeur.

Pour démarrer la partie Client du projet, il faudra lancer la commande npm run dev:client.

Pour démarrer la partie Prospect du projet, il faudra lancer la commande npm run dev:prospect.

Ces commandes démarrent automatiquement les différentes étapes nécessaires au développement du projet, notamment le build CSS et le storybook react.

La commande npm run build permet de générer un build qui vous permettra de tester votre nouveau composant.

Et pour build une partie spécifique du projet, vous pouvez lancer npm run build:(partie) (npm run build:distributeur, npm run build:client ou npm run build:prospect).

Utilisation des icones

Nous vous recommandons d’utiliser la librairie @material-symbols/svg-400, mais n’importe quelle librairie qui exporte les svg de Google Material Symbols, ou vos propres svg fonctionnera.

Exemple :

import home from '@material-symbols/svg-400/outlined/home.svg';
import { Svg } from '@axa-fr/canopee-react/distributeur';

const App = () => {
  return <Svg src={home} />;
};

Utilisation des CSS variables

Il suffit d'importer le fichier des tokens dans votre application.

Pour Univers Client :

import '@axa-fr/canopee-css/client/common/tokens.css';

Pour Univers Prospect :

import '@axa-fr/canopee-css/prospect/common/tokens.css';

Pour Univers Collab-Distrib :

import '@axa-fr/canopee-css/distributeur/common/tokens.css';

Utilisation avec Copilot ou Claude

Vous pouvez désormais ajouter le design system comme un plugin de Github Copilot Primitives et aider votre chat à parfaitement utiliser le design system Canopéee, aussi bien Distributeur que Prospect Client. Grâce à ça, vous pourrait consulter la doc mais aussi rendre naturel l’utilisation des composants du design system par vos agents. La différence est flagrante, en plus d’être plus rapides, vos agents utiliseront bien mieux et bien plus souvent les composants AXA.

Comment faire ?

Vous pouvez utiliser la fonctionnalité marketplace de votre chat pour ajouter le plugin du design system, ou alors vous pouvez aussi le faire manuellement en ajoutant le plugin présent dans plugins/canopee-distributeur et plugins/canopee-prospect-client à votre chat.