@postnord/web-components
Version:
PostNord Web Components
81 lines (80 loc) • 2.26 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-tooltip-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
* Display a simple hover/focus activated tooltip.
*
* There are two variants. The default tooltip you use with slotted content that accepts any HTML markup.
* The simple variant that you can use with the prop `tooltip` to display a small tooltip text.
* */
const meta = {
title: 'Components/Feedback/Tooltip',
parameters: {
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
warning: false,
light: false,
tooltip: '',
},
argTypes,
};
export default meta;
export const PnTooltip = {
name: 'pn-tooltip',
parameters: {
docs: {
description: {
story: textContent,
},
},
},
render: args => {
const div = document.createElement('div');
div.style.paddingTop = '4em';
const tooltip = createComponent('pn-tooltip', args);
if (!args.tooltip) {
const textOne = document.createElement('p');
textOne.innerText = 'The shipment ID is 8 digits long.';
tooltip.appendChild(textOne);
}
div.appendChild(tooltip);
return div;
},
};
/** Instead of using slots to create the tooltip content. You can use the `tooltip` prop to set the text. */
export const PnTooltipSimple = {
name: 'pn-tooltip (simple)',
render: PnTooltip.render,
args: {
tooltip: 'The shipment ID is 8 digits long',
},
};
/** Use the light tooltip. */
export const PnTooltipLight = {
name: 'pn-tooltip (light)',
render: PnTooltip.render,
args: {
light: true,
},
parameters: {
backgrounds: { default: 'darkest' },
},
};
/** Use the warning tooltip, also changes the icon. */
export const PnTooltipWarning = {
name: 'pn-tooltip (warning)',
render: PnTooltip.render,
args: {
warning: true,
},
};
//# sourceMappingURL=pn-tooltip.stories.js.map