From 6c964295b85f2bd47d55dcf0eb7fc0eba0c1585b Mon Sep 17 00:00:00 2001 From: Persijn Kwekkeboom Date: Tue, 25 Jun 2024 19:36:13 +0200 Subject: [PATCH] refactor(storefront): Migrate page to new routing Migrate all pages to app router Migrate some components to new routing structure Migrated all metadata to new export Removed old Meta component --- apps/storefront/app/(frontpage)/page.mdx | 12 +- .../api/tokens.ts => app/api/tokens/route.ts} | 12 +- .../app/bloggen/(frontpage)/layout.tsx | 2 +- .../app/bloggen/(frontpage)/page.mdx | 9 +- .../_components/PostLayout/PostLayout.tsx | 7 +- .../page.mdx} | 10 +- .../brukerreise-for-din-tjeneste/page.mdx} | 10 +- .../felles-innsiktsbase/page.mdx} | 9 +- .../i-innbyggeren-sine-sko/page.mdx} | 10 +- .../innholdsarbeid/andre-ressurser/page.mdx} | 9 +- .../innholdsarbeid/skriverad/page.mdx} | 10 +- .../innholdsarbeid/skumlesing/page.mdx} | 9 +- .../index.mdx => app/god-praksis/page.mdx} | 11 +- .../forsta-synsnedsettelse/page.mdx} | 11 +- .../tilgjengelighet/kontrast/page.mdx} | 110 ++++++++++-------- .../designelementer/design-tokens/page.mdx} | 10 +- .../designelementer/farger/page.mdx} | 11 +- .../designelementer/ikoner/page.mdx} | 9 +- .../designelementer/skygger/page.mdx} | 10 +- .../storrelser-og-avstander/page.mdx} | 10 +- .../designelementer/typografi/page.mdx} | 11 +- .../for-designere/bidra-i-figma/page.mdx} | 10 +- .../for-designere/eget-tema/page.mdx} | 13 ++- .../for-designere/fargesystem/page.mdx} | 10 +- .../hent-oppdateringer/page.mdx} | 10 +- .../for-designere/kom-i-gang/page.mdx} | 11 +- .../grunnleggende/for-designere/terskel.txt | 0 .../for-utviklere/endringslogg/page.mdx} | 9 +- .../for-utviklere/kom-i-gang/page.mdx} | 9 +- .../for-utviklere/komposisjon/page.mdx} | 10 +- .../designprinsipper-ffb/page.mdx} | 10 +- .../introduksjon/designprinsipper/page.mdx} | 10 +- .../introduksjon/om-designsystemet/page.mdx} | 10 +- .../introduksjon/slack/page.mdx} | 9 +- .../introduksjon/tilgjengelighet/page.mdx} | 10 +- .../introduksjon/verdier/page.mdx} | 9 +- .../index.mdx => app/grunnleggende/page.mdx} | 13 ++- .../personvernerklaering/page.mdx} | 9 +- apps/storefront/app/komponenter/layout.tsx | 2 +- .../dato.mdx => app/monstre/dato/page.mdx} | 9 +- .../monstre/feilmeldinger/page.mdx} | 11 +- .../monstre/handlinger/page.mdx} | 10 +- .../monstre/innlogging/page.mdx} | 10 +- .../monstre/navigering/page.mdx} | 10 +- .../obligatoriske-og-valgfrie-felt/page.mdx} | 10 +- .../index.mdx => app/monstre/page.mdx} | 12 +- .../{SubPages => }/Banner/Banner.module.css | 0 .../{SubPages => }/Banner/Banner.tsx | 0 apps/storefront/components/Header/Header.tsx | 5 +- .../components/Link/Github/GithubLink.tsx | 6 +- apps/storefront/components/Meta/Meta.tsx | 46 -------- apps/storefront/components/Meta/index.ts | 1 - .../components/SidebarMenu/SidebarMenu.tsx | 4 +- apps/storefront/components/index.ts | 1 - .../layouts/MenuPageLayout/MenuPageLayout.tsx | 19 ++- .../NavMenuPageLayout/NavMenuPageLayout.tsx | 8 +- .../layouts/NavPageLayout/NavPageLayout.tsx | 9 +- apps/storefront/pages/_app.tsx | 24 ---- 58 files changed, 296 insertions(+), 365 deletions(-) rename apps/storefront/{pages/api/tokens.ts => app/api/tokens/route.ts} (76%) rename apps/storefront/{pages/god-praksis/brukerinnsikt/brukergrupper-som-er-digitalt-sarbare.mdx => app/god-praksis/brukerinnsikt/brukergrupper-som-er-digitalt-sarbare/page.mdx} (95%) rename apps/storefront/{pages/god-praksis/brukerinnsikt/brukerreise-for-din-tjeneste.mdx => app/god-praksis/brukerinnsikt/brukerreise-for-din-tjeneste/page.mdx} (88%) rename apps/storefront/{pages/god-praksis/brukerinnsikt/felles-innsiktsbase.mdx => app/god-praksis/brukerinnsikt/felles-innsiktsbase/page.mdx} (97%) rename apps/storefront/{pages/god-praksis/brukerinnsikt/i-innbyggeren-sine-sko.mdx => app/god-praksis/brukerinnsikt/i-innbyggeren-sine-sko/page.mdx} (89%) rename apps/storefront/{pages/god-praksis/innholdsarbeid/andre-ressurser.mdx => app/god-praksis/innholdsarbeid/andre-ressurser/page.mdx} (76%) rename apps/storefront/{pages/god-praksis/innholdsarbeid/skriverad.mdx => app/god-praksis/innholdsarbeid/skriverad/page.mdx} (94%) rename apps/storefront/{pages/god-praksis/innholdsarbeid/skumlesing.mdx => app/god-praksis/innholdsarbeid/skumlesing/page.mdx} (94%) rename apps/storefront/{pages/god-praksis/index.mdx => app/god-praksis/page.mdx} (92%) rename apps/storefront/{pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx => app/god-praksis/tilgjengelighet/forsta-synsnedsettelse/page.mdx} (75%) rename apps/storefront/{pages/god-praksis/tilgjengelighet/kontrast.mdx => app/god-praksis/tilgjengelighet/kontrast/page.mdx} (87%) rename apps/storefront/{pages/grunnleggende/designelementer/design-tokens.mdx => app/grunnleggende/designelementer/design-tokens/page.mdx} (92%) rename apps/storefront/{pages/grunnleggende/designelementer/farger.mdx => app/grunnleggende/designelementer/farger/page.mdx} (80%) rename apps/storefront/{pages/grunnleggende/designelementer/ikoner.mdx => app/grunnleggende/designelementer/ikoner/page.mdx} (95%) rename apps/storefront/{pages/grunnleggende/designelementer/skygger.mdx => app/grunnleggende/designelementer/skygger/page.mdx} (88%) rename apps/storefront/{pages/grunnleggende/designelementer/storrelser-og-avstander.mdx => app/grunnleggende/designelementer/storrelser-og-avstander/page.mdx} (91%) rename apps/storefront/{pages/grunnleggende/designelementer/typografi.mdx => app/grunnleggende/designelementer/typografi/page.mdx} (95%) rename apps/storefront/{pages/grunnleggende/for-designere/bidra-i-figma.mdx => app/grunnleggende/for-designere/bidra-i-figma/page.mdx} (97%) rename apps/storefront/{pages/grunnleggende/for-designere/eget-tema.mdx => app/grunnleggende/for-designere/eget-tema/page.mdx} (96%) rename apps/storefront/{pages/grunnleggende/for-designere/fargesystem.mdx => app/grunnleggende/for-designere/fargesystem/page.mdx} (95%) rename apps/storefront/{pages/grunnleggende/for-designere/hent-oppdateringer.mdx => app/grunnleggende/for-designere/hent-oppdateringer/page.mdx} (87%) rename apps/storefront/{pages/grunnleggende/for-designere/kom-i-gang.mdx => app/grunnleggende/for-designere/kom-i-gang/page.mdx} (95%) rename apps/storefront/{pages => app}/grunnleggende/for-designere/terskel.txt (100%) rename apps/storefront/{pages/grunnleggende/for-utviklere/endringslogg.mdx => app/grunnleggende/for-utviklere/endringslogg/page.mdx} (83%) rename apps/storefront/{pages/grunnleggende/for-utviklere/kom-i-gang.mdx => app/grunnleggende/for-utviklere/kom-i-gang/page.mdx} (82%) rename apps/storefront/{pages/grunnleggende/for-utviklere/komposisjon.mdx => app/grunnleggende/for-utviklere/komposisjon/page.mdx} (96%) rename apps/storefront/{pages/grunnleggende/introduksjon/designprinsipper-ffb.mdx => app/grunnleggende/introduksjon/designprinsipper-ffb/page.mdx} (82%) rename apps/storefront/{pages/grunnleggende/introduksjon/designprinsipper.mdx => app/grunnleggende/introduksjon/designprinsipper/page.mdx} (96%) rename apps/storefront/{pages/grunnleggende/introduksjon/om-designsystemet.mdx => app/grunnleggende/introduksjon/om-designsystemet/page.mdx} (96%) rename apps/storefront/{pages/grunnleggende/introduksjon/slack.mdx => app/grunnleggende/introduksjon/slack/page.mdx} (86%) rename apps/storefront/{pages/grunnleggende/introduksjon/tilgjengelighet.mdx => app/grunnleggende/introduksjon/tilgjengelighet/page.mdx} (86%) rename apps/storefront/{pages/grunnleggende/introduksjon/verdier.mdx => app/grunnleggende/introduksjon/verdier/page.mdx} (96%) rename apps/storefront/{pages/grunnleggende/index.mdx => app/grunnleggende/page.mdx} (95%) rename apps/storefront/{pages/grunnleggende/personvernerklaering.mdx => app/grunnleggende/personvernerklaering/page.mdx} (77%) rename apps/storefront/{pages/monstre/dato.mdx => app/monstre/dato/page.mdx} (88%) rename apps/storefront/{pages/monstre/feilmeldinger.mdx => app/monstre/feilmeldinger/page.mdx} (97%) rename apps/storefront/{pages/monstre/handlinger.mdx => app/monstre/handlinger/page.mdx} (75%) rename apps/storefront/{pages/monstre/innlogging.mdx => app/monstre/innlogging/page.mdx} (93%) rename apps/storefront/{pages/monstre/navigering.mdx => app/monstre/navigering/page.mdx} (87%) rename apps/storefront/{pages/monstre/obligatoriske-og-valgfrie-felt.mdx => app/monstre/obligatoriske-og-valgfrie-felt/page.mdx} (95%) rename apps/storefront/{pages/monstre/index.mdx => app/monstre/page.mdx} (92%) rename apps/storefront/components/{SubPages => }/Banner/Banner.module.css (100%) rename apps/storefront/components/{SubPages => }/Banner/Banner.tsx (100%) delete mode 100644 apps/storefront/components/Meta/Meta.tsx delete mode 100644 apps/storefront/components/Meta/index.ts delete mode 100644 apps/storefront/pages/_app.tsx diff --git a/apps/storefront/app/(frontpage)/page.mdx b/apps/storefront/app/(frontpage)/page.mdx index 1792894d35..c5ea4b077f 100644 --- a/apps/storefront/app/(frontpage)/page.mdx +++ b/apps/storefront/app/(frontpage)/page.mdx @@ -4,16 +4,18 @@ import { PersonChatIcon, } from '@navikt/aksel-icons'; -import { Meta, Section, ImageBanner } from '@components'; +import { Section, ImageBanner } from '@components'; import { BlogCard } from '@blog'; export default ({ children }) => <>{children}; - +export const metadata = { + title: 'Velkommen', + description: + 'Her finner du UI-komponenter, retningslinjer og god praksis for effektiv produktutvikling og helhetlige brukeropplevelser.', +}; + <>{children}; - +export const metadata = { + title: 'Bloggen', + description: 'Beskrivelse', +}; - {Array.from({ length: figureCount }).map((_, index) => ( +export const metadata = { + title: 'Brukergrupper som er digitalt sårbare', + description: + 'Vi har beskrevet seks brukergrupper som er digitalt sårbare. Disse kan brukes som et verktøy i utviklingen av digitale tjenester.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Brukerreise for din tjeneste', + description: + 'Tegn opp en brukerreise for de ulike karakterene i møte med virksomheten, før-under-etter.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Felles innsiktsbibliotek', + description: 'Åpent innsiktsarbeid på tvers av det offentlige', +}; export default ({ children }) => ( +export const metadata = { + title: 'I innbyggeren sine sko', + description: + 'Sett deg inn i innbyggeren sine opplevelser og situasjon ved å spille ut personaen gjennom et gruppearbeid', +}; export default ({ children }) => ( +export const metadata = { + title: 'Andre gode språkressurser', + description: 'Her har vi samlet noen andre gode artikler som angår innhold.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Slik skriver du kort og tydelig', + description: + 'Retningslinjene skal hjelpe oss til å skrive brukertilpasset, klart og helhetlig.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Skumlesing', + description: 'Slik skriver du tekster som er lette å skumlese', +}; export default ({ children }) => ( ( ( /> ); - +export const metadata = { + title: 'God Praksis', + description: + 'Råd og veiledning som kan bidra til å lage bedre helhetlige tjenester samles her.', +}; ## Brukerinnsikt diff --git a/apps/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx b/apps/storefront/app/god-praksis/tilgjengelighet/forsta-synsnedsettelse/page.mdx similarity index 75% rename from apps/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx rename to apps/storefront/app/god-praksis/tilgjengelighet/forsta-synsnedsettelse/page.mdx index d847728338..ae8aa8b730 100644 --- a/apps/storefront/pages/god-praksis/tilgjengelighet/forsta-synsnedsettelse.mdx +++ b/apps/storefront/app/god-praksis/tilgjengelighet/forsta-synsnedsettelse/page.mdx @@ -1,10 +1,11 @@ import { PageLayout } from '@layouts'; -import { Meta, ResponsiveIframe } from '@components'; +import { ResponsiveIframe } from '@components'; - +export const metadata = { + title: 'Forstå synsnedsettelse', + description: + 'Brønnøysundregistrene har undersøkt hvordan mennesker med synsnedsettelser opplever å bruke digitale produkter.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Kontrast', + description: 'WCAG 3.0 foreslår ny kontrastmetode', +}; export default ({ children }) => ( - - - + + Gjeldende regelverk, WCAG 2.1 - - - + + + **1.4.3 Kontrast (minimum) (Nivå AA)**: Kontrastforholdet mellom teksten og bakgrunnen er minst 4,5:1. [1.4.3 Kontrast (minimum), WCAG 2.1 (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-minimum) - - + + **1.4.11 Kontrast for ikke-tekstlig innhold (Nivå AA)**: Den visuelle presentasjonen av det følgende har et kontrastforhold på minst 3:1 mot farge(r) som ligger ved siden av. [1.4.11 Kontrast for ikke-tekstlig innhold, WCAG 2.1 (w3.org)](https://www.w3.org/Translations/WCAG21-no/#non-text-contrast) - - - - + + + +
- - - + + Fremtidig eller strengere: - - - + + + **1.4.6 Kontrast** (forbedret) (Nivå AAA): Den visuelle presentasjonen av tekst og bilder av tekst har et kontrastforhold på minst 7:1, unntatt uvesentlig tekst og skriftstørrelser større enn 18px eller 14px fet. [ 1.4.6 Kontrast (forbedret), WCAG 2.1 (w3.org)](https://www.w3.org/Translations/WCAG21-no/#contrast-enhanced) - - + + **WCAG 2.2: 2.4.13** Focus Appearance (Nivå AAA), om utseende til fokusmarkering krever at fokusindikator har en kontrastverdi på 3:1 mellom samme piksler i fokusert og ikke-fokusert tilstand. [Understanding Success Criterion 2.4.13: Focus Appearance | WAI | W3C](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html) - - + + **WCAG 3** har et krav om farge og kontrast, visuell kontrast i tekst (sølv): Sørg for tilstrekkelig kontrast mellom tekst i forgrunnen og bakgrunnen for teksten. Her brukes det en ny metode, med navn APCA, for å regne ut kontrasten. - - - - + + + + ## Mer presis metode WCAG 3.0 foreslår nå en mer presis metode enn dagens standard, for å kalkulere kontrast og sette terskelverdier. - - - + + + Metoden forbedrer hvordan verdien mellom to farger bestemmes, og skiller også på om fargene er i forgrunnen eller i bakgrunnen. - - + + Den setter også tydelige terskelverdier eller målverdier for valg av font, tekststørrelse og font-vekt. Metoden heter Advanced Perceptual Contrast Algorithm (APCA). - - + + Målet vårt er å ligge over AAA-krav i WCAG 2.1, og vi vil dermed ligge nærmere terskelverdiene i APCA. Det øker sjansen for at vi klarer å oppfylle kravet om at alle, også svaksynte, skal kunne se innholdet på nettstedet. - - - + + + ## I dag bruker vi en høyere standard enn kravene til tilgjengelighet @@ -130,7 +140,7 @@ Vi vet at selv om en løsning oppfyller de konkrete kravene fra regelverket om u Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til universell utforming, men det betyr ikke at innholdet er tilgjengelig eller universelt utformet. Derfor strekker vi oss langt i å også oppfylle de fremtidige WCAG-3 kravene som bruker APCA-metoden. - + **Kontrast i WCAG 2 «luminosity contrast algorithm**
_«I WCAG 2 er kontrast en måleenhet for forskjellen i den opplevde lysintensiteten mellom to farger. Denne forskjellen er beskrevet som et forhold fra 1:1 (for @@ -138,13 +148,13 @@ Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til univer oversettelse. Kontrastene regnes ut ved hjelp av fargenes RGB, HEX eller HSL verdier i tillegg til transparens (alpha), om fargen er tekst, grafikk, forgrunn eller bakgrunn har ingen betydning. - +
- + **Kontrast i WCAG 3 «visual contrast algorithm»**
I WCAG 3 benyttes en visuell-kontrast algoritme som kalles for APCA, det er fremdeles fargeverdiene som benyttes for å kalkulere kontrasten, men også om fargen er @@ -154,7 +164,7 @@ Hvis vi oppfyller metoden i WCAG 2, etterlever vi teknisk sett kravet til univer kontrastverdier vil i APCA kunne få andre verdier fordi en i større grad kalkulerer ut fra øyets evne til å oppfatte farger enn kun den tekniske fargeverdien. - + ## Verktøy for å teste kontrastverdier @@ -179,18 +189,18 @@ Terskelverdiene (over) som viser om kontrasten er godkjent eller ikke, er forenk /> I eksempelet over ser vi at selv om kontrasten som er utregnet til å være lik med WCAG 2-metoden, er graden av lesbarhet ulik for tekstene i variant A og Variant B. -Begge tekstene har 16px stor tekst i normal vekt, og begge variantene har 4,6 til 1 i kontrast. +Begge tekstene har 16px stor tekst i normal vekt, og begge variantene har 4,6 til 1 i kontrast. I variant A har teksten fargen #6D7879og bakgrunnen er hvit. Teksten er sånn passe lesbar. I variant B er teksten svart, og bakgrunnen er farge #6D7879. Teksten er noe mindre lesbar enn variant A.

- + **Bidra til artikkelen?**
Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en e-post på: designsystem@digdir.no eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new). - + +export const metadata = { + title: 'Design Tokens', + description: + 'Design tokens er gjenbrukbare verdier som fungerer som et bindeleddet mellom alle flater.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Farger', + description: + 'Fargesystemet består av globale farger og et semantisk nivå som beskriver hva fargen skal brukes til.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Ikoner', + description: 'Hvordan vi bruker ikoner i komponenter', +}; export default ({ children }) => ( +export const metadata = { + title: 'Skygger', + description: 'Hvordan skygger brukes i Designsystemet', +}; export default ({ children }) => ( +export const metadata = { + title: 'Størrelser og avstander', + description: 'Størrelser og avstander', +}; export default ({ children }) => ( +export const metadata = { + title: 'Typografi', + description: + 'For å presentere innholdet korrekt bruker vi stiler og komponenter for typografi.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Bidra med design', + description: + 'Vi setter pris på at du hjelper oss å forbedre komponenter og design i Figma.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Bruk designsystemet med eget tema', + description: + 'Lær hvordan du kan bruke designsystemet med dine egne profilfarger.', +}; export default ({ children }) => ( `Light theme`. [Les mer om fargesystemet her](/grunnleggende/for-designere/fargesystem). +2. Gå til [next.theme.designsystemet.no](https://next.theme.designsystemet.no). Legg inn dine farger og velg `Kopier` > `Light theme`. [Les mer om fargesystemet her](/grunnleggende/for-designere/fargesystem). 3. Gå til repoet du lagde i steg 1. Lim inn koden du kopierte i steg 2 her: `DittRepo/design-tokens/primitives/colors/light/theme.json`. diff --git a/apps/storefront/pages/grunnleggende/for-designere/fargesystem.mdx b/apps/storefront/app/grunnleggende/for-designere/fargesystem/page.mdx similarity index 95% rename from apps/storefront/pages/grunnleggende/for-designere/fargesystem.mdx rename to apps/storefront/app/grunnleggende/for-designere/fargesystem/page.mdx index df7f5c626b..2198eca51f 100644 --- a/apps/storefront/pages/grunnleggende/for-designere/fargesystem.mdx +++ b/apps/storefront/app/grunnleggende/for-designere/fargesystem/page.mdx @@ -3,12 +3,12 @@ import { Table } from '@digdir/designsystemet-react'; import { PaletteIcon } from '@navikt/aksel-icons'; import { MenuPageLayout } from '@layouts'; -import { Meta, Image, ResponsiveIframe } from '@components'; +import { Image, ResponsiveIframe } from '@components'; - +export const metadata = { + title: 'Sett opp ditt eget fargesystem', + description: 'Her får du hjelp til å sette opp et fargesystem', +}; export default ({ children }) => ( +export const metadata = { + title: 'Hent oppdateringer fra Figma', + description: + 'Hva gjør du når det har kommet en ny versjon av Figma community-filen?', +}; export default ({ children }) => ( +export const metadata = { + title: 'Kom i gang med designsystemet i Figma', + description: + 'hvordan bruke Designsystemet i Figma og hvordan du kan aktivere bibliotekene.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Endringslogg', + description: 'Endringslogg for komponenter', +}; export default ({ children }) => ( +export const metadata = { + title: 'Kom i gang som utvikler', + description: 'All informasjonen du trenger for å komme i gang som utvikler.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Komposisjon', + description: 'Informasjon og bruk av asChild til å løyse komposisjon.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Designprinsipper - Forum for brukskvalitet', + description: + 'Forum for brukskvalitet har gjennomført en temasamling der det ble startet på å definere felles prinsipper mellom flere som jobber med brukskvalitet og brukeropplevelse i offentlig sektor.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Designprinsipper', + description: + 'Vi må sammen definere hva som er en god brukeropplevelse og hvordan vi best kan skape denne.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Om designsystemet', + description: + 'Designsystemet er en felles verktøykasse med grunnleggende UI-komponenter, retningslinjer og mønstre som det er verdifullt å dele på tvers av offentlig sektor.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Slack', + description: 'Diskusjoner, status og sparring', +}; export default ({ children }) => ( +export const metadata = { + title: 'Tilgjengelighet', + description: + 'Designsystemet skal være tilgjengelig for alle, uansett varige eller midlertidig reduserte evner.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Verdier', + description: 'Verdier designsystemet bygges på.', +}; export default ({ children }) => ( ( ( /> ); - - ## Introduksjon Designsystemet inneholder grunnleggende designelementer, mønstre, god praksis og kodede komponenter som gir verdi å dele på tvers av offentlig sektor. diff --git a/apps/storefront/pages/grunnleggende/personvernerklaering.mdx b/apps/storefront/app/grunnleggende/personvernerklaering/page.mdx similarity index 77% rename from apps/storefront/pages/grunnleggende/personvernerklaering.mdx rename to apps/storefront/app/grunnleggende/personvernerklaering/page.mdx index 95a6b0290a..4c437d675c 100644 --- a/apps/storefront/pages/grunnleggende/personvernerklaering.mdx +++ b/apps/storefront/app/grunnleggende/personvernerklaering/page.mdx @@ -1,10 +1,9 @@ import { PageLayout } from '@layouts'; -import { Meta } from '@components'; - +export const metadata = { + title: 'Personvernerklæring', + description: 'Innsamling og behandling av personopplysninger.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Be om dato', + description: 'Hva du skal tenke på når du ber om en dato.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Feilmeldinger i skjema', + description: + 'Slik forteller du brukeren at noe har gått galt eller mangler i et skjema.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Ofte brukte handlinger', + description: + 'Ofte brukte handlinger kan det også ligge forventninger til, og det bør utredes mønstre for vanlige handlinger.', +}; export default ({ children }) => ( +export const metadata = { + title: 'Innlogging og aktørbytte', + description: + 'Hvordan håndterer vi innlogging og aktørbytte på tvers av tjenester?', +}; export default ({ children }) => ( +export const metadata = { + title: 'Navigering', + description: + 'Vi ønsker å finne den beste måten for å håndtere navigering. Hvilke forventninger har brukerne til navigering og hva fungerer best i de ulike kontekstene?', +}; export default ({ children }) => ( +export const metadata = { + title: 'Validering og feilmeldinger', + description: 'Slik forteller du brukeren at noe har gått galt eller mangler.', +}; export default ({ children }) => ( ( ( /> ); - - I rapporten "[Digital hele livet med bedre brukeropplevelse](https://www.digdir.no/sammenhengende-tjenester/digital-hele-livet-med-bedre-brukeropplevelse/4405)" er det funnet flere [konkrete problemer med brukskvalitet](https://github.com/digdir/innsiktsbibliotek/issues/3) som kan forbedres dersom vi samarbeider om å etablere like mønstre på tvers av offentlige tjenester. Når vi bruker etablerte mønstre som innbyggerne kjenner igjen på tvers kan løsningene bli mer intuitive og bidra til mindre digitalt utenforskap. Vi kan samarbeide om mønstre selv om vi ikke bruker de samme tekniske komponentene eller designelementene. For eksempel kan vi hjelpe hverandre å etablere felles konvensjoner rundt interaksjon og forventet oppførsel på komponenter, samt plassering av sentrale elementer. diff --git a/apps/storefront/components/SubPages/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css similarity index 100% rename from apps/storefront/components/SubPages/Banner/Banner.module.css rename to apps/storefront/components/Banner/Banner.module.css diff --git a/apps/storefront/components/SubPages/Banner/Banner.tsx b/apps/storefront/components/Banner/Banner.tsx similarity index 100% rename from apps/storefront/components/SubPages/Banner/Banner.tsx rename to apps/storefront/components/Banner/Banner.tsx diff --git a/apps/storefront/components/Header/Header.tsx b/apps/storefront/components/Header/Header.tsx index 9f53763a6d..303da07ae9 100644 --- a/apps/storefront/components/Header/Header.tsx +++ b/apps/storefront/components/Header/Header.tsx @@ -4,6 +4,7 @@ import Link from 'next/link'; import Image from 'next/image'; import { MenuHamburgerIcon, XMarkIcon } from '@navikt/aksel-icons'; import cl from 'clsx'; +import { usePathname } from 'next/navigation'; import { GithubLogo } from './logos/github-logo'; import { FigmaLogo } from './logos/figma-logo'; @@ -11,7 +12,7 @@ import classes from './Header.module.css'; const Header = () => { const [open, setOpen] = useState(false); - const href = typeof window !== 'undefined' ? window.location.pathname : ''; + const pathName = usePathname() || ''; const menu = [ { @@ -91,7 +92,7 @@ const Header = () => { onClick={() => setOpen(false)} prefetch={false} className={cl( - href.includes(item.url) && classes.active, + pathName === item.url ? classes.active : '', classes.link, 'ds-paragraph--md', 'ds-focus', diff --git a/apps/storefront/components/Link/Github/GithubLink.tsx b/apps/storefront/components/Link/Github/GithubLink.tsx index bc9203dfc9..32a8a1a24a 100644 --- a/apps/storefront/components/Link/Github/GithubLink.tsx +++ b/apps/storefront/components/Link/Github/GithubLink.tsx @@ -2,13 +2,13 @@ import type { HTMLAttributes } from 'react'; import Image from 'next/image'; import { Link } from '@digdir/designsystemet-react'; -import { useRouter } from 'next/router'; +import { usePathname } from 'next/navigation'; export const GithubLink = ({ ...rest }: Omit, 'color'>) => { - const { asPath } = useRouter(); - const href = `https://github.com/digdir/designsystemet/tree/main/apps/storefront/pages${asPath}.mdx`; + const pathName = usePathname(); + const href = `https://github.com/digdir/designsystemet/tree/main/apps/storefront/pages${pathName}/page.mdx`; return ( { - title = `${title} - Designsystemet`; - return ( - - {title} - - - - - - {/* images */} - - - - ); -}; - -// Let's set a default title -Meta.defaultProps = { - title: 'Designsystemet', -}; - -export { Meta }; diff --git a/apps/storefront/components/Meta/index.ts b/apps/storefront/components/Meta/index.ts deleted file mode 100644 index 52be8bb7a4..0000000000 --- a/apps/storefront/components/Meta/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Meta } from './Meta'; diff --git a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx index b3b9ac5b07..2900801c14 100644 --- a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx +++ b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx @@ -83,7 +83,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => { className={cl( classes.link, isItemActive(item2.url, routerPath) && - classes.linkActive, + classes.linkActive, 'ds-paragraph--sm', )} > @@ -103,7 +103,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => { classes.link, classes.linkCompact, isItemActive(item.url, routerPath) && - classes.linkActive, + classes.linkActive, 'ds-paragraph--sm', )} > diff --git a/apps/storefront/components/index.ts b/apps/storefront/components/index.ts index 8c0bf4f9eb..a217e0edc6 100644 --- a/apps/storefront/components/index.ts +++ b/apps/storefront/components/index.ts @@ -11,7 +11,6 @@ export type { ImageSectionProps, } from './ImageSection'; export { MdxContent } from './MdxContent'; -export { Meta } from './Meta'; export { NavigationCard } from './NavigationCard'; export type { NavigationCardProps } from './NavigationCard'; export { ResponsiveIframe } from './ResponsiveIframe'; diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx index 7e609a304d..6748a4b9d1 100644 --- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx +++ b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx @@ -1,13 +1,12 @@ 'use client'; import type * as React from 'react'; -import { useRouter } from 'next/router'; import { Heading } from '@digdir/designsystemet-react'; import { ComponentIcon } from '@navikt/aksel-icons'; import cn from 'clsx'; +import { usePathname } from 'next/navigation'; -import GithubLink from 'components/Link/Github/GithubLink'; -import { Banner } from 'components/SubPages/Banner/Banner'; - +import GithubLink from '../../components/Link/Github/GithubLink'; +import { Banner, BannerHeading, BannerIcon, BannerIngress } from '../../components/Banner/Banner'; import { Container, SidebarMenu, MdxContent } from '../../components'; import classes from './MenuPageLayout.module.css'; @@ -31,20 +30,20 @@ type PageLayoutData = { }; const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => { - const router = useRouter(); + const pathname = usePathname(); return (
{banner && ( - {banner.icon} - {banner.title} - {banner.ingress && {banner.ingress}} + {banner.icon} + {banner.title} + {banner.ingress && {banner.ingress}} )}
- +
{
{data.title} diff --git a/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx b/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx index 547cc8bfdb..558862bd57 100644 --- a/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx +++ b/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx @@ -1,6 +1,6 @@ 'use client'; import type * as React from 'react'; -import { useRouter } from 'next/router'; +import { usePathname } from 'next/navigation'; import { Container, SidebarMenu, MdxContent } from '../../components'; import { @@ -8,7 +8,7 @@ import { BannerHeading, BannerIcon, BannerIngress, -} from '../../components/SubPages/Banner/Banner'; +} from '../../components/Banner/Banner'; import classes from './NavMenuPageLayout.module.css'; @@ -23,7 +23,7 @@ type NavMenuPageLayoutProps = { }; const NavMenuPageLayout = ({ content, banner }: NavMenuPageLayoutProps) => { - const router = useRouter(); + const pathName = usePathname() || ''; return (
@@ -36,7 +36,7 @@ const NavMenuPageLayout = ({ content, banner }: NavMenuPageLayoutProps) => { )}
- +
{ > {banner && ( - {banner.icon} - {banner.title} - {banner.ingress && {banner.ingress}} + {banner.icon} + {banner.title} + {banner.ingress && {banner.ingress}} )} {data && ( diff --git a/apps/storefront/pages/_app.tsx b/apps/storefront/pages/_app.tsx deleted file mode 100644 index 013aed3b87..0000000000 --- a/apps/storefront/pages/_app.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import '../globals.css'; -import '@digdir/designsystemet-css'; -import '@digdir/designsystemet-theme'; - -import type { AppProps } from 'next/app'; -import { Analytics } from '@vercel/analytics/react'; -import { SkipLink } from '@digdir/designsystemet-react'; - -import { Header } from '../components/Header/Header'; -import { Footer } from '../components/Footer/Footer'; - -const MyApp = ({ Component, pageProps }: AppProps) => { - return ( -
- Hopp til hovedinnhold -
- -
- ); -}; - -export default MyApp;