shkim4
da0e647b49
Drop the category kicker from the 83 sidebar Stories (kicker is now optional; hidden verification Stories keep it) and shorten or remove repeated, obvious or internal page/section descriptions. Required specs, limits, virtual-data and undecided-value notices stay. Story IDs, exports, fixtures, shared state notes and package code are unchanged. Record: docs/reports/storybook-ui-simplification-2026-10-22.md
59 lines
2.4 KiB
TypeScript
59 lines
2.4 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>
|
|
}
|
|
|
|
// Representative (sidebar) Stories omit `kicker`: the sidebar path already names the category.
|
|
// Hidden verification Stories keep passing it so their page structure stays unchanged.
|
|
export function StoryPageHeader({ kicker, title, description }: { kicker?: string; title: string; description?: ReactNode }) {
|
|
return (
|
|
<header className="sb-page-header">
|
|
{kicker ? <p className="sb-page-kicker">{kicker}</p> : null}
|
|
<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
|