ProductBundleBadge

BUNDLE marker overlay for product listing images — a flat orange banner at bottom-right for the ADDAC120 system bundles.

Badges & Tags

Bundle

Not bundle

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductBundleBadge — migrated to the repo-root story contract // (`lib/styleguide/story-contract`) as part of styleguide-rebuild batch A // (epic #1647, #1652). See action-button.stories.tsx for the migration recipe. 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 — a flat orange banner at bottom-right for the ADDAC120 system bundles.', usage: `import { ProductBundleBadge } from '@/components/shared/product-bundle-badge';\n\n<ProductBundleBadge isBundle={true} />`, }; export default meta; const ImageBox = ({ children }: { children: ComponentChildren }) => ( <div className="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" className="w-full h-full object-cover" /> {children} </div> ); export const Bundle = defineStory({ name: 'Bundle', render: () => ( <ImageBox> <ProductBundleBadge isBundle={true} /> </ImageBox> ), }); export const NotBundle = defineStory({ name: 'Not bundle', render: () => ( <ImageBox> <ProductBundleBadge isBundle={false} /> </ImageBox> ), });