@codecavepro/brand 2.7.5 → 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/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.5",
+  "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",