Update checkbox API (#663)

* Update checkbox API

* Fix test

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -132,9 +132,7 @@ export function CompanyBoardCard() {
           />
           <span>{company.name}</span>
           <div style={{ display: 'flex', flex: 1 }} />
-          <div onClick={handleCheckboxChange}>
+          <Checkbox checked={selected} onChange={handleCheckboxChange} />
-            <Checkbox checked={selected} />
-          </div>
         </StyledBoardCardHeader>
         <StyledBoardCardBody>
           <span>

front/src/modules/ui/board/components/Board.tsx

@@ -21,7 +21,6 @@ export function getOptimisticlyUpdatedBoard(
   board: BoardPipelineStageColumn[],
   result: DropResult,
 ) {
-  // TODO: review any types
   const newBoard = JSON.parse(JSON.stringify(board));
   const { destination, source } = result;
   if (!destination) return;

front/src/modules/ui/components/form/Checkbox.tsx

@@ -6,7 +6,7 @@ import { IconCheck } from '@/ui/icons/index';
 type OwnProps = {
   checked: boolean;
   indeterminate?: boolean;
-  onChange?: (newCheckedValue: boolean) => void;
+  onChange: () => void;
 };
 
 const StyledContainer = styled.div`
@@ -65,18 +65,13 @@ export function Checkbox({ checked, onChange, indeterminate }: OwnProps) {
     }
   }, [ref, indeterminate, checked]);
 
-  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-    onChange?.(event.target.checked);
-  }
-
   return (
-    <StyledContainer>
+    <StyledContainer onClick={onChange}>
       <input
         ref={ref}
         type="checkbox"
         data-testid="input-checkbox"
         checked={checked}
-        onChange={handleChange}
       />
       {checked && <IconCheck />}
     </StyledContainer>

front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx

@@ -42,9 +42,9 @@ export function DropdownMenuCheckableItem({
   }
 
   return (
-    <DropdownMenuCheckableItemContainer onClick={handleClick}>
+    <DropdownMenuCheckableItemContainer>
       <StyledLeftContainer>
-        <Checkbox checked={checked} />
+        <Checkbox checked={checked} onChange={handleClick} />
         <StyledChildrenContainer>{children}</StyledChildrenContainer>
       </StyledLeftContainer>
     </DropdownMenuCheckableItemContainer>

front/src/modules/ui/components/table/CheckboxCell.tsx

@@ -10,7 +10,6 @@ import { Checkbox } from '../form/Checkbox';
 const StyledContainer = styled.div`
   align-items: center;
 
-  cursor: pointer;
   display: flex;
   height: 32px;
 
@@ -33,11 +32,8 @@ export function CheckboxCell() {
   }
 
   return (
-    <StyledContainer
+    <StyledContainer>
-      onClick={handleContainerClick}
+      <Checkbox checked={currentRowSelected} onChange={handleContainerClick} />
-      data-testid="input-checkbox-cell-container"
-    >
-      <Checkbox checked={currentRowSelected} />
     </StyledContainer>
   );
 }

front/src/modules/ui/components/table/SelectAllCheckbox.tsx

@@ -8,7 +8,6 @@ import { Checkbox } from '../form/Checkbox';
 const StyledContainer = styled.div`
   align-items: center;
 
-  cursor: pointer;
   display: flex;
   height: 32px;
 
@@ -26,11 +25,12 @@ export const SelectAllCheckbox = () => {
   const indeterminate = allRowsSelectedStatus === 'some';
 
   return (
-    <StyledContainer
+    <StyledContainer>
-      onClick={handleContainerClick}
+      <Checkbox
-      data-testid="input-checkbox-cell-container"
+        checked={checked}
-    >
+        onChange={handleContainerClick}
-      <Checkbox checked={checked} indeterminate={indeterminate} />
+        indeterminate={indeterminate}
+      />
     </StyledContainer>
   );
 };

front/src/pages/people/__stories__/People.inputs.stories.tsx

@@ -81,7 +81,7 @@ export const CheckCheckboxes: Story = {
     await canvas.findByText(mockedPeopleData[0].email);
 
     const inputCheckboxContainers = await canvas.findAllByTestId(
-      'input-checkbox-cell-container',
+      'input-checkbox',
     );
 
     const inputCheckboxes = await canvas.findAllByTestId('input-checkbox');