DiscontinuedItem

PurchaseNav right-column notice for discontinued products: italic uppercase label, locale status message, and a subline noting specs are kept for reference.

Product Pages

Japanese

English

Both locales

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for DiscontinuedItem — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave-3 batch D / #1655). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { DiscontinuedItem } from './status-items/discontinued-item'; import { mockMercariProducts } from './__mocks__/products'; const meta: StoryMeta = { title: 'DiscontinuedItem', category: 'Product Pages', order: 3, description: 'PurchaseNav right-column notice for discontinued products: italic uppercase label, locale status message, and a subline noting specs are kept for reference.', usage: `import { DiscontinuedItem } from '@/components/mdx/purchase-nav/status-items/discontinued-item';\n\n<DiscontinuedItem product={product} locale="ja" />`, }; export default meta; const product = mockMercariProducts.discontinued; export const Japanese = defineStory({ name: 'Japanese', render: () => ( <div className="font-futura bg-zd-dark p-vgap-sm"> <DiscontinuedItem product={product} locale="ja" /> </div> ), }); export const English = defineStory({ name: 'English', render: () => ( <div className="font-futura bg-zd-dark p-vgap-sm"> <DiscontinuedItem product={product} locale="en" /> </div> ), }); export const BothLocales = defineStory({ name: 'Both locales', render: () => ( <div className="font-futura bg-zd-dark flex flex-col gap-vgap-sm p-vgap-sm"> <div> <div className="text-zd-gray text-xs mb-vgap-2xs">JA</div> <DiscontinuedItem product={product} locale="ja" /> </div> <div> <div className="text-zd-gray text-xs mb-vgap-2xs">EN</div> <DiscontinuedItem product={product} locale="en" /> </div> </div> ), });