ProductStockLabelBadge

NEW/RESTOCK chip overlay for product listing images — top-left, square-cornered, fixed size at all breakpoints.

Badges & Tags

NEW

RESTOCK

No label (renders null)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductStockLabelBadge — stock-labels epic #1913, wave 2 (#1916). // Follows the ImageBox wrapper pattern from product-bundle-badge.stories.tsx. import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ProductStockLabelBadge from './product-stock-label-badge'; const meta: StoryMeta = { title: 'ProductStockLabelBadge', category: 'Badges & Tags', description: 'NEW/RESTOCK chip overlay for product listing images — top-left, square-cornered, fixed size at all breakpoints.', usage: `import ProductStockLabelBadge from '@/src/components/shared/product-stock-label-badge';\n\n<ProductStockLabelBadge label="new" />`, }; 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 New = defineStory({ name: 'NEW', render: () => ( <ImageBox> <ProductStockLabelBadge label="new" /> </ImageBox> ), }); export const Restock = defineStory({ name: 'RESTOCK', render: () => ( <ImageBox> <ProductStockLabelBadge label="restock" /> </ImageBox> ), }); export const NoLabel = defineStory({ name: 'No label (renders null)', render: () => ( <ImageBox> <ProductStockLabelBadge label={null} /> </ImageBox> ), });