feat(nve-navigation-card): Legg til ny navigasjonskomponent for hovednavigasjon by olmabo · Pull Request #810 · NVE/Designsystem

olmabo · 2026-03-06T07:43:53Z

Intro

PR for å løse issue 809 som innebærer å opprette nve-navigation-card som ny komponent i designsystemet. Baserer seg på skissene fra Figma. Opprettes uten shoelace.

Figma

Figma: Lenke

Beskrivelse

Denne PR-en introduserer nve-navigation-card-komponenten, ment for hovednavigasjon på sider som f.eks. Transportside. Komponenten deler en del likehetstrekk med nve-link-card. Endringene følger designsystemets og Figma-skissenes spesifikasjoner:

Komponentet er laget for grid-oppsett og har min- og max-height.
Ikon (leading icon) skal brukes fra NVE sine illustrasjonsikoner, og skal ikke kombineres med ekstratekst.
Trailing icon (pil) vises kun for spesifikke navigasjons-ikoner: arrow_forward (intern), download (nedlastning av fil), open_in_new (ekstern lenke).
Ekstratekst (additionalText) har maks 3 linjer og trunkeres automatisk av css.
Ikon og additionalText vises aldri samtidig.
Kortet rendres som <a> hvis det ikke er wrappet i lenke, ellers som <div> (for at man kan bruke rammeverks-spesifikke routinger).
Trailing icon har animasjon på hover og pressed.
Alle relevante css-parts er implementert for styling og tilgjengelighet.
Komponenten har h2 for tittel fordi den skal brukes selvstending som hovednavigasjon alene (uten tekstlige titler over seg).

Komponenten har følgende props:

testId: Brukes for testing og sporing av komponenten.
title: Tittel som vises øverst på kortet (må settes).
href: Lenke for navigasjon; gjør kortet klikkbart.
additionalText: Ekstratekst under tittelen (maks 3 linjer, trunkeres).
clickAction: Styrer hva som skjer ved klikk:
- 'internal': Intern navigasjon (default)
- 'download': Nedlasting
- 'external': Ekstern lenke
iconPath: Path til ikon som vises øverst i kortet (dekorativt).

…og animasjon på ikon

doc-site/components/nve-navigation-card.md

amish1188 · 2026-03-06T10:05:07Z

@FrodeKolstad
Jeg synes vi burde unngå å bruke max-height på komponentene våre. Når brukeren setter større fontstørrelse i nettleseren, blir teksten ofte større enn selve kortet, og den går utover kortet. Det er enkelt å teste for oss utviklere, men vi må huske om det når vi sjekker PR-ene på komponentene:

Jeg foreslår at vi fjerner max-height her. Vi kan fortsatt kutte teksten hvis den blir for lang (noe jeg også synes vi egentlig ikke burde gjøre, siden det kan påvirke hvor mye informasjon som formidles til brukerne, men siden dere har bestemt å gjøre det, er det greit. antar ekstra teksten er ikke så viktig her uansett, og det er tittelen som gir mest verdi til alle), og heller la kortet utvide seg naturlig.

github-actions · 2026-03-06T10:37:14Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-810.westeurope.5.azurestaticapps.net

amish1188 · 2026-03-06T11:33:05Z

Jeg ser at ikonene ikke vises i bygget.
Det skjer fordi når VitePress sender filstien til en komponent, sendes den som en string og ikke som en faktisk sti til en fil (så vidt jeg forstår). Derfor må du legge bildene i public/assets og bruke stien /assets/bildenavn hvis du skal bruke bilder gjennom komponenter og ikke direkte i HTML i .md-filen.

Du kan teste dette lokalt ved først å kjøre:

npm run doc:build

og deretter:

npm run doc:preview

Jeg ser også at bygget feiler nå fordi NveTableDemo.vue ikke er wrappet med ClientOnly.

<template>
  <ClientOnly>
    <div class="nve-table-demo">
      <nve-accordion-item variant="secondary" :open="true">
        <div slot="summary">Slå av og på kolonner</div>
        <div class="column-toggles">
          <nve-checkbox
            v-for="col in tableHeaders"
            :key="col.key"
            :checked="!col.hidden"
            @sl-change="() => toggleColumn(col)"
          >
            {{ col.title }}
          </nve-checkbox>```

Så fjern gjerne ikonene fra root/assets og legg dem i public/assets i stedet.

amish1188

Bra jobba her 🙂 La oss vente på Frode før vi merger den.

amish1188 · 2026-03-06T11:42:07Z

src/components/nve-navigation-card/nve-navigation-card.component.ts

+  @property({ type: String }) clickAction: 'internal' | 'download' | 'external' = 'internal';
+
+  /** Path til ikon som vises øverst i kortet (dekorativt) */
+  @property({ type: String }) iconPath: string | undefined = undefined;


Jeg foreslår å gjøre dette om til et slot i stedet. Da får man også mulighet til å bruke for eksempel nve-icon her. Fjern iconPath og la folk bruke prefix-icon slot f.eks

ok na ser jeg at det er kun bestemte ikoner som kan brukes her, da kan du ignorere dette

jeg hadde den som slot først, men tenkte det kunne være lurt å bare ha prop til filen slik at vi hadde mer kontroll på hva som ble lagt inn. Med slot gir man mer frihet og man kan legge inn mye forskjellig, når tvinger vi det til en <img med aria-hidden .. > osv og har mer kontroll. Men her er det mulig å gå for slot også hvis vi tenker det er mer hensiktsmessig.

amish1188 · 2026-03-06T11:43:01Z

src/components/nve-navigation-card/nve-navigation-card.component.ts

+  private renderContent() {
+    return html`
+      <div part="content" class="navigation-card__content">
+        ${this.iconPath


Som nevnt over foreslår jeg å gjøre dette om til et slot.

Du kan fortsatt bruke CSS-klasser på den, men da bør det også stå i dokumentasjonen at man enten må bruke aria-hidden eller alt="".

ok na ser jeg at det er kun bestemte ikoner som kan brukes her, da kan du ignorere dette

amish1188 · 2026-03-06T11:54:06Z

src/components/nve-navigation-card/nve-navigation-card.component.ts

+              class="navigation-card__icon"
+            />`
+          : nothing}
+        <h2 part="title" class="navigation-card__title">${this.title}</h2>


Her er det kanskje litt farlig å hardkode heading-nivået. Vet vi alltid at komponenten ikke vil ligge nestet under en h3-heading? Kanskje vi heller kan legge til en headingLevel-property med default verdi 2?

Tanken er at nav-card-ene skal være selvstendige og ikke underligge h3 osv, men mulig å utvide med en headingLevel-prop her. Med en h2 her så framtvinger vi også litt hvordan vi ønsker å bruke komponenten, som litt selvstending cards ment for hovednavigasjon. Men var også litt usikker her på om man skulle ha det som prop eller ikke, så mulig å gjøre det altså

amish1188 · 2026-03-06T11:56:57Z

src/components/nve-navigation-card/nve-navigation-card.styles.ts

+    background: var(--color-neutrals-background-primary);
+    cursor: pointer;
+    text-decoration: none;
+    transition: border-color 0.2s ease;


Alle transitions skal ha 0.3s. Håper en dag vi kan ha en token for dette som man kan bruke.

amish1188 · 2026-03-06T11:57:32Z

src/components/nve-navigation-card/nve-navigation-card.styles.ts

+  .navigation-card__title {
+    font: var(--typography-heading-small);
+    color: var(--color-neutrals-foreground-primary);
+    transition: color 0.2s ease;


amish1188 · 2026-03-06T12:01:53Z

src/components/nve-navigation-card/nve-navigation-card.styles.ts

+    color: var(--color-brand-foreground-primary);
+    margin-right: var(--spacing-x-small);
+    transition:
+      margin-left 300ms cubic-bezier(0, 0, 0.2, 1),


Siden du har en del repetisjoner her, kunne vi brukt CSS-variabler (du kan sette dem enten på .navigation-card eller :host).

--nav-card-arrow-transition: margin-left 300ms cubic-bezier(0, 0, 0.2, 1), margin-right 300ms cubic-bezier(0, 0, 0.2, 1); --nav-card-arrow-transition-fast: margin-left 100ms cubic-bezier(0, 0, 0.2, 1), margin-right 100ms cubic-bezier(0, 0, 0.2, 1);

amish1188 · 2026-03-06T12:13:37Z

src/components/nve-navigation-card/nve-navigation-card.component.ts

+  @property({ type: String }) testId = '';
+
+  /** Tittel som vises øverst på kortet (må settes) */
+  @property({ type: String }) title = '';


Du bør ikke bruke title her. title er reservert for det vanlige HTML title-attributtet. Bruk heller label, slik som i de andre komponentene.

amish1188 · 2026-03-06T12:40:48Z

src/components/nve-navigation-card/nve-navigation-card.component.ts

+@customElement('nve-navigation-card')
+export default class NveNavigationCard extends LitElement implements INveComponent {
+  /** Test ID som kan brukes i testing og sporing */
+  @property({ type: String }) testId = '';


@property({type: String}) testId: string | undefined = undefined;

og sa i html malen

testid=${ifDefined(this.testId)}>

ellers skal testId vises i DOM-en selv om den er tom

amish1188 · 2026-03-06T13:34:04Z

src/components/nve-navigation-card/nve-navigation-card.styles.ts

+    text-underline-offset: 16%;
+  }
+
+  .navigation-card:focus {


Bruk heller :focus-visible her, med mindre kortet skal fokuseres når det klikkes på.

…di, ryddet opp i CSS transitions med variabler, og oppdatert dokumentasjon og eksempler etter PR-tilbakemeldinger

…for å fikse tester med testid og tittel

github-actions · 2026-03-06T14:06:11Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-meadow-0c645bd03-810.westeurope.5.azurestaticapps.net

olmabo added 3 commits March 5, 2026 15:11

feat(nve-navigation-card): legg til ny navigasjonskomponent

4edd6f5

test(nve-navigation-card): legg til tester for komponenten

1327332

feat(nve-navigation-card): legg til støtte for clickAction-varianter …

170bb61

…og animasjon på ikon

olmabo requested review from NVEJoel, amish1188, gruble, lisamarimyreneNVE, malingranlynve and tomapedersen as code owners March 6, 2026 07:43

tomapedersen reviewed Mar 6, 2026

View reviewed changes

doc-site/components/nve-navigation-card.md Outdated Show resolved Hide resolved

doc-site/components/nve-navigation-card.md Show resolved Hide resolved

amish1188 requested changes Mar 6, 2026

View reviewed changes

amish1188 reviewed Mar 6, 2026

View reviewed changes

olmabo added 2 commits March 6, 2026 14:54

fix(nve-navigation-card): vis testid-attributt kun når testId har ver…

54aabec

…di, ryddet opp i CSS transitions med variabler, og oppdatert dokumentasjon og eksempler etter PR-tilbakemeldinger

fix(nve-navigation-card): rettet testid-attributt og label rendering …

aba1352

…for å fikse tester med testid og tittel

Conversation

olmabo commented Mar 6, 2026

Intro

Figma

Beskrivelse

Komponenten har følgende props:

Uh oh!

Uh oh!

Uh oh!

amish1188 commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 6, 2026

Uh oh!

amish1188 commented Mar 6, 2026

Uh oh!

amish1188 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amish1188 Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

amish1188 commented Mar 6, 2026 •

edited

Loading

amish1188 Mar 6, 2026 •

edited

Loading