ProductCardCore

Shared layout shell for product cards (grid, name/subtitle/description, image container, price slot) — the internals shared by ProductNavItem and ProductGridItem.

Product Cards

Default

Without subtitle

Long description (truncated)

Self-link (non-interactive)

No price slot

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductCardCore — new gap story (epic #1647 Wave 6, #1663). // // ProductCardCore is the shared layout shell for ProductNavItem (related-nav, // Preact island) and ProductGridItem (SSR-only listing) — see the component's // own header comment. It never imports ResponsiveImage or Link itself (image // content and the link wrapper are injected as slots/render-props), so this // story stays fully decoupled from the catalog/metadata-db import chain: the // image slot below is a plain placeholder `<img>`, not <ResponsiveImage>. import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ProductCardCore } from './product-card-core'; const meta: StoryMeta = { title: 'ProductCardCore', category: 'Product Cards', description: 'Shared layout shell for product cards (grid, name/subtitle/description, image container, price slot) — the internals shared by ProductNavItem and ProductGridItem.', usage: `import { ProductCardCore } from '@/components/shared/product-card-core';\n\n<ProductCardCore\n name="OXI ONE MKII"\n description="..."\n imageSlot={<img src="/images/p/oxi-one-mk2/1200w.webp" alt="OXI ONE MKII" />}\n priceSlot={<div>¥89,800</div>}\n nameRowGapClass="gap-x-[8px]"\n renderLink={(children, linkClass) => <a href="/products/oxi-one-mk2-intro/" className={linkClass}>{children}</a>}\n/>`, }; export default meta; const PlaceholderImage = ({ label = 'Product' }: { label?: string }) => ( <img src={`https://placehold.co/220x220/333/ccc?text=${encodeURIComponent(label)}`} alt="" className="w-full h-full object-cover" /> ); const CardFrame = ({ children }: { children: ComponentChildren }) => ( <div className="w-[320px] bg-zd-black">{children}</div> ); /** Matches production's real-link `renderLink` (a plain `<a>` stands in for `<Link to>`). */ const asLink = (children: ComponentChildren, linkClass: string) => ( <a href="#" className={linkClass}> {children} </a> ); export const Default = defineStory({ name: 'Default', render: () => ( <CardFrame> <ProductCardCore name="OXI ONE MKII" subtitle="Black Edition" description="ステップシーケンサー、MIDIコントローラー、CV/Gateコントローラーを1台に統合したオールインワン・モジュール。" imageSlot={<PlaceholderImage label="OXI ONE" />} priceSlot={ <div className="pt-vgap-2xs font-futura text-sm lg:text-base whitespace-nowrap text-center"> ¥158,700 </div> } nameRowGapClass="gap-x-[8px]" renderLink={asLink} /> </CardFrame> ), }); export const WithoutSubtitle = defineStory({ name: 'Without subtitle', render: () => ( <CardFrame> <ProductCardCore name="2hp Verb" description="コンパクトな筐体に本格的なリバーブサウンドを詰め込んだユーティリティモジュール。" imageSlot={<PlaceholderImage label="2hp Verb" />} priceSlot={ <div className="pt-vgap-2xs font-futura text-sm lg:text-base whitespace-nowrap text-center"> ¥14,800 </div> } nameRowGapClass="gap-x-[8px]" renderLink={asLink} /> </CardFrame> ), }); export const LongDescriptionTruncated = defineStory({ name: 'Long description (truncated)', render: () => ( <CardFrame> <ProductCardCore name="4ms Ensemble Oscillator" description="6つのアナログVCOコアをスタックしたアンサンブル・オシレーター。ユニゾン、コーラス、ドローンなど、複数の波形を重ね合わせることで生まれる豊かな倍音を生成し、単体のVCOでは得られない有機的で分厚いサウンドを作り出します。パラメータの数が非常に多く、複雑なモジュレーションルーティングにも対応。" imageSlot={<PlaceholderImage label="Ensemble" />} priceSlot={ <div className="pt-vgap-2xs font-futura text-sm lg:text-base whitespace-nowrap text-center"> ¥68,200 </div> } nameRowGapClass="gap-x-[8px]" renderLink={asLink} /> </CardFrame> ), }); /** * Mirrors ProductNavItem's "self-link" treatment (current-page card): the * link class's `zd-invert-color-link` hover-invert utility stripped, rendered * as a non-interactive `<div>` with `cursor-default` instead of an anchor. */ export const SelfLinkNonInteractive = defineStory({ name: 'Self-link (non-interactive)', render: () => ( <CardFrame> <ProductCardCore name="ADDAC120s System" description="このページの商品です。カードはリンクにならず、現在地として表示されます。" imageSlot={<PlaceholderImage label="ADDAC120s" />} priceSlot={ <div className="pt-vgap-2xs font-futura text-sm lg:text-base whitespace-nowrap text-center"> ¥248,000 </div> } nameRowGapClass="gap-x-[8px]" renderLink={(children, linkClass) => ( <div className={`${linkClass.replace('zd-invert-color-link ', '')} cursor-default`} aria-current="page" > {children} </div> )} /> </CardFrame> ), }); export const NoPriceSlot = defineStory({ name: 'No price slot', render: () => ( <CardFrame> <ProductCardCore name="Coming Soon Module" description="価格未定の準備中商品。priceSlot を省略すると価格行は表示されません。" imageSlot={<PlaceholderImage label="Coming Soon" />} nameRowGapClass="gap-x-[8px]" renderLink={asLink} /> </CardFrame> ), });