Startsiden til Skatteetaten
Startsiden til Skatteetaten
Lukk Meny


Versjonshistorikk

Oversikt over endringer i komponenter og pakker i designsystemet.

Versjon 2.0.0 – 10. april 2025

Majorversjon for å støtte React 19 og etablerte mønstre for helhetlige brukeropplevelser på tvers.

Breaking changes 

Alert har fått justert varianter :

  • info = Blå (ny variant) 
  • success = Grønn (samme som tidl) 
  • warning = Gul (tidl rød) 
  • error = Rød (ny variant) 
  • danger = Kraftig rød ramme (samme som tidl) 
  • neutral utgår 

Card: Card.Alert sin variant neutral har endret navn til info

Designtokens for container tokens har fått ny verdi: 

  • --container-s: 560px → 576px
  • --container-l: 1160px → 1152px
  • --container-aside: 380px → 384px
  • --container-wide-content: 760px → 768px
  • --semantic-responsive-internal-container-display: grid → flex

Følgende container tokens har endret navn:

  • --semantic-responsive-container-padding → --semantic-responsive-container-spacing
  • --semantic-responsive-internal-container-padding → ==semantic-responsive-internal-container-spacing

FileUploader: Checkmark-icon brukes ikke lengre i listen over opplastede filer, og propen 'successIconTitle' er derfor fjernet.

Modal: varianten important har blitt faset ut. Bruk ‘outline’ i stedet. 

TextField: prop 'as' er faset ut. TextField har nå alltid HTML-tag “input”. For “textarea” kan den nye komponenten TextArea brukes i stedet.  

StepList: StepList.Step sin prop shouldAutoFocusWhenActive setter focus for NeutralResult og PositiveResult i tillegg til Active

TopBannerInternal: prop title er blitt required og logoAltText er fjernet 

Icon:

  • Komponenten har fått min-width. Icon size small har fått min-width: small, Icon size medium har fått min-width: medium, Icon size large har fått min-width: large, Icon size extraLarge har fått min-width: extra-large. Hvis konsumenten har valgt å overstyre størrelsen til Icon med en annen width, burde de legge til en min-width i samme størrelse. I tillegg trenges ikke flex-shrink: 0 på ikoner når de ligger i en flexbox.
  • Tidligere ble ikke `size`-propen korrekt videreført til `ThemeIcon`-komponenten når man brukte et `ThemeIcon` direkte, som for eksempel `<GaveArvIcon size={'large'} />`. Uansett hvilken størrelse som ble spesifisert, ble ikonet alltid rendret med `size = 'medium'`. Nå er koden oppdatert slik at `size`-propen fungerer som forventet, og ikonet kan vises i stor størrelse når `size = 'large'` er angitt.
  • Ikonnavn: WaringOutline rettet skrivefeil til WarningOutline 
  • Ikonnavn: VerticalDotsCircle endret til HorizontalDotsCircle 
  • Ikonnavn:  VerticalDotsCircleSolid endret til HorizontalDotsCircleSolid 
  • Ikonnavn: VerticalDots endret til HorizontalDots
  •  

Oppdaterte avhengigheter 

Andre feilrettinger og forbedringer

Generelt:

  • Komponentene tar nå hensyn til nettleserinnstillinger for fontstørrelse.
  • Lagt til nye container tokens:
    • --container-xl
    • --container-aside-narrow
    • --semantic-responsive-internal-container-flex-direction
  • Lagt inn tekster som manglet oversetting.
  • Ny pakke for kommandolinjeverktøy. (ds-cli) 

BreadCrumbs: Retter en feil hvor lange tekster ikke brakk riktig på liten skjerm.

FileUploader: Filene bruker nå Card-komponenten til å vise opplastede filer. 

Footer: Faste lenker åpnes nå i ny fane. Komponenten har i tillegg et valg om å skjule standardlenkene.

Inpultfelter:

  • Fjerner nå 2px luft som lå over feltet når ledeteksten var skjult.
  • Wrapper nå hjelpeteksten i <div> i stedet for <span> for å forhindre potensielt uu-brudd.

RolePicker:

  • Legger til en mekanisme som forhindrer at selskapstypen vises to ganger.
  • Endret ledetekst for søkefelt
  • Lagt til en prop for å styre når søkefelt vises
  • Er nå mulig å kollapse listen med parter etter at den er ekspandert.

SearchField: Justerer innslagspunktet hvor feilmeldingen kommer (semantisk). 

Select:

  • Retter en feil hvor teksten i menyen fikk feil farge på Windows.
  • Legger til ... (ellipsis) når teksten blir for lang.

TextArea: Ny komponent - trukket ut funksjonalitet fra TextField-komponenten. Se breaking changes. 

TopbannerExternal:

  • Legger til en skjul div som kan motta fokus
  • Legger til onClick på logo

TopbannerInternal:

  • Legger til en skjul div som kan motta fokus
  • Fjerner prop for logoAltText

Storybook:

  • Forbedret controls og tekstinput til alle komponenter
  • Lagt til eksempelkode til Intern layout (Saksvisning)

 

 

Versjon 1.6.0 – 27.02.2025

Feilrettinger og forbedringer

TopBannerInternal:

  • Forbedret reponsivitet ved å bruke hele plassen i toppbaner på en mer fleksibel måte.
  • Lagt til underkomponenten ActionMenu. 
  • Lagt til mulighet for å skjule logo på mobil eller små skjermer
  • Både logo og tittel er nå klikkbart område.
  • Bedre støtte for andre profiler ved å støtte ikke-kvadratiske logoer og strek mellom logo og tittel.

SearchField:

  • Lagt til mulighet for å sette required og vise feilmelding.

RolePicker:

  • Lagt til filter for visning av avdøde personer
  • Fikset feil visning av varsel ved innsending av tom liste med personer.

InlineButton og IconButton:

  • Lagt til støtte for plassering på mørk bakgrunn (brightness) (fortrinnsvis til bruk i intern toppbanner). InlineButton har justert fokusmarkering med fylt bakgrunnsfarge.

NavigationTile:

  • Oppdatert fokus slik at rammen ikke lenger dekker neste element.

Andre forbedringer

  • Oppdatert eksempel for Link for å vise hvordan man bruker react-router.
  • Modal: varianten "important" er markert som deprekert og vil bli fjernet i neste major-versjon. Denne varianten er ikke i tråd med det som er beskrevet i mønster for systemvarsler.
  • I komponenter hvor vi krever string vil ikke komponenten lenger kræsje hvis strengen fjernes i runtime. I stedet gir vi advarsel i konsoll. 
  • Forbedret opplevelser på leselist for enkelte komponenter som hadde etterfølgende span-elementer.

 

 

Versjon 1.5.1 – 11.02.2025

  • Retter en feil i engelsk oversettelse på RolePicker.
  • Retter en feil med Modal sin fokusoppførsel dersom den lukkes programmatisk.

Versjon 1.5.0 – 30.01.2025

Nye komponenter

  • RolePicker (beta): representasjonsvelger som brukes i innloggede løsninger for å velge om man representerer seg selv, en virksomhet eller andre.
  • Card (beta): fleksibel komponent for å gruppere opplysninger av samme type. 
  • Nytt bibliotek med hjelpefunksjoner (beta): formatering av organisasjonsnummer, fødselsnummer, kontornummer og telefonnummer.

Feilrettinger og forbedringer

  • Spinner: støtte for prosentvisning.
  • ErrorSummary: komponenten får nå automatisk fokus når den vises.
  • Modal: retter en feil hvor komponenten ble lukket ved klikk på innhold.
  • Modal: har fått en ny prop renderIcon.
  • TopBannerExternal: retter en feil som gjorde at valgt språk ble nullstilt hvis man bruker egne tilleggsspråk.
  • Footer: retter utdatert url i lenke på nynorsk.
  • Alert: visuell justering av ramme (1px).
  • ScrollToTopButton: legger til mulighet for å scrolle til visuell topp og beholde fokus på main.
  • DatePicker: løser at initiell fokus i kalender havnet på deaktivert dato dersom minDate var satt til en fremtidig dato.
  • NavigationTile: lagt til mulighet for å vise spinner.
  • StepList: fjerner visuell fokusmarkering av nummer.

Andre forbedringer

  • Chips, Breadcrumbs, DescriptionList er ikke lenger i beta. 
  • Kodeeksempler på bruk av Accordion: i venstremeny, i arbeidsoppgave og «lazy loading» av innhold.
  • Kodeeksempel på bruk av Modal: Feilmelding, samtykke- og ventevarsel.
  • Nye ikoner for konsern, fritaksberettiget kjøretøy, tilhører barn. Retter en skrivefeil i ikonnavn: WaringOutline og WarningOutline. Ikonene er duplikater inntil videre. 
  • Oppdatering av NPM-avhengigheter.

 

 

Versjon 1.4.0 – 28.11.2024

I denne versjonen har vi hatt et spesielt fokus på fokus, altså hvordan komponentene oppfører seg med tanke på tastaturbruk og opplesing for skjermlesere.

Feilrettinger og forbedringer 

  • Alert: Legger til ramme for øke kontrast på komponent for å kunne bruke den på fargede flater.
  • DescriptionList: Liten justering av CSSen som brukes til å dele opp i kolonner.
  • FileUploader: Bedre støtte for skjermlesere når fileopplastingknappen er i feiltilstand (leser opp feilmeldingen)
  • Panel: Mulighet for custom padding for ulike brekkpunkter.
  • SearchField: Retter en feil hvor nullstillknapp ble stående når man programmatisk fjernet tekst. 
  • StepList: Legger til mulighet for å automatisk sette fokus på aktivt steg.
  • Table: Retter en feil som førte til komponenten crashet når et required attributt ble fjernet.
  • Table: Legger til mulighet for flere etterfølgende rader, inkludert flere summeringer.
  • Tabs: Legger til onClick på Tabs for å tilby mulighet for å hindre bytte
  • Tabs: Setter aria-hidden på faneinnhold som ikke er synlig.

Andre forbedringer

 

 

Versjon 1.3.0 – 31.10.2024

@skatteetaten/ds-collections

  • Ny komponent: Chips (Beta – endringer kan forekomme)

Feilrettinger og forbedringer 

  • Accordion: Kollapset innhold beholdes i DOM, men skjules visuelt med display:none
  • Checkbox: legger til onBlur og onFocus
  • DatePicker: legger til mulighet for å ekskludere datoer i kalendervisningen. Forbedret oppførsel ved feil og når bruker taster inn ugyldig dato.
  • Panel: Mulighet for å legge til tabindex="-1" på overskriften. Default padding på mobil er redusert til spacing-m.
  • Radio: Legger til onBlur, onChange og onFocus
  • Table: legger til flere ref-props for å hjelpe til styring av fokus når man legger til eller fjerner rader.
  • TopBannerExternal: legger til mulighet for egendefinerte språk i språkvelger (Beta – endringer kan forekomme).

Andre forbedringer

  • Designtoken: Legger til nytt designtoken; spacing-s-plus, som tilsvarer 0.75rem (12px).
  • Skjemafelt: justering av timingfunksjon når feilmelding vises. Dette for å forbedre oppførselen ved knappetrykk under skjema-elementene.

  • Ikoner: Endret ikon for feil (fra sirkel til trekant) for å følge felles offentlig mønster. Visuell finpuss av strektykkelse og posisjonering på utvalgte ikoner.

 

Versjon 1.2.0 - 26. september 2024

@skatteetaten/ds-navigation

  • Ny komponent: Breadcrumbs (Beta – endringer kan forekomme)

@skatteetaten/ds-content

Andre feilrettinger og forbedringer

  • Table: Legger til tredje klikk på sorteringskolonne for å resette sortering. Hvis man har sortering på tabell må denne tilstanden håndteres.
  • Legger til prop for å sette tabIndex="-1" Blockqoute, Fieldset, Heading, List, Paragraph, Table og Tag. Dette til i bruk i tilfeller hvor man manuelt styrer fokus.
  • RadioGroup: legger til støtte for onBlur
  • TextArea: Legger til mulighet for å trigge autosize utenfra.
  • Link, LinkGroup: Fokus-stiler er justert for bedre kontrast.
  • OpenClose: Legger til ny prop; isDefaultExpanded
  • Pagination: Retter en feil som gjorde at komponenten kræsjet når antall elementer var 0.
  • TextField: Tilbyr nå mulighet for å legge til list-prop, for hjelp til å velge i en lang liste med elementer. Propen aktiverer nettleserens native funksjonalitet for dette. Beta: Endringer kan forekomme.
  • TextField: Forbedret oppførsel på cursoren når man redigerer i felt med aktiv tusenseparator.
  • Lagt til noen nye ikoner, og justering av strektykkelse på enkelte ikoner.

 

Versjon 1.1.1 - 12. september 2024

  • Modal: Retter en feil som førte til at onClose ble kalt utilsiktet ved trykk på tastaturet.

Versjon 1.1.0 - 21. august 2024

Nytt i denne versjonen

  • Setter gjennomsiktig bakgrunn i stedet for hvit på følgende steder: OpenClose, Button (tertiær) og TextField i readonly-modus
  • Skjemaelementer: det er nå mulig å overstyre bredden på hjelpetekster ved å bruke classNames. 
  • Link: Legger til mulighet for å angi «aria-current».
  • Icon: Legger til minus-ikon, og justerer "Add".

Feilrettinger og forbedringer

  • Skjemaelementer: Retter en feil hvor komponentene kræsjer dersom man bruker showRequiredMark uten required
  • Footer: Retter en feil der logo ikke lastes ved bytte av språk til engelsk
  • Pagination: Retter en feil i feilmelding for sidetall. 
  • Modal: Retter en feil hvor dismissOnEsc likevel tillot lukking med escape-tasten. Retter også et tilfelle hvor klikk i modal trigger lukking feilaktig, samt bedre håndtering av events.
  • TextField: Retter en feil hvor komponenten ikke ble lastet med en gammel versjon av Safari (IOS 16.3 og eldre).
  • Fieldset: Ved lange ledetekster vil ikon for hjelpetekst nå komme like etter teksten i stedet for på egen linje.
  • FileUploader: bedre tekstbrytning ved lange filnavn.
  • TopBannerExternal: Oppdaterer logo-svg som hadde for lav oppløsning, og legger til en nynorsk oversetting på innloggingsknapp som manglet. 

 

 

Versjon 1.0.0 - 27. juni 2024

Designsystemet sin første major-versjon! Innholdet representerer et løft av forrige utgave av designsystemet (frontend-components) over på ny arkitektur, og med det en erstatning av de gamle komponentene. For å oppgradere henviser vi til migrasjonsguidene på dokumentasjonssidene.

Breaking changes

  • Alert: showAlert kan ikke lenger være undefined. Komponenten har også en ny prop onClose, som styrer når lukkekrysset vises (erstatter showCloseButton). 
  • DatePicker, Checkbox, CheckboxGroup, TextField, Select, RadioGroup, FileUploader: hasError er fjernet. For å vise feilmelding er det nå tilstrekkelig å bruke errorMessage propen alene.
  • DatePicker: defaultValue-prop er fjernet. Bruk value i stedet. 
  • OpenClose: className er flyttet til rotelementet i komponenten.
  • StepList.Step: HasNextButtonSpinner er fjernet. NextButtonProps kan brukes til å sette props på knappen og til å vise spinner.
  • react-i18next er oppdatert til major-versjon 14

Nytt i denne versjonen

  • Alert: showAlert har defaultverdi false. Komponenten tillater nå tom string.
  • Button: lagt til href-prop som rendrer knapp som lenke.
  • DatePicker: Når man taster inn årstall i kalenderen kommer nå numerisk tastatur på mobil. 
  • Designtokens: Oppdatert farge på beskrivelsesfeltet til inputfelt (graphite-70).
  • ErrorMessage: showError har nå default verdi false 
  • SearchField: Retter en feil hvor man ikke kunne overstyre tekst på søkeknappen.
  • StepList: Har nå mulighet for å sende props videre til nesteknappen (NextButtonProps).
  • Table: retter en feil hvor tekst i sorterbare kolonneheader ikke ble justert korrekt.
  • Tabs: Retter en feil hvor Tabs ikke fungerte som kontrollert komponent.
  • TextField: Retter en feil hvor autosize ble vist feil når det ble plassert i en modal.

 

Versjon 0.8.0 - 13. juni 2024

@skatteetaten/ds-collections

  • Ny komponent: Accordion
  • Ny komponent: Tabs 

@skatteetaten/ds-overlays

  • Ny komponent: Popover

@skatteetaten/ds-nvaigation

  • Ny komponent: NavigationTile

@skatteetaten/ds-layout

  • Ny komponent: TopBannerInternal

Andre forbedringer og feilrettinger

  • Table: mulighet for å programmatisk åpne ekspandere en redigerbar rad. Retter en feil hvor horisontal skrollbar blir vist uten behov. 
  • Footer: Logo endres når språk endres til engelsk
  • Hjelpetekster: Aksepterer nå andre elementer enn kun string, for å kunne vise lenker. Legger også til callback-funksjon for å kjøre kode når hjelpetekst vises.
  • StepList: Mulighet for å videresende props til neste-knapp. Fikser er visuell bug knyttet til Endre-knappen.
  • Datepicker: retter en feil på samsung-enheter hvor kalenderen ble lukket for tidlig når brukeren tastet inn årstall i kalendervindu.
  • Pagination: retter en feil hvor komponenten henger på første side.
  • FileUploader: legger til mulighet for å vise spinner ved sletting av fil. 

 

 

Versjon 0.7.1 – 2. mai 2024

  • DatePicker: Retter en feil hvor kalender ikke ble åpnet ved klikk.
  • Pagination: Retter en feil antall elementer i liste ble vist feil.
  • Select/TextField: visuell justering av rammetykkelse (large) for å matche resten av komponentene.

 

Versjon 0.7.0 – 11. april 2024

@skatteetaten/ds-forms

  • Ny komponent DatePicker
  • Ny komponent SearchField

@skatteetaten/ds-navigation

  • Ny komponent Pagination

@skatteetaten/ds-status

  • Ny komponent Tag

Andre forbedringer og feilrettinger

  • Select: Retter en feil som førte til at placeholderfargen fikk feil tekstfarge.
  • TextField: Retter en feil som gjorde at man ikke kunne skrive negative tall med tusenseparator.
  • TextField: Retter en feil som førte til at textarea-variant ikke beholdt høyden når den ble forhåndsutfylt.
  • OpenClose: Understrek skrudd på som default (på grunn av funn i brukertest).
  • Visuell justering av fokusmarking på Select og TextField for å harmonere utseende med nye input-komponenter.
  • Legger til mulighet for å sette form-attributt  på native html-komponenter.
  • Mer fleksibelt å sette required i skjema-elementer.
  • Fikser en visuell bug for grupper av InlineButton med både høyre og venstre-ikon.

 

 

Versjon 0.6.1 – 29. februar 2024

  • Modal: Fikset en feil med dismissOnEsc og dismissOnOutsideClick
  • ErrorSummary: endret type til React.Node, for å støtte tomme underelement.
  • TopBannerExternal: Noen mindre justeringer på padding og responsivitet for knappene.
  • FileUploader: onClick og mulighet for forhåndsutfylle i liste over filer, samt noen små CSS-justeringer.

 

Versjon 0.6.0 - 21. februar 2024

@skatteetaten/ds-forms

Lagt til nye komponenter:

  • FileUploader

@skatteetaten/ds-layout

Lagt til nye komponenter:

  • TopBannerExternal

Annet

  • Visuell justering på panel
  • Spinner i knapper og StepList

 

 

Versjon 0.5.2 – 7. desember 2023

* 0.5.0 ble bumpet til 0.5.2 i forbindelse med bygging av releasen.

@skatteetaten/ds-forms

Lagt til nye komponenter:

  • Select

@skatteetaten/ds-overlays

Lagt til nye komponenter:

  • Modal

@skatteetaten/ds-progress

Lagt til nye komponenter:

  • Spinner

Annet

  • Lagt til dokumentasjon av container-basert layout. 
  • Fikser en feil i inputfelter og fieldset hvor scrollbar kunne oppstå ved lange ledetekster.
  • Designtoken graphite-50 er oppdatert for å møte kontrastkrav for inaktive elementer.

 

 

Versjon 0.4.0 – 11. oktober 2023

@skatteetaten/ds-forms

Lagt til nye komponenter:

  • ErrorSummary
  • Fieldset
  • TextField

I tillegg har Checkbox og RadioGroup fått mulighet til å vise hjelpetekster.

@skatteetaten/ds-layout

Lagt til ny komponent:

  • Footer 

@skatteetaten/ds-collections

Lagt til ny komponent:

  • StepList

 

 

Versjon 0.3.1 – 30. august 2023

Feilretting av hvordan komponentene laster inn stilsett. Denne endringen bør ikke være merkbar for de fleste, men vi anbefaler alle å oppdatere.

 

Versjon 0.3.0 – 28. juni 2023

@skatteetaten/ds-forms

Lagt til nye komponenter:

  • RadioGroup
  • Checkbox
  • CheckboxGroup
  • ErrorMessage

@skatteetaten/ds-table

Lagt til ny komponent:

  • Table 

Notis: Skjermleseren VoiceOver kan i noen tilfeller ikke fange opp endring i kolonnesortering. Vi mener at vår kode burde fungere, og undersøker om dette er en sak knyttet til VoiceOver.

@skatteetaten/ds-collections

Lagt til ny komponent:

  • OpenClose

@skatteetaten/ds-content

Lagt til ny komponent:

  • Panel

@skatteetaten/ds-status

Lagt til ny komponent:

  • Alert

 

 

Versjon 0.2.0 – 17. mars 2023

ds-core-designtokens

Lagt til farger for inaktive elementer, for- og bakgrunn.

ds-buttons

Lagt til ny komponenter:

  • ScrollToTopButton
  • Link 
  • LinkGroup

ds-typography

Lagt til nye komponenter for typografi:

  • Heading
  • Paragraph
  • Blockquote
  • List

ds-core-utils

Støtte for oversetting av komponenter til norsk bokmål, nynorsk, engelsk og samisk, samt oversetting av innebyggede tekster.

 

 

Versjon 0.1.0 – 7. desember 2022

Første versjon av de nye designkomponentene. Vi oppretter følgende pakker: 

  • ds-buttons – knapper og lenker
  • ds-core-designtokens - gjenbrukbare designvariabler/tokens
  • ds-core-utils - verktøy og støttefunksjoner
  • ds-dev-config - konfigurasjonsfiler som brukes på tvers av pakker.
  • ds-forms - skjemakomponenter
  • ds-icons - ikoner, system og tema-ikoner.

ds-buttons

Lagt til nye komponenter:

  • Button
  • IconButton
  • InlineButton
  • MegaButton

Feilretting ds-buttons@0.1.1

Legger til mulighet for å sette type-attributt på alle knappekomponenter.

ds-core-designtokens

  • Opprettet mekanisme for fargetema
  • Lagt til følgende tokentyper:
    • Brekkpunkter
    • Kontainerbredder
    • Fontstørrelser og linjeavstand
    • Fargepalett
    • Luft/avstander

 ds-icons

  • Lagt til Icon-komponent
  • Lagt til systemikoner som svg.
  • Lagt til temaikoner som svg