@postnord/web-components
Version:
PostNord Web Components
207 lines (206 loc) • 6.41 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-button-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
* The `pn-button` is a versatile component that can be a native HTML button or a regular link element.
*/
const meta = {
title: 'Components/Buttons/Button',
parameters: {
actions: {
handles: ['click', 'pnClick'],
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
label: 'Submit',
appearance: '',
variant: '',
small: false,
loading: false,
icon: '',
iconOnly: false,
leftIcon: false,
tooltip: '',
tooltipUp: false,
href: '',
rel: '',
target: '',
download: '',
type: '',
form: '',
buttonId: '',
arialabel: '',
arialabelledby: '',
ariacontrols: '',
ariapressed: '',
ariahaspopup: '',
ariaexpanded: '',
noTab: false,
},
argTypes,
};
meta.argTypes.iconOnly.if = { arg: 'icon', neq: '' };
meta.argTypes.leftIcon.if = { arg: 'icon', neq: '' };
meta.argTypes.tooltipUp.if = { arg: 'tooltip', neq: '' };
meta.argTypes.rel.if = { arg: 'href', neq: '' };
meta.argTypes.target.if = { arg: 'href', neq: '' };
meta.argTypes.download.if = { arg: 'href', neq: '' };
meta.argTypes.type.if = { arg: 'href', eq: '' };
meta.argTypes.form.if = { arg: 'href', eq: '' };
export default meta;
const renderVariants = (args, text = '') => {
const div = document.createElement('div');
div.className = 'sb-button-row';
div.style.justifyContent = 'center';
const list = ['', 'outlined', 'borderless'];
list.forEach(variant => div.appendChild(createComponent('pn-button', { ...args, variant, label: `${text} ${variant ? variant : ''}`.trim() })));
return div;
};
export const PnButton = {
name: 'pn-button',
parameters: {
docs: {
description: {
story: textContent,
},
},
},
render: args => createComponent('pn-button', args),
};
/**
* The icon is placed on the right of the text by default. You can use the prop `left-icon` to place it on the left.
*
* You can use icons from `pn-design-assets`, [learn how to import them here](?path=/docs/docs-assets--docs).
**/
export const PnButtonIcon = {
name: 'pn-button (icon) ',
render: PnButton.render,
args: {
label: 'Account',
icon: 'user',
},
};
/**
* The prop `icon-only` is only available if you have a value in `tooltip`, `arialabel` or `arialabelledby`.
* This is to make sure there is a text describing the button/link at all times.
*
* <pn-toast text="You must use tooltip, arialabel or arialabelledby for this prop to work."></pn-toast>
*/
export const PnButtonIconOnly = {
name: 'pn-button (icon only) ',
render: PnButton.render,
args: {
label: '',
icon: 'user',
iconOnly: true,
arialabel: 'Account',
},
};
/** Use the `small` variant of the pn-button. */
export const PnButtonSmall = {
name: 'pn-button (small) ',
render: PnButton.render,
args: {
label: 'Small button',
small: true,
},
};
/** The default blue `appearance` with each of the `variant`'s on display. */
export const PnButtonDark = {
name: 'pn-button (dark) ',
render: args => renderVariants(args, 'Default'),
parameters: {
backgrounds: { default: 'darkest' },
},
};
/** The `appearance="light"` with each of the `variant`'s on display. */
export const PnButtonLight = {
name: 'pn-button (light)',
render: args => renderVariants(args, 'Light'),
parameters: {
backgrounds: { default: 'light-gray' },
},
args: {
appearance: 'light',
},
};
/** The `appearance="warning"` with each of the `variant`'s on display. */
export const PnButtonWarning = {
name: 'pn-button (warning)',
render: args => renderVariants(args, ' Warning'),
args: {
appearance: 'warning',
icon: 'trash_can',
},
};
/**
* You can add a tooltip to the pn-button with the `tooltip` prop.
* The tooltip will always be displayed downwards. If there is not enough space, it goes upwards.
*/
export const PnButtonTooltip = {
name: 'pn-button (tooltip)',
render: PnButton.render,
args: {
tooltip: 'Click to save entry.',
},
};
/**
* The `tooltip-up` prop will make the tooltip appear upwards instead.
* If there is not enough space, it goes downwards.
*/
export const PnButtonTooltipUp = {
name: 'pn-button (tooltip up)',
render: PnButton.render,
args: {
tooltip: 'Click to save entry.',
tooltipUp: true,
},
};
/**
* You can turn the `pn-button` into a link by setting the `href` attribute.
* This example also use an `icon` and `target='_blank'`
*/
export const PnButtonLink = {
name: 'pn-button (link)',
render: (args, context) => PnButton.render(args, context),
args: {
label: 'Open link in another tab',
href: 'https://portal.postnord.com/se/en/',
icon: 'open_in_new',
target: '_blank',
},
};
/** If the `loading` prop is true, it will tranform the pn-button into a loading indicator.
* Click on the buttons to view the nice loading animation!
*/
export const PnButtonLoading = {
name: 'pn-button (loading)',
render: (args, context) => {
const button1 = PnButton.render({ ...args, loading: true, label: 'Toggle the right button' }, context);
const button2 = PnButton.render({ ...args, loading: false, label: 'Toggle the left button' }, context);
const toggleAll = () => {
button1.toggleAttribute('loading');
button2.toggleAttribute('loading');
};
button1.addEventListener('pnClick', () => toggleAll());
button2.addEventListener('pnClick', () => toggleAll());
const div = document.createElement('div');
div.className = 'sb-button-row';
div.appendChild(button1);
div.appendChild(button2);
return div;
},
args: {
loading: true,
},
};
//# sourceMappingURL=pn-button.stories.js.map