Komponentbibliotek
Designsystemet gjør det enklere for deg som utvikler å lage gode, universelt utformede brukeropplevelser som er like på tvers av appene våre. Denne guiden viser deg hvordan du kan starte å bruke det!
Installer pakker
Designsystemet er delt opp i et knippe forskjellige pakker, som lastes ned enkelthvis fra NPM. Du kan se en komplett oversikt over tilgjengelige pakker her.
Du kan bruke yarn eller npm til å innstallere pakkene - det er opp til prosjektet ditt. Har prosjektet ditt en yarn.lock, bruker du yarn add, og har du package-lock.json, så bruker du npm.
Velg gjerne det du bruker i prosjektet ditt i innstillingsmenyen oppe i høyre hjørne.
Hvilke pakker trenger jeg?
Det avhenger av hva du skal lage, men en god start kan være disse:
npm install @entur/tokens @entur/typography @entur/layout @entur/button @entur/formHvorfor ikke bare én pakke?
Når man har én pakke, har man også bare én versjon å forholde seg til - og det kan skape noen utfordringer etterhvert som designsystemet modnes. Ved å dele opp i flere pakker med uavhengige versjonering, kan man få oppgradert en bugfiks på knappene sine, uten at man trenger å oppgradere andre eventuelle breaking changes som har skjedd siden sist du oppdaterte avhengigheten din.
En annen fordel er at man ikke inkluderer mer kode enn man trenger, som kan ha en positiv effekt på mengden JavaScript og CSS ved å kun ha de komponentenene og den stylingen man behøver.
Det er litt mer arbeid å komme i gang med nye prosjekter, men vedlikeholdet av applikasjonene blir enklere.
Inkluder CSS
Du kan inkludere CSSen i hver pakke i prosjektet ditt på den måten som passer best for deg.
Du kan importere CSS-filen i en .scss eller .less fil med et @import statement:
@import '~@entur/button/dist/styles.css';
Om du bruker webpack, kan du bruke en loader (her er en fin artikkel som guider deg gjennom dette) til å importere det rett i JavaScripten din.
import '@entur/button/dist/styles.css';
React-komponenter
Hver av pakkene kommer med sine egne universelt utformede React-komponenter, som gjør det enkelt for React-utviklere å lage komplette apper. 'Du finner API-dokumentasjonen for alle komponentene her'.
Typer
Per i dag leveres alle pakker med komplette TypeScript-typings.
Typene for alle komponentene er eksportert på toppnivå, og kan importeres for å brukes videre i egen kode.
De er på formen KomponentnavnProps, så eksempelvis så har komponenten Dropdown typene eksponert via DropdownProps.
Exports
Designsystemets pakker benytter seg kun av named exports. Dette gjør at du alltid vil importere komponenter og funksjoner slik:
import { EnKomponent, useEnHook } from '@entur/en-pakke';
Du vil med andre ord aldri se default exports.
Spørsmål?
Hvis du har spørsmål, ta kontakt på #talk-designsystem på Slack. Hvis du mangler tilgang til dokumentasjon (skisser og collections) i Figma, kontakt Sergio Haisch.
Kom i gang med å bidra!
Designsystem-teamet trenger så mye hjelp de kan få - både med å skrive dokumentasjon, lage eksempler, skrive tester, finne bugs og fikse dem.
Om du har tid til å gjøre det selv, kan du lage et pull request. Om du ikke har tid, kan du lage et issue på Jira. Om du bare lurer på noe, ta kontakt på #talk-designsystem på Slack.