@vcita/design-system 1.2.1 → 1.2.2

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

@@ -2,6 +2,32 @@ import VcTextFieldCmp from './VcTextField';
 import icons from "../../../init/SvgIcons";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const baseProps = {
+    label: "Label",
+    type: 'text',
+    placeholder: '',
+    value: '',
+    maxlength: 100,
+    hint: '',
+    counter: false,
+    disabled: false,
+    appendIcon: '',
+    rules: [],
+    tooltipContent: '',
+    tooltipHeader: '',
+    tooltipNudgeLeft: 0,
+    tooltipNudgeRight: 0,
+    prefix: '',
+    errorMessages: '',
+    dataQa: 'vc-text-field',
+    hideDetails: 'auto',
+    persistentHint: true,
+    singleLine: false,
+    readonly: false,
+    googleAddressAutoComplete: false,
+    googleAddressCountryOptions: []
+}
+
 const TextFieldTemplate = (args, {argTypes}) => ({
     components: {VcTextField: VcTextFieldCmp},
     props: Object.keys(argTypes),
@@ -12,7 +38,7 @@ const TextFieldTemplate = (args, {argTypes}) => ({
     },
     template: `
       <v-layout column>
-      <p>In the case of using the append icon make sure there is no tooltip content that will override the slot</p>
+      ${args.description}
       <VcTextField :value="value"
                    :maxlength="maxlength"
                    :hint="hint"
@@ -34,6 +60,8 @@ const TextFieldTemplate = (args, {argTypes}) => ({
                    :persistent-hint="persistentHint"
                    :single-line="singleLine"
                    :readonly="readonly"
+                   :google-address-auto-complete="googleAddressAutoComplete"
+                   :google-address-country-options="googleAddressCountryOptions"
                    @click="onClick"
                    @input="onInput"/>
       </v-layout>`,
@@ -41,86 +69,44 @@ const TextFieldTemplate = (args, {argTypes}) => ({
 
 export const Playground = TextFieldTemplate.bind({});
 Playground.args = {
-    label: "Label",
-    type: 'text',
-    placeholder: 'Placeholder',
-    value: '',
-    maxlength: 10,
-    hint: 'Hint',
-    counter: true,
-    disabled: false,
-    appendIcon: '',
-    rules: [],
-    tooltipContent: 'Tooltip content',
-    tooltipHeader: 'Tooltip header',
-    tooltipNudgeLeft: 0,
-    tooltipNudgeRight: 0,
-    prefix: '',
-    errorMessages: '',
-    dataQa: 'vc-text-field',
-    hideDetails: 'auto',
-    persistentHint: true,
-    singleLine: false,
-    readonly: false,
+    ...baseProps,
+    description: 'In the case of using the append icon make sure there is no tooltip content that will override the slot'
 }
 
 export const Prefix = TextFieldTemplate.bind({});
 Prefix.args = {
-    label: "Label",
-    type: 'text',
+    ...baseProps,
     prefix: '$'
 }
 
 export const Placeholder = TextFieldTemplate.bind({});
 Placeholder.args = {
-    label: "Label",
+    ...baseProps,
     placeholder: "Placeholder Text"
 }
 
-const TooltipTemplate = (args, {argTypes}) => ({
-    components: {VcTextField: VcTextFieldCmp},
-    props: Object.keys(argTypes),
-    template: `<div><br/><br/><br/><br/><br/><br/><br/>
-      <VcTextField :value="value"
-                   :maxlength="maxlength"
-                   :hint="hint"
-                   :counter="counter"
-                   :disabled="disabled"
-                   :rules="rules"
-                   :label="label"
-                   :type="type"
-                   :placeholder="placeholder"
-                   :tooltip-content="tooltipContent"
-                   :tooltip-header="tooltipHeader"
-                   :tooltip-nudge-left="tooltipNudgeLeft"
-                   :tooltip-nudge-right="tooltipNudgeRight"
-                   @input="onInput"/></div>`,
-})
-
-export const Tooltip = TooltipTemplate.bind({});
+export const Tooltip = TextFieldTemplate.bind({});
 Tooltip.args = {
-    label: "Label",
+    ...baseProps,
     tooltipHeader: "tooltipHeader",
     tooltipContent: "tooltipContent"
 }
 
 export const Disabled = TextFieldTemplate.bind({});
 Disabled.args = {
-    label: "Label",
-    type: 'text',
+    ...baseProps,
     disabled: true
 }
 export const Hint = TextFieldTemplate.bind({});
 Hint.args = {
-    label: "Label",
-    type: 'text',
+    ...baseProps,
     hint: "Help text"
 }
 
 export const ErrorRules = TextFieldTemplate.bind({});
 ErrorRules.args = {
+    ...baseProps,
     label: "Email",
-    type: 'text',
     rules: [value => !!value || 'Required.', value => {
         const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
         return pattern.test(value) || 'Invalid e-mail.'
@@ -129,53 +115,29 @@ ErrorRules.args = {
 
 export const ErrorMessage = TextFieldTemplate.bind({});
 ErrorMessage.args = {
-    label: "Label",
-    type: 'text',
+    ...baseProps,
     errorMessages: 'Error message'
 }
 
 export const Counter = TextFieldTemplate.bind({});
 Counter.args = {
+    ...baseProps,
     label: "Email",
-    type: 'text',
-    counter: true,
-    maxlength: 100
+    counter: true
 }
 
-const GoogleAutoCompleteTemplate = (args, {argTypes}) => ({
-    components: {VcTextField: VcTextFieldCmp},
-    props: Object.keys(argTypes),
-    template: `<div>
-      <p>To use Google Address Auto Complete, you must have a Google API key.</p>
-      <p>Vue.prototype.$ds = {options: {googleAppKey: 'Google_API_Key'}};</p>
-      <VcTextField :value="value"
-                   :maxlength="maxlength"
-                   :hint="hint"
-                   :counter="counter"
-                   :disabled="disabled"
-                   :rules="rules"
-                   :label="label"
-                   :type="type"
-                   :placeholder="placeholder"
-                   :tooltip-content="tooltipContent"
-                   :tooltip-header="tooltipHeader"
-                   :google-address-auto-complete="googleAddressAutoComplete"
-                   :google-address-country-options="googleAddressCountryOptions"
-                   @input="onInput"
-                   @onPlaceSelected="onPlaceSelected"/>
-    </div>`,
-})
-
-export const GoogleAddressAutocomplete = GoogleAutoCompleteTemplate.bind({});
+export const GoogleAddressAutocomplete = TextFieldTemplate.bind({});
 GoogleAddressAutocomplete.args = {
+    ...baseProps,
     label: "Address",
-    type: 'text',
     googleAddressAutoComplete: true,
     googleAddressCountryOptions: ['us'],
     tooltipHeader: "header",
     tooltipContent: "content",
     hint: "hint",
-    placeholder: "placeholder"
+    placeholder: "placeholder",
+    description: `<p>To use Google Address Auto Complete, you must have a Google API key.</p>
+      <p>Vue.prototype.$ds = {options: {googleAppKey: 'Google_API_Key'}};</p>`
 }
 
 export default {
@@ -187,27 +149,23 @@ export default {
             options: ['number', 'text', 'search'],
             control: {type: 'radio'}
         },
-        disabled: {
-            options: [true, false],
-            control: {type: 'boolean'}
-        },
-        counter: {
-            options: [true, false],
-            control: {type: 'boolean'}
-        },
-        maxlength: {
-            control: {type: 'number'}
-        },
-        value: {
-            control: {type: 'text'}
-        },
-        googleAddressAutoComplete: {
-            control: {type: 'boolean'}
-        },
         appendIcon: {
             options: Object.keys(icons),
             control: {type: 'select'}
         },
+        counter: {table: {category: 'counter'}},
+        maxlength: {table: {category: 'counter'}},
+        rules: {table: {category: 'error'}},
+        hint: {table: {category: 'hint'}},
+        persistentHint: {table: {category: 'hint'}},
+        errorMessages: {table: {category: 'error'}},
+        tooltipContent: {table: {category: 'tooltip'}},
+        tooltipHeader: {table: {category: 'tooltip'}},
+        tooltipNudgeLeft: {table: {category: 'tooltip'}},
+        tooltipNudgeRight: {table: {category: 'tooltip'}},
+        googleAddressAutoComplete: {table: {category: 'google address'}},
+        googleAddressCountryOptions: {table: {category: 'google address'}},
+        description: {table: {disable: true}},
         onInput: {action: 'input', table: {disable: true}},
         onClick: {action: 'click', table: {disable: true}},
     },
@@ -222,6 +180,7 @@ export default {
         },
         docs: {
             page: VcBaseDocs,
+            inlineStories: false, // Opt-out of inline rendering
         },
     },
 };

package/src/components/VcTextField/VcTextField.vue

@@ -1,6 +1,7 @@
 <template>
   <v-text-field class="VcTextInput"
                 dense
+                :class="{'no-label': !label}"
                 :data-qa="dataQa"
                 :label="label"
                 :placeholder="placeholder"
@@ -311,6 +312,9 @@ export default {
     .v-text-field__slot {
       margin-bottom: -14px;
     }
+    &.no-label .v-text-field__slot {
+      margin-bottom: unset;
+    }
   }
 
   &.v-input--is-disabled {

package/src/components/index.js

@@ -64,3 +64,4 @@ export {default as VcTimeSince} from './VcTimeSince/VcTimeSince.vue';
 export {default as VcSearchPicker} from './VcSearchPicker/VcSearchPicker.vue';
 export {default as VcDraggableList} from './VcDraggableList/VcDraggableList.vue';
 export {default as VcTabs} from './VcTabs/VcTabs.vue';
+export {default as VcSideNav} from './VcSideNav/VcSideNav.vue';

package/src/components/list/VcList/pattern/VcMobilePickerPattern.stories.js

@@ -247,8 +247,8 @@ MobileSingleSelectPickerWithAvatars.parameters = {
                    readonly
                    append-icon="$chevron_right"
                    @click="showDialog = true">
-        <template #prepend-inner>
-          [Your selected item implementation]
+        <template #prepend-inner="data">
+          [1. implement selected item]
         </template>
       </VcTextField>
 
@@ -261,21 +261,30 @@ MobileSingleSelectPickerWithAvatars.parameters = {
                        @search="onSearch"
                        style="margin-bottom: 16px"/>
           <VcList :items="items"
-                  :image-path="[pathToEmptyStateImage]"
+                  :image-path="[2. (optional) - pass empty state image]"
                   :empty-list-msg="$t('your.emptyListMsg.here')"
                   @select="onSelect">
-            <template #default="item">
-              [Your item implementation]
+            <template #default="data">
+              [3. your list item implementation]
             </template>
           </VcList>
         </template>
       </VcInputModal>
   </template>
+  
+  /** 
+    TODO: - to get this code running you need to
+    1. Implement selected item - display the current selected item
+    2. Optional - pass empty state image, or you can delete this line 
+    3. Your list item implementation - display each item on the list
+    4. YourPageHere - declare the name of your page
+    5. YourStoreModule - map the items data to the store (the don't have to be called "items") 
+  */
       
   import {mapGetters} from "vuex";
   
   export default {
-        name: "[YourPageHere]",
+        name: "[4. YourPageHere]",
         data() {
             return {
               showDialog: false,
@@ -284,7 +293,7 @@ MobileSingleSelectPickerWithAvatars.parameters = {
             };
         },
         computed: {
-            ...mapGetters("[yourModule]", ["items"]),
+            ...mapGetters("[5. YourStoreModule]", ["items"]),
         },
         methods: {
             onSearch(search) {
@@ -295,7 +304,12 @@ MobileSingleSelectPickerWithAvatars.parameters = {
                 // Handle any other reaction to selection change
             },
         },
-    }`,
+    }
+
+    <style lang="scss" scoped>
+        // Your css here
+    </style>
+`,
             type: "auto",
         },
     },

package/src/components/list/VcListEntity/VcListEntity.stories.js

@@ -1,6 +1,13 @@
 import VcListEntityCmp from './VcListEntity.vue';
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const baseProps = {
+    disabled: false,
+    value: false,
+    title: 'text for <b>storybook</b>',
+    dataQa: 'VcListEntity',
+};
+
 const Template = (args, {argTypes}) => ({
     components: {VcListEntity: VcListEntityCmp},
     props: Object.keys(argTypes),
@@ -10,6 +17,7 @@ const Template = (args, {argTypes}) => ({
     template: `
       <div>
       <VcListEntity :disabled="disabled" v-model="itemValue" :value="itemValue" :title="title"
+                    :data-qa="dataQa"
                     @input="onInput"></VcListEntity>
       </div>`,
     watch: {
@@ -23,27 +31,15 @@ export const Playground = Template.bind({});
 
 // Set default values
 Playground.args = {
-    disabled: false,
-    value: false,
-    title: 'text to <b>storybook</b>'
+    ...baseProps,
 }
 
-const TemplateDisabled = (args, {argTypes}) => ({
-    components: {VcListEntity: VcListEntityCmp},
-    props: Object.keys(argTypes),
-    data: () => ({
-        itemValue: true,
-    }),
-    template: '<div><VcListEntity :disabled="disabled" :value="itemValue" :title="title" /></div>',
-})
-
-export const Disabled = TemplateDisabled.bind({});
+export const Disabled = Template.bind({});
 
 // Set default values
 Disabled.args = {
+    ...baseProps,
     disabled: true,
-    value: false,
-    title: 'text to <b>storybook</b>'
 }
 
 const TemplateWithSlot = (args, {argTypes}) => ({
@@ -54,7 +50,8 @@ const TemplateWithSlot = (args, {argTypes}) => ({
     }),
     template: `
       <div>
-      <VcListEntity :disabled="disabled" :value="itemValue" :title="title">
+      <VcListEntity :disabled="disabled" :value="itemValue" :title="title" :data-qa="dataQa"
+                    @input="onInput">
         <template v-slot:icon>
           <v-icon size="12">home</v-icon>
         </template>
@@ -66,9 +63,7 @@ export const WithSlot = TemplateWithSlot.bind({});
 
 // Set default values
 WithSlot.args = {
-    disabled: false,
-    value: false,
-    title: 'text to <b>storybook</b>'
+    ...baseProps,
 }
 
 

package/src/components/modal/VcConfirmModal/VcConfirmModal.stories.js

@@ -1,6 +1,23 @@
 import VcConfirmModalCmp from './VcConfirmModal';
 import VcModalFooter from "@/components/modal/elements/VcModalFooter";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
+import icons from "../../../../init/SvgIcons";
+
+const baseProps = {
+    showDialog: true,
+    useOffset: true,
+    topTitle: '',
+    title: 'Some header text',
+    subtitle: '',
+    contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    size: 'lg',
+    okButtonLabel: '',
+    cancelButtonLabel: '',
+    headerImage: '',
+    headerIcon: '',
+    loading: false,
+    dataQa: 'VcConfirmModal',
+};
 
 const Template = (args, {argTypes}) => ({
     components: {VcConfirmModal: VcConfirmModalCmp},
@@ -9,13 +26,18 @@ const Template = (args, {argTypes}) => ({
       <div>
       <VcConfirmModal
           :show-dialog="showDialog"
-          :useOffset="useOffset" :topTitle="topTitle"
-          :title="title" :subtitle="subtitle"
+          :useOffset="useOffset" 
+          :topTitle="topTitle"
+          :title="title" 
+          :subtitle="subtitle"
           :header-icon="headerIcon"
+          :header-image="headerImage"
           :content-text="contentText"
           :size="size"
           :ok-button-label="okButtonLabel"
           :cancel-button-label="cancelButtonLabel"
+          :loading="loading"
+          :data-qa="dataQa"
           @onCloseButtonClicked="onCloseButtonClicked"
           @onOkClicked="onOkClicked"
           @onCancelClicked="onCancelClicked"/>
@@ -26,28 +48,15 @@ export const Playground = Template.bind({});
 
 // Set default values
 Playground.args = {
-    showDialog: true,
-    useOffset: true,
-    topTitle: '',
-    title: 'Some header text',
-    subtitle: '',
-    contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    size: 'lg',
-    okButtonLabel: undefined,
-    cancelButtonLabel: undefined,
+    ...baseProps,
 }
 
-export const Danger = Template.bind({});
+export const WithHeaderIcon = Template.bind({});
 
 // Set default values
-Danger.args = {
-    showDialog: true,
-    title: 'Some header text',
-    headerIcon: 'mdi-delete',
-    contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    size: 'lg',
-    buttons: [{label: "Cancel", event: "onCancelClicked", color: "white"},
-        {label: "Archive", event: "onOkClicked", color: "primary"},]
+WithHeaderIcon.args = {
+    ...baseProps,
+    headerIcon: '$trash',
 }
 
 const UsingFooterSlotTemplate = (args, {argTypes}) => ({
@@ -55,9 +64,19 @@ const UsingFooterSlotTemplate = (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     template: `
       <div>
-      <VcConfirmModal :show-dialog="showDialog" :title="title"
-                      :header-icon="headerIcon" :content-text="contentText"
-                      :size="size">
+      <VcConfirmModal :show-dialog="showDialog"
+                      :useOffset="useOffset"
+                      :topTitle="topTitle"
+                      :title="title"
+                      :subtitle="subtitle"
+                      :header-icon="headerIcon"
+                      :header-image="headerImage"
+                      :content-text="contentText"
+                      :size="size"
+                      :ok-button-label="okButtonLabel"
+                      :cancel-button-label="cancelButtonLabel"
+                      :loading="loading"
+                      :data-qa="dataQa">
         <template #footer>
           <VcModalFooter
               :buttons='[
@@ -78,13 +97,8 @@ export const UsingFooterSlot = UsingFooterSlotTemplate.bind({});
 
 // Set default values
 UsingFooterSlot.args = {
-    showDialog: true,
-    title: 'Some header text',
+    ...baseProps,
     headerIcon: 'mdi-delete',
-    contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    size: 'lg',
-    buttons: [{label: "Cancel", event: "onCancelClicked", color: "white"},
-        {label: "Archive", event: "onOkClicked", color: "primary"},]
 }
 
 const TemplateWithImage = (args, {argTypes}) => ({
@@ -95,30 +109,32 @@ const TemplateWithImage = (args, {argTypes}) => ({
             return require('@/stories/assets/HeaderImage.svg');
         },
     },
-    template: '<div><VcConfirmModal :show-dialog="showDialog" ' +
-        ':topTitle="topTitle" ' +
-        ':title="title" ' +
-        ':subtitle="subtitle" ' +
-        ':header-image="imageParam" ' +
-        ':content-text="contentText" ' +
-        ':size="size" ' +
-        ':buttons="buttons" ' +
-        '@onCloseButtonClicked="onCloseButtonClicked" ' +
-        '@onOkClicked="onOkClicked" ' +
-        '@onCancelClicked="onCancelClicked"/></div>',
+    template: `
+      <div>
+      <VcConfirmModal :show-dialog="showDialog"
+                      :useOffset="useOffset"
+                      :topTitle="topTitle"
+                      :title="title"
+                      :subtitle="subtitle"
+                      :header-icon="headerIcon"
+                      :header-image="headerImage"
+                      :content-text="contentText"
+                      :size="size"
+                      :ok-button-label="okButtonLabel"
+                      :cancel-button-label="cancelButtonLabel"
+                      :loading="loading"
+                      @onCloseButtonClicked="onCloseButtonClicked" 
+                      @onOkClicked="onOkClicked"
+                      @onCancelClicked="onCancelClicked"/>
+      </div>`,
 })
 
 export const WithHeaderImage = TemplateWithImage.bind({});
 
 // Set default values
 WithHeaderImage.args = {
-    showDialog: true,
+    ...baseProps,
     topTitle: 'Top title',
-    title: 'Some header text',
-    contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    size: 'lg',
-    buttons: [{label: "Cancel", event: "onCancelClicked", color: "white"},
-        {label: "Archive", event: "onOkClicked", color: "primary"},]
 }
 
 export default {
@@ -130,6 +146,17 @@ export default {
             options: ['sm', 'md', 'lg'],
             control: {type: 'radio'}
         },
+        headerIcon: {
+            options: Object.keys(icons).map(item => `$${item}`),
+            control: {type: 'select'},
+            table: {category: 'header'},
+        },
+        headerImage: {table: {category: 'header'}},
+        topTitle: {table: {category: 'header'}},
+        title: {table: {category: 'header'}},
+        subtitle: {table: {category: 'header'}},
+        okButtonLabel: {table: {category: 'footer'}},
+        cancelButtonLabel: {table: {category: 'footer'}},
         onContactClicked: {action: 'onContactClicked', table: {disable: true}},
         onClearClicked: {action: 'onClearClicked', table: {disable: true}},
         onSaveClicked: {action: 'onSaveClicked', table: {disable: true}},

package/src/components/modal/VcConfirmModal/VcConfirmModal.vue

@@ -2,6 +2,7 @@
   <VcModalContainer showCloseButton
                     :useOffset="useOffset"
                     :showDialog="showDialog" :size="$vuetify.breakpoint.mdAndUp ? size : 'responsive'"
+                    :data-qa="dataQa"
                     @onCloseButtonClicked="$emit('onCloseButtonClicked')">
     <template #header>
       <slot name="header">
@@ -10,7 +11,9 @@
                        @onCloseButtonClicked="$emit('onCloseButtonClicked')"/>
       </slot>
     </template>
-    <template #content> <slot name="content"> {{ contentText }} </slot></template>
+    <template #content>
+      <slot name="content"> {{ contentText }}</slot>
+    </template>
     <template #footer>
       <slot name="footer">
         <VcModalFooter
@@ -65,6 +68,9 @@ export default {
       type: String,
       required: false
     },
+    /**
+     * In case the component is being displayed in an iframe, and so can become un centered, this allows to correct the position, when combined with the --modal-desktop-offset css variable.
+     */
     useOffset: {
       type: Boolean,
       default: true
@@ -85,7 +91,11 @@ export default {
     loading: {
       type: Boolean,
       default: false
-    }
+    },
+    dataQa: {
+      type: String,
+      default: 'VcConfirmModal',
+    },
   }
 }
 </script>