Merge pull request #571 from ably/Add_toogle_size_option

Add Size small for toogle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.1.3",
+  "version": "15.1.4",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

src/core/Toggle.tsx

@@ -4,22 +4,42 @@ import cn from "./utils/cn";
 
 type ToggleProps = {
   id: string;
+  size?: "sm" | "lg";
   label?: string;
   className?: string;
+  onCheckedChange?: (checked: boolean) => void;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-const Toggle: React.FC<ToggleProps> = ({ id, label, className, ...props }) => {
+const Toggle: React.FC<ToggleProps> = ({
+  id,
+  size = "lg",
+  label,
+  className,
+  ...props
+}) => {
+  const rootSize = size === "sm" ? "w-[42px] h-24" : "w-[56px] h-32";
+  const thumbSize =
+    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]";
+
   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-base",
+          "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-base",
           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={cn(
+            `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}>

src/core/Toggle/Toggle.stories.tsx

@@ -15,12 +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,
 };

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-base"
+          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-base 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-base"
+          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-base 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,11 @@ 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-base"
+          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-base 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>