gov-gui/dist/collection/components/gov-form/gov-form.stories.js

Gov UI Component Library Typscript Build

import { html } from "lit-html";
import "../../global/animate.min.css";
/** Form component used to submit data with optional customization for buttons and form handling */
export default {
    title: 'Components/Form',
    component: 'gov-form',
    tags: ['autodocs'],
    parameters: {
        actions: {
            handles: ['submit'], // capture submit event
        }
    },
    argTypes: {
        header: {
            control: 'text',
            description: 'The header text displayed at the top of the form',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        url: {
            control: 'text',
            description: 'The URL to which the form will be submitted',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        method: {
            control: 'text',
            description: 'The HTTP method used when submitting the form (e.g., POST, GET)',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        encType: {
            control: 'text',
            description: 'The encoding type of the form data (e.g., multipart/form-data)',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        onSubmit: {
            action: 'submit',
            description: 'Callback function triggered when the form is submitted',
            table: {
                type: { summary: 'function' },
                defaultValue: { summary: '() => {}' },
                category: 'Attributes',
            },
        },
        submitBtnText: {
            control: 'text',
            description: 'Text displayed on the submit button',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'Submit' },
                category: 'Attributes',
            },
        },
        cancelBtnText: {
            control: 'text',
            description: 'Text displayed on the cancel button',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'Cancel' },
                category: 'Attributes',
            },
        },
        hideCancelBtn: {
            control: 'boolean',
            description: 'Boolean flag to hide or show the cancel button',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Attributes',
            },
        },
        hideSubmitBtn: {
            control: 'boolean',
            description: 'Boolean flag to hide or show the submit button',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Attributes',
            },
        },
        resetOnSubmit: {
            control: 'boolean',
            description: 'Whether to reset the form after submission',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Attributes',
            },
        },
        variant: {
            control: 'select',
            options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'white'],
            description: 'The variant of the submit button (e.g., primary, secondary)',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'primary' },
                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',
            },
        },
        showInput: {
            control: 'boolean',
            description: 'Show or hide basic input in the form to test',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Test',
            },
        },
        showRadio: {
            control: 'boolean',
            description: 'Show or hide basic radio in the form to test',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Test',
            },
        },
        showDateTime: {
            control: 'boolean',
            description: 'Show or hide basic datetime in the form to test',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Test',
            },
        },
        showCalender: {
            control: 'boolean',
            description: 'Show or hide basic calender in the form to test',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Test',
            },
        },
        showUpload: {
            control: 'boolean',
            description: 'Show or hide basic upload in the form to test',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Test',
            },
        },
        showCheckbox: {
            control: 'boolean',
            description: 'Show or hide basic checkbox in the form to test',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Test',
            },
        },
    }
};
const Template = (args) => html `
  <gov-form 
    header="${args.header}" 
    url="${args.url}" 
    method="${args.method}" 
    enc-type="${args.encType}" 
    .on-submit="${args.onSubmit}"  // Bound function for form submit
    submit-btn-text="${args.submitBtnText}" 
    cancel-btn-text="${args.cancelBtnText}" 
    ?hide-cancel-btn="${args.hideCancelBtn}" 
    ?hide-submit-btn="${args.hideSubmitBtn}"
    ?reset-on-submit="${args.resetOnSubmit}"
    variant="${args.variant}"
    animation-delay="${args.animationDelay}"
    animation="${args.animation}"
    animation-speed="${args.animationSpeed}"
  >
    
    ${args.showInput ? html ` <gov-input name="Name" label="Name" required></gov-input>` : ''}
    ${args.showRadio ? html `<gov-radiobutton name="medium"
          options='["label","Oil","77","oil"]' required></gov-radiobutton>` : ''}
    ${args.showDateTime ? html ` <gov-date-time-picker name="appointment" label="Appointment Date & Time" required></gov-date-time-picker>` : ''}
    ${args.showCalender ? html ` <gov-calender name="eventDate" label="Event Date" required></gov-calender>` : ''}
    ${args.showUpload ? html ` <gov-upload id="uploadComponent" name="documents" label="Upload Documents" allowedfiletypes='["pdf", "png", "jpeg"]' required></gov-upload>` : ''}
    ${args.showCheckbox ? html ` <gov-checkbox name="terms" label="Accept Terms" required></gov-checkbox>` : ''}

  </gov-form>
`;
export const Form = Template.bind({});
Form.args = {
    header: 'Sample Form',
    url: '',
    method: 'POST',
    encType: 'application/x-www-form-urlencoded',
    onSubmit: () => alert('Form submitted!'), // Basic submit action for demo purposes
    submitBtnText: 'Submit',
    cancelBtnText: 'Cancel',
    hideCancelBtn: true,
    hideSubmitBtn: false,
    resetOnSubmit: true,
    variant: 'primary',
    showInput: true,
    showCheckbox: true,
    showRadio: true,
    showDateTime: true,
    showCalender: true,
    showUpload: true,
    animation: '',
    animationDelay: '',
    animationSpeed: '',
};
//# sourceMappingURL=gov-form.stories.js.map