designsystemet
1.0.0
O DesignSystemet é uma coleção de elementos importantes de design, componentes e padrões que podem ser usados para criar serviços públicos.
Nosso objetivo é criar experiências consistentes e amigáveis em soluções digitais para serviços públicos, tornando-os mais eficientes e confiáveis.
Storybook - Visualizar para componentes do React.
Storefront - Documentação geral sobre o sistema de design.
Tema - construtor de temas.
@digdir/designsystemet - CLI para DesignSystemet.
@digdir/designsystemet-theme - Temas para DesignSystemet.
@digdir/designsystemet-css - estilo para componentes.
@digdir/designsystemet-react - React Implementação de componentes do DesignSystemet.
Siga estas etapas para começar com os componentes do React.
Dependendo de suas necessidades e pilha de tecnologia, instale os pacotes relevantes
npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme
npm i @digdir/designsystemet-react Você pode criar seu próprio tema para usar com os pacotes do DesignSystemet, indo ao nosso construtor de temas.
O tema do DesignSystemet é definido usando o design-tokens. Isso é feito para que você possa usar o Token Studio para sincronizar seu tema no código com o kit de interface do usuário do DesignSystemet, além de fornecer flexibilidade futura.
Execute npx @digdir/designsystemet tokens build para criar arquivos CSS para o seu tema personalizado (do design-Tokens). Usando seu próprio arquivo de tema CSS construído, você pode pular usando o pacote @digdir/designsystemet-theme .
Você é livre para usar qualquer família de fontes com os componentes.
Os componentes são projetados e desenvolvidos usando a fonte inter, para que as variações possam ocorrer se uma fonte diferente for usada.
Adicione a tag <link> em <head> e defina font-family como Inter no seu arquivo CSS global.
As font-feature-settings adicionam uma cauda ao LOWERCase L 's.
< 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 */
} Se você optar por instalar a fonte de uma maneira diferente, lembre -se de incluir os pesos da fonte 400 , 500 e 600 .
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 e @digdir/designsystemet-css só precisam ser importados uma vez.
Como os nomes de cores dependem de qual tema está sendo usado, você deve adicionar o seguinte ao seu tsconfig.json para usar todas as suas cores nos componentes que possuem um suporte data-color :
@digdir/designsystemet-theme {
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-theme/colors.d.ts"
]
} ,
} O comando da CLI designsystemet tokens build produzirá um arquivo de colors.d.ts para o diretório de saída escolhido. No exemplo, substitua <your-path> pelo caminho real que você usou ao executar o comando.
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"<your-path>/colors.d.ts"
]
} ,
} Você pode querer dicas do editor para atributos de data-color e data-size em elementos HTML como <span> ou <div> , pois esses atributos podem afetar os componentes aninhados nesses elementos.
Isso requer o aumento dos tipos internos do React e, portanto, é optado. Se você quiser isso, adicione o seguinte ao seu tsconfig.json :
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-react/react-types.d.ts"
]
} ,
} Saiba como você pode contribuir para este projeto lendo nosso Código de Conduta e Guia Contribuindo.
Temos a sorte de ter um grande grupo de pessoas que ajudam no sistema de design.
Agradecemos ao Chromatic por fornecer a plataforma de teste visual que nos ajuda a revisar as mudanças na interface do usuário e a capturar regressões visuais.
