Sistema de design Det Fælles Designsystem.

Tema DKFDS e escopo de implementação do sistema de design Det Fælles Designsystem

Escolha Borger.dk ou Virk de forma deliberada

Det Fælles Designsystem distribui folhas de estilo separadas para Borger.dk e Virk. Este exemplo fixa a versão dkfds 11.3.0 e usa a folha de estilo do Borger.dk, com seus controles primários verdes característicos e texto em IBM Plex Sans. Não altera apenas a cor de um botão para apresentar isso como uma mudança completa de tema. Um tema diferente deve ser carregado como uma escolha deliberada de implementação.

Não atribua à biblioteca a ordenação original

As orientações publicadas para tabelas fornecem marcação e estilos, mas deixam explicitamente o comportamento de ordenação e busca a cargo da aplicação. A prévia inclui uma implementação original completa de ambos. Essa distinção importa: importar apenas o JavaScript do DKFDS não transforma qualquer tabela em uma visualização de dados com busca e ordenação.

Valores Sass e ritmo básico do sistema de design Det Fælles Designsystem

Interprete os mapas de origem como mapas de origem

A referência registra valores Sass reais, em vez de inventar nomes --token. O mapa de espaçamento usa uma base de 8px, com chaves como 305 para 12px e 405 para 20px. O desenvolvedor deve usar o auxiliar da biblioteca ou as convenções de utilitários correspondentes, em vez de tratar esses números como pixels literais. A tabela de parâmetros deixa o mapeamento visível.

Respeite a convenção de tamanho da fonte raiz

O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador. Por isso, o mapa de tamanhos de fonte de origem inclui 1.6rem para o tamanho padrão de texto pequeno/corpo, considerando o padrão habitual do navegador. Copiar um valor em rem para um ambiente com outro tamanho raiz pode alterar bastante o resultado. O exemplo carrega a folha de estilo real para manter consistentes o contexto tipográfico e o espaçamento.

Estrutura semântica de tabela do sistema de design Det Fælles Designsystem

Use uma legenda e defina claramente as funções das colunas

A comparação de recursos tem uma legenda, cabeçalhos de coluna e células de dados comuns. Títulos, formatos, minutos numéricos e finalidades ficam em colunas separadas, pois os usuários comparam esses atributos. Os tempos de leitura são estimativas ilustrativas, criadas para o exemplo, e não estatísticas medidas de tráfego ou desempenho. A legenda deixa esse limite claro sem alterar a estrutura da tabela.

• Inclua uma legenda útil e cabeçalhos de coluna.
• Mantenha os dados numéricos como números no modelo da aplicação.
• Identifique a região rolável e focável em telas estreitas.

Mantenha a rolagem em dispositivos móveis dentro da tabela

A tabela classificável fica em uma região responsiva de rolagem que pode receber foco. A largura mínima mantém as colunas legíveis, enquanto a página externa permanece dentro da área visível. O exemplo não transforma uma tabela classificável em cartões sem relação entre si em telas estreitas, pois isso exigiria outro padrão de navegação e controles de classificação. Usuários de teclado podem focar a região rolável.

Sistema de design Det Fælles Designsystem: estado de classificação e comparação numérica

Mantenha uma única ordenação ativa

A coluna de título começa em ordem crescente. Ativar o mesmo cabeçalho inverte a ordem; selecionar a coluna de minutos começa em ordem crescente. Somente o cabeçalho ativo recebe aria-sort, e a instrução oculta de cada botão descreve a próxima ação. A seta visível espelha o mesmo estado, sem funcionar como decoração independente.

Compare números como números

Sistema de design Det Fælles Designsystem: busca enviada e recuperação de resultados vazios

Aplique a consulta ao enviá-la

Ao enviar o formulário, a busca filtra todos os atributos exibidos, inclusive quando o usuário pressiona Enter. Apenas digitar não substitui a tabela enquanto a pessoa lê. O status informa a quantidade de resultados visíveis e a ordenação atual, enquanto a consulta permanece no campo. Esse comportamento segue o modelo de busca enviada escolhido para este exemplo.

Redefina a consulta sem perder a ordenação

Uma consulta sem resultados exibe uma mensagem para orientar a recuperação. A redefinição restaura todas as linhas e coloca o foco no campo de busca, mantendo a coluna e a direção de classificação selecionadas. Assim, busca e ordenação continuam sendo variáveis de estado separadas. Não há um estado artificial de carregamento, pois o conjunto completo de cinco linhas já está disponível localmente.

Sistema de design Det Fælles Designsystem: integração completa e funcional

Carregue os recursos da distribuição sem alterar os caminhos

O mapa de exportação do pacote 11.3.0 expõe sua entrada JavaScript, não importações profundas arbitrárias CSS. A configuração copia a distribuição para public/dkfds e vincula a folha de estilos em index.html, preservando os caminhos relativos das fontes e imagens. Salve main.js e denmark.css fornecidos ao lado dessa estrutura. A prévia local incorpora os mesmos recursos para permitir uma inspeção confiável.

1. Instale dkfds 11.3.0 e copie sua distribuição para public/dkfds.
2. Use a estrutura HTML fornecida para carregar a folha de estilos do Borger.dk.
3. Salve o arquivo completo e CSS e execute a aplicação local.
4. Verifique a ordenação numérica, a busca enviada, a redefinição e a rolagem interna em dispositivos móveis.

Verifique todo o fluxo de comparação

Ordene os minutos nos dois sentidos, envie uma consulta sem correspondências e redefina a busca. Pesquise por Template e confirme que restam apenas as duas linhas de modelos e que a ordem atual foi preservada. Na largura de celular, role a tabela internamente e confirme que a página não transborda. A verificação também confirma que todos os recursos incluídos são carregados e que não há erros no navegador.

Det Fælles Designsystem Exemplos de componentes do sistema de design

// 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>