docs(checkbox): 📝 update story table for state

adaptui · Aug 16, 2021 · f375fe4 · f375fe4
1 parent 0e3c95b
commit f375fe4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/src/checkboxNew/Checkbox.tsx b/src/checkboxNew/Checkbox.tsx
@@ -60,6 +60,9 @@ export const Checkbox = forwardRefWithAs<
     ...inputProps
   } = props;
 
+  console.log("%c state", "color: #8c0038", stateProp);
+  console.log("%c defaultState", "color: #514080", defaultState);
+  console.log("%c onStateChange", "color: #99614d", onStateChange);
   const [state, setState] = useControllableState({
     defaultValue: defaultState,
     value: stateProp,

diff --git a/src/checkboxNew/stories/Checkbox.stories.tsx b/src/checkboxNew/stories/Checkbox.stories.tsx
@@ -20,6 +20,7 @@ export default {
       "setState",
       "checked",
       "value",
+      "defaultState",
       "state",
       "onStateChange",
       "labelProps",
@@ -39,14 +40,27 @@ export const Default: ComponentStory<typeof Checkbox> = {
 export const Small: ComponentStory<typeof Checkbox> = {
   ...Default,
   args: { ...Default.args, size: "sm" },
+  argTypes: {
+    size: { table: { disable: true } },
+  },
+};
+export const Medium: ComponentStory<typeof Checkbox> = {
+  ...Default,
+  argTypes: {
+    size: { table: { disable: true } },
+  },
 };
-export const Medium: ComponentStory<typeof Checkbox> = { ...Default };
 export const Large: ComponentStory<typeof Checkbox> = {
   ...Default,
   args: { ...Default.args, size: "lg" },
+  argTypes: {
+    size: { table: { disable: true } },
+  },
 };
 
-export const UnChecked: ComponentStory<typeof Checkbox> = { ...Default };
+export const UnChecked: ComponentStory<typeof Checkbox> = {
+  ...Default,
+};
 export const Checked: ComponentStory<typeof Checkbox> = {
   ...Default,
   args: { ...Default.args, defaultState: true },
@@ -92,16 +106,19 @@ export const Controlled = () => {
   return (
     <div className="flex flex-col space-y-4">
       <Checkbox state={state} onStateChange={setState} />
+
       <div className="flex flex-col space-y-2">
-        <Button onClick={() => setState(true)}>{`${
-          state === true ? "Now" : "Change to"
-        } Checked`}</Button>
-        <Button onClick={() => setState(false)}>{`${
-          state === false ? "Now" : "Change to"
-        } UnChecked`}</Button>
-        <Button onClick={() => setState("indeterminate")}>{`${
-          state === "indeterminate" ? "Now" : "Change to"
-        } Interderminate`}</Button>
+        <Button onClick={() => setState(true)}>
+          {`${state === true ? "Now" : "Change to"} Checked`}
+        </Button>
+
+        <Button onClick={() => setState(false)}>
+          {`${state === false ? "Now" : "Change to"} UnChecked`}
+        </Button>
+
+        <Button onClick={() => setState("indeterminate")}>
+          {`${state === "indeterminate" ? "Now" : "Change to"} Interderminate`}
+        </Button>
       </div>
     </div>
   );