chore(ToggleButton): story controls (#2793)

* fix(ToggleButton): story controls * chore: mute Storybook type errors
contentful · Jan 21, 2025 · d5a03e9 · d5a03e9
1 parent 29ba02b
commit d5a03e9
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/packages/components/button/stories/ToggleButton.stories.tsx b/packages/components/button/stories/ToggleButton.stories.tsx
@@ -8,7 +8,7 @@ import { Icon } from '@contentful/f36-icon';
 import * as icons from '@contentful/f36-icons';
 
 import { ButtonGroup } from '../src';
-import { ToggleButton } from '../src/ToggleButton';
+import { ToggleButton, type ToggleButtonProps } from '../src/ToggleButton';
 
 export default {
   title: 'Components/Button components/ToggleButton',
@@ -28,17 +28,18 @@ export default {
   },
 } as Meta;
 
-export const Basic = ({ icon, children, isDisabled }) => {
+export const Basic = ({ icon, children, ...rest }: ToggleButtonProps) => {
   const [isActive, setIsActive] = useState(false);
 
   return (
     <ToggleButton
-      isDisabled={isDisabled}
       isActive={isActive}
+      // @ts-expect-error - The icon React Element can't be passed as a string
+      icon={icon && <Icon as={icons[icon]} />}
       onToggle={() => {
         setIsActive(!isActive);
       }}
-      icon={icon && <Icon as={icons[icon]} />}
+      {...rest}
     >
       {children}
     </ToggleButton>
@@ -119,21 +120,23 @@ export const GroupedWithOnlyOneActive = () => {
   );
 };
 
-export const Overview = ({ icon, ...props }) => (
+export const Overview = ({ icon, onToggle, ...rest }: ToggleButtonProps) => (
   <>
     <Flex flexDirection="column" marginBottom="spacingL">
       <SectionHeading as="h3" marginBottom="spacingS">
         Toggle variants
       </SectionHeading>
 
       <Stack marginBottom="spacingM" spacing="spacingXs">
-        <ToggleButton onToggle={props.onToggle}>Default</ToggleButton>
+        <ToggleButton onToggle={onToggle} {...rest}>
+          Default
+        </ToggleButton>
 
-        <ToggleButton isActive onToggle={props.onToggle}>
+        <ToggleButton isActive onToggle={onToggle} {...rest}>
           Active
         </ToggleButton>
 
-        <ToggleButton isDisabled onToggle={props.onToggle}>
+        <ToggleButton isDisabled onToggle={onToggle} {...rest}>
           Disabled
         </ToggleButton>
       </Stack>
@@ -145,24 +148,30 @@ export const Overview = ({ icon, ...props }) => (
 
       <Stack marginBottom="spacingM" spacing="spacingXs">
         <ToggleButton
-          onToggle={props.onToggle}
+          onToggle={onToggle}
+          // @ts-expect-error - The icon React Element can't be passed as a string
           icon={icon && <Icon as={icons[icon]} />}
+          {...rest}
         >
           Default
         </ToggleButton>
 
         <ToggleButton
-          onToggle={props.onToggle}
+          onToggle={onToggle}
           isActive
+          // @ts-expect-error - The icon React Element can't be passed as a string
           icon={icon && <Icon as={icons[icon]} />}
+          {...rest}
         >
           Active
         </ToggleButton>
 
         <ToggleButton
-          onToggle={props.onToggle}
+          onToggle={onToggle}
           isDisabled
+          // @ts-expect-error - The icon React Element can't be passed as a string
           icon={icon && <Icon as={icons[icon]} />}
+          {...rest}
         >
           Disabled
         </ToggleButton>