107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { Button, TooltipTrigger } from 'react-aria-components'
|
|
import { Tooltip } from './Tooltip'
|
|
|
|
const meta = {
|
|
title: 'Components/Tooltip',
|
|
component: Tooltip,
|
|
args: {
|
|
children: '툴팁 내용',
|
|
},
|
|
argTypes: {
|
|
bgColor: {
|
|
control: 'select',
|
|
options: ['white', 'tertiary'],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Tooltip>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-primary text-white rounded">마우스를 올려보세요</Button>
|
|
<Tooltip>기본 툴팁 메시지입니다.</Tooltip>
|
|
</TooltipTrigger>
|
|
),
|
|
}
|
|
|
|
export const WhiteBackground: Story = {
|
|
render: () => (
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-primary text-white rounded">흰색 배경</Button>
|
|
<Tooltip bgColor="white">흰색 배경의 툴팁입니다.</Tooltip>
|
|
</TooltipTrigger>
|
|
),
|
|
}
|
|
|
|
export const TertiaryBackground: Story = {
|
|
render: () => (
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-primary text-white rounded">Tertiary 배경</Button>
|
|
<Tooltip bgColor="tertiary">Tertiary 배경의 툴팁입니다.</Tooltip>
|
|
</TooltipTrigger>
|
|
),
|
|
}
|
|
|
|
export const LongContent: Story = {
|
|
render: () => (
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-primary text-white rounded">긴 내용</Button>
|
|
<Tooltip>
|
|
이것은 아주 긴 툴팁 내용입니다. 최대 너비가 200px로 제한되어 있어 자동으로 줄바꿈됩니다.
|
|
스크롤이 필요한 경우 스크롤바가 표시됩니다.
|
|
</Tooltip>
|
|
</TooltipTrigger>
|
|
),
|
|
}
|
|
|
|
export const MultilineContent: Story = {
|
|
render: () => (
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-primary text-white rounded">여러 줄</Button>
|
|
<Tooltip>{`첫 번째 줄\n두 번째 줄\n세 번째 줄`}</Tooltip>
|
|
</TooltipTrigger>
|
|
),
|
|
}
|
|
|
|
export const PlacementVariants: Story = {
|
|
render: () => (
|
|
<div className="flex gap-8 p-16">
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-gray-200 rounded">Top (기본)</Button>
|
|
<Tooltip placement="top">위쪽에 표시</Tooltip>
|
|
</TooltipTrigger>
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-gray-200 rounded">Bottom</Button>
|
|
<Tooltip placement="bottom">아래쪽에 표시</Tooltip>
|
|
</TooltipTrigger>
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-gray-200 rounded">Left</Button>
|
|
<Tooltip placement="left">왼쪽에 표시</Tooltip>
|
|
</TooltipTrigger>
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-gray-200 rounded">Right</Button>
|
|
<Tooltip placement="right">오른쪽에 표시</Tooltip>
|
|
</TooltipTrigger>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const AllBackgroundColors: Story = {
|
|
render: () => (
|
|
<div className="flex gap-8 p-8">
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-gray-200 rounded">White</Button>
|
|
<Tooltip bgColor="white">White 배경</Tooltip>
|
|
</TooltipTrigger>
|
|
<TooltipTrigger>
|
|
<Button className="px-4 py-2 bg-gray-200 rounded">Tertiary</Button>
|
|
<Tooltip bgColor="tertiary">Tertiary 배경</Tooltip>
|
|
</TooltipTrigger>
|
|
</div>
|
|
),
|
|
}
|