feat: new Page Layout with Purmerend theme

package.json

@@ -41,18 +41,27 @@
   },
   "devDependencies": {
     "@amsterdam/design-system-react": "0.13.1",
+    "@fontsource/cantarell": "5.1.0",
+    "@nl-design-system-community/purmerend-design-tokens": "1.0.0",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@types/node": "20",
     "@types/react": "18",
     "@types/react-dom": "18",
     "@types/validator": "13.12.2",
+    "@utrecht/body-react": "0.0.0",
     "@utrecht/checkbox-group-react": "1.0.0",
     "@utrecht/component-library-css": "6.1.0",
     "@utrecht/component-library-react": "7.2.0",
     "@utrecht/design-tokens": "2.1.1",
+    "@utrecht/nav-bar-react": "1.0.0",
+    "@utrecht/page-body-react": "1.0.0",
+    "@utrecht/page-footer-react": "1.0.0",
+    "@utrecht/page-header-react": "1.0.0",
+    "@utrecht/page-layout-react": "1.0.0",
     "@utrecht/radio-group-react": "1.0.3",
+    "@utrecht/root-react": "1.0.0",
     "@utrecht/select-combobox-react": "1.0.1",
     "@vitejs/plugin-react": "4.3.3",
     "autoprefixer": "10.4.20",

src/app/[locale]/components/Footer.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import { Link } from '@utrecht/component-library-react'
 import { IconChevronRight } from '@tabler/icons-react'
 import { useEffect, useState } from 'react'
 import { useConfig } from '@/hooks/useConfig'
 import { useTranslations } from 'next-intl'
+import { Link, PageFooter } from '@/components'
 
 type footerLink = {
   href: string
@@ -41,21 +41,17 @@ const Footer = () => {
   }, [config, loading])
 
   return (
-    <footer className="bg-white">
-      <div className="w-full h-16 md:h-24 bg-neutral-500"></div>
-      {/* todo: set organisation hover color */}
-      <div className="max-w-3xl mx-auto flex flex-col md:flex-row gap-3 md:gap-12 py-3">
-        {links.map((link) => (
-          <Link
-            href={link.href}
-            key={link.label}
-            className="flex items-center !no-underline hover:!underline !text-black hover:!text-cyan-800"
-          >
-            <IconChevronRight className="w-6 h-6" /> {link.label}
-          </Link>
-        ))}
-      </div>
-    </footer>
+    <PageFooter>
+      {links.map((link) => (
+        <Link
+          href={link.href}
+          key={link.label}
+          className="flex items-center !no-underline hover:!underline !text-black hover:!text-cyan-800"
+        >
+          <IconChevronRight className="w-6 h-6" /> {link.label}
+        </Link>
+      ))}
+    </PageFooter>
   )
 }
 

src/app/[locale]/components/Header.tsx

@@ -1,5 +1,5 @@
 import { Navigation } from '@/app/[locale]/components/Navigation'
-import { Link, Logo } from '@/components/index'
+import { Link, Logo, PageHeader } from '@/components/index'
 import Image from 'next/image'
 
 export interface HeaderProps {
@@ -21,19 +21,25 @@ const Header = ({ homepage, logo }: HeaderProps) => {
   )
 
   return (
-    <header className="bg-white">
-      {homepage ? (
-        <Link boxContent href={homepage.href} aria-labelledby="logo-link-label">
-          <span id="logo-link-label" hidden>
-            {homepage.label}
-          </span>
-          {logoElement}
-        </Link>
-      ) : (
-        logoElement
-      )}
+    <>
+      <PageHeader>
+        {homepage ? (
+          <Link
+            boxContent
+            href={homepage.href}
+            aria-labelledby="logo-link-label"
+          >
+            <span id="logo-link-label" hidden>
+              {homepage.label}
+            </span>
+            {logoElement}
+          </Link>
+        ) : (
+          logoElement
+        )}
+      </PageHeader>
       <Navigation />
-    </header>
+    </>
   )
 }
 

src/app/[locale]/components/LanguageSwitch.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useTransition } from 'react'
+import { ChangeEvent, useTransition } from 'react'
 import { usePathname, useRouter } from '@/routing/navigation'
 import { Select } from '@/components'
 import { getAllAvailableLocales } from '@/lib/utils/locale'
@@ -13,19 +13,18 @@ const LanguageSwitch = () => {
   const pathname = usePathname()
   const [isPending, startTransition] = useTransition()
 
-  const onSelectChange = (locale: string) => {
+  const onSelectChange = (evt: ChangeEvent<HTMLSelectElement>) => {
     startTransition(() => {
-      router.replace(pathname, { locale: locale })
+      router.replace(pathname, { locale: evt.target.value })
     })
   }
 
   return (
-    <Select
-      value={locale}
-      values={getAllAvailableLocales()}
-      onSelectChange={onSelectChange}
-      disabled={isPending}
-    />
+    <Select value={locale} onChange={onSelectChange} disabled={isPending}>
+      {getAllAvailableLocales().map((lang, index) => (
+        <option key={index}>{lang}</option>
+      ))}
+    </Select>
   )
 }
 

src/app/[locale]/components/Navigation.tsx

@@ -1,10 +1,11 @@
 import { LanguageSwitch } from '@/app/[locale]/components/LanguageSwitch'
+import { NavBar } from '@/components'
 
 const Navigation = () => {
   return (
-    <nav className="flex justify-end bg-gray-200 py-4 px-8">
+    <NavBar>
       <LanguageSwitch />
-    </nav>
+    </NavBar>
   )
 }
 

src/app/[locale]/incident/add/components/MapDialog.tsx

@@ -263,7 +263,7 @@ const MapDialog = ({
       <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay />
-        <Dialog.Content className="fixed inset-0 bg-white z-[1000] grid grid-cols-1 md:grid-cols-3 utrecht-theme">
+        <Dialog.Content className="fixed inset-0 bg-white z-[1000] grid grid-cols-1 md:grid-cols-3 purmerend-theme">
           <VisuallyHidden.Root>
             {/* TODO: Overleggen welke titel hier het meest vriendelijk is voor de gebruiker, multi-language support integreren */}
             <Dialog.Title>

src/app/[locale]/incident/layout.tsx

@@ -7,9 +7,9 @@ export default function IncidentLayout({ children }: Layout) {
   const messages = useMessages()
 
   return (
-    <main className="py-8 flex-auto bg-white">
-      <div className="max-w-3xl mx-auto gap-16 flex flex-col">
-        <div className="">
+    <main>
+      <div>
+        <div>
           <NextIntlClientProvider messages={pick(messages, 'stepper')}>
             <FormProgress />
           </NextIntlClientProvider>

src/app/[locale]/layout.tsx

@@ -1,14 +1,21 @@
 import { notFound } from 'next/navigation'
 import React from 'react'
 import { getAllAvailableLocales } from '@/lib/utils/locale'
-import { Container } from '@/components'
+import {
+  Root,
+  PageLayout,
+  Body,
+  PageBody,
+  PageFooter,
+  Article,
+} from '@/components'
 import { Header } from '@/app/[locale]/components/Header'
 import localFont from 'next/font/local'
 import AppProvider from '@/components/providers/AppProvider'
-import { Document } from '@utrecht/component-library-react/dist/css-module'
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { Footer } from '@/app/[locale]/components/Footer'
 import pick from 'lodash/pick'
+import type { PropsWithChildren } from 'react'
 
 const font = localFont({
   src: '../../../public/fonts/open-sans.woff2',
@@ -19,39 +26,41 @@ const font = localFont({
 export default function LocaleLayout({
   children,
   params: { locale },
-}: {
-  children: React.ReactNode
+}: PropsWithChildren<{
   params: { locale: any }
-}) {
+}>) {
   const messages = useMessages()
 
   if (!getAllAvailableLocales().includes(locale as any)) notFound()
   const t = useTranslations('current-organisation')
 
   return (
-    <html lang={locale} className={`${font.variable}`}>
-      <body className="bg-gray-100">
+    <Root
+      lang={locale}
+      className={`${font.variable} purmerend-theme purmerend-theme--media-query`}
+    >
+      <Body>
         <AppProvider>
-          <Document className="utrecht-theme">
-            <Container className="bg-white h-dvh flex flex-col">
-              <Header
-                homepage={{
-                  href: '/',
-                  label: t('homepage-label'),
-                }}
-                logo={{
-                  src: '/assets/utrecht.webp',
-                  label: t('logo-label'),
-                }}
-              />
-              {children}
-              <NextIntlClientProvider messages={pick(messages, 'footer')}>
-                <Footer />
-              </NextIntlClientProvider>
-            </Container>
-          </Document>
+          <PageLayout>
+            <Header
+              homepage={{
+                href: '/',
+                label: t('homepage-label'),
+              }}
+              logo={{
+                src: '/assets/purmerend-logo.svg',
+                label: t('logo-label'),
+              }}
+            />
+            <PageBody>
+              <Article>{children}</Article>
+            </PageBody>
+            <NextIntlClientProvider messages={pick(messages, 'footer')}>
+              <Footer />
+            </NextIntlClientProvider>
+          </PageLayout>
         </AppProvider>
-      </body>
-    </html>
+      </Body>
+    </Root>
   )
 }

src/app/layout.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import '@utrecht/design-tokens/dist/index.css'
+import '@nl-design-system-community/purmerend-design-tokens/dist/index.css'
+import '@nl-design-system-community/purmerend-design-tokens/src/font.js'
 
 const inter = Inter({ subsets: ['latin'] })
 

src/components/index.ts

@@ -1,8 +1,7 @@
 export type * from '@utrecht/component-library-react/dist/css-module'
-import { Select } from '@/components/ui'
 import { Container } from '@/components/layout'
 
-export { Select, Container }
+export { Container }
 
 export {
   Alert,
@@ -28,8 +27,18 @@ export {
   RadioButton,
   LinkButton,
   AlertDialog,
+  Article,
+  Select,
 } from '@utrecht/component-library-react/dist/css-module'
 
 export { RadioGroup } from '@utrecht/radio-group-react'
 export { CheckboxGroup } from '@utrecht/checkbox-group-react'
+export { Root } from '@utrecht/root-react/dist/css'
+export { Body } from '@utrecht/body-react/dist/css'
+export { PageLayout } from '@utrecht/page-layout-react/dist/css'
+export { PageHeader } from '@utrecht/page-header-react/dist/css'
+export { PageFooter } from '@utrecht/page-footer-react/dist/css'
+export { PageBody } from '@utrecht/page-body-react/dist/css'
+export { NavBar } from '@utrecht/nav-bar-react/dist/css'
+
 // export { SelectCombobox } from '@/components/ui/SelectCombobox'