designsystemet
1.0.0
DesignSystemet es una colección de elementos de diseño importantes, componentes y patrones que se pueden utilizar para construir servicios públicos.
Nuestro objetivo es crear experiencias consistentes y fáciles de usar en soluciones digitales para servicios públicos, haciéndolas más eficientes y confiables.
Libro de cuentos: vista previa para los componentes React.
Tienda de la tienda - Documentación general sobre el sistema de diseño.
Tema - Tema Builder.
@digdir/designsystemet - CLI para DesignSystemet.
@digdir/designsystemet-theme - Temas para DesignSystemet.
@digdir/designsystemet-css - Styling para componentes.
@digdir/designsystemet-react - React Implementación de los componentes DesignSystemet.
Siga estos pasos para comenzar con los componentes React.
Dependiendo de sus necesidades y pila de tecnología, instale los paquetes relevantes
npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme
npm i @digdir/designsystemet-react Puede crear su propio tema para usar con los paquetes DesignSystemet yendo a nuestro builder de temas.
El tema de DesignSystemet se define utilizando Tokens de diseño. Esto se hace para que pueda usar Token Studio para sincronizar su tema en código con el kit de interfaz de usuario de Figma de DesignSystemet, además de proporcionar flexibilidad futura.
Ejecute npx @digdir/designsystemet tokens build para crear archivos CSS para su tema personalizado (de los tokens de diseño). Usando su propio archivo de tema CSS construido, puede omitir el paquete @digdir/designsystemet-theme .
Usted es libre de usar cualquier fuente de fuentes con los componentes.
Los componentes se diseñan y desarrollan utilizando la fuente entre las variaciones, pueden ocurrir variaciones si se usa una fuente diferente.
Agregue la etiqueta <link> en <head> , y configure font-family en Inter en su archivo CSS global.
Los font-feature-settings agregan una cola a L 's minúsculas.
< 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 */
} Si elige instalar la fuente de una manera diferente, recuerde incluir los pesos de fuentes 400 , 500 y 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 y @digdir/designsystemet-css solo necesita importarse una vez.
Debido a que los nombres de color dependen de qué tema se use, debe agregar lo siguiente a su tsconfig.json para usar todos sus colores en los componentes que tienen un accesorio data-color :
@digdir/designsystemet-theme {
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-theme/colors.d.ts"
]
} ,
} El comando CLI designsystemet tokens build emitirá un archivo colors.d.ts al directorio de salida elegido. En el ejemplo, reemplace <your-path> con la ruta real que usó al ejecutar el comando.
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"<your-path>/colors.d.ts"
]
} ,
} Es posible que desee sugerencias de editor para los atributos data-color y data-size en elementos HTML como <span> o <div> , ya que estos atributos pueden afectar los componentes anidados dentro de estos elementos.
Esto requiere aumentar los tipos incorporados de React y, por lo tanto, es opcial. Si desea esto, agregue lo siguiente a su tsconfig.json :
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-react/react-types.d.ts"
]
} ,
} Aprenda cómo puede contribuir a este proyecto leyendo nuestro Código de Conducta y Guía de contribución.
Tenemos la suerte de tener un gran grupo de personas que ayudan con el sistema de diseño.
Gracias a Chromatic por proporcionar la plataforma de pruebas visuales que nos ayuda a revisar los cambios de interfaz de usuario y atrapar regresiones visuales.
