@vcita/design-system 0.2.7 → 0.3.11

package/init/DesignSystem.js

@@ -1,6 +1,7 @@
 import Vuetify from 'vuetify';
 import Vue from "vue";
 import vuetifyConfig from './vuetify.config';
+import {reducer} from './vuetify.config';
 
 import {
     VAlert,
@@ -76,14 +77,29 @@ Vue.use(Vuetify, {
     }
 });
 
-const DesignSystem = ({theme = {}, options = {}} = {}, locale ='en') => {
+const DesignSystem = ({theme = {}, options = {}, extIcons = {}} = {}, locale ='en') => {
     const ds = { ...(Vue.prototype.$ds || {}), ...options};
     // Make the options available to all the components
     Vue.prototype.$ds = ds;
     Vue.prototype.$log = Vue.prototype.$log || console.log;
     Vue.prototype.$svgImages = Vue.prototype.$svgImages || svgImages;
 
-    const vuetifyConfigOverride = Object.assign({}, vuetifyConfig, theme);
+
+    const DSIcons = vuetifyConfig.icons;
+
+    const iconsArray = Object.keys(extIcons).reduce((acc, key) => reducer(acc, key, extIcons), {});
+
+    const icons = {
+        icons:{
+            ...DSIcons,
+            values: { 
+                ...DSIcons.values,
+                ...iconsArray 
+            }
+        }
+    };
+
+    const vuetifyConfigOverride = {...vuetifyConfig, ...theme, ...icons };
     // initI18n(locale);
     return new Vuetify(vuetifyConfigOverride);
 }

package/init/SvgIcons.js

@@ -8,6 +8,7 @@ export default {
     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>`,
+    check_button: `<svg viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><path d="M3.63154 7.92003L9.92635 1.10796C10.0247 1.0015 10.0247 0.828852 9.92635 0.722369L9.33252 0.0797233C9.23412 -0.0267372 9.0746 -0.0267372 8.97621 0.0797233L3.45338 6.05635L1.42411 3.86033C1.32571 3.75385 1.16619 3.75385 1.06777 3.86033L0.473945 4.50296C0.375547 4.60944 0.375547 4.78207 0.473945 4.88857L3.27523 7.92003C3.3736 8.02649 3.53312 8.02649 3.63154 7.92003Z"/></svg>`,
     check_circle: `<svg class="vc-notif" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.25C3.71875 0.25 0.25 3.75 0.25 8C0.25 12.2812 3.71875 15.75 8 15.75C12.25 15.75 15.75 12.2812 15.75 8C15.75 3.75 12.25 0.25 8 0.25ZM8 14.75C4.28125 14.75 1.25 11.75 1.25 8C1.25 4.3125 4.25 1.25 8 1.25C11.6875 1.25 14.75 4.28125 14.75 8C14.75 11.7188 11.7188 14.75 8 14.75ZM12.4062 5.65625C12.5625 5.78125 12.5625 6.03125 12.4062 6.1875L6.78125 11.7812C6.625 11.9062 6.375 11.9062 6.25 11.7812L3.5625 9.0625C3.40625 8.90625 3.40625 8.6875 3.5625 8.53125L3.8125 8.28125C3.96875 8.125 4.21875 8.125 4.34375 8.28125L6.5 10.4375L11.625 5.375C11.75 5.21875 12 5.21875 12.1562 5.375L12.4062 5.65625Z"/></svg>`,
     check_fill: `<svg class="vc-check-fill" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.7533 8.0034C15.7533 12.2836 12.2835 15.7534 8.00329 15.7534C3.72309 15.7534 0.253311 12.2836 0.253311 8.0034C0.253311 3.7232 3.72309 0.253418 8.00329 0.253418C12.2835 0.253418 15.7533 3.7232 15.7533 8.0034ZM3.14973 8.85694L6.39972 12.1069C6.595 12.3022 6.91159 12.3022 7.10687 12.107L12.8569 6.35698C13.0521 6.16173 13.0521 5.84511 12.8569 5.64986L12.1497 4.94277C11.9545 4.74749 11.6379 4.74749 11.4426 4.94277L6.7533 9.63209L4.56397 7.44273C4.36872 7.24748 4.0521 7.24748 3.85685 7.44273L3.14973 8.14982C2.95451 8.34507 2.95451 8.66169 3.14973 8.85694Z"/></svg>`,
     info: `<svg class="vc-notif" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M0.25 8.5C0.25 4.25 3.71875 0.75 8 0.75C12.25 0.75 15.75 4.25 15.75 8.5C15.75 12.7812 12.25 16.25 8 16.25C3.71875 16.25 0.25 12.7812 0.25 8.5ZM14.75 8.5C14.75 4.78125 11.6875 1.75 8 1.75C4.25 1.75 1.25 4.78125 1.25 8.5C1.25 12.25 4.25 15.25 8 15.25C11.7188 15.25 14.75 12.25 14.75 8.5ZM6.875 11.5C6.65625 11.5 6.5 11.6875 6.5 11.875V12.125C6.5 12.3438 6.65625 12.5 6.875 12.5H9.125C9.3125 12.5 9.5 12.3438 9.5 12.125V11.875C9.5 11.6875 9.3125 11.5 9.125 11.5H8.75V7.125C8.75 6.9375 8.5625 6.75 8.375 6.75H6.875C6.65625 6.75 6.5 6.9375 6.5 7.125V7.375C6.5 7.59375 6.65625 7.75 6.875 7.75H7.25V11.5H6.875ZM7 5C7 4.46875 7.4375 4 8 4C8.53125 4 9 4.46875 9 5C9 5.5625 8.53125 6 8 6C7.4375 6 7 5.5625 7 5Z"/></svg>`,
@@ -20,4 +21,7 @@ export default {
     attention_fill: `<svg class="vc-attention-fill" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.00249 11.815C9.21241 11.815 11.815 9.21335 11.815 6.00249C11.815 2.7935 9.21241 0.190002 6.00249 0.190002C2.79257 0.190002 0.190002 2.7935 0.190002 6.00249C0.190002 9.21335 2.79257 11.815 6.00249 11.815ZM5.43358 6.75249C5.28421 6.75249 5.16089 6.63571 5.15277 6.48657L4.97891 3.29908C4.97012 3.13797 5.09836 3.0025 5.2597 3.0025H6.74525C6.90659 3.0025 7.03486 3.13797 7.02607 3.29908L6.85221 6.48657C6.84409 6.63571 6.72076 6.75249 6.5714 6.75249H5.43358ZM4.92437 8.25248C4.92437 8.84792 5.40705 9.33061 6.00249 9.33061C6.59792 9.33061 7.08061 8.84792 7.08061 8.25248C7.08061 7.65705 6.59792 7.17436 6.00249 7.17436C5.40705 7.17436 4.92437 7.65705 4.92437 8.25248Z"/></svg>`,
     three_dots: `<svg class="vc-three-dots" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.52637 2.47368C6.52637 3.30263 7.1711 3.94737 8.00005 3.94737C8.78295 3.94737 9.47374 3.30263 9.47374 2.47368C9.47374 1.69079 8.78295 1 8.00005 1C7.1711 1 6.52637 1.69079 6.52637 2.47368ZM8.00005 6.52632C7.1711 6.52632 6.52637 7.21711 6.52637 8.00001C6.52637 8.82895 7.1711 9.47369 8.00005 9.47369C8.78295 9.47369 9.47374 8.82895 9.47374 8.00001C9.47374 7.21711 8.78295 6.52632 8.00005 6.52632ZM8.00005 15C7.1711 15 6.52637 14.3553 6.52637 13.5263C6.52637 12.7435 7.1711 12.0526 8.00005 12.0526C8.78295 12.0526 9.47374 12.7435 9.47374 13.5263C9.47374 14.3553 8.78295 15 8.00005 15Z"/></svg>`,
     indeterminate: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4.5" y="11" width="7" height="2" rx="0.25" fill="white"/></svg>',
+    chevron_left: `<svg class="vc-chevron-left" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_652_11903)"><path d="M4.61199 0.903801L4.14795 1.36786C4.03811 1.47768 4.03811 1.65574 4.14795 1.76561L8.38308 6.01081L4.14795 10.256C4.03811 10.3659 4.03811 10.5439 4.14795 10.6538L4.61199 11.1178C4.7218 11.2276 4.8999 11.2276 5.00974 11.1178L9.91786 6.20968C10.0277 6.09984 10.0277 5.92177 9.91786 5.81191L5.00974 0.903779C4.8999 0.793962 4.72181 0.793962 4.61199 0.903801Z"/></g><defs><clipPath id="clip0_652_11903"><rect width="12" height="12" fill="white" transform="translate(12 12) rotate(-180)"/></clipPath></defs></svg>`,
+    mastercard: `<svg width="48" height="30" viewBox="0 0 48 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.4888 3.20898H17.5103V26.7923H30.4888V3.20898Z" fill="#FF5F00"/><path d="M18.3348 15C18.3348 10.2083 20.5597 5.95834 23.9794 3.20834C21.4661 1.20834 18.2936 0 14.8326 0C6.63348 0 0 6.70833 0 15C0 23.2917 6.63348 30 14.8326 30C18.2936 30 21.4661 28.7917 23.9794 26.7917C20.5597 24.0833 18.3348 19.7917 18.3348 15Z" fill="#EB001B"/><path d="M47.9997 15C47.9997 23.2917 41.3663 30 33.1672 30C29.7062 30 26.5337 28.7917 24.0204 26.7917C27.4813 24.0417 29.665 19.7917 29.665 15C29.665 10.2083 27.4401 5.95834 24.0204 3.20834C26.5337 1.20834 29.7062 0 33.1672 0C41.3663 0 47.9997 6.75 47.9997 15Z" fill="#F79E1B"/></svg>`,
+    visa: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.7996 31.3605H16.9113L19.3433 16.2734H23.2314L20.7996 31.3605Z" fill="#00579F"/><path d="M34.8956 16.6423C34.1287 16.3371 32.9122 16 31.4081 16C27.5682 16 24.8642 18.0543 24.8477 20.9913C24.8158 23.1583 26.7836 24.3618 28.2555 25.0844C29.7598 25.8227 30.2712 26.3046 30.2712 26.9627C30.2559 27.9734 29.0556 28.4393 27.9361 28.4393C26.3837 28.4393 25.5519 28.1991 24.2878 27.6368L23.7758 27.3957L23.2317 30.7824C24.1437 31.1993 25.8238 31.5692 27.5682 31.5854C31.6482 31.5854 34.3043 29.5629 34.3358 26.433C34.3513 24.7155 33.3122 23.3995 31.0719 22.3242C29.712 21.6339 28.8791 21.1684 28.8791 20.4621C28.895 19.82 29.5835 19.1623 31.1187 19.1623C32.3828 19.1301 33.3116 19.4349 34.0151 19.74L34.3668 19.9002L34.8956 16.6423Z" fill="#00579F"/><path d="M40.0634 26.0157C40.3836 25.1489 41.6158 21.7944 41.6158 21.7944C41.5996 21.8267 41.9354 20.9117 42.1274 20.35L42.3991 21.65C42.3991 21.65 43.1354 25.2614 43.2953 26.0157C42.6876 26.0157 40.8314 26.0157 40.0634 26.0157ZM44.863 16.2734H41.8554C40.9279 16.2734 40.2233 16.5461 39.8231 17.5252L34.0475 31.3603H38.1274C38.1274 31.3603 38.7991 29.4982 38.9435 29.0971C39.3911 29.0971 43.36 29.0971 43.9358 29.0971C44.0474 29.6268 44.3997 31.3603 44.3997 31.3603H48L44.863 16.2734Z" fill="#00579F"/><path d="M13.6636 16.2734L9.8556 26.5614L9.43948 24.4748C8.73547 22.0673 6.52754 19.4515 4.0636 18.1509L7.55156 31.3445H11.6634L17.7752 16.2734H13.6636Z" fill="#00579F"/><path d="M6.31995 16.2734H0.0640009L0 16.5783C4.88004 17.8303 8.11199 20.8481 9.43985 24.4755L8.07988 17.5416C7.85598 16.5781 7.16792 16.3052 6.31995 16.2734Z" fill="#FAA61A"/></svg>`
 }

package/init/vuetify.config.js

@@ -1,14 +1,14 @@
 import VcSvg from "../src/components/VcSvg/VcSvg.vue";
 import icons from "./SvgIcons";
 
-const reducer = (acc, key) => {
+export const reducer = (acc, key, obj = icons) => {
     acc[key] = {
         component: VcSvg,
-        props: {svg: icons[key]}
+        props: {svg: obj[key]}
     };
     return acc;
 }
-const iconsArray = Object.keys(icons).reduce(reducer, {});
+const iconsArray = Object.keys(icons).reduce((acc, key) => reducer(acc, key), {});
 
 export default {
     icons: {

package/package.json

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

package/src/components/VcActionList/VcActionList.spec.js

@@ -34,7 +34,7 @@ describe("VcActionList.vue", () => {
             }, {
                 title: 'Remove from wait list',
                 event: 'remove',
-                icon: 'example'
+                icon: 'warning_fill'
             }, {
                 title: 'Go to client page',
                 event: 'goToClientPage',

package/src/components/VcActionList/VcActionList.stories.js

@@ -27,7 +27,7 @@ Playground.args = {
         }, {
             title: 'Remove from waitlist',
             event: 'remove',
-            icon: 'example'
+            icon: 'warning_fill'
         }, {
             title: 'Go to client page',
             event: 'goToClientPage',

package/src/components/VcActions/VcActions.spec.js

@@ -45,7 +45,7 @@ describe("VcActions.vue", () => {
             }, {
                 title: 'Remove from wait list',
                 event: 'remove',
-                icon: 'example'
+                icon: 'warning_fill'
             }, {
                 title: 'Go to client page',
                 event: 'goToClientPage',

package/src/components/VcActions/VcActions.stories.js

@@ -36,7 +36,7 @@ Playground.args = {
         }, {
             title: 'Remove from waitlist',
             event: 'remove',
-            icon: 'example'
+            icon: 'warning_fill'
         }, {
             title: 'Go to client page',
             event: 'goToClientPage',

package/src/components/VcActions/VcActions.vue

@@ -5,11 +5,9 @@
              v-model="showSheet"
              v-bind="$props">
     <template v-slot="{attrs, on}">
-      <slot v-bind="attrs" v-on="on">
-        <VcIcon v-bind="attrs" v-on="on" small @click="showSheet = !showSheet">
-          $three_dots
-        </VcIcon>
-      </slot>
+      <VcIcon v-bind="attrs" v-on="on" small @click="showSheet = !showSheet">
+        $three_dots
+      </VcIcon>
     </template>
   </component>
 </template>
@@ -18,7 +16,7 @@
 
 import VcActionList from "../VcActionList/VcActionList.vue";
 import VcBottomActions from "../VcBottomActions/VcBottomActions.vue";
-import VcIcon from "@/components/VcIcon/VcIcon.vue";
+import VcIcon from "../VcIcon/VcIcon.vue";
 
 export default {
   name: "VcActions",

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/VcBottomActions/VcBottomActions.spec.js

@@ -33,7 +33,7 @@ describe("VcBottomActions.vue", () => {
             }, {
                 title: 'Remove from wait list',
                 event: 'remove',
-                icon: 'example'
+                icon: 'warning_fill'
             }, {
                 title: 'Go to client page',
                 event: 'goToClientPage',

package/src/components/VcBottomActions/VcBottomActions.stories.js

@@ -31,7 +31,7 @@ Playground.args = {
         }, {
             title: 'Remove from waitlist',
             event: 'remove',
-            icon: 'example'
+            icon: 'warning_fill'
         }, {
             title: 'Go to client page',
             event: 'goToClientPage',
@@ -56,8 +56,8 @@ const noHeaderTemplate = (args, {argTypes}) => ({
                          :data-qa="dataQa"
                          @close="onClose"
                          @action="onAction">
-          <template>
-            <v-icon>$information</v-icon>
+          <template v-slot="{attrs, on}">
+            <v-icon v-bind="attrs" v-on="on">$information</v-icon>
           </template>
         </VcBottomActions>
       </div>`,

package/src/components/VcEmptyState/VcEmptyState.vue

@@ -131,4 +131,4 @@ export default {
   }
 }
 
-</style>
+</style>

package/src/components/VcExpansionCard/VcExpansionCard.spec.js

@@ -0,0 +1,146 @@
+import '@testing-library/jest-dom';
+import VcExpansionCard from "./VcExpansionCard.vue";
+import init from "../../../testing-library.config"
+import Vuetify from 'vuetify';
+import {render} from "@testing-library/vue";
+import {fireEvent} from '@testing-library/dom'
+
+
+init();
+
+
+const props = {
+    basic: {
+        title: 'expansion card title',
+        value: true
+    },
+    valueFalse: {
+        title: 'expansion card title',
+        value: false
+    },
+};
+
+describe("VcExpansionCard.vue", () => {
+
+    const renderWithVuetify = (component, options, callback, isMobile = false) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+        
+        const vuetify = new Vuetify()
+        const breakpoint = {
+            init: jest.fn(),
+            framework: {},
+            mdAndUp: true,
+        }
+        if (isMobile) {
+            breakpoint.mdAndUp = false;
+        }
+
+        vuetify.framework.breakpoint = breakpoint;
+
+        return render(
+            component,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify: vuetify,
+                ...options,
+                mocks: {},
+            },
+            callback,
+        )
+    }
+
+    it("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId} = renderWithVuetify(VcExpansionCard, {
+            props: props.basic
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+
+
+        const component = getByTestId('VcExpansionCard');
+        expect(component).toBeInTheDocument();
+        
+        //default value true
+        const border = container.querySelector('.expansionCard');
+        expect(border).toHaveClass('is-active');
+
+        //default desktop
+        const title = container.querySelector('.ec-text')
+        expect(title).toHaveClass('order-1');
+    });
+
+    it("mounts mobile", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId} = renderWithVuetify(VcExpansionCard, {
+            props: props.basic
+        }, undefined, true);
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true') 
+
+
+        const component = getByTestId('VcExpansionCard');
+        expect(component).toBeInTheDocument();
+
+        const title = container.querySelector('.ec-text')
+        expect(title).toHaveClass('full-width');
+    });
+
+  it("have title", () => {
+    const {getByText} = renderWithVuetify(VcExpansionCard,{props: props.basic})
+    const title = getByText('expansion card title');
+    expect(title).toBeInTheDocument();
+  });
+
+
+  it("have 2 logos", () => {
+    const {container} = renderWithVuetify(VcExpansionCard,{props: props.basic});
+    const logo = container.querySelectorAll('.VcLogoImage');
+    expect(logo).toHaveLength(2);
+  });
+
+  it("gray border on false value",()=>{
+    const {container} = renderWithVuetify(VcExpansionCard,{props: props.valueFalse});
+    const border = container.querySelector('.expansionCard');
+    expect(border).not.toHaveClass('is-active');
+  })
+
+  it('active with slot',()=>{
+      // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+      const {container,getByText} = renderWithVuetify(VcExpansionCard, {
+        props: props.basic,
+        slots: {
+            content: '<div>content</div>',
+        },
+    })
+    //default value true
+    const border = container.querySelector('.expansionCard');
+    expect(border).toHaveClass('is-active');
+    
+    const slotContent = getByText('content');
+    expect(slotContent).toBeInTheDocument();
+  })
+
+  it('event emitted',async () => {
+    const {emitted,getByRole} = renderWithVuetify(VcExpansionCard, {
+        props: props.basic,
+    })
+
+    const switchName = getByRole('switch');
+    expect(switchName).toBeInTheDocument();
+    expect(switchName).toHaveAttribute('aria-checked',"true");
+
+    await fireEvent.click(switchName);
+    expect(switchName).toHaveAttribute('aria-checked',"false");
+    expect(emitted().input.length).toBe(1);
+
+    await fireEvent.click(switchName);
+    expect(switchName).toHaveAttribute('aria-checked',"true");
+    expect(emitted().input.length).toBe(2);
+  })
+
+});

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

@@ -0,0 +1,43 @@
+import VcExpansionCardCmp from './VcExpansionCard.vue';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcExpansionCard: VcExpansionCardCmp},
+    props: Object.keys(argTypes),
+    data: () => ({
+        itemValue: true,
+    }),
+    computed: {
+        logoAppParam() {
+            return require('../../stories/assets/rabbit.svg');
+        },
+        logoDirectoryParam() {
+            return require('../../stories/assets/HeaderImage.svg');
+        },
+    },
+    template: '<div><VcExpansionCard :disabled="disabled" :value="value" :toLogo="logoAppParam" :fromLogo="logoDirectoryParam" :title="title" /></div>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    disabled: false,
+    value: false,
+    title:'text to <b>storybook</b>'
+}
+
+export default {
+    title: 'Form / VcExpansionCard',
+    id: 'VcExpansionCard',
+    component: VcExpansionCardCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=4133%3A39303',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        },
+    },
+};

package/src/components/VcExpansionCard/VcExpansionCard.vue

@@ -0,0 +1,117 @@
+<template>
+  <div id="container" class="expansionCard"  :class="{'is-active': value}" :data-qa="dataQa">
+    <v-container fluid>
+      <div class="d-flex flex-wrap justify-space-between align-center" style="min-width:100%">
+        <div class="justify-start d-flex align-center" style="min-width:92px">
+            <img class="VcLogoImage" :src="fromLogo">
+            <VcIcon size="12">$chevron_left</VcIcon>
+            <img class="VcLogoImage" :src="toLogo">
+        </div>
+        <div class="d-flex justify-end" style="width:initial;" :class="{'order-2':$vuetify.breakpoint.mdAndUp}">
+          <VcSwitch
+            :disabled="disabled"
+            :ripple="false"
+            icon
+            v-model="value"
+            color="secondary"
+            @input="val => $emit('input', Boolean(val))"
+          >
+          </VcSwitch>
+        </div>
+        <div class="d-flex flex-wrap ec-text"
+        :class="{
+            'order-1 justify-start':$vuetify.breakpoint.mdAndUp,
+            'full-width':!$vuetify.breakpoint.mdAndUp
+        }">
+          <div
+            class="ec-title"
+            v-html="title"
+          >
+          </div>
+        </div>
+        
+      </div>
+      <slot name="content" v-if="value"></slot>
+    </v-container>
+  </div>
+</template>
+<script>
+import VcIcon from '../VcIcon/VcIcon.vue'
+import VcSwitch from '../VcSwitch/VcSwitch.vue';
+export default {
+  components: { VcIcon, VcSwitch },
+  name: 'VcExpansionCard',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+        type: Boolean,
+        default: false
+    },
+    toLogo: {
+        type: String,
+        required: false,
+        default: "",
+    },
+    fromLogo: {
+        type: String,
+        required: false,
+        default: "",
+    },
+    title: {
+        type: String,
+        required: false,
+    },
+    dataQa: {
+      type: String,
+      default: 'VcExpansionCard'
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+.expansionCard{
+    border-radius:6px;
+    border: 1px solid;
+    border-color: var(--gray-darken-1)!important; 
+    margin: var(--size-value5) 0;
+
+    &.is-active{
+    border-color: var(--v-secondary-base)!important;
+    }
+    
+    & .ec-title {
+        font-size: var(--font-size-small2);
+        line-height: var(--size-value6);
+        margin: var(--size-value3) 0px;
+    }
+
+    & .vc-chevron-left {
+        fill: var(--gray-darken-1) !important;
+    }
+
+    & .VcLogoImage {
+    width: var(--size-value7);
+    height:var(--size-value7);
+    margin: 0px 6px;
+    border: 1px solid var(--gray-lighten-1);
+    box-sizing: border-box;
+    border-radius: 6px;
+  }
+
+  & .ec-text{
+    &.full-width{
+      width: 100%;
+    }
+
+    &.order-1{
+      flex-grow: 1;
+    }
+  }
+    
+}
+</style>

package/src/components/VcSwitch/VcSwitch.spec.js

@@ -3,9 +3,16 @@ import VcSwitch from "./VcSwitch.vue";
 import init from "../../../testing-library.config"
 import Vuetify from 'vuetify'
 import {render} from "@testing-library/vue";
+import {fireEvent} from '@testing-library/dom'
 
 init();
 
+const props = {
+    withIcon: {
+        icon: true
+    },
+}
+
 describe("VcSwitch.vue", () => {
 
     const renderWithVuetify = (component, options, callback) => {
@@ -35,4 +42,37 @@ describe("VcSwitch.vue", () => {
         expect(container).toHaveAttribute('data-app', 'true')
     });
 
+    it('with icon',() => {
+        const {container} = renderWithVuetify(VcSwitch, {
+            props: props.withIcon
+        })
+
+        const icon = container.querySelector('.v-icon');
+        expect(icon).toBeInTheDocument();
+
+        const switchContainer = container.querySelector('.switchContainer');
+        expect(switchContainer).toHaveClass('with-icon');
+
+    })
+
+
+  it('event emitted',async () => {
+    const {emitted,getByRole} = renderWithVuetify(VcSwitch, {
+        props: props.basic,
+    })
+
+    const switchName = getByRole('switch');
+    expect(switchName).toBeInTheDocument();
+    expect(switchName).toHaveAttribute('aria-checked',"true");
+
+    await fireEvent.click(switchName);
+    expect(switchName).toHaveAttribute('aria-checked',"false");
+    expect(emitted().input.length).toBe(1);
+
+    await fireEvent.click(switchName);
+    expect(switchName).toHaveAttribute('aria-checked',"true");
+    expect(emitted().input.length).toBe(2);
+  })
+
+
 });

package/src/components/VcSwitch/VcSwitch.stories.js

@@ -9,7 +9,7 @@ const Template = (args, {argTypes}) => ({
     data: () => ({
         itemValue: true,
     }),
-    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :ripple="ripple" :disabled="disabled" @input="onChange"/></div>',
+    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :ripple="ripple" :disabled="disabled" @input="onChange" :icon="icon" /></div>',
 })
 
 export const Playground = Template.bind({});
@@ -20,6 +20,7 @@ Playground.args = {
     onChange: action("input"),
     ripple: true,
     disabled: false,
+    icon: false,
 }
 
 const TemplateDisabled = (args, {argTypes}) => ({
@@ -28,7 +29,7 @@ const TemplateDisabled = (args, {argTypes}) => ({
     data: () => ({
         itemValue: true,
     }),
-    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :ripple="ripple" :disabled="disabled" @input="onChange"/></div>',
+    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :ripple="ripple" :disabled="disabled" @input="onChange" :icon="icon" /></div>',
 })
 
 export const Disabled = TemplateDisabled.bind({});
@@ -70,6 +71,16 @@ LabelInSlot.args = {
     disabled: false,
 }
 
+export const WithIcon = Template.bind({});
+
+// Set default values
+WithIcon.args = {
+    value: true,
+    onChange: action("input"),
+    disabled: false,
+    icon: true,
+}
+
 export default {
     title: 'Form / VcSwitch',
     id: 'VcSwitch',
@@ -84,4 +95,4 @@ export default {
             url: 'http://www.url.com/status', // will make the tag a link
         },
     },
-};
+};