Gjøre Designsystemet teknologiuavhengig

[mrosvik]

Overordnet beskrivelse

Designsystemet skal kunne brukes uavhengig av rammeverk og teknologi. Med introduksjonen av @digdir/designsystemet-web er funksjonalitet som tidligere lå i React-pakken gjort tilgjengelig gjennom webstandarder, slik at komponenter og funksjonalitet kan brukes i alle rammeverk eller direkte i HTML og JavaScript.

Målet er at Designsystemet skal være et stabilt fundament for utvikling av digitale tjenester i offentlig sektor, uavhengig av teknologistakk.

Forventet resultat

• Designsystemet kan brukes uavhengig av rammeverk
• Kjernefunksjonalitet er tilgjengelig gjennom webstandarder
• React og eventuelle andre rammeverk fungerer som wrappers rundt kjernefunksjonaliteten
• Virksomheter kan ta i bruk Designsystemet uten å måtte bytte teknologistakk

Hvordan skal det fungere?

Kjernefunksjonalitet flyttes ut av rammeverkspakker og gjøres tilgjengelig gjennom webstandarder som HTML, CSS og JavaScript.

Dette innebærer at:

• funksjonalitet ligger i en rammeverksuavhengig pakke
• komponenter kan brukes direkte i HTML
• rammeverkspakker, som React, bygger videre på den samme kjernefunksjonaliteten

På denne måten kan Designsystemet brukes i ulike rammeverk, eller uten rammeverk.

Gjennomføring

Arbeidet med å gjøre Designsystemet teknologiuavhengig gjennomføres ved å flytte interaktivitet og logikk ut av rammeverkspakker og over i en rammeverksuavhengig pakke. Dette gjøres gjennom utviklingen av @digdir/designsystemet-web.

Denne pakken fungerer som et fundament for interaktivitet i komponentene, og kan brukes direkte i HTML og JavaScript eller integreres i ulike rammeverk. React-komponentene bygges videre på denne pakken, slik at de blir wrappers rundt den samme funksjonaliteten.

Arbeidet skjer stegvis:

1. Etablere rammeverksuavhengig kjerne

   • Flytte logikk og interaktivitet fra React til @digdir/designsystemet-web
   • Sikre at funksjonaliteten kan brukes direkte med HTML, CSS og JavaScript
   • Gjøre komponenter tilgjengelige uten React

2. Oppdatere eksisterende komponenter

   • React-komponenter oppdateres til å bruke web-pakken som underliggende implementasjon
   • Gradvis flytte interaktivitet til web-pakken
   • Teste komponenter i både React og andre rammeverk

3. Testing og prereleases

   • Publisere prereleases av @digdir/designsystemet-web
   • Be utviklermiljøer teste komponentene i eksisterende applikasjoner
   • Samle tilbakemeldinger og justere implementasjonen før stabil release.

4. Bruk av webstandarder

   • Prioritere standard HTML-elementer der det er mulig
   • Bruke CSS-klasser og data-* attributter for å styre oppførsel
   • Unngå unødvendig bruk av web components der standard HTML gir bedre tilgjengelighet og ytelse.

5. Dokumentasjon og eksempler

   • Dokumentere hvordan komponenter kan brukes uten React
   • Oppdatere dokumentasjon etter hvert som funksjonalitet flyttes til web-pakken

Målet er at Designsystemet skal kunne brukes i alle rammeverk, som Svelte, Vue og Angular, eller direkte i HTML og CSS.

Avhengigheter

• Stabil versjon av @digdir/designsystemet-web
• Oppdaterte React-komponenter som bruker web-pakken
• Oppdateringer i dokumentasjonen på designsystemet.no

Oppgaver

• Uvikle @digdir/designsystemet-web
• Flytte interaktivitet fra React til web-pakken
• Teste komponenter i ulike rammeverk
• Oppdatere dokumentasjon og kodeeksempler

Relevante issues:

• Update documentation to be web/html-first designsystemet#4592