Inneholder grunnstilen til designsystemet Jøkul. Inneholder også et normaliserings-stilark som sørger for at alle nettlesere har samme utgangspunkt når de skal vise en Fremtind-side.

Dersom du skal bygge komponenter for Fremtind, utover de som finnes i Jøkul, bør du bruke variablene her. Det sørger for at farger, sperring, typografisk skala og liknende holder seg oppdatert mot endringer i designsystemet.

Se portalen for bruk og prinsipper.

Installasjon

yarn add @fremtind/jkl-core eller npm i @fremtind/jkl-core.
Importér stil-pakken i prosjektet ditt.

import { initTabListener, Link } from "@fremtind/jkl-core";
initTabListener();

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-core/core.min.css";

// Eller importer stilark via SCSS.
@use "@fremtind/jkl-core/core";

// Bruk Jøkuls mixins, funksjoner og variabler via jkl-modulen.
@use "@fremtind/jkl-core/jkl";

@include jkl.light-mode-variables {
    // ...
}

Bruk

`initTabListener()`

Av tilgjengelighetshensyn viser vi fokusomriss på interaktive elementer når man navigerer en løsning ved hjelp av tastaturet. Normalt blir disse omrissene også vist når man bruker musen for navigasjon, noe vi ikke ønsker.

Hjelpefunksjonen initTabListener() sørger for å sette et flagg på <body> når man navigerer med musen, som skjuler omrissene. Importer og kall funksjonen på rotnivå i prosjektet ditt (der siden rendres).

import { initTabListener } from "@fremtind/jkl-core";

initTabListener();

Kompakt modus

Noen løsninger, spesielt rådgiverløsninger, har behov for å vise veldig mye informasjon på skjermen samtidig. Derfor ønsker vi å tilby kompakte versjoner av komponentene til dette formålet. Vi bruker BEM-modifieren --compact for å markere kompakt variant av en komponent.

For å gjøre det enklere å ha kompakt modus på en hel løsning tillater vi å sette en attributt data-compactlayout på <body> (eller et annet element) slik at alle komponenter inne i dette elementet blir kompakte.

`getValuePair()`

Noen komponenter, som Select og RadioButtons, kan ta inn verdier enten som en streng eller som et ValuePair-objekt med en value og et label. Hjelpefunksjonen getValuePair konstruerer et ValuePair fra en string, for å sikre enkel implementasjon av disse komponentene. Funksjonen sender gjennom ValuePair-objekter uendret:

import { getValuePair } from "@fremtind/jkl-core";

getValuePair("En verdi"); // { label: "En verdi", value: "En verdi" }

const value = { label: "En annen verdi", value: "value2" };
getValuePair(value); // returnerer objektet som det er

Denne er fin å bruke sammen med map() for å rendre valg:

const choices = ["Valg 1", "Valg 2", "Valg 3"];
return choices.map(getValuePair).map((choice) => (
    <option selected={choice.value === selectedValue} value={choice.value}>
        choice.label
    </option>
));

Keywords

FAQs

What is @fremtind/jkl-core?

Is @fremtind/jkl-core popular?

Is @fremtind/jkl-core well maintained?

Package last updated on 01 Sep 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install