ProductBrandFilter

Row of brand-logo thumbnails acting as multi-select filter toggles for the /products/ filter; logo-less brands fall back to a brand-name text square.

Filters & Search

No selection

Multi selected

Interactive

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductBrandFilter — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave-3 batch D / #1655). import { useState } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ProductBrandFilter } from './product-brand-filter'; import type { BrandFilterItem } from '@/lib/data/brand-tags'; const meta: StoryMeta = { title: 'ProductBrandFilter', category: 'Filters & Search', description: 'Row of brand-logo thumbnails acting as multi-select filter toggles for the /products/ filter; logo-less brands fall back to a brand-name text square.', usage: `import { ProductBrandFilter } from '@/src/components/products/product-brand-filter';\n\n<ProductBrandFilter brands={brands} selectedTags={selectedTags} onBrandToggle={toggle} />`, }; export default meta; // Representative fixture: logo-bearing brands (incl. a dark-bg logo — takazudo), // plus one synthetic logo-less brand that exercises the text-fallback square // (no live brand is logo-less, so this documents the fallback path). const brandsFixture: BrandFilterItem[] = [ { tagKey: 'addac', brandSlug: 'addac', brandName: 'ADDAC System', svgClassName: 'w-5/6', hasLogo: true, count: 42, }, { tagKey: 'oxi', brandSlug: 'oxi', brandName: 'OXI Instruments', svgClassName: 'w-5/6', hasLogo: true, count: 18, }, { tagKey: 'weston', brandSlug: 'weston', brandName: 'Weston Precision Audio', svgClassName: 'w-5/6', hasLogo: true, count: 11, }, { tagKey: '4ms', brandSlug: '4ms', brandName: '4ms Company', svgClassName: 'w-full', hasLogo: true, count: 7, }, { tagKey: 'takazudo', brandSlug: 'takazudo', brandName: 'Takazudo Modular', svgClassName: 'bg-zd-literal-black', hasLogo: true, count: 5, }, { tagKey: 'example-no-logo', brandSlug: 'example-no-logo', brandName: 'Logo-less Brand Example', hasLogo: false, count: 4, }, ]; export const NoSelection = defineStory({ name: 'No selection', render: () => ( <ProductBrandFilter brands={brandsFixture} selectedTags={[]} onBrandToggle={() => {}} /> ), }); export const MultiSelected = defineStory({ name: 'Multi selected', render: () => ( <ProductBrandFilter brands={brandsFixture} selectedTags={['addac', 'weston', 'example-no-logo']} onBrandToggle={() => {}} /> ), }); const InteractiveFilter = () => { const [selectedTags, setSelectedTags] = useState<string[]>(['oxi']); const toggle = (tagKey: string) => setSelectedTags((prev) => prev.includes(tagKey) ? prev.filter((t) => t !== tagKey) : [...prev, tagKey], ); return ( <div class="flex flex-col gap-vgap-md"> <ProductBrandFilter brands={brandsFixture} selectedTags={selectedTags} onBrandToggle={toggle} /> <p class="font-futura text-xs text-zd-subtext"> Selected: <span class="text-zd-white">{selectedTags.join(', ') || '(none)'}</span> </p> </div> ); }; export const Interactive = defineStory({ name: 'Interactive', render: () => <InteractiveFilter />, });