From 57a3a9094118c1477d60729652910d9252493a8f Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Tue, 1 Oct 2024 17:18:00 +0530
Subject: [PATCH 1/2] fix: Checkbox tick visible on both modes

Signed-off-by: JeevaRamanathan <jeevaramanathan.m@infosys.com>
---
 .../src/form/checkbox.tsx                     | 51 ++++++++++++++-----
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/libraries/react-shared-libraries/src/form/checkbox.tsx b/libraries/react-shared-libraries/src/form/checkbox.tsx
index a16521b7..4e54b560 100644
--- a/libraries/react-shared-libraries/src/form/checkbox.tsx
+++ b/libraries/react-shared-libraries/src/form/checkbox.tsx
@@ -4,21 +4,26 @@ import clsx from 'clsx';
 import Image from 'next/image';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-export const Checkbox = forwardRef<null, {
-  checked?: boolean;
-  disableForm?: boolean;
-  name?: string;
-  className?: string;
-  onChange?: (event: { target: { name?: string, value: boolean } }) => void;
-  variant?: 'default' | 'hollow';
-}>((props, ref: any) => {
+export const Checkbox = forwardRef<
+  null,
+  {
+    checked?: boolean;
+    disableForm?: boolean;
+    name?: string;
+    className?: string;
+    onChange?: (event: { target: { name?: string; value: boolean } }) => void;
+    variant?: 'default' | 'hollow';
+  }
+>((props, ref: any) => {
   const { checked, className, disableForm, variant } = props;
   const form = useFormContext();
   const register = disableForm ? {} : form.register(props.name!);
 
-  const watch = disableForm ? undefined : useWatch({
-    name: props.name!,
-  });
+  const watch = disableForm
+    ? undefined
+    : useWatch({
+        name: props.name!,
+      });
 
   const [currentStatus, setCurrentStatus] = useState(watch || checked);
   const changeStatus = useCallback(() => {
@@ -26,7 +31,9 @@ export const Checkbox = forwardRef<null, {
     props?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
     if (!disableForm) {
       // @ts-ignore
-      register?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
+      register?.onChange?.({
+        target: { name: props.name!, value: !currentStatus },
+      });
     }
   }, [currentStatus]);
 
@@ -37,12 +44,28 @@ export const Checkbox = forwardRef<null, {
       onClick={changeStatus}
       className={clsx(
         'cursor-pointer rounded-[4px] select-none w-[24px] h-[24px] justify-center items-center flex',
-        variant === 'default' || !variant ? ('bg-forth') : ('border-customColor1 border-2 bg-customColor2'),
+        variant === 'default' || !variant
+          ? 'bg-forth'
+          : 'border-customColor1 border-2 bg-customColor2',
         className
       )}
     >
       {currentStatus && (
-        <Image src="/form/checked.svg" alt="Checked" width={20} height={20} />
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="20"
+            height="20"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </div>
       )}
     </div>
   );

From f21ea604cefc4bb483237a367788531f2981bb8b Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Tue, 1 Oct 2024 17:33:34 +0530
Subject: [PATCH 2/2] removed formatting

---
 .../src/form/checkbox.tsx                     | 67 ++++++++-----------
 1 file changed, 29 insertions(+), 38 deletions(-)

diff --git a/libraries/react-shared-libraries/src/form/checkbox.tsx b/libraries/react-shared-libraries/src/form/checkbox.tsx
index 4e54b560..8090d000 100644
--- a/libraries/react-shared-libraries/src/form/checkbox.tsx
+++ b/libraries/react-shared-libraries/src/form/checkbox.tsx
@@ -4,26 +4,21 @@ import clsx from 'clsx';
 import Image from 'next/image';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-export const Checkbox = forwardRef<
-  null,
-  {
-    checked?: boolean;
-    disableForm?: boolean;
-    name?: string;
-    className?: string;
-    onChange?: (event: { target: { name?: string; value: boolean } }) => void;
-    variant?: 'default' | 'hollow';
-  }
->((props, ref: any) => {
+export const Checkbox = forwardRef<null, {
+  checked?: boolean;
+  disableForm?: boolean;
+  name?: string;
+  className?: string;
+  onChange?: (event: { target: { name?: string, value: boolean } }) => void;
+  variant?: 'default' | 'hollow';
+}>((props, ref: any) => {
   const { checked, className, disableForm, variant } = props;
   const form = useFormContext();
   const register = disableForm ? {} : form.register(props.name!);
 
-  const watch = disableForm
-    ? undefined
-    : useWatch({
-        name: props.name!,
-      });
+  const watch = disableForm ? undefined : useWatch({
+    name: props.name!,
+  });
 
   const [currentStatus, setCurrentStatus] = useState(watch || checked);
   const changeStatus = useCallback(() => {
@@ -31,9 +26,7 @@ export const Checkbox = forwardRef<
     props?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
     if (!disableForm) {
       // @ts-ignore
-      register?.onChange?.({
-        target: { name: props.name!, value: !currentStatus },
-      });
+      register?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
     }
   }, [currentStatus]);
 
@@ -44,29 +37,27 @@ export const Checkbox = forwardRef<
       onClick={changeStatus}
       className={clsx(
         'cursor-pointer rounded-[4px] select-none w-[24px] h-[24px] justify-center items-center flex',
-        variant === 'default' || !variant
-          ? 'bg-forth'
-          : 'border-customColor1 border-2 bg-customColor2',
+        variant === 'default' || !variant ? ('bg-forth') : ('border-customColor1 border-2 bg-customColor2'),
         className
       )}
     >
       {currentStatus && (
-        <div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="20"
-            height="20"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <polyline points="20 6 9 17 4 12"></polyline>
-          </svg>
-        </div>
-      )}
+          <div>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="20"
+                height="20"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+       )}
     </div>
   );
 });