@codecavepro/brand 3.0.1 → 3.2.0

package/dist/src/common/BrandNav.vue

@@ -237,7 +237,7 @@ withDefaults(defineProps<{
   position: absolute;
   top: 100%;
   left: 0;
-  margin-top: 13px;
+  margin-top: 14px;
   width: max-content;
   opacity: 0;
   visibility: hidden;
@@ -245,6 +245,8 @@ withDefaults(defineProps<{
   padding: 1.25rem;
    z-index: 100;
   background: var(--color-surface-primary);
+  border: 1px solid var(--color-surface-quaternary);
+  border-top: 0px;
   -webkit-backdrop-filter: blur(24px);
   backdrop-filter: blur(24px);
   transition: opacity 0.2s ease, visibility 0.2s;

package/dist/src/common/SubNavbar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, onMounted, nextTick } from 'vue';
+import Shevron from '../assets/icons/shevron.vue';
 import { type MenuItem } from '../lib/menus/menuTypes.ts';
 
 interface Props {
@@ -10,48 +11,131 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const openItem = ref<string | null>(null);
+
+const itemRefs = new Map<string, HTMLElement>();
+
+const submenuStyle = ref({
+  left: '0px',
+  width: '200px'
+});
+
 const items = computed<MenuItem[]>(() => {
   return props.section ? props.subMenu[props.section] ?? [] : [];
 });
 
-if (
-  props.current &&
-  props.section &&
-  !(props.subMenu[props.section] ?? []).some(i => i.name === props.current)
-) {
-  throw new Error(
-    `SubNav: no item named "${props.current}" in SUB["${props.section}"]`
+const activeSubmenu = computed(() => {
+  const item = items.value.find(i => i.name === openItem.value);
+  return item?.subMenu ?? [];
+});
+
+function setItemRef(name: string, el: Element | null) {
+  if (el instanceof HTMLElement) {
+    itemRefs.set(name, el);
+  } else {
+    itemRefs.delete(name);
+  }
+}
+
+function updateSubmenuPosition(itemName: string) {
+  if (window.innerWidth < 768) {
+    submenuStyle.value = {
+      left: '0px',
+      width: '100vw'
+    };
+    return;
+  }
+
+  const el = itemRefs.get(itemName);
+  const nav = document.querySelector('.ds-subnav');
+
+  if (!el || !nav) {
+    return;
+  }
+
+  const elRect = el.getBoundingClientRect();
+  const navRect = nav.getBoundingClientRect();
+
+  submenuStyle.value = {
+    left: `${elRect.left + elRect.width / 2 - navRect.left}px`,
+    width: `${elRect.width}px`
+  };
+}
+
+function openSubmenu(item: MenuItem) {
+  if (!item.subMenu?.length) {
+    return;
+  }
+
+  if (openItem.value === item.name) {
+    openItem.value = null;
+    return;
+  }
+
+  updateSubmenuPosition(item.name);
+  openItem.value = item.name;
+}
+function closeSubmenu(event?: Event) {
+  event?.stopPropagation();
+  openItem.value = null;
+}
+async function initSubmenu() {
+  await nextTick();
+
+  const activeItem = items.value.find(
+    item => item.name === props.current && item.subMenu?.length
   );
+
+  if (!activeItem) {
+    openItem.value = null;
+    return;
+  }
+
+  updateSubmenuPosition(activeItem.name);
+  openItem.value = activeItem.name;
 }
+
+onMounted(async () => {
+  await initSubmenu();
+});
+
 </script>
 
 <template>
-  <nav
-    v-if="items.length"
-    class="ds-subnav"
-    aria-label="Section"
-  >
-    <div class="ds-subnav-inner">
+  <nav v-if="items.length" class="ds-subnav" aria-label="Section">
+    <div class="ds-subnav-inner" :class="{ 'is-submenu-open': openItem }">
       <ul>
-        <li
-          v-for="item in items"
-          :key="item.name"
-        >
-          <a
-            class="ds-subnav-link"
-            :href="item.href"
-            :aria-current="item.name === current ? 'page' : undefined"
-          >
-            {{ item.label }}
-          </a>
+        <li v-for="item in items" :key="item.name" :ref="el => setItemRef(item.name, el)">
+          <div class="ds-subnav-item" @click="item.subMenu?.length ? openSubmenu(item) : closeSubmenu()">
+            <component :is="item.href ? 'a' : 'span'" class="ds-subnav-link" :href="item.href" :aria-current="item.name === current ? 'page' : undefined">
+              {{ item.label }}
+            </component>
+
+            <span v-if="item.subMenu?.length" class="ds-subnav-toggle" aria-hidden="true">
+              <Shevron class="ds-subnav-chevron" :class="{ 'is-open': openItem === item.name }" />
+            </span>
+          </div>
         </li>
       </ul>
     </div>
+
+    <Transition name="submenu">
+      <div class="ds-submenu-overlay" :class="{ 'is-open': activeSubmenu.length }" :style="submenuStyle">
+        <ul class="ds-submenu-list">
+          <li v-for="(subItem, index) in activeSubmenu" :key="subItem.name" class="ds-submenu-item" :style="{ '--delay': `${index * 80}ms` }">
+            <a :href="subItem.href" @click="closeSubmenu" class="ds-submenu-link">
+              {{ subItem.label }}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </Transition>
   </nav>
 </template>
 
 <style>
 .ds-subnav {
+  position: relative;
   border-bottom: 1px solid var(--color-surface-quaternary);
   background: var(--color-surface-primary-transparent);
   -webkit-backdrop-filter: blur(24px);
@@ -67,6 +151,10 @@ if (
   overflow-y: hidden;
 }
 
+.ds-subnav-inner.is-submenu-open {
+  overflow: hidden;
+}
+
 @media (min-width: 768px) {
   .ds-subnav-inner {
     padding-left: var(--gutter-md);
@@ -81,7 +169,6 @@ if (
   }
 }
 
-/* center links when there is enough space */
 .ds-subnav ul {
   display: flex;
   align-items: center;
@@ -89,13 +176,11 @@ if (
 
   margin: 0;
   padding: 0;
+
   list-style: none;
 
-  /* allow overflow while staying centered */
   width: max-content;
   min-width: 100%;
-
-  /* prevents wrapping */
   flex-wrap: nowrap;
 }
 
@@ -104,6 +189,12 @@ if (
   flex-shrink: 0;
 }
 
+.ds-subnav-item {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
 .ds-subnav-link {
   box-sizing: border-box;
   display: inline-flex;
@@ -125,7 +216,139 @@ if (
 
 .ds-subnav-link:hover,
 .ds-subnav-link:active,
-.ds-subnav-link[aria-current="page"] {
+.ds-subnav-link[aria-current='page'] {
+  color: var(--color-hovered);
+}
+
+.ds-subnav-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  margin-left: -0.75rem;
+  padding: 0;
+
+  border: 0;
+  background: transparent;
+  pointer-events: none;
+}
+
+.ds-subnav-chevron {
+  width: 1rem;
+  height: 1rem;
+
+  color: var(--color-heading);
+  pointer-events: none;
+
+  transition:
+    transform 0.25s ease,
+    color 0.25s ease;
+
+}
+
+.ds-subnav-item:hover .ds-subnav-chevron {
   color: var(--color-hovered);
 }
+
+.ds-subnav-chevron.is-open {
+  transform: rotate(180deg);
+}
+
+.ds-submenu-overlay {
+  position: absolute;
+  top: calc(100% + 1px);
+  transform: translateX(-50%);
+  z-index: 100;
+
+  min-width: max-content;
+
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+
+  background: var(--color-surface-primary);
+
+  border: 1px solid var(--color-surface-quaternary);
+  border-top: 0;
+  border-radius: 0 0 1rem 1rem;
+}
+
+.ds-submenu-overlay.is-open {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ds-submenu-list {
+  display: flex;
+  flex-direction: column;
+
+  margin: 0;
+  padding: 0.5rem 0;
+
+  min-width: 200px;
+  max-width: 280px;
+
+  list-style: none;
+}
+
+.ds-submenu-item {
+  margin: 0;
+  padding: 0;
+}
+
+.ds-submenu-link {
+  box-sizing: border-box;
+  --delay: 0ms;
+  display: block;
+
+  padding: 0.5rem 1.5rem;
+
+  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-align: center;
+  text-decoration: none;
+
+  opacity: 0;
+  transform: translateY(8px);
+
+  animation: submenuTextIn 300ms ease forwards;
+  animation-delay: var(--delay);
+
+  transition: color var(--transition-colors);
+}
+
+.ds-submenu-link:hover {
+  color: var(--color-hovered);
+}
+
+@keyframes submenuTextIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 767px) {
+  .ds-submenu-overlay {
+    left: 0 !important;
+    width: 100vw !important;
+    transform: none;
+  }
+
+  .ds-submenu-list {
+    width: 100%;
+    max-width: none;
+  }
+}
 </style>

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

@@ -54,25 +54,24 @@ const createFormField = <T,>(name: keyof ContactFormDefinition, value: T): FormF
 const formData = ref({
   email: createFormField('email', ''),
   firstName: createFormField('firstName', ''),
-  lastName: createFormField('lastName', ''),
   companyName: createFormField('companyName', ''),
   linkedinCompanyPage: createFormField('linkedinCompanyPage', ''),
   services: createFormField('services', ''),
   description: createFormField('description', ''),
-  
- consentToProcess: {
-  value: false,
-  error: '',
-  label: props.definition.consentToProcess.label,
-  required: props.definition.consentToProcess.required,
-},
-
-communicationConsent: {
-  value: false,
-  error: '',
-  label: props.definition.communicationConsent.label,
-  required: props.definition.communicationConsent.required,
-},
+
+  consentToProcess: {
+    value: false,
+    error: '',
+    label: props.definition.consentToProcess.label,
+    required: props.definition.consentToProcess.required,
+  },
+
+  communicationConsent: {
+    value: false,
+    error: '',
+    label: props.definition.communicationConsent.label,
+    required: props.definition.communicationConsent.required,
+  },
 })
 
 const services = computed(() => props.definition.services.options ?? [])
@@ -123,7 +122,6 @@ const validateRequiredFields = () => {
 const resetForm = () => {
   formData.value.email.value = '';
   formData.value.firstName.value = '';
-  formData.value.lastName.value = '';
   formData.value.companyName.value = '';
   formData.value.linkedinCompanyPage.value = '';
   formData.value.description.value = '';
@@ -136,7 +134,6 @@ const resetForm = () => {
 const currentValues = (): ContactFormValues => ({
   email: formData.value.email.value,
   firstName: formData.value.firstName.value,
-  lastName: formData.value.lastName.value,
   companyName: formData.value.companyName.value,
   linkedinCompanyPage: formData.value.linkedinCompanyPage.value,
   services: formData.value.services.value,
@@ -233,6 +230,22 @@ fields.forEach((key) => {
   )
 })
 
+const companyNamePattern = /[^\p{L}\p{N} &]/u;
+const firstNamePattern = /[^\p{L} ]/u;
+
+const createSanitizer = (pattern) => {
+  return (value) => value.replace(pattern, '');
+};
+
+const sanitizeCompanyName = createSanitizer(companyNamePattern);
+const sanitizeFirstName = createSanitizer(firstNamePattern);
+
+const preventInvalidInput = (event, pattern) => {
+  if (event.data && pattern.test(event.data)) {
+    event.preventDefault();
+  }
+};
+
 </script>
 
 <template>
@@ -241,11 +254,10 @@ fields.forEach((key) => {
       <fieldset class="space-y-2">
         <InputText id="email" v-model="formData.email.value" :isRequired=formData.email.required :label=formData.email.label type="email" :isError="!!formData.email.error" :errorMessage="formData.email.error" :placeholder="formData.email.placeholder ?? ''" autocomplete="email" />
         <div class="flex flex-col xl:flex-row gap-2">
-          <InputText id="firstname" v-model="formData.firstName.value" :isRequired=formData.firstName.required :label=formData.firstName.label type="text" :isError="!!formData.firstName.error" :errorMessage="formData.firstName.error" :placeholder="formData.firstName.placeholder ?? ''" autocomplete="given-name" />
-          <InputText id="lastname" v-model="formData.lastName.value" :isRequired=formData.lastName.required :label=formData.lastName.label type="text" :isError="!!formData.lastName.error" :errorMessage="formData.lastName.error" :placeholder="formData.lastName.placeholder ?? ''" autocomplete="family-name" />
+          <InputText id="firstname" v-model="formData.firstName.value" @beforeinput="event => preventInvalidInput(event, firstNamePattern)" @update:model-value="value => { formData.firstName.value = sanitizeFirstName(value) }" :isRequired="formData.firstName.required" :label="formData.firstName.label" type="text" :isError="!!formData.firstName.error" :errorMessage="formData.firstName.error" :placeholder="formData.firstName.placeholder ?? ''" autocomplete="given-name" />
+          <InputText id="companyName" v-model="formData.companyName.value" @beforeinput="event => preventInvalidInput(event, companyNamePattern)" @update:model-value="value => { formData.companyName.value = sanitizeCompanyName(value) }" :isRequired="formData.companyName.required" :label="formData.companyName.label" type="text" :isError="!!formData.companyName.error" :errorMessage="formData.companyName.error" :placeholder="formData.companyName.placeholder ?? ''" />
         </div>
         <div class="flex flex-col xl:flex-row gap-2">
-          <InputText id="companyName" v-model="formData.companyName.value" :isRequired=formData.companyName.required :label=formData.companyName.label type="text" :isError="!!formData.companyName.error" :errorMessage="formData.companyName.error" :placeholder="formData.companyName.placeholder ?? ''" />
           <InputText id="linkedinCompanyPage" v-model="formData.linkedinCompanyPage.value" :isRequired=formData.linkedinCompanyPage.required :label=formData.linkedinCompanyPage.label type="text" :isError="!!formData.linkedinCompanyPage.error" :errorMessage="formData.linkedinCompanyPage.error" :placeholder="formData.linkedinCompanyPage.placeholder ?? ''" />
         </div>
       </fieldset>
@@ -260,22 +272,22 @@ fields.forEach((key) => {
       </fieldset>
       <div class="space-y-2">
         <Checkbox id="privacy" v-model="formData.consentToProcess.value" :label="formData.consentToProcess.label" :isRequired="formData.consentToProcess.required" :isError="!!formData.consentToProcess.error" />
-        <Checkbox id="promotions" v-model="formData.communicationConsent.value" :label="formData.communicationConsent.label" :isRequired="formData.communicationConsent.required" :isError="!!formData.communicationConsent.error"  />
+        <Checkbox id="promotions" v-model="formData.communicationConsent.value" :label="formData.communicationConsent.label" :isRequired="formData.communicationConsent.required" :isError="!!formData.communicationConsent.error" />
       </div>
     </div>
     <GlowButton @click="submitContactsForm" title="Leave consultation request" class="self-center lg:self-start" />
   </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 ">
-        {{ 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 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 ">
+      {{ 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>
 </template>
 
 <style scoped>

package/dist/src/helpers/form-validator.ts

@@ -1,9 +1,10 @@
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-const linkedInRegex = /^https?:\/\/([a-z]{2,3}\.)?linkedin\.com\/.*$/gim
+const linkedInRegex = /^https?:\/\/([a-z]{2,3}\.)?linkedin\.com\/.*$/im
 
 export const isCorrectEmailFormat = (email: string | null): boolean => {
   return !!email && emailRegex.test(email)
 }
-export const isCorrectLinkedInFormat = (linkedIn: string | null) : boolean => {
-   return !!linkedIn && linkedInRegex.test(linkedIn);
+
+export const isCorrectLinkedInFormat = (linkedIn: string | null): boolean => {
+  return !!linkedIn && linkedInRegex.test(linkedIn)
 }

package/dist/src/lib/crm/types.ts

@@ -26,7 +26,6 @@ export interface CrmFormFieldSpec {
 export type ContactFormFieldName =
   | 'email'
   | 'firstName'
-  | 'lastName'
   | 'companyName'
   | 'linkedinCompanyPage'
   | 'services'
@@ -41,7 +40,6 @@ export type ContactFormDefinition = Record<ContactFormFieldName, CrmFormFieldSpe
 export interface ContactFormValues {
   email: string;
   firstName: string;
-  lastName: string;
   companyName: string;
   linkedinCompanyPage: string;
   services: string;

package/dist/src/lib/menus/menuTypes.ts

@@ -3,5 +3,6 @@ export interface MenuItem {
   name: string;
   label: string;
   /** Relative to the docs root; the renderer prefixes `up`. */
-  href: string;
+  href?: string;
+  subMenu?: MenuItem[]
 }

package/package.json

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