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

export default {
    title: 'Organisms/SectionBanner/SingleButtonBanner',
    component: SingleButtonBanner,
    argTypes: {
        buttonClick: { action: 'button-click' },
        imageUrl: { control: 'text', description: 'Background image URL' },
        description: { control: 'text', description: 'Overlay text' },
        buttonLabel: { control: 'text', description: 'Label for the button' },
    },
};

const Template = (args) => ({
    components: { SingleButtonBanner },
    setup() {
        return { args };
    },
    template: '<SingleButtonBanner v-bind="args" @button-click="args.buttonClick" />',
});

export const Default = Template.bind({});
Default.args = {
    imageUrl: 'https://via.placeholder.com/1200x400',
    description: 'Look for a Club? <br> We can help.',
    buttonLabel: 'Learn More',
};


export const SecondExample = Template.bind({});
SecondExample.args = {
    imageUrl: 'https://via.placeholder.com/1200x400',
    description: 'Banner Here',
    buttonLabel: 'Learn More',
};