@dcrackel/meyersquaredui 1.0.43 → 1.0.45

package/src/stories/Templates/TournamentListPage/TournamentListPage.stories.js

@@ -0,0 +1,41 @@
+import HomePage from './TournamentListPage.vue';
+import mockTournaments from "../../../mocks/getTournamentsMock.js";
+import mockTopFencers from "../../../mocks/getTopFencers.js";
+import mockArticles from "../../../mocks/getArticles.js";
+export default {
+    title: 'Templates/TournamentListPage',
+    component: HomePage,
+    argTypes: {
+        'button-click': { action: 'button-click' },
+        title: { control: 'text', description: 'Title for the HeroBanner' },
+        description: { control: 'text', description: 'Description for the HeroBanner' },
+        buttonLabel: { control: 'text', description: 'Button label for the HeroBanner' },
+        imageSrc: { control: 'text', description: 'Image source for the HeroBanner' },
+    },
+};
+
+export const Default = {
+    args: {
+        title: 'Find HEMA Tournaments',
+        description: 'Near your location!',
+        imageSrc: 'https://meyersquared.com/images/banners/thinbanner02m1.png',
+        tournaments: mockTournaments,
+        topFencers: mockTopFencers,
+        articles: mockArticles,
+    },
+};
+
+export const AllLoading = {
+    args: {
+        title: 'Discover, Compete, Connect',
+        description: '',
+        buttonLabel: 'Find Out More',
+        imageSrc: 'https://meyersquared.com/images/banners/largebanner01.jpg',
+        tournaments: mockTournaments,
+        topFencers: mockTopFencers,
+        articles: mockArticles,
+        tournamentsIsLoading: true,
+        topFencersIsLoading: true,
+        articlesIsLoading: true,
+    },
+};

package/src/stories/Templates/TournamentListPage/TournamentListPage.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="m-0 w-full bg-secondary">
+    <Header />
+    <TournamentBanner :title="title" :description="description" :imageSrc="imageSrc" />
+    <TournamentHeader />
+
+    <div class="w-full flex justify-center">
+    <section class="w-full md:w-2/3 mb-20 flex">
+      <GridLayout
+          :cardComponent="cardComponent"
+          :items="limitedTournaments"
+          :maxColumns="1"
+          :isLoading="tournamentsIsLoading"
+          :whiteStyle="true"
+          moreButtonLabel="See All Tournaments"
+          :title="formattedDate"
+      />
+      <Calendar :tournaments="tournaments" class="hidden md:block mt-32" />
+    </section>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+
+
+<script>
+import TournamentBanner from "../../Organisms/HeroBanners/Tournaments/TournamentBanner.vue";
+import Header from "../../Organisms/Headers/PageHeader/PageHeader.vue";
+import TournamentListCard from "../../Organisms/Cards/TournamentListCard/TournamentListCard.vue";
+import FencerCard from "../../Organisms/Cards/FencerCard/FencerCard.vue";
+import GridLayout from "../../Organisms/GridLayout/GridLayout.vue";
+import Footer from "../../Organisms/Footer/Footer.vue";
+import TournamentHeader from "../../Organisms/Headers/TournamentHeader/TournamentHeader.vue";
+import Calendar from "../../Molecules/Calendar/Calendar.vue";
+import {markRaw} from "vue";
+
+export default {
+  name: 'TournamentListPage',
+  components: {
+    Calendar,
+    TournamentHeader,
+    Footer,
+    GridLayout,
+    TournamentListCard,
+    FencerCard,
+    Header,
+    TournamentBanner,
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Hero Banner Title'
+    },
+    description: {
+      type: String,
+      default: 'This is the description that goes under the hero banner.'
+    },
+    imageSrc: {
+      type: String,
+      default: 'https://meyersquared.com/images/Banner2.png'
+    },
+    tournaments: {
+      type: Array,
+      default: () => []
+    },
+    tournamentsIsLoading: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    formattedDate() {
+      return new Date().toLocaleDateString(undefined, {
+        weekday: 'long',
+        month: 'short',
+        day: 'numeric',
+      });
+    },
+    limitedTournaments() {
+      return this.tournaments;
+    }
+  },
+  data() {
+    return {
+      cardComponent: markRaw(TournamentListCard),
+    }
+  }
+}
+
+</script>

package/src/stories/Organisms/Headers/Header.vue

@@ -1,62 +0,0 @@
-<template>
-  <header class="border-b border-lineGrey w-full bg-primary m-0">
-    <section class="w-full hidden md:flex ">
-      <div class="w-[150px] h-[150px] bg-primary flex-shrink-0 flex items-center justify-center">
-        <img :src="logo" alt="Logo" class="h-14 w-18 bg-accent" />
-      </div>
-
-      <section class="flex w-full items-center  border-r border-l border-lineGrey">
-        <div class="hidden lg:flex w-1/3 pl-20">
-          <SearchBox class="w-24 md:w-32 lg:w-52 xl:w-64 bg-primary" />
-        </div>
-        <nav class="ml-8 w-2/3 flex justify-around">
-          <BaseText color="secondary" size="md" tag="p" weight="normal" class="border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out">Tournaments</BaseText>
-          <BaseText color="secondary" size="md" tag="p" weight="normal" class="border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out">Clubs</BaseText>
-          <BaseText color="secondary" size="md" tag="p" weight="normal" class="border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out">Leaderboard</BaseText>
-          <BaseText color="secondary" size="md" tag="p" weight="normal" class="border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out">Contact</BaseText>
-        </nav>
-      </section>
-      <div class="w-[150px] h-[150px] bg-primary flex-shrink-0 flex items-center justify-center">
-        <BaseButton
-            backgroundColor="primary"
-            border="secondary"
-            color="secondary"
-            label="Login"
-            size="xs"
-        />
-      </div>
-    </section>
-
-    <!-- mobile header -->
-    <section class="w-full flex md:hidden">
-      <div class="m-2 flex justify-between w-full">
-        <img :src="logo" alt="Logo" class="h-6 w-9" />
-        <Icon icon="fa-bars" color="secondary" size="xl" class="" @click="onSearch" />
-      </div>
-    </section>
-  </header>
-</template>
-
-<script>
-import logo from '../../../assets/images/m2.png';
-
-import SearchBox from '../../Molecules/SearchBox/SearchBox.vue';
-import BaseText from '../../Atoms/BaseText/BaseText.vue';
-import Icon from '../../Atoms/Icon/Icon.vue';
-import BaseButton from '../../Atoms/BaseButton/BaseButton.vue';
-
-export default {
-  name: 'Header',
-  components: {
-    SearchBox,
-    BaseText,
-    BaseButton,
-    Icon
-  },
-  data() {
-    return {
-      logo: logo,
-    };
-  },
-};
-</script>