@dcrackel/meyersquaredui/src/stories/Molecules/ProgressTracker/ProgressTracker.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 ProgressTracker from './ProgressTracker.vue';

export default {
    title: 'Molecules/ProgressTracker/ProgressTracker',
    component: ProgressTracker,
    argTypes: {
        currentPhase: { control: { type: 'number', min: 0, max: 4 } },
        highlightPhase: { control: { type: 'number', min: 0, max: 4 } },
        isEventComplete: { control: 'boolean' },
    },
};

const Template = (args) => ({
    components: { ProgressTracker },
    setup() {
        return { args };
    },
    template: '<ProgressTracker v-bind="args" />',
});

export const Default = Template.bind({});
Default.args = {
    currentPhase: 2, // Example: Pool Results
    highlightPhase: 1, // Example: Pools (User viewing Pools page)
    livePhase: 1,
    isEventComplete: false, //fa-kit fa-longsword
    phases: [
        { label: 'Registration', icon: 'fa-solid fa-file-alt' },
        { label: 'Pools', icon: 'fa-regular fa-circle-dot' },
        { label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
        { label: 'Bracket', icon: 'fa-solid fa-sitemap' },
        { label: 'Final Result', icon: 'fa-solid fa-trophy' },
    ],
};

export const EventComplete = Template.bind({});
EventComplete.args = {
    currentPhase: 4, // Event is complete
    highlightPhase: 4, // User is viewing the final results
    isEventComplete: true,
    phases: [
        { label: 'Registration', icon: 'fa-solid fa-file-alt' },
        { label: 'Pools', icon: 'fa-kit fa-longsword' },
        { label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
        { label: 'Bracket', icon: 'fa-solid fa-sitemap' },
        { label: 'Final Result', icon: 'fa-solid fa-trophy' },
    ],
};

export const EarlyPhase = Template.bind({});
EarlyPhase.args = {
    currentPhase: 0, // Event hasn't started yet
    highlightPhase: 0, // Viewing registration page
    isEventComplete: false,
    phases: [
        { label: 'Registration', icon: 'fa-solid fa-file-alt' },
        { label: 'Pools', icon: 'fa-kit fa-longsword' },
        { label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
        { label: 'Bracket', icon: 'fa-solid fa-sitemap' },
        { label: 'Final Result', icon: 'fa-solid fa-trophy' },
    ],
};