ProductBundleBadge

BUNDLE marker overlay for product listing images — sized (sm/lg/hero) and corner-flippable (bottom-right/top-right) variant used by ProductGridItem and ProductCardSimple.

Badges & Tags

Small, bottom-right (default)

Large, top-right (ProductGridItem w/ brand badge)

Hero (article title-block image)

Not bundle (renders null)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the NEW-tree ProductBundleBadge — new coverage (epic #1647, wave 6 / #1660). // // TWIN NOTE: `components/shared/product-bundle-badge.stories.tsx` already covers the // OLD-tree component (migrated in batch A, #1652), but this one is NOT an exact twin — // it adds `size` ('sm'|'lg'|'hero') and `corner` ('bottom-right'|'top-right') props that // the old component doesn't have (needed by ProductGridItem/ProductCardSimple to flip // corners when the brand-logo badge occupies bottom-right). Both twins share the // `Badges & Tags` category (#2082 recategorization) — an identical `meta.title` // across categories is fine since each renders on its own detail-page slug. import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ProductBundleBadge from './product-bundle-badge'; const meta: StoryMeta = { title: 'ProductBundleBadge', category: 'Badges & Tags', description: 'BUNDLE marker overlay for product listing images — sized (sm/lg/hero) and corner-flippable (bottom-right/top-right) variant used by ProductGridItem and ProductCardSimple.', usage: `import ProductBundleBadge from '@/src/components/shared/product-bundle-badge';\n\n<ProductBundleBadge isBundle={true} size="lg" corner="top-right" />`, }; 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 SmallBottomRight = defineStory({ name: 'Small, bottom-right (default)', render: () => ( <ImageBox> <ProductBundleBadge isBundle={true} /> </ImageBox> ), }); export const LargeTopRight = defineStory({ name: 'Large, top-right (ProductGridItem w/ brand badge)', render: () => ( <ImageBox> <ProductBundleBadge isBundle={true} size="lg" corner="top-right" /> </ImageBox> ), }); export const Hero = defineStory({ name: 'Hero (article title-block image)', render: () => ( <ImageBox> <ProductBundleBadge isBundle={true} size="hero" /> </ImageBox> ), }); export const NotBundle = defineStory({ name: 'Not bundle (renders null)', render: () => ( <ImageBox> <ProductBundleBadge isBundle={false} /> </ImageBox> ), });