Skip to content

Slik skriver vi komponent‐dokumentasjon

Marianne Røsvik edited this page May 14, 2025 · 7 revisions

Generelle regler

  • Komponentnavn skal alltid ha kode-formatering, f.eks Card. (React-komponenter skal alltid ha stor bokstav.)
  • Attributter (props) skal alltid ha kode-formatering, f.eks data-color. (Liten forbokstav)
  • HTML-elementer skal alltid skrives inni krokodilletegn i kode-formatering, f.eks <a>.
  • Språk: Komponentnavn og attributter skal skrives på engelsk. Øvrige beskrivelser og retningslinjer skrives på norsk. 25% av komponentdokumentasjonen skal være på nynorsk.

Struktur på komponent-dokumentasjonen

H1 Navn på komponenten (Engelsk)

Ingress: En kort oppsummering av hva komponenten brukes til. Helst bare ett avsnitt, med de viktigste retningslinjene. Toppen av komponentbeskrivelsen må være kort slik at komponenten vises i det første skjermbildet. Legg resten av retningslinjene i avsnitt lenger ned.

< Komponenten med tilhørende props >

H2 Bruk

Her beskriver utvikler hvordan du teknisk tar den i bruk

H2 Kodeeksempler

Oppsummering av de ulike eksemplene og variantene, hvis nødvendig.

H3 Eksempel 1

Ett avsnitt om dette eksempelet og når det skal brukes. [Eksempel]

H3 Kontrollert

Relevant for alle komponenter som kan kontrolleres. [Eksempel]

H2 Retningslinjer

Generelt avsnitt, hva komponenten er egnet til og ikke, eventuelt med "Gjør dette" og "Ikke gjør dette"-eksempler, men pass på at det ikke blir gjentakelser fra variant-eksemplene.

Passer til:

  • Første punkt
  • Andre punkt

Passer ikke til:

  • Første punkt
  • Andre punkt

H3 Eventuelle underoverskrifter for retningslinjer

...

H2 Tekst

Nødvendige avsnitt om hva du bør tenke på når det gjelder tekst, språk og formulering for komponenten.

H2 Tilgjengelighet

Nødvendige avsnitt om hva du bør tenke på når det gjelder tilgjengelighet/universell utforming. Nevn spesielt det som ikke kommer integrert i komponenten. Her kan vi også skrive om feller du må unngå å gå i. Eventuelt "Gjør dette" og "Ikke gjør dette"-eksempler, men pass på at det ikke blir gjentakelser fra tidligere.

H2 Kjente mangler (hvis tilfelle)

H2 CSS Variabler

Clone this wiki locally