@dcrackel/meyersquaredui 1.0.82 → 1.0.85

package/dist/style.css

@@ -1 +1 @@
-.border-gradient-rounded-1{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#ff7a00,#a3412a);background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:background-size .5s ease-in-out,color .5s ease-in-out}.border-gradient-rounded-1:hover{background:linear-gradient(to right,#ff7a00,#ffa238);color:#fff}.border-gradient-rounded-2{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#009dff,#25e07c);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.border-gradient-rounded-2:hover{background:linear-gradient(to right,#009dff,#25e07c);color:#fff}@keyframes slideDown-eb116240{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideUp-eb116240{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.animate-slideDown[data-v-eb116240]{animation:slideDown-eb116240 .5s ease forwards}.animate-slideUp[data-v-eb116240]{animation:slideUp-eb116240 .5s ease forwards}section[data-v-bae6ab08]{max-width:150px}
+.border-gradient-rounded-1{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#ff7a00,#a3412a);background-clip:padding-box,border-box;background-origin:padding-box,border-box;transition:background-size .5s ease-in-out,color .5s ease-in-out}.border-gradient-rounded-1:hover{background:linear-gradient(to right,#ff7a00,#ffa238);color:#fff}.border-gradient-rounded-2{border:1px solid transparent;background:linear-gradient(to right,#000,#000),linear-gradient(to right,#009dff,#25e07c);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.border-gradient-rounded-2:hover{background:linear-gradient(to right,#009dff,#25e07c);color:#fff}@keyframes slideDown-4fad9962{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideUp-4fad9962{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.animate-slideDown[data-v-4fad9962]{animation:slideDown-4fad9962 .5s ease forwards}.animate-slideUp[data-v-4fad9962]{animation:slideUp-4fad9962 .5s ease forwards}section[data-v-bae6ab08]{max-width:150px}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.82",
+  "version": "1.0.85",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",
@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "npm version patch && vite build && build:tailwind",
+    "build": "npm version patch && vite build",
     "publish:package": "npm publish",
     "preview": "vite preview",
     "build-storybook": "npm run build:tailwind && storybook build",

package/src/index.js

@@ -14,6 +14,7 @@ export { default as TournamentHeader } from './stories/Organisms/Headers/Tournam
 export { default as ScrollNav } from './stories/Organisms/Headers/ScrollNav/ScrollNav.vue'
 export { default as TournamentDetailsBanner } from './stories/Organisms/HeroBanners/TournamentDetails/TournamentDetailsBanner.vue'
 export { default as TournamentBanner } from './stories/Organisms/HeroBanners/Tournaments/TournamentBanner.vue'
+export { default as ContactUsForm } from './stories/Organisms/Forms/ContactUsForm/ContactUsForm.vue'
 
 
 export { default as ArticleCard } from './stories/Organisms/Cards/ArticleCard/ArticleCard.vue'

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

@@ -11,7 +11,7 @@ export default {
     tag: {
       type: String,
       default: 'p',
-      validator: (value) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'].includes(value),
+      validator: (value) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div', 'label'].includes(value),
     },
     size: {
       type: String,

package/src/stories/Organisms/Forms/ContactUsForm/ContactUsForm.stories.js

@@ -0,0 +1,20 @@
+import ContactUsForm from './ContactUsForm.vue';
+
+export default {
+    title: 'Organisms/Forms/ContactUsForm',
+    component: ContactUsForm,
+    argTypes: {
+        onSubmit: { action: 'submit' },
+    },
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { ContactUsForm },
+    setup() {
+        return { args };
+    },
+    template: '<ContactUsForm v-bind="args" @submit="args.onSubmit" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/stories/Organisms/Forms/ContactUsForm/ContactUsForm.vue

@@ -0,0 +1,80 @@
+<template>
+  <section class="">
+    <BaseText type="h2" size="2xl" weight="bold" class="mb-4">Contact Us</BaseText>
+    <BaseText type="p" size="md" weight="normal" class="mb-6">We are here to help. Please provide the necessary details, and we will get back to you as soon as possible.</BaseText>
+
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+      <!-- Subject Input -->
+      <div>
+        <BaseText type="label" size="md" weight="bold" class="mb-2">Your Email</BaseText>
+        <InputField
+            id="fromEmail"
+            v-model="formData.fromEmail"
+            type="text"
+            placeholder="Enter Your Email"
+            color="white"
+        />
+      </div>
+
+      <div>
+        <BaseText type="label" size="md" weight="bold" class="mb-2">Subject</BaseText>
+        <InputField
+            id="subject"
+            v-model="formData.subject"
+            type="text"
+            placeholder="Enter subject"
+            color="white"
+        />
+      </div>
+
+      <!-- Message Textarea -->
+      <div>
+        <BaseText type="label" size="md" weight="bold" class="mb-2">Message</BaseText>
+        <textarea
+            id="message"
+            v-model="formData.message"
+            rows="5"
+            class="mt-1 block w-full h-52 p-2 border border-secondary rounded-md focus:ring-accent focus:border-accent resize-none placeholder-primary"
+            placeholder="Enter your message"
+        ></textarea>
+      </div>
+
+      <!-- Submit Button -->
+      <div class="flex justify-end">
+        <button
+            type="submit"
+            class="bg-primary text-white py-2 px-4 rounded-md hover:bg-accent focus:outline-none focus:ring-2 focus:ring-accent"
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script>
+import InputField from "../../../Atoms/InputField/InputField.vue";
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: "ContactUsForm",
+  components: {
+    BaseText,
+    InputField,
+  },
+  data() {
+    return {
+      formData: {
+        fromEmail: "",
+        subject: "",
+        message: "",
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$emit('submit:form', this.formData)
+    },
+  },
+};
+</script>

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

@@ -1,4 +1,5 @@
 <template>
+  <div class="slideDown slideUp"></div>
   <nav
       v-show="navVisible"
       class="fixed top-0 left-0 w-full bg-white shadow-md z-50"