@byggforsk/fundament
v0.1.11
Published
Fundament React-komponenter basert på Designsystemet
Readme
🧱 Kom i gang
Følg disse stegene for å komme i gang med React-komponentene.
1. Installer pakken
npm i @byggforsk/fundamentDette installerer alt du trenger – React-komponenter, CSS og tema.
Typescript
Dersom du bruker Typescript, sørg for at du har typescript >= 3.8 i devDependencies:
npm i typescript --save-dev2. Font
Du kan fritt bruke hvilken som helst font-familie med komponentene.
Komponentene er designet og utviklet med Inter fonten, så variasjoner kan forekomme dersom du bruker en annen font.
Legg til Inter fonten (valgfritt)
Legg til <link> taggen i <head>, og sett font-family til Inter i din globale css fil.
font-feature-settings legger til en hale på små L'er. For optimal tilgjengelighet anbefaler vi også:
- Minimum skriftstørrelse på 16px for brødtekst
- Kontrastforhold på minst 4.5:1 mellom tekst og bakgrunn
- Test med skjermlesere som VoiceOver og NVDA for å sikre semantisk korrekt HTML
HTML
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>CSS
body {
font-family: 'Inter', sans-serif;
font-feature-settings: 'cv05' 1; /* Aktiverer hale på små l-er for å unngå forveksling med stor I og tallet 1 */
}Dersom du velger å installere fonten på en annen måte, husk å inkludere fontvektene 400, 500 og 600.
3. Polyfill
Designsystemet bruker popover i enkelte komponenter. Dette apiet er klassifisert som Baseline: Newly available fra april 2024, da Firefox som siste nettleser la det til. For å sikre at popover fungerer for alle brukere, inkludert de med eldre nettleserversjoner:
Installer Popover-Polyfill:
npm i @oddbird/popover-polyfillImporter polyfilla i entry-point (f.eks. index.js):
import '@oddbird/popover-polyfill';4. Bruk et React-komponent
import '@byggforsk/fundament/styles.css';
import { Button } from '@byggforsk/fundament';
<Button variant='secondary'>Jeg er en knapp!</Button>;@byggforsk/fundament/styles.css må kun importeres én gang i applikasjonen, typisk i din entry-fil (f.eks. main.tsx eller App.tsx).