Skip to main content

Utvikler

Quick Start​

Kom raskt i gang med Indeks:

  1. Importer styling i CSS-filen din:

     @import url('https://cdn.sparebank1.no/indeks/css/0.3.1/index.css')

  2. Legg til ix-body-klassen på øverste nivå i applikasjonen din:

    <body class="ix-body">

  3. Last inn web components fra CDN i index.html:

    <script type="module" src="https://cdn.sparebank1.no/indeks/web/0.3.1/index.js"></script>

  4. Så er du klar til å bruke grunnleggende styling og designtokens! Det du kan gjøre nå er:

  5. Installer React-komponenter (kun for React/Next.js):

    note

    Bruker du Astro, Svelte, Vue eller vanilla HTML er web components fra steg 3 alt du trenger — hopp over dette steget.

    React-komponentene krever at web components (steg 3) er lastet inn. @sb1/indeks-react er et tynt lag oppå @sb1/indeks-web.

    npm install @sb1/indeks-react
    npm install --save-dev @sb1/indeks-web  # kun TypeScript-typer, runtime lastes fra CDN (steg 3)
Fonter

Hvis du ikke bruker monorepo-generatoren, må du også legge til fonter. Se detaljert installasjon nedenfor.

CSS Reset

Indeks bruker en avart av reset.css for å sikre et konsistent utgangspunkt for styling på tvers av nettlesere, i motsetning til FFE, som bruker normalize.css. Det betyr at det kan være noen forskjeller i grunnleggende styling mellom FFE og Indeks, blant annet har ikke listeelementer bullet points som standard.

Detaljert installasjon​

For å komme i gang med Indeks er det 4 deler du trenger å sette opp i prosjektet ditt:

  1. Fonter
  2. Styling (tokens, utils og komponentstyling)
  3. Web components (atferd som brukes på tvers, også i React)
  4. Komponenter (React-pakken)

1. Fonter​

For å sette opp prosjektet ditt med SB1-fonter må du sørge for at fontene lastes inn. Dette legges til automatisk ved bruk av generatoren i monorepo. Hvis appen ikke er generert opp, legg til følgende i <head> i HTML-dokumentet ditt:

<link rel="stylesheet" href="https://cdn.sparebank1.no/fonts/v1.css" />
info

Uten fontene vil tekst vises i nettleserens standardfont i stedet for SB1s designprofil.

2. CSS​

Installer styling ved å importere CSS-filen fra vår CDN inn i hoved-CSS-filen din:

 @import url('https://cdn.sparebank1.no/indeks/css/0.3.1/index.css')
info

Siste versjon er 0.3.1. Se releases for alle versjoner.

Indeks tilbyr også styling via npm-pakken @sb1/indeks-css, men vi anbefaler CDN. CDN-URL-en er den samme på tvers av SB1-applikasjoner, slik at nettleseren kan gjenbruke samme cachede CSS — brukere som allerede har besøkt en annen SB1-app slipper å laste ned stylingen på nytt.

Hva får du med CSS-pakken?

  • Komponentstyling - styling for hele komponenter. Brukes automatisk av React-komponentene, eller kan brukes direkte på HTML-elementer.
  • Utility-klasser - nyttige hjelpeklasser for små justeringer som margin, padding og layout. Inspirert av TailwindCSS.
  • Tokens - designtokens for farger, spacing og border mm. Se alle tokens. Brukes når du skal lage egne komponenter.

3. Web components​

Web components fra Indeks er nødvendige i alle prosjekter — også React-prosjekter. @sb1/indeks-react er et tynt lag oppå web components (f.eks. rendrer Field et <ix-field>), så uten at web components er lastet inn vil React-komponentene ikke virke som forventet.

Last inn scriptet fra CDN i index.html:

<script type="module" src="https://cdn.sparebank1.no/indeks/web/0.3.1/index.js"></script>

Etter at scriptet er lastet er komponentene tilgjengelige som HTML-elementer:

<ix-field>
    <label>E-postadresse</label>
    <input type="email" name="email" />
    <span data-field="error"></span>
</ix-field>
Hvorfor CDN + devDependency?

Runtime-koden lastes fra CDN (deles på tvers av SB1-applikasjoner), mens npm-pakken kun brukes til TypeScript-typer ved utvikling. Det er derfor pakken installeres som devDependency i stedet for en vanlig dependency — ingenting av den havner i den bygde applikasjonen.

TypeScript-typer​

CDN-scriptet inneholder ingen typedeklarasjoner. Installer npm-pakken som devDependency for å få typer:

npm install --save-dev @sb1/indeks-web

Pakken registrerer typene globalt via HTMLElementTagNameMap og JSX — ingen import nødvendig i koden. TypeScript og JSX-editorer vil da gi autocomplete og typesjekk for <ix-field> og de andre komponentene. Dette gjelder både for rene web component-prosjekter og for React-prosjekter (React-komponentene rendrer <ix-*>-elementer internt).

4. Komponenter (React)​

React-pakken krever at både CSS-en og web components-scriptet fra steg 2 og 3 er lastet inn — @sb1/indeks-react er et tynt lag som wrapper @sb1/indeks-web.

Installer pakken:

npm install @sb1/indeks-react
npm install --save-dev @sb1/indeks-web

Importer komponentene der du skal bruke dem:

import { Button, Text } from '@sb1/indeks-react';

Nå kan du begynne å bruke Indeks-komponenter i React-prosjektene dine:

function App() {
    return (
        <div>
            <Text>Innhold</Text>
            <Button>Klikk meg</Button>
        </div>
    );
}

Hva nå?​

Nå som du har satt opp Indeks kan du:

Teknisk struktur​

De fleste trenger ikke å forholde seg til dette, men du kan lese videre hvis du er spesielt interessert.

Indeks er bygget opp av 5 pakker:

  • indeks-tokens
  • indeks-utils
  • indeks-css
  • indeks-web
  • indeks-react

Vi har også en mappe med dokumentasjonen og en eksempel-app vi bruker til å teste.