Installasjon
Bruk
Komponentene kommer i både CJS og ESM format. Dette er noe prosjektet ditt vanligvis håndterer automatisk. Hvis dette ikke funker kan man manuelt styre dette og ta gjerne kontakt slik at vi kan forbedre løsningen!
Alle react-pakkene er også tree-shakable slik at man bare får med den koden man trenger. Unngå derfor slike imports om mulig: import * as navds from "@navikt/ds-react".
API
Alle komponentene er implementert med React forwardRef . Dette lar deg sende ref som prop hvis du vil implementere custom logikk. Eks her der knappen vil få fokus ved sidelasting.
De fleste komponenter extender typen til html-elementet den bruker. Dette gir deg typesjekking for logikk som i eksemplet over. Man kan se hvilken type hver komponent extender ved å se på ref i komponenten sin prop-tabell. Flere komponenter bruker også overridablecomponent, noe som props-seksjonene vil vise.
Styling
Styling for komponentene er ikke integrert i react-koden. Derfor må man selv huske å importere @navikt/ds-css og @navikt/ds-css-internal i prosjektet slik at stylingen alltid blir lastet. For dette vil man ofte ikke trenge en egen loader, da den består av ren CSS. Men noen løsninger vil fortsatt kreve eksemplevis css-loader. Stylingen er heller ikke prefikset, noe som blir opp til prosjektet ditt å løse med eksempelvis postcss + autoprefikser.
Kjernepakken @navikt/ds-css består av all komponentstylingen vår, fonter, diverse css-resets, print-tilpassninger, alle css-variablene våre fra @navikt/ds-tokens og normalize.css v8 .
Fontlasting
Fonten vi bruker bruker blir lastet fra CDN som tilsier at man må gjøre noen tilpasninger i løsningen sin.
Vi setter font-display: swap, som gjør at en fallback-font vil bli lastet når man ikke får tak i ønsket font raskt nok. For å unngå FOUT anbefaler vi at man legger til en link-tag med preload i document-head. Kan lese mer om dette i denne web-dev demoen.
Vi har også valgt å bruke den oppdaterte versjonen av Source Sans Pro, som nå heter Source Sans 3. I kode importeres den fortsatt som font-family:"Source Sans Pro" slik at den fortsatt er bakoverkompatibel, og ikke vil være noe man trenger å oppdatere selv hvis man manuelt satt font-family tidligere.
Løsningen din sin content security policy må også oppdateres til å tillate font-src fra cdn.nav.no.
Ikoner
Ikonpakken vår tilbyr over 400 ikoner, flere av dem i vanlig og filled versjon. De kan tas i bruk som egne react-komponenter, eller direkte som SVG hvis det trengs.
Width og height er begge satt til 1em på ikonene. Dette gjør det lett å inline ikonene med tekst, men man må selv justere størrelsen når man ønsker det. Vi anbefaler for det meste å bruke 24px ikoner der det er mulig.
Vi anbefaler også å bruke title-proppen om mulig ovenfor aria-label, da dette gir en bedre opplevelse for brukere av skjermleser.