@codecavepro/brand 2.7.2 → 2.7.4

package/dist/src/common/Button.vue

@@ -21,7 +21,7 @@ const variantClass = computed(() => {
     case 'tertiary':
       return `${buttonBaseClass} px-6 py-1 border border-primary-500 hover:border-hovered`
     case 'icon':
-      return `${buttonBaseClass} p-5 border border-primary-500 hover:border-primary-700`
+      return `${buttonBaseClass} p-5 border border-primary-500 hover:border-hovered`
     case 'ghost':
       return `${linkBaseClass} text-body-primary hover:text-primary-200 active:text-primary-200 font-bold px-6 py-2`
     case 'text':

package/dist/src/common/forms/ContactUsForm.vue

@@ -135,7 +135,7 @@ const currentValues = (): ContactFormValues => ({
 })
 
 const isSubmitting = ref(false)
-
+const isFormSubmitted = ref(false)
 const submitContactsForm = async () => {
   if (isSubmitting.value || !validateForm()) {
     return
@@ -149,12 +149,10 @@ const submitContactsForm = async () => {
     const result = await props.client.submit(values)
 
     if (result.ok) {
+      isFormSubmitted.value = true
       resetForm()
       showAlert('success')
     } else {
-      /* The previous code logged the failure and showed nothing, so a visitor
-       * whose enquiry never sent had no way to know. The wording below is a
-       * placeholder for a writer -- see CCWEB2-325. */
       showAlert('error')
     }
 
@@ -189,6 +187,41 @@ watch(isAlertVisible, () => {
     })
 })
 
+const validateField = (field) => {
+  if (isFormSubmitted.value) {
+    field.error = ''
+    return
+  }
+
+  if (field.required && !field.value) {
+    field.error = 'This field is required'
+    return
+  }
+
+  field.error = ''
+}
+
+const fields = [
+  'email',
+  'firstName',
+  'companyName',
+  'linkedinCompanyPage',
+  'privacyPolicy'
+]
+
+fields.forEach((key) => {
+  watch(
+    () => formData.value[key].value,
+    (value) => {
+      if (isFormSubmitted.value && value) {
+        isFormSubmitted.value = false
+      }
+
+      validateField(formData.value[key])
+    }
+  )
+})
+
 </script>
 
 <template>
@@ -220,18 +253,18 @@ watch(isAlertVisible, () => {
       </div>
     </div>
     <GlowButton @click="submitContactsForm" title="Leave consultation request" class="self-center lg:self-start" />
-    <div v-show="isAlertVisible" class="border border-action group absolute bottom-19.25 md:fixed z-50 left-1/2 -translate-x-1/2 md:top-24 form-alert flex gap-2 md:gap-8 items-center justify-between w-full h-fit max-w-139 bg-surface-secondary p-4 md:px-6 md:py-2.5 rounded-3xl">
+  </form>
+  <div v-show="isAlertVisible" class="border border-action group absolute bottom-19.25 md:fixed z-350 left-1/2 -translate-x-1/2 md:top-40 form-alert flex gap-2 md:gap-8 items-center justify-between w-full h-fit max-w-139 bg-surface-secondary p-4 md:px-6 md:py-2.5 rounded-3xl">
       <div v-if="alertKind === 'success'" class="w-8 h-8">
         <component :is="SuccessIcon" class="w-8 h-8" />
       </div>
-      <p class="text-sm md:text-lg font-bold text-heading md:max-w-sm">
+      <p class="text-sm md:text-lg font-bold text-heading md:max-w-sm ">
         {{ alertKind ? ALERT_TEXT[alertKind] : '' }}
       </p>
       <button @click="alertKind = null" class="group-hover:text-action text-heading transition-colors cursor-pointer">
         <component :is="CloseIcon" />
       </button>
     </div>
-  </form>
 </template>
 
 <style scoped>

package/dist/src/header/mobile-menu.vue

@@ -75,9 +75,9 @@ const handleCloseMenu = () => {
 
 <template>
   <div>
-    <div :class="`fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl border-b border-surface-quaternary`">
-      <div :class="`h-full px-5 ${isMenuOpen ? 'pb-5' : 'pb-0'} flex flex-col gap-2 transition-all`">
-        <div class="flex justify-between items-center py-1.5">
+    <div class="fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl border-b border-surface-quaternary">
+      <div :class="`px-5 ${isMenuOpen ? 'pb-5' : 'pb-0'} flex flex-col gap-2 transition-all max-h-screen`">
+        <div class="flex justify-between items-center py-1.5 shrink-0">
           <a :href="homeHref" class="px-1.5 hover:opacity-80 transition-opacity">
             <img :src="logo" alt="CODECAVE" />
           </a>
@@ -85,25 +85,28 @@ const handleCloseMenu = () => {
             <span></span>
           </button>
         </div>
-        <nav v-if="isMenuOpen" class="h-full text-sm flex-1 overflow-y-auto min-h-0">
-          <div v-if="isServicesOpen">
-            <h2 class="text-center font-bold text-body-primary py-2.5">
+        <nav v-if="isMenuOpen" class="flex-1 min-h-0 overflow-y-auto text-sm">
+          <div v-if="isServicesOpen" class="h-full flex flex-col min-h-0">
+            <h2 class="text-center font-bold text-body-primary py-2.5 shrink-0">
               {{ servicesItem?.submenuTitle }}
             </h2>
-            <slot name="services" />
-            <button class="pt-4" @click="isServicesOpen = false">
-              <component class="w-11 h-11 text-action" :is="BackIcon" />
+            <div class="flex-1 min-h-0 overflow-y-auto">
+              <slot name="services" />
+            </div>
+
+            <button class="pt-4 shrink-0" @click="isServicesOpen = false">
+              <component :is="BackIcon" class="w-11 h-11 text-action" />
             </button>
           </div>
-          <ul v-else class="h-full flex flex-col items-center gap-3 justify-around px-4 pt-2">
+          <ul v-else class="flex flex-col items-center gap-3 px-4 pt-2 overflow-y-auto">
             <li v-for="(item, index) in items" :key="index">
               <div v-if="item.submenu?.length">
-                <Button :title="item.name" variant="ghost" @click="isServicesOpen = true" class="transition-transform duration-150 pr-1">
-                  <Shevron class="rotate-270 ml-1" />
+                <Button :title="item.name" variant="ghost" class="pr-1 transition-transform duration-150" @click="isServicesOpen = true">
+                  <Shevron class="ml-1 rotate-270" />
                 </Button>
               </div>
               <Button v-else-if="item.emphasis" as="link" :href="item.link" :title="item.mobileTitle ?? item.name" variant="tertiary" @click="handleCloseMenu" />
-              <Button v-else as="link" variant="ghost" :title="item.mobileTitle ?? item.name" :href="item.link" />
+              <Button v-else as="link" variant="ghost" :title="item.mobileTitle ?? item.name" :href="item.link" @click="handleCloseMenu" />
             </li>
           </ul>
         </nav>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "2.7.2",
+  "version": "2.7.4",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",