Velkommen til Smudi - UDI sitt designsystem! 🥤

Dette prosjektet inneholder UDI sitt interne designsystem, "Smudi". Les dokumentasjon om Bruken av Smudi og komponentene i Storybook.

Designsystemet bygger på Digdir sitt designsystem og gir en felles base av React-komponenter og stilark som kan brukes på tvers av applikasjoner. Digdir sitt designsystem får du innebygget i Smudi-pakken, du trenger altså ikke laste ned dette selv. Vi skal bruke Aksel sitt ikon-bibliotek sammen med komponentene våre. Aksel er ikke en del av Smudi-pakken, denne må du laste ned selv.

Hvorfor designsystem?

Ved å bruke et designsystem kan vi sikre konsistente brukeropplevelser, gjenbrukbare komponenter og en effektiv utviklerhverdag. All utvikling og dokumentasjon skjer gjennom Storybook og Figma, som gir en visuell oversikt over komponentene og deres bruk.

Last ned Smudi

Vi er i tidlig fase av release av Smudi og vil gjerne ha dine tilbakemeldinger!

1. Pakken er tilgjengelig på npm: @smudi/designsystem
   • OBS - Legg merke til at pakken inkluderer Digdir sitt designsystem. Du trenger ikke laste ned dette selv.
2. Installer pakken med din pakkehåndterer, f.eks. pnpm add @smudi/designsystem.
3. Legg inn CSS globalt, enten i din globale css-fil eller:
   • I Next - Øverst i app/layout.tsx
   • I React - Øverst i src/main.tsx

 import '@smudi/designsystem/styles.css';

5. Bruk komponentene i koden slik:

   import { Alert, Heading, Paragraph, Link } from "@smudi/designsystem";
   
    export function ComponentExample() {
      return (
        <>
        <Alert data-color="warning">
          <Heading
            level={2}
            data-size="xs"
            style={{
              marginBottom: 'var(--ds-size-2)',
            }}>
            Søknadsfristen går ut om 3 dager
          </Heading>
          <Paragraph>
            Fristen for å søke opphold er 21. februar.
            <Link href="#">Søk nå</Link>
          </Paragraph>
        </Alert>
        </>
      );
    }

6. Bruk design-tokens i egen CSS slik:

    .customCard {
      background: var(--ds-color-surface-default);
      color: var(--ds-color-text-default);
      border: 1px solid var(--ds-color-border-subtle);
      border-radius: var(--ds-border-radius-md);
      padding: var(--ds-spacing-4);
    }

Henvendelser

• Spørsmål om bruk av designsystemet, komponenter og ønsker om nye komponenter skal sendes i Designsystemets Teams-kanal.

Stack

• React 19.2.1 - for UI-komponenter
• Storybook 10.2.10 - for dokumentasjon og visuell testing
• Typescript 5 - for type-sikker utvikling
• pnpm 10 - for pakkehåndtering
• @digdir/designsystemet-types og @digdir/designsystemet-react - grunnlaget for visuelle komponenter og typer
• Vitest + Playwright - for testing

Ønsker du å bidra til Designsystemet?

• Ta kontakt med Smudi-teamet på teams :-)
• Se CONTRIBUTING.md for retningslinjer om hvordan du bidrar.
• Se DEVELOPMENT.md for oppsett av utviklingsmiljø.
• Bruk pull_request_template.md når du oppretter en pull request.