fix: ToggleSwitch states, test and snapshot

RocketChat · Sep 22, 2023 · 8ae61d6 · 8ae61d6
1 parent 0b22839
commit 8ae61d6
Show file tree

Hide file tree

Showing 3 changed files with 331 additions and 35 deletions.
diff --git a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.stories.tsx b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.stories.tsx
@@ -2,26 +2,19 @@ import { action } from '@storybook/addon-actions';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { ToggleSwitch, Label } from '../..';
-import { DECORATOR_ID, DECORATOR_LABEL } from '../../../.storybook/helpers';
+import { ToggleSwitch } from '../..';
+import {
+  DECORATOR_LABEL,
+  PropsVariationSection,
+} from '../../../.storybook/helpers';
 
 export default {
   title: 'Inputs/ToggleSwitch',
   component: ToggleSwitch,
-  decorators: [
-    (Story) => (
-      <>
-        <Story />
-        <Label mis='x4' htmlFor={DECORATOR_ID}>
-          {DECORATOR_LABEL}
-        </Label>
-      </>
-    ),
-  ],
 } as ComponentMeta<typeof ToggleSwitch>;
 
 const Template: ComponentStory<typeof ToggleSwitch> = (args) => (
-  <ToggleSwitch id={DECORATOR_ID} {...args} />
+  <ToggleSwitch aria-label={DECORATOR_LABEL} {...args} />
 );
 
 export const Default: ComponentStory<typeof ToggleSwitch> = Template.bind({});
@@ -39,3 +32,21 @@ export const Disabled: ComponentStory<typeof ToggleSwitch> = Template.bind({});
 Disabled.args = {
   disabled: true,
 };
+
+export const States: ComponentStory<typeof ToggleSwitch> = () => (
+  <PropsVariationSection
+    component={ToggleSwitch}
+    common={{ 'onChange': action('change'), 'aria-label': DECORATOR_LABEL }}
+    xAxis={{
+      checked: { checked: true },
+      unchecked: { checked: false },
+    }}
+    yAxis={{
+      default: {},
+      hover: { className: 'is-hovered' },
+      active: { className: 'is-active' },
+      focus: { className: 'is-focused' },
+      disabled: { disabled: true },
+    }}
+  />
+);
diff --git a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.tsx b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.tsx
@@ -5,11 +5,14 @@ import Box from '../Box';
 import { Label } from '../Label';
 
 export const ToggleSwitch = forwardRef(function ToggleSwitch(
-  props: ComponentProps<typeof Box> & AllHTMLAttributes<HTMLInputElement>,
+  {
+    className,
+    ...props
+  }: ComponentProps<typeof Box> & AllHTMLAttributes<HTMLInputElement>,
   ref: Ref<HTMLInputElement>
 ) {
   return (
-    <Box is={Label} rcx-toggle-switch>
+    <Box is={Label} className={className} rcx-toggle-switch>
       <Box
         is='input'
         ref={ref}