From b306377301ffce2466f8cd8d938390b9a42bae25 Mon Sep 17 00:00:00 2001
From: April Smith <april.smith@ably.com>
Date: Thu, 5 Dec 2024 15:03:40 +0000
Subject: [PATCH] Add Size small for toogle

---
 src/core/Toggle.tsx                           | 20 +++++++++++--
 src/core/Toggle/Toggle.stories.tsx            |  5 ++++
 .../__snapshots__/Toggle.stories.tsx.snap     | 29 +++++++++++++++----
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/core/Toggle.tsx b/src/core/Toggle.tsx
index e52e6993c..5e9ba71a4 100644
--- a/src/core/Toggle.tsx
+++ b/src/core/Toggle.tsx
@@ -4,22 +4,36 @@ import cn from "./utils/cn";
 
 type ToggleProps = {
   id: string;
+  size?: string;
   label?: string;
   className?: string;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-const Toggle: React.FC<ToggleProps> = ({ id, label, className, ...props }) => {
+const Toggle: React.FC<ToggleProps> = ({
+  id,
+  size,
+  label,
+  className,
+  ...props
+}) => {
+  const rootSize = size === "small" ? "w-[42px] h-[24px]" : "w-[56px] h-32";
+  const thumbSize =
+    size === "small" ? "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]";
+
   return (
     <div className="flex items-center">
       <Switch.Root
         className={cn(
-          "p-0 h-32 w-[56px] 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",
+          "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",
           className,
+          rootSize,
         )}
         id={id}
         {...props}
       >
-        <Switch.Thumb className="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform" />
+        <Switch.Thumb
+          className={`block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform ${thumbSize}`}
+        />
       </Switch.Root>
       {label ? (
         <label className="ml-16" htmlFor={id}>
diff --git a/src/core/Toggle/Toggle.stories.tsx b/src/core/Toggle/Toggle.stories.tsx
index 4717e8009..978f98217 100644
--- a/src/core/Toggle/Toggle.stories.tsx
+++ b/src/core/Toggle/Toggle.stories.tsx
@@ -24,3 +24,8 @@ Disabled.args = {
   checked: 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
index 21d510f45..b2ac92808 100644
--- a/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap
+++ b/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap
@@ -7,10 +7,10 @@ exports[`Components/Toggle Checked smoke-test 1`] = `
           aria-checked="true"
           data-state="checked"
           value="on"
-          class="p-0 h-32 w-[56px] 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"
+          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 h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
+          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>
@@ -24,10 +24,10 @@ exports[`Components/Toggle Default smoke-test 1`] = `
           aria-checked="false"
           data-state="unchecked"
           value="on"
-          class="p-0 h-32 w-[56px] 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"
+          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 h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
+          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>
@@ -43,11 +43,28 @@ exports[`Components/Toggle Disabled smoke-test 1`] = `
           data-disabled
           disabled
           value="on"
-          class="p-0 h-32 w-[56px] 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"
+          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"
           data-disabled
-          class="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
+          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]"
     >
     </span>
   </button>