@vcita/design-system 0.3.13 → 0.3.14

package/init/SvgIcons.js

@@ -5,6 +5,7 @@ export default {
     vip: `<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.9556 5.35938L9.6 9.125H2.4L1.04438 5.35938C0.997504 5.36718 0.948743 5.375 0.9 5.375C0.403125 5.375 0 4.95508 0 4.4375C0 3.91992 0.404993 3.5 0.901868 3.5C1.39874 3.5 1.80187 3.91992 1.80187 4.4375C1.80187 4.57616 1.77001 4.70703 1.71938 4.82421L3.075 5.67188C3.36187 5.85157 3.73687 5.75 3.90375 5.4453L5.43188 2.66016C5.23125 2.48829 5.1 2.23047 5.1 1.9375C5.1 1.41992 5.50313 1 6 1C6.49687 1 6.9 1.41992 6.9 1.9375C6.9 2.23047 6.76875 2.48829 6.56812 2.66016L8.09625 5.4453C8.26313 5.75 8.63624 5.85157 8.925 5.67188L10.2825 4.82421C10.23 4.70508 10.2 4.57616 10.2 4.4375C10.2 3.91992 10.6031 3.5 11.1 3.5C11.5969 3.5 12 3.91992 12 4.4375C12 4.95508 11.5969 5.375 11.1 5.375C11.0513 5.375 11.0025 5.36718 10.9556 5.35938ZM10.2 10.6875C10.2 10.8594 10.065 11 9.9 11H2.1C1.935 11 1.8 10.8594 1.8 10.6875V10.0625C1.8 9.89063 1.935 9.75 2.1 9.75H9.9C10.065 9.75 10.2 9.89063 10.2 10.0625V10.6875Z"/></svg>`,
     success: `<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M4.0789 10.6903L0.180509 6.79191C-0.0536593 6.5577 -0.0536593 6.17791 0.180509 5.94371L1.02871 5.09555C1.26291 4.86134 1.6427 4.86134 1.8769 5.09555L4.50302 7.7217L10.1279 2.09682C10.3621 1.86258 10.7419 1.86258 10.9761 2.09682L11.8243 2.94498C12.0585 3.17919 12.0585 3.55898 11.8243 3.79318L4.92713 10.6903C4.69289 10.9245 4.31314 10.9245 4.0789 10.6903Z" /></g><defs><clipPath id="clip0"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>`,
     close_button: `<svg viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg"><path d="M12.3047 13.0138L13.0119 12.3066C13.1093 12.2091 13.1093 12.0507 13.0119 11.9532L8.05931 7.00064L13.0065 2.05349C13.104 1.95599 13.104 1.79754 13.0065 1.70007L12.2993 0.992855C12.2018 0.895382 12.0434 0.895382 11.9459 0.992855L6.99867 5.94L2.04911 0.99012C1.9516 0.892616 1.79316 0.892616 1.69568 0.99012L0.988167 1.6973C0.890663 1.79481 0.890663 1.95325 0.988167 2.05076L5.93803 7.00064L0.993702 11.9447C0.896198 12.0422 0.896198 12.2006 0.993702 12.2981L1.70088 13.0053C1.79839 13.1028 1.95683 13.1028 2.05434 13.0053L6.99867 8.06127L11.9512 13.0138C12.0487 13.1113 12.2072 13.1113 12.3047 13.0138Z"/> </svg>`,
+    plus: `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.75 7.25101H8.75V2.25101C8.75 2.12601 8.625 2.00101 8.5 2.00101H7.5C7.34375 2.00101 7.25 2.12601 7.25 2.25101V7.25101H2.25C2.09375 7.25101 2 7.37601 2 7.50101V8.50101C2 8.65726 2.09375 8.75101 2.25 8.75101H7.25V13.751C7.25 13.9072 7.34375 14.001 7.5 14.001H8.5C8.625 14.001 8.75 13.9072 8.75 13.751V8.75101H13.75C13.875 8.75101 14 8.65726 14 8.50101V7.50101C14 7.37601 13.875 7.25101 13.75 7.25101Z"/></svg>`,
     arrow_right: `<svg class="arrow-right" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg"><path d="M6.40093 0.683058C6.15685 0.438981 5.76112 0.438981 5.51704 0.683058C5.27296 0.927136 5.27296 1.32286 5.51704 1.56694L7.78311 3.83301H0.625C0.279822 3.83301 0 4.11283 0 4.45801C0 4.80319 0.279822 5.08301 0.625 5.08301H7.78343L5.51704 7.3494C5.27296 7.59348 5.27296 7.98921 5.51704 8.23328C5.76112 8.47736 6.15685 8.47736 6.40093 8.23328L9.72198 4.91223C9.72612 4.90831 9.73021 4.90433 9.73426 4.90028C9.85634 4.77819 9.91736 4.61818 9.91732 4.45817C9.91736 4.29817 9.85634 4.13815 9.73426 4.01607C9.73021 4.01201 9.72611 4.00803 9.72198 4.00411L6.40093 0.683058Z"/></svg>`,
     warning: `<svg class="vc-notif" viewBox="0 0 16 15" xmlns="http://www.w3.org/2000/svg"><path d="M8.31873 10.5C8.41874 10.5 8.50309 10.4188 8.50623 10.3188L8.74061 5.19378C8.74372 5.08752 8.65934 5.00002 8.55311 5.00002H7.44374C7.33747 5.00002 7.25309 5.08752 7.25624 5.19378L7.49061 10.3188C7.49372 10.4219 7.5781 10.5 7.67811 10.5H8.31873Z"/><path d="M7.99998 12.875C8.48435 12.875 8.87498 12.4844 8.87498 12C8.87498 11.5156 8.48435 11.125 7.99998 11.125C7.5156 11.125 7.12498 11.5156 7.12498 12C7.12498 12.4844 7.5156 12.875 7.99998 12.875Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.844 0.65625C7.33344 -0.177083 8.52333 -0.216766 9.07706 0.537202L9.15518 0.65625L15.8194 13.0312C16.3119 13.8698 15.7405 14.9092 14.7923 14.9944L14.6665 15H1.33541C0.35042 15 -0.277403 13.993 0.121864 13.1414L6.844 0.65625ZM8.2917 1.16064C8.18032 0.969949 7.90489 0.948761 7.76849 1.07583L7.72445 1.13039L1.0426 13.5368C0.935848 13.719 1.04882 13.9484 1.26113 13.9925L1.33541 14H14.6665C14.8973 14 15.0441 13.7892 14.9714 13.5762L14.9389 13.5054L8.2917 1.16064Z"/></svg>`,
     warning_fill: `<svg class="vc-warning-fill" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.665 15.1111C15.689 15.1111 16.3326 14.0002 15.8199 13.1115L9.1549 1.55518C8.64283 0.667643 7.35802 0.666016 6.84506 1.55518L0.179883 13.1115C-0.331836 13.9985 0.308789 15.1111 1.3348 15.1111H14.665ZM8.60496 9.85592H7.39499C7.23615 9.85592 7.10501 9.73174 7.09637 9.57314L6.91149 5.31541C6.90214 5.14408 7.03852 5.00002 7.21008 5.00002H8.78984C8.96141 5.00002 9.09781 5.14408 9.08846 5.31541L8.90358 9.57314C8.89494 9.73174 8.7638 9.85592 8.60496 9.85592ZM6.85349 11.871C6.85349 12.5042 7.36678 13.0175 7.99998 13.0175C8.63317 13.0175 9.14647 12.5042 9.14647 11.871C9.14647 11.2378 8.63317 10.7246 7.99998 10.7246C7.36678 10.7246 6.85349 11.2378 6.85349 11.871Z"/></svg>`,

package/package.json

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

package/src/components/VcAvatar/VcAvatar.stories.js

@@ -13,7 +13,9 @@ const Template = (args, {argTypes}) => ({
                     :lightMode="lightMode" 
                     :lightModeTooltip="lightModeTooltip" 
                     :badgePosition="badgePosition" 
-                    :image-path="imagePath"/>
+                    :image-path="imagePath"
+                    :disabled="disabled"
+                    :show-border="showBorder"/>
               </div>`,
 });
 
@@ -22,7 +24,9 @@ export const Playground = Template.bind({});
 Playground.args = {
     size: 'lg',
     colorId: 1,
-    name: 'John Smith'
+    name: 'John Smith',
+    showBorder: true,
+    disabled: false
 }
 
 export const WithImage = Template.bind({});
@@ -32,6 +36,13 @@ WithImage.args = {
     size: 'md'
 }
 
+export const WithImageAsComponent = Template.bind({});
+
+WithImageAsComponent.args = {
+    imagePath: require('@/stories/assets/upgrade.svg'),
+    size: 'md'
+}
+
 export const WithText = Template.bind({});
 
 WithText.args = {

package/src/components/VcAvatar/VcAvatar.vue

@@ -3,13 +3,12 @@
        :class="computedClasses"
        :data-qa="dataQa">
     <v-tooltip bottom>
-      <template v-slot:activator="{ on, attrs }">
-        <img v-on="lightMode && lightModeTooltip && on" v-if="imagePath"
+      <template #activator="{ on, attrs }">
+        <VcImage v-on="lightMode && lightModeTooltip && on" v-if="imagePath"
              data-qa="avatarImage"
              class="avatar-image"
-             :src="imagePath"/>
-
-        <div v-on="lightMode && lightModeTooltip && on" v-else-if="!imagePath && name || text"
+             :image="imagePath"/>
+        <div v-on="lightMode && lightModeTooltip && on" v-if="!imagePath && name || text"
              class="avatar-initials" data-qa="avatar-initials">
           {{ text || initials }}
         </div>
@@ -25,7 +24,9 @@
 </template>
 
 <script>
+import VcImage from "@/components/VcImage/VcImage.vue";
 export default {
+  components: {VcImage},
   data() {
     return {
       icons: {
@@ -40,7 +41,7 @@ export default {
   name: "VcAvatar",
   props: {
     imagePath: {
-      type: String
+      type: [String, Object],
     },
     name: {
       type: String
@@ -71,14 +72,31 @@ export default {
       type: String,
       default: ''
     },
+    showBorder: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     dataQa: {
       type: String,
       default: 'VcAvatar'
     }
   },
   computed: {
+    setLightModeClass() {
+      return this.lightMode && !this.imagePath ? "light-mode" : ""
+    },
+    setShowBorder() {
+      return this.showBorder ? 'show-border' : ''
+    },
+    setdisabled() {
+      return this.disabled ? 'vc-disabled' : ''
+    },
     computedClasses() {
-      return this.colorClass + " " + this.size + " " + (this.lightMode && !this.imagePath ? "light-mode" : "")
+      return `${this.colorClass} ${this.size} ${this.setLightModeClass} ${this.setShowBorder} ${this.setdisabled}`
     },
     computedBadgeClass() {
       return this.badgeIcon + " " + this.size + " " + this.badgePosition
@@ -112,6 +130,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/../styles/variables.scss';
+
 // Avatar Colors
 $avatar_color_0: rgb(254, 214, 47);
 $avatar_color_1: rgb(254, 194, 46);
@@ -151,37 +171,44 @@ $avatar_colors: $avatar_color_0 $avatar_color_1 $avatar_color_2 $avatar_color_3
   border-radius: 50%;
   background-color: #a7a9ac;;
   text-align: center;
-  border: 1px solid #ffffff;
-  color: #ffffff;
+  color: var(--modal-bg-color);
+
+  &.show-border {
+    border: 1px solid var(--modal-bg-color);
+  }
+
+  &.vc-disabled {
+    filter: grayscale(100%);;
+  }
 
   &.light-mode {
     border: 1px solid rgba(#000000, .3);
     color: rgba(#000000, .3);
-    background-color: #ffffff;
+    background-color: var(--modal-bg-color);
   }
 
   &.x-sm {
     height: var(--avatar-x-sm);
     width: var(--avatar-x-sm);
-    font-size: 9px;
+    font-size: var(--font-size-xxx-small);
   }
 
   &.sm {
     height: var(--avatar-sm);
     width: var(--avatar-sm);
-    font-size: 12px;
+    font-size: var(--font-size-xx-small);
   }
 
   &.md {
     height: var(--avatar-md);
     width: var(--avatar-md);
-    font-size: 14px;
+    font-size: var(--font-size-small);
   }
 
   &.lg {
     height: var(--avatar-lg);
     width: var(--avatar-lg);
-    font-size: 17px;
+    font-size: var(--font-size-small3);
   }
 
   .avatar-image {
@@ -191,6 +218,15 @@ $avatar_colors: $avatar_color_0 $avatar_color_1 $avatar_color_2 $avatar_color_3
     width: 100%;
     object-fit: cover;
     border-radius: 50%;
+    overflow: hidden;
+
+    ::v-deep svg {
+      height: 100%;
+    }
+
+    ::v-deep img {
+      height: 100%;
+    }
   }
 
   .avatar-initials {
@@ -204,16 +240,16 @@ $avatar_colors: $avatar_color_0 $avatar_color_1 $avatar_color_2 $avatar_color_3
     fill: white;
     position: absolute;
     --gap: 0;
-    height: 16px;
-    width: 16px;
+    height: var(--size-value4);
+    width: var(--size-value4);
     border-radius: 50%;
 
     &.x-sm {
-      --gap: 4px;
+      --gap: var(--size-value1);
     }
 
     &.sm {
-      --gap: 4px;
+      --gap: var(--size-value1);
     }
 
     &.md {
@@ -221,7 +257,7 @@ $avatar_colors: $avatar_color_0 $avatar_color_1 $avatar_color_2 $avatar_color_3
     }
 
     &.lg {
-      --gap: 0px;
+      --gap: var(--size-value0);
     }
 
     bottom: calc(var(--gap) * -1);
@@ -233,7 +269,7 @@ $avatar_colors: $avatar_color_0 $avatar_color_1 $avatar_color_2 $avatar_color_3
     }
 
     &.confirmed {
-      border: 2px #ffffff solid;
+      border: 2px var(--modal-bg-color) solid;
     }
   }
 }

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

@@ -39,6 +39,17 @@ Slim.args = {
     buttonLabel: ''
 }
 
+export const WithImageAsComponent = Template.bind({});
+
+// Set default values
+WithImageAsComponent.args = {
+    buttonLabel: "Upgrade Now",
+    image: require('@/stories/assets/rabbit.svg'),
+    title: "Upgrade to get Reports!",
+    subtitle: "All the insights you need to understand your business and increase your bottom line.",
+    backgroundColor: "#f5fafd"
+}
+
 export default {
     title: 'Content display / VcBanner', // This will control the story sidebar position
     id: 'VcBanner', // This will be the link to this component

package/src/components/VcBanner/VcBanner.vue

@@ -1,41 +1,45 @@
 <template>
-  <div class="VcBanner pa-6 py-md-3 px-md-10 d-flex flex-column flex-md-row align-start align-md-center" :data-qa="dataQa" :style="{backgroundColor: backgroundColor}">
-    <img class="d-none d-md-block" v-if="image" :src="image">
+  <div class="VcBanner pa-6 py-md-3 px-md-10 d-flex flex-column flex-md-row align-start align-md-center"
+       :data-qa="dataQa" :style="{backgroundColor: backgroundColor}">
+    <VcImage class="d-none d-md-block" :image="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-title pb-2 pb-md-0">{{ title }}</div>
       <div class="banner-subtitle pb-4 pb-md-0" v-if="subtitle || $slots.subtitle">
         <slot name="subtitle">
-          {{subtitle}}
+          {{ subtitle }}
         </slot>
       </div>
     </div>
-    <VcButton :large="$vuetify.breakpoint.smAndUp" v-if="buttonLabel" @click="$emit('onAction')">{{buttonLabel}}</VcButton>
+    <VcButton :large="$vuetify.breakpoint.smAndUp" v-if="buttonLabel" @click="$emit('onAction')">
+      {{ buttonLabel }}
+    </VcButton>
   </div>
 </template>
 
 <script>
 import VcButton from "@/components/VcButton/VcButton.vue";
+import VcImage from "@/components/VcImage/VcImage.vue";
 
 export default {
   name: "VcBanner",
-  components: {VcButton},
-
+  components: {VcImage, VcButton},
   props: {
     dataQa: {
       type: String,
       default: 'VcBanner'
     },
-    image:{
-      type: String,
+    image: {
+      type: [String, Object],
+      required: true,
     },
     backgroundColor: {
       type: String,
       default: "#FFFFFF"
     },
-    title:{
+    title: {
       type: String
     },
-    subtitle:{
+    subtitle: {
       type: String
     },
     buttonLabel: {
@@ -48,8 +52,8 @@ export default {
 <style lang="scss" scoped>
 @import "../../scss/mixins.scss";
 
-.VcBanner{
-  min-height: 128px;
+.VcBanner {
+  height: 128px;
   box-sizing: border-box;
   box-shadow: var(--shadow-10);
   @include md-and-up {
@@ -57,10 +61,11 @@ export default {
     border-radius: var(--size-value3);
     border: 1px solid var(--neutral-lighten-2);
   }
-  img{max-width: 104px}
-  .text-container{
+
+  .text-container {
     color: var(--gray-darken-5);
-    .banner-title{
+
+    .banner-title {
       font-weight: var(--font-weight-large2);
       font-size: var(--font-size-small3);
       line-height: 22px;
@@ -69,7 +74,8 @@ export default {
         line-height: var(--size-value8);
       }
     }
-    .banner-subtitle{
+
+    .banner-subtitle {
       font-size: var(--font-size-small2);
       line-height: var(--size-value5);
       font-weight: var(--font-weight-medium);
@@ -77,5 +83,4 @@ export default {
   }
 }
 
-
 </style>

package/src/components/VcCheckbox/VcCheckbox.stories.js

@@ -14,6 +14,7 @@ const Template = (args, {argTypes}) => ({
           :indeterminate="indeterminate"
           :disabled="disabled"
           :tooltip="tooltip"
+          :show-avatar-border="showAvatarBorder"
           @change="onChange"/>
       </div>`,
 })
@@ -31,6 +32,7 @@ Playground.args = {
     indeterminate: false,
     disabled: false,
     tooltip: "tooltip example text",
+    showAvatarBorder: true,
     onChange: action('changed'),
 }
 

package/src/components/VcCheckbox/VcCheckbox.vue

@@ -1,25 +1,26 @@
 <template>
   <v-checkbox
-      class="vc-checkbox d-flex align-center"
-      hide-details="true"
-      :disabled="disabled"
-      :ripple="false"
-      on-icon="check"
-      off-icon=""
-      indeterminate-icon="$indeterminate"
-      :indeterminate="indeterminate"
-      color="white"
-      v-model="selected"
-      :label="label"
-      :value="value"
-      :data-qa="dataQa"
-  >
+    class="vc-checkbox d-flex align-center"
+    hide-details="true"
+    :disabled="disabled"
+    :ripple="false"
+    on-icon="check"
+    off-icon=""
+    indeterminate-icon="$indeterminate"
+    :indeterminate="indeterminate"
+    color="white"
+    v-model="selected"
+    :label="label"
+    :value="value"
+    :data-qa="dataQa">
     <template #label>
       <div class="d-flex align-center">
         <VcAvatar v-if="avatar && label" class="ms-1 me-3"
                   :image-path="avatar.path"
                   :name="avatar.name"
                   :color-id="avatar.colorId"
+                  :disabled="disabled"
+                  :show-border="showAvatarBorder"
                   size="x-sm"/>
         <span class="checkbox-label" v-if="label">{{ label }}</span>
         <VcTooltip v-if="tooltip && label" dark :content="tooltip" bottom>
@@ -78,6 +79,10 @@ export default {
       type: [String, Boolean, Number],
       default: false,
     },
+    showAvatarBorder: {
+      type: Boolean,
+      default: true
+    },
     dataQa: {
       type: String,
       default: 'VcCheckbox'

package/src/components/VcEmptyState/VcEmptyState.stories.js

@@ -3,19 +3,15 @@ import VcEmptyStateCmp from './VcEmptyState';
 const Template = (args, {argTypes}) => ({
     components: {VcEmptyState: VcEmptyStateCmp},
     props: Object.keys(argTypes),
-    computed: {
-        iconParam() {
-            return require('@/stories/assets/rabbit.svg');
-        },
-    },
     template: `
       <div>
-      <VcEmptyState :icon="iconParam" :title="title"
-                    :subtitle="subtitle" :content="content"
+      <VcEmptyState :title="title"
+                    :subtitle="subtitle"
                     :size="size"
                     :button="button"
                     :link-label="linkLabel"
                     :link-url="linkUrl"
+                    :image="image"
                     @click="onClick"/>
       </div>`,
 })
@@ -26,11 +22,24 @@ export const Playground = Template.bind({});
 Playground.args = {
     title: 'Title',
     subtitle: 'Subtitle',
-    content: 'content text',
     size: 'md',
     button: 'Reload',
     linkLabel: 'link label',
-    linkUrl: 'www.google.com'
+    linkUrl: 'www.google.com',
+    image: require('@/stories/assets/rabbit.svg'),
+}
+
+export const WithImageAsComponent = Template.bind({});
+
+// Set default values
+WithImageAsComponent.args = {
+    title: 'What is different here?',
+    subtitle: 'It looks the same, but this one gets the image in a slot and not as a prop, which might come in handy in some cases',
+    size: 'md',
+    button: 'Reload',
+    linkLabel: 'link label',
+    linkUrl: 'www.google.com',
+    image: require('@/stories/assets/rabbit.svg'),
 }
 
 export default {

package/src/components/VcEmptyState/VcEmptyState.vue

@@ -1,14 +1,16 @@
 <template>
   <VcLayout column :class="`VcEmptyState ${size}`" :data-qa="dataQa">
     <VcLayout column align-content-center>
-      <img v-if="icon" :src="icon" class="VcEmptyStateImage">
-      <VcSvg v-if="svg" :svg="svg" class="VcEmptyStateImage"/>
+      <VcImage v-if="currentImage" :image="currentImage" class="VcEmptyStateImage"/>
       <div class="VcEmptyStateTitle">{{ title }}</div>
     </VcLayout>
     <VcLayout class="VcEmptyStateSubtitle" column>{{ subtitle }}</VcLayout>
     <slot name="buttonArea">
       <VcLayout v-if="button || (linkLabel && linkUrl)" column align-center>
-        <VcButton v-if="button" small pill @click="$emit('click')" :block="false" class="VcEmptyStateButton">{{ button }}</VcButton>
+        <VcButton v-if="button" small pill :block="false" class="VcEmptyStateButton"
+                  @click="$emit('click')">
+          {{ button }}
+        </VcButton>
         <VcLink v-if="linkLabel && linkUrl" :url="linkUrl" :label="linkLabel"></VcLink>
       </VcLayout>
     </slot>
@@ -20,23 +22,28 @@ import VcLayout from "@/components/VcLayout/VcLayout.vue";
 import VcButton from "@/components/VcButton/VcButton.vue";
 import VcLink from "@/components/VcLink/VcLink.vue";
 import VcSvg from "@/components/VcSvg/VcSvg.vue";
+import VcImage from "@/components/VcImage/VcImage.vue";
 
 export default {
   name: 'VcEmptyState',
-  components: {VcSvg, VcButton, VcLayout, VcLink},
+  components: {VcImage, VcSvg, VcButton, VcLayout, VcLink},
   props: {
     size: {
       type: String,
       default: 'md',
       validator: prop => ['sm', 'md', 'lg'].includes(prop)
     },
+    image: {
+      type: [String, Object],
+      comment: 'This is the standard way to pass the image, the icon and svg props are for backward compatibility'
+    },
     icon: {
-      type: String,
-      comment: 'url to some image'
+      type: [String, Object],
+      comment: 'url to some image, deprecated',
     },
     svg: {
-      type: String,
-      comment: 'using the svgImage design system object'
+      type: [String, Object],
+      comment: 'using the svgImage design system object, deprecated',
     },
     title: {
       type: String,
@@ -63,6 +70,12 @@ export default {
       default: 'VcEmptyState'
     }
   },
+  computed: {
+    currentImage() {
+      // for backward compatibility
+      return this.image || this.icon || this.svg;
+    }
+  }
 }
 </script>
 
@@ -79,11 +92,7 @@ export default {
 
   .VcEmptyStateImage {
     margin-bottom: var(--size-value4);
-    max-height: 160px;
-
-    ::v-deep svg {
-      width: 160px;
-    }
+    height: 160px;
   }
 
   .VcEmptyStateTitle {
@@ -104,7 +113,7 @@ export default {
 
 .sm {
   .VcEmptyStateImage {
-    max-height: 48px;
+    height: 48px;
     margin-bottom: var(--size-value8);
 
     ::v-deep svg {
@@ -115,7 +124,7 @@ export default {
 
 .lg {
   .VcEmptyStateImage {
-    max-height: 280px;
+    height: 280px;
     margin-bottom: var(--size-value8);
 
     ::v-deep svg {

package/src/components/VcExpansionCard/VcExpansionCard.stories.js

@@ -14,7 +14,15 @@ const Template = (args, {argTypes}) => ({
             return require('../../stories/assets/HeaderImage.svg');
         },
     },
-    template: '<div><VcExpansionCard :disabled="disabled" :value="value" :toLogo="logoAppParam" :fromLogo="logoDirectoryParam" :title="title" /></div>',
+    template: `
+      <div>
+      <VcExpansionCard
+          :disabled="disabled" 
+          :value="value" 
+          :toLogo="logoAppParam" 
+          :fromLogo="logoDirectoryParam"
+          :title="title"/>
+      </div>`,
 })
 
 export const Playground = Template.bind({});
@@ -23,7 +31,32 @@ export const Playground = Template.bind({});
 Playground.args = {
     disabled: false,
     value: false,
-    title:'text to <b>storybook</b>'
+    title: 'text to <b>storybook</b>'
+}
+
+const TemplateWithLogos = (args, {argTypes}) => ({
+    components: {VcExpansionCard: VcExpansionCardCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+      <VcExpansionCard
+          :disabled="disabled"
+          :value="value"
+          :toLogo="toLogo"
+          :fromLogo="fromLogo"
+          :title="title"/>
+      </div>`,
+})
+
+export const WithLogosAsComponents = TemplateWithLogos.bind({});
+
+// Set default values
+WithLogosAsComponents.args = {
+    disabled: false,
+    value: false,
+    title: 'text to <b>storybook</b>',
+    fromLogo: require('../../stories/assets/rabbit.svg'),
+    toLogo: require('../../stories/assets/HeaderImage.svg'),
 }
 
 export default {