@dcrackel/meyersquaredui 1.0.111 → 1.0.113

package/dist/style.css

@@ -1 +1 @@
-.border-gradient-rounded-1{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#ff7a00,#a3412a);background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:background-size .5s ease-in-out,color .5s ease-in-out}.border-gradient-rounded-1:hover{background:linear-gradient(to right,#ff7a00,#ffa238);color:#fff}.border-gradient-rounded-2{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#009dff,#25e07c);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.border-gradient-rounded-2:hover{background:linear-gradient(to right,#009dff,#25e07c);color:#fff}@keyframes slideDown-07413d1f{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideUp-07413d1f{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.animate-slideDown[data-v-07413d1f]{animation:slideDown-07413d1f .5s ease forwards}.animate-slideUp[data-v-07413d1f]{animation:slideUp-07413d1f .5s ease forwards}section[data-v-bae6ab08]{max-width:150px}
+.border-gradient-rounded-1{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#ff7a00,#a3412a);background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:background-size .5s ease-in-out,color .5s ease-in-out}.border-gradient-rounded-1:hover{background:linear-gradient(to right,#ff7a00,#ffa238);color:#fff}.border-gradient-rounded-2{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#009dff,#25e07c);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.border-gradient-rounded-2:hover{background:linear-gradient(to right,#009dff,#25e07c);color:#fff}@keyframes slideDown-07413d1f{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideUp-07413d1f{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.animate-slideDown[data-v-07413d1f]{animation:slideDown-07413d1f .5s ease forwards}.animate-slideUp[data-v-07413d1f]{animation:slideUp-07413d1f .5s ease forwards}.tooltip[data-v-22381b4e]{transition:opacity .3s ease-in-out,transform .3s ease-in-out}section[data-v-bae6ab08]{max-width:150px}

package/package.json

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

package/src/mocks/getPoolsWithPeople.js

@@ -1,6 +1,8 @@
 const getPoolsWithPeople =
     {
         "message": "Pools retrieved",
+        "tournamentId": 63,
+        "eventStatus": "planning",
         "pools": [
             {
                 "PoolId": 180,
@@ -54,17 +56,17 @@ const getPoolsWithPeople =
                         "DEPosition": null,
                         "Status": "Absent",
                         "Person": {
-                            "PersonId": 49,
-                            "DisplayName": "Jack Seyler",
-                            "ClubId": 43,
+                            "PersonId": 37,
+                            "DisplayName": "Brian Thiessen",
+                            "ClubId": 38,
                             "ShowData": true,
                             "Images": [],
                             "Club": {
-                                "Name": "Ars Gladii"
+                                "Name": "Steelhead Western Martial Arts"
                             },
                             "HEMARatings": [
                                 {
-                                    "Rating": 1282.1
+                                    "Rating": 1114.2
                                 }
                             ],
                             "M2Ratings": []
@@ -88,7 +90,9 @@ const getPoolsWithPeople =
                             "M2Ratings": []
                         }
                     }
-                ]
+                ],
+                "poolStrength": 0,
+                "poolStrengthInd": 0
             },
             {
                 "PoolId": 181,
@@ -100,6 +104,28 @@ const getPoolsWithPeople =
                 "Status": "planning",
                 "Updated": "2024-10-16T13:38:51.000Z",
                 "EventPersons": [
+                    {
+                        "EventId": 26,
+                        "PoolPosition": 2,
+                        "DEPosition": null,
+                        "Status": "Absent",
+                        "Person": {
+                            "PersonId": 49,
+                            "DisplayName": "Jack Seyler",
+                            "ClubId": 43,
+                            "ShowData": true,
+                            "Images": [],
+                            "Club": {
+                                "Name": "Ars Gladii"
+                            },
+                            "HEMARatings": [
+                                {
+                                    "Rating": 1282.1
+                                }
+                            ],
+                            "M2Ratings": []
+                        }
+                    },
                     {
                         "EventId": 26,
                         "PoolPosition": 6,
@@ -157,30 +183,10 @@ const getPoolsWithPeople =
                             "HEMARatings": [],
                             "M2Ratings": []
                         }
-                    },
-                    {
-                        "EventId": 26,
-                        "PoolPosition": 2,
-                        "DEPosition": null,
-                        "Status": "Absent",
-                        "Person": {
-                            "PersonId": 37,
-                            "DisplayName": "Brian Thiessen",
-                            "ClubId": 38,
-                            "ShowData": true,
-                            "Images": [],
-                            "Club": {
-                                "Name": "Steelhead Western Martial Arts"
-                            },
-                            "HEMARatings": [
-                                {
-                                    "Rating": 1114.2
-                                }
-                            ],
-                            "M2Ratings": []
-                        }
                     }
-                ]
+                ],
+                "poolStrength": 0,
+                "poolStrengthInd": 0
             }
         ],
         "eventRules": [

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

@@ -3,6 +3,11 @@ 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) => ({
@@ -13,21 +18,44 @@ const Template = (args) => ({
     template: '<ProgressTracker v-bind="args" />',
 });
 
-export const ActiveEvent = Template.bind({});
-ActiveEvent.args = {
-    currentPhase: 2, // Example: "Bracket" phase
+export const Default = Template.bind({});
+Default.args = {
+    currentPhase: 2, // Example: Pool Results
+    highlightPhase: 1, // Example: Pools (User viewing Pools 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' },
+    ],
 };
 
-export const CompletedEvent = Template.bind({});
-CompletedEvent.args = {
-    currentPhase: 3,
+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: 'Demo Pools', icon: 'fa-kit fa-longsword' },
+        { 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' },
     ],
-    isEventComplete: true,
 };

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

@@ -29,11 +29,11 @@
         <BaseText
             tag="p"
             size="sm"
-            :weight="currentPhase === index ? 'bold' : 'normal'"
+            :weight="highlightPhase === index ? 'bold' : 'normal'"
             class="mt-2 transition-all duration-300"
             :class="{
-            'font-bold text-accent': isPhaseActive(index),
-            'text-gray-600': !isPhaseActive(index),
+            'font-bold text-accent': isPhaseActive(index) || highlightPhase === index,
+            'text-gray-600': !isPhaseActive(index) && highlightPhase !== index,
             'hover:text-accent': hoveredPhase === index && index <= currentPhase,
           }"
         >
@@ -68,6 +68,10 @@ export default {
       required: true,
       default: 0,
     },
+    highlightPhase: {
+      type: Number,
+      default: null,
+    },
     isEventComplete: {
       type: Boolean,
       default: false,

package/src/stories/Molecules/ToolTip/ToolTip.stories.js

@@ -0,0 +1,55 @@
+import Tooltip from './Tooltip.vue';
+
+
+export default {
+    title: 'Molecules/Tooltip/Tooltip',
+    component: Tooltip,
+    argTypes: {
+        text: { control: 'text', description: 'The text shown inside the tooltip.' },
+        position: {
+            control: {
+                type: 'select',
+                options: ['top', 'bottom', 'left', 'right'],
+            },
+            description: 'Position of the tooltip relative to the element.',
+        },
+    },
+};
+
+const Template = (args) => ({
+    components: { Tooltip },
+    setup() {
+        return { args };
+    },
+    template: `
+    <div class="flex flex-col items-center space-y-8 p-8">
+      <Tooltip v-bind="args">
+        Hover over me!
+      </Tooltip>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    text: 'This is a tooltip!',
+    position: 'top',
+};
+
+export const BottomTooltip = Template.bind({});
+BottomTooltip.args = {
+    text: 'Tooltip on the bottom!',
+    position: 'bottom',
+};
+
+export const LeftTooltip = Template.bind({});
+LeftTooltip.args = {
+    text: 'Tooltip on the left!',
+    position: 'left',
+};
+
+export const RightTooltip = Template.bind({});
+RightTooltip.args = {
+    text: 'Tooltip on the right!',
+    position: 'right',
+};

package/src/stories/Molecules/ToolTip/ToolTip.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="relative inline-block" @mouseover="showTooltip" @mouseleave="hideTooltip" @click="toggleTooltip" @touchstart="toggleTooltip">
+    <slot></slot>
+    <div
+        v-if="visible"
+        class="absolute bg-black text-white p-2 rounded-md text-xs z-50 transition-opacity duration-300 ease-in-out opacity-80"
+        :class="[positionClass, width]"
+    >
+      <span v-html="text"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tooltip',
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    width: {
+      type: String,
+      default: 'w-full',
+    },
+    position: {
+      type: String,
+      default: 'top',
+      validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value),
+    }
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  computed: {
+    positionClass() {
+      switch (this.position) {
+        case 'top':
+          return 'bottom-full left-1/2 transform -translate-x-1/2 mb-2';
+        case 'bottom':
+          return 'top-full left-1/2 transform -translate-x-1/2 mt-2';
+        case 'left':
+          return 'right-full top-1/2 transform -translate-y-1/2 mr-2';
+        case 'right':
+          return 'left-full top-1/2 transform -translate-y-1/2 ml-2';
+        default:
+          return 'bottom-full left-1/2 transform -translate-x-1/2 mb-2';
+      }
+    }
+  },
+  methods: {
+    showTooltip() {
+      this.visible = true;
+    },
+    hideTooltip() {
+      this.visible = false;
+    },
+    toggleTooltip() {
+      this.visible = !this.visible;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tooltip {
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+</style>

package/src/stories/Organisms/GridTabs/GridTabs.stories.js

@@ -1,6 +1,5 @@
 import TabGrid from './GridTabs.vue';
 import mockGetPoolsWithPeople from '../../../mocks/getPoolsWithPeople.js';
-
 export default {
     title: 'Organisms/GridTabs/GridTabs',
     component: TabGrid,
@@ -8,8 +7,6 @@ export default {
         pools: { control: 'array' }
     }
 };
-
-// Template for the story
 const Template = (args) => ({
     components: { TabGrid },
     setup() {
@@ -17,7 +14,6 @@ const Template = (args) => ({
     },
     template: '<TabGrid v-bind="args" />'
 });
-
 export const Default = Template.bind({});
 Default.args = {
     pools: mockGetPoolsWithPeople.pools

package/src/stories/Organisms/GridTabs/GridTabs.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="w-full rounded-lg">
     <!-- Grid Title -->
-    <div class="max-w-[1200px] w-full flex pt-6 ml-4 mb-6">
+    <div class="max-w-[1200px] w-full flex justify-between mx-auto py-8 pl-4 rounded-tr-lg rounded-tl-lg">
       <BaseText color="primary" size="xl" tag="h3" weight="bold">{{ `Fencers in ${pools[selectedTab].Name}` }}</BaseText>
+      <div class="flex">
+        <BaseText color="primary" size="xl" tag="h3" weight="bold">{{ `${pools[selectedTab].poolStrengthInd} Strength Indicator` }}</BaseText>
+        <Tooltip :text="tooltipContent" width="w-[500px]" position="left">
+          <Icon icon="fa-circle-info" color="primary" size="md" class="hidden md:block ml-2" />
+        </Tooltip>
+      </div>
     </div>
 
     <!-- Tabs for Pools -->
@@ -40,10 +46,14 @@ import GridLayout from "../GridLayout/GridLayout.vue";
 import FencerListCard from "../Cards/FencerListCard/FencerListCard.vue";
 import BaseButton from "../../Atoms/BaseButton/BaseButton.vue";
 import BaseText from "../../Atoms/BaseText/BaseText.vue";
+import Icon from "../../Atoms/Icon/Icon.vue";
+import Tooltip from "../../Molecules/ToolTip/ToolTip.vue";
 
 export default {
   name: 'GridTabs',
   components: {
+    Tooltip,
+    Icon,
     BaseText,
     BaseButton,
     GridLayout,
@@ -65,7 +75,13 @@ export default {
   },
   data() {
     return {
-      selectedTab: 0
+      selectedTab: 0,
+      tooltipContent: `
+        <strong>Strength Indicator Explanation:</strong><br/>
+        - A negative score means this pool is weaker than the average.<br/>
+        - A positive score means this pool is stronger than the average.<br/><br/>
+        <em>Note:</em> A small difference is expected, as tournament organizers aim to separate club members for balanced competition.
+      `
     };
   },
   methods: {