@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/drawer/drawer-toggle-button.spec.tsx

@@ -0,0 +1,374 @@
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { LayoutService } from '../../services/layout-service.js'
+import { DrawerToggleButton } from './drawer-toggle-button.js'
+
+/**
+ * Creates a mock element for LayoutService
+ */
+const createMockElement = () =>
+  ({
+    style: {
+      setProperty: vi.fn(),
+    },
+  }) as unknown as HTMLElement
+
+describe('DrawerToggleButton component', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  describe('rendering', () => {
+    it('should render the shade-drawer-toggle-button custom element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        const element = document.querySelector('shade-drawer-toggle-button')
+        expect(element).not.toBeNull()
+        expect(element?.tagName.toLowerCase()).toBe('shade-drawer-toggle-button')
+      })
+    })
+
+    it('should render a button element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        const button = document.querySelector('button')
+        expect(button).not.toBeNull()
+      })
+    })
+
+    it('should render hamburger icon', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        const hamburger = document.querySelector('.hamburger')
+        expect(hamburger).not.toBeNull()
+
+        // Should have 3 lines
+        const spans = hamburger?.querySelectorAll('span')
+        expect(spans?.length).toBe(3)
+      })
+    })
+  })
+
+  describe('accessibility', () => {
+    // Note: aria-* attributes in Shades JSX don't propagate in JSDOM test environment.
+    // These tests verify the component accepts the props correctly.
+    // The aria attributes are set in JSX and work correctly in browser environments.
+
+    it('should accept ariaLabel prop with default value', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        const button = document.querySelector('[data-testid="drawer-toggle-left"]') as HTMLButtonElement
+        expect(button).not.toBeNull()
+        // Button is rendered, aria-label is set in JSX (may not be visible in JSDOM)
+      })
+    })
+
+    it('should accept custom ariaLabel prop', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" ariaLabel="Toggle navigation menu" />,
+        })
+
+        await sleepAsync(50)
+        const button = document.querySelector('[data-testid="drawer-toggle-left"]') as HTMLButtonElement
+        expect(button).not.toBeNull()
+        // Button is rendered with custom ariaLabel prop (may not be visible in JSDOM)
+      })
+    })
+
+    it('should reflect drawer state in visual appearance', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        // Initialize drawer as open
+        layoutService.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        const button = document.querySelector('[data-testid="drawer-toggle-left"]') as HTMLButtonElement
+        expect(button).not.toBeNull()
+
+        // Verify hamburger has open class when drawer is open
+        let hamburger = document.querySelector('.hamburger')
+        expect(hamburger?.classList.contains('open')).toBe(true)
+
+        // Close drawer
+        layoutService.setDrawerOpen('left', false)
+        await sleepAsync(50)
+
+        // Verify hamburger doesn't have open class when drawer is closed
+        hamburger = document.querySelector('.hamburger')
+        expect(hamburger?.classList.contains('open')).toBe(false)
+      })
+    })
+
+    it('should have type="button" to prevent form submission', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        const button = document.querySelector('button')
+        expect(button?.getAttribute('type')).toBe('button')
+      })
+    })
+  })
+
+  describe('toggling', () => {
+    it('should toggle left drawer when clicked', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        // Initialize drawer as open
+        layoutService.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        expect(layoutService.drawerState.getValue().left?.open).toBe(true)
+
+        // Click the button
+        const button = document.querySelector('button') as HTMLButtonElement
+        button.click()
+        await sleepAsync(50)
+
+        expect(layoutService.drawerState.getValue().left?.open).toBe(false)
+
+        // Click again
+        button.click()
+        await sleepAsync(50)
+
+        expect(layoutService.drawerState.getValue().left?.open).toBe(true)
+      })
+    })
+
+    it('should toggle right drawer when clicked', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        // Initialize drawer as open
+        layoutService.initDrawer('right', { open: true, width: '200px', variant: 'collapsible' })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="right" />,
+        })
+
+        await sleepAsync(50)
+        expect(layoutService.drawerState.getValue().right?.open).toBe(true)
+
+        // Click the button
+        const button = document.querySelector('button') as HTMLButtonElement
+        button.click()
+        await sleepAsync(50)
+
+        expect(layoutService.drawerState.getValue().right?.open).toBe(false)
+      })
+    })
+
+    it('should not throw if drawer is not initialized', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+
+        // Should not throw when clicking even though drawer isn't initialized
+        const button = document.querySelector('button') as HTMLButtonElement
+        expect(() => button.click()).not.toThrow()
+      })
+    })
+  })
+
+  describe('visual state', () => {
+    it('should not have open class when drawer is closed', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        // Initialize drawer as closed
+        layoutService.initDrawer('left', { open: false, width: '240px', variant: 'collapsible' })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        const hamburger = document.querySelector('.hamburger')
+        expect(hamburger?.classList.contains('open')).toBe(false)
+      })
+    })
+
+    it('should have open class when drawer is open', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        // Initialize drawer as open
+        layoutService.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        const hamburger = document.querySelector('.hamburger')
+        expect(hamburger?.classList.contains('open')).toBe(true)
+      })
+    })
+
+    it('should update visual state when drawer state changes', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        // Initialize drawer as open
+        layoutService.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        let hamburger = document.querySelector('.hamburger')
+        expect(hamburger?.classList.contains('open')).toBe(true)
+
+        // Close drawer via LayoutService
+        layoutService.setDrawerOpen('left', false)
+        await sleepAsync(50)
+
+        hamburger = document.querySelector('.hamburger')
+        expect(hamburger?.classList.contains('open')).toBe(false)
+      })
+    })
+  })
+
+  describe('data-testid', () => {
+    it('should have data-testid for left position', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="left" />,
+        })
+
+        await sleepAsync(50)
+        const button = document.querySelector('[data-testid="drawer-toggle-left"]')
+        expect(button).not.toBeNull()
+      })
+    })
+
+    it('should have data-testid for right position', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <DrawerToggleButton position="right" />,
+        })
+
+        await sleepAsync(50)
+        const button = document.querySelector('[data-testid="drawer-toggle-right"]')
+        expect(button).not.toBeNull()
+      })
+    })
+  })
+})

package/src/components/drawer/drawer-toggle-button.tsx

@@ -0,0 +1,124 @@
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import { LayoutService } from '../../services/layout-service.js'
+
+/**
+ * Props for the DrawerToggleButton component.
+ */
+export type DrawerToggleButtonProps = {
+  /** Which drawer to toggle */
+  position: 'left' | 'right'
+  /** Button aria-label for accessibility. Default: 'Toggle drawer' */
+  ariaLabel?: string
+}
+
+/**
+ * Default toggle button for collapsible drawers.
+ *
+ * Provides a hamburger menu icon that toggles the drawer open/closed
+ * via LayoutService. The icon animates between menu and close states.
+ *
+ * @example
+ * ```tsx
+ * // In AppBar
+ * <AppBar>
+ *   <DrawerToggleButton position="left" />
+ *   <h1>My App</h1>
+ * </AppBar>
+ *
+ * // With custom aria-label
+ * <DrawerToggleButton
+ *   position="left"
+ *   ariaLabel="Toggle navigation menu"
+ * />
+ * ```
+ */
+export const DrawerToggleButton = Shade<DrawerToggleButtonProps>({
+  shadowDomName: 'shade-drawer-toggle-button',
+  css: {
+    display: 'inline-block',
+
+    '& button': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '40px',
+      height: '40px',
+      padding: '0',
+      margin: '0',
+      border: 'none',
+      borderRadius: '50%',
+      background: 'transparent',
+      cursor: 'pointer',
+      transition: `background-color ${cssVariableTheme.transitions.duration.normal} ease`,
+      color: cssVariableTheme.text.primary,
+    },
+
+    '& button:hover': {
+      backgroundColor: cssVariableTheme.button.hover,
+    },
+
+    '& button:focus-visible': {
+      outline: `2px solid ${cssVariableTheme.palette.primary.main}`,
+      outlineOffset: '2px',
+    },
+
+    // Hamburger icon container
+    '& .hamburger': {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      width: '20px',
+      height: '14px',
+    },
+
+    '& .hamburger span': {
+      display: 'block',
+      width: '100%',
+      height: '2px',
+      backgroundColor: 'currentColor',
+      borderRadius: '1px',
+      transition: `transform ${cssVariableTheme.transitions.duration.slow} ease, opacity ${cssVariableTheme.transitions.duration.slow} ease`,
+    },
+
+    // Open state - transform to X
+    '& .hamburger.open span:nth-child(1)': {
+      transform: 'translateY(6px) rotate(45deg)',
+    },
+    '& .hamburger.open span:nth-child(2)': {
+      opacity: '0',
+    },
+    '& .hamburger.open span:nth-child(3)': {
+      transform: 'translateY(-6px) rotate(-45deg)',
+    },
+  },
+
+  render: ({ props, injector, useObservable }) => {
+    const layoutService = injector.getInstance(LayoutService)
+    const { position, ariaLabel = 'Toggle drawer' } = props
+
+    // Subscribe to drawer state to update icon
+    const [drawerState] = useObservable('drawerState', layoutService.drawerState)
+    const isOpen = drawerState[position]?.open ?? false
+
+    const handleClick = () => {
+      layoutService.toggleDrawer(position)
+    }
+
+    return (
+      <button
+        type="button"
+        onclick={handleClick}
+        aria-label={ariaLabel}
+        aria-expanded={isOpen ? 'true' : 'false'}
+        data-testid={`drawer-toggle-${position}`}
+      >
+        <div className={`hamburger ${isOpen ? 'open' : ''}`}>
+          <span />
+          <span />
+          <span />
+        </div>
+      </button>
+    )
+  },
+})