# Suomi.fi Designsystem ## Suomi.fi Designsystem-Oberflächenvorschau Teste eine PDF-Datei, lehne ein nicht unterstütztes Format ab und entferne das ausgewählte Dokument. Die Dateien bleiben in deinem Browser. ## Suomi.fi Designsystem-Designreferenz Offizielle Dokumentation, geprüftes Token-Repository und Metadaten von suomifi-ui-components 18.0.0. Die Vorschau ist eine eigenständige Interpretation, keine native Laufzeitumgebung von React. ### Typografie | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Family | Source Sans 3 | Version 18; bis einschließlich Version 17 wurde Source Sans Pro verwendet. Schriftarten separat laden. | | Body text | 18px | Auf Mobilgeräten und Desktop dieselbe Standardeinstellung. | | Small body | 16px | Textdarstellung smallScreen, keine automatische Viewport-Regel. | | Lead | 22px / 20px smallScreen | Pro Ansicht eine Einleitung; lead nicht für jeden Absatz verwenden. | | Weights | 300 / 400 / 600 | Von dem Komponentenpaket benötigte Schriftdateien. | ### Abstände und Oberflächen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Space scale | 5, 10, 15, 20, 25, 30, 40, 60, 80px | xxs bis xxxxl in der JSON-Datei des geprüften Repositorys. | | Inset scale | 2, 4, 6, 8, 10, 16, 20px | insetXxs bis insetXxl; nicht die äußere Abstands-Skala. | | Basic radius | 2px | Repository-Wert radius.basic; keinen großen Kartenradius daraus ableiten. | | Highlight base | hsl(212, 63%, 45%) | Standard-Blau für Interaktionen. | | Highlight dark 1 | hsl(212, 63%, 37%) | Dunklere Interaktionsrolle. | | Highlight light 2 | hsl(212, 63%, 90%) | Rolle für helle Oberflächen; Kontrast mit der gewählten Textfarbe prüfen. | ### Layout und Sprache von FileInput | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Default maximum width | 600px | Komponentenspezifische Breite, kein Raster für die gesamte Website. | | fullWidth | Boolean layout option | Auf die Breite des übergeordneten Elements ausdehnen, wenn das Formular es erfordert. | | smallScreen | Explicit compact presentation option | Aus dieser Prop keine globale automatische Breakpoint-Regel ableiten. | | Single selection | Chosen file replaces picker and drop area | Die Mehrfachauswahl ist ein eigenes Muster, bei dem die Dateien darunter aufgeführt werden. | | Required copy roles | labelText, hintText, dragAreaText, removeFileText, addedFileAriaText | Jede Rolle lokalisieren; der Dateiname allein ist keine vollständige barrierefreie Ansage. | ## Suomi.fi Designsystem-Vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Suomi.fi Designsystem-Grenzen der Implementierung ### React-Komponentensystem > Suomi.fi stellt React-Komponenten bereit, die mit styled-components gestaltet werden, sowie ein separates Token-Paket. Ab Version 18 wird Source Sans 3 als Schriftart erwartet. Seiten mit Version 17 können weiterhin Source Sans Pro verwenden. Werden solche Screenshots verglichen, ohne die Paketversion zu prüfen, kann das zu einer vermeintlichen Korrektur der Typografie führen. Die eingebettete Vorschau bleibt ausdrücklich als Interpretation des dokumentierten Einzeldateimusters in HTML/CSS gekennzeichnet. Weiter unten ist nun zusätzlich ein eigenständiges Beispiel mit dem nativen React FileInput enthalten, einschließlich des überprüften Callbacks, des kontrollierten Werts, der Abhängigkeiten und der Schriftartimporte. Beide Implementierungen dienen derselben lokalen Auswahlaufgabe. Das native Beispiel macht die eingebettete HTML-Vorschau nicht nachträglich zur React-Komponente. Unterstützende Spezifikation lesen ## Suomi.fi Designsystem-Typografie und Laden der Schriftarten ### Fließtext gut lesbar halten Verwende auf Mobilgeräten und Desktop die dokumentierte Fließtextgröße von 18px. Ein schmaler Viewport ist kein Grund, alle Formularerläuterungen zu verkleinern. Die kleine Textdarstellung ist 16px groß und für Zusatzinformationen vorgesehen. Der Lead-Text ist 22px groß und wird mit der kompakten Darstellung auf 20px reduziert. Verwende ihn nur für die Seiteneinleitung. Lade die vorgesehenen Schriftstärken, bevor du den Zeilenumbruch vergleichst. Das Komponentenpaket erwartet Schriftdateien für Source Sans 3; diese eigenständige Vorschau verwendet bewusst Arial. Dieser Austausch ist im Vorschauhinweis kenntlich gemacht und darf nicht als exakte Darstellung der nativen Komponente ausgegeben werden. Unterstützende Spezifikation lesen ## Suomi.fi Designsystem-Abstände und Breite ### Zwei unterschiedliche Abstands-Skalen Die Tokenquelle trennt gewöhnliche Abstände von Innenabständen. Das gewöhnliche l beträgt im untersuchten JSON 25px. Übernehmen Sie kein älteres README-Beispiel, in dem l mit 32px angegeben ist. Innenabstände beginnen bei 2px und folgen einer anderen Abstufung. Verwenden Sie zum Erzeugen von Stilen die tatsächlichen Exporte der installierten Version. FileInput hat eine dokumentierte maximale Breite von 600px und eine fullWidth-Option. Das ist eine Einschränkung der Komponente und kein Beleg für einen universellen Seitencontainer mit 600px Breite. In einem Formular zur Dokumentenannahme kann das Feld in einem breiteren Layout stehen, während der erläuternde Text nahe an der Beschriftung bleibt. Unterstützende Spezifikation lesen ## Suomi.fi Designsystem Anatomie des Dateiauswahlfelds ### Der Text gehört zum Komponentenvertrag Die sichtbare Beschriftung benennt das angeforderte Dokument. Der Hinweis erläutert unterstützte Formate, Dateigröße und Anzahl, bevor jemand den Dateiauswahldialog öffnet. Der Ablagebereich bietet eine zusätzliche Möglichkeit per Zeiger, darf das Dateieingabefeld aber nicht ersetzen. Laut offizieller Anleitung ist das Auswahlsteuerelement die Beschriftung eines verborgenen nativen Dateieingabefelds. Im Einzeldateimodus ersetzen das ausgewählte Dokument den Dateiauswahldialog und den Ablagebereich. Bieten Sie neben dem Dokument eine klar erkennbare Entfernen-Aktion an. Im Mehrdateimodus wird eine andere Listenanordnung verwendet. Hängen Sie nicht stillschweigend weitere Dateien an eine Anfrage für eine einzelne Datei an. - labelText: Benennen Sie den angeforderten Nachweis oder das Dokument, nicht nur „Hochladen“. - removeFileText: Formulieren Sie die Entfernen-Aktion so, dass sie im Dateikontext verständlich ist. - addedFileAriaText: Stellen Sie Kontext zur Auswahl bereit, bevor der Dateiname vorgelesen wird. Unterstützende Spezifikation lesen ## Suomi.fi Designsystem Auswahl und Wiederherstellung ### Eine lokale Zustandsmaschine für Anhänge Das Beispiel akzeptiert eine PDF-Datei mit höchstens 5.000.000 Byte. Diese Regeln wurden für das Szenario dieses Workshops festgelegt. Sie sind weder Paketstandardwerte noch eine offizielle Upload-Richtlinie von Suomi.fi. Die accept-Filterung des Browsers ist nur ein Hinweis für den Dateiauswahldialog; das Beispiel prüft Dateiname und Größe nach der Auswahl oder dem Ablegen zusätzlich selbst. Bei ungültigen Metadaten bleibt das Auswahlfeld verfügbar und erklärt, wie der Vorgang wiederholt werden kann. Bei einer gültigen Auswahl wird der Dateiname mit textContent angezeigt, die Byteanzahl angegeben und der Fokus auf das Steuerelement zum Entfernen gesetzt. Beim Entfernen wird der Wert des zugrunde liegenden Eingabefelds gelöscht, die Auswahlmöglichkeit wiederhergestellt und der Fokus zurückgesetzt, sodass dieselbe Datei erneut ausgewählt werden kann. 1. Wählen Sie genau eine Datei aus oder legen Sie sie ab; weisen Sie mehrere Dateien mit einer entsprechenden Meldung zurück. 2. Prüfen Sie die lokalen Regeln des Beispiels und geben Sie entweder den Fehler oder den Namen der ausgewählten Datei bekannt. 3. Entfernen Sie den Anhang und stellen Sie die ursprüngliche Auswahlmöglichkeit wieder her. Unterstützende Spezifikation lesen ## Suomi.fi Designsystem Native Integration ### Ein aufeinander abgestimmtes Abhängigkeitspaket installieren Die veröffentlichte FileInput-Implementierung in Version 18.0.0 ruft onChange mit einer FileList auf, nicht mit einem React change-Ereignis. Der kontrollierte Wert ist ein Array aus Dateiobjekten; im Beispiel wird jede akzeptierte File auf { file } abgebildet. Derselbe Callback wird aufgerufen, wenn die integrierte Entfernen-Aktion die Liste ändert. Eine leere FileList leert daher das kontrollierte Array. Diese Verträge wurden im veröffentlichten Modul dist/esm/core/Form/FileInput/FileInput.js überprüft. Halten Sie value vom ersten Rendern an kontrolliert, indem Sie mit einem leeren Array beginnen. Prüfen Sie die eingehende FileList, bevor Sie sie auf dieses Array abbilden. Dieses Beispiel weist Dateien zurück, deren Namen nicht auf .pdf enden oder deren Größe 5.000.000 Byte überschreitet, und hebt die Auswahl bei einer Zurückweisung auf. Das sind lokale Regeln des Beispiels, keine Sicherheitsprüfung und keine Richtlinie von Suomi.fi. Vor der Annahme eines tatsächlichen Uploads ist weiterhin eine serverseitige Inhaltsprüfung erforderlich. Das native Beispiel unten lädt Source Sans 3 in den Schriftstärken 400 und 600, bindet React in ein explizites Root-Element ein und verwendet styled-components über die Bibliothek. Binden Sie tslib ausdrücklich ein: Die ESM-Module der Version 18.0.0 importieren dessen Hilfsfunktionen, und ein sauberer Build ohne diese Abhängigkeit schlug fehl. Die unten festgelegte Konfiguration enthält die fehlende Laufzeitabhängigkeit und die Schriftdateien. Für dieses Beispiel mit dem Standarddesign ist kein zusätzlicher Theme-Provider erforderlich. Unterstützende Spezifikation lesen ### Verifizierte Token-Exporte verwenden Die offizielle Stilanleitung zeigt suomifiDesignTokens.spacing und suomifiDesignTokens.colors. Das folgende Beispiel verwendet diese exportierten Pfade für einen benutzerdefinierten Wrapper. Es ersetzt nicht die interne Implementierung von FileInput. ``` import { suomifiDesignTokens } from 'suomifi-design-tokens'; // Real exported token paths. Use values instead of copying README example numbers. const attachmentStyle = { maxWidth: 600, padding: suomifiDesignTokens.spacing.m, borderColor: suomifiDesignTokens.colors.highlightBase }; ``` Code-Referenz Unterstützende Spezifikation lesen ## Suomi.fi Designsystem Barrierefreiheit und responsiver Einsatz ### Das Feld ohne Ziehen und Ablegen erreichen Sorgen Sie dafür, dass ein natives Dateieingabefeld auch dann per Tastatur bedienbar bleibt, wenn der Ablagebereich stark hervorgehoben ist. Verknüpfen Sie Hinweis und Fehlermeldung über aria-describedby mit dem Feld. Geben Sie Änderungen an der Auswahl und das Entfernen bekannt, ohne die gesamte Seite erneut vorlesen zu lassen. Wenn in einem Formular mehrere solcher Steuerelemente vorkommen können, sollte ein Entfernen-Button die ausgewählte Datei benennen. Die offizielle smallScreen-Prop ermöglicht eine kompakte Darstellung. Sie legt keinen globalen Breakpoint fest. Diese unabhängige Vorschau passt den Innenabstand bei 480px gemäß einer anwendungsspezifischen Einstellung an und behält eine Textgröße von 18px bei. Testen Sie lange Dateinamen, Vergrößerung und übersetzte Beschriftungen. Lassen Sie Dateinamen umbrechen, ohne dadurch die gesamte Seite zu verbreitern. Unterstützende Spezifikation lesen ## Suomi.fi Designsystem Anforderungen für den Produktivbetrieb ### Eine ausgewählte Datei ist noch keine hochgeladene Datei Die Demo liest den Inhalt des Dokuments nicht aus und sendet keine Anfrage. Ein ausgewählter Dateiname und eine Byteanzahl beweisen nicht, dass ein Dokument gültig, gespeichert oder angenommen wurde. Echte Dienste benötigen eine serverseitige Validierung, Upload-Fortschritt, die Möglichkeit zur Wiederaufnahme nach Fehlern, Aufbewahrungsregeln und eine Bestätigung, die auf einer tatsächlichen Antwort beruht. Der Komponentencode steht unter der MIT-Lizenz. Diese Lizenz berechtigt ein unabhängiges Projekt nicht dazu, sich als finnischer Behördendienst auszugeben oder eine geschützte institutionelle Identität zu verwenden. Nutzen Sie für Experimente einen neutralen Projektnamen und holen Sie für eine offizielle Implementierung die entsprechenden Markenrichtlinien ein. Unterstützende Spezifikation lesen ## Suomi.fi Designsystem Komponentenbeispiele des Designsystems ### Offizielle Token-Exporte verwenden Verifizierte Exportpfade für Abstände und Farben in einem benutzerdefinierten Wrapper. ``` import { suomifiDesignTokens } from 'suomifi-design-tokens'; // Real exported token paths. Use values instead of copying README example numbers. const attachmentStyle = { maxWidth: 600, padding: suomifiDesignTokens.spacing.m, borderColor: suomifiDesignTokens.colors.highlightBase }; ``` Code-Referenz ### Auswahl und Entfernen einer einzelnen Datei Vollständige lokale Umsetzung. PDF- und Größenbeschränkungen sind Szenarioentscheidungen; es findet kein Upload statt. ``` Attachment example
COMMUNITY WORKSHOP · ATTACHMENT

Add your project outline

Choose one PDF up to 5 MB. This local example checks file metadata; it does not read or send the document.

One PDF file. Maximum 5 MB (5,000,000 bytes).
Or drop one PDF here

No file selected.

``` Code-Referenz - Nicht die native Komponente React. - Validieren Sie für einen Produktivdienst den Dateiinhalt auf dem Server. ### Native FileInput-Komponente mit kontrollierter Validierung Als main.jsx speichern. Mit diesen drei Dateien lässt sich das native Beispiel für React mithilfe der Setup-Befehle reproduzieren. ``` import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { FileInput } from 'suomifi-ui-components'; import '@fontsource/source-sans-3/400.css'; import '@fontsource/source-sans-3/600.css'; import './app.css'; function App() { const [value, setValue] = useState([]); const [error, setError] = useState(''); function change(files) { const next = Array.from(files); const invalid = next.length > 1 || next.some(file => !/\.pdf$/i.test(file.name) || file.size > 5000000); if (invalid) { setValue([]); setError('Choose one PDF no larger than 5 MB.'); return; } setValue(next.map(file => ({ file }))); setError(''); } return

Select a workshop document

This local example does not upload or read the document.

{value.length ? `${value[0].file.name} selected locally.` : 'No file selected.'}

; } createRoot(document.getElementById('root')).render(); ``` Code-Referenz - Die Anwendung übernimmt die Validierung; die native Komponente stellt Auswahl, Entfernen und die barrierefreien Dateisteuerelemente bereit. ### Layout der nativen Beispielseite Als app.css speichern. Zusammen bilden diese drei Dateien das native React-Beispiel mit den Einrichtungsbefehlen nach. ``` body{margin:0;font:18px/1.5 'Source Sans 3',sans-serif;color:#292929;background:#fff}main{max-width:600px;margin:0 auto;padding:24px}h1{font-size:32px;line-height:1.2}*{box-sizing:border-box} ``` Code-Referenz - Die Anwendung übernimmt die Validierung; die native Komponente stellt Auswahl, Entfernen und die barrierefreien Dateisteuerelemente bereit. ### Mountpunkt und ausgegebene Assets des nativen Beispiels Als index.html speichern. Zusammen bilden diese drei Dateien das native React-Beispiel mit den Einrichtungsbefehlen nach. ``` Native Suomi.fi FileInput
``` Code-Referenz - Die Anwendung übernimmt die Validierung; die native Komponente stellt Auswahl, Entfernen und die barrierefreien Dateisteuerelemente bereit. ## Suomi.fi Designsystem-Agent-Einrichtung ### Ausgangspunkt für die Implementierung Damit wird das native React-Beispiel unten erstellt, einschließlich lokaler Source-Sans-3-Schriftdateien. Getestet mit ungültigem Format, gültiger Auswahl, integrierter Entfernung und einer zu großen PDF-Datei bei 390px und 1440px. Die vorhandene herunterladbare Vorschau-ZIP ist eine separate Interpretation von HTML/CSS; die README-Datei ist weiterhin korrekt. ``` npm install --save-exact suomifi-ui-components@18.0.0 react@18.3.1 react-dom@18.3.1 styled-components@6.5.3 tslib@2.8.1 @fontsource/source-sans-3@5.3.0 npm install --save-dev --save-exact esbuild@0.28.2 # Save main.jsx, app.css and index.html from the complete examples below. npx esbuild main.jsx --bundle --outdir=dist --entry-names=app --loader:.woff=copy --loader:.woff2=copy cp index.html dist/index.html python3 -m http.server 8080 --directory dist # Open http://localhost:8080 ``` ### Ein Prompt für dein Projekt ``` Verwende das bereitgestellte native Suomi.fi FileInput-18.0.0-React-Beispiel mit Source Sans 3 und den festgelegten Laufzeitabhängigkeiten, einschließlich tslib. Steuere den Wert als Array von { file }-Objekten und erhalte in onChange direkt eine FileList; lies in diesem Callback nicht event.target aus. Prüfe Format und Größe, bevor du eine lokale Auswahl akzeptierst, behandle die beim Entfernen ausgegebene leere Liste und lasse Hinweis- und Fehlermeldungen sichtbar. Betrachte die eingebettete HTML-Vorschau als separat gekennzeichnete Interpretation. Keine der beiden Implementierungen lädt eine Datei hoch; Servervalidierung, Fortschrittsanzeige und bestätigte Speicherung erfordern einen tatsächlichen Backend-Vertrag. ``` ## Suomi.fi Designsystem Quellen und Umfang Die eingebettete Vorschau und die herunterladbare ZIP-Datei sind eine OpenDesign-HTML/CSS-Interpretation. Das separate vollständige React-Beispiel verwendet suomifi-ui-components 18.0.0 und die verifizierten Verträge für FileInput-Wert und onChange. Beide Beispiele unterstützen die lokale Dateiauswahl; keines lädt ein Dokument auf einen Server hoch oder speichert es dort. - Hinweise zu FileInput Aufbau, Textfunktionen, Breiten und Verhalten bei Einzel- und Mehrfachauswahl. - Typografie Source Sans 3 und Versionswechsel. - Textkomponente Schriftgrößen für Fließtext, kleinen Text und Lead-Text. - Quelle der Tokens Tatsächliche Werte für Abstände, Farben und Radien. - Komponenten-Repository React-Implementierung, Abhängigkeiten und MIT-Lizenz. - Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich. - Verifizierte Implementierung von FileInput 18.0.0 Quelle des veröffentlichten Pakets: dist/esm/core/Form/FileInput/FileInput.js. Der gesteuerte Wert und der FileList-Callback wurden anhand dieses Releases geprüft und in einem separaten nativen Build getestet. ## Suomi.fi Designsystem Weiterführende Ressourcen ### UNDP Designsystem Entdecke die veröffentlichten Farb- und Abstandstokens von UNDP, native, per Tastatur bedienbare Tabs und ein vollständiges Beispiel zum Lesen eines Workshops mit lokal gespeichertem Lesefortschritt. ### USWDS USWDS-Abstands-Tokens, Theme-Rollen, semantische Tabellen und native Akkordeons in einem durchsuchbaren Vergleich von Möglichkeiten verbinden. ### VA Designsystem Gestalte klare Serviceabläufe mit den semantischen Tokens von VA und der nativen Process List: sichtbare Erläuterungen zu den einzelnen Schritten, aussagekräftige Statusbezeichnungen und ergänzende Details, die den Hauptablauf übersichtlich halten. - [Implementierungsreferenz](https://designsystem.suomi.fi/components/fileinput/) - [Quelle](https://designsystem.suomi.fi/components/text/) - [Quelle](https://github.com/vrk-kpa/suomifi-design-tokens/blob/master/src/tokens.json) - [Quelle](https://designsystem.suomi.fi/components/fileinput/) - [Unterstützende Spezifikation lesen](https://github.com/vrk-kpa/suomifi-ui-components) - [Unterstützende Spezifikation lesen](https://designsystem.suomi.fi/components/text/) - [Unterstützende Spezifikation lesen](https://github.com/vrk-kpa/suomifi-design-tokens/blob/master/src/tokens.json) - [Unterstützende Spezifikation lesen](https://designsystem.suomi.fi/components/fileinput/) - [Unterstützende Spezifikation lesen](https://www.npmjs.com/package/suomifi-ui-components/v/18.0.0) - [Code-Referenz](https://designsystem.suomi.fi/styles) - [Unterstützende Spezifikation lesen](https://designsystem.suomi.fi/styles) - [Code-Referenz](https://designsystem.suomi.fi/components/fileinput/) - [Code-Referenz](https://www.npmjs.com/package/suomifi-ui-components/v/18.0.0) - [Hinweise zu FileInput Aufbau, Textfunktionen, Breiten und Verhalten bei Einzel- und Mehrfachauswahl.](https://designsystem.suomi.fi/components/fileinput/) - [Typografie Source Sans 3 und Versionswechsel.](https://designsystem.suomi.fi/styles/typography/) - [Textkomponente Schriftgrößen für Fließtext, kleinen Text und Lead-Text.](https://designsystem.suomi.fi/components/text/) - [Quelle der Tokens Tatsächliche Werte für Abstände, Farben und Radien.](https://github.com/vrk-kpa/suomifi-design-tokens/blob/master/src/tokens.json) - [Komponenten-Repository React-Implementierung, Abhängigkeiten und MIT-Lizenz.](https://github.com/vrk-kpa/suomifi-ui-components) - [Verifizierte Implementierung von FileInput 18.0.0 Quelle des veröffentlichten Pakets: dist/esm/core/Form/FileInput/FileInput.js. Der gesteuerte Wert und der FileList-Callback wurden anhand dieses Releases geprüft und in einem separaten nativen Build getestet.](https://www.npmjs.com/package/suomifi-ui-components/v/18.0.0)