ArticleHeroHeader

Shared SSR pieces of the article header — the square bordered hero image (ArticleHeroImage) and the thick-top-border title block (ArticleTitleBlock).

Article Blocks

Hero: pipeline image

Hero: no image

Hero: bundle badge

Title block: default (article)

Title block: subtitle + underline (static page)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ArticleHeroImage / ArticleTitleBlock — new coverage (epic #1647, // wave 6, #1662). // // The mock slug below (`oxi-cap-ep1-front-panel`) doesn't exist on R2, so the // pipeline-slug branch's `/images/p/<slug>/*.webp` requests resolve to the // styleguide's image-placeholder plugin (see `article-image.stories.tsx`). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ArticleHeroImage, ArticleTitleBlock } from './article-hero-header'; const meta: StoryMeta = { title: 'ArticleHeroHeader', category: 'Article Blocks', description: 'Shared SSR pieces of the article header — the square bordered hero image (ArticleHeroImage) and the thick-top-border title block (ArticleTitleBlock).', usage: `import { ArticleHeroImage, ArticleTitleBlock } from '@/src/components/shared/article-hero-header';\n\n<ArticleHeroImage title={title} heroImgUrl="my-product" />\n<ArticleTitleBlock titleMain={title} meta={<span>2026.01.01</span>} />`, }; export default meta; export const HeroPipelineImage = defineStory({ name: 'Hero: pipeline image', render: () => ( <div className="max-w-[400px]"> <ArticleHeroImage title="OXI Coral" heroImgUrl="oxi-cap-ep1-front-panel" /> </div> ), }); export const HeroNoImage = defineStory({ name: 'Hero: no image', render: () => ( <div className="max-w-[400px]"> <ArticleHeroImage title="画像未設定の記事" /> </div> ), }); // `isBundle` overlays a `ProductBundleBadge` (size="hero") on top of the frame — // the article-hero context is the one place that badge uses its "hero" size. export const HeroBundleBadge = defineStory({ name: 'Hero: bundle badge', render: () => ( <div className="max-w-[400px]"> <ArticleHeroImage title="ADDAC120 System" heroImgUrl="oxi-cap-ep1-front-panel" isBundle /> </div> ), }); export const TitleBlockDefault = defineStory({ name: 'Title block: default (article)', render: () => ( <div className="max-w-[600px] bg-zd-black p-hgap-sm"> <ArticleTitleBlock prefix="製品紹介" titleMain="OXI Coral 徹底解説" meta={<span>2026.01.01 / Takazudo</span>} /> </div> ), }); // Static-page variant: `titleSub` + `metaUnderline` (used by /contact/ and // /support/), instead of the article wrapper's breakpoint-dependent border. export const TitleBlockWithSubtitle = defineStory({ name: 'Title block: subtitle + underline (static page)', render: () => ( <div className="max-w-[600px] bg-zd-black p-hgap-sm"> <ArticleTitleBlock titleMain="サポート" titleSub="Support" meta={<span>よくある質問と製品サポート情報</span>} metaUnderline /> </div> ), });