@vcita/design-system 0.5.1-beta.13 → 0.5.1-beta.14

package/src/components/VcUpsellBlock/VcUpsellBlock.vue

@@ -0,0 +1,285 @@
+<template>
+  <VcLayout class="VcUpsellBlock justify-space-between align-md-center" :class="isDialog ? 'pt-2 dialog-height' : ''" :data-qa="dataQa">
+    <div class="text-container flex-column pa-6 pb-0">
+        <div class="title-text mb-4">{{titleText}}</div>
+        <div class="sub-text mb-6">{{subtitleText}}</div>
+        <div v-if="bulletsText.length > 0" v-for="(item, index) in bulletsText" :key="index" class="bullets-text d-flex mb-3">
+          <div v-if="icon" class="align-self-start bullets-icon">
+            <VcIcon size="16">{{icon}}</VcIcon>
+          </div>
+          <span class="bullets-span">{{item}}</span>
+        </div>
+      <div v-if="linkText || buttonText" class="cta-container d-flex mt-md-6" :class="isDialog  ? 'cta-container-dialog' : ''">
+        <VcButton v-if="buttonText" class="primary-cta" :pill="true" @click="$emit('buttonClick')">{{buttonText}}</VcButton>
+        <VcLink v-if="linkText" class="secondary-cta justify-center" :url="linkUrl" :label="linkText"></VcLink>
+      </div>
+    </div>
+    <VcLayout class="images-container">
+      <VcSvg class="background-stain" :svg="$svgImages.background_stain" />
+      <VcImage class="upsell-image" :image="imageUrl"></VcImage>
+    </VcLayout>
+  </VcLayout>
+</template>
+
+<script>
+import VcLayout from "@/components/VcLayout/VcLayout.vue";
+import VcButton from "@/components/VcButton/VcButton.vue";
+import VcLink from "@/components/VcLink/VcLink.vue";
+import VcImage from "@/components/VcImage/VcImage.vue";
+import VcIcon from "@/components/VcIcon/VcIcon.vue";
+import VcSvg from "@/components/VcSvg/VcSvg.vue";
+export default {
+  name: "VcUpsellBlock",
+  components: {VcSvg, VcImage, VcLink, VcButton, VcLayout, VcIcon},
+  props:{
+    titleText:{
+      type: String,
+      default: ""
+    },
+    subtitleText:{
+      type: String,
+      default: ""
+    },
+    bulletsText:{
+      type: Array,
+      default: () => []
+    },
+    buttonText: {
+      type: String,
+      default: ''
+    },
+    linkText:{
+      type: String,
+      default: ''
+    },
+    imageUrl: {
+      type: [String, Object],
+      default: ''
+    },
+    linkUrl:{
+      type: String,
+      default: ''
+    },
+    mode: {
+      type: String,
+      default: 'page',
+      validator: prop => ['page', 'dialog'].includes(prop)
+    },
+    dataQa:{
+      type:String,
+      default: 'VcUpsellBlock'
+    },
+    icon:{
+      type:String,
+      default:''
+    }
+  },
+  computed:{
+    isDialog(){
+      return this.mode === 'dialog'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../scss/mixins.scss";
+ .VcUpsellBlock{
+   flex-flow: row wrap;
+   width: 100%;
+   height: 100vh;
+   max-width: 960px;
+   margin: auto;
+   overflow-x: hidden;
+   font-style: normal;
+   @include md-and-up{
+     overflow-x: visible;
+   }
+
+   &.dialog-height{
+     height: 100%;
+   }
+
+   .text-container {
+     flex: 0 0 100%;
+     margin: 0 auto;
+     @include md-and-up {
+       flex: 0 0 55%;
+       max-width: 444px;
+       overflow: hidden;
+     }
+
+     .title-text {
+       font-weight: var(--font-weight-large2);
+       font-size: var(--font-size-medium2);
+       line-height: 32px;
+       letter-spacing: 0.01em;
+       @include md-and-up{
+         font-size: var(--font-size-large);
+         line-height: 40px;
+       }
+     }
+
+     .sub-text {
+       font-weight: var(--font-weight-large);
+       font-size: var(--font-size-medium);
+       line-height: 28px;
+       letter-spacing: var(--letter-spacing);
+     }
+
+     .bullets-text {
+       font-weight: var(--font-weight-medium2);
+       font-size: var(--font-size-small2);
+       line-height: 20px;
+
+       .bullets-icon {
+         margin-inline-end: 12px;
+       }
+
+       .bullets-span{
+         font-weight: var(--font-weight-medium2);
+         font-size: var(--font-size-small2);
+         line-height: 20px;
+         color: #000000;
+       }
+     }
+
+     .cta-container{
+       flex: 1 1 auto;
+       flex-flow: row wrap;
+       align-items: center;
+       margin: 32px auto 0;
+
+       .primary-cta {
+         flex: 0 0 100%;
+         width: auto;
+         margin: 0 auto;
+         max-width: 214px;
+         line-height: 48px;
+         min-height: 48px;
+         font-weight: var(--font-weight-large);
+         font-size: var(--font-size-small2);
+         @include md-and-up{
+           flex: 0 0 45%;
+           margin: 0;
+           height: 48px;
+         }
+         .v-btn__content {
+           flex-flow: row wrap;
+           width: 100%;
+           white-space: break-spaces;
+         }
+       }
+
+       .secondary-cta{
+         flex: 0 0 100%;
+         text-align: center;
+         font-weight: var(--font-weight-large);
+         font-size: var(--font-size-small2);
+         line-height: 48px;
+         height: 48px;
+         color: var(--gray-darken-5);
+         margin: 0;
+         @include md-and-up{
+           flex: 0 0 45%;
+           color: var(--blue);
+           font-weight: var(--font-weight-large2);
+         }
+       }
+     }
+
+     .cta-container-dialog {
+       width: 100%;
+       z-index:1;
+       position: absolute;
+       justify-content: space-between;
+       background: white;
+       bottom: 0;
+       left: 0;
+       right:0;
+       margin: 0;
+       height: 72px;
+       padding: 0 24px;
+       @include md-and-up{
+         position: static;
+         justify-content: flex-start;
+         padding: 0;
+       }
+
+       .primary-cta {
+         flex: 0 0 55%;
+         margin: 0;
+         order: 2;
+         @include md-and-up{
+           flex: 0 0 45%;
+           order:0;
+         }
+       }
+
+       .secondary-cta{
+         flex: 1 0 35%;
+         padding-top: 0;
+         @include md-and-up{
+           flex: 0 0 45%;
+         }
+       }
+     }
+   }
+
+   .images-container {
+     position: relative;
+     flex: 1 0 100%;
+     margin: 0 auto;
+     min-height: 40%;
+     overflow: hidden;
+
+     @include md-and-up {
+       flex: 0 0 45%;
+       min-height: 0;
+       overflow: visible;
+     }
+
+     .background-stain{
+       position: absolute;
+       opacity: 15%;
+       width: 600px;
+       height: 380px;
+       left: 80px;
+       overflow: hidden;
+       #app[dir="rtl"] &{
+         transform: scaleX(-1);
+         width: inherit;
+         left:auto;
+       }
+
+       @include md-and-up{
+         width: 1400px;
+         height: 800px;
+         left: -15px;
+         top: -360px;
+       }
+
+       #background_stain{
+        fill: var(--v-secondary-base);
+       }
+     }
+
+     .upsell-image {
+       position: absolute;
+       width: 320px;
+       height: 380px;
+       display: block;
+       right: 0;
+       left:0;
+       margin: 0 auto;
+       @include md-and-up {
+         height: 580px;
+         width: 466px;
+         top: -300px;
+         right: -30px;
+       }
+     }
+   }
+ }
+
+</style>

package/src/components/index.js

@@ -17,9 +17,9 @@ export {default as VcChecklistItem} from './listBox/VcChecklistItem/VcChecklistI
 export {default as VcListbox} from './listBox/VcListbox/VcListbox.vue';
 export {default as VcBottomSheet} from './VcBottomSheet/VcBottomSheet.vue';
 export {default as VcInputBottomSheet} from './VcInputBottomSheet/VcInputBottomSheet.vue';
-export {default as VcChip} from './VcChip/VcChip.vue';
 export {default as VcPopover} from './VcPopover/VcPopover.vue';
 export {default as VcInputPopover} from './VcInputPopover/VcInputPopover.vue';
+export {default as VcChip} from './VcChip/VcChip.vue';
 // export {default as VcAutoComplete} from './VcAutoComplete/VcAutoComplete.vue';
 export {default as VcButton} from './VcButton/VcButton.vue';
 export {default as VcButtonGroup} from './VcButtonGroup/VcButtonGroup.vue';
@@ -48,3 +48,5 @@ export {default as VcWizardCtaContainer} from './wizard/VcWizardCtaContainer/VcW
 export {default as VcWizard} from './wizard/VcWizard/VcWizard.vue';
 export {default as VcImage} from './VcImage/VcImage.vue';
 export {default as VcBadge} from './VcBadge/VcBadge.vue';
+export {default as VcUpsellBlock} from './VcUpsellBlock/VcUpsellBlock.vue';
+export {default as VcModalContainer} from './modal/elements/VcModalContainer.vue';

package/src/components/listBox/VcListbox/VcListbox.vue

@@ -79,15 +79,12 @@ export default {
   data: () => ({
     confirmedArray: []
   }),
-  watch: {
-    items: {
-      immediate: true,
-      deep: true,
-      handler(values) {
-        console.log('confirmedArray has changed')
-        this.confirmedArray = values.filter((item) => item.checked)
+  created() {
+    this.items.forEach((item) => {
+      if (item.checked) {
+        this.confirmedArray.push(item)
       }
-    }
+    })
   },
   computed: {
     getAddAnotherLabel() {

package/src/components/modal/elements/VcModalContainer.vue

@@ -21,7 +21,7 @@
         <div class="VcModalContainerContent">
           <slot name="content"/>
         </div>
-        <footer :class="{'showDivider': showFooterDivider}">
+        <footer v-if="!!$slots.footer" :class="{'showDivider': showFooterDivider}">
           <slot name="footer"/>
         </footer>
       </v-layout>
@@ -119,6 +119,7 @@ export default {
 
     .VcModalCloseButton {
       position: absolute;
+      z-index: 1;
       right: 5px;
       top: var(--size-value2);