134 lines
4.4 KiB
TypeScript
134 lines
4.4 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 { STORY_KICKER, 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
|
|
kicker={STORY_KICKER.components}
|
|
title="Alert"
|
|
description="화면 안에 놓이는 인라인 메시지입니다(Toast 아님). variant는 default(neutral)와 destructive만 두며 닫기 동작은 없습니다."
|
|
/>
|
|
<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" description="아이콘 없음, 제목만, 긴 내용 구성입니다.">
|
|
<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>
|
|
),
|
|
}
|