Formatering

Formateringsprinsipper

Det finnes mange formateringsprinsipper som er standardisert i Norge, og som bidrar til å øke lesbarheten. I designsystemet har vi komponenter som hjelper med formateringen, så du som utvikler ikke trenger å bekymre deg for at ting ikke vises riktig.

Her ser du et utvalg av ulike formateringer som finnes:

formatNumber

Om ingen av de spesialiserte formateringsfunksjonene passer kan du bruke formatNumber. Denne funksjonen utgjør basen i mange av de andre funksjonene.

import formatNumber from '@sb1/ffe-formatters/lib/formatNumber';

{
  decimals: 2, // default 0
  thousandSeparator: ',', // default ' ' (space)
  decimalMark: '.', // default ','
}

formatCurrency

import formatCurrency from '@sb1/ffe-formatters/lib/formatCurrency';

formatCurrency-komponenten kan gis et objekt som andre argument for å styre prefix og postfix:

{
  prefix, // default 'kr. '
  postfix, // default ',-' hvis heltall, '' hvis ikke
}

formatPercentage

import formatPercentage from '@sb1/ffe-formatters/lib/formatPercentage';

formatPercentage-komponenten gir prosenter det riktige mellomrommet mellom tall og % med et non-breaking space. Runder av til så få desimaler som mulig, med en default cap på to desimaler. Dette kan overstyres i options-objektet.

{
    maxDecimals, // default 2
    minDecimals, // default 0
}

formatFodselsnummer

import formatFodselsnummer from '@sb1/ffe-formatters/lib/formatFodselsnummer';

Deler opp fødselsnummeret i to deler med et non-breaking space, som betyr at selv om det er et mellomrom, så vil ikke fødselsnummeret dele seg over 2 linjer.

formatAccountNumber

import formatAccountNumber from '@sb1/ffe-formatters/lib/formatAccountNumber';

formateDate

formateDate-komponenten støtter bare norsk locale, og formaterer Date-objekter og timestamps.

import formatDate from '@sb1/ffe-formatters/lib/formatDate';

formatDistance

import formatDistance from '@sb1/ffe-formatters/lib/formatDistance';

{
  units, // default 'km',
}