Shared/PageHeading
Brands Page
Default
Long Title
Products Page
With Children
With Subtitle
page-heading.stories.tsx
import { PageHeading } from '@/src/components/shared/page-heading';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';
/**
* PageHeading Component
*
* A top-level h1 heading for page titles with an English/Japanese dual display.
* Features a top border and Futura font.
*
* Features:
* - Top border (3px, 5px on 2xl)
* - Main English title with optional Japanese subtitle
* - Supports children for additional content below the title
* - Futura font styling
*/
export const meta = {
title: 'Shared/PageHeading',
};
export const controls: ControlsMap = {
title: { type: 'text', default: 'GUIDES' },
titleSub: { type: 'text', default: 'ガイド' },
};
/**
* Default - English title only
*/
export const Default = {
args: { title: 'GUIDES', titleSub: 'ガイド' },
render: ({ title, titleSub }: { title: string; titleSub: string }) => (
<PageHeading title={title} titleSub={titleSub || undefined} />
),
};
/**
* With Japanese subtitle
*/
export const WithSubtitle = {
args: { title: 'GUIDES', titleSub: 'ガイド' },
render: ({ title, titleSub }: { title: string; titleSub: string }) => (
<PageHeading title={title} titleSub={titleSub || undefined} />
),
};
/**
* Products page style
*/
export const ProductsPage = () => <PageHeading title="PRODUCTS" titleSub="製品一覧" />;
/**
* Brands page style
*/
export const BrandsPage = () => <PageHeading title="BRANDS" titleSub="ブランド" />;
/**
* With children content below the heading
*/
export const WithChildren = () => (
<PageHeading title="GUIDES" titleSub="ガイド">
<p className="text-sm text-zd-gray mt-vgap-xs">
モジュラーシンセサイザーに関するガイド記事の一覧です。
</p>
</PageHeading>
);
/**
* Long title text
*/
export const LongTitle = () => (
<PageHeading
title="MODULAR SYNTHESIZER BEGINNERS GUIDE"
titleSub="モジュラーシンセサイザー入門ガイド"
/>
);