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

export default {
    title: 'Organisms/ScoreBoardParts/FencerNameBar',
    component: FencerNameBar,
    tags: ['autodocs'],
    args: {
        bout: getPoolsWithBouts[0],
        hostingClubColors: {
            Color1: 'red',
            Color2: 'blue'
        },
    },
    argTypes: {
        bout: {
            control: 'object'
        },
        hostingClubColors: {
            control: 'object'
        },
    }
};

export const Default = {
    args: {
        bout: getPoolsWithBouts[1],
        hostingClubColors: {
            Color1: 'red',
            Color2: 'blue'
        }
    }
};

export const BlueAndGreen = {
    args: {
        bout: { "updateBout": { "TimerStatus": "stopped", "BoutId": 1944, "PoolId": 139, "EventId": 6, "Person1Id": 1, "Person2Id": 10, "Status": "Active", "Score1": 2, "Score2": 0, "Started": "2024-07-16T15:50:26.000Z", "Ended": null, "TimeLeft": 90, "CurrentPass": 3, "RoundLabel": null, "DEBoutId": null, "DENextBoutId": null, "RefereeId": null, "createdAt": "2024-07-16T15:49:16.000Z", "updatedAt": "2024-07-16T23:20:19.000Z", "Person1": { "PersonId": 1, "DisplayName": "Dave Smith", "ClubId": 4, "Images": [ { "ImageId": 7, "URL": "https://randomuser.me/api/portraits/men/22.jpg" } ], "Club": { "Name": "Guardians of the Guard", "Color1": "purple", "Color2": "orange" }, "EventPersons": [ { "DEPosition": null } ] }, "Person2": { "PersonId": 10, "DisplayName": "Melissa Jones", "ClubId": 4, "Images": [ { "ImageId": 21, "URL": "https://randomuser.me/api/portraits/women/9.jpg" } ], "Club": { "Name": "Guardians of the Guard" }, "EventPersons": [ { "DEPosition": null } ] } } },
        hostingClubColors: {
            Color1: 'blue',
            Color2: 'green'
        }
    }
};