shkim4
4c29894e56
Drop page / section descriptions, state notes and repeated captions from the representative Stories of 44 components, the Patterns, Center Graphic and OrgChart pages. Value readouts, spec lists and captions hide only on the representative page; hidden verification Stories keep them. Tabs Default API and the Filter Bar draft / applied counts move to the hidden DefaultApi and DraftApplied Stories; Center Overview is hidden with its direct URL kept. Story IDs are unchanged. Align the component, pattern and OrgChart docs with the pages, point the quality reference check at the DraftApplied Story, and make the P8 styles check expect no section header on the preview-only Expanded page.
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { Separator } from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
const meta = {
|
|
title: "Components/Data & Display/Separator",
|
|
component: Separator,
|
|
parameters: {
|
|
layout: "padded",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"현재 HM 규격: 1px 선, 색은 pale warm neutral(Primitive 참조). Radix Separator의 orientation과 decorative(기본 true) API를 유지합니다. decorative=false이면 role=separator가 노출됩니다.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: { orientation: { control: "inline-radio", options: ["horizontal", "vertical"] }, decorative: { control: "boolean" } },
|
|
} satisfies Meta<typeof Separator>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const All: Story = {
|
|
name: "Separator",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Separator" />
|
|
<StorySection title="Overview">
|
|
<StateBoard
|
|
min={280}
|
|
states={[
|
|
{
|
|
id: "horizontal",
|
|
label: "Horizontal",
|
|
children: (
|
|
<div className="grid gap-3 text-sm">
|
|
<div><strong>제목</strong><p>제목에 연결된 설명입니다.</p></div>
|
|
<Separator />
|
|
<span>Below</span>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="Variants">
|
|
<StateBoard
|
|
min={280}
|
|
states={[
|
|
{
|
|
id: "vertical",
|
|
label: "Vertical",
|
|
children: (
|
|
<div className="flex h-6 items-center gap-3 text-sm">
|
|
<span>Left</span>
|
|
<Separator orientation="vertical" />
|
|
<span>Middle</span>
|
|
<Separator orientation="vertical" />
|
|
<span>Right</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "semantic",
|
|
label: "Semantic",
|
|
children: (
|
|
<div className="grid gap-3 text-sm">
|
|
<span>Section A</span>
|
|
<Separator decorative={false} />
|
|
<span>Section B</span>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Horizontal: Story = { tags: ["verification"], render: () => <div className="max-w-xs"><Separator /></div> }
|
|
export const Vertical: Story = { tags: ["verification"], render: () => <div className="flex h-8 items-center"><Separator orientation="vertical" /></div> }
|