ProductStatusBadge

Status badge overlay for product listing images — diagonal ribbon (sold/unavailable/discontinued) or a null card-treatment variant.

Badges & Tags

Sold ribbon

Unavailable ribbon

Discontinued ribbon

Discontinued card treatment

All variants

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductStatusBadge — 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 { ProductStatusBadge } from './product-status-badge'; const meta: StoryMeta = { title: 'ProductStatusBadge', category: 'Badges & Tags', description: 'Status badge overlay for product listing images — diagonal ribbon (sold/unavailable/discontinued) or a null card-treatment variant.', usage: `import { ProductStatusBadge } from '@/components/shared/product-status-badge';\n\n<ProductStatusBadge status="sold" />`, }; 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 SoldRibbon = defineStory({ name: 'Sold ribbon', render: () => ( <ImageBox> <ProductStatusBadge status="sold" /> </ImageBox> ), }); export const UnavailableRibbon = defineStory({ name: 'Unavailable ribbon', render: () => ( <ImageBox> <ProductStatusBadge status="unavailable" /> </ImageBox> ), }); export const DiscontinuedRibbon = defineStory({ name: 'Discontinued ribbon', render: () => ( <ImageBox> <ProductStatusBadge status="discontinued" variant="ribbon" /> </ImageBox> ), }); export const DiscontinuedCardTreatment = defineStory({ name: 'Discontinued card treatment', render: () => ( <ImageBox> <ProductStatusBadge status="discontinued" variant="card-treatment" /> </ImageBox> ), }); export const AllVariants = defineStory({ name: 'All variants', render: () => ( <div className="flex flex-wrap gap-vgap-md"> <div className="flex flex-col gap-vgap-xs items-center"> <span className="text-xs font-futura text-zd-white">SOLD ribbon</span> <ImageBox> <ProductStatusBadge status="sold" /> </ImageBox> </div> <div className="flex flex-col gap-vgap-xs items-center"> <span className="text-xs font-futura text-zd-white">Unavailable ribbon</span> <ImageBox> <ProductStatusBadge status="unavailable" /> </ImageBox> </div> <div className="flex flex-col gap-vgap-xs items-center"> <span className="text-xs font-futura text-zd-white">Discontinued ribbon (nav)</span> <ImageBox> <ProductStatusBadge status="discontinued" variant="ribbon" /> </ImageBox> </div> <div className="flex flex-col gap-vgap-xs items-center"> <span className="text-xs font-futura text-zd-white"> Discontinued card-treatment (renders null) </span> <ImageBox> <ProductStatusBadge status="discontinued" variant="card-treatment" /> </ImageBox> </div> </div> ), });