@dcrackel/meyersquaredui 1.0.43 → 1.0.45

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

@@ -0,0 +1,101 @@
+<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 mb-3">
+          <SearchBox class="w-24 md:w-32 lg:w-52 xl:w-64" @search="onSearch" />
+        </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 fixed top-0 left-0 z-10 bg-primary">
+      <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" @click="openMenu($event)" />
+      </div>
+    </section>
+    <div v-if="dropdownOpen" class="fixed right-2 mt-8 w-40 bg-secondary border rounded-lg border-lineGrey shadow-xl z-50" @click.stop>
+      <ul>
+        <li v-for="item in items"
+            :key="item.label"
+            @click="selectItem(item)"
+            class="px-2 py-2 cursor-pointer hover:bg-hoverColor justify-end flex">
+          <BaseText color="primary" size="xs sm" tag="p" weight="normal" class="mt-0.5">{{ item.label }}</BaseText>
+          <Icon :icon="item.icon" type="fa-regular" size="sm" color="accent" class="ml-2" />
+        </li>
+      </ul>
+    </div>
+  </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: 'PageHeader',
+  components: {
+    SearchBox,
+    BaseText,
+    BaseButton,
+    Icon
+  },
+  data() {
+    return {
+      logo: logo,
+      dropdownOpen: false,
+      items: [
+        { label: 'Home', icon: 'fa-home' },
+        { label: 'Tournaments', icon: 'fa-trophy' },
+        { label: 'Clubs', icon: 'fa-users' },
+        { label: 'Leaderboard', icon: 'fa-star' }
+      ]
+    };
+  },
+  methods: {
+    onSearch(searchQuery) {
+      this.$emit('search', searchQuery);
+    },
+    openMenu() {
+      this.dropdownOpen = true;
+      event.stopPropagation();
+    },
+    selectItem(item) {
+      this.dropdownOpen = false;
+      this.$emit('changePage', item);
+    },
+    handleClickOutside() {
+      if (this.dropdownOpen) this.dropdownOpen = false;
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside);
+  }
+};
+</script>

package/src/stories/Organisms/Headers/TournamentHeader/TournamentHeader.stories.js

@@ -0,0 +1,34 @@
+import LeaderboardHeader from './TournamentHeader.vue';
+
+export default {
+    title: 'Molecules/LeaderboardHeader',
+    component: LeaderboardHeader,
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { LeaderboardHeader },
+    setup() {
+        return { args };
+    },
+    template: `
+    <LeaderboardHeader 
+      v-bind="args" 
+      @filter-change="onFilterChange" 
+      @weapon-change="onWeaponChange" 
+    />
+  `,
+    methods: {
+        onFilterChange(filter) {
+            alert(`Filter selected: ${filter}`);
+        },
+        onWeaponChange(weapon) {
+            alert(`Weapon selected: ${weapon}`);
+        },
+    },
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    filters: ['Top Ranked', 'All Time', 'Regional', 'Club Members'],
+    weapons: ['All Weapons', 'Longsword', 'Saber', 'Rapier', 'Smallsword', 'Sword and Buckler'],
+};

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

@@ -0,0 +1,73 @@
+<template>
+  <header class="w-full bg-white py-4 flex justify-center h-24">
+    <div class="container flex justify-between items-center w-full md:w-3/4 overflow-x-auto md:overflow-x-visible">
+      <nav class="flex space-x-4 w-full justify-start md:justify-around whitespace-nowrap mx-4 md:mx-0">
+        <!-- Filter Buttons -->
+        <BaseText
+            v-for="filter in filters"
+            :key="filter"
+            @click="onFilterSelect(filter)"
+            class="cursor-pointer border-b-2 pb-1 duration-300 ease-in-out px-4 md:p-0"
+            :class="{
+            'border-accent': selectedFilter === filter,
+            'hover:border-accent': selectedFilter !== filter,
+            'border-transparent px-4 md:p-0': selectedFilter !== filter
+          }"
+            color="primary"
+            size="xs md"
+            tag="p"
+            weight="bold"
+        >
+          {{ filter }}
+        </BaseText>
+
+        <!-- Weapon Dropdown Component -->
+        <BasicDropDown
+            :weapons="weapons"
+            :selectedWeapon="selectedWeapon"
+            @weapon-select="onWeaponSelect"
+            class="hidden md:block pl-4 pr-8 md:p-0"
+        />
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/BaseText/BaseText.vue';
+import BasicDropDown from '../../../Molecules/DropDowns/BasicDropDown.vue';
+
+export default {
+  name: 'LeaderboardHeader',
+  components: {
+    BaseText,
+    BasicDropDown,
+  },
+  props: {
+    filters: {
+      type: Array,
+      default: () => ['Top Ranked', 'All Time', 'Regional', 'Club Members'],
+    },
+    weapons: {
+      type: Array,
+      default: () => ['All Weapons', 'Longsword', 'Saber', 'Rapier', 'Smallsword', 'Sword and Buckler'],
+    },
+  },
+  data() {
+    return {
+      selectedFilter: 'Top Ranked',
+      selectedWeapon: 'All Weapons',
+    };
+  },
+  methods: {
+    onFilterSelect(filter) {
+      this.selectedFilter = filter;
+      this.$emit('filter-change', filter); // Emit an event when a filter is selected
+    },
+    onWeaponSelect(weapon) {
+      this.selectedWeapon = weapon;
+      this.$emit('weapon-change', weapon); // Emit an event when a weapon is selected
+    },
+  },
+};
+</script>

package/src/stories/Organisms/HeroBanners/HomePage/HeroBanner.stories.js

@@ -22,8 +22,8 @@ const Template = (args) => ({
 
 export const DefaultHeroBanner = Template.bind({});
 DefaultHeroBanner.args = {
-    imageSrc: 'https://via.placeholder.com/1920x1080',
-    title: 'Welcome to Our Website',
-    description: 'Explore our features and discover more.',
+    imageSrc: 'https://meyersquared.com/images/banners/largebanner01.jpg',
+    title: 'Find your next HEMA Touranment!',
+    description: '',
     buttonLabel: 'Get Started',
 };

package/src/stories/Organisms/HeroBanners/HomePage/HeroBanner.vue

@@ -9,7 +9,7 @@
       <img v-if="!isMobile" :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover" />
 
       <!-- Text Overlay for Desktop -->
-      <section class="hidden md:flex absolute inset-0 items-center justify-start px-8">
+      <section class="hidden md:flex absolute inset-0 items-center justify-start px-8 mt-40">
         <div class="text-left text-white max-w-lg">
           <BaseText color="secondary" tag="h1" size="4xl" weight="bold" class="mb-4">{{ title }}</BaseText>
           <BaseText color="secondary" tag="p" size="lg" weight="normal" class="mb-6">{{ description }}</BaseText>

package/src/stories/Organisms/HeroBanners/TournamentDetails/TournamentDetailsBanner.stories.js

@@ -0,0 +1,39 @@
+import TournamentDetailsBanner from './TournamentDetailsBanner.vue';
+import mockTournamentDetails from '../../../../mocks/getTouranmentDetailsMock.js';
+
+export default {
+    title: 'Organisms/HeroBanners/Tournaments/TournamentDetailsBanner',
+    component: TournamentDetailsBanner,
+    argTypes: {
+        imageSrc: { control: 'text', description: 'URL of the tournament image' },
+        tournamentStartDate: { control: 'text', description: 'Start date of the tournament in YYYY-MM-DD format' },
+        title: { control: 'text', description: 'Tournament name or title' },
+        description: { control: 'text', description: 'Tournament description' },
+        clubLogo: { control: 'text', description: 'URL of the hosting club logo' },
+        hostingClubName: { control: 'text', description: 'Name of the hosting club' },
+        registeredParticipants: { control: 'number', description: 'Number of registered participants' },
+        eventsCount: { control: 'number', description: 'Number of events' },
+        isGoing: { control: 'boolean', description: 'Status if user is going' },
+        isBookmarked: { control: 'boolean', description: 'Status if tournament is bookmarked' },
+    },
+};
+
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { TournamentDetailsBanner },
+    template: `<TournamentDetailsBanner v-bind="$props" />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    imageSrc: 'https://meyersquared.com/images/banners/thinbanner02.jpg',
+    tournamentStartDate: '2024-07-20',
+    title: mockTournamentDetails.Name,
+    description: mockTournamentDetails.Description,
+    clubLogo: 'https://via.placeholder.com/100',
+    hostingClubName: 'Queen City Sword Guild',
+    registeredParticipants: 50,
+    eventsCount: 5,
+    isGoing: true,
+    isBookmarked: true,
+};

package/src/stories/Organisms/HeroBanners/TournamentDetails/TournamentDetailsBanner.vue

@@ -0,0 +1,129 @@
+<template>
+  <section class="relative w-full flex justify-center bg-primary m-0 bg-top" :style="backgroundStyle">
+    <!-- Left Spacer -->
+    <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
+
+    <!-- Main Content -->
+    <div class="relative w-full md:border-b md:border-l md:border-r border-lineGrey">
+      <!-- Background Image -->
+      <img v-if="!isMobile" :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover object-top max-h-96"/>
+
+      <!-- Text Overlay for Desktop -->
+      <section class="hidden w-full md:flex absolute inset-0 justify-between items-end">
+        <div class="w-1/2 p-4 bg-opacity-50 rounded-lg">
+          <BaseText color="secondary" tag="h1" size="md" weight="bold" class="mb-2">{{ formattedDate }}</BaseText>
+          <BaseText color="secondary" tag="h1" size="4xl" weight="bold" class="mb-4">{{ title }}</BaseText>
+
+          <!-- Hosting Club Info and Stats -->
+          <div class="flex justify-between mb-4 w-full">
+            <!-- Club Info -->
+            <div class="flex items-center space-x-4 w-1/2">
+              <img :src="clubLogo" alt="Club Logo" class="w-10 h-10 rounded-full"/>
+              <div>
+                <BaseText color="secondary" tag="p" size="xs" weight="normal" class="">Hosted by:</BaseText>
+                <BaseText color="secondary" tag="p" size="lg" weight="bold">{{ hostingClubName }}</BaseText>
+              </div>
+            </div>
+          </div>
+
+
+          <!-- Additional Info -->
+          <div class="flex justify-between items-center">
+          </div>
+        </div>
+      </section>
+
+      <!-- Mobile Overlay -->
+      <div v-if="isMobile" class="flex justify-center text-left w-full px-6 mt-10">
+        <div class="w-full">
+          <BaseText color="secondary" tag="h1" size="lg" weight="bold" class="mb-2">{{ formattedDate }}</BaseText>
+          <BaseText color="secondary" tag="h1" size="xl" weight="bold" class="mb-2">{{ title }}</BaseText>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Spacer -->
+    <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/BaseText/BaseText.vue';
+import Icon from '../../../Atoms/Icon/Icon.vue';
+
+export default {
+  name: 'TournamentDetailsBanner',
+  components: {
+    BaseText,
+    Icon,
+  },
+  props: {
+    imageSrc: {
+      type: String,
+      required: true,
+      default: 'https://meyersquared.com/images/banners/thinbanner01.jpg',
+    },
+    tournamentStartDate: {
+      type: String,
+      required: true,
+      default: '2024-07-20',
+    },
+    title: {
+      type: String,
+      required: true,
+      default: 'Tournament Name',
+    },
+    clubLogo: {
+      type: String,
+      required: true,
+      default: 'https://via.placeholder.com/100',
+    },
+    hostingClubName: {
+      type: String,
+      required: true,
+      default: 'Hosting Club Name',
+    },
+    isGoing: {
+      type: Boolean,
+      default: false,
+    },
+    isBookmarked: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isMobile: false,
+    };
+  },
+  computed: {
+    formattedDate() {
+      // Format the date using plain JavaScript
+      const date = new Date(this.tournamentStartDate);
+      const options = {weekday: 'long', year: 'numeric', month: 'short', day: 'numeric'};
+      return date.toLocaleDateString('en-US', options);
+    },
+    backgroundStyle() {
+      return {
+        backgroundImage: `url(${this.imageSrc})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'top',
+        backgroundRepeat: 'no-repeat',
+      };
+    },
+  },
+  mounted() {
+    this.checkScreenSize();
+    window.addEventListener('resize', this.checkScreenSize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.checkScreenSize);
+  },
+  methods: {
+    checkScreenSize() {
+      this.isMobile = window.innerWidth < 768;
+    },
+  },
+};
+</script>

package/src/stories/Organisms/HeroBanners/Tournaments/TournamentBanner.stories.js

@@ -0,0 +1,25 @@
+import TournamentBanner from './TournamentBanner.vue';
+
+export default {
+    title: 'Organisms/HeroBanners/Tournaments/TournamentBanner',
+    component: TournamentBanner,
+    argTypes: {
+        imageSrc: { control: 'text' },
+        title: { control: 'text' },
+        description: { control: 'text' },
+        'button-click': { action: 'button-click' }
+    },
+};
+
+const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { TournamentBanner },
+    template: `<TournamentBanner v-bind="$props"  />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    imageSrc: 'https://meyersquared.com/images/banners/thinbanner01.jpg',
+    title: 'Find Tournaments',
+    description: 'Find your next HEMA Tournaments near you!',
+};

package/src/stories/Organisms/HeroBanners/Tournaments/TournamentBanner.vue

@@ -0,0 +1,79 @@
+<template>
+  <section class="relative w-full flex justify-center bg-primary m-0 bg-top" :style="backgroundStyle">
+    <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
+
+    <div class="relative w-full md:border-b md:border-l md:border-r border-lineGrey">
+      <img v-if="!isMobile" :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover object-top max-h-96" />
+
+      <section class="hidden md:flex absolute inset-0 items-center justify-start px-8 pt-32">
+        <div class="text-left text-white max-w-lg">
+          <BaseText color="secondary" tag="h1" size="4xl" weight="bold" class="mb-4">{{ title }}</BaseText>
+          <BaseText color="secondary" tag="p" size="xl" weight="normal" class="mb-6" v-html="description"></BaseText>
+        </div>
+      </section>
+
+      <div v-if="isMobile" class="flex justify-center text-left w-full px-4 mt-8">
+        <div class="w-full mb-4">
+          <BaseText color="secondary" tag="h1" size="lg" weight="bold" class="mb-0 w-1/2">{{ title }}</BaseText>
+          <BaseText color="secondary" tag="p" size="xs" weight="normal" class="w-8/12">{{ description }}</BaseText>
+        </div>
+      </div>
+    </div>
+
+    <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/BaseText/BaseText.vue';
+
+export default {
+  name: 'TournamentBanner',
+  components: {
+    BaseText,
+  },
+  props: {
+    imageSrc: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true,
+      default: 'Hero Banner Title',
+    },
+    description: {
+      type: String,
+      required: true,
+      default: 'This is the description that goes under the hero banner.',
+    },
+  },
+  data() {
+    return {
+      isMobile: false,
+    };
+  },
+  computed: {
+    backgroundStyle() {
+      return {
+        backgroundImage: `url(${this.imageSrc})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'top',
+        backgroundRepeat: 'no-repeat',
+      };
+    },
+  },
+  mounted() {
+    this.checkScreenSize();
+    window.addEventListener('resize', this.checkScreenSize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.checkScreenSize);
+  },
+  methods: {
+    checkScreenSize() {
+      this.isMobile = window.innerWidth < 768;
+    },
+  },
+};
+</script>

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

@@ -108,13 +108,13 @@ export default {
     BaseButton,
   },
   props: {
-    imageSrc: {
+    title: {
       type: String,
       required: true,
     },
-    title: {
+    description: {
       type: String,
-      required: true,
+      default: '',
     },
     buttonLabelOne: {
       type: String,

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

@@ -1,5 +1,5 @@
 <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 + ')' }">
+  <section class="relative bg-cover bg-top 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

package/src/stories/Templates/ClubDetailPage/ClubDetailPage.stories.js

@@ -0,0 +1,43 @@
+import ClubDetailPage from './ClubDetailPage.vue';
+import mockGetClubById from "../../../mocks/getClubById.js";
+
+export default {
+    title: 'Templates/ClubDetailPage',
+    component: ClubDetailPage,
+    argTypes: {
+        title: { control: 'text' },
+        description: { control: 'text' },
+        imageSrc: { control: 'text' },
+        tournaments: { control: 'array' },
+        tournamentsIsLoading: { control: 'boolean' },
+    },
+};
+
+const Template = (args) => ({
+    components: { ClubDetailPage },
+    setup() {
+        return { args };
+    },
+    template: '<ClubDetailPage v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Local Clubs',
+    description: 'Explore clubs near you<br> and join the community!',
+    imageSrc: 'https://meyersquared.com/images/banners/thinbannerclub.jpg',
+    club: mockGetClubById[0],
+    clubsIsLoading: false,
+};
+
+export const LoadingState = Template.bind({});
+LoadingState.args = {
+    ...Default.args,
+    tournamentsIsLoading: true,
+};
+
+export const NoTournaments = Template.bind({});
+NoTournaments.args = {
+    ...Default.args,
+    tournaments: [],
+};