Merge branch 'develop' into feature/203_adres_component_tweaks

OnroerendErfgoed · Jan 24, 2024 · 4195128 · 4195128
2 parents 3e3df9d + 2dc3e3e
commit 4195128
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/__tests__/InputPhone.cy.ts b/src/__tests__/InputPhone.cy.ts
@@ -102,6 +102,34 @@ describe('InputPhone', () => {
     cy.mount(TestComponent);
   });
 
+  it('sets default prefix classes', () => {
+    cy.mount(TestComponent);
+    cy.dataCy('prefix').should('have.class', 'vl-col--1-6 vl-col--2-6--m vl-col--3-6--xs');
+  });
+
+  it('sets default input field classes', () => {
+    cy.mount(TestComponent);
+    cy.dataCy('input-phone').should('have.class', 'vl-col--5-6 vl-col--4-6--m vl-col--3-6--xs');
+  });
+
+  it('sets configured prefix classes', () => {
+    cy.mount(TestComponent, {
+      props: {
+        prefixClass: 'test',
+      },
+    });
+    cy.dataCy('prefix').should('have.class', 'test');
+  });
+
+  it('sets configured input field classes', () => {
+    cy.mount(TestComponent, {
+      props: {
+        inputFieldClass: 'test',
+      },
+    });
+    cy.dataCy('input-phone').should('have.class', 'test');
+  });
+
   describe('BE', () => {
     it('renders a placeholder according to selected country', () => {
       cy.mount(TestComponent);

diff --git a/src/components/dumb/InputPhone.vue b/src/components/dumb/InputPhone.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="input-phone vl-grid" data-cy="input-phone-wrapper">
-    <div class="vl-col--1-6 vl-col--2-6--m vl-col--3-6--xs">
+    <div :class="prefixClass" data-cy="prefix">
       <vl-multiselect
         v-bind="$attrs"
         v-model="countryCode"
@@ -29,7 +29,7 @@
       data-cy="input-phone"
       :mod-error="(phoneNumberValue && inputTouched && !phoneNumberParsed?.isValid()) || $attrs['mod-error']"
       :placeholder="phoneNumberExample"
-      class="vl-col--5-6 vl-col--4-6--m vl-col--3-6--xs"
+      :class="inputFieldClass"
       type="tel"
       @blur="inputTouched = true"
     ></vl-input-field>
@@ -63,6 +63,14 @@ const props = withDefaults(defineProps<IInputPhoneProps>(), {
 });
 const emit = defineEmits(['update:modelValue']);
 
+// Classes
+const prefixClass = computed(() =>
+  props.prefixClass ? props.prefixClass : 'vl-col--1-6 vl-col--2-6--m vl-col--3-6--xs'
+);
+const inputFieldClass = computed(() =>
+  props.inputFieldClass ? props.inputFieldClass : 'vl-col--5-6 vl-col--4-6--m vl-col--3-6--xs'
+);
+
 // Country code
 const countryCodeList = ref<ICountryCode[]>([
   { value: '+32', description: '(+32) België', code: 'BE' },

diff --git a/src/models/input-phone.ts b/src/models/input-phone.ts
@@ -3,6 +3,8 @@ import type { CountryCode } from 'libphonenumber-js';
 export interface IInputPhoneProps {
   id: string;
   modelValue: string;
+  prefixClass: string;
+  inputFieldClass: string;
 }
 
 export interface ICountryCode {