57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import { createContext, type ReactNode } from "react"
|
|
import "./story-page.css"
|
|
|
|
// Storybook presentation only (not part of @hm-design/ui): the common frame of a representative Story page.
|
|
// Page → Header (title, description) → Sections (title, description, specimen). It never styles the component being reviewed.
|
|
// Inner and title follow Foundation / Color; the section header → content split follows Center Graphic / 교량.
|
|
// A Story using it sets `parameters.layout: "fullscreen"` so the page owns its inner padding.
|
|
|
|
// Lets StateBoard render its specimen labels one level below the section heading.
|
|
export const StorySectionContext = createContext(false)
|
|
|
|
export function StoryPage({ className, children }: { className?: string; children: ReactNode }) {
|
|
return <div className={className ? `sb-page ${className}` : "sb-page"}><div className="sb-page-inner">{children}</div></div>
|
|
}
|
|
|
|
export function StoryPageHeader({ kicker, title, description }: { kicker: string; title: string; description?: ReactNode }) {
|
|
return (
|
|
<header className="sb-page-header">
|
|
<p className="sb-page-kicker">{kicker}</p>
|
|
<h1 className="sb-page-title">{title}</h1>
|
|
{description ? <p className="sb-page-description">{description}</p> : null}
|
|
</header>
|
|
)
|
|
}
|
|
|
|
// Headings and specimens share StoryPage's single Inner. Wide specimens own their local scroll frame.
|
|
export function StorySection({
|
|
title,
|
|
description,
|
|
id,
|
|
children,
|
|
}: {
|
|
title: string
|
|
description?: ReactNode
|
|
id?: string
|
|
children: ReactNode
|
|
}) {
|
|
return (
|
|
<section className="sb-page-section" id={id} aria-label={title}>
|
|
<header className="sb-page-section-header">
|
|
<h2 className="sb-page-section-title">{title}</h2>
|
|
{description ? <p className="sb-page-section-description">{description}</p> : null}
|
|
</header>
|
|
<StorySectionContext.Provider value>
|
|
<div className="sb-page-section-body">{children}</div>
|
|
</StorySectionContext.Provider>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export const STORY_KICKER = {
|
|
foundation: "HM DESIGN SYSTEM / FOUNDATION",
|
|
components: "HM DESIGN SYSTEM / COMPONENTS",
|
|
patterns: "HM DESIGN SYSTEM / PATTERNS",
|
|
center: "HM DESIGN SYSTEM / CENTER GRAPHIC",
|
|
} as const
|