SectionHeading

Home-renewal section heading bar: 3px top rule, Futura title with optional JA sub-label and a responsive chevron link.

Page Chrome

Default

TitleSub-labelLink hrefLink textLink text (wide)

Title only

With nav link

English page (no sub-label)

With responsive nav link

Home sections

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for SectionHeading — wave-2 pilot migrated to the repo-root story // contract (`lib/styleguide/story-contract`; epic #1647, #1649). The simple // pilot: mostly static showcase variants plus one control-driven `Default`. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { SectionHeading } from './section-heading'; // Props aren't exported by the component; derive them inline rather than // widening the component's public surface just for story typing (STORIES rule). type SectionHeadingProps = Parameters<typeof SectionHeading>[0]; const meta: StoryMeta = { title: 'SectionHeading', category: 'Page Chrome', description: 'Home-renewal section heading bar: 3px top rule, Futura title with optional JA sub-label and a responsive chevron link.', usage: `import { SectionHeading } from '@/components/shared/section-heading';\n\n<SectionHeading title="Photos" titleLang="en" titleSub="写真" linkHref="/photos/" />`, }; export default meta; export const Default = defineStory<SectionHeadingProps>({ name: 'Default', controls: [ { type: 'text', prop: 'title', label: 'Title', defaultValue: 'Photos' }, { type: 'text', prop: 'titleSub', label: 'Sub-label', defaultValue: '写真' }, { type: 'text', prop: 'linkHref', label: 'Link href', defaultValue: '/photos/' }, { type: 'text', prop: 'linkText', label: 'Link text', defaultValue: '一覧' }, { type: 'text', prop: 'linkTextLong', label: 'Link text (wide)', defaultValue: '写真一覧を見る', }, ], render: ({ title = 'Photos', titleSub = '写真', linkHref = '/photos/', linkText = '一覧', linkTextLong = '写真一覧を見る', } = {}) => ( <SectionHeading title={title} titleLang="en" titleSub={titleSub || undefined} linkHref={linkHref || undefined} linkText={linkText || undefined} linkTextLong={linkTextLong || undefined} /> ), }); export const TitleOnly = defineStory({ name: 'Title only', render: () => <SectionHeading title="News" titleLang="en" titleSub="お知らせと読みもの" />, source: `<SectionHeading title="News" titleLang="en" titleSub="お知らせと読みもの" />`, }); export const WithNav = defineStory({ name: 'With nav link', render: () => ( <SectionHeading title="Featured" titleLang="en" titleSub="注目の商品" linkHref="/products" /> ), }); // EN pages drop the JA sub-label entirely — SectionHeading is a locale-agnostic // primitive (no `locale` prop), so the caller omits `titleSub` on EN surfaces // rather than passing an English string. Never "Featured / Featured Products". // See CLAUDE-skill `.claude/skills/l-design-system/SKILL.md` → "Title / // サブタイトル — the two-language heading device (JA-only)". export const EnglishPage = defineStory({ name: 'English page (no sub-label)', // `linkText` is passed explicitly: it defaults to the Japanese 一覧, which // would make this EN example render a JA link label. Real EN callers pass // "List" (see `pages/en/index.tsx`). render: () => ( <SectionHeading title="Featured" titleLang="en" linkHref="/en/products" linkText="List" /> ), source: `<SectionHeading title="Featured" titleLang="en" linkHref="/en/products" linkText="List" />`, }); export const WithResponsiveNav = defineStory({ name: 'With responsive nav link', render: () => ( <SectionHeading title="Photos" titleLang="en" titleSub="写真" linkHref="/photos/" linkText="一覧" linkTextLong="写真一覧を見る" /> ), }); export const HomeSections = defineStory({ name: 'Home sections', render: () => ( <div class="flex flex-col gap-vgap-lg"> <SectionHeading title="News" titleLang="en" titleSub="お知らせと読みもの" linkHref="/notes/" /> <SectionHeading title="Featured" titleLang="en" titleSub="注目の商品" linkHref="/products" /> <SectionHeading title="Photos" titleLang="en" titleSub="写真" linkHref="/photos/" linkTextLong="写真一覧を見る" /> <SectionHeading title="Takazudo Modular" titleLang="en" titleSub="ハウスブランド" linkHref="/brands/takazudo/" linkTextLong="Takazudo Modularブランド商品一覧を見る" /> </div> ), });