@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>

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>

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