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

Gov UI Component Library Typscript Build

import { html } from "lit-html";
import "../../global/animate.min.css";
/** Buttons are interactive elements that trigger an action when clicked or tapped.
 * They come in various styles such as primary, secondary, and icon buttons.
 *  Buttons can be used to submit forms, open dialogs, or perform other user-initiated actions.
 * Their design typically includes visual cues like color, size, and shape to indicate importance and actionability.*/
export default {
    title: 'Components/Button/Button',
    tags: ['autodocs'],
    parameters: {
        actions: {
            handles: ['clicked'],
        }
    },
    argTypes: {
        size: {
            control: 'select',
            options: ['sm', 'lg', 'extended'],
            description: 'Sets the size of the button: small (sm), large (lg), or extended.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            }
        },
        iconSize: {
            control: 'select',
            options: ['sm', 'md', 'lg'],
            description: 'Sets the size of the icon in the button: small (sm), large (lg), or medium(md).',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            }
        },
        variant: {
            control: 'select',
            options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'white'],
            description: 'Sets the button variant style: primary or secondary.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            }
        },
        label: {
            control: 'text',
            description: 'Text displayed inside the button.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            }
        },
        icon: {
            control: 'text',
            description: 'The name of the icon you want to render in the gov-button.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            }
        },
        disabled: {
            control: 'boolean',
            description: 'When true, disables all interactions with button.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
                category: 'Attributes',
            },
        },
        hasSuffix: {
            control: 'boolean',
            description: 'When true, adds a icon to the end of the button.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
                category: 'Attributes',
            },
        },
        hasPrefix: {
            control: 'boolean',
            description: 'When true, adds a icon to the start of the button.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'false' },
                category: 'Attributes',
            },
        },
        type: {
            control: 'text',
            description: 'the type of button.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'submit' },
                category: 'Attributes',
            },
        },
        clicked: {
            control: 'event',
            description: 'on click functionality.',
            table: {
                type: { summary: 'void' },
                defaultValue: { summary: () => { } },
                category: 'Events',
            },
        },
        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',
            },
        },
    }
};
// Template for the Stencil button component
const Template = (args) => html `
  <gov-button 
    .clicked=${args.clicked} 
    type="${args.type}" 
    size="${args.size}" 
    variant="${args.variant}" 
    label="${args.label}" 
    ?disabled=${args.disabled}
    type-variant="button"
    animation-delay="${args.animationDelay}"
    animation="${args.animation}"
    animation-speed="${args.animationSpeed}"
    has-prefix=${args.hasPrefix}
    has-suffix=${args.hasSuffix}
    icon=${args.icon}
    icon-size=${args.iconSize}
    >
  </gov-button>
`;
// Default story for the button
export const Default = Template.bind({});
Default.args = {
    size: 'sm',
    variant: 'primary',
    label: 'Click Me!',
    disabled: false,
    type: 'submit',
    clicked: (_) => { alert('Clicked'); },
    animation: '',
    animationDelay: '',
    animationSpeed: '',
    hasSuffix: false,
    hasPrefix: false,
    icon: '',
    iconSize: '',
};
/** Disabled button. */
export const Disabled = Template.bind({});
Disabled.args = {
    size: 'lg',
    variant: 'primary',
    label: 'Disabled',
    disabled: true,
    typeVariant: 'button',
};
/** Large (lg) button */
export const Large = Template.bind({});
Large.args = {
    size: 'lg',
    variant: 'primary',
    label: 'Large',
    disabled: false,
    clicked: (_) => { alert('Large'); },
    typeVariant: 'button',
};
/** Full width (extended) button */
export const Extended = Template.bind({});
Extended.args = {
    size: 'extended',
    variant: 'primary',
    label: 'Extended',
    disabled: false,
    clicked: (_) => { alert('Extended'); },
    typeVariant: 'button',
};
const Varients = (args) => html `
 
<gov-button size="${args.size}" variant="primary" label="Primary">
</gov-button>
  <gov-button size="${args.size}" variant="secondary" label="Secondary">
  </gov-button>
  <gov-button size="${args.size}" variant="info" label="Info">
  </gov-button>
  <gov-button size="${args.size}" variant="success" label="Success">
  </gov-button>
  <gov-button size="${args.size}" variant="warning" label="Warning">
  </gov-button>
  <gov-button size="${args.size}" variant="danger" label="Danger">
  </gov-button>
  <gov-button size="${args.size}" variant="white" label="White">
  </gov-button>

`;
/** A button with a different color varient. Available color varients are : *Primary ,Secondary ,Info ,Success ,Warning ,Danger ,White.* */
export const ColorVarient = Varients.bind({});
ColorVarient.args = {
    size: 'sm',
    clicked: (_) => { alert('ColorVarient'); }
};
// Custom Template for Display
ColorVarient.parameters = {
    docs: {
        source: {
            code: `<gov-button size="${ColorVarient.args.size}" variant="primary" label="Primary"></gov-button>
<gov-button size="${ColorVarient.args.size}" variant="secondary" label="Secondary"></gov-button>
<gov-button size="${ColorVarient.args.size}" variant="info" label="Info"></gov-button>
<gov-button size="${ColorVarient.args.size}" variant="warning" label="Warning"></gov-button>
<gov-button size="${ColorVarient.args.size}" variant="danger" label="Danger"></gov-button>
<gov-button size="${ColorVarient.args.size}" variant="white" label="White"></gov-button>
<gov-button size="${ColorVarient.args.size}" variant="success" label="Success"></gov-button>
`,
        },
    },
};
//# sourceMappingURL=gov-button.button.stories.js.map