Refactor/paragraph nlds comp

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

@@ -9,6 +9,7 @@ import { useStepperStore } from '@/store/stepper_store'
 import { useRouter } from '@/routing/navigation'
 import { PublicQuestion } from '@/types/form'
 import { RenderDynamicFields } from '@/app/[locale]/incident/add/components/questions/RenderDynamicFields'
+import { Paragraph } from '@/components/index'
 
 export const IncidentQuestionsLocationForm = () => {
   const { formState: formStoreState, updateForm } = useFormStore()
@@ -110,9 +111,9 @@ export const IncidentQuestionsLocationForm = () => {
         />
       ) : loading ? (
         /* TODO: Implement nice loading state */
-        <p>Laden...</p>
+        <Paragraph>Laden...</Paragraph>
       ) : (
-        <p>TODO: Laat hier een LocationSelect zien</p>
+        <Paragraph>TODO: Laat hier een LocationSelect zien</Paragraph>
       )}
       <IncidentFormFooter />
     </form>

src/app/[locale]/incident/add/components/questions/AssetSelect.tsx

@@ -1,7 +1,8 @@
 import { QuestionField } from '@/types/form'
+import { Paragraph } from '@/components/index'
 
 interface AssetSelectProps extends Omit<QuestionField, 'register' | 'errors'> {}
 
 export const AssetSelect = ({ field }: AssetSelectProps) => {
-  return <p>{field.key}</p>
+  return <Paragraph>{field.key}</Paragraph>
 }

src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx

@@ -3,6 +3,7 @@ import { useTranslations } from 'next-intl'
 import { useFormStore } from '@/store/form_store'
 import { getValidators } from '@/lib/utils/form-validator'
 import React from 'react'
+import { Paragraph } from '@/components/index'
 
 interface CheckboxInputProps extends QuestionField {}
 
@@ -46,13 +47,13 @@ export const CheckboxInput = ({
         {field.meta.subtitle && <span>{field.meta.subtitle}</span>}
       </legend>
       {errorMessage && (
-        <p
+        <Paragraph
           id={`${field.key}-error`}
           aria-live="assertive"
           style={{ color: 'red' }}
         >
           {errorMessage}
-        </p>
+        </Paragraph>
       )}
       {Object.keys(field.meta.values).map((key: string) => (
         <div key={key}>

src/app/[locale]/incident/add/components/questions/RadioInput.tsx

@@ -3,6 +3,7 @@ import { useTranslations } from 'next-intl'
 import { useFormStore } from '@/store/form_store'
 import { QuestionField } from '@/types/form'
 import { getValidators } from '@/lib/utils/form-validator'
+import { Paragraph } from '@/components/index'
 
 interface RadioGroupProps extends QuestionField {}
 
@@ -40,13 +41,13 @@ export const RadioInput = ({ field, register, errors }: RadioGroupProps) => {
       </legend>
 
       {errorMessage && (
-        <p
+        <Paragraph
           id={`${field.key}-error`}
           aria-live="assertive"
           style={{ color: 'red' }}
         >
           {errorMessage}
-        </p>
+        </Paragraph>
       )}
 
       {Object.keys(field.meta.values).map((key: string) => (

src/app/[locale]/incident/add/components/questions/TextAreaInput.tsx

@@ -3,6 +3,7 @@ import { useTranslations } from 'next-intl'
 import { useFormStore } from '@/store/form_store'
 import { getValidators } from '@/lib/utils/form-validator'
 import React from 'react'
+import { Paragraph } from '@/components/index'
 
 interface TextAreaInputProps extends QuestionField {}
 
@@ -37,13 +38,13 @@ export const TextAreaInput = ({
   return (
     <div className="flex flex-col gap-2">
       {errorMessage && (
-        <p
+        <Paragraph
           id={`${field.key}-error`}
           aria-live="assertive"
           style={{ color: 'red' }}
         >
           {errorMessage}
-        </p>
+        </Paragraph>
       )}
       <label htmlFor={`${field.key}`}>
         {field.meta.label}{' '}

src/app/[locale]/incident/add/components/questions/TextInput.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { useTranslations } from 'next-intl'
 import { useFormStore } from '@/store/form_store'
 import { getValidators } from '@/lib/utils/form-validator'
+import { Paragraph } from '@/components/index'
 
 interface TextInputProps extends QuestionField {}
 
@@ -33,13 +34,13 @@ export const TextInput = ({ field, register, errors }: TextInputProps) => {
   return (
     <div className="flex flex-col gap-2">
       {errorMessage && (
-        <p
+        <Paragraph
           id={`${field.key}-error`}
           aria-live="assertive"
           style={{ color: 'red' }}
         >
           {errorMessage}
-        </p>
+        </Paragraph>
       )}
       <label htmlFor={`${field.key}`}>
         {field.meta.label}{' '}

src/app/[locale]/incident/components/Stepper.tsx

@@ -5,11 +5,9 @@ import { Paths, usePathname } from '@/routing/navigation'
 import { useStepperStore } from '@/store/stepper_store'
 import { useEffect, useRef } from 'react'
 import { useFormStore } from '@/store/form_store'
-import {
-  Button,
-  Link,
-  Paragraph,
-} from '@utrecht/component-library-react/dist/css-module'
+import { Button, Link } from '@utrecht/component-library-react/dist/css-module'
+
+import { Paragraph } from '@/components/index'
 
 type StepperProps = {}
 

src/app/[locale]/incident/contact/components/IncidentContactForm.tsx

@@ -20,6 +20,7 @@ import { Input } from '@/components/ui/Input'
 import { Checkbox } from '@/components/ui/Checkbox'
 import { useFormStore } from '@/store/form_store'
 import { useEffect } from 'react'
+import { Paragraph } from '@/components/index'
 
 const IncidentContactForm = () => {
   const t = useTranslations('describe-contact.form')
@@ -73,7 +74,7 @@ const IncidentContactForm = () => {
         >
           <div className="flex flex-col gap-4">
             <h2>{t('heading')}</h2>
-            <p>{t('description')}</p>
+            <Paragraph>{t('description')}</Paragraph>
           </div>
           <FormField
             name={'phone'}
@@ -107,7 +108,7 @@ const IncidentContactForm = () => {
           />
           <div className="flex flex-col gap-4">
             <h2>{t('send_to_other_instance_heading')}</h2>
-            <p>{t('send_to_other_instance_description')}</p>
+            <Paragraph>{t('send_to_other_instance_description')}</Paragraph>
           </div>
           <div className="bg-gray-200 w-full p-4">
             <FormField

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

@@ -2,11 +2,12 @@ import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
 import {
   Heading1,
-  Paragraph,
   Alert,
   Link,
 } from '@utrecht/component-library-react/dist/css-module'
 
+import { Paragraph } from '@/components/index'
+
 export default async function Home() {
   return <IncidentDescriptionPage />
 }

src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '@/routing/navigation'
 import { postAttachments } from '@/services/attachment/attachments'
 import { useFormStore } from '@/store/form_store'
 import { _NestedLocationModel } from '@/services/client'
+import { Paragraph } from '@/components/index'
 import { MAX_NUMBER_FILES } from '@/components/ui/upload/FileUpload'
 import PreviewFile from '@/components/ui/upload/PreviewFile'
 
@@ -80,7 +81,7 @@ const IncidentSummaryForm = () => {
 
   return (
     <div className="flex flex-col gap-8">
-      <p>{t('description')}</p>
+      <Paragraph>{t('description')}</Paragraph>
       <Divider />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
@@ -123,7 +124,7 @@ const IncidentSummaryForm = () => {
         {formState.phone === undefined &&
         formState.email === undefined &&
         formState.sharing_allowed === false ? (
-          <p>{t('steps.step_three.no_contact_details')}</p>
+          <Paragraph>{t('steps.step_three.no_contact_details')}</Paragraph>
         ) : (
           <>
             {formState.phone !== undefined && formState.phone !== null ? (
@@ -163,8 +164,12 @@ export const IncidentSummaryFormItem = ({
 }) => {
   return (
     <div className="flex flex-col gap-1">
-      <p className="font-semibold">{title}</p>
-      {value !== '' ? <p>{value}</p> : <div className="mt-2">{children}</div>}
+      <Paragraph className="font-semibold">{title}</Paragraph>
+      {value !== '' ? (
+        <Paragraph>{value}</Paragraph>
+      ) : (
+        <div className="mt-2">{children}</div>
+      )}
     </div>
   )
 }

src/app/[locale]/incident/thankyou/page.tsx

@@ -1,4 +1,5 @@
 import { useTranslations } from 'next-intl'
+import { Paragraph } from '@/components/index'
 
 export default function Thankyou() {
   const t = useTranslations('describe-thankyou')
@@ -7,12 +8,12 @@ export default function Thankyou() {
     <div className="flex flex-col gap-8">
       <h1>{t('heading')}</h1>
       <div className="flex flex-col gap-2">
-        <p>{t('description_notification_number')}</p>
-        <p>{t('description_notification_email')}</p>
+        <Paragraph>{t('description_notification_number')}</Paragraph>
+        <Paragraph>{t('description_notification_email')}</Paragraph>
       </div>
       <div className="flex flex-col gap-2">
         <h3>{t('what_do_we_do_heading')}</h3>
-        <p>{t('what_do_we_do_description')}</p>
+        <Paragraph>{t('what_do_we_do_description')}</Paragraph>
       </div>
     </div>
   )

src/components/index.ts

@@ -2,3 +2,5 @@ import { Select } from '@/components/ui'
 import { Container } from '@/components/layout'
 
 export { Select, Container }
+
+export { Paragraph } from '@utrecht/component-library-react/dist/css-module'