Nå kan du bruke Designsystemet uavhengig av rammeverk
@digdir/designsystemet-web er lansert.
Nå kan du bruke Designsystemet - uavhengig av teknologi, i både nye og gamle prosjekter!
Med lansering av pakken @digdir/designsystemet-web, er det endelig blitt mulig få alle fordelene med Designsystemet, uten å måtte binde seg til React som teknologivalg. Dette betyr både større frihet og rom for eksperimentering og innovasjon i nye produkter, men også at eldre applikasjoner kan dra nytte av Designsystemet uten store omskrivinger.
All funksjonalitet er skrevet isolert, slik at du og ditt team kan velge hva dere ønsker å bruke og ikke bruke, eller gradvis ta i bruk Designsystemet uten behov for én stor omskrivingsperiode.
For dere som benytter @digdir/designsystemet-react pakken, er det ingen breaking changes; alt fungerer som før, men er under panseret bygget oppå web-pakken.
Og ikke bare det, web-pakken kan brukes uavhengig av CSS-pakken, så du kan bygge helt egne knappe-komponenter, men fortsatt dra nytte av Designsystemets funksjonalitet.
Hva er inkludert?
Web-pakken sørger for at all interaktivitet og automatisert universell utforming som før ble gjort av React-pakken, nå er tilgjengelig for alle. Mye av Designsystemet løses allerede med ren web-standard HTML og CSS, mens andre interaksjoner krever litt ekstra javascript:
<ds-breadcrumbs>- brukes av Breadcrumbs<ds-error-summary>- brukes av Error Summary<ds-field>- brukes av Field<ds-pagination>- brukes av Pagination<ds-suggestion>- brukes av Suggestion<ds-tabs>- brukes av Tabsdata-toggle-group- brukes av ToggleGroupdata-tooltip- brukes av Tooltipdata-clickdelegatefor- brukes av Table og Cardpopover- brukes av Popover, Dropdowncommand- aka. Invokers Command API brukes av Dialog og Popover
Hvorfor ikke web-komponenter for alt?
Designsystemet legger vekt på å bruke webstandarder. Å innføre web-komponenter for alt ville betydd at vi mister innebygd fleksibilitet og tilgjengelighet som ren HTML gir oss gratis, i tillegg til dårligere ytelse med avhengighet til Javascript. Moderne CSS med klasse og attributt-selektorer gir i mange tilfeller bedre fleksiblitet og ytelse.
Les mer om hvorfor vi har valgt å ikke lage web-komponenter for alle komponentene i Designsystemet i dette blogginnlegget.
Dokumentasjon
Vi er i gang med å oppdatere dokumentasjonen på designsystemet.no, men i mellomtiden kan du finne midlertidig dokumentasjon for @digdir/designsystemet-web i README på Github.
Gi tilbakemelding
Vi er veldig interessert i å høre fra deg som bruker web-pakken. Dersom du oppdager feil, eller har forslag til forbedringer, kan du opprette en sak i GitHub repoet vårt eller på Slack.
Bidragsytere