Hopp til hovedinnhold

Hvordan Mattilsynet bruker Designsystemet uten React

Mattilsynet utvider Designsystemet med egen merkevare og distribuerer til alle utviklingsteam – uavhengig av hvilken teknologi de bruker.

18. juni 2025Mattilsynet

Ansatte i Mattilsynet står sammen med dyr og holder en skjerm.
Mattilsynet har i løpet av kort tid etablert et eget internt designsystem, basert på Designsystemet. Resultatet? Flere sparte årsverk, mer konsistente tjenester – og en løsning som fungerer for alle utviklingsteam, uavhengig av teknologi. Foto: Mattilsynet

Fra felles grunnmur til egne tilpasninger

I Mattilsynet har vi lenge hatt høye ambisjoner for brukeropplevelse og tilgjengelighet. For å få dette til på en effektiv måte, har vi valgt å bygge videre på komponenter, tokens og prinsipper fra Designsystemet, i stedet for å starte helt fra bunnen.

Ved å ha en lokal kopi av Designsystemets Figma-bibliotek, samt importerte klasser fra Designsystemets CSS-pakke via CSS modules composition, har vi fått en solid grunnmur som fritt kan tilpasses etter Mattilsynets merkevare og behov. Dette har spart oss for betydelig tid og ressurser, og ivaretar flere av kravene til universell utforming og skalerbarhet.


Hvordan Mattilsynet bygger på designsystemet.no

I denne filmen forklarer Eirik Backer hvordan Mattilsynet har brukt Designsystemet til å lage et internt designsystem som fungerer for alle utviklingsteam uavhengig av hvilken teknologi de bruker.

Se video på vimeo.com

Teknologi som passer alle team

I Mattilsynet får hvert utviklingsteam velge sin egen teknologistack. For at designsystemet skal fungere i praksis, må det derfor være rammeverkuavhengig.

Ved å benytte CSS-modules kan vi utvide Designsystemets sine klasser, og tilby et objekt av hashede klassenavn som hindrer navnekollisjoner. Uavhengig av teknologi, kan våre team da hente inn klassenavn i sin kode:

import { styles } from '@mattilsynet/design';
const MyButton = () => {
return <button className={styles.button}>Klikk meg</button>;
};

For de som benytter React, tilbyr vi også komponenter som i praksis kun legger på korrekt klassenavn:

import { Button } from '@mattilsynet/design/react';
const MyButton = () => {
return <Button>Klikk meg</Button>;
};

Vi benytter også HTML-attributter for å tilby variasjoner av komponenter:

import { styles } from '@mattilsynet/design';
const MyButton = () => {
return (
<button className={styles.button} data-variant="primary" aria-busy="true">
En primærknapp med lasteindikator
</button>
);
};

Interaktvitet

Selv om storparten av et designsystem kun påvirker utseende, trenger vi noen ganger JavaScript for å håndtere interaktvitet. I disse tilfellene benytter vi vanilla JavaScript, som lytter på eventsdocument:

document.addEventListener('toggle', (event) => {
if (event.target.closest(`.${styles.popover}`)) {
if (event.newState === 'open') {
// Attach positioning logic for popover
} else {
// Detach positioning logic for popover
}
}
});

Mer enn teknologi

Selv om mange forbinder Designsystemet med React-komponenter, er det mye mer enn det. For oss i Mattilsynet er Figma-biblioteket, CSS-tokens og dokumentasjonen uvurderlige ressurser.

Er du nysgjerrig på å se under panseret på Mattilsynets løsning?
Besøk design.mattilsynet.no eller github.com/mattilsynet/design

Viser person med jakke som har Mattilsynet logo på

- Vi er stolte av å kunne bidra til et prosjekt som løfter hele Norge.

Designsystemet logo

Bidragsytere

Eirik BackerStein Olav PettersenGøril Torske

Vil du skrive for bloggen?

Har du noe du ønsker å dele med andre i fellesskapet? Kontakt oss på Slack eller via e-post