@kadconsulting/dry/dist/src/components/Tooltip/Tooltip.stories.js

KAD Reusable Component Library

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