Tekststrenger i kode

• Alle tekstene ligger i én felles katalog som React og Elements deler.
• Du bytter ut tekster globalt med setPktStrings(), eller per komponent med strings.
• Tekstene er vanlige strenger, så du kan legge dem i egne språkfiler.

Slik er tekstene bygd opp

Katalogen har to nivåer: et namespace og en nøkkel. Namespace er som regel navnet på komponenten, og nøkkelen sier hva teksten brukes til.

{
  searchinput: {
    placeholder: "Søk…",
    submit: "Søk",
  },
}

Du trenger aldri å oppgi hele katalogen. Tekstene du ikke nevner, beholder verdien de har fra før.

Bytt ut alle tekstene

Skal du oversette hele designsystemet, eller endre mange tekster på tvers av løsningen, samler du dem i ett objekt og sender det til setPktStrings().

Legg gjerne tekstene i en egen fil per språk:

// strings/en.js
export const en = {
  generic: { from: 'From', to: 'To', close: 'Close' },
  forms: {
    optional: 'Optional',
    required: 'Required',
    readMore: 'Read more',
  },
  validation: {
    valueMissing: 'This field is required',
    rangeUnderflowMin: 'The value must be at least {min}.',
  },
  searchinput: { placeholder: 'Search…', submit: 'Search' },
  // … resten av namespacene
}

Kall setPktStrings() én gang når applikasjonen starter:

Kallet gjelder både React og Elements på samme side, og komponenter som allerede er tegnet opp, blir oppdatert. Bruker du begge pakkene, holder det med ett kall.

Du kan kalle setPktStrings() flere ganger, også mens brukeren er inne på siden. Kallene legges oppå hverandre. Skal du bytte til et språk der ikke alle tekstene er oversatt, bør du kalle resetPktStrings() først. Ellers blir tekstene fra det forrige språket liggende igjen.

Se hvilke tekster som finnes

Alle nøklene med de innebygde verdiene ligger i pktStringsNb. Bruk den som fasit når du lager en språkfil:

Bytt ut teksten i én komponent

Alle komponenter som viser tekst, tar imot strings. Denne teksten vinner over den globale.

I Elements kan du sette strings som JSON i attributtet, slik som over, eller som en egenskap i JavaScript:

document.querySelector('#sok').strings = {
  searchinput: { placeholder: 'Finn ansatt…' },
}

Består komponenten av flere elementer, sørger Punkt for at teksten når fram til elementene inni.

Bytt ut teksten i en del av siden

I React kan du pakke inn en del av siden med PktStringsProvider. Da gjelder tekstene bare der inne.

import { PktStringsProvider } from '@oslokommune/punkt-react'

;<PktStringsProvider strings={{ forms: { optional: 'Kan stå tomt' } }}>
  <PktTextinput id="navn" name="navn" label="Navn" optionalTag />
</PktStringsProvider>

Du kan legge flere slike inni hverandre. Den innerste vinner.

Bruker du Elements, setter du strings på hver komponent i stedet.

Hvilken tekst vinner?

Punkt leter etter teksten i denne rekkefølgen. Nederste treff vinner.

Rekkefølge	Hvor teksten kommer fra
1	Den innebygde teksten på bokmål
2	setPktStrings()
3	PktStringsProvider (bare React)
4	strings på selve komponenten
5	Utdaterte props som optionalText

Tekster med verdier i seg

Noen tekster har en verdi som settes inn når teksten vises. Disse er markert med krøllparenteser. Behold dem når du bytter ut teksten, ellers mangler verdien.

setPktStrings({
  validation: { rangeUnderflowMin: 'Kan ikke være lavere enn {min}' },
})

Entall og flertall

Tekster som finnes i to former, har to nøkler: én som slutter på One og én som slutter på Other. Punkt velger One når det er nøyaktig én.

setPktStrings({
  fileupload: {
    fileLabelOne: 'dokument',
    fileLabelOther: 'dokumenter',
  },
})

Namespace

Namespace	Hva det dekker
generic	Ord som går igjen: from, to, close
forms	Merkelapper rundt skjemafelt
validation	Feilmeldinger i skjema
dates	Navn på måneder og dager, week, month, year
calendar	Knappene for forrige og neste måned
datepicker	Åpne kalenderen, fjerne en dato
timepicker	Timer, minutter og knappene i tidsvelgeren
searchinput	Ledetekst og knapp i søkefeltet
listbox	Søkefeltet i nedtrekkslisten
combobox	Beskjeder om treff, valg og maksgrense
fileupload	Slippsone, filvalidering og beskjeder til skjermlesere
backlink	Tilbakelenken
breadcrumbs	Brødsmulestien
tag	Knappen som fjerner en tagg
header	Søk og meny i toppfeltet

Utdaterte props

Noen komponenter har egne props for enkelttekster, som optionalText, requiredText, searchPlaceholder og helptextDropdownButton. De virker fortsatt, og de vinner over alle de andre tekstene.

Vi kommer til å fjerne dem i en senere hovedversjon. Bruk strings eller setPktStrings() når du skriver ny kode.

Slik nullstiller du

resetPktStrings() setter alt tilbake til de innebygde tekstene. Den er mest nyttig i tester.