Hvordan Mattilsynet bruker Designsystemet uten React

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.

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å events på document:

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

Klikk på bildet eller trykk Escape for å lukke

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

Bidragsytere

Eirik BackerStein Olav PettersenGøril Torske