refactor(storefront): Migrate page to new routing

Migrate all pages to app/ routing
Migrate some components to new routing structure

apps/storefront/app/(frontpage)/layout.tsx

@@ -70,7 +70,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           <Container className={classes.container}>
             <div className={classes.text}>
               <div className={classes.betaTag}>Beta</div>
-              <Heading size='lg'>
+              <Heading size='large'>
                 Designsystemet hjelper deg å lage gode digitale tjenester
               </Heading>
             </div>

apps/storefront/pages/api/tokens.ts → apps/storefront/app/api/tokens/route.ts

@@ -1,16 +1,13 @@
 import { promises as fs } from 'fs';
 import path from 'path';
 
-import type { NextApiRequest, NextApiResponse } from 'next';
+import { NextResponse } from 'next/server';
 
 type outputObjType = {
   [key: string]: string;
 };
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse,
-) {
+export async function GET() {
   //Read the json data file data.json
   const tokensDirectory = path.join(process.cwd(), 'tokens');
   const fileContents = await fs.readFile(
@@ -27,5 +24,8 @@ export default async function handler(
     const itemArr = fileContentsArr[i].split(':');
     outputObj[itemArr[0].replace('\n  --', '')] = itemArr[1];
   }
-  res.status(200).json(outputObj);
+  return NextResponse.json({
+    status: 200,
+    body: outputObj
+  });
 }

apps/storefront/app/bloggen/(frontpage)/layout.tsx

@@ -6,7 +6,7 @@ import {
   Banner,
   BannerIcon,
   BannerHeading,
-} from 'components/SubPages/Banner/Banner';
+} from 'components/Banner/Banner';
 
 import classes from './layout.module.css';
 

apps/storefront/pages/god-praksis/tilgjengelighet/kontrast.mdx → apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx

@@ -1,4 +1,13 @@
-import { Card, List } from '@digdir/designsystemet-react';
+import {
+  Card,
+  CardContent,
+  List,
+  ListRoot,
+  ListHeading,
+  ListUnordered,
+  ListItem,
+
+} from '@digdir/designsystemet-react';
 
 import { Meta, Image } from '@components';
 import { PageLayout } from '@layouts';
@@ -29,93 +38,93 @@ For å sikre god lesbarhet skal all tekst ha tilstrekkelig kontrast mot bakgrunn
 Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjenester. Web Content Accessibility Guidelines (WCAG) inneholder suksesskriterier og forslag til løsninger for å lykkes. Men det er ikke samsvar mellom dagens kontrastregler og kravet om at alle skal kunne se innholdet.
 
 <Card color='brand3'>
-  <Card.Content>
-    <List.Root>
-      <List.Heading
+  <CardContent>
+    <ListRoot>
+      <ListHeading
         level={3}
         size='xs'
       >
         Gjeldende regelverk, WCAG 2.1
-      </List.Heading>
-      <List.Unordered>
-        <List.Item>
+      </ListHeading>
+      <ListUnordered>
+        <ListItem>
           **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)
-        </List.Item>
-        <List.Item>
+        </ListItem>
+        <ListItem>
           **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)
-        </List.Item>
-      </List.Unordered>
-    </List.Root>
-  </Card.Content>
+        </ListItem>
+      </ListUnordered>
+    </ListRoot>
+  </CardContent>
 </Card>
 
 <br />
 
 <Card color='brand2'>
-  <Card.Content>
-    <List.Root>
-      <List.Heading
+  <CardContent>
+    <ListRoot>
+      <ListHeading
         level={3}
         size='xs'
       >
         Fremtidig eller strengere:
-      </List.Heading>
-      <List.Unordered>
-        <List.Item>
+      </ListHeading>
+      <ListUnordered>
+        <ListItem>
           **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)
-        </List.Item>
-        <List.Item>
+        </ListItem>
+        <ListItem>
           **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)
-        </List.Item>
-        <List.Item>
+        </ListItem>
+        <ListItem>
           **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.
-        </List.Item>
-      </List.Unordered>
-    </List.Root>
-  </Card.Content>
+        </ListItem>
+      </ListUnordered>
+    </ListRoot>
+  </CardContent>
 </Card>
 
 ## Mer presis metode
 
 WCAG 3.0 foreslår nå en mer presis metode enn dagens standard, for å kalkulere kontrast og sette terskelverdier.
 
-<List.Root>
-  <List.Unordered>
-    <List.Item>
+<ListRoot>
+  <ListUnordered>
+    <ListItem>
       Metoden forbedrer hvordan verdien mellom to farger bestemmes, og skiller
       også på om fargene er i forgrunnen eller i bakgrunnen.
-    </List.Item>
-    <List.Item>
+    </ListItem>
+    <ListItem>
       Den setter også tydelige terskelverdier eller målverdier for valg av font,
       tekststørrelse og font-vekt. Metoden heter Advanced Perceptual Contrast
       Algorithm (APCA).
-    </List.Item>
-    <List.Item>
+    </ListItem>
+    <ListItem>
       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.
-    </List.Item>
-  </List.Unordered>
-</List.Root>
+    </ListItem>
+  </ListUnordered>
+</ListRoot>
 
 ## I dag bruker vi en høyere standard enn kravene til tilgjengelighet
 
@@ -130,21 +139,21 @@ 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.
 
 <Card color='brand3'>
-  <Card.Content>
+  <CardContent>
     **Kontrast i WCAG 2 «luminosity contrast algorithm** <br />
     _«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
     eksempel hvit på hvit) til 21:1 (for eksempel svart på hvit).»_ – WebAIM, vår
     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.
-  </Card.Content>
+  </CardContent>
 </Card>
 
 <br />
 
 <Card color='brand2'>
-  <Card.Content>
+  <CardContent>
     **Kontrast i WCAG 3 «visual contrast algorithm»** <br />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 +163,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.
-  </Card.Content>
+  </CardContent>
 </Card>
 
 ## Verktøy for å teste kontrastverdier
@@ -179,18 +188,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.
 
 <br />
 <br />
 <Card color='brand1'>
-  <Card.Content>
+  <CardContent>
     **Bidra til artikkelen?** <br />
     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).
-  </Card.Content>
+  </CardContent>
 </Card>
 
 <Contributors

apps/storefront/app/komponenter/layout.tsx

@@ -6,7 +6,7 @@ import {
   BannerIcon,
   BannerHeading,
   BannerIngress,
-} from 'components/SubPages/Banner/Banner';
+} from 'components/Banner/Banner';
 
 import classes from './layout.module.css';
 

apps/storefront/components/SubPages/Banner/Banner.tsx → apps/storefront/components/Banner/Banner.tsx

@@ -42,7 +42,7 @@ type BannerHeadingProps = Omit<HeadingProps, 'size'>;
 const BannerHeading = ({ ...props }: BannerHeadingProps) => {
   return (
     <Heading
-      size='lg'
+      size='large'
       {...props}
     />
   );

apps/storefront/components/Header/Header.tsx

@@ -4,14 +4,15 @@ 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';
 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',

apps/storefront/components/SidebarMenu/SidebarMenu.tsx

@@ -41,8 +41,8 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
           <Button
             className={classes.toggleBtn}
             fullWidth
-            size='md'
-            color='neutral'
+            size='medium'
+            color='first'
             variant='secondary'
             onClick={() => setShowMenu(!showMenu)}
             aria-expanded={showMenu}
@@ -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',
                         )}
                       >

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 (
     <div>
       {banner && (
         <Banner color={banner.color}>
-          <Banner.Icon>{banner.icon}</Banner.Icon>
-          <Banner.Heading>{banner.title}</Banner.Heading>
-          {banner.ingress && <Banner.Ingress>{banner.ingress}</Banner.Ingress>}
+          <BannerIcon>{banner.icon}</BannerIcon>
+          <BannerHeading>{banner.title}</BannerHeading>
+          {banner.ingress && <BannerIngress>{banner.ingress}</BannerIngress>}
         </Banner>
       )}
       <Container className={classes.page}>
         <div className={classes.left}>
-          <SidebarMenu routerPath={router.pathname} />
+          <SidebarMenu routerPath={pathname} />
         </div>
         <main
           id='main'
@@ -54,7 +53,7 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
             <div className={classes.header}>
               <div className={classes.headerText}>
                 <Heading
-                  size='lg'
+                  size='large'
                   className={classes.title}
                 >
                   {data.title}