style(storybook): group overlay, disclosure and navigation story pages
- 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
This commit is contained in:
1 parent
71d504407d
commit
bad2acfc49
35 files changed
+649
-521
No files matched your search
@@ -0,0 +1,64 @@
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
Button,
|
||||
} from "@hm-design/ui"
|
||||
|
||||
// Shared Alert Dialog specimens (Storybook only). Used by the Alert Dialog Stories (verification) and by the Dialog representative
|
||||
// page, which shows general and confirmation / warning dialogs under one sidebar item ("대화상자").
|
||||
// Alert Dialog is a modal Radix overlay (Portal) for a decision that must be confirmed or cancelled: no Close (X), no outside
|
||||
// dismiss. Action / Cancel are the HM Button: both confirmation and deletion use a Solid pair
|
||||
// (deletion pairs Cancel with a destructive Action).
|
||||
|
||||
export function AlertDialogConfirmation({ defaultOpen }: { defaultOpen?: boolean }) {
|
||||
return (
|
||||
<AlertDialog defaultOpen={defaultOpen}>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="primary" appearance="outline">
|
||||
로그아웃
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>로그아웃하시겠습니까?</AlertDialogTitle>
|
||||
<AlertDialogDescription>저장하지 않은 변경 사항은 사라집니다.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel appearance="solid">취소</AlertDialogCancel>
|
||||
<AlertDialogAction variant="primary" appearance="solid">로그아웃</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
|
||||
export function AlertDialogDestructive({ defaultOpen }: { defaultOpen?: boolean }) {
|
||||
return (
|
||||
<AlertDialog defaultOpen={defaultOpen}>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="destructive" appearance="outline">
|
||||
삭제
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>프로젝트를 삭제하시겠습니까?</AlertDialogTitle>
|
||||
<AlertDialogDescription>삭제하면 되돌릴 수 없습니다. 프로젝트의 모든 데이터가 함께 삭제됩니다.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel appearance="solid">취소</AlertDialogCancel>
|
||||
<AlertDialogAction variant="destructive" appearance="solid">
|
||||
삭제
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user