@dcrackel/meyersquaredui/src/stories/Organisms/Tableau/TableauFencerCard/TableauFencerCard.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 TableauFencerCard from './TableauFencerCard.vue';
export default {
    title: 'Organisms/Tableau/TableauFencerCard',
    component: TableauFencerCard,
    args: {
        fencer: {
            DisplayName: 'John Doe',
            Club: {
                Name: 'Fencing Club'
            },
            Images: [
                {
                    URL: 'https://randomuser.me/api/portraits/men/91.jpg'
                }
            ]
        },
        score: '15',
        position: '1',
        color: 'blue',
        scoreColor: 'bg-winGreen',
        large: true
    },
    argTypes: {
        fencer: {
            control: 'object',
            description: 'Object containing fencer details including name, club, and images'
        },
        score: {
            control: 'text',
            description: 'Score of the fencer'
        },
        position: {
            control: 'text',
            description: 'Position of the fencer in the bracket'
        },
        color: {
            control: 'color',
            description: 'Color for the position background'
        },
        scoreColor: {
            control: 'color',
            description: 'Color for the score background'
        },
        large: {
            control: 'boolean',
            description: 'Boolean to determine the size of the card'
        }
    }
};

export const Default = {
    args: {
        fencer: {
            DisplayName: 'John Doe',
            Club: {
                Name: 'Fencing Club'
            },
            Images: [
                {
                    URL: 'https://randomuser.me/api/portraits/men/50.jpg'
                }
            ]
        },
        score: '15',
        position: '1',
        color: 'blue',
        scoreColor: 'bg-winGreen',
        large: true
    }
};

export const Small = {
    args: {
        fencer: {
            DisplayName: 'Jane Doe',
            Club: {
                Name: 'Fencing Club'
            },
            Images: [
                {
                    URL: 'https://via.placeholder.com/40'
                }
            ]
        },
        score: '12',
        position: '2',
        color: 'red',
        scoreColor: 'bg-lossRed',
        large: false
    }
};