FloatingFilterToggle

72×72 floating drawer-tab that collapses a filter overlay, shared by /products/ and /metamodule-ref/ with a caller-supplied glass fill.

Buttons & Controls

Drawer tab

Fixed below sibling

Collapsed

Interactive

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for FloatingFilterToggle — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave-3 batch D / #1655). // // `placement` (issue #1360, MM Fog true-blur): 'drawer-tab' (default) hangs // the tab 72px BELOW its positioned ancestor, INSIDE the caller's floating // bar (still used by /products/); 'fixed-below' pins the tab's TOP edge to a // PLAIN sibling wrapper below the bar instead, so the tab's own // backdrop-filter samples the real page rather than the bar's backdrop-root // (a nested tab would otherwise sample an empty backdrop — #1351). See // `metamodule-ref-island.tsx` for the reference wiring. import { useState } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { FloatingFilterToggle } from './floating-filter-toggle'; const meta: StoryMeta = { title: 'FloatingFilterToggle', category: 'Buttons & Controls', description: '72×72 floating drawer-tab that collapses a filter overlay, shared by /products/ and /metamodule-ref/ with a caller-supplied glass fill.', usage: `import { FloatingFilterToggle } from '@/src/components/shared/floating-filter-toggle';\n\n<FloatingFilterToggle expanded ariaLabel="Collapse filters" glassClassName="bg-zd-black" />`, }; export default meta; /** * Reusable demo "bar" — a `relative` positioned ancestor standing in for the * real `.*-bar-glass` floating bar, so the tab's absolute anchor is visible. */ const DemoBar = ({ children }: { children: preact.ComponentChildren }) => ( <div class="relative w-[420px] h-[64px] border border-zd-white bg-zd-gray2 flex items-center px-hgap-sm"> <p class="font-futura text-xs text-zd-subtext">Floating filter bar…</p> {children} </div> ); // `drawer-tab` placement (default) — the tab lives INSIDE the same // positioned bar it collapses, hanging 72px below the bar's bottom edge. // This is still what /products/ uses. export const DrawerTab = defineStory({ name: 'Drawer tab', render: () => ( <DemoBar> <FloatingFilterToggle placement="drawer-tab" expanded={true} ariaLabel="Collapse filters" glassClassName="bg-zd-black" /> </DemoBar> ), }); // `fixed-below` placement (#1360) — the tab is a SIBLING of the bar (its own // plain wrapper below it), pinned to that wrapper's TOP edge instead, so its // backdrop-filter samples the real page instead of the bar's backdrop-root. // /metamodule-ref/ uses this so its sticky bar's blur stays genuine. export const FixedBelowSibling = defineStory({ name: 'Fixed below sibling', render: () => ( <div class="w-[420px]"> <div class="h-[64px] border border-zd-white bg-zd-gray2 flex items-center px-hgap-sm"> <p class="font-futura text-xs text-zd-subtext">Sticky filter bar…</p> </div> {/* Plain sibling wrapper, positioned right where the bar's bottom edge is (production measures this; here a `relative` div directly below the bar achieves the same layout for the story). */} <div class="relative"> <FloatingFilterToggle placement="fixed-below" expanded={true} ariaLabel="Collapse filters" glassClassName="bg-zd-black" /> </div> </div> ), }); // `expanded={false}` renders the down-chevron (collapse-affordance) path; // both current callers only render `expanded` so this documents the icon // swap the prop is kept for. export const Collapsed = defineStory({ name: 'Collapsed', render: () => ( <DemoBar> <FloatingFilterToggle placement="drawer-tab" expanded={false} ariaLabel="Expand filters" glassClassName="bg-zd-black" /> </DemoBar> ), }); const InteractiveTab = () => { const [expanded, setExpanded] = useState(true); return ( <DemoBar> <FloatingFilterToggle placement="drawer-tab" expanded={expanded} ariaLabel={expanded ? 'Collapse filters' : 'Expand filters'} glassClassName="bg-zd-black" onClick={() => setExpanded((v) => !v)} /> </DemoBar> ); }; export const Interactive = defineStory({ name: 'Interactive', render: () => <InteractiveTab />, });