Oppsett (utvikler)

Installasjon med React

Installer avhengigheter for @aneo-org/design-react.

npm install @aneo-org/design-react @aneo-org/design-tokens

Oppsett med komponenter

Du må importere style.css, for å få med styling på komponentene. style.css inkluderer ikke tokens, så du må legge til en separat separat import for tokens.

Importer styling i rotfila, f.eks. app.tsx eller layout.tsx (Next.js). Husk å importere dine lokale stilfiler etter komponentstylingen, så du kan overstyre komponentstylingen:

import "@aneo-org/design-react/style.css";
import "@aneo-org/design-tokens/tokens.css"
// ... your local style files

Tokens er også tilgjengelig som SCSS fra design-react pakka. Det kan importeres som /tokens.scss. Siden vanilla CSS ikke aksepterer CSS-variabler som media queries, er det også lagd en SCSS-fil som kun inneholder breakpoints, breakpoints.scss.

import "@aneo-org/design-react/breakpoints.scss";

Bruk av komponenter

Importer komponenter eller funksjoner som named imports.

import { Button, Input } from "@aneo-org/design-react/clientComponents";

Hvorfor varierer pathen til komponentene?

For å støtte React serverkomponenter, kan ikke klientkomponenter være i samme bundle som serverkomponenter.

Komponenter som bruker klientfunksjonalitet som useState, useEffect og context vil derfor kunne hentes fra /clientComponents, mens serverkomponenter vil hentes fra /serverComponents.

import { Heading } from "@aneo-org/design-react/serverComponents";
import { Button } from "@aneo-org/design-react/clientComponents";

Installasjon kun med design tokens

Tokens er tilgjengelige som CSS, SCSS og JavaScript. Først installer avhengigheter for @aneo-org/design-tokens:

npm install @aneo-org/design-tokens

Oppsett med design tokens

For CSS, importer:

import "@aneo-org/design-tokens/tokens.css";

For SCSS, importer:

import "@aneo-org/design-tokens/tokens.scss";

For JavaScript, importer:

import {
  LayoutBreakpointExtraLarge,
  LayoutBreakpointExtraSmall,
  LayoutBreakpointLarge,
  LayoutBreakpointMedium,
  LayoutBreakpointSmall
} from "@aneo-org/design-tokens";

Reset-CSS

Designsystemet bruker CSS-layers for å deklarere stiler. Dette er gjort for å gi designsystemet lavest mulig presedens, slik at det er enkelt å overstyre stilene ved behov. En ulempe med denne tilnærmingen er at typiske reset-stiler vil kunne overstyre designsystem-stilene.

Det finnes to forskjellige fremgangsmåter for å løse dette. Enten kan man definere et eget CSS-lag som ligger under designsystemet sine lag, eller så kan man legge reset-stilene i et eget aneo.reset lag som er definert av designsystemet.

Under følger oppskrifter for begge fremgangsmåter.

Lage eget reset-lag

Hvis du vil lage ditt eget reset-lag kan det gjøres på følgende måte. Hvis du for eksempel har følgende reset-CSS:

p, h1, h2 {
  display: block;
}

For å gjøre denne reset-koden kompatibel kan følgende gjøres:

@layer my-reset, aneo;

@layer my-reset {
  p, h1, h2 {
    display: block;
  }
}

For at dette skal fungere må reset-CSSen importeres før designsystem-CSSen, slik at lagene opprettes i riktig rekkefølge. Når designsystem-CSSen importeres vil den deklarere sine egne lag i sin rekkefølge, og det vil ikke lenger være mulig å overstyre rekkefølgen og legge lag under designsystem-lagene.

Bruke eksisterende reset-lag

Designsystem-CSSen deklarerer allerede et lag som kan brukes for å sette inn stiler som skal ha lavere presedens enn designsystem-stilene. Dette laget heter aneo.reset. Hvis du vil bruke dette laget til å resette stilene kan det gjøres på følgende måte.

Ved f.eks denne CSSen:

p, h1, h2 {
  display: block;
}

Kan man gi den lavere presedens enn designsystem-CSSen ved hjelp av:

@layer aneo.reset {
  p, h1, h2 {
    display: block;
  }
}