L'espace de documentation du Système de Design du Ministère de la Justice propose des exemples d'usage de composants et de code, basés sur celui du Système de Design de l' État (i.e. DSFR), surchargé en Angular.
Les composants natifs DSFR sont proposés en HTML/CSS/JS et nous leur ajoutons une surcouche Angular, aussi le DSMJ s'adresse prioritairement aux développeurs et trouveront le code de chaque composant DSMJ dans la page dédiée Composant et Champ de formulaire.
Nous proposons également des composants spécifiques DSMJ développés en Angular avec leur équivalent graphique Figma, un lien permet d'accéder au composant graphique pour les UX/UI designers. Information sur la page Figma
Pour tout ce qui concerne l'utilisation du Système de design en général : prise en main du code et de la librairie Figma, environnement de travail, documentations des fondamentaux techniques et de l'identité de l' État, etc., nous vous renvoyons au DSFR qui est notre référent :
Accueil - Système de Design de l'État (système-de-design.gouv.fr)
La bibliothèque DSMJ met à la disposition des intégrateurs des documentations techniques permettant l'installation, l'intégration et la personnalisation des composants, ils peuvent notamment accéder à ces documents à partir :
Elle met également à disposition des dépôts permettant la récupération de code source sous forme compilée et non compilée :
Lancer la commande ci-dessous afin de télécharger la librairie dans votre projet.
Cette commande va installer la librairie DSMJ ainsi que deux dépendances d'Angular nécessaire à son bon fonctionnement.
La librairie DSMJ intègre, dans les toutes les différentes versions établit à ce jour, les librairies Angular suivantes : @angular/cdk
et @angular/material
.
La librairie DSMJ les intègre car deux des composants mis à disposition par la librairie utilisent ces dépendances Angular.
Veuillez noter que dans une version utlrérieure ces dépendances ne seront plus nécessaires, les composants seront modifiés afin que le traitement aujourd'hui géré par ces dépendances soit géré par du code natif.
À ce jour la dernière version du DSMJ est la v0.3.7.
Cette version a été développée et testée uniquement en Angular (v13) et le Système de Design de l'État (v1.7),
elle est néanmoins compatible avec les versions 10+ d'Angular.
La configuration du fichier "angular.json" se fait en indiquant les ressources css et js dont aura besoin votre application pour intégrer les composants disponibles dans la librairie DSMJ.
A noter que les "commentaires" ainsi que les "..." ne sont présents qu'à titre informatif, veuillez les supprimer avant de lancer un build de votre application.
Pour le moment la librairie a une dépendance forte avec @angular/cdk
et @angular/material
A noter que les "commentaires" ainsi que les "..." ne sont présents qu'à titre informatif, veuillez les supprimer avant de lancer un build de votre application.