@codecavepro/brand 2.7.1 → 2.7.3

package/dist/src/common/SubNavbar.vue

@@ -32,13 +32,13 @@ if (
     aria-label="Section"
   >
     <div class="ds-subnav-inner">
-      <ul class="flex w-max min-w-full flex-nowrap">
+      <ul>
         <li
           v-for="item in items"
           :key="item.name"
         >
           <a
-            class="btn btn-ghost whitespace-nowrap"
+            class="ds-subnav-link"
             :href="item.href"
             :aria-current="item.name === current ? 'page' : undefined"
           >
@@ -48,4 +48,84 @@ if (
       </ul>
     </div>
   </nav>
-</template>
+</template>
+
+<style>
+.ds-subnav {
+  border-bottom: 1px solid var(--color-surface-quaternary);
+  background: var(--color-surface-primary-transparent);
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+}
+
+.ds-subnav-inner {
+  box-sizing: border-box;
+  max-width: var(--max-width-desktop);
+  margin: 0 auto;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+@media (min-width: 768px) {
+  .ds-subnav-inner {
+    padding-left: var(--gutter-md);
+    padding-right: var(--gutter-md);
+  }
+}
+
+@media (min-width: 1280px) {
+  .ds-subnav-inner {
+    padding-left: var(--gutter-xl);
+    padding-right: var(--gutter-xl);
+  }
+}
+
+/* center links when there is enough space */
+.ds-subnav ul {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  /* allow overflow while staying centered */
+  width: max-content;
+  min-width: 100%;
+
+  /* prevents wrapping */
+  flex-wrap: nowrap;
+}
+
+.ds-subnav li {
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.ds-subnav-link {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--control-height);
+  padding: 0.5rem 1.5rem;
+  border-radius: var(--radius-pill);
+  color: var(--color-body-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--leading-body);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--transition-colors);
+}
+
+.ds-subnav-link:hover,
+.ds-subnav-link:active,
+.ds-subnav-link[aria-current="page"] {
+  color: var(--color-hovered);
+}
+</style>

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/package.json

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