ProductBrandBadge

Bottom-right brand-corner overlay for product thumbnails — the brand square logo, or a text fallback for brands with no registered logo.

Badges & Tags

With logo

Dark-background logo

No-logo text fallback

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductBrandBadge — new coverage (epic #1647, wave 6 / #1660). // Follows the ImageBox wrapper pattern from the migrated // components/shared/product-bundle-badge.stories.tsx / product-status-badge.stories.tsx // (both `absolute`-positioned overlays need a `position: relative` host). import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ProductBrandBadge from './product-brand-badge'; const meta: StoryMeta = { title: 'ProductBrandBadge', category: 'Badges & Tags', description: 'Bottom-right brand-corner overlay for product thumbnails — the brand square logo, or a text fallback for brands with no registered logo.', usage: `import ProductBrandBadge from '@/src/components/shared/product-brand-badge';\n\n<ProductBrandBadge brand={{ slug: 'oxi', name: 'OXI Instruments', svgClassName: 'w-5/6' }} />`, }; export default meta; const ImageBox = ({ children }: { children: ComponentChildren }) => ( <div class="relative w-[200px] h-[200px] border border-zd-white bg-zd-gray/20 overflow-hidden"> <img src="https://placehold.co/200x200/333/ccc?text=Product" alt="placeholder" class="w-full h-full object-cover" /> {children} </div> ); export const WithLogo = defineStory({ name: 'With logo', render: () => ( <ImageBox> <ProductBrandBadge brand={{ slug: 'oxi', name: 'OXI Instruments', svgClassName: 'w-5/6' }} /> </ImageBox> ), }); export const DarkBackgroundLogo = defineStory({ name: 'Dark-background logo', render: () => ( <ImageBox> <ProductBrandBadge brand={{ slug: 'takazudo', name: 'Takazudo Modular', svgClassName: 'bg-zd-literal-black' }} /> </ImageBox> ), }); export const NoLogoFallback = defineStory({ name: 'No-logo text fallback', render: () => ( <ImageBox> <ProductBrandBadge brand={{ slug: 'example-no-logo', name: 'Logo-less Brand Example' }} /> </ImageBox> ), });