@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
52 lines (51 loc) • 2.46 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Symbol, Text } from '../..';
import { Tooltip } from './tooltip';
const story = {
title: 'Dialogs/Tooltip',
component: Tooltip,
args: {
interactive: true,
placement: 'auto',
delay: 500,
maxWidth: '40ch',
fill: false,
trigger: _jsx(Text, { as: "span", style: { margin: '1rem' }, children: "HTML" }),
},
argTypes: {
placement: {
options: ['auto', 'auto-start', 'auto-end', 'top', 'bottom', 'right', 'left', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'right-end', 'left-start', 'left-end'],
control: { type: 'select' },
},
},
};
export default story;
const Template = args => (_jsx(_Fragment, { children: _jsxs(Tooltip, { ...args, children: [_jsx("p", { children: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, ullam. Totam veniam dignissimos ducimus illo ipsa tempora corrupti enim quidem, ad odit molestias deleniti in." }), _jsxs("div", { style: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end',
gap: '0.5rem',
marginTop: '0.5rem',
}, children: [_jsx("button", { type: "button", onClick: () => console.debug('Reset!'), children: "Reset" }), _jsx("button", { type: "button", onClick: () => console.debug('Confirm!'), children: "Confirm" })] })] }) }));
const Template2 = args => (_jsx(_Fragment, { children: _jsx(Tooltip, { ...args, children: _jsx("p", { children: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, ullam. Totam veniam dignissimos ducimus illo ipsa tempora corrupti enim quidem, ad odit molestias deleniti in." }) }) }));
export const Interactive = Template.bind({});
Interactive.args = {
interactive: true,
};
export const NonInteractive = Template2.bind({});
NonInteractive.args = {
trigger: _jsx(Symbol, { source: "bell", "aria-hidden": "false", style: { marginLeft: '1rem' } }),
interactive: false,
};
export const Open = Template.bind({});
Open.args = {
interactive: true,
open: true,
};
export const WithButton = Template2.bind({});
WithButton.args = {
trigger: _jsx(Button, { children: "Click Me" }),
placement: 'top-end',
interactive: true,
};