@dcrackel/meyersquaredui 1.0.37 → 1.0.38

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

@@ -1,7 +1,37 @@
 <template>
-  <div class="m-0 w-full">
+  <div class="m-0 w-full bg-secondary">
     <Header />
     <HeroBanner :title="title" :buttonLabel="buttonLabel" :description="description" :imageSrc="imageSrc" />
+    <GridLayout
+        :cardComponent="TournamentCard"
+        :items="limitedTournaments"
+        :maxColumns="3"
+        moreButtonLabel="See All Tournaments"
+        title="Upcoming"
+    />
+    <SingleButtonBanner
+        buttonLabel="Learn More"
+        description="Look for a Club? <br> We can help."
+        imageUrl="https://via.placeholder.com/1200x400"
+    />
+    <GridLayout
+        :cardComponent="FencerCard"
+        :items="topFencers"
+        :maxColumns="5"
+        :mobileHorizontal="true"
+        moreButtonLabel="Leaderboards"
+        title="Top Fencers"
+    />
+    <DoubleButtonBanner title="How Does Meyer Squared work?" button-label-two="Run a tournament" button-label-one="Submit Results" image-src="" />
+    <GridLayout
+        :cardComponent="ArticleCard"
+        :items="articles"
+        :maxColumns="3"
+        :mobileHorizontal="true"
+        moreButtonLabel="See More"
+        title="Interesting Articles"
+    />
+    <Footer />
   </div>
 </template>
 
@@ -9,10 +39,24 @@
 <script>
 import HeroBanner from "../../Organisms/HeroBanners/HomePage/HeroBanner.vue";
 import Header from "../../Organisms/Headers/Header.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 GridLayout from "../../Organisms/GridLayout/GridLayout.vue";
+import SingleButtonBanner from "../../Organisms/SectionBanners/SingleButtonBanner/SingleButtonBanner.vue";
+import DoubleButtonBanner from "../../Organisms/SectionBanners/DoubleButtonBanner/DoubleButtonBanner.vue";
+import Footer from "../../Organisms/Footer/Footer.vue";
 
 export default {
   name: 'TestLayoutPage',
   components: {
+    Footer,
+    DoubleButtonBanner,
+    SingleButtonBanner,
+    GridLayout,
+    TournamentCard,
+    ArticleCard,
+    FencerCard,
     Header,
     HeroBanner,
   },
@@ -32,6 +76,34 @@ export default {
     imageSrc: {
       type: String,
       default: 'https://meyersquared.com/images/Banner2.png'
+    },
+    tournaments: {
+      type: Array,
+      default: () => []
+    },
+    articles: {
+      type: Array,
+      default: () => []
+    },
+    topFencers: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    ArticleCard() {
+      return ArticleCard
+    },
+    FencerCard() {
+      return FencerCard
+    },
+    limitedTournaments() { 
+      return this.tournaments.slice(0, 6);
+    }
+  },
+  data() {
+    return {
+      TournamentCard: TournamentCard
     }
   }
 }

package/src/components/HelloWorld.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>