@postnord/web-components
Version:
PostNord Web Components
90 lines (89 loc) • 2.83 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-modal-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
import { PnSelectIcon } from "../../input/pn-select/pn-select.stories";
/**
* The `pn-modal` can be used to display content that is positioned in the center of your viewport.
* On a smaller screen, the modal will align to the bottom.
*
* Clicking on the dark background behind the modal will close it automatically.
**/
const meta = {
title: 'Components/Feedback/Modal',
parameters: {
layout: 'padded',
docs: {
story: {
iframeHeight: '600px',
iframeWidth: '100%',
inline: false,
},
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
actions: {
handles: ['close'],
},
},
args: {
open: true,
},
argTypes,
};
export default meta;
export const PnModal = {
name: 'pn-modal',
parameters: {
docs: {
description: {
story: textContent,
},
},
},
render: args => createRender(args),
};
/**
* Use the slot `buttons` to add buttons to the bottom part of the modal.
* This is a good place for a "Save" or "Cancel" button.
*/
export const PnModalButtons = {
name: 'pn-modal (with buttons)',
render: args => createRender(args, true),
};
function createRender(args, slot) {
const wrapper = document.createElement('div');
const modal = createComponent('pn-modal', args);
createContent(modal, slot);
wrapper.appendChild(modal);
const button = createComponent('pn-button', { label: 'Open' });
button.onclick = () => modal.setAttribute('open', 'true');
wrapper.appendChild(button);
return wrapper;
}
function createContent(element, buttons) {
const title = document.createElement('h2');
title.style.marginBottom = '.5em';
const text = document.createElement('p');
title.innerText = 'Update phone number';
text.innerText = 'Select your country and enter the phone number you wish to use.';
element.appendChild(title);
element.appendChild(text);
/** @ts-ignore */
const select = PnSelectIcon.render({ label: 'Select country' }, {});
element.appendChild(select);
if (buttons) {
const btnRow = document.createElement('div');
btnRow.setAttribute('slot', 'buttons');
const button = createComponent('pn-button', { label: 'Save' });
btnRow.appendChild(button);
element.appendChild(btnRow);
}
}
//# sourceMappingURL=pn-modal.stories.js.map