From 4bb08b816fb4f0174b6fdb1486d19061c9ca81bc Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Thu, 7 Nov 2024 12:33:44 +0100
Subject: [PATCH] refactor: use NLDS checkbox group in dynamic form

---
 package-lock.json                             | 24 +++++++++
 package.json                                  |  1 +
 .../components/questions/CheckboxInput.tsx    | 51 ++++++++-----------
 src/components/index.ts                       |  1 +
 4 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3ecabee..60c93bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
         "@types/react": "18",
         "@types/react-dom": "18",
         "@types/validator": "13.12.2",
+        "@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",
@@ -3181,6 +3182,29 @@
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
+    "node_modules/@utrecht/checkbox-group-react": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@utrecht/checkbox-group-react/-/checkbox-group-react-1.0.0.tgz",
+      "integrity": "sha512-LswvhqrwPZnR9fIwgZFcBorNuoagliv7O/XGw5/BT973OJuSLH0nn592s4ZRWmoElmGeOWmR1+HJVbsNag62bQ==",
+      "dev": true,
+      "dependencies": {
+        "clsx": "2.1.1"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "*",
+        "react": "18",
+        "react-dom": "18"
+      }
+    },
+    "node_modules/@utrecht/checkbox-group-react/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@utrecht/component-library-css": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@utrecht/component-library-css/-/component-library-css-6.1.0.tgz",
diff --git a/package.json b/package.json
index 1b30654..b4c1fcd 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@types/react": "18",
     "@types/react-dom": "18",
     "@types/validator": "13.12.2",
+    "@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",
diff --git a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx b/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
index 07ae0a6..87a9eb7 100644
--- a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from 'next-intl'
 import { getValidators } from '@/lib/utils/form-validator'
 import React from 'react'
 import { useFormContext } from 'react-hook-form'
-import { Paragraph } from '@/components/index'
+import { CheckboxGroup } from '@/components/index'
 
 interface CheckboxInputProps extends QuestionField {}
 
@@ -17,35 +17,24 @@ export const CheckboxInput = ({ field }: CheckboxInputProps) => {
   const errorMessage = errors[field.key]?.message as string
 
   return (
-    <fieldset aria-invalid={!!errorMessage} data-testid="checkbox-group">
-      <legend>
-        {field.meta.label}{' '}
-        <span> {field.required ? '' : `(${t('not_required_short')})`}</span>
-        {field.meta.subtitle && <span>{field.meta.subtitle}</span>}
-      </legend>
-      {errorMessage && (
-        <Paragraph
-          id={`${field.key}-error`}
-          aria-live="assertive"
-          style={{ color: 'red' }}
-        >
-          {errorMessage}
-        </Paragraph>
-      )}
-      {Object.keys(field.meta.values).map((key: string) => (
-        <div key={key}>
-          <input
-            {...register(`${field.key}.${key}`, getValidators(field, t))}
-            type="checkbox"
-            id={`${field.key}-${key}`}
-            value={key}
-            aria-describedby={errorMessage ? `${field.key}-error` : undefined}
-          />
-          <label htmlFor={`${field.key}-${key}`}>
-            {field.meta.values[key]}
-          </label>
-        </div>
-      ))}
-    </fieldset>
+    <CheckboxGroup
+      label={field.meta.label}
+      required={field.required}
+      id={`${field.key}`}
+      // @ts-ignore
+      options={Object.keys(field.meta.values).map((key: string) => {
+        return {
+          ...register(field.key, {
+            ...getValidators(field, t),
+          }),
+          label: field.meta.values[key],
+          value: key,
+          id: `${field.key}-${key}`,
+        }
+      })}
+      invalid={Boolean(errorMessage)}
+      errorMessage={errorMessage}
+      description={field.meta.subtitle}
+    ></CheckboxGroup>
   )
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index c29b056..eb05bf2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,3 +25,4 @@ export {
 } from '@utrecht/component-library-react/dist/css-module'
 
 export { RadioGroup } from '@utrecht/radio-group-react'
+export { CheckboxGroup } from '@utrecht/checkbox-group-react'