Komponentbibliotek

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:

Hvorfor 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

For at komponentene skal se riktige ut, må du inkludere CSS-filene fra pakkene du bruker. Dette bør gjøres på et globalt nivå i applikasjonen din (f.eks. i App.tsx, index.js, eller en global .scss-fil) for å sikre at stilene er tilgjengelige i hele prosjektet.

Hvordan importere

Du kan importere CSS direkte i JavaScript eller TypeScript (anbefalt for moderne prosjekter):

import '@entur/button/dist/styles.css';
...

Eller i en CSS/SCSS-fil:

@import '@entur/button/dist/styles.css';

@use '@entur/button/dist/styles.css' as *;

Riktig rekkefølge

For å unngå uventede stilkonflikter er det viktig å importere pakkene i riktig rekkefølge. Her er den anbefalte rekkefølgen for alle pakkene:

@import '@entur/a11y/dist/styles.css';
@import '@entur/grid/dist/styles.css';
@import '@entur/icons/dist/styles.css';
@import '@entur/tab/dist/styles.css';
@import '@entur/typography/dist/styles.css';
@import '@entur/typography/beta/styles';
@import '@entur/layout/dist/styles.css';
@import '@entur/loader/dist/styles.css';
@import '@entur/expand/dist/styles.css';
@import '@entur/button/dist/styles.css';
@import '@entur/alert/dist/styles.css';
@import '@entur/menu/dist/styles.css';
@import '@entur/fileupload/dist/styles.css';
@import '@entur/modal/dist/styles.css';
@import '@entur/tooltip/dist/styles.css';
@import '@entur/form/dist/styles.css';
@import '@entur/chip/dist/styles.css';
@import '@entur/datepicker/dist/styles.css';
@import '@entur/travel/dist/styles.css';
@import '@entur/table/dist/styles.css';
@import '@entur/dropdown/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.