@dcrackel/meyersquaredui 1.0.39 → 1.0.41

package/src/stories/Organisms/Cards/Skeletons/TournamentCardSkeleton.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="md:w-full mb-8 animate-pulse">
+    <!-- Desktop Version Skeleton -->
+    <section class="hidden md:block">
+      <div class="w-full h-52 bg-gray-300 mb-2 rounded-md"></div>
+      <div class="w-3/4 h-6 bg-gray-300 mb-1 rounded"></div>
+      <div class="w-2/3 h-4 bg-gray-300 mb-2 rounded"></div>
+      <div class="flex items-center mb-1">
+        <div class="w-6 h-6 bg-gray-300 rounded-full mr-3"></div>
+        <div class="w-2/3 h-4 bg-gray-300 rounded"></div>
+      </div>
+      <div class="flex items-center">
+        <div class="w-6 h-6 bg-gray-300 rounded-full mr-3"></div>
+        <div class="w-2/3 h-4 bg-gray-300 rounded"></div>
+      </div>
+    </section>
+
+    <!-- Mobile Version Skeleton -->
+    <section class="md:hidden flex-col items-start gap-2 border-b border-borderGray">
+      <div class="flex flex-row">
+        <div class="w-28 h-16 bg-gray-300 rounded-md"></div>
+        <div class="flex flex-col h-16 justify-center pl-2">
+          <div class="w-3/4 h-6 bg-gray-300 rounded mb-1"></div>
+          <div class="w-1/2 h-4 bg-gray-300 rounded"></div>
+        </div>
+      </div>
+      <div class="flex justify-between pt-4 pb-2">
+        <div class="flex justify-start w-5/12">
+          <div class="w-2 h-2 bg-gray-300 rounded-full mr-1"></div>
+          <div class="w-2/3 h-4 bg-gray-300 rounded"></div>
+        </div>
+        <div class="flex justify-start mb-1 w-7/12">
+          <div class="w-2 h-2 bg-gray-300 rounded-full mr-1"></div>
+          <div class="w-2/3 h-4 bg-gray-300 rounded"></div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TournamentCardSkeleton',
+};
+</script>

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

@@ -1,5 +1,5 @@
 import TournamentCard from './TournamentCard.vue';
-
+import mockTournaments from "../../../../mocks/getTournamentsMock.js";
 export default {
     title: 'Organisms/Cards/TournamentCard',
     component: TournamentCard,
@@ -15,10 +15,12 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-    image: 'https://assets.simpleviewinc.com/simpleview/image/upload/c_fill,f_avif,h_800,q_65,w_1920/v1/clients/wausauwi/download_5__d27db8e0-a64a-4db5-8126-17033dab6712.jpg',
-    title: 'National Fencing Tournament',
-    location: 'New York City, NY',
-    startDate: 'Jan 1, 2024',
-    endDate: 'Jan 3, 2024',
-    numberOfFencers: 120,
+    data: mockTournaments[0],
+    isLoading: false
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+    data: mockTournaments[0],
+    isLoading: true
 };

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() {
@@ -75,13 +84,10 @@ export default {
       isImageError: false
     };
   },
-  mounted() {
-    console.log(this.data);
-  },
   computed: {
     image() {
-      return !this.isImageError && this.data.Images && this.data.Images.length > 0
-          ? this.data.Images[0].URL
+      return !this.isImageError && this.data.ImagesURLs && this.data.ImagesURLs.length > 0
+          ? this.data.ImagesURLs
           : 'https://via.placeholder.com/300x200';
     },
     fallbackStyle() {

package/src/stories/Organisms/Footer/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="flex flex-col bg-primary">
+  <section class="hidden md:flex flex-col bg-primary">
     <div class="h-20"></div>
 
     <section class="w-full hidden md:flex">
@@ -65,13 +65,50 @@
           </div>
         </div>
       </div>
-
     </section>
 
     <div class="h-32 border border-t mt-10 pb-10 border-lineGrey flex flex-col justify-center items-center">
       <BaseText color="secondary" size="sm" tag="p" weight="normal" class="text-center pt-4">© Copyright Meyer Squared 2024. All rights reserved.</BaseText>
     </div>
   </section>
+  <!-- mobile footer -->
+  <section class="flex flex-col items-center bg-primary pb-10">
+    <div class="h-8"></div>
+    <div class="w-full flex flex-col items-center">
+      <div class="w-full max-w-xs flex justify-between items-center">
+        <!-- Logo Container -->
+        <div class="flex justify-center w-1/2">
+          <img :src="logo" alt="Logo" class="w-[94px] h-[74px]" />
+        </div>
+        <!-- Links Container -->
+        <div class="flex flex-col w-1/2">
+          <BaseText color="secondary" size="md" tag="p" weight="normal" class="mb-2">Tournaments</BaseText>
+          <BaseText color="secondary" size="sm" tag="p" weight="normal" class="mb-2">Upcoming</BaseText>
+          <BaseText color="secondary" size="sm" tag="p" weight="normal" class="mb-2">Past</BaseText>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full flex flex-col items-center ">
+      <!-- Subscribe Section -->
+      <div class="w-full max-w-xs flex flex-col items-center pt-8">
+        <BaseText color="secondary" size="md" tag="p" weight="thin" class="pb-4 w-full">Subscribe for Updates</BaseText>
+        <InputField placeholder="Email" type="email" class="w-full" />
+      </div>
+
+      <!-- Follow Us Section -->
+      <div class="w-full max-w-xs flex flex-col items-center pt-8">
+        <BaseText color="secondary" size="md" tag="p" weight="thin" class="pb-2">Follow Us</BaseText>
+        <div class="flex justify-center">
+          <Icon type="fa-brands" icon="fa-facebook" color="secondary" size="lg" class="mr-4" />
+          <Icon type="fa-brands" icon="fa-discord" color="secondary" size="lg" class="mr-4" />
+          <Icon type="fa-brands" icon="fa-instagram" color="secondary" size="lg" class="mr-4" />
+          <Icon type="fa-brands" icon="fa-youtube" color="secondary" size="lg" class="mr-4" />
+        </div>
+      </div>
+    </div>
+  </section>
+
 </template>
 
 <script>

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,16 +10,17 @@
           :key="index"
           :data="item"
           :index="index"
+          :isLoading="isLoading"
       />
     </div>
   </section>
-  <div class="w-full flex justify-center pb-10 pt-10 md:pt-14">
+  <div class="w-full flex justify-center pb-28 pt-10 md:pt-14">
     <BaseButton
         backgroundColor="secondary"
         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/Organisms/SectionBanners/DoubleButtonBanner/DoubleButtonBanner.vue

@@ -7,7 +7,6 @@
   </section>
 
   <section class="relative w-full h-3/4 flex justify-center bg-primary m-0">
-    <!-- Spacer -->
     <div class="w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
 
     <!-- Image -->
@@ -62,16 +61,36 @@
 
   <!-- Mobile Overlay -->
   <section class="flex justify-center md:hidden text-left bg-primary w-full">
-    <div class="w-full px-6 py-8 text-center">
+    <div class="w-full px-6 py-8 text-center flex flex-col justify-center items-center">
       <BaseText color="secondary" tag="h1" size="2xl" weight="bold" class="mb-2">{{ title }}</BaseText>
       <BaseText color="secondary" tag="p" size="sm" weight="normal" class="mb-6">{{ description }}</BaseText>
       <BaseButton
-          :label="buttonLabel"
+          :label="buttonLabelOne"
           size="xs"
           color="secondary"
           border="gradient1"
-          class="w-1/2 m-auto"
-          @click="onClick"
+          weight="normal"
+          align="between"
+          class="mb-4 w-full h-16 pl-8"
+          iconName="fa-arrow-right-long"
+          iconColor="secondary"
+          iconSize="lg"
+          iconType="fa-thin"
+          @click="onClickOne"
+      />
+      <BaseButton
+          :label="buttonLabelTwo"
+          size="xs"
+          color="secondary"
+          border="gradient2"
+          weight="normal"
+          class="w-full h-16 pl-8"
+          iconName="fa-arrow-right-long"
+          iconColor="secondary"
+          iconSize="lg"
+          iconType="fa-thin"
+          align="between"
+          @click="onClickOne"
       />
     </div>
   </section>

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() {