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

Gov UI Component Library Typscript Build

import { html } from "lit-html";
import "../../global/animate.min.css";
/**
 * Input fields allow users to enter data into a form or interface.
 * They come in various types such as text, number, password, and email.
 * Input fields can include placeholders, labels, and validation messages to guide user input and improve the user experience.
 */
export default {
    title: 'Components/Input',
    tags: ['autodocs'],
    parameters: {
        actions: {
            argTypesRegex: '^on.*',
        },
    },
    argTypes: {
        label: {
            control: 'text',
            description: 'The label displayed for the input field.',
            table: {
                type: { summary: 'string' },
                category: 'Attributes',
                defaultValue: { summary: 'Enter your text here' },
            },
        },
        legend: {
            control: 'text',
            description: 'Helper text displayed when the input is valid.',
            table: {
                type: { summary: 'string' },
                category: 'Attributes',
                defaultValue: { summary: '' },
            },
        },
        type: {
            control: 'select',
            options: ['text', "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week"],
            description: 'The type of input (e.g., text, password, email).',
            table: {
                type: { summary: 'string' },
                category: 'Attributes',
                defaultValue: { summary: 'text' },
            },
        },
        placeholder: {
            control: 'text',
            description: 'The placeholder text for the input.',
            table: {
                type: { summary: 'string' },
                category: 'Attributes',
                defaultValue: { summary: 'Enter your text here' },
            },
        },
        value: {
            control: 'text',
            description: 'The value of the input field. Is also used to to extract the input value e.g: comp.value',
            table: {
                type: { summary: 'string' },
                category: 'Attributes',
                defaultValue: { summary: '' },
            },
        },
        disabled: {
            control: 'boolean',
            description: 'Disables the input if true.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Attributes',
            },
        },
        maxlength: {
            control: 'number',
            description: 'The maximum length of the input.',
            table: {
                type: { summary: 'number' },
                defaultValue: { summary: undefined },
                category: 'Attributes',
            },
        },
        validationPattern: {
            control: 'text',
            description: 'Regular expression pattern for input validation.',
            table: {
                type: { summary: 'RegExp' },
                category: 'Attributes',
                defaultValue: { summary: undefined },
            },
        },
        errorMessage: {
            control: 'text',
            description: 'The error message shown when validation fails.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'Invalid input' },
                category: 'Attributes',
            },
        },
        required: {
            control: 'boolean',
            description: 'Specifies if the input is required.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Attributes',
            },
        },
        requiredErrorMessage: {
            control: 'text',
            description: 'Error message shown when required validation fails.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'This field is required' },
                category: 'Attributes',
            },
        },
        icon: {
            control: 'text',
            description: 'Name of the icon to display inside the input.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: undefined },
                category: 'Attributes',
            },
        },
        isValid: {
            control: 'boolean',
            description: 'Boolean flag to show the value as valid.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        isTouched: {
            control: 'boolean',
            description: 'Tracks if the input has been interacted with.',
            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',
            },
        },
        valueChanged: {
            control: 'event',
            action: 'valueChanged',
            description: 'Event emitted when the input value changes.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: () => { } },
                category: 'Events',
            },
        },
        validationChanged: {
            control: 'event',
            action: 'validationChanged',
            description: 'Event emitted when the validation status changes.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: () => { } },
                category: 'Events',
            },
        },
        getValue: {
            control: 'getValue',
            description: 'Method to extract the component\'s value, e.g: comp.getValue()',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Interaction',
            },
        },
        validate: {
            control: 'validate',
            description: 'Method to validate the component\'s value, e.g: comp.validate()',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Interaction',
            },
        },
    },
};
const Template = (args) => html `
  <gov-input 
    label="${args.label}" 
    legend="${args.legend}"
    type="${args.type}" 
    placeholder="${args.placeholder}" 
    value="${args.value}"
    disabled="${args.disabled}" 
    maxlength="${args.maxlength}" 
    .is-valid="${args.isValid}"
    .is-touched="${args.isTouched}"
    icon="${args.icon}"
    .validation-pattern="${new RegExp(args.validationPattern)}"
    required="${args.required}"
    error-message="${args.errorMessage}"
    required-error-message="${args.requiredErrorMessage}"
      animation-delay="${args.animationDelay}"
  animation="${args.animation}"
  animation-speed="${args.animationSpeed}"
    @valueChanged="${args.valueChanged}" 
    @validationChanged="${args.validationChanged}">
  </gov-input>
`;
// Custom Template for Display
export const Input = Template.bind({});
Input.args = {
    label: 'Input',
    legend: 'Input is valid',
    type: 'text',
    placeholder: 'Enter your text here',
    value: '',
    maxlength: 9,
    isValid: true,
    isTouched: false,
    disabled: false,
    icon: 'search',
    validationPattern: '',
    errorMessage: 'Invalid input',
    required: false,
    requiredErrorMessage: 'This field is required',
    animation: '',
    animationDelay: '',
    animationSpeed: '',
};
Input.parameters = {
    docs: {
        source: {
            code: `
    <gov-input 
    label="${Input.args.label}" 
    legend="${Input.args.legend}"
    type="${Input.args.type}" 
    placeholder="${Input.args.placeholder}" 
    value="${Input.args.value}"
    disabled="${Input.args.disabled}" 
    maxlength="${Input.args.maxlength}" 
    .is-valid="${Input.args.isValid}"
    .is-touched="${Input.args.isTouched}"
    icon="${Input.args.icon}"
    .validation-pattern="${new RegExp(Input.args.validationPattern)}"
    required="${Input.args.required}"
    error-message="${Input.args.errorMessage}"
    required-error-message="${Input.args.requiredErrorMessage}"
    animation-delay="${Input.args.animationDelay}"
animation="${Input.args.animation}"
animation-speed="${Input.args.animationSpeed}"
    @valueChanged="${Input.args.valueChanged}" 
    @validationChanged="${Input.args.validationChanged}">
  </gov-input>`,
        },
    },
};
//# sourceMappingURL=gov-input.stories.js.map