From 1f35a9cc7a7f9c6db2d2908e8983fdb193021796 Mon Sep 17 00:00:00 2001
From: Tessa Viergever <112861180+TessaViergever@users.noreply.github.com>
Date: Tue, 29 Oct 2024 17:18:27 +0100
Subject: [PATCH] wip

---
 src/app/[locale]/incident/add/page.tsx        | 10 +++++--
 src/app/[locale]/incident/contact/page.tsx    | 10 +++++--
 src/app/[locale]/incident/page.tsx            | 26 +++++++++++++++++--
 .../components/IncidentSummaryForm.tsx        | 10 +++----
 src/app/[locale]/incident/summary/page.tsx    | 10 +++++--
 5 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/app/[locale]/incident/add/page.tsx b/src/app/[locale]/incident/add/page.tsx
index 3ec8f447..3dbecdae 100644
--- a/src/app/[locale]/incident/add/page.tsx
+++ b/src/app/[locale]/incident/add/page.tsx
@@ -1,14 +1,20 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentQuestionsLocationForm } from '@/app/[locale]/incident/add/components/IncidentQuestionsLocationForm'
-import { Heading } from '@/components/index'
+import { Heading, HeadingGroup, PreHeading } from '@/components/index'
 
 export default function AddAditionalInformationPage() {
   const t = useTranslations('describe-add')
+  const tGeneral = useTranslations('general.describe_form')
   const messages = useMessages()
 
   return (
     <div className="flex flex-col gap-4">
-      <Heading level={1}>{t('heading')}</Heading>
+      <HeadingGroup>
+        <Heading level={1}>{t('heading')}</Heading>
+        <PreHeading>
+          {tGeneral('pre-heading', { current: 2, max: 4 })}
+        </PreHeading>
+      </HeadingGroup>
       <NextIntlClientProvider messages={messages}>
         <IncidentQuestionsLocationForm />
       </NextIntlClientProvider>
diff --git a/src/app/[locale]/incident/contact/page.tsx b/src/app/[locale]/incident/contact/page.tsx
index 1dac4664..1abfe310 100644
--- a/src/app/[locale]/incident/contact/page.tsx
+++ b/src/app/[locale]/incident/contact/page.tsx
@@ -1,14 +1,20 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentContactForm } from '@/app/[locale]/incident/contact/components/IncidentContactForm'
-import { Heading } from '@/components/index'
+import { Heading, HeadingGroup, PreHeading } from '@/components/index'
 
 export default function AddContactDetailsPage() {
   const t = useTranslations('describe-contact')
+  const tGeneral = useTranslations('general.describe_form')
   const messages = useMessages()
 
   return (
     <div className="flex flex-col gap-4">
-      <Heading level={1}>{t('heading')}</Heading>
+      <HeadingGroup>
+        <Heading level={1}>{t('heading')}</Heading>
+        <PreHeading>
+          {tGeneral('pre-heading', { current: 3, max: 4 })}
+        </PreHeading>
+      </HeadingGroup>
       <NextIntlClientProvider messages={messages}>
         <IncidentContactForm />
       </NextIntlClientProvider>
diff --git a/src/app/[locale]/incident/page.tsx b/src/app/[locale]/incident/page.tsx
index 7717cf16..9f2cb2af 100644
--- a/src/app/[locale]/incident/page.tsx
+++ b/src/app/[locale]/incident/page.tsx
@@ -1,8 +1,24 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
-import { Alert, Link } from '@utrecht/component-library-react/dist/css-module'
+import { Alert, HeadingGroup, PreHeading, Link } from '@/components/index'
 
 import { Paragraph, Heading } from '@/components/index'
+// import { Metadata, ResolvingMetadata } from 'next/types'
+
+// type Props = {
+//   params: Promise<object>
+//   searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+// }
+
+// export async function generateMetadata(
+//   { params, searchParams }: Props,
+//   parent: ResolvingMetadata
+// ): Promise<Metadata> {
+//   const t = useTranslations('describe-report')
+//   return {
+//     title: [t('heading'), 'Gemeente Purmerend'].join(' · '),
+//   }
+// }
 
 export default async function Home() {
   return <IncidentDescriptionPage />
@@ -10,12 +26,18 @@ export default async function Home() {
 
 function IncidentDescriptionPage() {
   const t = useTranslations('describe-report')
+  const tGeneral = useTranslations('general.describe_form')
   const messages = useMessages()
 
   return (
     <>
       <div className="flex flex-col gap-4">
-        <Heading level={1}>{t('heading')}</Heading>
+        <HeadingGroup>
+          <Heading level={1}>{t('heading')}</Heading>
+          <PreHeading>
+            {tGeneral('pre-heading', { current: 1, max: 4 })}
+          </PreHeading>
+        </HeadingGroup>
         <Alert>
           <Paragraph>
             Lukt het niet om een melding te doen? Bel het telefoonnummer
diff --git a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
index 9a17b21c..600c6648 100644
--- a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
+++ b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
@@ -81,11 +81,11 @@ const IncidentSummaryForm = () => {
 
   return (
     <div className="flex flex-col gap-8">
-      <Paragraph>{t('description')}</Paragraph>
+      <Paragraph appearance="lead">{t('description')}</Paragraph>
       <Divider />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
-          <Heading level={3}>{t('steps.step_one.title')}</Heading>
+          <Heading level={2}>{t('steps.step_one.title')}</Heading>
           <LinkWrapper href={'/incident'} onClick={() => goToStep(1)}>
             {t('steps.step_one.edit')}
           </LinkWrapper>
@@ -104,7 +104,7 @@ const IncidentSummaryForm = () => {
       <Divider />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
-          <Heading level={3}>{t('steps.step_two.title')}</Heading>
+          <Heading level={2}>{t('steps.step_two.title')}</Heading>
           <LinkWrapper href={'/incident/add'} onClick={() => goToStep(2)}>
             {t('steps.step_two.edit')}
           </LinkWrapper>
@@ -116,7 +116,7 @@ const IncidentSummaryForm = () => {
       <Divider />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
-          <Heading level={3}>{t('steps.step_three.title')}</Heading>
+          <Heading level={2}>{t('steps.step_three.title')}</Heading>
           <LinkWrapper href={'/incident/contact'} onClick={() => goToStep(3)}>
             {t('steps.step_three.edit')}
           </LinkWrapper>
@@ -164,7 +164,7 @@ export const IncidentSummaryFormItem = ({
 }) => {
   return (
     <div className="flex flex-col gap-1">
-      <Paragraph className="font-semibold">{title}</Paragraph>
+      <Heading level={3}>{title}</Heading>
       {value !== '' ? (
         <Paragraph>{value}</Paragraph>
       ) : (
diff --git a/src/app/[locale]/incident/summary/page.tsx b/src/app/[locale]/incident/summary/page.tsx
index a80373bc..f7d3d360 100644
--- a/src/app/[locale]/incident/summary/page.tsx
+++ b/src/app/[locale]/incident/summary/page.tsx
@@ -1,14 +1,20 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentSummaryForm } from '@/app/[locale]/incident/summary/components/IncidentSummaryForm'
-import { Heading } from '@/components/index'
+import { HeadingGroup, Heading, PreHeading } from '@/components/index'
 
 export default function SummaryDetailsPage() {
   const t = useTranslations('describe-summary')
+  const tGeneral = useTranslations('general.describe_form')
   const messages = useMessages()
 
   return (
     <div className="flex flex-col gap-4">
-      <Heading level={1}>{t('heading')}</Heading>
+      <HeadingGroup>
+        <Heading level={1}>{t('heading')}</Heading>
+        <PreHeading>
+          {tGeneral('pre-heading', { current: 4, max: 4 })}
+        </PreHeading>
+      </HeadingGroup>
       <NextIntlClientProvider messages={messages}>
         <IncidentSummaryForm />
       </NextIntlClientProvider>