Oppsett

Følg disse stegene for å komme i gang med bruk av Designsystemet i kode første gang.

1. Installer pakkene

Designsystemet består av flere kodepakker som du fritt kan velge mellom, avhengig av behov og preferanser. Du kan bruke pakkene sammen, eller bare plukke ut de delene som gir deg fart, samtidig som du beholder friheten til å kode selv der du ønsker det.

Vi anbefaler at du starter med @digdir/designsystemet-web og @digdir/designsystemet-css. Du kan også bruke @digdir/designsystemet-web uten @digdir/designsystemet-css hvis du allerede har egen styling, eller bare bruke CSS-pakken hvis du håndterer interaktivitet selv.

HTMLReact

2. Importer Javascript

HTMLReact

Importer @digdir/designsystemet-web i din hoved JavaScript fil.

Dette vil registrere alle web-komponenter og observers globalt, så du trenger bare å gjøre dette en gang.

Importer @digdir/designsystemet-react ved bruk av komponenter.

3. Importer CSS

Importer @digdir/designsystemet-css.

Les mer om CSS.

CSSJavaScript

4. Importer temaet

Designsystemet er laget for å være tematiserbart, og det er derfor viktig at du importerer ditt tema etter at du har importert @digdir/designsystemet-css.

Bygg ditt eget tema eller bruke standardtemaet; @digdir/designsystemet-css/theme.

Eget temaStandardtema

5. Bruk

Nå er du klar til å bruke Designsystemet i kode!

Alle komponenter har egen side i komponent-dokumentasjonen, vi anbefaler at du leser gjennom disse for å se hvordan du kan bruke komponentene.

Det er også anbefalt at du leser gjennom tilgjengelighets-sida.

• Bruk data-color-scheme="light | dark | auto" for å sette dark/light mode
  • tilsvarer Appearance › Color scheme i Figma
• Bruk data-size="sm | md | lg" for å sette størrelse på komponentene
  • tilsvarer Appearance › Size i Figma
• Bruk data-color for å sette farge på komponentene som du har definert for ditt tema
  • tilsvarer Appearance › Color i Figma

HTMLReact

Typescript

Designsystemet tilbyr typesikkerhet for flere data-attributter.

Installer type pakken og legg til typefilene i tsconfig.json for å få tilgang til disse.

HTMLReact

Font

Komponentene er designet og utviklet med Inter fonten (github.com), så variasjoner kan forekomme dersom du bruker en annen font. Dersom du velger å installere fonten på en annen måte enn altinncdn.no, husk å inkludere fontvektene 400, 500 og 600.

Tekstskalering som følger systeminnstillinger

I utgangspunktet skalerer de fleste nettlesere tekst basert på zoom og nettleser tekstinstillinger, men ikke systeminnstillinger. For å også respektere systeminnstillinger, legg til denne koden i <head>:

Legg til Inter fonten (valgfritt)

Legg til <link> taggen under i <head>, og sett font-family til Inter i din globale css fil.

Du kan bruke denne koden for å legge til fonten i <head>:

Konfigurasjon av fonten

Vi anbefaler sterkt at du legger til følgende i din globale CSS fil. font-feature-settings legger til en hale på små L'er.

Testing

Vi er opptatt av at komponentene skal fungere godt i ulike testoppsett. Designsystemet testes i JSDOM og HappyDOM, og gjennom Playwright i Chromium, Firefox og WebKit. Det vil alltid allikevel finnes rammeverk, testmiljøer og meta-rammeverk som håndterer asynkron uttegning eller enkelte edge cases på forskjellige måter.

Opplever du problemer med Designsystemet i ditt testoppsett, vil vi veldig gjerne høre om det. Meld fra via et GitHub-issue eller spør oss i vår åpne Slack.

Merk at ikke alt som støttes av nettlesere er implementert i miljøer med en kunstig DOM, som JSDOM og HappyDOM. I noen tilfeller kan du trenge konfigurasjon av testoppsettet ditt:

HappyDOM-oppsett

HappyDOM kan trenge støtte for arv mellom HTMLDocument og Document:

JSDOM-oppsett

JSDOM kan mangle støtte for enkelte metoder på HTMLDialogElement:

Rediger denne siden på github.com (åpnes i ny fane)