Gå til hovedinnhold
KOM I GANG

For utviklere

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.

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/buttons @entur/form

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 vi sender til brukerne våre.

Det er litt mer arbeid å komme i gang med nye prosjekter, men vedlikeholdet av applikasjonene våre 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 på null komma niks. Du vil finne API-dokumentasjonen under /komponenter.

Hva med <insert-rammeverk-her>?

Selv om vi i dag bare støtter React, er vi åpne for å støtte andre rammeverk i fremtiden. Vi ser for oss at man da importerer fra @entur/pakkenavn/vue eller @entur/pakkenavn/native, og bruker APIer som ser så like ut som mulig det vi har for React.

Vi har ikke gjort noe arbeid her enda, fordi det ikke er flere teams internt som bruker andre rammeverk enn React. Det ville bare vært en omvei for app-teamet, dersom de måtte gjøre endringene sine i designsystemet for at det bare er de selv som skal konsumere det. Når vi får flere konsumenter av disse alternative rammeverkene, kan vi begynne å implementere komponenter for disse også.

Typer

Per i dag leveres alle pakker med komplette TypeScript typings. Vi vil prøve å få på plass Flow-types og vanlige prop types også på sikt, slik at dere får best mulig utvikleropplevelse uansett hvilket typesystem dere bruker.

Alle typer er eksportert på toppnivå, og kan importeres for å brukes videre i egen kode.

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. Vi gjør dette så du slipper å gjette hva nettopp denne pakken bruker.

Spørsmål?

Hvis du har spørsmål, eller sitter fast, ta kontakt på #talk-designsystem på Slack - vi er som regel raske til å svare. Hvis du mangler tilgang til dokumentasjon (skisser og collections) i Abstract, kontakt Sara Johansson.

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.