gov-gui
Version:
Gov UI Component Library Typscript Build
261 lines (258 loc) • 10.2 kB
JavaScript
import { fn } from "@storybook/test";
import { html } from "lit-html";
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
import "../../global/animate.min.css";
export default {
title: 'Components/Popups',
tags: ['autodocs'],
parameters: {
actions: {
handles: { confirmClicked: fn(), cancelClicked: fn(), popupOpened: fn(), popupClosed: fn() }, // Handles popup events
},
},
argTypes: {
confirmClicked: {
control: 'event',
action: 'confirmClicked',
description: 'Emits when the confirm button is clicked.',
table: {
type: { summary: 'string' },
defaultValue: { summary: () => { } },
category: 'Events',
},
},
cancelClicked: {
control: 'event',
action: 'cancelClicked',
description: 'Emits when the cancel button is clicked.',
table: {
type: { summary: 'string' },
defaultValue: { summary: () => { } },
category: 'Events',
},
},
popupOpened: {
control: 'event',
action: 'popupOpened',
description: 'Emits when the modal opens.',
table: {
type: { summary: 'string' },
defaultValue: { summary: () => { } },
category: 'Events',
},
},
popupClosed: {
control: 'event',
action: 'popupClosed',
description: 'Emits when the modal closes.',
table: {
type: { summary: 'string' },
defaultValue: { summary: () => { } },
category: 'Events',
},
},
header: {
control: 'text',
description: 'The header text displayed at the top of the popup.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Attributes',
},
},
subheader: {
control: "text",
description: 'The subheader text displayed at the top of the modal.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Attributes',
},
},
showCancelButton: {
control: 'boolean',
description: 'Controls whether the cancel button is displayed.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true },
category: 'Attributes',
},
},
showConfirmButton: {
control: 'boolean',
description: 'Controls whether the confirm button is displayed.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true },
category: 'Attributes',
},
},
cancelButtonText: {
control: 'text',
description: 'The text displayed on the cancel button.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Cancel' },
category: 'Attributes',
},
},
confirmButtonText: {
control: 'text',
description: 'The text displayed on the confirm button.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Confirm' },
category: 'Attributes',
},
},
confirmButtonVariant: {
control: 'select',
options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'white'],
description: 'The style variant of the confirm button.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'primary' },
category: 'Attributes',
},
},
cancelButtonVariant: {
control: 'select',
options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'white'],
description: 'The style variant of the cancel button.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'white' },
category: 'Attributes',
},
},
backdropClose: {
control: 'boolean',
description: 'Allow clicking on the backdrop to close the popup.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true },
category: 'Attributes',
},
},
disableClose: {
control: 'boolean',
description: 'Prevents manually closing the popup.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
category: 'Attributes',
},
},
animation: {
control: 'select',
options: ["",
"bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat",
"backInDown", "backInLeft", "backInRight", "backInUp",
"backOutDown", "backOutLeft", "backOutRight", "backOutUp",
"bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp",
"bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp",
"fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight",
"fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft",
"flip", "flipInX", "flipInY", "flipOutX", "flipOutY",
"lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft",
"rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight",
"rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight",
"hinge", "jackInTheBox", "rollIn", "rollOut",
"zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp",
"zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp",
"slideInDown", "slideInLeft", "slideInRight", "slideInUp",
"slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"
],
description: 'Selects the animation effect to apply to the component.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Animations',
},
},
animationDelay: {
control: 'select',
options: ["2s", "3s", "4s", "5s"],
description: 'Sets the delay before the animation begins (in seconds).',
table: {
type: { summary: 'string' },
defaultValue: { summary: '2s' },
category: 'Animations',
},
},
animationSpeed: {
control: 'select',
options: ["slow", "slower", "fast", "faster"],
description: 'Controls how quickly the animation plays.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Animations',
},
},
content: {
control: "text",
description: 'The header text displayed at the top of the popup.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Testing',
},
},
},
};
const Template = (args) => html `
<div style="height: 300px; display:flex; align-items: center; justify-content:center;">
<gov-button @click="${() => openPopup()}" label="Open Popup"></gov-button>
</div>
<gov-popups
id="modal1"
header="${args.header}"
subheader="${args.subheader}"
cancel-button-text="${args.cancelButtonText}"
confirm-button-text="${args.confirmButtonText}"
show-cancel-button="${args.showCancelButton}"
show-confirm-button="${args.showConfirmButton}"
confirm-button-variant="${args.confirmButtonVariant}"
cancel-button-variant="${args.cancelButtonVariant}"
backdrop-close="${args.backdropClose}"
disable-close="${args.disableClose}"
animation-delay="${args.animationDelay}"
animation="${args.animation}"
animation-speed="${args.animationSpeed}"
@confirmClicked="${args.confirmClicked}"
@cancelClicked="${args.cancelClicked}"
@popupOpened="${args.popupOpened}"
@popupClosed="${args.popupClosed}"
>
${args.content ? unsafeHTML(args.content) : ''}
</gov-popups>
<script>
const modal = document.getElementById('modal1') as any;
function openPopup() {
(modal as any).openModal();
}
</script>
`;
function openPopup() {
const modal = document.getElementById('modal1');
modal.openModal();
}
export const Popup = Template.bind({});
Popup.args = {
header: 'Are you sure you want to proceed?',
subheader: 'Be sure of your choice.',
showCancelButton: true,
showConfirmButton: true,
confirmButtonVariant: 'primary',
cancelButtonVariant: 'white',
cancelButtonText: 'Cancel',
confirmButtonText: 'Confirm',
backdropClose: true,
disableClose: false,
content: '<gov-input name="title" label="Artwork Title"></gov-input>',
animation: '',
animationDelay: '',
animationSpeed: '',
};
//# sourceMappingURL=gov-popups.stories.js.map