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 :
- Apollo pour le B2C, les applications exposées aux prospect (AXA.Fr)
- Look & Feel pour le B2C, les applications exposées aux clients (Espace client)
- Slash pour le B2B, les applications internes
Si vous utilisez @axa-fr/react-toolkit et que vous souhaitez migrer vers
@axa-fr/design-system, vous pouvez suivre notre
guide de migration.
Documentation
Installation latest
npm install @axa-fr/design-system-slash-react@latest @axa-fr/design-system-slash-css@latestInstallation next
npm install @axa-fr/design-system-slash-react@next @axa-fr/design-system-slash-css@next
Documentation
Installation latest
npm install @axa-fr/design-system-apollo-react@latest @axa-fr/design-system-apollo-css@latestInstallation next
npm install @axa-fr/design-system-apollo-react@next @axa-fr/design-system-apollo-css@next
Documentation
Installation latest
npm install @axa-fr/design-system-look-and-feel-react@latest @axa-fr/design-system-look-and-feel-css@latestInstallation next
npm install @axa-fr/design-system-look-and-feel-react@next @axa-fr/design-system-look-and-feel-css@next
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
Les composants Look & Feel et Apollo 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.
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 /slash/css et
/slash/react.
Pour démarrer toutes les parties du projet, il faudra lancer la commande npm run dev.
Pour démarrer la partie slash du projet, il faudra lancer la commande npm run dev:slash.
Pour démarrer la partie look&feel du projet, il faudra lancer la commande npm run dev:look-and-feel.
Ces commandes démarrent automatiquement les différentes étapes nécessaire aux 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:slash ou npm run build:look-and-feel).
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/design-system-slash-react';
const App = () => {
return <Svg src={home} />;
};Il suffit d'importer le fichier des tokens dans votre application.
Pour Look & Feel (Espace client) (ancienne version):
import '@axa-fr/design-system-look-and-feel-css/dist/common/tokens.scss';Pour Apollo (Axa.fr):
import '@axa-fr/design-system-apollo-css/dist/common/tokens.css';Look & Feel (Espace client) (nouvelle version):
Attention : dans cette version des tokens non cibles ont été supprimés, il est donc possible que votre application soit impactée.
import '@axa-fr/design-system-apollo-css/dist/common/tokensLF.css';