BorderedChevronToggle

Bordered 36×36 chevron toggle button for expanding/collapsing a filter panel; chevron direction is driven entirely by aria-expanded via CSS.

Buttons & Controls

Default

Aria labelAria expandedDisabled

Collapsed

Expanded

Products tone

Disabled

Interactive

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for BorderedChevronToggle — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave-3 batch D / #1655). // // The ONE plain-chevron primitive (#1348 merged the former // FloatingFilterToggle PLAIN variant into this component) — both the // /products/ collapsed float bar and the /metamodule-ref/ sticky bar draw // their collapsed-bar chevron from here. Chevron direction is driven entirely // by `group-aria-expanded:` CSS, never a JS path swap, so an imperatively- // driven SSR `disabled` baseline still animates correctly. import { useState } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { BorderedChevronToggle } from './bordered-chevron-toggle'; import type { BorderedChevronToggleProps } from './bordered-chevron-toggle'; const meta: StoryMeta = { title: 'BorderedChevronToggle', category: 'Buttons & Controls', description: 'Bordered 36×36 chevron toggle button for expanding/collapsing a filter panel; chevron direction is driven entirely by aria-expanded via CSS.', usage: `import { BorderedChevronToggle } from '@/src/components/shared/bordered-chevron-toggle';\n\n<BorderedChevronToggle ariaLabel="Expand filters" ariaExpanded={false} />`, }; export default meta; export const Default = defineStory<BorderedChevronToggleProps>({ name: 'Default', controls: [ { type: 'text', prop: 'ariaLabel', label: 'Aria label', defaultValue: 'Expand filters' }, { type: 'boolean', prop: 'ariaExpanded', label: 'Aria expanded', defaultValue: false }, { type: 'boolean', prop: 'disabled', label: 'Disabled', defaultValue: false }, ], render: ({ ariaLabel = 'Expand filters', ariaExpanded = false, disabled = false } = {}) => ( <BorderedChevronToggle ariaLabel={ariaLabel} ariaExpanded={ariaExpanded} disabled={disabled} /> ), }); export const Collapsed = defineStory({ name: 'Collapsed', render: () => <BorderedChevronToggle ariaLabel="Expand filters" ariaExpanded={false} />, }); export const Expanded = defineStory({ name: 'Expanded', render: () => <BorderedChevronToggle ariaLabel="Collapse filters" ariaExpanded={true} />, }); export const ProductsTone = defineStory({ name: 'Products tone', render: () => ( <BorderedChevronToggle ariaLabel="Expand filters" ariaExpanded={false} className="hover:text-zd-link" iconClassName="w-[20px] h-[20px]" /> ), }); // The SSR no-JS baseline before an island hydrates and enables it. export const Disabled = defineStory({ name: 'Disabled', render: () => <BorderedChevronToggle ariaLabel="Expand filters" ariaExpanded={false} disabled />, }); const InteractiveToggle = () => { const [expanded, setExpanded] = useState(false); return ( <BorderedChevronToggle ariaLabel={expanded ? 'Collapse filters' : 'Expand filters'} ariaExpanded={expanded} onClick={() => setExpanded((v) => !v)} /> ); }; export const Interactive = defineStory({ name: 'Interactive', render: () => <InteractiveToggle />, });