@vcita/design-system 0.2.6 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "0.2.6",
+  "version": "0.3.1",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcBanner/VcBanner.stories.js

@@ -3,8 +3,20 @@ import VcBanner from './VcBanner';
 const Template = (args, {argTypes}) => ({
         components: {VcBanner: VcBanner},
         props: Object.keys(argTypes),
-        template: `<VcBanner :title="title" :subtitle="subtitle" :backgroundColor="backgroundColor" 
-                             :image="image" :buttonLabel="buttonLabel" @onAction="onAction"></VcBanner>`,
+        template: `
+          <div>
+          <VcBanner 
+              :title="title" 
+              :subtitle="subtitle" 
+              :backgroundColor="backgroundColor" 
+              :image="image" 
+              :buttonLabel="buttonLabel" 
+              @onAction="onAction">
+          </VcBanner>
+          <br>
+          <p><b>Note</b>: You can add subtitle as a prop or as a slot</p>
+          </div>
+        `,
     })
 
 export const Playground = Template.bind({});

package/src/components/VcBanner/VcBanner.vue

@@ -3,7 +3,11 @@
     <img class="d-none d-md-block" v-if="image" :src="image">
     <div class="text-container px-md-8 flex-grow-1">
       <div class="banner-title pb-2 pb-md-0">{{title}}</div>
-      <div class="banner-subtitle pb-4 pb-md-0" v-if="subtitle">{{subtitle}}</div>
+      <div class="banner-subtitle pb-4 pb-md-0" v-if="subtitle || $slots.subtitle">
+        <slot name="subtitle">
+          {{subtitle}}
+        </slot>
+      </div>
     </div>
     <VcButton :large="$vuetify.breakpoint.smAndUp" v-if="buttonLabel" @click="$emit('onAction')">{{buttonLabel}}</VcButton>
   </div>
@@ -45,7 +49,6 @@ export default {
 @import "../../scss/mixins.scss";
 
 .VcBanner{
-  //font-family: var(--primary-font-family);
   min-height: 128px;
   box-sizing: border-box;
   box-shadow: var(--shadow-10);

package/src/components/index.js

@@ -36,3 +36,4 @@ export {default as VcEmptyState} from './VcEmptyState/VcEmptyState.vue';
 export {default as VcSvg} from './VcSvg/VcSvg.vue';
 export {default as VcBanner} from './VcBanner/VcBanner.vue'
 export {default as VcWizardCtaContainer} from './wizard/VcWizardCtaContainer/VcWizardCtaContainer.vue';
+export {default as VcWizard} from './wizard/VcWizard/VcWizard.vue';

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

@@ -16,8 +16,8 @@
         <VcModalFooter
             direction="horizontal"
             :buttons='[
-                {label: cancelButtonLabel || $dst("ds.modal.cancel"),event:"onCancelClicked",color:"white"},
-                {label: okButtonLabel || $dst("ds.modal.ok"),event:"onOkClicked",color:"secondary"}
+                {label: cancelButtonLabel || $dst("ds.modal.cancel"), event:"onCancelClicked", color:"white", loading},
+                {label: okButtonLabel || $dst("ds.modal.ok"), event:"onOkClicked", color:"secondary", loading}
                 ]'
             @onOkClicked="$emit('onOkClicked')"
             @onCancelClicked="$emit('onCancelClicked')"
@@ -83,6 +83,10 @@ export default {
       type: String,
       required: false
     },
+    loading: {
+      type: Boolean,
+      default: false
+    }
   }
 }
 </script>

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

@@ -30,7 +30,7 @@
 
 <script>
 import VcLoader from "@/components/VcLoader/VcLoader.vue";
-import VcLayout from "@/components/VcLayout/VcLayout";
+import VcLayout from "@/components/VcLayout/VcLayout.vue";
 
 export default {
   name: "VcStepperContent",
@@ -128,6 +128,7 @@ export default {
   }
 }
 .stepper-header {
+  flex: var(--size-value0);
   margin-block-end: var(--size-value7);
   @include md-and-up {
     padding-block-start: var(--size-value3);

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>