mirror of
https://github.com/OpenHands/OpenHands.git
synced 2025-12-26 05:48:36 +08:00
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
import { Tooltip } from "./Tooltip";
|
|
import { Typography } from "../typography/Typography";
|
|
|
|
const meta = {
|
|
title: "Components/Tooltip",
|
|
component: Tooltip,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
placement: {
|
|
control: {
|
|
type: "select",
|
|
},
|
|
options: ["top", "right", "bottom", "left"],
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Tooltip>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Hover: Story = {
|
|
args: {
|
|
placement: "top",
|
|
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
|
|
withArrow: true,
|
|
},
|
|
render: ({ text, withArrow, placement }) => (
|
|
<Tooltip
|
|
text={text}
|
|
withArrow={withArrow}
|
|
placement={placement}
|
|
trigger="hover"
|
|
>
|
|
<Typography.Text>Hover me</Typography.Text>
|
|
</Tooltip>
|
|
),
|
|
};
|
|
export const Click: Story = {
|
|
args: {
|
|
placement: "top",
|
|
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
|
|
withArrow: true,
|
|
},
|
|
render: ({ text, withArrow, placement }) => (
|
|
<Tooltip
|
|
text={text}
|
|
withArrow={withArrow}
|
|
placement={placement}
|
|
trigger="click"
|
|
>
|
|
<Typography.Text>Click me</Typography.Text>
|
|
</Tooltip>
|
|
),
|
|
};
|