# Système de design Suomi.fi ## Aperçu de l’interface système de design Suomi.fi Essayez avec un PDF, rejetez un fichier non pris en charge et supprimez le document sélectionné. Les fichiers restent dans votre navigateur. ## Référence de conception système de design Suomi.fi Documentation officielle, dépôt de jetons examiné et métadonnées de suomifi-ui-components 18.0.0. L’aperçu est une interprétation originale, pas l’environnement d’exécution natif de React. ### Typographie | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Family | Source Sans 3 | Version 18 ; la version 17 et les versions antérieures utilisaient Source Sans Pro. Charger les polices séparément. | | Body text | 18px | Même valeur par défaut sur mobile et ordinateur. | | Small body | 16px | Traitement smallScreen du texte, et non règle automatique liée à la taille de l’écran. | | Lead | 22px / 20px smallScreen | Une seule introduction par vue ; ne pas utiliser le style d’introduction pour chaque paragraphe. | | Weights | 300 / 400 / 600 | Ressources de polices requises par le package de composants. | ### Espacement et surfaces | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Space scale | 5, 10, 15, 20, 25, 30, 40, 60, 80px | De xxs à xxxxl dans le JSON du dépôt examiné. | | Inset scale | 2, 4, 6, 8, 10, 16, 20px | De insetXxs à insetXxl ; il ne s’agit pas de l’échelle d’espacement externe. | | Basic radius | 2px | repository radius.basic ; ne pas supposer un grand rayon pour les cartes. | | Highlight base | hsl(212, 63%, 45%) | Bleu interactif par défaut. | | Highlight dark 1 | hsl(212, 63%, 37%) | Rôle interactif plus sombre. | | Highlight light 2 | hsl(212, 63%, 90%) | Rôle de surface claire ; vérifier le contraste avec le texte choisi. | ### Mise en page et langue de FileInput | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Default maximum width | 600px | Largeur propre au composant, et non à la grille de tout le site. | | fullWidth | Boolean layout option | S’étire dans le conteneur parent si le formulaire en a besoin. | | smallScreen | Explicit compact presentation option | Ne pas déduire de cette propriété un point de rupture global automatique. | | Single selection | Chosen file replaces picker and drop area | La sélection multiple est un modèle distinct, avec les fichiers affichés en dessous. | | Required copy roles | labelText, hintText, dragAreaText, removeFileText, addedFileAriaText | Localisez chaque rôle ; le nom du fichier seul ne constitue pas une annonce accessible complète. | ## Guide complet système de design Suomi.fi Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Limites d’implémentation de système de design Suomi.fi ### Système de composants React > Suomi.fi fournit React composants stylés avec styled-components et un package de jetons distinct. La version 18 utilise désormais Source Sans 3 comme police attendue. Les pages existantes en version 17 peuvent encore utiliser Source Sans Pro ; comparer leurs captures d’écran sans vérifier la version du package peut conduire à une correction typographique injustifiée. L’aperçu intégré reste une interprétation de HTML/CSS, clairement identifiée, du modèle documenté à fichier unique. Un exemple distinct de FileInput natif de React est maintenant présenté ci-dessous, avec son callback vérifié, sa valeur contrôlée, ses dépendances et ses imports de polices. Il s’agit de deux implémentations de la même tâche de sélection locale ; l’exemple natif ne transforme pas rétroactivement l’aperçu intégré de HTML en composant de React. Consultez la spécification associée ## Typographie et chargement des polices de système de design Suomi.fi ### Préserver la lisibilité du texte Utilisez la taille de corps de texte documentée de 18px sur mobile comme sur ordinateur. Un écran étroit ne justifie pas de réduire toutes les explications du formulaire. Le style de petit texte est de 16px et convient aux informations secondaires. Le texte d’introduction est de 22px, réduit à 20px avec le style compact ; réservez-le à l’introduction de la page. Chargez les graisses de police prévues avant de comparer le retour à la ligne. Le package de composants attend des ressources Source Sans 3, tandis que cet aperçu indépendant utilise volontairement Arial. Cette substitution est signalée dans la note de l’aperçu et ne doit pas être présentée comme un rendu exact du composant natif. Consultez la spécification associée ## Espacement et largeur de système de design Suomi.fi ### Deux échelles d’espacement distinctes La source des jetons distingue l’espacement ordinaire de l’espacement intérieur. Dans le JSON examiné, l’espacement ordinaire l vaut 25px ; ne reprenez pas un ancien exemple du README qui indique 32px pour l. Les espacements intérieurs commencent à 2px et suivent une séquence différente. Utilisez les exports réels de la version installée pour générer les styles. FileInput a une largeur maximale documentée de 600px et une option fullWidth. Il s’agit d’une contrainte propre au composant, et non d’un indice qu’un conteneur de page universel devrait mesurer 600px. Un formulaire de dépôt de documents peut intégrer le champ dans une mise en page plus large tout en gardant les explications près de son libellé. Consultez la spécification associée ## Anatomie du sélecteur de fichiers de système de design Suomi.fi ### Le texte fait partie du contrat du composant Le libellé visible indique le document demandé. L’aide précise les formats, la taille et le nombre de fichiers autorisés avant l’ouverture du sélecteur. La zone de dépôt offre un raccourci au pointeur, mais ne doit pas remplacer le champ de sélection de fichier. Les recommandations officielles décrivent le contrôle de sélection comme le libellé d’un champ de fichier natif masqué. En mode fichier unique, le document sélectionné remplace le sélecteur et la zone de dépôt. Prévoyez une action de suppression claire à côté du document. Le mode fichiers multiples utilise une liste différente ; n’ajoutez pas silencieusement d’autres fichiers à une demande à fichier unique. - labelText : nommez le justificatif ou le document demandé, et non simplement « Téléverser ». - removeFileText : formulez l’action de suppression de manière explicite dans le contexte du fichier. - addedFileAriaText : fournissez le contexte de la sélection avant l’annonce du nom du fichier. Consultez la spécification associée ## Sélection et récupération dans système de design Suomi.fi ### Machine à états d’une pièce jointe locale L’exemple accepte un seul PDF de 5 000 000 octets maximum. Il s’agit de règles choisies pour ce scénario d’atelier, et non de valeurs par défaut du package ni d’une politique officielle de dépôt de fichiers de Suomi.fi. Le filtre accept du navigateur est uniquement une indication pour le sélecteur ; l’exemple vérifie indépendamment le nom et la taille du fichier après sa sélection ou son dépôt. Si les métadonnées ne sont pas valides, le sélecteur reste disponible et des instructions permettent de corriger la situation. Un fichier valide est affiché avec son nom via textContent ; sa taille en octets est indiquée et le focus passe au contrôle de suppression. La suppression efface la valeur du champ sous-jacent, rétablit le sélecteur et lui rend le focus, ce qui permet de sélectionner à nouveau le même fichier. 1. Sélectionnez ou déposez un seul fichier ; rejetez les sélections multiples avec un message explicite. 2. Vérifiez les règles de l’exemple local et annoncez l’erreur ou le nom du fichier sélectionné. 3. Supprimez la pièce jointe et rétablissez le moyen de sélection initial. Consultez la spécification associée ## Intégration native de système de design Suomi.fi ### Installer un ensemble de dépendances compatibles L’implémentation de FileInput 18.0.0 publiée appelle onChange avec une FileList, et non avec un événement change de React. La valeur contrôlée est un tableau d’objets représentant les fichiers ; l’exemple convertit chaque File accepté en { file }. Le même callback est exécuté lorsque l’action de suppression intégrée modifie la liste : une FileList vide efface donc le tableau contrôlé. Ces contrats ont été vérifiés dans le module publié dist/esm/core/Form/FileInput/FileInput.js. Gardez la valeur contrôlée dès le premier rendu en commençant par un tableau vide. Vérifiez la FileList reçue avant de la convertir en tableau. Cet exemple rejette les fichiers dont le nom ne se termine pas par .pdf ou dont la taille dépasse 5 000 000 octets, puis efface la sélection en cas de rejet. Il s’agit de règles propres à cet exemple, et non d’un contrôle de sécurité ni d’une politique de Suomi.fi. Une validation du contenu côté serveur reste nécessaire avant d’accepter un véritable téléversement. L’exemple natif ci-dessous charge Source Sans 3 aux graisses 400 et 600, monte React dans un élément racine explicite et utilise styled-components via la bibliothèque. Incluez tslib explicitement : les modules ESM de la version 18.0.0 importent ses fonctions utilitaires, et une compilation vierge a échoué sans cette dépendance. La configuration épinglée ci-dessous inclut la dépendance d’exécution manquante et les fichiers de police. Aucun fournisseur de thème supplémentaire n’est nécessaire pour cet exemple utilisant le thème par défaut. Consultez la spécification associée ### Utiliser les exports de jetons vérifiés Le guide de styles officiel présente suomifiDesignTokens.spacing et suomifiDesignTokens.colors. L’exemple ci-dessous utilise ces chemins d’exportation pour un conteneur personnalisé ; il ne remplace pas l’implémentation interne de 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 }; ``` Référence du code Consultez la spécification associée ## Système de design Suomi.fi Accessibilité et utilisation adaptative ### Accéder au champ sans glisser-déposer Conservez un champ de saisie de fichier natif utilisable au clavier, même si la zone de dépôt est mise en évidence. Associez son aide et son erreur à l’aide de aria-describedby. Annoncez les changements de sélection et la suppression sans relire toute la page. Si un formulaire peut contenir plusieurs boutons de suppression, chacun doit désigner le fichier sélectionné correspondant. La propriété officielle smallScreen propose une présentation compacte. Elle ne définit pas de point de rupture global. Cet aperçu indépendant applique un ajustement de marge intérieure propre à l’application à 480 px, tout en conservant un corps de texte de 18 px. Testez les noms de fichiers longs, le zoom et les libellés traduits ; faites passer les noms de fichiers à la ligne sans élargir toute la page. Consultez la spécification associée ## Système de design Suomi.fi Responsabilités en production ### Un fichier sélectionné n’est pas un fichier téléversé La démo ne lit pas le contenu des documents et n’envoie aucune requête. Le nom du fichier sélectionné et sa taille en octets ne prouvent pas qu’un document est valide, stocké ou accepté. Les véritables services doivent prévoir une validation côté serveur, la progression du téléversement, la reprise après échec, des règles de conservation et une confirmation liée à une réponse réelle. Le code du composant est sous licence MIT. Cette licence ne permet pas à un projet indépendant de se présenter comme un service du gouvernement finlandais ni d’utiliser une identité institutionnelle protégée. Utilisez un nom de projet neutre pour vos essais et demandez les directives de marque appropriées pour toute mise en œuvre officielle. Consultez la spécification associée ## Système de design Suomi.fi Exemples de composants du système de design ### Utiliser les exports de jetons officiels Chemins d’exportation vérifiés pour l’espacement et les couleurs d’un conteneur personnalisé. ``` 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 }; ``` Référence du code ### Sélection et suppression d’un seul fichier Interprétation locale complète. Les limites de type PDF et de taille sont propres au scénario ; aucun téléversement n’a lieu. ``` 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.

``` Référence du code - Il ne s’agit pas du composant natif React. - Pour un service en production, validez le contenu du fichier sur le serveur. ### FileInput natif avec validation contrôlée Enregistrez sous main.jsx. Ces trois fichiers reproduisent ensemble l’exemple natif React à l’aide des commandes de configuration. ``` 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(); ``` Référence du code - L’application gère la validation ; le composant natif fournit la sélection, la suppression et les commandes accessibles du champ de fichier. ### Mise en page de la page d’exemple native Enregistrez sous app.css. Ces trois fichiers reproduisent ensemble l’exemple natif React à l’aide des commandes de configuration. ``` 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} ``` Référence du code - L’application gère la validation ; le composant natif fournit la sélection, la suppression et les commandes accessibles du champ de fichier. ### Point de montage de l’exemple natif et ressources générées Enregistrez sous index.html. Ces trois fichiers reproduisent ensemble l’exemple natif React à l’aide des commandes de configuration. ``` Native Suomi.fi FileInput
``` Référence du code - L’application gère la validation ; le composant natif fournit la sélection, la suppression et les commandes accessibles du champ de fichier. ## Système de design Suomi.fi Configuration de l’agent IA ### Point de départ de l’implémentation Cette configuration compile l’exemple natif React ci-dessous, avec les fichiers de police Source Sans 3 locaux. Tests effectués avec un format non valide, une sélection valide, la suppression intégrée et un PDF trop volumineux, à 390 px et 1 440 px. L’archive ZIP d’aperçu téléchargeable existante est l’interprétation distincte HTML/CSS ; son README reste exact. ``` 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 ``` ### Un prompt pour votre projet ``` Utilisez l’exemple natif Suomi.fi FileInput 18.0.0 React fourni, avec Source Sans 3 et les dépendances d’exécution épinglées, dont tslib. Contrôlez value sous la forme d’un tableau d’objets { file } et recevez directement la FileList dans onChange ; ne lisez pas event.target dans ce rappel. Vérifiez le format et la taille avant d’accepter une sélection locale, gérez la liste vide émise lors de la suppression et gardez les textes d’aide et d’erreur visibles. Présentez l’aperçu intégré HTML comme une interprétation distincte clairement signalée. Aucune des deux implémentations ne téléverse de fichier ; la validation côté serveur, la progression et la confirmation du stockage nécessitent un véritable contrat de service côté serveur. ``` ## Système de design Suomi.fi Sources et périmètre L’aperçu intégré et l’archive ZIP téléchargeable constituent une interprétation OpenDesign HTML/CSS. L’exemple complet distinct React utilise suomifi-ui-components 18.0.0 et les contrats vérifiés de value et onChange de FileInput. Les deux exemples gèrent la sélection locale de fichiers ; aucun ne téléverse ni ne stocke un document sur un serveur. - Guide de FileInput Anatomie, rôles des textes, largeurs et comportement de sélection simple ou multiple. - Typographie Source Sans 3 et transition de version. - Composant Text Tailles de texte pour le corps, le petit texte et le texte d’introduction. - Source des jetons Valeurs réelles d’espacement, de couleur et de rayon. - Dépôt du composant Implémentation React, dépendances et licence MIT. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. - Implémentation de FileInput 18.0.0 vérifiée Source du paquet publié : dist/esm/core/Form/FileInput/FileInput.js. La valeur contrôlée et le rappel FileList ont été vérifiés avec cette version et mis à l’épreuve dans une compilation native distincte. ## Système de design Suomi.fi Ressources associées ### UNDP système de design Explorez les tokens de couleur et d’espacement publiés par l’UNDP, les onglets natifs utilisables au clavier et un exemple complet de lecture d’atelier avec progression locale de la révision. ### USWDS Associez les tokens d’espacement de USWDS, les rôles de thème, les tableaux sémantiques et les accordéons natifs dans une comparaison d’offres consultable. ### VA système de design Créez des parcours de service clairs avec les tokens sémantiques de VA et la liste de processus native Process List : des explications visibles pour chaque étape, des libellés d’état explicites et des détails complémentaires qui préservent la lisibilité du parcours principal. - [Référence de mise en œuvre](https://designsystem.suomi.fi/components/fileinput/) - [Source](https://designsystem.suomi.fi/components/text/) - [Source](https://github.com/vrk-kpa/suomifi-design-tokens/blob/master/src/tokens.json) - [Source](https://designsystem.suomi.fi/components/fileinput/) - [Consultez la spécification associée](https://github.com/vrk-kpa/suomifi-ui-components) - [Consultez la spécification associée](https://designsystem.suomi.fi/components/text/) - [Consultez la spécification associée](https://github.com/vrk-kpa/suomifi-design-tokens/blob/master/src/tokens.json) - [Consultez la spécification associée](https://designsystem.suomi.fi/components/fileinput/) - [Consultez la spécification associée](https://www.npmjs.com/package/suomifi-ui-components/v/18.0.0) - [Référence du code](https://designsystem.suomi.fi/styles) - [Consultez la spécification associée](https://designsystem.suomi.fi/styles) - [Référence du code](https://designsystem.suomi.fi/components/fileinput/) - [Référence du code](https://www.npmjs.com/package/suomifi-ui-components/v/18.0.0) - [Guide de FileInput Anatomie, rôles des textes, largeurs et comportement de sélection simple ou multiple.](https://designsystem.suomi.fi/components/fileinput/) - [Typographie Source Sans 3 et transition de version.](https://designsystem.suomi.fi/styles/typography/) - [Composant Text Tailles de texte pour le corps, le petit texte et le texte d’introduction.](https://designsystem.suomi.fi/components/text/) - [Source des jetons Valeurs réelles d’espacement, de couleur et de rayon.](https://github.com/vrk-kpa/suomifi-design-tokens/blob/master/src/tokens.json) - [Dépôt du composant Implémentation React, dépendances et licence MIT.](https://github.com/vrk-kpa/suomifi-ui-components) - [Implémentation de FileInput 18.0.0 vérifiée Source du paquet publié : dist/esm/core/Form/FileInput/FileInput.js. La valeur contrôlée et le rappel FileList ont été vérifiés avec cette version et mis à l’épreuve dans une compilation native distincte.](https://www.npmjs.com/package/suomifi-ui-components/v/18.0.0)