@artsdatabanken/components

Web Components for the Artsdatabanken design system — built with Lit, works in Angular, React 19+, Drupal, and any framework that supports custom elements.

Installasjon

npm install @artsdatabanken/components @artsdatabanken/tokens

Bruk

Importer tokens globalt i CSS:

@import '@artsdatabanken/tokens';

Registrer komponenter i JavaScript:

import '@artsdatabanken/components';

Eller importer kun det du trenger:

import '@artsdatabanken/components/button';

Bruk i HTML:

<adb-button variant="primary" color="accent">Lagre</adb-button>

Komponenter

<adb-button>

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | Visuell vekt | | color | 'accent' \| 'danger' | 'accent' | Fargetema (ignoreres for tertiary) | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | disabled | boolean | false | Deaktiver knappen | | href | string | — | Når satt, rendres <a> i stedet for <button> | | target | '_self' \| '_blank' \| '_parent' \| '_top' | — | Lenke-mål (kun med href) | | download | string | — | Filnavn for nedlasting (kun med href) | | rel | string | — | Lenkerelasjoner (auto noopener noreferrer ved _blank) | | aria-controls | string | — | ID-en til elementet knappen styrer | | aria-expanded | 'true' \| 'false' | — | Om det kontrollerte elementet er åpent |

Slots:

| Slot | Beskrivelse | |---|---| | (default) | Knappetekst | | icon-start | Ikon før teksten | | icon-end | Ikon etter teksten |

CSS Parts:

• base — det indre <button>-elementet, for tilpasning via ::part(base)

Eksempler:

<!-- Primærknapp -->
<adb-button>Send inn</adb-button>

<!-- Sekundær fareknapp -->
<adb-button variant="secondary" color="danger">Slett</adb-button>

<!-- Lenkeknapp — rendrer <a> internt -->
<adb-button href="/artskart" variant="secondary">Gå til Artskart</adb-button>

<adb-icon-button>

Sirkulær ikon-only knapp. aria-label er påkrevd.

import '@artsdatabanken/components/icon-button';

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | Visuell vekt | | color | 'accent' \| 'danger' | 'accent' | Fargetema | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | disabled | boolean | false | Deaktiver knappen | | aria-label | string | — | Påkrevd — beskriver handlingen |

<adb-icon-button aria-label="Lukk dialog">
  <adb-icon name="close"></adb-icon>
</adb-icon-button>

<adb-minimal-button>

Transparent ikonknapp for verktøylinjer og mindre fremtredende handlinger.

import '@artsdatabanken/components/minimal-button';

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'default' \| 'attention' | 'default' | Default (accent) eller Attention (fare) | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | disabled | boolean | false | Deaktiver knappen | | aria-label | string | — | Påkrevd — beskriver handlingen |

<adb-minimal-button aria-label="Søk">
  <adb-icon name="search"></adb-icon>
</adb-minimal-button>

<adb-accordion> / <adb-accordion-item>

Trekkspill bygget på native <details>/<summary>.

import '@artsdatabanken/components/accordion';
import '@artsdatabanken/components/accordion-item';

<adb-accordion> (wrapper):

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'neutral' \| 'subtle' | 'neutral' | Visuell stil |

<adb-accordion-item> (element):

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | heading | string | — | Overskriftstekst | | help-text | string | — | Sekundærtekst etter overskriften | | open | boolean | false | Om elementet er utvidet |

Slots: heading, help-text, badge, (default).

<adb-accordion>
  <adb-accordion-item heading="Overskrift" help-text="hjelpetekst">
    <span slot="badge">42</span>
    <p>Innhold som vises når elementet er åpent.</p>
  </adb-accordion-item>
</adb-accordion>

<adb-alert>

Varsel-komponent for tilbakemeldinger — feil, advarsler, info, suksess og nøytrale meldinger.

import '@artsdatabanken/components/alert';

| Attributt | Type | Standard | Beskrivelse | |---|---|---|---| | variant | 'danger' \| 'warning' \| 'info' \| 'success' \| 'neutral' | 'info' | Semantisk variant | | type | 'default' \| 'inline' | 'default' | Boks (default) eller inline | | size | 'sm' \| 'md' | 'md' | Størrelse (kun inline) | | heading | string | '' | Overskrift | | global | boolean | false | Kant-til-kant (ingen border-radius) | | closable | boolean | false | Vis lukkeknapp | | auto-close | boolean | false | Skjul ved lukking |

Slots: heading, meta (Space Mono 12px), default (brødtekst)

Events: adb-close — utløses ved klikk på lukkeknappen

<adb-alert variant="warning" closable heading="Planlagt vedlikehold">
  <span slot="meta">31. januar 2025 kl. 08:00</span>
  <p>Tjenesten vil være utilgjengelig i perioden 08:00–10:00.</p>
</adb-alert>

<!-- Inline -->
<adb-alert variant="success" type="inline" heading="Sitering kopiert"></adb-alert>

CDN

For bruk uten npm — Lit er inkludert i bundelen:

<link rel="stylesheet" href="https://cdn.example.com/@artsdatabanken/[email protected]/tokens.css" />
<script type="module" src="https://cdn.example.com/@artsdatabanken/[email protected]/cdn/adb-components.js"></script>

<adb-search>

Søkefelt med valgfri søk-knapp.

<!-- Med knapp (standard) -->
<adb-search placeholder="Søk i arter" button-variant="filled"></adb-search>

<!-- Uten knapp (frittstående) -->
<adb-search variant="standalone" placeholder="Søk"></adb-search>

| Egenskap | Type | Standard | Beskrivelse | |---|---|---|---| | size | 'xsm' \| 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | variant | 'with-button' \| 'standalone' | 'with-button' | Layout-variant | | button-variant | 'filled' \| 'outlined' | 'outlined' | Knappens visuelle stil | | placeholder | string | 'Søk i [type innhold]' | Plassholdertekst | | value | string | '' | Gjeldende verdi | | disabled | boolean | false | Deaktiverer feltet | | label | string | 'Søk' | aria-label for tilgjengelighet | | button-text | string | 'Søk' | Tekst i knappen |

Hendelser: adb-search, adb-input, adb-clear

CSS-variabel: --adb-search-width — overstyr bredden på inndatafeltet.

<adb-logo>

Artsdatabankens logo — logosymbol + navnetrekk. Støtter norsk (Bokmål/Nynorsk) og engelsk, tre størrelser, og lenke-atferd.

<!-- Standard (norsk, medium) -->
<adb-logo></adb-logo>

<!-- Som lenke -->
<adb-logo href="https://artsdatabanken.no"></adb-logo>

<!-- Engelsk, stor -->
<adb-logo language="en" size="lg"></adb-logo>

| Egenskap | Type | Standard | Beskrivelse | |------------|-------------------------|----------|-----------------------------------------------------------| | href | string | — | Gjør logoen til en lenke | | language | 'nb' \| 'nn' \| 'en' | 'nb' | Språkvariant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse | | tooltip | string | Auto | Tooltip-tekst (brukes kun når href er satt) |

CSS-deler: symbol, logotype, link

<adb-avatar>

Logo kun som symbol — brukes til profilbilder på sosiale medier og kompakte flater.

<adb-avatar background="rounded"></adb-avatar>
<adb-avatar background="circle" size="lg"></adb-avatar>

| Egenskap | Type | Standard | Beskrivelse | |--------------|------------------------------------------------|----------|---------------| | background | 'none' \| 'square' \| 'rounded' \| 'circle' | 'none' | Bakgrunnsform | | size | 'sm' \| 'md' \| 'lg' | 'md' | Størrelse |

CSS-deler: symbol, background

Verktøy

markExternalLinks(container, options)

Automatisk merking av eksterne lenker. Brukes med lenkestilene fra @artsdatabanken/tokens/link.

import { markExternalLinks } from '@artsdatabanken/components/utils';

markExternalLinks(document, {
  whitelistedHosts: ['artsdatabanken.no', 'lister.artsdatabanken.no'],
});

| Parameter | Type | Standard | Beskrivelse | |---|---|---|---| | container | HTMLElement \| Document | document | Elementet som skannes | | options.whitelistedHosts | string[] | [] | Vertsnavn som regnes som interne | | options.srText | string | '(ekstern lenke)' | Skjermlesertekst | | options.srOnlyClass | string | 'adb-sr-only' | CSS-klasse for skjult tekst |

Framework-integrasjon

• Angular: Fungerer direkte — legg til CUSTOM_ELEMENTS_SCHEMA i modulen
• React 19+: Fungerer direkte — custom elements støttes nativt
• Drupal + Vite: Importer i JavaScript entry-filen; bruk :not(:defined) CSS for å unngå FOUC

Se dokumentasjonen for detaljerte integrasjonsguider.

Lisens

Apache 2.0