@dcrackel/meyersquaredui 1.0.98 → 1.0.100

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.98",
+  "version": "1.0.100",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",

package/src/index.js

@@ -6,6 +6,7 @@ export { default as InputField } from './stories/Atoms/InputField/InputField.vue
 export { default as SearchBox } from './stories/Molecules/Searchbox/SearchBox.vue';
 export { default as Calendar } from './stories/Molecules/Calendar/Calendar.vue';
 export { default as Mapbox } from './stories/Molecules/Mapbox/Mapbox.vue';
+export { default as ProgressTracker } from './stories/Molecules/ProgressTracker/ProgressTracker.vue';
 
 export { default as PageHeader } from './stories/Organisms/Headers/PageHeader/PageHeader.vue'
 export { default as HostColumn } from './stories/Organisms/Column/HostColumn.vue'

package/src/stories/Molecules/ProgressTracker/ProgressTracker.stories.js

@@ -0,0 +1,26 @@
+import ProgressTracker from './ProgressTracker.vue';
+
+export default {
+    title: 'Molecules/ProgressTracker/ProgressTracker',
+    component: ProgressTracker,
+};
+
+const Template = (args) => ({
+    components: { ProgressTracker },
+    setup() {
+        return { args };
+    },
+    template: '<ProgressTracker v-bind="args" />',
+});
+
+export const ActiveEvent = Template.bind({});
+ActiveEvent.args = {
+    currentPhase: 2, // Example: "Bracket" phase
+    isEventComplete: false,
+};
+
+export const CompletedEvent = Template.bind({});
+CompletedEvent.args = {
+    currentPhase: 3, // All phases are complete
+    isEventComplete: true,
+};

package/src/stories/Molecules/ProgressTracker/ProgressTracker.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="flex items-center justify-between">
+    <div
+        v-for="(phase, index) in phases"
+        :key="index"
+        class="flex items-center flex-grow"
+        @mouseover="handleMouseOver(index)"
+        @mouseout="handleMouseOut"
+        @click="handlePhaseClick(index)"
+    >
+      <!-- Clickable Icon and Label -->
+      <div class="flex flex-col items-center hover:cursor-pointer">
+        <div
+            class="w-8 h-8 flex items-center justify-center rounded-full transition-all duration-300 border-2 border-accent"
+            :class="{
+            'border-accent': isPhaseActive(index),
+            'border-gray-300': !isPhaseActive(index),
+            'hover:bg-accent': hoveredPhase === index,
+            'hover:bg-gray-200': hoveredPhase === index && !isPhaseActive(index),
+          }"
+        >
+          <i :class="phase.icon"></i>
+        </div>
+        <BaseText
+            tag="p"
+            size="sm"
+            weight="normal"
+            class="mt-2 transition-all duration-300"
+            :class="{
+            'font-bold text-accent': isPhaseActive(index),
+            'text-gray-600': !isPhaseActive(index),
+            'hover:text-accent': hoveredPhase === index,
+          }"
+        >
+          {{ phase.label }}
+        </BaseText>
+      </div>
+
+      <!-- Dynamic Line between icons -->
+      <div
+          v-if="index < phases.length - 1"
+          class="flex-grow h-1 mx-2"
+          :class="{
+          'bg-accent': isPhaseActive(index + 1),
+          'bg-gray-300': !isPhaseActive(index + 1),
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'ProgressTracker',
+  components: {
+    BaseText
+  },
+  props: {
+    currentPhase: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    isEventComplete: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      hoveredPhase: null, // Variable to store which phase is hovered over
+    };
+  },
+  computed: {
+    phases() {
+      return [
+        { 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' },
+      ];
+    },
+  },
+  methods: {
+    isPhaseActive(index) {
+      return this.isEventComplete || index <= this.currentPhase;
+    },
+    handleMouseOver(index) {
+      this.hoveredPhase = index;
+    },
+    handleMouseOut() {
+      this.hoveredPhase = null;
+    },
+    handlePhaseClick(index) {
+      // Emit the clicked phase to the parent
+      this.$emit('phase-clicked', index);
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Cards/FencerListCard/FencerListCard.vue

@@ -79,7 +79,7 @@ export default {
     },
     showHRRating: {
       type: Boolean,
-      default: false,
+      default: true,
     },
   },
   emits: ['grid-card-click'],