From e1c056a6b4c1260206d5ed0bc5d5860ca7409cb3 Mon Sep 17 00:00:00 2001
From: Patrick Ear <patrick.ear@scality.com>
Date: Mon, 19 Jun 2023 16:33:41 +0200
Subject: [PATCH] improve checkbox typing

---
 .../checkbox/Checkbox.component.tsx           | 92 +++++++++----------
 1 file changed, 42 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/checkbox/Checkbox.component.tsx b/src/lib/components/checkbox/Checkbox.component.tsx
index ae909cebd2..8d46f8c8c1 100644
--- a/src/lib/components/checkbox/Checkbox.component.tsx
+++ b/src/lib/components/checkbox/Checkbox.component.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, forwardRef } from 'react';
+import { ChangeEvent, InputHTMLAttributes, forwardRef } from 'react';
 import styled from 'styled-components';
 import { spacing, Stack } from '../../spacing';
 import { getTheme } from '../../utils';
@@ -10,39 +10,32 @@ type Props = {
   checked?: boolean;
   disabled?: boolean;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-};
-
-const Checkbox = forwardRef<HTMLInputElement, Props>(({
-  disabled,
-  checked,
-  label,
-  value,
-  onChange,
-  ...rest
-}, ref) => {
-  return (
-    <StyledCheckbox
-      checked={checked}
-      disabled={disabled}
-      className="sc-checkbox"
-    >
-      <Stack>
-      <input
-        type="checkbox"
+} & InputHTMLAttributes<HTMLInputElement>;
+
+const Checkbox = forwardRef<HTMLInputElement, Props>(
+  ({ disabled, checked, label, value, onChange, ...rest }, ref) => {
+    return (
+      <StyledCheckbox
         checked={checked}
         disabled={disabled}
-        value={value}
-        onChange={onChange}
-        ref={ref}
-        {...rest}
-      />
-      {label && (
-        <Text>{label}</Text>
-      )}
-      </Stack>
-    </StyledCheckbox>
-  );
-});
+        className="sc-checkbox"
+      >
+        <Stack>
+          <input
+            type="checkbox"
+            checked={checked}
+            disabled={disabled}
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            {...rest}
+          />
+          {label && <Text>{label}</Text>}
+        </Stack>
+      </StyledCheckbox>
+    );
+  },
+);
 
 export { Checkbox };
 
@@ -52,10 +45,10 @@ const StyledCheckbox = styled.label<{
 }>`
   /* Basic styling */
 
-  [type=checkbox] {
+  [type='checkbox'] {
     width: 0.75rem;
     height: 0.75rem;
-    color: ${props => getTheme(props).textPrimary};
+    color: ${(props) => getTheme(props).textPrimary};
     vertical-align: middle;
     -webkit-appearance: none;
     background: none;
@@ -63,16 +56,15 @@ const StyledCheckbox = styled.label<{
     outline: 0;
     flex-grow: 0;
     border-radius: ${spacing.r2};
-    background-color: ${props => getTheme(props).backgroundLevel1};
+    background-color: ${(props) => getTheme(props).backgroundLevel1};
     transition: background 300ms;
     cursor: pointer;
   }
 
-
   /* Pseudo element for check styling */
 
-  [type=checkbox]::before {
-    content: "";
+  [type='checkbox']::before {
+    content: '';
     color: transparent;
     display: block;
     width: inherit;
@@ -81,45 +73,45 @@ const StyledCheckbox = styled.label<{
     border: 0;
     background-color: transparent;
     background-size: contain;
-    box-shadow: inset 0 0 0 ${spacing.r1} ${props => getTheme(props).border};
+    box-shadow: inset 0 0 0 ${spacing.r1} ${(props) => getTheme(props).border};
   }
 
-
   /* Checked */
 
-  [type=checkbox]:checked {
-    background-color: ${props => getTheme(props).selectedActive};
+  [type='checkbox']:checked {
+    background-color: ${(props) => getTheme(props).selectedActive};
   }
 
-  [type=checkbox]:checked::before {
+  [type='checkbox']:checked::before {
     box-shadow: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
   }
 
   /* Indeterminate */
 
-  [type=checkbox]:indeterminate::before {
+  [type='checkbox']:indeterminate::before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='4' y1='11' x2='18' y2='11' style='stroke:%23fff;stroke-width:2'/%3E %3C/svg%3E");
   }
 
   /* Hover & focus */
-  [type=checkbox]:hover {
+  [type='checkbox']:hover {
     ${(props) =>
       !props.disabled &&
       `box-shadow: inset 0 0 0 ${spacing.r1} ${getTheme(props).infoPrimary};`}
   }
-  [type=checkbox]:focus {
-    box-shadow: inset 0 0 0 ${spacing.r1} ${props => getTheme(props).infoPrimary};
+  [type='checkbox']:focus {
+    box-shadow: inset 0 0 0 ${spacing.r1}
+      ${(props) => getTheme(props).infoPrimary};
   }
 
-  [type=checkbox]:focus-visible:enabled {
-    outline: dashed ${spacing.r2} ${props => getTheme(props).selectedActive};
+  [type='checkbox']:focus-visible:enabled {
+    outline: dashed ${spacing.r2} ${(props) => getTheme(props).selectedActive};
     outline-offset: ${spacing.r2};
   }
 
   /* Disabled */
 
-  [type=checkbox]:disabled {
+  [type='checkbox']:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }