@dcrackel/meyersquaredui 1.0.37 → 1.0.38

package/src/stories/Organisms/GridLayout/GridLayout.stories.js

@@ -0,0 +1,148 @@
+import GridLayout from './GridLayout.vue';
+import TournamentCard from '../../Organisms/Cards/TournamentCard/TournamentCard.vue';
+import FencerCard from '../../Organisms/Cards/FencerCard/FencerCard.vue';
+
+export default {
+    title: 'Organisms/Grids/GridLayout',
+    component: GridLayout,
+    argTypes: {
+        cardComponent: { control: false, description: 'The component to render in the grid (e.g., TournamentCard, FencerCard)' },
+        items: { control: 'object', description: 'Array of items passed as props to the component' },
+    },
+};
+
+// 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) => ({
+    components: { GridLayout, TournamentCard },
+    setup() {
+        return { args };
+    },
+    template: '<GridLayout v-bind="args" />',
+});
+
+// Template for Fencer Grid
+const FencerTemplate = (args) => ({
+    components: { GridLayout, FencerCard },
+    setup() {
+        return { args };
+    },
+    template: '<GridLayout v-bind="args" />',
+});
+
+// Default Story for Tournament Grid
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Tournaments',
+    moreButtonLabel: 'See All Tournaments',
+    maxColumns: 3,
+    cardComponent: TournamentCard,
+    items: mockTournaments,
+};
+
+// New Story for Fencer Grid
+export const FencerGrid = FencerTemplate.bind({});
+FencerGrid.args = {
+    title: 'Fencers',
+    moreButtonLabel: 'See All Fencers',
+    maxColumns: 5,
+    cardComponent: FencerCard,
+    items: mockFencers,
+};

package/src/stories/Organisms/GridLayout/GridLayout.vue

@@ -0,0 +1,98 @@
+<template>
+  <section class="max-w-[1200px] mx-auto ">
+    <div class="w-full flex justify-center py-4 md:pb-10 md:pt-14">
+      <BaseText color="primary" size="2xl" tag="h3" weight="bold">{{title}}</BaseText>
+    </div>
+    <div :class="gridClasses">
+      <component
+          v-for="(item, index) in items"
+          :is="cardComponent"
+          :key="index"
+          :data="item"
+          :index="index"
+      />
+    </div>
+  </section>
+  <div class="w-full flex justify-center pb-10 pt-10 md:pt-14">
+    <BaseButton
+        backgroundColor="secondary"
+        border="primary"
+        size="xs"
+        color="primary"
+        hoverColor="accent"
+        :label="moreButtonLabel"
+    />
+  </div>
+</template>
+
+<script>
+import BaseText from "../../Atoms/BaseText/BaseText.vue";
+import BaseButton from "../../Atoms/BaseButton/BaseButton.vue";
+
+export default {
+  name: 'GridLayout',
+  components: {
+    BaseButton,
+    BaseText,
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'Section Title',
+    },
+    moreButtonLabel: {
+      type: String,
+      default: 'See More',
+    },
+    cardComponent: {
+      type: [Object, String],
+      required: true,
+    },
+    items: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    maxColumns: {
+      type: Number,
+      default: 3,
+    },
+    mobileHorizontal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    gridClasses() {
+      let baseClasses = "md:grid md:gap-x-6 md:gap-y-4";
+      if (this.mobileHorizontal) {
+        baseClasses = `${baseClasses} flex overflow-x-auto`;
+      }
+
+      let columnClasses;
+
+      switch (this.maxColumns) {
+        case 1:
+          columnClasses = "grid-cols-1";
+          break;
+        case 2:
+          columnClasses = "grid-cols-1 md:grid-cols-2";
+          break;
+        case 3:
+          columnClasses = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+          break;
+        case 4:
+          columnClasses = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
+          break;
+        case 5:
+          columnClasses = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5";
+          break;
+        default:
+          columnClasses = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+      }
+
+      return `${baseClasses} ${columnClasses}`;
+    },
+  },
+};
+</script>

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

@@ -1,7 +1,7 @@
 import Header from './Header.vue';
 
 export default {
-    title: 'Organisms/Header',
+    title: 'Organisms/Headers/Header',
     component: Header,
 };
 

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

@@ -1,7 +1,7 @@
 <template>
   <header class="border-b border-lineGrey w-full bg-primary m-0">
     <section class="w-full hidden md:flex ">
-      <div class="flex items-center justify-center w-36 h-36">
+      <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>
 
@@ -16,8 +16,7 @@
           <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="flex items-center justify-center w-36 h-36">
+      <div class="w-[150px] h-[150px] bg-primary flex-shrink-0 flex items-center justify-center">
         <BaseButton
             backgroundColor="primary"
             border="secondary"
@@ -30,9 +29,9 @@
 
     <!-- mobile header -->
     <section class="w-full flex md:hidden">
-      <div class="m-4 flex justify-between">
-        <img :src="logo" alt="Logo" class="h-10 w-14" />
-        <Icon icon="fa-bars" color="secondary" size="xl" class="absolute right-2" @click="onSearch" />
+      <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>

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

@@ -1,11 +1,12 @@
 <template>
-  <section class="relative w-full h-3/4 flex justify-center bg-primary m-0">
-    <!-- Spacer -->
-    <div class="hidden md:block w-36 bg-primary"></div>
+  <section class="relative w-full h-3/4 flex justify-center bg-primary m-0" :style="backgroundStyle">
+    <!-- Spacer (Left) -->
+    <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
 
-    <!-- Image -->
-    <div class="relative w-full border-b border-l border-r border-lineGrey">
-      <img :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover" />
+    <!-- Center Content -->
+    <div class="relative w-full md:border-b md:border-l md:border-r border-lineGrey">
+      <!-- Non-Mobile Image -->
+      <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">
@@ -20,32 +21,33 @@
           />
         </div>
       </section>
+
+      <!-- Mobile Overlay -->
+      <div v-if="isMobile" class="flex justify-center text-left w-full px-6 py-8">
+        <div class="w-full">
+          <BaseText color="secondary" tag="h1" size="xl" weight="bold" class="mb-2 w-48">{{ title }}</BaseText>
+          <BaseText color="secondary" tag="p" size="xs" weight="normal" class="mb-6 w-48">{{ description }}</BaseText>
+          <BaseButton
+              :label="buttonLabel"
+              size="xs"
+              color="secondary"
+              border="gradient1"
+              class="w-1/2 m-auto"
+              @click="onClick"
+          />
+        </div>
+      </div>
     </div>
 
-    <!-- Spacer -->
-    <div class="hidden md:block w-36 bg-primary"></div>
+    <!-- Spacer (Right) -->
+    <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
   </section>
 
   <!-- Desktop Footer Border Section -->
   <section class="hidden md:flex border-t border-lineGrey w-full bg-primary">
-    <div class="hidden md:block w-36 bg-primary"></div>
+    <div class="w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
     <div class="relative w-full border-b border-l border-r border-lineGrey h-36"></div>
-    <div class="hidden md:block w-36 bg-primary"></div>
-  </section>
-
-  <!-- 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">
-      <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"
-          color="secondary"
-          border="gradient1"
-          class="w-1/2 m-auto"
-          @click="onClick"
-      />
-    </div>
+    <div class="w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
   </section>
 </template>
 
@@ -77,7 +79,32 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isMobile: false
+    };
+  },
+  computed: {
+    backgroundStyle() {
+      return {
+        backgroundImage: `url(${this.imageSrc})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      };
+    }
+  },
+  mounted() {
+    this.checkScreenSize();
+    window.addEventListener('resize', this.checkScreenSize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.checkScreenSize);
+  },
   methods: {
+    checkScreenSize() {
+      this.isMobile = window.innerWidth < 768;
+    },
     onClick() {
       this.$emit('button-click');
     },

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

@@ -0,0 +1,28 @@
+import DoubleButtonBanner from './DoubleButtonBanner.vue';
+
+export default {
+    title: 'Organisms/SectionBanner/DoubleButtonBanner',
+    component: DoubleButtonBanner,
+    argTypes: {
+        imageSrc: { control: 'text', description: 'The image displayed in the hero banner' },
+        title: { control: 'text', description: 'Main title text' },
+        buttonLabelOne: { control: 'text', description: 'Label for the button' },
+        'button-click': { action: 'button-click' },
+    },
+};
+
+const Template = (args) => ({
+    components: { DoubleButtonBanner },
+    setup() {
+        return { args };
+    },
+    template: '<DoubleButtonBanner v-bind="args" @button-click="args[\'button-click\']" />',
+});
+
+export const DefaultHeroBanner = Template.bind({});
+DefaultHeroBanner.args = {
+    imageSrc: 'https://via.placeholder.com/1920x1080',
+    title: 'How Does Meyer Squared Work?',
+    buttonLabelOne: 'Run a Tournament',
+    buttonLabelTwo: 'Submit Results',
+};

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

@@ -0,0 +1,118 @@
+<template>
+  <section class="max-w-[1200px] mx-auto ">
+  <section class="hidden md:flex border-t border-lineGrey w-full bg-primary">
+    <div class="w-[150px] h-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
+    <div class="flex-grow h-[150px] border-b border-l border-r border-lineGrey"></div>
+    <div class="w-[150px] h-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
+  </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 -->
+    <div class="relative w-full border-b border-l border-r border-lineGrey">
+      <section class="hidden md:flex h-80 justify-between items-center p-14">
+        <div class="text-left text-white max-w-lg w-96">
+          <BaseText color="secondary" tag="h1" size="5xl" weight="semibold" class="mb-4">{{ title }}</BaseText>
+        </div>
+        <div class="flex flex-col w-1/3 align-right">
+          <BaseButton
+              :label="buttonLabelOne"
+              size="xs"
+              color="secondary"
+              border="gradient1"
+              weight="normal"
+              align="between"
+              class="mb-4 w-52 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-52 h-16 pl-8"
+              iconName="fa-arrow-right-long"
+              iconColor="secondary"
+              iconSize="lg"
+              iconType="fa-thin"
+              align="between"
+              @click="onClickOne"
+          />
+        </div>
+      </section>
+    </div>
+
+    <!-- Spacer -->
+    <div class="w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
+  </section>
+
+  <!-- Desktop Footer Border Section -->
+  <section class="hidden md:flex border-t border-lineGrey w-full bg-primary">
+    <div class="w-[150px] h-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
+    <div class="flex-grow h-[150px] border-b border-l border-r border-lineGrey"></div>
+    <div class="w-[150px] h-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
+  </section>
+
+  <!-- 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">
+      <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"
+          size="xs"
+          color="secondary"
+          border="gradient1"
+          class="w-1/2 m-auto"
+          @click="onClick"
+      />
+    </div>
+  </section>
+  </section>
+</template>
+
+<script>
+import BaseButton from '../../../Atoms/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/BaseText/BaseText.vue';
+
+export default {
+  name: 'DoubleButtonBanner',
+  components: {
+    BaseText,
+    BaseButton,
+  },
+  props: {
+    imageSrc: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    buttonLabelOne: {
+      type: String,
+      required: true,
+    },
+    buttonLabelTwo: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    onClickOne() {
+      this.$emit('button-click-one');
+    },
+    onClickTwo() {
+      this.$emit('button-click-one');
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,35 @@
+import SingleButtonBanner from './SingleButtonBanner.vue';
+
+export default {
+    title: 'Organisms/SectionBanner/SingleButtonBanner',
+    component: SingleButtonBanner,
+    argTypes: {
+        buttonClick: { action: 'button-click' },
+        imageUrl: { control: 'text', description: 'Background image URL' },
+        description: { control: 'text', description: 'Overlay text' },
+        buttonLabel: { control: 'text', description: 'Label for the button' },
+    },
+};
+
+const Template = (args) => ({
+    components: { SingleButtonBanner },
+    setup() {
+        return { args };
+    },
+    template: '<SingleButtonBanner v-bind="args" @button-click="args.buttonClick" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    imageUrl: 'https://via.placeholder.com/1200x400',
+    description: 'Look for a Club? <br> We can help.',
+    buttonLabel: 'Learn More',
+};
+
+
+export const SecondExample = Template.bind({});
+SecondExample.args = {
+    imageUrl: 'https://via.placeholder.com/1200x400',
+    description: 'Banner Here',
+    buttonLabel: 'Learn More',
+};

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

@@ -1,5 +1,7 @@
 import TestLayoutPage from './TestPage.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,
@@ -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,
+    },
 };