From 60f5f60cd19047741ccd594e5177e8572909c9b5 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Thu, 14 Sep 2023 14:13:52 -0400
Subject: [PATCH] refactor(inputcheckbox): refactor the code and clean up
 (#600)

---
 package.json                                  |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  8 +-
 .../src/core/InputCheckbox/index.stories.tsx  | 41 +++++----
 .../src/core/InputCheckbox/index.tsx          | 86 ++++++-------------
 4 files changed, 51 insertions(+), 86 deletions(-)

diff --git a/package.json b/package.json
index f1a17a2d7..8eec7f77a 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
     "test-storybook": "test-storybook",
     "storybook:axe": "yarn build-storybook && yarn storybook:axeOnly",
     "storybook:axeOnly": "axe-storybook --build-dir docs-build",
-    "test": "lerna run test",
+    "test": "lerna run test -- --detectOpenHandles",
     "test:updateSnapshots": "lerna run test -- -u",
     "namespace-check": "lerna run namespace-check",
     "prepare": "husky install",
diff --git a/packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap
index 23b35bd91..944137490 100644
--- a/packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap
@@ -3,20 +3,16 @@
 exports[`<InputCheckbox /> Default story renders snapshot 1`] = `
 <div>
   <label
-    class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
+    caption="Caption"
+    class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-n82mu-MuiFormControlLabel-root"
   >
     <span
-      caption="Caption"
       class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorDefault PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorDefault MuiCheckbox-root MuiCheckbox-colorDefault css-1ptfvrq-MuiButtonBase-root-MuiCheckbox-root"
-      label="Label"
-      stage="unchecked"
     >
       <input
         class="PrivateSwitchBase-input css-1m9pwf3"
         data-indeterminate="false"
-        id="test-story"
         type="checkbox"
-        value="Demo"
       />
       <svg
         aria-hidden="true"
diff --git a/packages/components/src/core/InputCheckbox/index.stories.tsx b/packages/components/src/core/InputCheckbox/index.stories.tsx
index 692ce6d41..7f5c3f7a6 100644
--- a/packages/components/src/core/InputCheckbox/index.stories.tsx
+++ b/packages/components/src/core/InputCheckbox/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Box, FormControlLabel } from "@mui/material";
+import { Box } from "@mui/material";
 import { Args, Meta } from "@storybook/react";
 import React from "react";
 import RawInputCheckbox from "./index";
@@ -13,17 +13,11 @@ const InputCheckbox = (props: Args): JSX.Element => {
 
   return (
     <div>
-      <FormControlLabel
-        control={
-          <RawInputCheckbox
-            disabled={disabled}
-            onChange={handleChange}
-            stage={checked ? "unchecked" : "checked"}
-            {...props}
-          />
-        }
-        label="Label"
-        value="Demo"
+      <RawInputCheckbox
+        disabled={disabled}
+        onChange={handleChange}
+        stage={checked ? "unchecked" : "checked"}
+        {...props}
       />
     </div>
   );
@@ -31,11 +25,17 @@ const InputCheckbox = (props: Args): JSX.Element => {
 
 export default {
   argTypes: {
-    Caption: {
-      control: { type: "string" },
+    caption: {
+      control: { type: "text" },
+    },
+    label: {
+      control: { type: "text" },
     },
-    Label: {
-      control: { type: "string" },
+    stage: {
+      control: {
+        type: "radio",
+      },
+      options: ["checked", "unchecked", "indeterminate"],
     },
   },
   component: InputCheckbox,
@@ -47,7 +47,6 @@ export default {
 export const Default = {
   args: {
     caption: "Caption",
-    id: testId,
     label: "Label",
   },
 };
@@ -133,7 +132,7 @@ const LivePreviewDemo = (): JSX.Element => {
         <CheckboxLabelDemo label="Label" disabled={false} />
       </div>
       <div style={{ gridArea: "1 / 2 / 1 / 2" }}>
-        <InputCheckbox disabled />
+        <InputCheckbox disabled label="Label" />
       </div>
       <div style={{ gridArea: "1 / 3 / 1 / 3" }}>
         <IndeterminateDemo />
@@ -144,7 +143,7 @@ const LivePreviewDemo = (): JSX.Element => {
 
 export const LivePreview = {
   parameters: {
-    controls: { exclude: ["caption", "label"] },
+    controls: { exclude: ["caption", "label", "stage"] },
     snapshot: {
       skip: true,
     },
@@ -174,7 +173,7 @@ const TestDemo = (): JSX.Element => {
         />
       </div>
       <div style={{ gridArea: "1 / 2 / 1 / 2" }}>
-        <InputCheckbox data-testid="checkbox" />
+        <InputCheckbox data-testid="checkbox" label="Label" />
       </div>
     </div>
   );
@@ -185,7 +184,7 @@ export const Test = {
     id: testId,
   },
   parameters: {
-    controls: { exclude: ["caption", "label", "id"] },
+    controls: { exclude: ["caption", "label", "id", "stage"] },
     snapshot: {
       skip: true,
     },
diff --git a/packages/components/src/core/InputCheckbox/index.tsx b/packages/components/src/core/InputCheckbox/index.tsx
index 011dd261e..bc640127a 100644
--- a/packages/components/src/core/InputCheckbox/index.tsx
+++ b/packages/components/src/core/InputCheckbox/index.tsx
@@ -34,60 +34,32 @@ const InputCheckbox = (props: CheckboxProps): JSX.Element => {
   const { caption, checkboxProps, disabled, label, stage, value, ...rest } =
     props;
 
-  if (label === undefined || stage !== undefined) {
-    let newProps: MUICheckboxProps;
-    switch (stage) {
-      case "checked":
-        newProps = {
-          ...props,
-          checked: true,
-          color: "primary",
-        };
-        break;
-      case "unchecked":
-        newProps = {
-          ...props,
-          checked: false,
-          color: "default",
-        };
-        break;
-      case "indeterminate":
-        newProps = {
-          ...props,
-          checked: true,
-          color: "primary",
-          indeterminate: true,
-        };
-        break;
-      default:
-        newProps = props;
-    }
-    return (
-      <StyledCheckbox
-        {...newProps}
-        checkedIcon={
-          <SvgIcon
-            fillcontrast="white"
-            component={IconCheckboxChecked}
-            viewBox="0 0 16 16"
-          />
-        }
-        icon={
-          <SvgIcon
-            fillcontrast="white"
-            component={IconCheckboxUnchecked}
-            viewBox="0 0 16 16"
-          />
-        }
-        indeterminateIcon={
-          <SvgIcon
-            fillcontrast="white"
-            component={IconCheckboxIndeterminate}
-            viewBox="0 0 16 16"
-          />
-        }
-      />
-    );
+  let newProps: MUICheckboxProps;
+  switch (stage) {
+    case "checked":
+      newProps = {
+        ...rest,
+        checked: true,
+        color: "primary",
+      };
+      break;
+    case "unchecked":
+      newProps = {
+        ...rest,
+        checked: false,
+        color: "default",
+      };
+      break;
+    case "indeterminate":
+      newProps = {
+        ...rest,
+        checked: true,
+        color: "primary",
+        indeterminate: true,
+      };
+      break;
+    default:
+      newProps = rest;
   }
 
   return (
@@ -118,14 +90,12 @@ const InputCheckbox = (props: CheckboxProps): JSX.Element => {
             />
           }
           {...checkboxProps}
-          {...rest}
+          {...newProps}
         />
       }
       label={label}
       value={value}
-    >
-      <div>Content</div>
-    </StyledFormControlLabel>
+    />
   );
 };