@postnord/web-components/collection/components/buttons/pn-button-dropdown/pn-button-dropdown.stories.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-button-dropdown-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/** Toggle a small dropdown. You need to set a label for the for dropdown with the `label` property. */
const meta = {
    title: 'Components/Buttons/Button Dropdown',
    parameters: {
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
    },
    args: {
        label: 'Export file',
        icon: '',
        appearance: null,
        variant: null,
        small: false,
        open: false,
        tooltip: '',
    },
    argTypes,
};
export default meta;
export const PnButtonDropdown = {
    name: 'pn-button-dropdown',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    render: args => {
        const dropdown = createComponent('pn-button-dropdown', args);
        const div = document.createElement('div');
        div.style.padding = '7em 0';
        dropdown.innerHTML += `
     <ul style="list-style:none;margin:0;padding:0;">
     <li style="margin-bottom:.5em"><pn-button small appearance="light" variant="borderless">JSON</pn-button></li>
     <li><pn-button small appearance="light" variant="borderless">XML</pn-button></li>
     </ul>
    `;
        div.appendChild(dropdown);
        return div;
    },
};
/** You can use the `appearance` and `variant` properties. */
export const PnButtonDropdownAppearance = {
    name: 'pn-button-dropdown (dark)',
    render: PnButtonDropdown.render,
    args: {
        label: 'Outlined button with icon',
        variant: 'borderless',
    },
    parameters: {
        backgrounds: { default: 'darkest' },
    },
};
/** Make the button `small`. This example also uses the `appearance` and `variant` properties. */
export const PnButtonDropdownSmall = {
    name: 'pn-button-dropdown (small)',
    render: PnButtonDropdown.render,
    args: {
        label: 'A small light button without borders',
        appearance: 'light',
        variant: 'borderless',
        small: true,
    },
};
/** You can use the `icon` property to display your SVG content. */
export const PnButtonDropdownIcon = {
    name: 'pn-button-dropdown (icon)',
    render: PnButtonDropdown.render,
    args: {
        label: 'Dropdown with an icon',
        icon: 'alert_info_circle',
    },
};
/** With the `open` prop, you open/close the dropdown without user input. */
export const PnButtonDropdownOpen = {
    name: 'pn-button-dropdown (open)',
    render: PnButtonDropdown.render,
    args: {
        label: 'Button',
        open: true,
    },
};
/**
 * The dropdown will open upwards if there is not enough space under the button.
 *
 * Please note: the calculation is based on **window** size and **NOT** the container element.
 **/
export const PnButtonDropdownTop = {
    name: 'pn-button-dropdown (top)',
    parameters: {
        layout: 'fullscreen',
        docs: {
            story: {
                iframeHeight: '15em',
                iframeWidth: '100%',
                inline: false,
            },
        },
    },
    render: (args, context) => {
        const dropdown = PnButtonDropdown.render(args, context);
        dropdown.style.padding = '2em';
        dropdown.style.height = '100vh';
        dropdown.style.display = 'flex';
        dropdown.style.alignItems = 'flex-end';
        dropdown.style.justifyContent = 'center';
        return dropdown;
    },
};
/**
 * The dropdown will be an icon only if you set the `tooltip` value, define and `icon` and don't include a `label`.
 **/
export const PnButtonDropdownIconOnly = {
    name: 'pn-button-dropdown (icon only)',
    render: PnButtonDropdown.render,
    args: {
        label: '',
        icon: 'hand',
        tooltip: 'High five!',
    },
};
//# sourceMappingURL=pn-button-dropdown.stories.js.map