refactor(inputcheckbox): refactor the code and clean up (#600)

chanzuckerberg · Sep 14, 2023 · 60f5f60 · 60f5f60
1 parent b0193d8
commit 60f5f60
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 86 deletions.
diff --git 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
@@ -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
@@ -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,29 +13,29 @@ 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>
   );
 };
 
 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
@@ -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>
+    />
   );
 };