Installation

Le DSA est désormais disponible à l’utilisation via le CDN jsDlvr. L’utilisation d’un CDN permet de réduire la latence et d'améliorer l'expérience utilisateur en rapprochant le contenu des utilisateurs finaux grâce à l’existence d’un réseau de serveurs répartis sur la planète.
L’implémentation du DSA via le CDN se fait de façon relativement simple, au travers de balises HTML à adapter selon les besoins.
Un attribut doit en outre être placé sur l’une des balises de script de la page pour permettre le chargement des assets qui sont utilisés par les composants (feuilles de style CSS, icônes).

Pour chacune des balises d’import mentionnées sur cette page (link ou script), le numéro de version des packages (assets@1.4.4 / web-components@2.4.1 ) est à ajuster en fonction des besoins

Import des styles CSS

Feuille de style CSS commune


                                                        
                                                        
                                                            <link href="<https://cdn.jsdelivr.net/npm/@ds-autonomie/assets@1.4.4/css/dsa-theme.min.css>" rel="stylesheet" />

Feuille de style CSS des composants:


                                                        
                                                        
                                                            <link href="<https://cdn.jsdelivr.net/npm/@ds-autonomie/web-components@2.4.1/cdn/themes/dsa-wc-theme.min.css>" rel="stylesheet" />

Import des icônes

Emplacement par défaut

Par défaut, les composants qui utilisent des icônes utilisent la librairie default et vont rechercher les icônes dans un dossier assets à la racine du projet. Il est donc nécessaire soit de copier les icônes utilisées dans ce dossier, en respectant la structure initiale:

Exemple: assets/icons/web/[filled ou outlined/icone.svg.

Emplacement personnalisé

Il est aussi possible d'utiliser un attribut spécifique data-design-system-assets pour spécifier un emplacement personnalisé pour la librairie d’assets default, en local ou distant (ex: data-design-system-assets="<https://cdn.jsdelivr.net/npm/@ds-autonomie/assets@1.4.4>"). Cet attribut doit être placé sur une des balises de script de la page pour fonctionner correctement. Le numéro de version (assets@1.4.4) est adaptable selon les besoins.
Utiliser cet attribut permet de s’affranchir de toute manipulation dans le système de fichiers.

Import des polices de caractères

Voir Installation des polices de caractères.

Import des composants

2 méthodes différentes sont utilisables pour l’import du code des composants

Cherry-picking

On importe individuellement chaque composant du DSA avant son utilisation. Cette approche permet de ne charger que les composants dont on a besoin, avec pour inconvénient de devoir importer individuellement chacun d’entre-eux

Exemple (import du composant dsa-avatar):


                                                        
                                                        
                                                            <script type="module" src="<https://cdn.jsdelivr.net/npm/@ds-autonomie/web-components@2.4.1/dist/components/avatar/avatar.js>" ></script>

Auto-loader (expérimental)

Un script qui va constituer à partir du code HTML de la page une liste des composants utilisés et les importer un par un :


                                                        
                                                        
                                                            <script type="module" src="<https://cdn.jsdelivr.net/npm/@ds-autonomie/web-components@2.4.1/cdn/design-system-autoloader.js>" ></script>

La gestion des web components / custom elements par le navigateur peut entraîner des FOUCE (Flash Of Undefined Custom Elements): les custom elements sont affichés avant que l’intégralité du code / des styles ne soient chargés. Ces FOUCE peuvent avoir un impact important sur l’expérience utilisateur et doivent donc être résolus dans la mesure du possible.
Cet article présente deux méthodes permettant de les contrer.

Utilisation des types

Si vous souhaitez utiliser les composants via CDN tout en conservant la possibilité d'accéder aux types dans votre code, vous pouvez installer le package @ds-autonomie/web-components en tant que dépendance de développement.
Cela vous permettra d'importer uniquement les types nécessaires.

Pour ce faire, exécutez la commande suivante :


                                                        
                                                        
                                                            pnpm add --dev @ds-autonomie/web-components

Ensuite, vous pouvez importer les types dans votre code comme suit :


                                                        
                                                        
                                                            import { DSAButton } from '@ds-autonomie/web-components';

La version du package spécifiée dans votre package.json et celles utilisée via le CDN doivent être identiques.
Cela garantit la cohérence et évite les problèmes de compatibilité.

Veillez à ne pas importer les composants eux-mêmes depuis le package installé ; limitez-vous à l'importation de leurs types. Cela prévient les doublons et les conflits potentiels entre les versions des composants.