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.
103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { CheckIcon } from "lucide-react"
|
|
import { Badge } from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
const variants = ["default", "secondary", "destructive", "outline"] as const
|
|
|
|
const meta = {
|
|
title: "Components/Data & Display/Badge",
|
|
component: Badge,
|
|
parameters: {
|
|
layout: "padded",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"현재 HM 규격: 12/18/500, padding 2/8, radius 4, border 1px. variant는 현재 HM Theme에 의미가 있는 default(primary), secondary(neutral), destructive, outline만 둡니다. success·warning·information은 상태 색이 정해지지 않아 만들지 않았습니다. Button variant를 재사용하지 않는 별도 컴포넌트입니다.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: { variant: { control: "inline-radio", options: variants } },
|
|
} satisfies Meta<typeof Badge>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const All: Story = {
|
|
name: "Badge",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Badge" />
|
|
<StorySection title="Overview">
|
|
<Badge>Badge</Badge>
|
|
</StorySection>
|
|
<StorySection title="Variants">
|
|
<StateBoard
|
|
min={280}
|
|
states={[
|
|
{
|
|
id: "variants",
|
|
label: "Text",
|
|
children: (
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{variants.map((v) => (
|
|
<Badge key={v} variant={v}>
|
|
{v}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "icon",
|
|
label: "With icon",
|
|
children: (
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{variants.map((v) => (
|
|
<Badge key={v} variant={v}>
|
|
<CheckIcon aria-hidden="true" />
|
|
{v}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="Usage">
|
|
<StateBoard
|
|
min={280}
|
|
states={[
|
|
{ id: "long", label: "Long text", children: <div className="max-w-[160px]"><Badge>A very long badge label</Badge></div> },
|
|
{
|
|
id: "link",
|
|
label: "Link",
|
|
children: (
|
|
<Badge asChild variant="outline">
|
|
<a href="#badge">Link badge</a>
|
|
</Badge>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Variants: Story = {
|
|
tags: ["verification"],
|
|
render: () => (
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{variants.map((v) => (
|
|
<Badge key={v} variant={v}>
|
|
{v}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
),
|
|
}
|
|
export const Playground: Story = { tags: ["verification"], args: { variant: "default", children: "Badge" } }
|