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 

• React oppdatert fra 18 til 19 se https://react.dev/blog/2024/04/25/react-19-upgrade-guide 
• I18next oppdatert fra 23 til 24 se https://www.i18next.com/misc/migration-guide#v23.x.x-to-v24.0.0 
• React-i18next oppdatert fra 14 til 15 https://github.com/i18next/react-i18next/blob/master/CHANGELOG.md#1500 
• date-fns fra 3 til 4 https://blog.date-fns.org/v40-with-time-zone-support/  

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

• Lagt til et nytt mønster for å styre fokus i ensideapplikasjoner (SPA)

 

 

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

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

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