@dcrackel/meyersquaredui/src/stories/Organisms/Tableau/TableauActiveBoutCard/TableauActiveBoutCard.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 TableauActiveBoutCard from './TableauActiveBoutCard.vue';
import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';

export default {
    title: 'Organisms/Tableau/TableauActiveBoutCard',
    component: TableauActiveBoutCard,
    tags: ['autodocs'],
    args: {
        bout: getDEWithBouts.pools[0].Bouts[0],
        hostingClubColors: getDEWithBouts.hostingClubColors,
        large: true,
        roundName: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
        bracketSize: 'Table of 8',
        highLight: false
    },
    argTypes: {
        bout: {
            control: 'object',
            description: 'Bout object containing fencers and scores'
        },
        hostingClubColors: {
            control: 'object',
            description: 'Colors for hosting club'
        },
        large: {
            control: 'boolean',
            description: 'Size of the card'
        },
        roundName: {
            control: 'text',
            description: 'Name of the round'
        },
        bracketSize: {
            control: 'text',
            description: 'Size of the bracket'
        },
        highLight: {
            control: 'boolean',
            description: 'Card is highlighed'
        }
    }
};

export const Default = {
    args: {
        bout: getDEWithBouts.pools[0].Bouts[2],
        hostingClubColors: getDEWithBouts.hostingClubColors,
        large: true,
        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
        bracketSize: 'Table of 8',
        highLight: false
    }
};

let modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Active' };
export const ActiveBout = {
    args: {
        bout: modifiedBout,
        hostingClubColors: getDEWithBouts.hostingClubColors,
        large: true,
        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
        bracketSize: 'Table of 8',
        highLight: false
    }
};

export const smallCardBout = {
    args: {
        bout: getDEWithBouts.pools[0].Bouts[1],
        hostingClubColors: getDEWithBouts.hostingClubColors,
        large: false,
        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
        bracketSize: 'Table of 8',
        highLight: false
    }
};

modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Completed' };
export const CompletedBout = {
    args: {
        bout: modifiedBout,
        large: true,
        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
        highLight: false
    }
};

modifiedBout = { ...getDEWithBouts.pools[0].Bouts[0], Status: 'Completed' };
export const ByeBout = {
    args: {
        bout: modifiedBout,
        hostingClubColors: getDEWithBouts.hostingClubColors,
        large: false,
        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
        bracketSize: 'Table of 8',
        highLight: false
    }
};