@dcrackel/meyersquaredui/src/stories/Organisms/Cards/BoutCard/BoutCard.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 BoutCard from './BoutCard.vue';
import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';

export default {
    title: 'Organisms/Cards/BoutCard',
    component: BoutCard,
    tags: ['autodocs'],
    args: {
        bout: getPoolsWithBouts[0],
        isWaiting: false,
        timerStatus: 'stopped',
        hostingClubColors: {
            Color1: 'red',
            Color2: 'blue'
        },
    },
    argTypes: {
        bout: {
            control: 'object'
        },
        isSkeleton: {
            control: 'boolean'
        },
        timerStatus: {
            control: 'text'
        },
        hostingClubColors: {
            control: 'object'
        },

    }
};


export const Default = {
    args: {
        bout: getPoolsWithBouts[0],
        isWaiting: false,
        timerStatus: 'running',
        hostingClubColors: {
            Color1: 'red',
            Color2: 'blue'
        }
    }
};

export const Scheduled = {
    args: {
        bout: getPoolsWithBouts[4],
        isWaiting: false,
        timerStatus: 'stopped',
        hostingClubColors: {
            Color1: 'red',
            Color2: 'blue'
        }
    }
}

export const isWaiting = {
    args: {
        bout: getPoolsWithBouts[2],
        isWaiting: true,
        timerStatus: 'stopped',
        hostingClubColors: {
            Color1: 'red',
            Color2: 'blue'
        }
    }
}

export const Completed = {
    args: {
        bout: getPoolsWithBouts[2],
        isWaiting: false,
        timerStatus: 'stopped',
        hostingClubColors: {
            Color1: 'red',
            Color2: 'blue'
        }
    }
}

export const Skeleton = {
    args: {
        bout: getPoolsWithBouts[2],
        isWaiting: true,
        timerStatus: 'stopped',
        hostingClubColors: {
            Color1: 'red',
            Color2: 'blue'
        }
    }
}