Merge pull request #160 from awell-health/toggle-ui

Add size to toggle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/design-system",
-  "version": "0.12.14",
+  "version": "0.12.15",
   "type": "module",
   "files": [
     "dist"

src/components/ui/form/toggle/toggle.tsx

@@ -8,7 +8,8 @@ interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   helpText?: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   labelClassName?: string;
-  variant?: 'default' | 'positive' | 'negative';
+  variant?: 'default' | 'positive';
+  toggleSize?: 'xs' | 'sm' | 'md' | 'lg';
 }
 
 const Toggle = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
@@ -21,6 +22,7 @@ const Toggle = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
     onChange,
     labelClassName,
     variant,
+    toggleSize,
     ...rest
   } = props;
 
@@ -33,6 +35,10 @@ const Toggle = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             'border-none bg-white hover:bg-white',
             // check styles from globals.css for colors
             variant === 'positive' && 'green',
+            toggleSize === 'xs' && 'toggle-xs',
+            toggleSize === 'sm' && 'toggle-sm',
+            toggleSize === 'md' && 'toggle-md',
+            toggleSize === 'lg' && 'toggle-lg',
             className
           )}
           checked={checked}

src/stories/Form/Toggle.stories.tsx

@@ -16,7 +16,8 @@ export const Example = {
     helpText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.',
     disabled: false,
     onChange: () => {},
-    variant: 'default'
+    variant: 'default',
+    toggleSize: 'md'
   },
   render: (args) => <Toggle {...args} />
 } satisfies Story;

style.css

@@ -3125,6 +3125,30 @@ input.tab:checked + .tab-content,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+[type="checkbox"].toggle-xs {
+  --handleoffset: 0.5rem;
+  height: 1rem;
+  width: 1.5rem;
+}
+
+[type="checkbox"].toggle-sm {
+  --handleoffset: 0.75rem;
+  height: 1.25rem;
+  width: 2rem;
+}
+
+[type="checkbox"].toggle-md {
+  --handleoffset: 1.5rem;
+  height: 1.5rem;
+  width: 3rem;
+}
+
+[type="checkbox"].toggle-lg {
+  --handleoffset: 2rem;
+  height: 2rem;
+  width: 4rem;
+}
+
 .tooltip {
   position: relative;
   display: inline-block;