@vcita/design-system 1.2.0 → 1.2.2

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>

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

@@ -4,18 +4,12 @@ import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 const Template = (args, {argTypes}) => ({
     components: {VcConfirmProminentModal: VcConfirmProminentModalCmp},
     props: Object.keys(argTypes),
-    computed: {
-        iconParam() {
-            return require('@/stories/assets/rabbit.svg');
-        },
-    },
     template: `
       <div>
       <VcConfirmProminentModal :show-dialog="showDialog"
                                :useOffset="useOffset"
                                :title-text="titleText"
-                               :subtitle-text="subtitleText"
-                               :icon="iconParam"
+                               :icon="image"
                                :content-text="contentText"
                                :size="size"
                                :ok-button-label="okButtonLabel"
@@ -33,11 +27,11 @@ Playground.args = {
     showDialog: true,
     useOffset: false,
     titleText: 'Notice header text',
-    subtitleText: 'some more information about this issue, and some more information about this issue',
     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: 'md',
-    okButtonLabel: undefined,
-    cancelButtonLabel: undefined,
+    okButtonLabel: '',
+    cancelButtonLabel: '',
+    image: require('@/stories/assets/rabbit.svg'),
 }
 
 export default {
@@ -49,6 +43,8 @@ export default {
             options: ['sm', 'md'],
             control: {type: 'radio'}
         },
+        okButtonLabel: {table: {category: 'footer'}},
+        cancelButtonLabel: {table: {category: 'footer'}},
     },
     parameters: {
         design: {

package/src/components/modal/VcConfirmProminentModal/VcConfirmProminentModal.vue

@@ -6,6 +6,7 @@
                  :size="size"
                  flavor="prominent"
                  :useOffset="useOffset"
+                 :data-qa="dataQa"
                  @onCloseButtonClicked="$emit('onCloseButtonClicked')"
                  @onOkClicked="$emit('onOkClicked')"
                  @onCancelClicked="$emit('onCancelClicked')">
@@ -63,6 +64,10 @@ export default {
       type: String,
       required: false
     },
+    dataQa: {
+      type: String,
+      default: 'VcProminentModal',
+    },
   },
 }
 </script>

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

@@ -3,6 +3,24 @@ import VcTextField from "@/components/VcTextField/VcTextField";
 import VcModalFooter from "@/components/modal/elements/VcModalFooter";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const baseProps = {
+    showDialog: true,
+    useOffset: false,
+    topTitle: '',
+    title: 'Input form',
+    subtitle: '',
+    size: 'lg',
+    okButtonLabel: undefined,
+    cancelButtonLabel: undefined,
+    showBackButton: true,
+    closeButton: false,
+    showFooter: true,
+    dataQa: 'VcInputModal',
+    closeOnEsc: true,
+    okButtonLabel: '',
+    cancelButtonLabel: '',
+}
+
 const Template = (args, {argTypes}) => ({
     components: {VcInputModal: VcInputModalCmp, VcTextField},
     props: Object.keys(argTypes),
@@ -43,19 +61,7 @@ export const Playground = Template.bind({});
 
 // Set default values
 Playground.args = {
-    showDialog: true,
-    useOffset: false,
-    topTitle: '',
-    title: 'Input form',
-    subtitle: '',
-    size: 'lg',
-    okButtonLabel: undefined,
-    cancelButtonLabel: undefined,
-    showBackButton: true,
-    closeButton: false,
-    showFooter: true,
-    dataQa: 'VcInputModal',
-    closeOnEsc: true
+    ...baseProps,
 }
 
 const TemplateWithAdditional = (args, {argTypes}) => ({
@@ -67,34 +73,28 @@ const TemplateWithAdditional = (args, {argTypes}) => ({
             v => (v && v.length <= 10) || 'Name must be less than 10 characters',
         ],
     }),
-    template: '<div><VcInputModal :show-dialog="showDialog" ' +
-        ':useOffset="useOffset" ' +
-        ':topTitle="topTitle" ' +
-        ':title="title" ' +
-        ':subtitle="subtitle" ' +
-        ':header-icon="headerIcon" ' +
-        ':size="size" ' +
-        '@onCloseButtonClicked="onCloseButtonClicked" ' +
-        '@onOkClicked="onOkClicked" ' +
-        '@onCancelClicked="onCancelClicked"' +
-        '@onValidationChanged="onValidationChanged">' +
-        '<template #content> ' +
-        '   <VcTextField label="text field label" :rules="nameRules"></VcTextField>' +
-        '</template>' +
-        '<template #additional> ' +
-        '   <VcTextField label="text field label" :rules="nameRules"></VcTextField>' +
-        '</template>' +
-        '</VcInputModal></div>',
+    template: `
+      <div>
+      <VcInputModal :show-dialog="showDialog" :useOffset="useOffset" :topTitle="topTitle" :title="title"
+                    :subtitle="subtitle" :header-icon="headerIcon" :size="size"
+                    @onCloseButtonClicked="onCloseButtonClicked" @onOkClicked="onOkClicked"
+                    @onCancelClicked="onCancelClicked" @onValidationChanged="onValidationChanged">
+        <template #content>
+          <VcTextField label="text field label" :rules="nameRules"></VcTextField>
+        </template>
+        <template #additional>
+          <VcTextField label="text field label" :rules="nameRules"></VcTextField>
+        </template>
+      </VcInputModal>
+      </div>`,
 })
 
 export const WithAdditionalPanel = TemplateWithAdditional.bind({});
 
 // Set default values
 WithAdditionalPanel.args = {
-    showDialog: true,
-    useOffset: false,
+    ...baseProps,
     title: 'With additional pane (when large)',
-    size: 'lg'
 }
 
 const TemplateWithFooter = (args, {argTypes}) => ({
@@ -138,10 +138,8 @@ export const UsingFooterSlot = TemplateWithFooter.bind({});
 
 // Set default values
 UsingFooterSlot.args = {
-    showDialog: true,
-    useOffset: false,
+    ...baseProps,
     title: 'With additional pane (when large)',
-    size: 'lg',
 }
 
 const TemplateWithImage = (args, {argTypes}) => ({
@@ -158,32 +156,25 @@ const TemplateWithImage = (args, {argTypes}) => ({
             v => (v && v.length <= 10) || 'Name must be less than 10 characters',
         ],
     }),
-    template: '<div><VcInputModal :show-dialog="showDialog" ' +
-        ':useOffset="useOffset" ' +
-        ':topTitle="topTitle" ' +
-        ':title="title" ' +
-        ':subtitle="subtitle" ' +
-        ':size="size" ' +
-        ':headerImage="imageParam" ' +
-        '@onCloseButtonClicked="onCloseButtonClicked" ' +
-        '@onOkClicked="onOkClicked" ' +
-        '@onCancelClicked="onCancelClicked"' +
-        '@onValidationChanged="onValidationChanged">' +
-        '<template #content> ' +
-        '   <VcTextField label="text field label" :rules="nameRules"></VcTextField>' +
-        '</template>' +
-        '</VcInputModal></div>',
+    template: `
+      <div>
+      <VcInputModal :show-dialog="showDialog" :useOffset="useOffset" :topTitle="topTitle" :title="title"
+                    :subtitle="subtitle" :size="size" :headerImage="imageParam"
+                    @onCloseButtonClicked="onCloseButtonClicked" @onOkClicked="onOkClicked"
+                    @onCancelClicked="onCancelClicked" @onValidationChanged="onValidationChanged">
+        <template #content>
+          <VcTextField label="text field label" :rules="nameRules"></VcTextField>
+        </template>
+      </VcInputModal>
+      </div>`,
 })
 
 export const WithHeaderImage = TemplateWithImage.bind({});
 
 // Set default values
 WithHeaderImage.args = {
-    showDialog: true,
-    useOffset: false,
-    topTitle: 'Top title',
+    ...baseProps,
     title: 'Input form',
-    size: 'lg'
 }
 
 export default {

package/src/components/modal/VcInputModal/VcInputModal.vue

@@ -3,6 +3,7 @@
                     :useOffset="useOffset" :showDialog="showDialog"
                     :size="$vuetify.breakpoint.mdAndUp ? size : 'responsive'"
                     :closeOnEsc="closeOnEsc"
+                    :data-qa="dataQa"
                     @onCloseButtonClicked="$emit('onCloseButtonClicked')">
     <template #header>
       <slot name="header">
@@ -113,7 +114,7 @@ export default {
     closeOnEsc: {
       type: Boolean,
       default: true
-    }
+    },
   },
   data: () => ({
     mainValid: true,

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

@@ -4,6 +4,19 @@ import VcLayout from "@/components/VcLayout/VcLayout";
 import VcModalFooter from "@/components/modal/elements/VcModalFooter";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const baseProps = {
+    showDialog: true,
+    useOffset: false,
+    titleText: 'Notice header text',
+    subtitleText: 'some more information about this issue, and some more information about this issue',
+    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',
+    image: require('@/stories/assets/rabbit.svg'),
+    okButtonLabel: '',
+    cancelButtonLabel: '',
+    dataQa: 'VcNoticeModal',
+}
+
 const Template = (args, {argTypes}) => ({
     components: {VcNoticeModal: VcNoticeModalCmp},
     props: Object.keys(argTypes),
@@ -18,6 +31,7 @@ const Template = (args, {argTypes}) => ({
                      :size="size"
                      :ok-button-label="okButtonLabel"
                      :cancel-button-label="cancelButtonLabel"
+                     :data-qa="dataQa"
                      @onCloseButtonClicked="onCloseButtonClicked"
                      @onOkClicked="onOkClicked"
                      @onCancelClicked="onCancelClicked"/>
@@ -28,48 +42,33 @@ export const Playground = Template.bind({});
 
 // Set default values
 Playground.args = {
-    showDialog: true,
-    useOffset: false,
-    titleText: 'Notice header text',
-    subtitleText: 'some more information about this issue, and some more information about this issue',
-    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,
-    image: require('@/stories/assets/rabbit.svg'),
+    ...baseProps,
 }
 
 const TemplateUsingSlot = (args, {argTypes}) => ({
     components: {VcNoticeModal: VcNoticeModalCmp, VcLayout, VcIcon},
     props: Object.keys(argTypes),
-    template: '<div><VcNoticeModal :show-dialog="showDialog" ' +
-        ':useOffset="useOffset" ' +
-        ':title-text="titleText" ' +
-        ':subtitle-text="subtitleText" ' +
-        ':image="image" ' +
-        ':size="size" ' +
-        '@onCloseButtonClicked="onCloseButtonClicked" ' +
-        '@onOkClicked="onOkClicked" ' +
-        '@onCancelClicked="onCancelClicked">' +
-        '<template #content>' +
-        '<VcLayout justify-center>' +
-        '<VcIcon small>mdi-check-bold</VcIcon> Receive a dedicated SMS number for back-and-forth texting with your clients.' +
-        '</VcLayout>' +
-        '</template>' +
-        '</VcNoticeModal></div>',
+    template: `
+      <div>
+      <VcNoticeModal :show-dialog="showDialog" :useOffset="useOffset" :title-text="titleText"
+                     :subtitle-text="subtitleText" :image="image" :size="size"
+                     @onCloseButtonClicked="onCloseButtonClicked" @onOkClicked="onOkClicked"
+                     @onCancelClicked="onCancelClicked">
+        <template #content>
+          <VcLayout justify-center>
+            <VcIcon small>mdi-check-bold</VcIcon>
+            Receive a dedicated SMS number for back-and-forth texting with your clients.
+          </VcLayout>
+        </template>
+      </VcNoticeModal>
+      </div>`,
 })
 
 export const UsingContentSlot = TemplateUsingSlot.bind({});
 
 // Set default values
 UsingContentSlot.args = {
-    showDialog: true,
-    useOffset: false,
-    titleText: 'Notice header text',
-    subtitleText: 'some more information about this issue, and some more information about this issue',
-    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',
-    image: require('@/stories/assets/rabbit.svg')
+    ...baseProps,
 }
 
 const TemplateUsingFooterSlot = (args, {argTypes}) => ({
@@ -100,26 +99,14 @@ export const UsingFooterSlot = TemplateUsingFooterSlot.bind({});
 
 // Set default values
 UsingFooterSlot.args = {
-    showDialog: true,
-    useOffset: false,
-    titleText: 'Notice header text',
-    subtitleText: 'some more information about this issue, and some more information about this issue',
-    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',
-    image: require('@/stories/assets/rabbit.svg'),
+    ...baseProps,
 }
 
 export const WithImageAsComponents = Template.bind({});
 
 // Set default values
 WithImageAsComponents.args = {
-    showDialog: true,
-    useOffset: false,
-    titleText: 'Notice with image slot',
-    subtitleText: 'It looks the same, what\'s the deal?',
-    contentText: 'In some projects you will have infrastructure that makes it impossible to pass an SVG in the usual way, because SVGs are treated as components. So the right way to pass them is using a slot.',
-    size: 'lg',
-    image: require('@/stories/assets/rabbit.svg'),
+    ...baseProps,
 }
 
 export default {
@@ -132,6 +119,10 @@ export default {
             options: ['md', 'lg'],
             control: {type: 'radio'}
         },
+        titleText: {table: {category: 'header'}},
+        subtitleText: {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/VcNoticeModal/VcNoticeModal.vue

@@ -2,6 +2,7 @@
   <VcModalContainer :showFooterDivider="flavor === 'prominent'" :flavor="flavor"
                     :useOffset="useOffset" :showDialog="showDialog"
                     :size="$vuetify.breakpoint.mdAndUp ? size : 'responsive'"
+                    :data-qa="dataQa"
                     showCloseButton
                     @onCloseButtonClicked="$emit('onCloseButtonClicked')">
     <template #content>
@@ -87,6 +88,10 @@ export default {
       type: String,
       required: false
     },
+    dataQa: {
+      type: String,
+      default: 'VcNoticeModal'
+    }
   },
   computed: {
     currentImage() {