@dcrackel/meyersquaredui/src/stories/Organisms/HeroBanners/HomePage/HeroBanner.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 HeroBanner from './HeroBanner.vue';

export default {
    title: 'Organisms/HeroBanners/HomePage/HeroBanner',
    component: HeroBanner,
    argTypes: {
        imageSrc: { control: 'text', description: 'The image displayed in the hero banner' },
        title: { control: 'text', description: 'Main title text' },
        description: { control: 'text', description: 'Subtitle or description text' },
        buttonLabel: { control: 'text', description: 'Label for the button' },
        'button-click': { action: 'button-click' },
    },
};

const Template = (args) => ({
    components: { HeroBanner },
    setup() {
        return { args };
    },
    template: '<HeroBanner v-bind="args" @button-click="args[\'button-click\']" />',
});

export const DefaultHeroBanner = Template.bind({});
DefaultHeroBanner.args = {
    imageSrc: 'https://meyersquaredimages.com/images/banners/largebanner01.jpg',
    title: 'Find your next HEMA Touranment!',
    description: '',
    buttonLabel: 'Get Started',
};