@vcita/design-system 1.3.2 → 1.3.3

package/src/components/VcRadioGroup/VcRadioGroup.spec.js

@@ -138,4 +138,32 @@ describe("VcRadioGroup.vue", () => {
         expect(customDataQaEl).toBeInTheDocument();
     });
 
+    it("passing disabled prop transfers to radio", async () => {
+        const {container, getByTestId } = renderWithVuetify(VcRadioGroup, {
+            props: {
+                dataQa: 'vc-radio-group',
+                items: generalItems,
+                value: 'all_of_em',
+                disabled: true
+            }
+        })
+
+        const currentSelected = getByTestId('radio-all_of_em');
+        expect(currentSelected.parentElement.parentElement).toHaveClass("v-radio--is-disabled")
+    });
+
+    it("renders as horizontal", async () => {
+        const {container, getByTestId } = renderWithVuetify(VcRadioGroup, {
+            props: {
+                dataQa: 'vc-radio-group',
+                items: generalItems,
+                value: 'all_of_em',
+                isHorizontal: true,
+            }
+        })
+
+        const VcRadioGroupCmp = container.querySelector('.vc-radio-buttons');
+        expect(VcRadioGroupCmp).toHaveClass('v-input--radio-group--row');
+    });
+
 });

package/src/components/VcRadioGroup/VcRadioGroup.stories.js

@@ -54,6 +54,7 @@ const GeneralTemplate = (args, {argTypes}) => ({
           :data-qa="dataQa"
           @change="onChange"
           :disabled="disabled"
+          :is-horizontal="isHorizontal"
       >
         <template v-slot:label-custom>
           custom label by using a slot!
@@ -72,7 +73,8 @@ Playground.args = {
     items: generalItems,
     dataQa: 'VcRadioGroup',
     title: 'radio group title',
-    disabled: false
+    disabled: false,
+    isHorizontal: false
 }
 
 export default {

package/src/components/VcRadioGroup/VcRadioGroup.vue

@@ -7,7 +7,8 @@
         :value="value"
         @change="val => $emit('change', val)"
         hide-details="auto"
-        class="vc-radio-buttons">
+        class="vc-radio-buttons"
+        :row="isHorizontal">
       <VcRadio v-bind="item" v-for="item in items" :key="item.value" :disabled="disabled">
         <template v-slot:label>
           <slot :name="`label-${item.value}`"></slot>
@@ -56,6 +57,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    isHorizontal: {
+      type: Boolean,
+      default: false
     }
   },
 

package/src/components/VcTextField/VcTextField.spec.js

@@ -274,4 +274,17 @@ describe("VcTextField.vue", () => {
         userEvent.click(textField);
         expect(emitted().click.length).toBe(1);
     });
+
+    it("emitted onKeydownEnter event",  () => {
+        const {getByTestId, emitted} = renderWithVuetify(VcTextField, {
+
+            props: {
+                label: "labelText"
+            }
+        });
+
+        const textField = getByTestId('vc-text-field');
+        userEvent.type(textField, '{enter}');
+        expect(emitted().onKeydownEnter.length).toBe(1);
+    });
 });

package/src/components/VcTextField/VcTextField.stories.js

@@ -64,7 +64,8 @@ const TextFieldTemplate = (args, {argTypes}) => ({
                    :google-address-country-options="googleAddressCountryOptions"
                    @click="onClick"
                    @input="onInput"
-                   @onPlaceSelected="onPlaceSelected"/>
+                   @onPlaceSelected="onPlaceSelected"
+                   @onKeydownEnter="onKeydownEnter"/>
       </v-layout>`,
 })
 

package/src/components/VcTextField/VcTextField.vue

@@ -20,7 +20,9 @@
                 :single-line="singleLine"
                 :hide-details="hideDetails"
                 :readonly="readonly"
+                :autofocus="autofocus"
                 @click="$emit('click')"
+                @keydown.enter="onKeydownEnter"
                 @input="(data) => $emit('input',data)">
     <template v-slot:prepend-inner>
       <slot name="prepend-inner">
@@ -138,6 +140,10 @@ export default {
       type: Boolean,
       default: false
     },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
   },
   mounted() {
     if (this.googleAddressAutoComplete) {
@@ -211,6 +217,10 @@ export default {
         }
       }
       this.$emit('onPlaceSelected', {...selectedPlace, googlePlace})
+    },
+    onKeydownEnter(event) {
+      event.preventDefault();
+      this.$emit('onKeydownEnter');
     }
   }
 }

package/src/components/VcTooltip/VcTooltip.stories.js

@@ -18,6 +18,7 @@ const baseProps = {
     disabled: false,
     dataQa: 'VcTooltip',
     defaultSlot: `<v-icon>$info</v-icon>`,
+    closeDelay: 0,
 };
 
 const GeneralTemplate = (args, {argTypes}) => ({
@@ -41,7 +42,8 @@ const GeneralTemplate = (args, {argTypes}) => ({
             :flavor="flavor"
             :dark="dark"
             :disabled="disabled"
-            :data-qa="dataQa">
+            :data-qa="dataQa"
+            :close-delay="closeDelay">
           <template>
             ${args.defaultSlot}
           </template>

package/src/components/VcTooltip/VcTooltip.vue

@@ -9,7 +9,8 @@
         :nudge-left="nudgeLeft"
         :nudge-right="nudgeRight"
         :disabled="disabled"
-        :data-qa="dataQa">
+        :data-qa="dataQa"
+        :close-delay="closeDelay">
 
       <template v-slot:activator="{ on, attrs }">
         <span v-bind="attrs"
@@ -97,6 +98,10 @@ export default {
       type: String,
       default: 'vc-tooltip'
     },
+    closeDelay: {
+      type: Number,
+      default: 0
+    },
   },
   computed: {
     enableHeader() {