@fremtind/jkl-typography-react

@fremtind/jkl-typography-react

Denne pakken inneholder komponenter for spesifikke typografiske komponenter, slik som Label, SupportLabel og Link, som brukes av flere av komponentene i Jøkul. Bruk av andre typografiske elementer, som overskrifter og avsnittstiler, se siden om typografi i portalen.

NB! React-komponentene for overskrifter og avsnittstiler i denne pakken er utgående. Se migrasjonsguiden for jkl-core@3.0.0 for nærmere informasjon.

Beskrivelse

Se portalen for bruk og prinsipper.

Kom i gang

Lær hvordan du kan ta i bruk Jøkul

Bruk av React-pakken

Installasjon

1. Installér pakken med yarn add @fremtind/jkl-typography-react eller npm i @fremtind/jkl-typography-react. Stil-pakken blir automatisk installert som en avhengighet.

2. Importer komponenten(e) du trenger i prosjektet ditt. Stilen hentes fra jkl-core:

import { Label, SupportLabel, Link } from "@fremtind/jkl-typography-react";
import "@fremtind/jkl-core/core.min.css";

Bruk

Label

Denne komponenten brukes for å lage etiketter for skjemafelter. Du velger størrelse på labelet ved hjelp av variant-prop-en, som kan ha verdiene "small", "medium" og "large". Label har to forskjellige typer bruk.

1. Du kan plassere den inne i et <label>-element sammen med feltet den skal være etikett for:

<label>
    <Label>Fødselsnummer</Label> // returnerer et <span>-element
    <input type="number" name="fnr" value="" />
</label>

1. Du kan bruke den frittstående, rendret som et <label>-element for et spesifisert skjemaelement:

<Label standAlone htmlFor="mitt-skjemafelt">Fornavn</Label>
<input type="text" id="mitt-skjemafelt" name="fornavn" value="" />

NB! Alle skjemafelter i Jøkul (unntatt BaseInputField) bruker allerede Label. Du trenger kun denne komponenten om du lager dine egne typer skjemafelter.

SupportLabel

Denne komponenten brukes for å vise hjelpetekst og feilmelding i tilknytning til et skjemafelt. Begge meldingene tas som props til komponenten, og dersom errorLabel er gitt vil kun denne vises.

<label>
    <Label>Fødselsnummer</Label> // returnerer et <span>-element
    <input type="number" name="fnr" value="" />
    <SupportLabel helpLabel="Elleve siffer" errorMessage={isInvalid ? "Fødselsnummer må inneholde akkurat elleve siffer" : undefined} />
</label>

NB! Alle skjemafelter i Jøkul (unntatt BaseInputField) bruker allerede SupportLabel. Du trenger kun denne komponenten om du lager dine egne typer skjemafelter.

Link

Denne komponenten genererer en tekstlenke med riktig formatering. Bruk prop-en negative om den skal vises på mørk bakgrunn.

<p>Les <Link href="/vilkar">vilkårene</Link> nøye før du signerer</p>

<div className="dark-bg">
    <p>Les <Link negative href="/vilkar">vilkårene</Link> nøye før du signerer</p>
</div>