@udir-design/react

v1.2.0

Published

5 days ago

Downloads

1,985

0High
0Medium
0Low

unekinn

udir-designteamet

React-komponenter for Utdanningsdirektoratets designsystem.

Dette biblioteket inneholder React-komponenter for Utdanningsdirektoratets designsystem.

For å ta i bruk biblioteket må du først installere det, og så gjøre litt oppsett.

Installere biblioteket

npm add @udir-design/theme@beta @udir-design/react@beta

Oppsett

Laste inn korrekt font

Komponentbiblioteket bruker fonten Inter. For at komponentene skal vises med riktig typografi, må fonten lastes inn i applikasjonen.

Legg følgende i <head> i index.html:

<link
  rel="preload stylesheet"
  as="style"
  href="https://altinncdn.no/fonts/inter/v4/inter.css"
/>

Importere stilsettet

For at komponentene skal vises korrekt, må du importere bibliotekets stilsett fra @udir-design/react/style.css.

Du kan for eksempel gjøre dette i JavaScript- eller TypeScript-entrypointet:

import '@udir-design/react/style.css';

Alternativt kan du importere stilsettet fra en CSS-fil:

@import '@udir-design/react/style.css';

Sette opp globale stiler

Biblioteket setter ingen globale stiler, men vi har noen anbefalinger.

Scroll offset

Ved lenking innad i siden, for eksempel fra en innholdsfortegnelse, er det lurt å definere en scroll offset. Dette gjør at Header eller DemoBanner aldri legger seg på toppen av innholdet du scroller til:

html {
  scroll-padding-top: var(--uds-scroll-padding-top);
}

Typografi

For å få konsistent typografi også på innhold som ikke bruker komponenter fra biblioteket, må du selv definere standard typografi for applikasjonen.

Dette kan gjøres slik:

body {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */
}

Skru på typedefinisjoner for `data-color`

Hvis du bruker TypeScript, anbefaler vi å legge til typene for @udir-design/theme og @udir-design/react/html i tsconfig.json.

Da får du typesjekking og autoutfylling for Udirs farger og størrelser (data-color og data-size) både på komponenter fra biblioteket og vanlige HTML-elementer.

Du får også typer for HTML-attributter som React ikke dekker selv: popover og popovertarget, samt focusgroup og focusgroupstart.

Et enkelt eksempel:

{
  "compilerOptions": {
    // ... andre compilerOptions
    "types": ["@udir-design/theme", "@udir-design/react/html"],
  },
  // ... andre innstillinger
}

Legg typene til i den eksisterende tsconfig.json-filen. Under er et eksempel fra en testapplikasjon:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": [
      "node",
      "vite/client",
      "vitest/importMeta",
      "@udir-design/theme", //       <---- Legg til disse
      "@udir-design/react/html", //  <---- to linjene
    ],
  },
  "exclude": [
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx",
    "src/**/*.spec.js",
    "src/**/*.test.js",
    "src/**/*.spec.jsx",
    "src/**/*.test.jsx",
  ],
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
}

Ta i bruk

[!NOTE] Legg merke til at eksempelet importerer fra @udir-design/react/alpha. Du finner en forklaring på dette i Designsystemets overordnede README

Nå kan du importere og bruke komponenter, for eksempel slik:

import { Details, Card } from '@udir-design/react/alpha';

export const MyComponent = () => (
  <Card>
    <Details>
      <Details.Summary>Første overskrift</Details.Summary>
      <Details.Content>Skjult innhold som kan åpnes</Details.Content>
    </Details>
    <Details>
      <Details.Summary>Andre overskrift</Details.Summary>
      <Details.Content>Mer skjult innhold her</Details.Content>
    </Details>
  </Card>
);

Oversikt over hvilke komponenter som finnes, og bruksdokumentasjon for disse, finner du i vår Storybook.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme