shkim4
bad2acfc49
- Sheet + Drawer, Tooltip + Hover Card, Accordion + Collapsible, Dialog + Alert Dialog, Dropdown Menu + Context Menu on one page each (specimens moved to *-examples.tsx; absorbed Stories keep their IDs) - Popover, Tabs content spacing, Breadcrumb, Menubar and Command tidied - Component docs updated to the new representative pages
32 lines
1.6 KiB
TypeScript
32 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { Collapsible } from "@hm-design/ui"
|
|
import { StoryPage, StoryPageHeader } from "@/components/story-page"
|
|
import { ClosedSpecimen, CollapsibleSections, DisabledSpecimen, LongSpecimen, OpenSpecimen } from "./collapsible-examples"
|
|
|
|
// Collapsible is a single disclosure. The specimens live in ./collapsible-examples and are also shown on the Accordion
|
|
// representative page ("접기·펼치기"), the single sidebar item for both. Every Story here keeps its ID and direct URL but is
|
|
// hidden from the sidebar (tag `verification`).
|
|
|
|
const meta = { title: "Components/Disclosure/Collapsible", component: Collapsible, parameters: { layout: "padded" } } satisfies Meta<typeof Collapsible>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Accordion
|
|
// page shows the same sections.
|
|
export const All: Story = {
|
|
tags: ["verification"],
|
|
name: "Collapsible",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Collapsible" />
|
|
<CollapsibleSections />
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Closed: Story = { tags: ["verification"], render: () => <ClosedSpecimen /> }
|
|
export const Open: Story = { tags: ["verification"], render: () => <OpenSpecimen /> }
|
|
export const Disabled: Story = { tags: ["verification"], render: () => <DisabledSpecimen /> }
|
|
export const LongContent: Story = { tags: ["verification"], name: "Long Content", render: () => <LongSpecimen /> }
|