designsystemet
1.0.0
Designsystemet ist eine Sammlung wichtiger Designelemente, Komponenten und Muster, mit denen öffentliche Dienste errichtet werden können.
Unser Ziel ist es, konsistente und benutzerfreundliche Erlebnisse in digitalen Lösungen für öffentliche Dienste zu schaffen, wodurch sie effizienter und zuverlässiger werden.
Storybook - Vorschau für React -Komponenten.
StoreFront - Allgemeine Dokumentation zum Entwurfssystem.
Thema - Themenbauer.
@digdir/designsystemet - CLI für Designsystemet.
@digdir/designsystemet-theme - Themen für DesignSystemet.
@digdir/designsystemet-css - Styling für Komponenten.
@digdir/designsystemet-react - Reagieren Sie die Implementierung von Designsystemkomponenten.
Befolgen Sie diese Schritte, um mit den React -Komponenten zu beginnen.
Abhängig von Ihren Bedürfnissen und Technologiestapeln installieren Sie die entsprechenden Pakete
npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme
npm i @digdir/designsystemet-react Sie können Ihr eigenes Thema erstellen, das Sie mit den Designsystem-Paketen verwenden können, indem Sie zu unserem Themenbauer gehen.
Das Design-System-Themen wird unter Verwendung von Design-Tokens definiert. Dies geschieht damit, dass Sie mit Token Studio Ihr Thema im Code mit DesignSystemet Figma UI -Kit synchronisieren können und zukünftige Flexibilität bieten.
Führen Sie npx @digdir/designsystemet tokens build , um CSS-Dateien für Ihr benutzerdefiniertes Thema (aus den Design-Tokens) zu erstellen. Mithilfe Ihrer eigenen CSS-Themendatei können Sie das Paket @digdir/designsystemet-theme überspringen.
Sie können jede Schriftfamilie mit den Komponenten verwenden.
Die Komponenten werden unter Verwendung der Inter -Schriftart entworfen und entwickelt, sodass Variationen auftreten können, wenn eine andere Schriftart verwendet wird.
Fügen Sie das <link> -Tag in <head> hinzu und setzen Sie font-family in Ihrer globalen CSS-Datei auf Inter .
Die font-feature-settings verleihen einen Schwanz zu Kleinbuchstaben L .
< 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 */
} Wenn Sie die Schriftart auf andere Weise installieren möchten, denken Sie daran, die Schriftgewichte von 400 , 500 und 600 einzuschließen.
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 und @digdir/designsystemet-css müssen nur einmal importiert werden.
Da Farbnamen davon abhängen, welches Thema verwendet wird, müssen Sie Ihrem tsconfig.json Folgendes hinzufügen, um alle Ihre Farben in den Komponenten mit einer data-color zu verwenden:
@digdir/designsystemet-theme {
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-theme/colors.d.ts"
]
} ,
} Der Befehl cli designsystemet tokens build colors.d.ts . Ersetzen Sie im Beispiel <your-path> durch den tatsächlichen Pfad, den Sie beim Ausführen des Befehls verwendet haben.
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"<your-path>/colors.d.ts"
]
} ,
} Möglicherweise möchten Sie Editor-Hinweise für data-color und data-size für HTML-Elemente wie <span> oder <div> , da diese Attribute in diesen Elementen verschachtelte Komponenten beeinflussen können.
Dies erfordert die eingebaute Typen von React von React und ist daher eingeleitet. Wenn Sie dies möchten, fügen Sie Ihr tsconfig.json Folgendes hinzu:
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-react/react-types.d.ts"
]
} ,
} Erfahren Sie, wie Sie zu diesem Projekt beitragen können, indem Sie unseren Leitfaden für Verhaltenskodex und beitragen.
Wir haben das Glück, eine großartige Gruppe von Menschen zu haben, die beim Designsystem helfen.
Vielen Dank an Chromatic für die Bereitstellung der visuellen Testplattform, die uns hilft, UI -Änderungen zu überprüfen und visuelle Regressionen zu fangen.
