feat: implement Checkbox component with styles and assets

Author: RohitRaj011

src/Common/Checkbox.tsx

@@ -0,0 +1,99 @@
+.form__checkbox-label {
+    font-weight: 400;
+    display: inline-block;
+    margin-left: 12px;
+    line-height: 16px;
+}
+
+.form__checkbox__root {
+    &--gap-8 {
+        .form__checkbox-label {
+            margin-left: 8px;
+        }
+    }
+}
+
+.form__checkbox-check {
+    display: none;
+}
+
+$checkbox-hover-bg-image: url('./assets/ic-checkbox-hover.svg');
+
+.form__checkbox-container {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: 0;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-image: url('./assets/ic-checkbox-unselected.svg');
+    transition: background-image 0.17s;
+
+    &:hover {
+        background-image: url($checkbox-hover-bg-image);
+    }
+}
+
+// Class for checkbox parent container, if added to parent container, hover effect will be applied to checkbox
+.checkbox__parent-container {
+    &:hover {
+        .form__checkbox-container {
+            background-image: $checkbox-hover-bg-image;
+        }
+    }
+}
+
+.form__checkbox:checked[value='INTERMEDIATE'] ~ .form__checkbox-container {
+    background-image: url('./assets/ic-checkbox-intermediate.svg');
+}
+
+.form__checkbox:checked[value='CHECKED'] ~ .form__checkbox-container {
+    background-image: url('./assets/ic-checkbox-selected.svg');
+}
+
+.form__checkbox:checked[value='BULK_CHECKED'] ~ .form__checkbox-container {
+    background-image: url('./assets/ic-bulk-check.svg');
+}
+
+.form__checkbox:disabled ~ .form__checkbox-label,
+.form__checkbox:disabled ~ .form__checkbox-container {
+    color: var(--N500);
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+// These are just hack, not to be further extended
+.theme {
+    &__dark {
+        $checkbox-hover-bg-image: url('./assets/dark/ic-checkbox-hover.svg');
+
+        .form__checkbox-container {
+            background-image: url('./assets/dark/ic-checkbox-unselected.svg');
+
+            &:hover {
+                background-image: $checkbox-hover-bg-image;
+            }
+        }
+
+        // Class for checkbox parent container, if added to parent container, hover effect will be applied to checkbox
+        .checkbox__parent-container {
+            &:hover {
+                .form__checkbox-container {
+                    background-image: $checkbox-hover-bg-image;
+                }
+            }
+        }
+
+        .form__checkbox:checked[value='INTERMEDIATE']~.form__checkbox-container {
+            background-image: url('./assets/dark/ic-checkbox-intermediate.svg');
+        }
+
+        .form__checkbox:checked[value='CHECKED']~.form__checkbox-container {
+            background-image: url('./assets/dark/ic-checkbox-selected.svg');
+        }
+
+        .form__checkbox:checked[value='BULK_CHECKED']~.form__checkbox-container {
+            background-image: url('./assets/dark/ic-bulk-check.svg');
+        }
+    }
+}

src/Common/Checkbox/Checkbox.scss

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CheckboxProps } from '../Types'
+
+import './Checkbox.scss'
+
+/*
+Valid States of Checkbox:
+1. disabled: true, checked: false, value: XXX
+2. disabled: true, checked: true, value: INTERMIDIATE
+3. disabled: true, checked: true, value: CHECKED
+4. disabled: true, checked: false, value: XXX
+5. disabled: false, checked: true,  value: INTERMIDIATE
+6. disabled: false, checked: true,  value: CHECKED
+*/
+// TODO: Associate label with input element
+export const Checkbox = ({
+    rootClassName,
+    onClick,
+    name,
+    disabled,
+    value,
+    onChange,
+    tabIndex,
+    isChecked,
+    id,
+    dataTestId,
+    children,
+}: CheckboxProps) => {
+    const rootClass = `${rootClassName || ''}`
+
+    return (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        <label className={`dc__position-rel flex left cursor ${rootClass}`} onClick={onClick}>
+            <input
+                {...(name ? { name } : {})}
+                type="checkbox"
+                className="form__checkbox"
+                disabled={disabled}
+                value={value}
+                onChange={onChange}
+                tabIndex={tabIndex}
+                checked={isChecked}
+                id={id}
+                data-testid={dataTestId}
+            />
+            <span className="form__checkbox-container" data-testid={`${dataTestId}-chk-span`} />
+            <span className="form__checkbox-label">{children}</span>
+        </label>
+    )
+}