@vcita/design-system 0.2.7 → 0.2.11

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

@@ -1,6 +1,7 @@
 <template>
   <VcModalContainer showHeaderDivider showCloseButton flavor="input"
-                    :showDialog="showDialog" :size="$vuetify.breakpoint.mdAndUp ? size : 'responsive'"
+                    :useOffset="useOffset" :showDialog="showDialog"
+                    :size="$vuetify.breakpoint.mdAndUp ? size : 'responsive'"
                     @onCloseButtonClicked="$emit('onCloseButtonClicked')">
     <template #header>
       <slot name="header">
@@ -74,6 +75,10 @@ export default {
       type: String,
       required: false,
     },
+    useOffset: {
+      type: Boolean,
+      default: true
+    },
     size: {
       type: String,
       default: 'lg', // required

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

@@ -14,6 +14,7 @@ const Template = (args, {argTypes}) => ({
     template: `
       <div>
       <VcNoticeModal :show-dialog="showDialog"
+                     :useOffset="useOffset"
                      :title-text="titleText"
                      :subtitle-text="subtitleText"
                      :icon="iconParam"
@@ -32,6 +33,7 @@ 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.',
@@ -49,6 +51,7 @@ const TemplateUsingSlot = (args, {argTypes}) => ({
         },
     },
     template: '<div><VcNoticeModal :show-dialog="showDialog" ' +
+        ':useOffset="useOffset" ' +
         ':title-text="titleText" ' +
         ':subtitle-text="subtitleText" ' +
         ':icon="iconParam" ' +
@@ -69,6 +72,7 @@ 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.',
@@ -84,7 +88,7 @@ const TemplateUsingFooterSlot = (args, {argTypes}) => ({
         },
     },
     template: `
-      <VcNoticeModal :show-dialog="showDialog" :title-text="titleText" :subtitle-text="subtitleText"
+      <VcNoticeModal :show-dialog="showDialog" :useOffset="useOffset" :title-text="titleText" :subtitle-text="subtitleText"
                      :content-text="contentText" :icon="iconParam" :size="size"
                      @onCloseButtonClicked="onCloseButtonClicked" @onOkClicked="onOkClicked"
                      @onCancelClicked="onCancelClicked">
@@ -109,6 +113,7 @@ 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.',

package/src/components/modal/VcNoticeModal/VcNoticeModal.vue

@@ -1,6 +1,6 @@
 <template>
   <VcModalContainer :showFooterDivider="flavor === 'prominent'" :flavor="flavor"
-                    :showDialog="showDialog"
+                    :useOffset="useOffset" :showDialog="showDialog"
                     :size="$vuetify.breakpoint.mdAndUp ? size : 'responsive'"
                     showCloseButton
                     @onCloseButtonClicked="$emit('onCloseButtonClicked')">
@@ -61,6 +61,10 @@ export default {
       type: String,
       required: false
     },
+    useOffset: {
+      type: Boolean,
+      default: true
+    },
     size: {
       type: String,
       default: 'lg', // required

package/src/components/wizard/VcSteperContent/VcStepperContent.vue

@@ -122,14 +122,20 @@ export default {
 
 }
 .layout-content {
+  padding: var(--size-value0) var(--size-value4);
   @include md-and-up {
+    padding: revert;
     padding-block-start: var(--size-value3);
     padding-inline: var(--size-value10);
   }
 }
 .stepper-header {
+  flex: 0;
   margin-block-end: var(--size-value7);
+  padding: var(--size-value0) var(--size-value4);
   @include md-and-up {
+    padding: revert;
+    flex: revert;
     padding-block-start: var(--size-value3);
     padding-inline: var(--size-value10);
   }

package/src/components/wizard/VcWizard/VcWizard.spec.js

@@ -120,6 +120,11 @@ describe("VcWizard.vue", () => {
             props: {
                 steps: defaultSteps,
                 dataQa: 'vcWizard',
+                initialWizardData: {
+                    textFieldValue: 'initial value'
+                },
+
+
             }
         })
         const stepperElement = getByTestId("vc-steps-bar")
@@ -132,6 +137,8 @@ describe("VcWizard.vue", () => {
         expect(nextButton).toHaveClass('v-btn--disabled')
 
         const textInput = await findByTestId('text-input')
+        expect(textInput.value).toBe('initial value')
+        await userEvent.clear(textInput)
         await userEvent.type(textInput, "1");
         await userEvent.type(textInput, "2");
         await userEvent.type(textInput, "3");

package/src/components/wizard/VcWizard/VcWizard.stories.js

@@ -14,6 +14,9 @@ const GeneralTemplate = (args, {argTypes}) => ({
             :steps="steps"
             @submit="onSubmit"
             :data-qa="dataQa"
+            :initialWizardData="{
+              textFieldValue: 'initial value'
+            }"
           />
       </div>`,
 })

package/src/components/wizard/VcWizard/VcWizard.vue

@@ -41,6 +41,10 @@ export default {
   name: "VcWizard",
   components: {VcStepsBar, VcStepperContent, VcMobileWizardProgress, VcWizardCtaContainer},
   props: {
+    initialWizardData: {
+      type: Object,
+      default: () => ({}),
+    },
     steps: {
       type: [Array],
       validator: steps => steps.every(step => step.name),
@@ -87,13 +91,16 @@ export default {
       if(this.currentStep < this.wizardSteps.length) {
         this.currentStep++;
       } else {
-        this.$emit('submit', this.wizardSteps)
+        this.$emit('submit', this.wizardData)
       }
     },
   },
   computed: {
     wizardData() {
-      return Object.values(this.wizardStepsData).reduce((acc, currentValue) => ({ ...acc, ...currentValue}), {})
+      return Object.values(this.wizardStepsData).reduce((acc, currentValue) => {
+        Object.assign(acc,currentValue)
+        return acc
+      }, {...this.initialWizardData})
     },
     currentStepObj() {
       return this.wizardSteps[this.currentStep - 1]
@@ -120,8 +127,8 @@ export default {
   height: 100%;
   @include md-and-up {
     display: grid;
-    grid-template-columns: minmax(200px, 1fr) 3fr;
-    grid-template-rows: 400px 80px;
+    grid-template-columns: minmax(250px,1fr) 3fr;
+    grid-template-rows: 562px 80px;
     grid-column-gap: var(--size-value10);
     grid-row-gap: 0px;
   }
@@ -133,6 +140,7 @@ export default {
 .vc-stepper-container {
   grid-area: 1 / 1 / 3 / 2;
   border-inline-end: 1px solid #E0E0E0;
+  max-height: calc( 100% - 24px );
 }
 .wizard-cta-container {
   grid-area: 2 / 2 / 3 / 3;

package/src/components/wizard/VcWizard/demoWizardPage.vue

@@ -3,7 +3,7 @@
     <v-btn @click="$emit('submit', {stepData: {backButtonLabel: 'new text'}} )" data-qa="test-button" class="demo-page-button">
       demo button text
     </v-btn>
-    <VcTextArea data-qa="text-input" class="text-input" placeholder="enter 123 to proceed" @input="(data) => $emit('submit', {wizardData: {textFieldValue: data}} )" >
+    <VcTextArea :value="textFieldValue" data-qa="text-input" class="text-input" placeholder="enter 123 to proceed" @input="(data) => $emit('submit', {wizardData: {textFieldValue: data}} )" >
 
     </VcTextArea>
     <v-layout>

package/src/stories/welcome.stories.mdx

@@ -179,6 +179,7 @@ Setting their values will allow you to control different aspects of the display
 <div><code>--size-value7: 28px;</code></div>
 <div><code>--size-value8: 32px;</code></div>
 <div><code>--size-value10: 40px;</code></div>
+<div><code>--size-value12: 48px;</code></div>
 <div><code>--size-value16: 64px;</code></div>