For utviklere

Som utvikler samarbeider du med designer for å best mulig sikre at dere følger prinsippene i designsystemet. Videre ser du hvordan du kommer i gang for å bruke designsystemet når du jobber.

Legg til komponentbiblioteket i prosjektet

CSS med fargekoder, brekkpunkter og fonter finner man i pakken @skatteetaten/ds-core-designtokens og den vil du ha med som et miniumum. I tillegg så installerer du de npm-pakkene som innholder komponentene du har bruk for. Det finnes avhengigheter på tvers av npm-pakkene, men det tas hånd om av de pakkene du bruker. For eksempel bruker IconButton-komponenten i ds-buttons ikoner fra ds-icons, men du behøver bare å importere ds-buttons i ditt prosjekt.

npm install @skatteetaten/ds-core-designtokens@1.6.0 @skatteetaten/ds-buttons@1.6.0

Merk: Bruk låst versjon av komponenten slik som ds-forms@1.2.3 inntil videre. Vi har for tiden problemer med byggesystemet som fører til at latest tag henter peker til feil npm-pakke. Dette gjelder også hvis man ikke spesifiserer versjonsnummer.
Ta så i bruk komponentene i applikasjonen din (App.js):

import '@skatteetaten/ds-core-designtokens/index.css';

import { Button } from '@skatteetaten/ds-buttons';

export default App = () => (

  <Button variant='primary'>

    Eksempelknapp

  </Button>

);

Migrering fra Legacy-system

Det forrige Designsystemet bygger på Microsofts Fluent UI, og vi faser det gradvis ut til fordel for det nye.

Fluent UI er stor og tung, og går utover ytelsen. I tillegg tar det altfor lang tid fra når vi rapporterer inn feil, til Microsoft får fikset feilen.

Dersom du bruker legacy-Designsystemet, råder vi på det sterkeste at du faser ut det gamle, og erstatter med det nye.

For hvert tilsvarende komponent som legges til i det nye systemet, vil det legges til en migreringsguide i dokumentasjonen av den gamle, som forklarer hvordan du gjør dette skiftet.

Dersom du trenger funksjonalitet som det nye systemet ikke har på plass ennå, må du belage deg på å kombinere det nye systemet med legacy-systemet.

Designtokens ved samtidig bruk av legacy- og nytt Designsystem

Når du bruker designtokens fra Designsystemet i kombinasjon med legacy-Designsystemet, kan det oppstå uønsket overskriving av css-verdier på root-nivå. Dette gjelder bla line-height som nå blir satt til 1.5. For å hindre at ny line-height-verdi blir satt kan du bruke følgende kodesnutter:

import '@skatteetaten/ds-core-designtokens/index.css';
import './_reset-default.css';

I filen _reset-default.css legger man inn følgende kode:

:root,
:host {
  line-height: normal;
}

Se også artikkelen Bruke designtokens for flere detaljer rundt bruken av designtokens.

Vi har også noen detaljer knyttet til testoppsett (kun tilgjengelig for interne).