ProductNavItem

Related-product nav card: ResponsiveImage + status/bundle badges + name/subtitle/description + price, wrapping ProductCardCore for the brand/related-products grid.

Product Cards

Default

Bundle badge

Sold status ribbon

Discontinued (no price)

Price label (準備中)

Self-link (current page)

English locale

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductNavItem — new gap story (epic #1647 Wave 6, #1663). // // Renders the REAL component with fixture `ProductEnhanced` data, using // nonexistent `/images/p/{slug}/...` image slugs — same pattern established // by article-image.stories.tsx (wave 2): the styleguide's // `image-placeholder` plugin (sub-packages/styleguide/plugins/image-placeholder.mjs) // answers every `/images/p/*` request with a dashed placeholder, both in // `zfb dev` and the deployed build. Note this pulls ResponsiveImage's // metadata-db lookup and ProductCardPrice's Time Sale catalog into this // story's import graph (unavoidable for the real component — same tradeoff // already accepted by related-products.stories.tsx). import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { CurrentPageProvider } from './current-page-context'; import { ProductNavItem } from './product-nav-item'; import type { ProductEnhanced } from '@/lib/types/product-enhanced'; import type { Brand } from '@/src/types/brand'; const meta: StoryMeta = { title: 'ProductNavItem', category: 'Product Cards', description: 'Related-product nav card: ResponsiveImage + status/bundle badges + name/subtitle/description + price, wrapping ProductCardCore for the brand/related-products grid.', usage: `import { ProductNavItem } from '@/components/shared/product-nav-item';\n\n<ProductNavItem product={product} locale="ja" />`, }; export default meta; const mockBrand: Brand = { slug: 'oxi', name: 'OXI Instruments', svg: null, }; function mockProduct(overrides: Partial<ProductEnhanced> = {}): ProductEnhanced { return { slug: 'sg-mock-oxi-one', name: 'OXI ONE MKII', subtitle: 'Black Edition', brand: mockBrand, imgSrc: '/images/p/sg-mock-oxi-one/1200w.webp', blurHash: '000000', description: 'ステップシーケンサー、MIDIコントローラー、CV/Gateコントローラーを1台に統合したオールインワン・モジュール。', detailHref: '/products/oxi-one-mk2-intro/', mercariProductId: 'mock-product-id', mercariStatus: null, price: 158700, priceLabel: null, index: 0, ...overrides, }; } const Grid = ({ children }: { children: ComponentChildren }) => ( <div className="grid grid-cols-2 gap-hgap-sm lg:gap-hgap-md max-w-[680px]">{children}</div> ); export const Default = defineStory({ name: 'Default', render: () => ( <Grid> <ProductNavItem product={mockProduct()} /> </Grid> ), }); export const WithBundleBadge = defineStory({ name: 'Bundle badge', render: () => ( <Grid> <ProductNavItem product={mockProduct({ slug: 'sg-mock-addac120s', name: 'ADDAC120s System', subtitle: null, bundle: { componentSlugs: ['sg-mock-a', 'sg-mock-b'] }, price: 248000, })} /> </Grid> ), }); export const SoldStatus = defineStory({ name: 'Sold status ribbon', render: () => ( <Grid> <ProductNavItem product={mockProduct({ slug: 'sg-mock-sold', name: '2hp Verb', subtitle: null, mercariStatus: 'sold', price: 14800, })} /> </Grid> ), }); export const DiscontinuedNoPrice = defineStory({ name: 'Discontinued (no price)', render: () => ( <Grid> <ProductNavItem product={mockProduct({ slug: 'sg-mock-discontinued', name: 'Retired Module', subtitle: null, mercariStatus: 'discontinued', })} /> </Grid> ), }); export const PriceLabel = defineStory({ name: 'Price label (準備中)', render: () => ( <Grid> <ProductNavItem product={mockProduct({ slug: 'sg-mock-incoming', name: 'Incoming Module', subtitle: null, price: null, priceLabel: '準備中', })} /> </Grid> ), }); /** * When the current page's pathname (via CurrentPageProvider) matches the * card's own `detailHref`, ProductNavItem renders it as a non-interactive * "current page" card instead of a link. */ export const SelfLink = defineStory({ name: 'Self-link (current page)', render: () => ( <CurrentPageProvider pathname="/products/oxi-one-mk2-intro/"> <Grid> <ProductNavItem product={mockProduct()} /> </Grid> </CurrentPageProvider> ), }); export const EnglishLocale = defineStory({ name: 'English locale', render: () => ( <Grid> <ProductNavItem product={mockProduct({ name: 'OXI ONE MKII', description: 'All-in-one step sequencer.' })} locale="en" /> </Grid> ), });