@dcrackel/meyersquaredui 1.0.37 → 1.0.39

package/src/stories/Atoms/BaseButton/BaseButton.stories.js

@@ -1,4 +1,5 @@
 import BaseButton from './BaseButton.vue';
+import Icon from '../../Atoms/Icon/Icon.vue';
 
 export default {
     title: 'Atoms/BaseButton',
@@ -7,6 +8,8 @@ export default {
         label: 'Click Me',
         color: 'primary',
         border: 'none',
+        padding: 'px-4 py-2',
+        icon: null, // Default: no icon
     },
     argTypes: {
         label: {
@@ -18,12 +21,12 @@ export default {
                 type: 'select',
                 options: ['primary', 'secondary', 'accent'],
             },
-            description: 'The background color of the button',
+            description: 'The text color of the button',
         },
         border: {
             control: {
                 type: 'select',
-                options: ['none', 'primary', 'secondary', 'gradient', 'gradient2'],
+                options: ['none', 'primary', 'secondary', 'accent', 'gradient1', 'gradient2'],
             },
             description: 'The border style of the button',
         },
@@ -31,12 +34,29 @@ export default {
             control: 'text',
             description: 'Optional alt text for accessibility (aria-label)',
         },
+        padding: {
+            control: 'text',
+            description: 'Custom padding classes for the button (e.g., "px-6 py-3")',
+        },
+        icon: {
+            control: 'none', // We will pass the actual component with props
+            description: 'Optional icon component to render inside the button',
+        },
+        hoverColor: {
+            control: {
+                type: 'select',
+                options: ['primary', 'secondary', 'accent', ''],
+            },
+            description: 'Optional hover color for the text inside the button',
+        },
     },
 };
 
 const Template = (args) => ({
-    components: { BaseButton },
+    components: { BaseButton, Icon },
     setup() {
+        // Attach icon component to args
+        args.icon = Icon;
         return { args };
     },
     template: '<BaseButton v-bind="args" />',
@@ -48,36 +68,19 @@ Default.args = {
     color: 'secondary',
     backgroundColor: 'primary',
     border: 'none',
+    padding: 'px-4 py-2',
+    icon: null,
 };
 
-export const PrimaryWithGradientBorder = Template.bind({});
-PrimaryWithGradientBorder.args = {
-    label: 'Primary Button',
-    color: 'secondary',
-    backgroundColor: 'primary',
-    border: 'gradient1',
-};
-
-export const PrimaryWithGradientBorderTwo = Template.bind({});
-PrimaryWithGradientBorderTwo.args = {
-    label: 'Primary Button',
-    color: 'secondary',
-    backgroundColor: 'primary',
-    border: 'gradient2',
-};
-
-export const SecondaryWithAccentBorder = Template.bind({});
-SecondaryWithAccentBorder.args = {
-    label: 'Secondary Button',
-    color: 'secondary',
-    backgroundColor: 'primary',
-    border: 'accent',
-};
-
-export const BlackBorderWithWhiteBackground = Template.bind({});
-BlackBorderWithWhiteBackground.args = {
-    label: 'Secondary Button',
+export const ButtonWithIcon = Template.bind({});
+ButtonWithIcon.args = {
+    label: 'Icon Button',
     color: 'primary',
     backgroundColor: 'secondary',
-    border: 'primary',
-};
+    hoverColor: 'accent',
+    border: 'accent',
+    padding: 'px-4 py-2',
+    iconName: 'fa-thin fa-arrow-right',
+    iconColor: 'primary',
+    iconSize: 'lg'
+};

package/src/stories/Atoms/BaseButton/BaseButton.vue

@@ -1,7 +1,8 @@
 <template>
   <button
       :class="[
-      'px-4 py-2 rounded-md transition duration-300 ease-in-out',
+      'rounded-md transition duration-300 ease-in-out',
+      paddingClass,
       textColorClass,
       backgroundClass,
       borderClass,
@@ -10,13 +11,23 @@
       :aria-label="altText || label"
       @click="$emit('click')"
   >
-    {{ label }}
+    <div :class="['flex items-center', alignmentClass, 'space-x-2']">
+      <BaseText :color="color" :hoverColor="hoverColor" :size="size" :weight="weight">{{ label }}</BaseText>
+      <Icon :icon="iconName" :color="iconColor" :size="iconSize" :type="iconType"/>
+    </div>
   </button>
 </template>
 
 <script>
+import BaseText from "../BaseText/BaseText.vue";
+import Icon from '../../Atoms/Icon/Icon.vue';
+
 export default {
   name: 'BaseButton',
+  components: {
+    BaseText,
+    Icon
+  },
   props: {
     label: {
       type: String,
@@ -26,11 +37,24 @@ export default {
       type: String,
       default: null,
     },
+    size: {
+      type: String,
+      default: 'md',
+    },
+    weight: {
+      type: String,
+      default: 'normal',
+    },
     color: {
       type: String,
       default: 'primary',
       validator: (value) => ['primary', 'secondary', 'accent'].includes(value),
     },
+    hoverColor: {
+      type: String,
+      default: '',
+      validator: (value) => ['primary', 'secondary', 'accent'].includes(value),
+    },
     backgroundColor: {
       type: String,
       default: 'primary',
@@ -42,8 +66,38 @@ export default {
       validator: (value) =>
           ['none', 'primary', 'secondary', 'accent', 'gradient1', 'gradient2'].includes(value),
     },
+    padding: {
+      type: String,
+      default: 'px-4 py-2',
+    },
+    iconName: {
+      type: String,
+      default: ''
+    },
+    iconColor: {
+      type: String,
+      default: 'primary',
+      validator: (value) => ['primary', 'secondary', 'accent'].includes(value),
+    },
+    iconSize: {
+      control: { type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] },
+      description: 'Icon size',
+    },
+    iconType: {
+      type: String,
+      default: 'fa-solid',
+      validator: (value) => ['fa-thin', 'fa-sharp'].includes(value),
+    },
+    align: {
+      type: String,
+      default: 'center',
+      validator: (value) => ['left', 'center', 'right', 'between'].includes(value),
+    },
   },
   computed: {
+    paddingClass() {
+      return this.padding;
+    },
     textColorClass() {
       const textColor = {
         primary: 'text-primary',
@@ -55,7 +109,7 @@ export default {
     backgroundClass() {
       const colorMap = {
         primary: 'bg-primary hover:bg-accent',
-        secondary: 'bg-secondary hover:bg-accent',
+        secondary: 'bg-secondary hover:bg-primary',
         accent: 'bg-accent hover:bg-accent',
       };
       return colorMap[this.backgroundColor] || 'bg-primary';
@@ -71,6 +125,15 @@ export default {
       };
       return borderMap[this.border] || '';
     },
+    alignmentClass() {
+      const alignmentMap = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end',
+        between: 'justify-between', // New "between" option added
+      };
+      return alignmentMap[this.align] || 'justify-center';
+    },
   },
 };
 </script>
@@ -106,5 +169,4 @@ export default {
   background: linear-gradient(to right, #009DFF, #25E07C);
   color: white; /* Optional: You can change the text color on hover as well */
 }
-
 </style>

package/src/stories/Atoms/BaseText/BaseText.vue

@@ -16,20 +16,24 @@ export default {
     size: {
       type: String,
       default: 'md',
-      validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].includes(value),
     },
     color: {
       type: String,
       default: 'primary',
     },
+    hoverColor: {
+      type: String,
+      default: '',
+    },
     weight: {
       type: String,
       default: 'normal',
-      validator: (value) => ['light', 'normal', 'semibold', 'bold'].includes(value),
+      validator: (value) => ['thin','light', 'normal','semibold','bold'].includes(value),
     },
   },
   computed: {
     textClasses() {
+      // Map for size classes
       const sizeClasses = {
         xs: 'text-xs',
         sm: 'text-sm',
@@ -39,17 +43,30 @@ export default {
         '2xl': 'text-2xl',
         '3xl': 'text-3xl',
         '4xl': 'text-4xl',
-        '5xl': 'text-5xl'
+        '5xl': 'text-5xl',
       };
 
       const weightClasses = {
-        light: 'font-light',
-        normal: 'font-normal',
-        semibold: 'font-semibold',
-        bold: 'font-bold',
+        thin: 'font-thin font-[100]',
+        light: 'font-light font-[300]',
+        normal: 'font-normal font-[400]',
+        semibold: 'font-semibold font-[600]',
+        bold: 'font-bold font-[700]',
       };
 
-      return `${sizeClasses[this.size]} ${weightClasses[this.weight]} text-${this.color}`;
+      const hoverClass = this.hoverColor ? `hover:text-${this.hoverColor}` : '';
+
+      // Parse the size prop to allow responsive classes
+      const sizeClassList = this.size
+          .split(' ')
+          .map((size) => {
+            const [prefix, value] = size.includes(':') ? size.split(':') : [null, size];
+            return prefix ? `${prefix}:${sizeClasses[value]}` : sizeClasses[value];
+          })
+          .filter(Boolean)
+          .join(' ');
+
+      return `${sizeClassList} ${weightClasses[this.weight]} text-${this.color} ${hoverClass} font-raleway`;
     },
   },
 };

package/src/stories/Atoms/Icon/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i :class="[ 'fas', icon, colorClasses, sizeClasses ]" @click="$emit('click')" />
+  <i :class="[ type, icon, colorClasses, sizeClasses ]" @click="$emit('click')" />
 </template>
 
 <script>
@@ -20,6 +20,11 @@ export default {
       default: 'md',
       validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(value),
     },
+    type: {
+      type: String,
+      default: 'fa-solid',
+      validator: (value) => ['fa-thin', 'fa-sharp'].includes(value),
+    }
   },
   computed: {
     colorClasses() {

package/src/stories/Organisms/Cards/ArticleCard/ArticleCard.stories.js

@@ -0,0 +1,25 @@
+import ArticleCard from './ArticleCard.vue';
+import mockArticles from "../../../../mocks/getArticles.js";
+
+export default {
+    title: 'Organisms/Cards/ArticleCard',
+    component: ArticleCard,
+    argTypes: {
+        onReadMore: { action: 'read-more' }
+    }
+};
+
+const Template = (args) => ({
+    components: { ArticleCard },
+    setup() {
+        return { args };
+    },
+    template: '<ArticleCard v-bind="args" @read-more="args.onReadMore" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    image: 'https://via.placeholder.com/300x200',
+    articleTitle: 'Exciting News in HEMA',
+    description: 'Learn about the latest developments and events happening in the HEMA community. Stay informed and get the latest updates.',
+};

package/src/stories/Organisms/Cards/ArticleCard/ArticleCard.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="w-72 p-4 bg-secondary rounded-lg flex flex-col items-start">
+    <img :src="image" alt="Article Image" class="w-full h-40 object-cover rounded-t-md mb-4" />
+
+    <BaseText tag="h3" size="xl" weight="semibold" class="mb-2">{{ articleTitle }}</BaseText>
+    <BaseText tag="p" size="sm" weight="normal" class="mb-4 h-20">{{ truncatedDescription }}</BaseText>
+
+    <a href="#" @click.prevent="onReadMore" class="w-full flex justify-end pr-2">
+      <BaseText tag="p" size="sm" weight="simibold" class="mb-4 border-b border-secondary hover:border-accent">Read More &rarr;</BaseText>
+    </a>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'ArticleCard',
+  components: {
+    BaseText
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    image() {
+      return this.data.image;
+    },
+    articleTitle() {
+      return this.data.articleTitle;
+    },
+    truncatedDescription() {
+      if (this.data.description.length > 120) {
+        return this.data.description.substring(0, 120) + ' ...';
+      }
+      return this.data.description;
+    }
+  },
+  methods: {
+    onReadMore() {
+      this.$emit('read-more');
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Cards/FencerCard/FencerCard.stories.js

@@ -0,0 +1,48 @@
+import FencerCard from './FencerCard.vue';
+
+export default {
+    title: 'Organisms/Cards/FencerCard',
+    component: FencerCard,
+    argTypes: {
+        portrait: { control: 'text' },
+        displayName: { control: 'text' },
+        clubName: { control: 'text' },
+        m2Rating: { control: 'number' },
+        hrRating: { control: 'number' },
+    },
+};
+
+const Template = (args) => ({
+    components: { FencerCard },
+    setup() {
+        return { args };
+    },
+    template: '<FencerCard v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    portrait: 'https://randomuser.me/api/portraits/women/26.jpg',
+    displayName: 'John Doe',
+    clubName: 'Awesome Fencing Club',
+    m2Rating: 'A24',
+    hrRating: 1567,
+};
+
+export const HighRating = Template.bind({});
+HighRating.args = {
+    portrait: '',
+    displayName: 'Jane Smith',
+    clubName: 'Elite Fencing Academy',
+    m2Rating: 1500,
+    hrRating: 1300,
+};
+
+export const NoRating = Template.bind({});
+NoRating.args = {
+    portrait: '',
+    displayName: 'Unknown Fencer',
+    clubName: 'No Club',
+    m2Rating: null,
+    hrRating: null,
+};

package/src/stories/Organisms/Cards/FencerCard/FencerCard.vue

@@ -0,0 +1,69 @@
+<template>
+  <section class="mr-4 md:mr-2 items-center">
+    <div class="flex flex-col m-auto justify-center mb-4 items-center w-[160px]">
+      <img :src="portrait" alt="Fencer Portrait" class="w-[120px] h-[120px] md:w-40 md:h-40 rounded-full object-cover z-1 flex-shrink-0"  />
+    </div>
+    <!-- Ratings -->
+    <div class="flex flex-col md:flex-row justify-center md:justify-around -mt-2 border-b border-borderGray z-10 pb-2 mb-2">
+      <div class="flex items-center justify-center">
+        <BaseText tag="p" size="xs md:sm" weight="semibold" class="primary mr-1 block z-50">M2: </BaseText>
+        <BaseText tag="p" size="sm md:md" weight="bold" class="text-accent">{{ m2Rating }}</BaseText>
+      </div>
+      <div class="hidden md:flex items-center justify-center">
+        <BaseText tag="p" size="md" weight="bold" class="text-accent">{{ hrRating }}</BaseText>
+        <BaseText tag="p" size="sm" weight="semibold" class="primary mr-1">:HR</BaseText>
+      </div>
+    </div>
+    <BaseText tag="h3" size="sm md:xl" weight="semibold" class="text-center">{{ displayName }}</BaseText>
+    <BaseText tag="p" size="xs md:sm" weight="normal" class="text-center h-10">{{ clubName }}</BaseText>
+  </section>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+import defaultPortrait from '../../../../assets/images/portrait1.png'
+
+// :style="{ flexShrink: '0', minWidth: '160px', minHeight: '160px' }"
+export default {
+  name: 'FencerCard',
+  components: {
+    BaseText,
+    defaultPortrait
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    portrait() {
+      return this.data.ProfileImage && this.data.ProfileImage.URL
+          ? this.data.ProfileImage.URL
+          : defaultPortrait;
+    },
+    displayName() {
+      return this.data.DisplayName;
+    },
+    clubName() {
+      return this.data.Club.Name;
+    },
+    m2Rating() {
+      const m2RatingForWeapon = this.data.M2Ratings.find(rating => rating.WeaponId === 1);
+      return m2RatingForWeapon ? m2RatingForWeapon.FormattedRating : 'U';
+    },
+    hrRating() {
+      return this.data.HEMARatings && this.data.HEMARatings[0] ? this.data.HEMARatings[0].Rating : 0;
+    },
+  }
+};
+</script>
+

package/src/stories/Organisms/Cards/TournamentCard/TournamentCard.stories.js

@@ -0,0 +1,24 @@
+import TournamentCard from './TournamentCard.vue';
+
+export default {
+    title: 'Organisms/Cards/TournamentCard',
+    component: TournamentCard,
+};
+
+const Template = (args) => ({
+    components: { TournamentCard },
+    setup() {
+        return { args };
+    },
+    template: '<TournamentCard v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    image: 'https://assets.simpleviewinc.com/simpleview/image/upload/c_fill,f_avif,h_800,q_65,w_1920/v1/clients/wausauwi/download_5__d27db8e0-a64a-4db5-8126-17033dab6712.jpg',
+    title: 'National Fencing Tournament',
+    location: 'New York City, NY',
+    startDate: 'Jan 1, 2024',
+    endDate: 'Jan 3, 2024',
+    numberOfFencers: 120,
+};

package/src/stories/Organisms/Cards/TournamentCard/TournamentCard.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="md:w-full mb-8">
+    <!-- Desktop Version -->
+    <section class="hidden md:block">
+      <img
+          :src="image"
+          alt="Tournament Image"
+          class="w-full h-52 object-cover mb-2 rounded-md"
+          @error="imageError"
+          :style="fallbackStyle"
+      />
+      <BaseText tag="h3" size="xl" weight="semibold" class="mb-1">{{ title }}</BaseText>
+      <BaseText tag="p" size="sm" weight="semibold" class="mb-2">{{ location }}</BaseText>
+      <div class="flex items-center mb-1">
+        <span class="flex w-6 justify-center">
+          <Icon icon="fa-calendar" color="accent" size="sm" class="mr-3 w-4"/>
+        </span>
+        <BaseText tag="p" size="sm" class="">{{ startDate }} to {{ endDate }}</BaseText>
+      </div>
+      <div class="flex items-center">
+        <span class="flex w-6 justify-center">
+          <Icon icon="fa-user-friends" color="accent" size="sm" class="mr-3"/>
+        </span>
+        <BaseText tag="p" size="sm" class="">{{ numberOfFencers }} Registered Fencers</BaseText>
+      </div>
+    </section>
+
+    <!-- Mobile Version -->
+    <section class="md:hidden flex-col items-start gap-2 border-b border-borderGray">
+
+        <div class="flex flex-row">
+          <img :src="image"
+               alt="Tournament Image"
+               class="w-28 h-16 object-cover rounded-md"
+               @error="imageError"
+               :style="fallbackStyle"
+          />
+          <div class="flex flex-col h-16 justify-center pl-2">
+            <BaseText tag="h3" size="lg" weight="semibold" class="mb-1">{{ title }}</BaseText>
+            <BaseText tag="p" size="xs" weight="semibold" class="mb-1">{{ location }}</BaseText>
+          </div>
+        </div>
+        <div class="flex justify-between pt-4 pb-2">
+          <div class="flex justify-start w-5/12">
+            <Icon icon="fa-user-friends" color="accent" size="xs" class="mr-1" />
+            <BaseText tag="p" size="xs" class="">{{ numberOfFencers }} Registered</BaseText>
+          </div>
+          <div class="flex justify-start mb-1 w-7/12">
+            <Icon icon="fa-calendar" color="accent" size="xs" class="mr-1 w-4" />
+            <BaseText tag="p" size="xs" class="">{{ startDate }} to {{ endDate }}</BaseText>
+          </div>
+        </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+import Icon from "../../../Atoms/Icon/Icon.vue";
+
+export default {
+  name: 'TournamentCard',
+  components: {
+    BaseText,
+    Icon
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      isImageError: false
+    };
+  },
+  mounted() {
+    console.log(this.data);
+  },
+  computed: {
+    image() {
+      return !this.isImageError && this.data.Images && this.data.Images.length > 0
+          ? this.data.Images[0].URL
+          : 'https://via.placeholder.com/300x200';
+    },
+    fallbackStyle() {
+      return this.isImageError
+          ? {backgroundColor: '#f5f5f5', display: 'flex', alignItems: 'center', justifyContent: 'center'}
+          : {};
+    },
+    title() {
+      return this.data && this.data.Name || '';
+    },
+    location() {
+      return this.data && this.data.Address ? `${this.data.Address.Name} • ${this.data.Address.City}, ${this.data.Address.State}` : 'Location Unavailable';
+    },
+    startDate() {
+      return this.data && this.formatDate(this.data.StartDate);
+    },
+    endDate() {
+      return this.data && this.formatDate(this.data.EndDate);
+    },
+    numberOfFencers() {
+      return this.data && this.data.NumberOfFencers ? this.data.NumberOfFencers : 0;
+    }
+  },
+  methods: {
+    formatDate(date) {
+      return new Date(date).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+    },
+    imageError() {
+      this.isImageError = true;
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Footer/Foot.stories.js

@@ -0,0 +1,11 @@
+import Footer from './Footer.vue';
+
+export default {
+    title: 'Organisms/Footers/Footer',
+    component: Footer,
+};
+
+export const Default = () => ({
+    components: { Footer },
+    template: '<Footer />',
+});