diff --git a/doc-site/components/nve-link-card.md b/doc-site/components/nve-link-card.md index c9281980..3f047521 100644 --- a/doc-site/components/nve-link-card.md +++ b/doc-site/components/nve-link-card.md @@ -43,6 +43,9 @@ Bruk `size` for å endre størrelse. `medium` er standard. Du kan legge til en ekstra tekst under hovedlenkens overskrift ved å bruke `additionalText`-egenskapen. Både overskriften og den tilhørende teksten blir lest opp av skjermlesere, så sørg for at teksten er kortfattet og lett å forstå. +**Merk:** +`additionalText` vises kun på én linje. Hvis teksten er for lang, blir den automatisk avkortet med `...`. + ```html @@ -134,12 +137,39 @@ Se anbefalinger for e-postlenker i seksjonen [Tilgjengelighet](#tilgjengelighet) +## Ikon til venstre + +Du kan legge til et ikon helt til venstre i kortet ved å bruke slot med `slot="icon"`. Dette gir deg fleksibilitet til å vise hvilket som helst ikon først i kortet, uavhengig av hvilket ikon som vises til høyre (styrt av `clickAction`). Ikonet du setter med slot plasseres alltid ytterst til venstre, og får automatisk en størrelse på 24px. Du skal ikke endre størrelsen på dette ikonet med egne props eller CSS – kortet sørger for riktig størrelse og plassering. + + + +```html + + + + + + +``` + + + ## Bruk med klient side-routing i SPA-applikasjoner Når man benytter klientside-routing, for eksempel med `routerLink`, genereres et eget ``-element av rammeverket. I disse tilfellene blir `nve-link-card` pakket inn i en ``. For å unngå ugyldig HTML-struktur med ``-elementer inni hverandre, sjekker `nve-link-card` derfor om dets direkte forelder er et ``. Hvis dette er tilfelle, rendres kortet som et `
` i stedet for et ``. -SKRIV HER AT NOEN RAMMEVERKER STØTTER VISITED!!! ser ut at next js og vue støtter det i spa applikasjoner. verdt å teste i safari tenker jeg - På denne måten beholdes mest funksjonalitet og styling fra `nve-link-card`, samtidig som man unngår semantiske og tekniske problemer med nestede lenker. Bruk av nve-link-card i Vue: @@ -167,26 +197,6 @@ Bruk av nve-link-card i React: ``` -## Besøkt lenke - -I henhold til krav for universell utforming skal besøkte lenker ha `besøkt`-tilstand. De fleste nettlesere håndterer dette automatisk ved å bruke CSS-pseudoklassen `:visited` på lenker som er besøkt. Vi definerer egen styling for besøkte lenker i `global.css`, som hentes inn via tema-filer (for eksempel `varsom.css` eller `nve.css`) som bruker denne pseudoklassen. - -Ved bruk av lenkekomponenter fra JS-rammeverk, kan det i enkelte tilfeller forekomme at `:visited`-tilstanden ikke fungerer som forventet i noen nettlesere. Dersom du opplever dette, kan du aktivere `visited`-egenskapen på `nve-link-card` når den er pakket inn i en rammeverkslenke. ( Denne egenskapen har ingen effekt dersom `nve-link-card` brukes som en selvstendig lenke, ettersom den da støtter `:visited`-tilstanden direkte gjennom nettleseren.). - -For å bruke `visited`-egenskapen må du selv håndtere logikken for besøkte lenker — for eksempel ved å lagre besøkte URL-er i lokal lagring (localStorage). - -Dette er likevel en sjelden problemstilling. Lenkekomponentene i Vue, React og Next.js støtter `:visited` som forventet, og du trenger som regel ikke gjøre noe spesielt. Bruker du et annet rammeverk, anbefaler vi å teste om `:visited`-tilstanden settes korrekt i DevTools før du tar i bruk `visited`-egenskapen. - - - -```html - - - -``` - - - ## Tilgjengelighet ### Retningslinjer diff --git a/src/components/nve-icon/offline-icons.ts b/src/components/nve-icon/offline-icons.ts index 3b95c317..cfe28ea2 100644 --- a/src/components/nve-icon/offline-icons.ts +++ b/src/components/nve-icon/offline-icons.ts @@ -7,14 +7,17 @@ * velg aktuelt ikon, velg 24px størrelse og svart farge og "copy icon to clipboard" */ export const offlineIcons: { [key: string]: string } = { + arrow_forward: ``, check_circle: '', chevron_backward: ``, chevron_forward: ``, close: ``, + download: ``, error: ``, info: ``, lock: ``, + mail: ``, open_in_new: ``, warning: '', diff --git a/src/components/nve-link-card/nve-link-card.component.ts b/src/components/nve-link-card/nve-link-card.component.ts index 23463227..fb129a22 100644 --- a/src/components/nve-link-card/nve-link-card.component.ts +++ b/src/components/nve-link-card/nve-link-card.component.ts @@ -10,8 +10,13 @@ import '../nve-icon/nve-icon.component'; * Komponent som brukes til å navigere til interne, eksterne sider, laste ned filer, eller sende e-post. * For å bruke komponenten på best og tilgjengelig måte les mer i tilgjengelighet seksjonen. * + * Ikonet lengst til venstre i kortet kan settes med og kan være hvilket som helst element. + * Ikonet til høyre styres av clickAction-propen og vises automatisk. + * * @csspart link-card Topp-element * @csspart label Overskriften + * @csspart additional-text Tilleggsbeskrivelse under overskriften + * @slot icon Ikon til venstre i kortet (valgfritt) */ @customElement('nve-link-card') export default class NveLinkCard extends LitElement implements INveComponent { @@ -35,8 +40,6 @@ export default class NveLinkCard extends LitElement implements INveComponent { /** Lenken som brukes for handlinger som intern/ekstern navigering eller e-post */ @property() href: string | undefined = undefined; - /** Brukes for å legge :visited style når lenken kommer fra eksternt rammeverk som f.eks RouterLink i Vue */ - @property({ type: Boolean }) visited: boolean = false; static styles = [styles]; /** @@ -59,6 +62,7 @@ export default class NveLinkCard extends LitElement implements INveComponent { private renderContent() { return html` +