You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
blog.krasnikov.pro/components/stories/tooltip.stories.tsx

42 lines
961 B

import type { Meta, StoryObj } from '@storybook/react';
import { Github } from 'lucide-react';
import { Tooltip } from '@/components/tooltip';
import { Center } from './decorators';
const meta: Meta<typeof Tooltip> = {
title: 'Tooltip',
component: Tooltip,
render: (args) => (
<>
<Github
id="github"
className="icon-base"
data-tooltip-content={args.content}
data-tooltip-id="tooltip"
aria-label={args.content}
/>
<Tooltip id="tooltip" {...args} />
</>
),
decorators: [Center],
args: {
content: 'My GitHub profile',
},
argTypes: {
place: {
control: false,
},
},
};
export default meta;
type Story = StoryObj<typeof Tooltip>;
export const Top: Story = { args: { place: 'top' } };
export const Bottom: Story = { args: { place: 'bottom' } };
export const Left: Story = { args: { place: 'left' } };
export const Right: Story = { args: { place: 'right' } };