designsystemet
1.0.0
DesignSystemt est une collection d'éléments de conception importants, de composants et de modèles qui peuvent être utilisés pour créer des services publics.
Notre objectif est de créer des expériences cohérentes et conviviales dans des solutions numériques pour les services publics, ce qui les rend plus efficaces et fiables.
Storybook - Aperçu des composants React.
Storefront - Documentation générale sur le système de conception.
THEME - BUILDER DE THEME.
@digdir/designsystemet - CLI pour DesignSystemt.
@digdir/designsystemet-theme - Thèmes pour DesignSystemt.
@digdir/designsystemet-css - Style pour les composants.
@digdir/designsystemet-react - React Implémentation des composants DesignSystemEt.
Suivez ces étapes pour commencer avec les composants React.
Selon vos besoins et votre pile technologique, installez les packages pertinents
npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme
npm i @digdir/designsystemet-react Vous pouvez créer votre propre thème à utiliser avec les packages DesignSystemEt en allant à notre constructeur de thème.
DesignSysteMet theming est défini à l'aide de conception-tokens. Cela est fait afin que vous puissiez utiliser Token Studio pour synchroniser votre thème dans le code avec DesignSystemt Figma Inter Inter Kit, en plus de fournir une flexibilité future.
Exécutez npx @digdir/designsystemet tokens build pour créer des fichiers CSS pour votre thème personnalisé (à partir des conception-tokens). En utilisant votre propre fichier de thème CSS construit, vous pouvez sauter à l'aide du package @digdir/designsystemet-theme .
Vous êtes libre d'utiliser n'importe quelle famille de polices avec les composants.
Les composants sont conçus et développés à l'aide de la police inter-inter-variations peuvent se produire si une police différente est utilisée.
Ajoutez la balise <link> dans <head> et définissez font-family pour Inter dans votre fichier CSS global.
Les font-feature-settings ajoutent une queue aux L minuscules.
< link
rel =" stylesheet "
href =" https://altinncdn.no/fonts/inter/inter.css "
/> body {
font-family : 'Inter' , sans-serif;
font-feature-settings : 'cv05' 1 ; /* Enable lowercase l with tail */
} Si vous choisissez d'installer la police d'une manière différente, n'oubliez pas d'inclure les poids de police 400 , 500 et 600 .
import '@digdir/designsystemet-theme' ;
import '@digdir/designsystemet-css' ;
import { Button } from '@digdir/designsystemet-react' ;
< Button variant = 'secondary' > I am a button! </ Button > ; @digdir/designsystemet-theme et @digdir/designsystemet-css uniquement pour être importée une seule fois.
Parce que les noms de couleurs dépendent du thème utilisé, vous devez ajouter ce qui suit à votre tsconfig.json pour utiliser toutes vos couleurs dans les composants qui ont un accessoire data-color :
@digdir/designsystemet-theme {
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-theme/colors.d.ts"
]
} ,
} La commande CLI designsystemet tokens build sortira un fichier colors.d.ts dans le répertoire de sortie choisi. Dans l'exemple, remplacez <your-path> par le chemin réel que vous avez utilisé lors de l'exécution de la commande.
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"<your-path>/colors.d.ts"
]
} ,
} Vous voudrez peut-être que l'éditeur des conseils pour les attributs data-color et data-size sur des éléments HTML comme <span> ou <div> , car ces attributs peuvent affecter les composants imbriqués dans ces éléments.
Cela nécessite d'augmenter les types intégrés de React, et est donc opt. Si vous le souhaitez, ajoutez ce qui suit à votre tsconfig.json :
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-react/react-types.d.ts"
]
} ,
} Découvrez comment vous pouvez contribuer à ce projet en lisant notre code de conduite et notre guide de contribution.
Nous avons la chance d'avoir un grand groupe de personnes qui aident avec le système de conception.
Merci à Chromatic d'avoir fourni la plate-forme de test visuelle qui nous aide à examiner les modifications de l'interface utilisateur et à prendre des régressions visuelles.
