@vcita/design-system 0.5.1-beta.8 → 0.6.2-beta.0

package/src/components/VcUpsellBlock/VcUpsellBlock.vue

@@ -0,0 +1,283 @@
+<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;
+       right: 0;
+       left:0;
+       margin: 0 auto;
+       @include md-and-up {
+         height: 580px;
+         width: 466px;
+         top: -300px;
+       }
+     }
+   }
+ }
+
+</style>

package/src/components/index.js

@@ -19,6 +19,7 @@ export {default as VcBottomSheet} from './VcBottomSheet/VcBottomSheet.vue';
 export {default as VcInputBottomSheet} from './VcInputBottomSheet/VcInputBottomSheet.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';
@@ -47,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/VcChecklistItem/VcChecklistItem.vue

@@ -1,17 +1,23 @@
 <template>
-  <template>
-    <VcLayout class="VcChecklistItem" :data-qa="dataQa"
-              :class="{'disabled': disabled}">
-      <VcCheckbox :checked="checked"
-                  :avatar="getAvatar"
-                  :label="label"
-                  :show-avatar-border="false"
-                  :disabled="disabled"
-                  :data-qa="`${dataQa}-checkbox`"
-                  @change="onChange">
-      </VcCheckbox>
-    </VcLayout>
-  </template>
+  <VcTooltip :content="tooltipContent"
+             dark
+             :disabled="!tooltipContent || !disabled"
+             class="VcChecklistItem-wrapper">
+    <template>
+      <VcLayout class="VcChecklistItem" :data-qa="dataQa"
+                :class="{'disabled': disabled}">
+        <VcCheckbox :checked="checked"
+                    :avatar="getAvatar"
+                    :label="label"
+                    :show-avatar-border="false"
+                    :disabled="disabled"
+                    :data-qa="`${dataQa}-checkbox`"
+                    @change="onChange">
+
+        </VcCheckbox>
+      </VcLayout>
+    </template>
+  </VcTooltip>
 </template>
 
 <script>

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

@@ -10,7 +10,7 @@
             :data-qa="dataQa">
       <div class="vc-overflow">
         <v-list-item-group
-          v-model="confirmedArray"
+          :value="confirmedArray"
           multiple
           @change="onSelection">
           <VcTooltip v-for="(item, index) in items"
@@ -76,25 +76,30 @@ export default {
       default: 'VcListbox'
     }
   },
-  data: () => ({
-    confirmedArray: []
-  }),
-  created() {
-    this.items.forEach((item) => {
-      if (item.checked) {
-        this.confirmedArray.push(item)
-      }
-    })
-  },
+  // data: () => ({
+  //   confirmedArray: []
+  // }),
+  // watch: {
+  //   items: {
+  //     immediate: true,
+  //     deep: true,
+  //     handler(values) {
+  //       this.confirmedArray = values.filter((item) => item.checked)
+  //     }
+  //   }
+  // },
   computed: {
     getAddAnotherLabel() {
       return this.addAnotherLabel || this.$dst('ds.listbox.add')
+    },
+    confirmedArray() {
+      return this.items.filter(item => item.checked)
     }
   },
   methods: {
     onSelection(selections) {
-      selections.forEach((selected) => selected.checked = true)
-      this.$emit('change', selections)
+      const newSelections = selections.map((selected) => ({...selected, checked: true}))
+      this.$emit('change', newSelections)
     }
   }
 };

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);
 

package/src/components/modal/elements/VcModalFooter.stories.js

@@ -15,7 +15,7 @@ export const Playground = Template.bind({});
 // Set default values
 Playground.args = {
     direction: 'horizontal',
-    buttons: [{label: 'ok', event: 'onOkClicked', color: 'primary'},
+    buttons: [{label: 'ok', event: 'onOkClicked', color: 'white'},
         {label: 'cancel', event: 'onCancelClicked', color: 'secondary'}],
 }