@dcrackel/meyersquaredui/src/stories/Atoms/BaseButton/BaseButton.stories.js

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import BaseButton from './BaseButton.vue';
import Icon from '../../Atoms/Icon/Icon.vue';

export default {
    title: 'Atoms/BaseButton',
    component: BaseButton,
    args: {
        label: 'Click Me',
        color: 'primary',
        border: 'none',
        padding: 'px-4 py-2',
        icon: null, // Default: no icon
    },
    argTypes: {
        label: {
            control: 'text',
            description: 'The text inside the button',
        },
        color: {
            control: {
                type: 'select',
                options: ['primary', 'secondary', 'accent'],
            },
            description: 'The text color of the button',
        },
        border: {
            control: {
                type: 'select',
                options: ['none', 'primary', 'secondary', 'accent', 'gradient1', 'gradient2'],
            },
            description: 'The border style of the button',
        },
        altText: {
            control: 'text',
            description: 'Optional alt text for accessibility (aria-label)',
        },
        padding: {
            control: 'text',
            description: 'Custom padding classes for the button (e.g., "px-6 py-3")',
        },
        icon: {
            control: 'none', // We will pass the actual component with props
            description: 'Optional icon component to render inside the button',
        },
        hoverColor: {
            control: {
                type: 'select',
                options: ['primary', 'secondary', 'accent', ''],
            },
            description: 'Optional hover color for the text inside the button',
        },
    },
};

const Template = (args) => ({
    components: { BaseButton, Icon },
    setup() {
        // Attach icon component to args
        args.icon = Icon;
        return { args };
    },
    template: '<BaseButton v-bind="args" />',
});

export const Default = Template.bind({});
Default.args = {
    label: 'Click Me',
    color: 'secondary',
    backgroundColor: 'primary',
    border: 'none',
    padding: 'px-4 py-2',
    icon: null,
};

export const ButtonWithIcon = Template.bind({});
ButtonWithIcon.args = {
    label: 'Icon Button',
    color: 'primary',
    backgroundColor: 'secondary',
    hoverColor: 'accent',
    border: 'accent',
    padding: 'px-4 py-2',
    iconName: 'fa-thin fa-arrow-right',
    iconColor: 'primary',
    iconSize: 'lg'
};