Lost socks form correction

packages/next-templates/src/app/meldingen/verloren-sokken-melding/form-found/page.tsx

@@ -6,15 +6,15 @@ import {
   FormFieldDescription,
   FormLabel,
   Heading1,
-  Heading5,
   Page,
   PageContent,
-  Paragraph,
   Textarea,
   Textbox,
 } from '@utrecht/component-library-react';
+import '@/app/styling/css/verloren-sokken.css';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { ExampleFooterFocus } from '@/components/ExampleFooter/ExampleFooterFocus/ExampleFooterFocus';
+import { ExampleHeaderFunnel } from '@/components/ExampleHeader/ExampleHeaderFunnel/ExampleHeaderFunnel';
 
 interface Inputs {
   Voornaam: string;
@@ -33,71 +33,58 @@ export default function Home() {
     // formState: { errors },
   } = useForm<Inputs>();
 
-  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
+  const onSubmit: SubmitHandler<Inputs> = (data) => data;
 
   return (
-    <Page>
-      <PageContent>
+    <Page className="voorbeeld-page--flex">
+      <ExampleHeaderFunnel />
+      <PageContent className="voorbeeld-page-content-flex">
         <Heading1>Maak een melding van een gevonden sok</Heading1>
         <form onSubmit={handleSubmit(onSubmit)}>
-          <FormField type="text">
-            <Paragraph>
-              <FormLabel htmlFor="Voornaam">Voornaam</FormLabel>
-            </Paragraph>
-            <Paragraph>
-              <Textbox {...register('Voornaam')} id="Voornaam" name="Voornaam" type="text" />
-            </Paragraph>
+          <FormField className="voorbeeld-formField" type="text">
+            <FormLabel className="voorbeeld-formLabel" htmlFor="Voornaam">
+              Voornaam
+            </FormLabel>
+            <Textbox {...register('Voornaam')} id="Voornaam" name="Voornaam" type="text" />
           </FormField>
-          <FormField type="text">
-            <Paragraph>
-              <FormLabel htmlFor="Achternaam">Achternaam</FormLabel>
-            </Paragraph>
-            <Paragraph>
-              <Textbox {...register('Achternaam')} id="Achternaam" name="Achternaam" type="text" />
-            </Paragraph>
+          <FormField className="voorbeeld-formField" type="text">
+            <FormLabel className="voorbeeld-formLabel" htmlFor="Achternaam">
+              Achternaam
+            </FormLabel>
+            <Textbox {...register('Achternaam')} id="Achternaam" name="Achternaam" type="text" />
           </FormField>
-          <FormField type="text">
-            <Paragraph>
-              <FormLabel htmlFor="Telefoon">Telefoon</FormLabel>
-            </Paragraph>
-            <Paragraph>
-              <Textbox {...register('Telefoon')} id="Telefoon" name="Telefoon" type="text" />
-            </Paragraph>
+          <FormField className="voorbeeld-formField" type="text">
+            <FormLabel className="voorbeeld-formLabel" htmlFor="Telefoon">
+              Telefoon
+            </FormLabel>
+            <Textbox {...register('Telefoon')} id="Telefoon" name="Telefoon" type="text" />
           </FormField>
-          <FormField type="text">
-            <Paragraph>
-              <FormLabel htmlFor="Email">E-mail</FormLabel>
-            </Paragraph>
-            <Paragraph>
-              <Textbox {...register('Email')} id="Email" name="Email" type="text" />
-            </Paragraph>
+          <FormField className="voorbeeld-formField" type="text">
+            <FormLabel className="voorbeeld-formLabel" htmlFor="Email">
+              E-mail
+            </FormLabel>
+            <Textbox {...register('Email')} id="Email" name="Email" type="text" />
           </FormField>
-          <FormField type="text">
-            <Paragraph>
-              <FormLabel htmlFor="Beschrijving">Beschrijving sok en/of sokken</FormLabel>
-            </Paragraph>
+          <FormField className="voorbeeld-formField" type="text">
+            <FormLabel className="voorbeeld-formLabel" htmlFor="Beschrijving">
+              Beschrijving sok en/of sokken
+            </FormLabel>
             <FormFieldDescription>
               Geef zo goed mogelijk de kenmerken van de sok aan, zodat we hem zo snel mogelijk met zijn vriendje kunnen
               herenigen.
             </FormFieldDescription>
-            <Paragraph>
-              <Textarea {...register('Beschrijving')} id="Beschrijving" name="beschrijving" />
-            </Paragraph>
+            <Textarea {...register('Beschrijving')} id="Beschrijving" name="beschrijving" />
           </FormField>
-          <FormField type="text">
-            <Paragraph>
-              <FormLabel htmlFor="Waar-gevonden">Waar heb je de sok gevonden?</FormLabel>
-            </Paragraph>
-            <Paragraph>
-              <Textarea {...register('GevondenLocatie')} id="Waar-gevonden" name="GevondenLocatie" />
-            </Paragraph>
-            <FormField type="text">
-              <Paragraph>
-                <FormLabel htmlFor="Plaatsnaam">Plaatsnaam</FormLabel>
-              </Paragraph>
-              <Paragraph>
-                <Textbox {...register('Plaatsnaam')} id="Plaatsnaam" name="Plaatsnaam" type="text" />
-              </Paragraph>
+          <FormField className="voorbeeld-formField" type="text">
+            <FormLabel className="voorbeeld-formLabel" htmlFor="Waar-gevonden">
+              Waar heb je de sok gevonden?
+            </FormLabel>
+            <Textarea {...register('GevondenLocatie')} id="Waar-gevonden" name="GevondenLocatie" />
+            <FormField className="voorbeeld-formField" type="text">
+              <FormLabel className="voorbeeld-formLabel" htmlFor="Plaatsnaam">
+                Plaatsnaam
+              </FormLabel>
+              <Textbox {...register('Plaatsnaam')} id="Plaatsnaam" name="Plaatsnaam" type="text" />
             </FormField>
           </FormField>
           <ButtonGroup>

packages/next-templates/src/app/meldingen/verloren-sokken-melding/page.tsx

@@ -1,11 +1,10 @@
 'use client';
 import {
+  Article,
   ButtonGroup,
   ButtonLink,
-  Document,
   Heading1,
   Heading2,
-  Heading5,
   Link,
   Page,
   PageContent,
@@ -16,13 +15,15 @@ import {
 import { UtrechtIconArrow } from '@utrecht/web-component-library-react';
 import { ExampleFooter } from '@/components/ExampleFooter/ExampleFooter';
 import { ExampleHeader } from '@/components/ExampleHeader/ExampleHeader';
+import { ExampleNavigation } from '@/components/ExampleNavigation/ExampleNavigation';
 
 export default function Home() {
   return (
-    <Document>
+    <Page>
       <ExampleHeader />
-      <Page>
-        <PageContent>
+      <ExampleNavigation />
+      <PageContent className="voorbeeld-page-content-flex">
+        <Article className="voorbeeld-article-space">
           <Heading1>Meldpunt voor Verdwaalde Sokken</Heading1>
           <Paragraph lead>
             Het &ldquo;Meldpunt voor Verdwaalde Sokken,&ldquo; is een initiatief van onze gemeente met als doel de
@@ -99,9 +100,9 @@ export default function Home() {
               te zijn.
             </UnorderedListItem>
           </UnorderedList>
-        </PageContent>
-        <ExampleFooter />
-      </Page>
-    </Document>
+        </Article>
+      </PageContent>
+      <ExampleFooter />
+    </Page>
   );
 }

packages/next-templates/src/app/styling/css/verloren-sokken.css

@@ -0,0 +1,4 @@
+.voorbeeld-formLabel {
+  display: block;
+  margin-block-end: var(--voorbeeld-space-block-beetle);
+}