@dcrackel/meyersquaredui 1.0.39 → 1.0.40

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="md:w-full mb-8">
+  <div v-if="isLoading" class="max-w-80 md:w-full mb-8">
+    <TournamentCardSkeleton />
+  </div>
+  <div v-if="!isLoading" class="max-w-80 md:w-full mb-8">
     <!-- Desktop Version -->
     <section class="hidden md:block">
       <img
@@ -57,10 +60,12 @@
 <script>
 import BaseText from "../../../Atoms/BaseText/BaseText.vue";
 import Icon from "../../../Atoms/Icon/Icon.vue";
+import TournamentCardSkeleton from "../Skeletons/TournamentCardSkeleton.vue";
 
 export default {
   name: 'TournamentCard',
   components: {
+    TournamentCardSkeleton,
     BaseText,
     Icon
   },
@@ -68,6 +73,10 @@ export default {
     data: {
       type: Object,
       required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
     }
   },
   data() {

package/src/stories/Organisms/GridLayout/GridLayout.stories.js

@@ -1,6 +1,10 @@
 import GridLayout from './GridLayout.vue';
 import TournamentCard from '../../Organisms/Cards/TournamentCard/TournamentCard.vue';
 import FencerCard from '../../Organisms/Cards/FencerCard/FencerCard.vue';
+import ArticleCard from '../../Organisms/Cards/ArticleCard/ArticleCard.vue';
+import mockTournaments from "../../../mocks/getTournamentsMock.js";
+import mockTopFencers from "../../../mocks/getTopFencers.js";
+import mockArticles from "../../../mocks/getArticles.js";
 
 export default {
     title: 'Organisms/Grids/GridLayout',
@@ -11,103 +15,6 @@ export default {
     },
 };
 
-// Mock Data for Tournaments
-const mockTournaments = [
-    {
-        image: 'https://meyersquared.com/images/Club1.jpg',
-        title: 'Catnip Cutlass',
-        location: 'Held at: Catnasioum Complex',
-        numberOfFencers: 120,
-        startDate: 'Jan 1, 2024',
-        endDate: 'Jan 3, 2024',
-    },
-    {
-        image: 'https://meyersquared.com/images/Club2.jpg',
-        title: 'Regional Qualifiers',
-        location: 'Los Angeles, CA',
-        numberOfFencers: 80,
-        startDate: 'Feb 10, 2024',
-        endDate: 'Feb 12, 2024',
-    },
-    {
-        image: 'https://meyersquared.com/images/Club9.png',
-        title: 'Open Tournament',
-        location: 'Chicago, IL',
-        numberOfFencers: 150,
-        startDate: 'Mar 5, 2024',
-        endDate: 'Mar 7, 2024',
-    },
-    {
-        image: 'https://meyersquared.com/images/Club4.jpg',
-        title: 'Fencing Championship',
-        location: 'Miami, FL',
-        numberOfFencers: 200,
-        startDate: 'Apr 15, 2024',
-        endDate: 'Apr 18, 2024',
-    },
-    {
-        image: 'https://meyersquared.com/images/Club8.png',
-        title: 'State Finals',
-        location: 'Houston, TX',
-        numberOfFencers: 95,
-        startDate: 'May 1, 2024',
-        endDate: 'May 3, 2024',
-    },
-    {
-        image: 'https://meyersquared.com/images/Club7.png',
-        title: 'International Cup',
-        location: 'San Francisco, CA',
-        numberOfFencers: 250,
-        startDate: 'Jun 20, 2024',
-        endDate: 'Jun 22, 2024',
-    },
-];
-
-// Mock Data for Fencers
-const mockFencers = [
-    {
-        portrait: 'https://via.placeholder.com/150',
-        displayName: 'John Doe',
-        clubName: 'Awesome Fencing Club',
-        m2Rating: 1250,
-        hrRating: 1100,
-    },
-    {
-        portrait: 'https://via.placeholder.com/150',
-        displayName: 'Jane Smith',
-        clubName: 'Elite Fencing Academy',
-        m2Rating: 1350,
-        hrRating: 1200,
-    },
-    {
-        portrait: 'https://via.placeholder.com/150',
-        displayName: 'Sam Johnson',
-        clubName: 'Fencing United',
-        m2Rating: 1150,
-        hrRating: 1050,
-    },
-    {
-        portrait: 'https://via.placeholder.com/150',
-        displayName: 'Alice Brown',
-        clubName: 'Warriors of Steel',
-        m2Rating: 1300,
-        hrRating: 1180,
-    },
-    {
-        portrait: 'https://via.placeholder.com/150',
-        displayName: 'Bob Davis',
-        clubName: 'Iron Swordsmen',
-        m2Rating: 1100,
-        hrRating: 980,
-    },
-    {
-        portrait: 'https://via.placeholder.com/150',
-        displayName: 'Emily Wilson',
-        clubName: 'Dragon Blades',
-        m2Rating: 1400,
-        hrRating: 1250,
-    },
-];
 
 // Template for Tournament Grid
 const Template = (args) => ({
@@ -144,5 +51,34 @@ FencerGrid.args = {
     moreButtonLabel: 'See All Fencers',
     maxColumns: 5,
     cardComponent: FencerCard,
-    items: mockFencers,
+    items: mockTopFencers,
+};
+
+export const FencerGridLoading = FencerTemplate.bind({});
+FencerGridLoading.args = {
+    title: 'Fencers',
+    moreButtonLabel: 'See All Fencers',
+    maxColumns: 5,
+    cardComponent: FencerCard,
+    items: mockTopFencers,
+    isLoading: true
+};
+
+export const ArticleGrid = FencerTemplate.bind({});
+ArticleGrid.args = {
+    title: 'Interesting Articles',
+    moreButtonLabel: 'See More',
+    maxColumns: 3,
+    cardComponent: ArticleCard,
+    items: mockArticles,
 };
+
+export const ArticleGridLoading = FencerTemplate.bind({});
+ArticleGridLoading.args = {
+    title: 'Interesting Articles',
+    moreButtonLabel: 'See More',
+    maxColumns: 3,
+    cardComponent: ArticleCard,
+    items: mockArticles,
+    isLoading: true
+};

package/src/stories/Organisms/GridLayout/GridLayout.vue

@@ -10,6 +10,7 @@
           :key="index"
           :data="item"
           :index="index"
+          :isLoading="isLoading"
       />
     </div>
   </section>
@@ -19,7 +20,7 @@
         border="primary"
         size="xs"
         color="primary"
-        hoverColor="accent"
+        hoverColor="secondary"
         :label="moreButtonLabel"
     />
   </div>
@@ -61,6 +62,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     gridClasses() {

package/src/stories/Templates/HomePage/HomePage.stories.js

@@ -25,3 +25,18 @@ export const Default = {
         articles: mockArticles,
     },
 };
+
+export const AllLoading = {
+    args: {
+        title: 'Discover, Compete, Connect',
+        description: 'Find tournaments, explore clubs, and track your progress.',
+        buttonLabel: 'Find Out More',
+        imageSrc: 'https://meyersquared.com/images/Banner2.png',
+        tournaments: mockTournaments,
+        topFencers: mockTopFencers,
+        articles: mockArticles,
+        tournamentsIsLoading: true,
+        topFencersIsLoading: true,
+        articlesIsLoading: true,
+    },
+};

package/src/stories/Templates/HomePage/HomePage.vue

@@ -6,6 +6,7 @@
         :cardComponent="TournamentCard"
         :items="limitedTournaments"
         :maxColumns="3"
+        :isLoading="articlesIsLoading"
         moreButtonLabel="See All Tournaments"
         title="Upcoming"
     />
@@ -19,6 +20,7 @@
         :items="topFencers"
         :maxColumns="5"
         :mobileHorizontal="true"
+        :isLoading="topFencersIsLoading"
         moreButtonLabel="Leaderboards"
         title="Top Fencers"
     />
@@ -28,6 +30,7 @@
         :items="articles"
         :maxColumns="3"
         :mobileHorizontal="true"
+        :isLoading="articlesIsLoading"
         moreButtonLabel="See More"
         title="Interesting Articles"
     />
@@ -81,14 +84,26 @@ export default {
       type: Array,
       default: () => []
     },
+    tournamentsIsLoading: {
+      type: Boolean,
+      default: false
+    },
     articles: {
       type: Array,
       default: () => []
     },
+    articlesIsLoading: {
+      type: Boolean,
+      default: false
+    },
     topFencers: {
       type: Array,
       default: () => []
-    }
+    },
+    topFencersIsLoading: {
+      type: Boolean,
+      default: false
+    },
   },
   computed: {
     ArticleCard() {