Dépendances nécessaires
Pour utiliser le Design System de l'Autonomie, deux packages NPM sont nécessaires:
- @ds-autonomie/assets : Contient tous les design tokens nécessaires pour styliser une application ainsi que les icônes au format SVG.
- @ds-autonomie/web-components : Contient le code des composants du design system.
Avant cette version, ce sont les packages suivants:
1. @cnsa-fr/design-assets
2. @cnsa-fr/design-system
Ceux-ci étaient disponibles avec un accès restreint (registre de package privé).
Pour ajouter ces dépendances à votre projet, lancer la commande suivante, ou son équivalent avec un autre gestionnaire de packages:
pnpm install --save @ds-autonomie/assets @ds-autonomie/web-components
Ligne de commande à utiliser
Import des styles CSS
Les styles CSS, qui sont indispensables car utilisés par tous les composants du DSA, peuvent être importés de deux manières:
1) Depuis le code HTML
Pour rendre accessibles les styles CSS, les deux fichiers suivants sont nécessaires
|
Nom du fichier ou dossier |
Contenu |
Chemin dans le package |
Chemin depuis la racine du site (s'il est fixe) |
|---|---|---|---|
|
dsa-theme.min.css |
Styles partagés |
node_modules/@ds-autonomie/assets/css/dsa-theme.min.css |
placé à la racine |
|
dsa-wc-theme.min.css |
Styles des composants |
node_modules/@ds-autonomie/web-components/dist/themes/dsa-wc-theme.min.css |
placé à la racine |
Ils doivent ensuite être liés au pages HTML à l’aide des balises suivantes:
<head>
<link rel="stylesheet" href="dsa-theme.min.css">
<link rel="stylesheet" href="dsa-wc-theme.min.css">
</head>
Liens à ajouter pour lier les fichiers statiques
2) Depuis le code JS/TS
Il est aussi possible d’importer les styles avec javascript avec les imports suivants:
import "@ds-autonomie/assets/css/dsa-theme.min.css";
import "@ds-autonomie/web-components/dist/themes/dsa-wc-theme.min.css";
Dans ce cas, il ne sera pas nécessaire de lier les fichiers avec la page, tant que le code est exécuté pour toutes les pages web.
Import des icônes
Les composants du DSA utilisent de nombreuses icônes. Pour que ceux-ci soient bien affichés, il est nécessaire de rendre disponible le dossier suivant
|
Nom du fichier ou dossier |
Contenu |
Chemin dans le package |
Chemin depuis la racine du site (s'il est fixe) |
|---|---|---|---|
|
icons/* |
Icônes des composants |
node_modules/@ds-autonomie/assets/icons/* |
<racine du site>/assets/icons/ |
Le dossier icons doit donc être copié depuis le package assets vers la racine de la page contenant des composants du DSA, ou le dossier public, selon la structure du site.
Import des polices de caractères
Le Système de Design de l'Autonomie nécessite les polices Cabin et Montserrat. Celles-ci sont disponibles sur Google Fonts.
Vous aurez besoin des styles suivants:
|
Nom |
Style |
Graisse |
|---|---|---|
|
Cabin |
Regular, Italic |
400, 700 |
|
Montserrat |
Regular, Italic |
400, 700 |
Une manière de faire la mise en place est la suivante:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,400..700;1,400..700&display=swap"
rel="stylesheet"
/>
</head>
Exemple de mise en place des polices
Import individuel des composants
Pour que les composants soient correctement chargés, il est nécessaire de les importer individuellement. Par exemple, pour le composant dsa-avatar, on a
import "@ds-autonomie/web-components/dist/components/avatar/avatar.js";