From c193b313274e6885b7cb723f2013f11a7c99ef4a Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Thu, 8 Feb 2024 15:59:44 +0800
Subject: [PATCH] fix: improve checkbox component

---
 lib/components/Checkbox/Checkbox.scss | 22 ++++++++++++++--------
 lib/components/Checkbox/index.tsx     |  5 ++++-
 src/stories/Checkbox.stories.tsx      |  4 ++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/lib/components/Checkbox/Checkbox.scss b/lib/components/Checkbox/Checkbox.scss
index 4f816c55..a6a87231 100644
--- a/lib/components/Checkbox/Checkbox.scss
+++ b/lib/components/Checkbox/Checkbox.scss
@@ -7,10 +7,9 @@ $error_color: #ec3f3f;
 .deriv-checkbox__wrapper {
   display: inline-flex;
   position: relative;
-  width: fit-content;
   align-items: center;
-  justify-content: center;
   gap: 8px;
+  width: 100%;
 }
 
 .deriv-checkbox {
@@ -18,7 +17,7 @@ $error_color: #ec3f3f;
   height: 16px;
   border-radius: $border_radius;
   transition: background-color 0.3s ease-in-out;
-  cursor: pointer;
+  box-sizing: border-box;
 
   &--unchecked {
     background: transparent;
@@ -36,7 +35,6 @@ $error_color: #ec3f3f;
 
   &--disabled {
     opacity: 0.5;
-    cursor: not-allowed;
   }
 
   &__label {
@@ -46,12 +44,20 @@ $error_color: #ec3f3f;
     line-height: 20px;
     font-weight: 400;
 
-    &--disabled {
-      cursor: text;
-    }
-
     &--error {
       color: $error_color;
     }
   }
 }
+
+.deriv-checkbox:not(:disabled),
+.deriv-checkbox:not(:disabled) + .deriv-checkbox__wrapper,
+.deriv-checkbox:not(:disabled) ~ .deriv-checkbox__label {
+  cursor: pointer;
+}
+
+.deriv-checkbox:disabled,
+.deriv-checkbox:disabled + .deriv-checkbox__wrapper,
+.deriv-checkbox--disabled ~ .deriv-checkbox__label {
+  cursor: not-allowed;
+}
diff --git a/lib/components/Checkbox/index.tsx b/lib/components/Checkbox/index.tsx
index 35c6ecf4..af8c5bcf 100644
--- a/lib/components/Checkbox/index.tsx
+++ b/lib/components/Checkbox/index.tsx
@@ -2,7 +2,8 @@ import { ComponentProps, ReactNode, Ref, forwardRef } from "react";
 import clsx from "clsx";
 import "./Checkbox.scss";
 
-interface CheckboxProps extends Omit<ComponentProps<"input">, "placeholder"> {
+interface CheckboxProps
+  extends Omit<ComponentProps<"input">, "placeholder" | "defaultChecked"> {
   error?: boolean;
   label?: ReactNode;
   labelClassName?: string;
@@ -38,6 +39,8 @@ export const Checkbox = forwardRef(
             className
           )}
           type="checkbox"
+          checked={!disabled && checked}
+          disabled={disabled}
           ref={ref}
           {...rest}
         />
diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
index cc2d7cc8..5563b6a1 100644
--- a/src/stories/Checkbox.stories.tsx
+++ b/src/stories/Checkbox.stories.tsx
@@ -66,12 +66,12 @@ export const Default: Story = {
     label: "Get updates about Deriv products, services and events.",
   },
   render: (args) => {
-    const [checked, setChecked] = useState(false);
+    const [checked, setChecked] = useState(args.checked);
 
     return (
       <Checkbox
         {...args}
-        checked={checked}
+        checked={args.checked || checked}
         onChange={() => setChecked((previous) => !previous)}
       />
     );