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

export default {
    title: 'Organisms/Columns/HostColumn',
    component: HostColumn,
};

const Template = (args, { argTypes }) => ({
    components: { HostColumn },
    props: Object.keys(argTypes),
    template: '<HostColumn v-bind="$props" @rules-click="onRulesClick" />',
});

export const Default = Template.bind({});
Default.args = {
    organizerName: 'Bob Smith',
    organizerPortrait: 'https://via.placeholder.com/150',
    fencersGoing: 10,
    bookmarksCount: 25,
    apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q'
};

export const WithFewFencers = Template.bind({});
WithFewFencers.args = {
    organizerName: 'Jane Doe',
    organizerPortrait: 'https://via.placeholder.com/150',
    fencersGoing: 2,
    bookmarksCount: 5,
    apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q'
};

export const NoFencersOrBookmarks = Template.bind({});
NoFencersOrBookmarks.args = {
    organizerName: 'Mark Johnson',
    organizerPortrait: 'https://via.placeholder.com/150',
    fencersGoing: 0,
    bookmarksCount: 0,
    apiKey: 'AIzaSyC5kuJeMLopgjHDqsQPjRZ6Fkg3PFydw9Q'
};