Mike Phares
127634f5ab
Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter Color Sorting
42 lines
1.4 KiB
JavaScript
42 lines
1.4 KiB
JavaScript
import { icons } from "@infineon/infineon-icons";
|
|
export default {
|
|
title: "Components/Tooltip",
|
|
tags: ['autodocs'],
|
|
args: {
|
|
header: "Tooltip headline",
|
|
text: "Hi, I'm a tooltip",
|
|
position: 'auto',
|
|
variant: 'compact',
|
|
icon: "c-info-24",
|
|
},
|
|
argTypes: {
|
|
icon: {
|
|
options: Object.values(icons).map(i => i['name']),
|
|
control: { type: 'select' },
|
|
},
|
|
position: {
|
|
options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],
|
|
control: { type: 'radio' }
|
|
},
|
|
variant: {
|
|
options: ['compact', 'dismissible', 'extended'],
|
|
control: { type: 'radio' }
|
|
},
|
|
header: { control: 'text', if: { arg: 'variant', neq: 'compact' } }
|
|
}
|
|
};
|
|
const DefaultTemplate = ({ header, text, variant, position, icon }) => {
|
|
const element = document.createElement('ifx-tooltip');
|
|
if (variant === 'dismissible' || variant === 'extended') {
|
|
element.setAttribute('header', header);
|
|
}
|
|
element.setAttribute('text', text);
|
|
element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);
|
|
element.setAttribute('position', position);
|
|
element.setAttribute('icon', icon);
|
|
element.textContent = "I'm the tooltip reference element - Please hover me"; // Set content for the reference element
|
|
return element;
|
|
};
|
|
export const Default = DefaultTemplate.bind({});
|
|
//# sourceMappingURL=tooltip.stories.js.map
|