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.
130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { InfoIcon, TriangleAlertIcon } from "lucide-react"
|
|
import { Alert, AlertDescription, AlertTitle } from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
const meta = {
|
|
title: "Components/Feedback/Alert",
|
|
component: Alert,
|
|
parameters: {
|
|
layout: "padded",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"현재 HM 규격: 인라인 메시지(Toast 아님). padding 12/16, radius 4, border 1px, Title 14/20/500, Description 14/20/400. variant는 default(neutral)와 destructive만 둡니다. success·warning·information은 HM 상태 색이 정해지지 않아 만들지 않았습니다. 닫기 동작은 없습니다.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: { variant: { control: "inline-radio", options: ["default", "destructive"] } },
|
|
} satisfies Meta<typeof Alert>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const All: Story = {
|
|
name: "Alert",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Alert" />
|
|
<StorySection title="Overview">
|
|
<StateBoard
|
|
min={320}
|
|
states={[
|
|
{
|
|
id: "default",
|
|
label: "Default",
|
|
children: (
|
|
<Alert>
|
|
<InfoIcon aria-hidden="true" />
|
|
<AlertTitle>Heads up</AlertTitle>
|
|
<AlertDescription>You can update your project settings at any time.</AlertDescription>
|
|
</Alert>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="Variants">
|
|
<StateBoard
|
|
min={320}
|
|
states={[
|
|
{
|
|
id: "destructive",
|
|
label: "Destructive",
|
|
children: (
|
|
<Alert variant="destructive">
|
|
<TriangleAlertIcon aria-hidden="true" />
|
|
<AlertTitle>Unable to save</AlertTitle>
|
|
<AlertDescription>Check the project name and try again.</AlertDescription>
|
|
</Alert>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="Usage">
|
|
<StateBoard
|
|
min={320}
|
|
states={[
|
|
{
|
|
id: "no-icon",
|
|
label: "No icon",
|
|
children: (
|
|
<Alert>
|
|
<AlertTitle>Title only layout</AlertTitle>
|
|
<AlertDescription>Without an icon the text starts at the left edge.</AlertDescription>
|
|
</Alert>
|
|
),
|
|
},
|
|
{
|
|
id: "title-only",
|
|
label: "Title only",
|
|
children: (
|
|
<Alert>
|
|
<InfoIcon aria-hidden="true" />
|
|
<AlertTitle>Saved</AlertTitle>
|
|
</Alert>
|
|
),
|
|
},
|
|
{
|
|
id: "long",
|
|
label: "Long content",
|
|
children: (
|
|
<div className="max-w-xs">
|
|
<Alert>
|
|
<InfoIcon aria-hidden="true" />
|
|
<AlertTitle>Scheduled maintenance</AlertTitle>
|
|
<AlertDescription>The service will be unavailable for a short time during the maintenance window. Please save your work before it starts.</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Default: Story = {
|
|
tags: ["verification"],
|
|
render: () => (
|
|
<Alert>
|
|
<InfoIcon aria-hidden="true" />
|
|
<AlertTitle>Heads up</AlertTitle>
|
|
<AlertDescription>You can update your project settings at any time.</AlertDescription>
|
|
</Alert>
|
|
),
|
|
}
|
|
export const Destructive: Story = {
|
|
tags: ["verification"],
|
|
render: () => (
|
|
<Alert variant="destructive">
|
|
<TriangleAlertIcon aria-hidden="true" />
|
|
<AlertTitle>Unable to save</AlertTitle>
|
|
<AlertDescription>Check the project name and try again.</AlertDescription>
|
|
</Alert>
|
|
),
|
|
}
|