@codecavepro/brand 2.7.4 → 2.7.6

package/dist/src/common/Checkbox.vue

@@ -8,18 +8,21 @@ const props = withDefaults(
     label: string
     isRequired?: boolean
     isError?: boolean
-    variant?: 'primary' | 'secondary'
     size?: 'small' | 'medium'
     modelValue?: boolean
   }>(),
   {
     isRequired: false,
     isError: false,
-    variant: 'primary',
-    size: 'medium'
+    size: 'medium',
+    modelValue: false
   }
 )
 
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
 const checkboxSize = computed(() => {
   switch (props.size) {
     case 'small':
@@ -28,6 +31,7 @@ const checkboxSize = computed(() => {
       return 'w-6 h-6 before:w-[0.75em] before:h-[0.75em]'
   }
 })
+
 const labelSize = computed(() => {
   switch (props.size) {
     case 'small':
@@ -36,45 +40,50 @@ const labelSize = computed(() => {
       return 'text-sm'
   }
 })
-const labelBaseClass = 'flex items-center w-fit text-body-primary cursor-pointer'
-const labelVariantClass = computed(() => {
-  switch (props.variant) {
-    case 'secondary':
-      return `${labelBaseClass} ${labelSize.value} gap-2 py-2 px-3 bg-surface-secondary rounded-lg`
-    default:
-      return `${labelBaseClass} ${labelSize.value} gap-3`
-  }
-})
-const inputBaseClass = 'cursor-pointer transition-colors'
-const borderClass = computed(() => {
-  return props.isError ? 'border-error checkbox-error' : 'border-outline-primary-hover hover:border-action'
-});
 
-const inputVariantClass = computed(() => {
-  switch (props.variant) {
-    case 'secondary':
-      return `${inputBaseClass} ${checkboxSize.value} outline-2 outline-surface-quaternary checked:bg-action checked:outline-none hover:outline-action`
-    default:
-       return `${inputBaseClass} ${checkboxSize.value} border-2 ${borderClass.value}`
-  }
-})
+const borderClass = computed(() =>
+  props.isError
+    ? 'border-error checkbox-error'
+    : 'border-outline-primary-hover hover:border-action'
+)
+
+const labelClass = computed(
+  () => `flex items-center w-full ${labelSize.value} text-body-primary cursor-pointer gap-3`
+)
 
-defineEmits(['update:modelValue'])
+const inputClass = computed(
+  () =>
+    `cursor-pointer transition-colors ${checkboxSize.value} border-2 ${borderClass.value}`
+)
+
+const handleChange = (event: Event) => {
+  emit(
+    'update:modelValue',
+    (event.target as HTMLInputElement).checked
+  )
+}
 </script>
 
 <template>
-  <label :for="id" :class="labelVariantClass">
-    <input 
-      :id="id" 
-      type="checkbox" 
-      :autocomplete="id" 
-      :class="inputVariantClass"
+  <label :for="id" :class="labelClass">
+    <input
+      :id="id"
+      type="checkbox"
+      :autocomplete="id"
+      :class="`${inputClass} shrink-0`"
       :data-size="size"
       :checked="modelValue"
-      @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"/>
-    <span class="flex items-center">
-      {{ label }}
-      <AsteriskIcon v-if="isRequired" class="mx-1"/>
+      @change="handleChange"
+    />
+
+    <span class="flex min-w-0 items-start">
+      <span class="min-w-0 break-words">
+        {{ label }}
+      </span>
+      <AsteriskIcon
+        v-if="isRequired"
+        class="mx-1 shrink-0"
+      />
     </span>
   </label>
 </template>

package/dist/src/common/InputText.vue

@@ -25,7 +25,7 @@ defineEmits(['update:modelValue'])
     <input :id="id" :type="type" :autocomplete="autocomplete" :placeholder="placeholder" :required="isRequired" :value="modelValue" @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)" 
     :class="`
         w-full p-3 pt-7 bg-surface-secondary rounded-lg placeholder:text-xs placeholder:text-body-secondary
-        focus:outline-none transition-colors
+        focus:outline-none transition-colors border border-surface-tertiary
         hover:bg-surface-tertiary
         ${isError ? 'text-error input-error focus:text-error' : 'text-hovered focus:text-hovered'}
        `" />

package/dist/src/common/Radio.vue

@@ -18,7 +18,7 @@ const labelClass = computed(() => {
     case 'secondary':
       return `${baseLabelClass} gap-3 p-3 pr-4 bg-surface-primary-transparent rounded-custom border-2 border-surface-quaternary group-hover:bg-surface-tertiary`
     default:
-      return `${baseLabelClass} gap-2 py-2 px-3 bg-surface-secondary rounded-lg`
+      return `${baseLabelClass} gap-2 py-2 px-3 bg-surface-secondary rounded-lg  border border-surface-tertiary`
   }
 })
 

package/dist/src/common/Review.vue

@@ -25,7 +25,7 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
 </script>
 
 <template>
-  <div :class="`mx-1 lg:mx-2 testimonial rounded-custom space-y-2 lg:space-y-3 py-10 px-6 lg:px-11 ${className}`">
+  <div :class="`mx-1 lg:mx-2 testimonial space-y-2 lg:space-y-3 py-10 px-6 lg:px-11 ${className}`">
     <div class="flex flex-col lg:flex-row gap-5 lg:items-center">
       <LazyImage v-if="item.photo.name !== 'no-image.svg'" 
             class="w-12 lg:w-16 h-12 lg:h-16" :src="imageUrl(item.photo.url)"
@@ -55,10 +55,4 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
       <span>{{ item.verification }}</span>
     </div>
   </div>
-</template>
-
-<style scoped>
-.testimonial {
-  backdrop-filter: blur(32px);
-}
-</style>
+</template>

package/dist/src/common/TextField.vue

@@ -24,7 +24,7 @@ defineEmits(['update:modelValue'])
 
 <template>
   <div class="w-full relative">
-    <div :class="`focus-area flex flex-col min-h-[7.5rem] p-3 rounded-lg bg-surface-secondary hover:bg-surface-tertiary transition-colors text-heading 
+    <div :class="`focus-area flex flex-col min-h-[7.5rem] p-3 rounded-lg bg-surface-secondary border border-surface-tertiary hover:bg-surface-tertiary transition-colors text-heading 
       ${isError ? 'input-error' : ''}`">
       <label :for="id" class="font-bold text-sm select-none">
         {{ label }}

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

@@ -59,12 +59,20 @@ const formData = ref({
   linkedinCompanyPage: createFormField('linkedinCompanyPage', ''),
   services: createFormField('services', ''),
   description: createFormField('description', ''),
-  privacyPolicy: {
-    value: false,
-    error: '',
-    label: 'I agree with the privacy policy',
-    required: true
-  }
+  
+ 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 ?? [])
@@ -120,7 +128,9 @@ const resetForm = () => {
   formData.value.linkedinCompanyPage.value = '';
   formData.value.description.value = '';
   formData.value.services.value = '';
-  formData.value.privacyPolicy.value = false;
+
+  formData.value.consentToProcess.value = false;
+  formData.value.communicationConsent.value = false;
 }
 
 const currentValues = (): ContactFormValues => ({
@@ -131,7 +141,8 @@ const currentValues = (): ContactFormValues => ({
   linkedinCompanyPage: formData.value.linkedinCompanyPage.value,
   services: formData.value.services.value,
   description: formData.value.description.value,
-  privacyPolicyAccepted: formData.value.privacyPolicy.value,
+  consentToProcess: formData.value.consentToProcess.value,
+  communicationConsent: formData.value.communicationConsent.value,
 })
 
 const isSubmitting = ref(false)
@@ -206,7 +217,7 @@ const fields = [
   'firstName',
   'companyName',
   'linkedinCompanyPage',
-  'privacyPolicy'
+  'consentToProcess'
 ]
 
 fields.forEach((key) => {
@@ -248,8 +259,8 @@ fields.forEach((key) => {
         <TextField id="project" v-model="formData.description.value" :isRequired=formData.description.required :label=formData.description.label :isError="!!formData.description.error" :errorMessage="formData.description.error" :placeholder="formData.description.placeholder ?? ''" />
       </fieldset>
       <div class="space-y-2">
-        <Checkbox id="privacy" v-model="formData.privacyPolicy.value" :label="formData.privacyPolicy.label" :isRequired="formData.privacyPolicy.required" :isError="!!formData.privacyPolicy.error" />
-        <Checkbox id="promotions" label="I agree to receive promotional materials" />
+        <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"  />
       </div>
     </div>
     <GlowButton @click="submitContactsForm" title="Leave consultation request" class="self-center lg:self-start" />

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

@@ -30,7 +30,9 @@ export type ContactFormFieldName =
   | 'companyName'
   | 'linkedinCompanyPage'
   | 'services'
-  | 'description';
+  | 'description'
+  | 'consentToProcess'
+  | 'communicationConsent';
 
 /** Labels, placeholders and options for the contact form, CRM-neutral. */
 export type ContactFormDefinition = Record<ContactFormFieldName, CrmFormFieldSpec>;
@@ -44,7 +46,8 @@ export interface ContactFormValues {
   linkedinCompanyPage: string;
   services: string;
   description: string;
-  privacyPolicyAccepted: boolean;
+  consentToProcess: boolean;
+  communicationConsent: boolean;
 }
 
 /* A result rather than a thrown error, deliberately.

package/package.json

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