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.
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@hm-design/ui"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Hover Card is a Radix overlay (Portal) for a richer preview than Tooltip. The representative Story shows real triggers
|
|
// (hover or focus to open); the verification Story starts one open. Radix owns the open / close delay and the hover bridge.
|
|
|
|
const longText = "긴 콘텐츠는 카드 폭에서 줄바꿈되고 카드 높이만 늘어납니다. 공백 없는 긴 문자열도 폭을 밀어내지 않습니다. ".repeat(4)
|
|
|
|
function Preview({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<HoverCard defaultOpen={defaultOpen}>
|
|
<HoverCardTrigger asChild>
|
|
<a href="#preview" className="text-sm font-medium text-primary underline underline-offset-4">
|
|
한맥 프로젝트
|
|
</a>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent>
|
|
<div className="grid gap-1">
|
|
<p className="font-bold">한맥 프로젝트</p>
|
|
<p>노선과 시설물 정보를 관리하는 프로젝트입니다.</p>
|
|
<p className="pt-1 text-xs text-muted-foreground">담당 김한맥 · 최근 수정 2026-10-02</p>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
)
|
|
}
|
|
|
|
function LongContent() {
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger asChild>
|
|
<a href="#long" className="text-sm font-medium text-primary underline underline-offset-4">
|
|
긴 콘텐츠
|
|
</a>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent>
|
|
<div className="grid gap-1">
|
|
<p className="font-bold">긴 콘텐츠</p>
|
|
<p>{longText}</p>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
)
|
|
}
|
|
|
|
const meta = { title: "Components/Overlay/Hover Card", component: HoverCard, parameters: { layout: "centered" } } satisfies Meta<typeof HoverCard>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const All: Story = {
|
|
name: "Hover Card",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Hover Card" />
|
|
<StorySection title="Overview">
|
|
<Preview />
|
|
</StorySection>
|
|
<StorySection title="Usage">
|
|
<LongContent />
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Open: Story = {
|
|
tags: ["verification"],
|
|
parameters: { layout: "fullscreen" },
|
|
render: () => (
|
|
<div className="flex min-h-[260px] justify-center p-8">
|
|
<Preview defaultOpen />
|
|
</div>
|
|
),
|
|
}
|