@dcrackel/meyersquaredui 1.0.37 → 1.0.39

package/src/stories/Organisms/SectionBanners/SingleButtonBanner/SingleButtonBanner.vue

@@ -0,0 +1,48 @@
+<template>
+  <section class="relative bg-cover bg-center h-80 max-w-[1200px] mx-auto rounded-lg overflow-hidden mb-10" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
+    <div class="flex flex-col justify-center items-center md:items-start h-full w-full text-center md:text-left px-6 md:px-20">
+      <BaseText color="secondary" tag="h3" size="5xl" weight="normal" class="mb-8" v-html="description" />
+      <BaseButton
+          :label="buttonLabel"
+          size="xs"
+          color="secondary"
+          border="gradient1"
+          @click="onClick"
+          class="w-40"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/BaseText/BaseText.vue';
+import BaseButton from '../../../Atoms/BaseButton/BaseButton.vue';
+
+export default {
+  name: 'SingleButtonBanner',
+  components: {
+    BaseText,
+    BaseButton,
+  },
+  props: {
+    imageUrl: {
+      type: String,
+      default: 'https://via.placeholder.com/1200x400', // Default background image
+    },
+    description: {
+      type: String,
+      default: 'Look for a Club? We can help.',
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Learn More',
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('button-click');
+    },
+  },
+};
+</script>
+

package/src/stories/Templates/HomePage/{TestPage.stories.js → HomePage.stories.js}

@@ -1,8 +1,10 @@
-import TestLayoutPage from './TestPage.vue';
-
+import HomePage from './HomePage.vue';
+import mockTournaments from "../../../mocks/getTournamentsMock.js";
+import mockTopFencers from "../../../mocks/getTopFencers.js";
+import mockArticles from "../../../mocks/getArticles.js";
 export default {
     title: 'Templates/TestLayoutPage',
-    component: TestLayoutPage,
+    component: HomePage,
     argTypes: {
         'button-click': { action: 'button-click' },
         title: { control: 'text', description: 'Title for the HeroBanner' },
@@ -18,5 +20,8 @@ export const Default = {
         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,
+    },
 };

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

@@ -0,0 +1,111 @@
+<template>
+  <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>
+
+
+<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: 'HomePage',
+  components: {
+    Footer,
+    DoubleButtonBanner,
+    SingleButtonBanner,
+    GridLayout,
+    TournamentCard,
+    ArticleCard,
+    FencerCard,
+    Header,
+    HeroBanner,
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Hero Banner Title'
+    },
+    description: {
+      type: String,
+      default: 'This is the description that goes under the hero banner.'
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Click Here'
+    },
+    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
+    }
+  }
+}
+
+</script>

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>

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

@@ -1,39 +0,0 @@
-<template>
-  <div class="m-0 w-full">
-    <Header />
-    <HeroBanner :title="title" :buttonLabel="buttonLabel" :description="description" :imageSrc="imageSrc" />
-  </div>
-</template>
-
-
-<script>
-import HeroBanner from "../../Organisms/HeroBanners/HomePage/HeroBanner.vue";
-import Header from "../../Organisms/Headers/Header.vue";
-
-export default {
-  name: 'TestLayoutPage',
-  components: {
-    Header,
-    HeroBanner,
-  },
-  props: {
-    title: {
-      type: String,
-      default: 'Hero Banner Title'
-    },
-    description: {
-      type: String,
-      default: 'This is the description that goes under the hero banner.'
-    },
-    buttonLabel: {
-      type: String,
-      default: 'Click Here'
-    },
-    imageSrc: {
-      type: String,
-      default: 'https://meyersquared.com/images/Banner2.png'
-    }
-  }
-}
-
-</script>