@postnord/web-components
Version:
PostNord Web Components
56 lines (55 loc) • 1.73 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-read-only-button-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
* The pn-read-only-button is only meant as a replacement for the regular pn-button, if you app is used in a read-only context.
* In this scenario, you should not be able to interact with the button in any way shape or form.
*
* <pn-toast closable="false" appearance="warning" text="This component is only intended for a read only user in the portal."></pn-toast>
*/
const meta = {
title: 'Components/Buttons/Read Only Button',
parameters: {
docs: {
description: {
story: textContent,
},
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
icon: '',
leftIcon: false,
iconOnly: false,
small: false,
},
argTypes,
};
meta.argTypes.leftIcon.if = { arg: 'icon', neq: '' };
meta.argTypes.iconOnly.if = { arg: 'icon', neq: '' };
export default meta;
export const PnReadOnlyButton = {
name: 'pn-read-only-button',
render: args => {
const button = createComponent('pn-read-only-button', args);
button.innerHTML += 'Click me';
return button;
},
};
/** You can use an icon inside the button. */
export const PnReadOnlyButtonIcon = {
name: 'pn-read-only-button (icon)',
render: PnReadOnlyButton.render,
args: {
icon: 'box',
},
};
//# sourceMappingURL=pn-read-only-button.stories.js.map