Change the size default and remove the component not necessary to dis…

…play Update based on review and add type
ably · Dec 5, 2024 · 82f7fa6 · 82f7fa6
1 parent 696346c
commit 82f7fa6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 33 deletions.
diff --git a/src/core/Toggle.tsx b/src/core/Toggle.tsx
@@ -4,23 +4,24 @@ import cn from "./utils/cn";
 
 type ToggleProps = {
   id: string;
-  size?: "default" | "small";
+  size?: "sm" | "lg";
   label?: string;
   className?: string;
+  onCheckedChange?: (checked: boolean) => void;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 const Toggle: React.FC<ToggleProps> = ({
   id,
-  size,
+  size = "lg",
   label,
   className,
   ...props
 }) => {
-  const rootSize = size === "small" ? "w-[42px] h-[24px]" : "w-[56px] h-32";
+  const rootSize = size === "sm" ? "w-[42px] h-[24]" : "w-[56px] h-32";
   const thumbSize =
-    size === "small"
+    size === "sm"
       ? "w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]"
-      : "h-[28px] w-[28px] translate-x-2  data-[state=checked]:translate-x-[26px]";
+      : "h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]";
 
   return (
     <div className="flex items-center">
@@ -34,7 +35,10 @@ const Toggle: React.FC<ToggleProps> = ({
         {...props}
       >
         <Switch.Thumb
-          className={`block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform ${thumbSize}`}
+          className={cn(
+            `block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform`,
+            thumbSize,
+          )}
         />
       </Switch.Root>
       {label ? (

diff --git a/src/core/Toggle/Toggle.stories.tsx b/src/core/Toggle/Toggle.stories.tsx
@@ -15,17 +15,12 @@ Default.args = {};
 
 export const Checked = Template.bind({});
 Checked.args = {
-  checked: true,
+  defaultChecked: true,
   disabled: false,
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  checked: false,
+  defaultChecked: false,
   disabled: true,
 };
-
-export const Small = Template.bind({});
-Small.args = {
-  size: "small",
-};
diff --git a/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap b/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap
@@ -10,7 +10,7 @@ exports[`Components/Toggle Checked smoke-test 1`] = `
           class="p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus w-[56px] h-32"
   >
     <span data-state="checked"
-          class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform h-[28px] w-[28px] translate-x-2  data-[state=checked]:translate-x-[26px]"
+          class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]"
     >
     </span>
   </button>
@@ -27,7 +27,7 @@ exports[`Components/Toggle Default smoke-test 1`] = `
           class="p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus w-[56px] h-32"
   >
     <span data-state="unchecked"
-          class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform h-[28px] w-[28px] translate-x-2  data-[state=checked]:translate-x-[26px]"
+          class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]"
     >
     </span>
   </button>
@@ -47,24 +47,7 @@ exports[`Components/Toggle Disabled smoke-test 1`] = `
   >
     <span data-state="unchecked"
           data-disabled
-          class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform h-[28px] w-[28px] translate-x-2  data-[state=checked]:translate-x-[26px]"
-    >
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Components/Toggle Small smoke-test 1`] = `
-<div class="flex items-center">
-  <button type="button"
-          role="switch"
-          aria-checked="false"
-          data-state="unchecked"
-          value="on"
-          class="p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus w-[42px] h-[24px]"
-  >
-    <span data-state="unchecked"
-          class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]"
+          class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]"
     >
     </span>
   </button>