Système de design Det Fælles Designsystem.

Thème DKFDS et périmètre d’implémentation du système de design Det Fælles Designsystem

Choisissez délibérément Borger.dk ou Virk

Det Fælles Designsystem distribue des feuilles de style distinctes pour Borger.dk et Virk. Cet exemple utilise la version 11.3.0 de dkfds et la feuille de style Borger.dk, avec ses commandes principales vertes caractéristiques et sa typographie IBM Plex Sans. Il ne se contente pas de changer la couleur d’un seul bouton en prétendant appliquer un thème complet. Le choix d’un autre thème doit être une décision d’implémentation délibérée.

N’attribuez pas le tri original à la bibliothèque

Les recommandations publiées pour les tableaux fournissent le balisage et les styles, mais confient explicitement à l’application la gestion du tri et de la recherche. L’aperçu inclut une implémentation originale complète de ces deux fonctions. Cette distinction est importante : importer uniquement DKFDS JavaScript ne transforme pas un tableau quelconque en vue de données consultable et triable.

Valeurs Sass et rythme de base du système de design Det Fælles Designsystem

Consultez les cartes source comme des cartes source

La référence consigne les valeurs Sass réelles plutôt que des noms --token inventés. La carte des espacements repose sur une base de 8px et utilise des clés comme 305 pour 12px et 405 pour 20px. Le développeur doit utiliser l’assistant de la bibliothèque ou les conventions utilitaires correspondantes au lieu d’interpréter ces nombres comme des pixels. Le tableau des paramètres rend cette correspondance visible.

Respectez la convention de taille de police racine

La taille de police racine est de 62.5 %, tout en respectant les préférences de police du navigateur. La correspondance des tailles de police source inclut donc 1.6rem pour la taille standard du corps de texte, selon la valeur par défaut habituelle du navigateur. Copier une valeur en rem dans un environnement où la taille de police racine est différente peut modifier considérablement le résultat. L’exemple charge la feuille de style réelle afin de conserver le même contexte typographique et les mêmes espacements.

Det Fælles Designsystem Structure sémantique des tableaux du système de design

Utilisez une légende et définissez clairement le rôle des colonnes

Le tableau comparatif des ressources comporte une légende, des en-têtes de colonnes et des cellules de données ordinaires. Les titres, les formats, les durées en minutes et les objectifs figurent dans des colonnes distinctes, car les utilisateurs comparent ces caractéristiques. Les durées de lecture sont des estimations fournies à titre d’exemple ; elles ne correspondent ni à des mesures de trafic ni à des statistiques de performance. La légende précise cette limite sans modifier la structure du tableau.

• Fournissez une légende utile et des en-têtes de colonnes.
• Conservez les données numériques sous forme de nombres dans le modèle de l’application.
• Donnez un nom à la zone de défilement accessible au clavier sur les écrans étroits.

Limitez le défilement mobile au tableau

Le tableau triable se trouve dans une zone de défilement adaptative pouvant recevoir le focus. Sa largeur minimale préserve la lisibilité des colonnes sans faire déborder la page de la fenêtre d’affichage. À faible largeur, l’exemple ne transforme pas le tableau triable en cartes sans rapport avec sa structure, ce qui nécessiterait un autre modèle de navigation et de commandes de tri. Les utilisateurs du clavier peuvent placer le focus sur la zone de défilement.

Det Fælles Designsystem État du tri et comparaison numérique du système de design

Ne conservez qu’un seul ordre de tri actif

La colonne des titres commence par ordre croissant. Une nouvelle activation du même en-tête inverse le sens du tri ; sélectionner la colonne des minutes lance un tri croissant. Seul l’en-tête actif reçoit aria-sort, et l’instruction masquée de chaque bouton décrit l’action suivante. La flèche visible reflète le même état : elle n’est pas une décoration indépendante.

Comparez les nombres comme des nombres

Det Fælles Designsystem Recherche après validation et gestion de l’absence de résultats dans le système de design

Lancez la recherche à la validation

La recherche filtre tous les attributs affichés lorsqu’elle est validée, y compris en appuyant sur Entrée. La simple saisie ne remplace pas le tableau affiché au lecteur. Le statut indique le nombre de résultats visibles et l’ordre de tri actuel, tandis que la requête reste dans le champ. Cet exemple suit le modèle de recherche après validation qui a été choisi.

Réinitialisez la recherche sans perdre l’ordre de tri

Une recherche sans résultat affiche un message proposant une solution. La réinitialisation rétablit toutes les lignes et place le focus dans le champ de recherche, tout en conservant la colonne et le sens de tri sélectionnés. La recherche et le tri restent donc des variables d’état distinctes. Aucun état de chargement artificiel n’est nécessaire, puisque le jeu de données complet de cinq lignes est déjà disponible localement.

Det Fælles Designsystem Intégration complète et fonctionnelle du système de design

Conservez les chemins des ressources de distribution lors de leur chargement

La table d’exportation du paquet 11.3.0 expose son entrée JavaScript, et non des importations profondes arbitraires CSS. La configuration copie la distribution dans public/dkfds et lie la feuille de style depuis index.html, en préservant les chemins relatifs des polices et des images. Enregistrez main.js et denmark.css fournis dans le même répertoire que cette page. L’aperçu local intègre ces mêmes ressources pour faciliter une vérification fiable.

1. Installez dkfds 11.3.0 et copiez sa distribution dans public/dkfds.
2. Utilisez la page HTML fournie pour charger la feuille de style Borger.dk.
3. Enregistrez l’entrée complète et CSS, puis lancez l’application locale.
4. Vérifiez le tri numérique, la recherche après validation, la réinitialisation et le défilement interne sur mobile.

Vérifiez tout le parcours de comparaison

Triez les minutes dans les deux sens, envoyez une recherche sans résultat, puis réinitialisez. Recherchez « Template » et vérifiez qu’il ne reste que les deux lignes de modèles, dans l’ordre actuel. À la largeur d’un téléphone, faites défiler le tableau à l’intérieur de sa zone et vérifiez que la page elle-même ne déborde pas. La vérification confirme également que toutes les ressources fournies se chargent et qu’il n’y a aucune erreur dans le navigateur.

Exemples de composants du système de design Det Fælles Designsystem

// index.html loads /dkfds/css/dkfds-borgerdk.css from the copied distribution.
import './denmark.css';
const rows=[{name:'Content inventory',type:'Worksheet',minutes:25,note:'Map the purpose and owner of each section.'},{name:'Accessibility review',type:'Checklist',minutes:30,note:'Inspect keyboard use, reading order and clear labels.'},{name:'Research questions',type:'Template',minutes:15,note:'Separate assumptions from questions that need evidence.'},{name:'Decision summary',type:'Template',minutes:10,note:'Record a choice, its reason and what remains uncertain.'},{name:'Prototype walkthrough',type:'Guide',minutes:20,note:'Walk through one realistic task and note friction.'}];let key='name',direction=1,query='';document.getElementById('root').innerHTML=`<main><p class="eyebrow">DET FÆLLES DESIGNSYSTEM / ORIGINAL TABLE STUDY</p><h1>Find a planning resource</h1><p class="lead">Compare five authored resources. Search the full table or sort by title and estimated reading time.</p><form id="search-form"><label class="form-label" for="search">Search sample resources</label><div class="search-controls"><input class="form-input" id="search" type="search"><button class="button button-primary" type="submit">Search</button><button class="button button-secondary" id="reset" type="button">Reset</button></div></form><p id="count" role="status"></p><div class="table--responsive-scroll" tabindex="0" role="region" aria-label="Resource comparison table"><table class="table" id="resource-table"><caption>Original resource comparison; reading times are sample estimates</caption><thead><tr><th scope="col" id="name-head" aria-sort="ascending"><button class="button button-unstyled sort" data-key="name">Resource title <span class="arrow" aria-hidden="true">↑</span><span class="sr-only"> — sort descending</span></button></th><th scope="col">Format</th><th scope="col" id="minutes-head"><button class="button button-unstyled sort" data-key="minutes">Minutes <span class="arrow" aria-hidden="true">↕</span><span class="sr-only"> — sort ascending</span></button></th><th scope="col">Purpose</th></tr></thead><tbody id="rows"></tbody></table></div><section id="empty" hidden><h2>No matching resource</h2><p>Try a shorter word, a format such as Template, or reset the search.</p></section><aside><h2>About this table</h2><p>The Borger.dk theme and table styling are from DKFDS 11.3.0. Search and sorting are complete original JavaScript: the published table component does not implement them for you.</p><ul><li>Search is applied when you submit the form.</li><li>A selected column always has an active sort order.</li><li>On a narrow screen, scroll the table without moving the whole page.</li></ul></aside></main>`;const $=id=>document.getElementById(id);function render(){const list=rows.filter(r=>Object.values(r).join(' ').toLowerCase().includes(query)).sort((a,b)=>direction*(key==='minutes'?a.minutes-b.minutes:a.name.localeCompare(b.name)));$('rows').replaceChildren(...list.map(r=>{const tr=document.createElement('tr');[r.name,r.type,String(r.minutes),r.note].forEach(value=>{const td=document.createElement('td');td.textContent=value;tr.append(td)});return tr}));$('count').textContent=list.length+' of '+rows.length+' resources · sorted by '+(key==='name'?'title':'minutes')+' '+(direction===1?'ascending':'descending');$('empty').hidden=!!list.length;document.querySelectorAll('.sort').forEach(b=>{const active=b.dataset.key===key;active?b.parentElement.setAttribute('aria-sort',direction===1?'ascending':'descending'):b.parentElement.removeAttribute('aria-sort');b.querySelector('.arrow').textContent=active?(direction===1?'↑':'↓'):'↕';b.querySelector('.sr-only').textContent=' — sort '+(active&&direction===1?'descending':'ascending')})}$('search-form').addEventListener('submit',e=>{e.preventDefault();query=$('search').value.trim().toLowerCase();render()});$('reset').addEventListener('click',()=>{$('search').value='';query='';render();$('search').focus()});document.querySelectorAll('.sort').forEach(b=>b.addEventListener('click',()=>{direction=key===b.dataset.key?-direction:1;key=b.dataset.key;render()}));render();

body{margin:0}main{max-width:1160px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em}.lead{max-width:66ch}#search-form{margin:32px 0}.search-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.search-controls input{flex:1;min-width:180px;max-width:480px}#count{font-weight:600}.table--responsive-scroll{position:relative;max-width:100%;overflow:auto}.table{min-width:720px;width:100%}.table caption{text-align:left;font-weight:600;margin-bottom:16px}.table th:nth-child(1){width:25%}.table th:nth-child(2){width:15%}.table th:nth-child(3){width:16%}.arrow{margin-left:8px}.sort{white-space:nowrap}aside,#empty{padding:24px;margin-top:32px;background:#f1f1f1;border-left:4px solid #44831e}aside h2,#empty h2{margin-top:0}aside li{margin:8px 0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.search-controls{gap:12px}.search-controls input{flex-basis:100%;max-width:none}h1{font-size:34px}}

@media(max-width:480px){.search-controls input{min-width:0;width:100%}.search-controls .button{max-width:100%;white-space:normal}h1{overflow-wrap:anywhere}}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Planning resource comparison</title>
<link rel="stylesheet" href="/dkfds/css/dkfds-borgerdk.css">
</head>
<body><div id="root"></div><script type="module" src="/src/main.js"></script></body>
</html>