@kadconsulting/dry
Version:
KAD Reusable Component Library
107 lines • 3.66 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import Tooltip from './Tooltip';
import { Button } from '..';
const meta = {
title: 'Components/Tooltip',
component: Tooltip,
tags: ['autodocs'],
argTypes: {
title: {
control: 'text',
description: 'The title of the tooltip',
},
text: {
control: 'text',
description: 'The main text content of the tooltip',
},
position: {
control: 'select',
options: ['top', 'right', 'bottom', 'left'],
description: 'The position of the tooltip relative to its target',
},
tooltipOn: {
control: 'boolean',
description: 'Whether the tooltip is always visible',
},
useMouseOver: {
control: 'boolean',
description: 'Whether to show the tooltip on mouse over',
},
children: {
control: 'text',
description: 'The content that the tooltip wraps',
},
},
};
export default meta;
export const Default = {
args: {
title: 'Tooltip Title',
text: 'This is a tooltip',
children: _jsx(Button, { children: "Hover me" }),
position: 'top',
},
};
export const LeftPosition = {
args: {
...Default.args,
position: 'left',
},
};
export const RightPosition = {
args: {
...Default.args,
position: 'right',
},
};
export const BottomPosition = {
args: {
...Default.args,
position: 'bottom',
},
};
export const AlwaysVisible = {
args: {
...Default.args,
tooltipOn: true,
},
};
export const NoMouseOver = {
args: {
...Default.args,
useMouseOver: false,
tooltipOn: true,
},
};
export const LongContent = {
args: {
...Default.args,
title: 'Long Title That Wraps to Multiple Lines',
text: 'This is a tooltip with a lot of content. It demonstrates how the tooltip handles long text and wraps it appropriately.',
},
};
export const CustomContent = {
args: {
...Default.args,
children: (_jsx("div", { style: { padding: '10px', border: '1px solid black' }, children: "Custom Content" })),
},
};
export const MultipleTooltips = {
render: (args) => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-around' }, children: [_jsx(Tooltip, { ...args, position: 'top', children: _jsx(Button, { children: "Top" }) }), _jsx(Tooltip, { ...args, position: 'right', children: _jsx(Button, { children: "Right" }) }), _jsx(Tooltip, { ...args, position: 'bottom', children: _jsx(Button, { children: "Bottom" }) }), _jsx(Tooltip, { ...args, position: 'left', children: _jsx(Button, { children: "Left" }) })] })),
args: {
title: 'Tooltip',
text: 'This is a tooltip',
},
};
export const InteractiveExample = {
render: () => {
const [isVisible, setIsVisible] = React.useState(false);
return (_jsxs("div", { children: [_jsxs(Button, { onClick: () => setIsVisible(!isVisible), children: [isVisible ? 'Hide' : 'Show', " Tooltip"] }), _jsx(Tooltip, { position: 'top', useMouseOver: false, title: 'Interactive Tooltip', text: 'This tooltip is controlled by a button', tooltipOn: isVisible, children: _jsx("div", { style: {
marginTop: '20px',
padding: '10px',
border: '1px solid black',
}, children: "Target Content" }) })] }));
},
};
//# sourceMappingURL=Tooltip.stories.js.map