feat toggle

Author: belltalion

packages/components/src/components/Toggle/Toggle.stories.tsx

@@ -1,18 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
 import { Toggle } from './index'
 
-export default {
+type Story = StoryObj<typeof meta>
+
+const meta: Meta<typeof Toggle> = {
   title: 'Devfive/Toggle',
   component: Toggle,
-  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '10px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 }
 
-export const Default = {
+export const Default: Story = {
   args: {
-    disabled: false,
-    variant: 'default',
     defaultValue: false,
-    offText: 'OFF',
-    onText: 'ON',
-    color: 'var(--primary)',
+    variant: 'default',
+    disabled: false,
   },
 }
+
+export default meta

packages/components/src/components/Toggle/__tests__/index.browser.test.tsx

@@ -0,0 +1,72 @@
+import { act, render } from '@testing-library/react'
+
+import { Toggle } from '../index'
+
+vi.mock('react', async (originImport: any) => {
+  const origin = await originImport()
+  return {
+    ...origin,
+    cache: vi.fn((arg) => arg),
+  }
+})
+describe('Toggle', () => {
+  it('should Toggle snapshot', () => {
+    expect(render(<Toggle />).container).toMatchSnapshot()
+    expect(render(<Toggle disabled />).container).toMatchSnapshot()
+    expect(render(<Toggle defaultValue={true} />).container).toMatchSnapshot()
+    expect(render(<Toggle value={true} />).container).toMatchSnapshot()
+    expect(render(<Toggle variant="switch" />).container).toMatchSnapshot()
+    expect(
+      render(<Toggle disabled variant="switch" />).container,
+    ).toMatchSnapshot()
+    expect(
+      render(<Toggle defaultValue={true} variant="switch" />).container,
+    ).toMatchSnapshot()
+    expect(
+      render(<Toggle value={true} variant="switch" />).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Toggle
+          colors={{
+            primary: 'blue',
+            bg: 'blue',
+            hoverBg: 'blue',
+            primaryHoverBg: 'blue',
+            disabledBg: 'blue',
+            switchHoverOutline: 'blue',
+            switchShadow: 'blue',
+          }}
+        />,
+      ).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Toggle
+          colors={{
+            primary: 'blue',
+            bg: 'blue',
+            hoverBg: 'blue',
+            primaryHoverBg: 'blue',
+            disabledBg: 'blue',
+            switchHoverOutline: 'blue',
+            switchShadow: 'blue',
+          }}
+          variant="switch"
+        />,
+      ).container,
+    ).toMatchSnapshot()
+  })
+
+  it('should change value when use onChange prop', async () => {
+    const onChange = vi.fn()
+    const { container } = render(<Toggle onChange={onChange} />)
+    const toggleButton = container.querySelector(`.toggleSwitch`)
+    const input = container.querySelector('input')
+    toggleButton &&
+      (await act(async () => {
+        await userEvent.click(toggleButton)
+      }))
+    expect(input).toHaveAttribute('value', 'true')
+  })
+})

packages/components/src/components/Toggle/index.tsx

@@ -63,7 +63,7 @@ export function Toggle({
         }
         borderRadius="500px"
         boxSizing="border-box"
-        className="toggleSwitch"
+        className={'toggle-switch ' + className}
         cursor="pointer"
         h={isDefault ? '28px' : '8px'}
         justifyContent={resultValue ? 'flex-end' : undefined}
@@ -105,10 +105,12 @@ export function Toggle({
           outline="4px"
           pos="absolute"
           selectors={{
-            '.toggleSwitch:hover[aria-disabled=false] > &': {
-              outline: '4px solid',
-              outlineColor: `var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))`,
-            },
+            '.toggle-switch:not([aria-disabled=true]):hover > &': isDefault
+              ? {}
+              : {
+                  outline: '4px solid',
+                  outlineColor: `var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))`,
+                },
           }}
           style={styles?.toggle}
           styleVars={{