@vcita/design-system 0.3.13 → 0.3.14

package/src/components/VcExpansionCard/VcExpansionCard.vue

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

package/src/components/VcIconWithTooltip/VcIconWithTooltip.spec.js

@@ -129,7 +129,7 @@ describe("VcIconWithTooltip.vue", () => {
             expect(filledIcon).toBeVisible()
             expect(queryByText('$attention')).toBeNull()
             expect(tooltipContent).toBeVisible()
-        }, {timeout: 200})
+        }, {timeout: 1000})
     });
 
     it("default icon", async () => {

package/src/components/VcImage/VcImage.spec.js

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom'
+import VcImage from "./VcImage.vue";
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import init from "../../../testing-library.config";
+
+init();
+
+describe("VcImage.vue", () => {
+
+    const renderWithVuetify = (component, options, callback) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        return render(
+            component,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify: new Vuetify(),
+                ...options,
+                mocks: {},
+            },
+            callback,
+        )
+    }
+
+    it("mounts", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, debug} = renderWithVuetify(VcImage, {
+            props: {
+                image: require('@/stories/assets/upgrade.svg'),
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        // Make sure the component has the data-qa attribute
+        const component = getByTestId('VcImage');
+        expect(component).toBeInTheDocument();
+
+        debug();
+    });
+
+});

package/src/components/VcImage/VcImage.stories.js

@@ -0,0 +1,34 @@
+import VcImageCmp from './VcImage';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcImage: VcImageCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+      The objective of this component is to handle situations when the image might be a string or a component 
+      <VcImage :image="image"/>
+      </div>`,
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    image: require('@/stories/assets/upgrade.svg'),
+}
+
+export default {
+    title: 'content display / VcImage', // This will control the story sidebar position
+    id: 'VcImage', // This will be the link to this component
+    component: VcImageCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        },
+    },
+};

package/src/components/VcImage/VcImage.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="VcBannerImage d-none d-md-block" :data-qa="dataQa">
+    <img v-if="image && typeof image === 'string'" class="image" :src="image" >
+    <component v-else class="VcBannerImage d-none d-md-block" :is="image"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VcImage",
+  props: {
+    image: {
+      type: [String, Object],
+      required: true,
+    },
+    dataQa: {
+      type: String,
+      default: 'VcImage'
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.VcBannerImage {
+  height: 100%;
+
+  ::v-deep img {
+    max-width: 100%;
+    height: 100%;
+  }
+
+  ::v-deep svg {
+    max-width: 100%;
+    height: 100%;
+  }
+}
+
+</style>

package/src/components/VcTooltip/VcTooltip.stories.js

@@ -27,6 +27,7 @@ const GeneralTemplate = (args, {argTypes}) => ({
           :nudge-right="nudgeRight"
           :flavor="flavor"
           :dark="dark"
+          :disabled="disabled"
           :data-qa="dataQa">
           <template>
             <v-icon>$info</v-icon>
@@ -47,7 +48,8 @@ Playground.args = {
     nudgeRight: 0,
     dataQa: 'vcita-tooltip',
     flavor: 'information',
-    dark: true
+    dark: true,
+    disabled: false
 }
 
 const ButtonTemplate = (args, {argTypes}) => ({

package/src/components/VcTooltip/VcTooltip.vue

@@ -8,6 +8,7 @@
       :bottom="bottom"
       :nudge-left="nudgeLeft"
       :nudge-right="nudgeRight"
+      :disabled="disabled"
       :data-qa="dataQa">
 
       <template v-slot:activator="{ on, attrs }">
@@ -82,6 +83,10 @@ export default {
       type: Boolean,
       default: false
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     dataQa: {
       type: String,
       default: 'vc-tooltip'

package/src/components/index.js

@@ -13,6 +13,8 @@ export {default as VcActions} from './VcActions/VcActions.vue';
 export {default as VcStepsBar} from './wizard/VcStepsBar/VcStepsBar.vue';
 export {default as VcMobileWizardProgress} from './wizard/VcMobileWizardProgress/VcMobileWizardProgress.vue';
 export {default as VcProgressCircular} from './VcProgressCircular/VcProgressCircular.vue';
+export {default as VcChecklistItem} from './listBox/VcChecklistItem/VcChecklistItem.vue';
+export {default as VcListbox} from './listBox/VcListbox/VcListbox.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';
@@ -39,3 +41,4 @@ 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';
+export {default as VcImage} from './VcImage/VcImage.vue';

package/src/components/listBox/VcChecklistItem/VcChecklistItem.spec.js

@@ -0,0 +1,93 @@
+import '@testing-library/jest-dom'
+import VcChecklistItem from "./VcChecklistItem.vue";
+import Vuetify from 'vuetify'
+import {render, waitFor} from "@testing-library/vue";
+import init from "../../../../testing-library.config";
+import {fireEvent} from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+
+init();
+
+describe("VcChecklistItem.vue", () => {
+
+    const renderWithVuetify = (component, options, callback) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        return render(
+            component,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify: new Vuetify(),
+                ...options,
+                mocks: {},
+            },
+            callback,
+        )
+    }
+
+    it("mounts with default settings", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, queryByRole, getByTestId, emitted} = renderWithVuetify(VcChecklistItem, {
+            props: {
+                label: "Peter Parker"
+            },
+        })
+
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const listObj = getByTestId('VcChecklistItem');
+        expect(listObj).toBeInTheDocument();
+
+        const checkbox = queryByRole('checkbox');
+        expect(checkbox).toBeInTheDocument();
+
+        await fireEvent.click(checkbox);
+        expect(emitted().change.length).toBe(1);
+        expect(emitted().change[0]).toStrictEqual([{"checked": true}]);
+    });
+
+    it("Has clickable avatar", async () => {
+        const {getByRole, getByTestId, emitted} = renderWithVuetify(VcChecklistItem, {
+            props: {
+                label: "Peter Parker",
+                avatar: {
+                    path: "https://www.citypng.com/public/uploads/preview/-101609838369it1a5cyvuz.png"
+                }
+            },
+        })
+
+        const avatar = getByTestId('avatarImage')
+        expect(avatar).toBeInTheDocument();
+        await fireEvent.click(avatar);
+
+        const checkbox = getByRole('checkbox');
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).toBeChecked();
+        expect(emitted().change.length).toBe(1);
+
+        await fireEvent.click(checkbox);
+        expect(checkbox).not.toBeChecked();
+        expect(emitted().change.length).toBe(2);
+    });
+
+    it("Is disable", async() => {
+        const {getByTestId} = renderWithVuetify(VcChecklistItem, {
+            props: {
+                disabled: true,
+                tooltipContent: 'Peter is sleeping',
+                label: "Peter Parker",
+            }
+        })
+
+        const listObj = getByTestId('VcChecklistItem');
+
+        await userEvent.hover(listObj)
+        // Let the hover commence
+        await waitFor( () => {
+            const tooltipContent = getByTestId('vc-tooltip-dark-content');
+            expect(tooltipContent).toBeVisible()
+        }, {timeout: 200})
+    });
+});

package/src/components/listBox/VcChecklistItem/VcChecklistItem.stories.js

@@ -0,0 +1,56 @@
+import VcChecklistItemCmp from './VcChecklistItem';
+import {action} from "@storybook/addon-actions";
+
+const Template = (args, {argTypes}) => ({
+    components: {VcChecklistItem: VcChecklistItemCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <br/>
+          <div style="border: 1px solid; width: 310px">
+            <VcChecklistItem :avatar="avatar"
+                             v-model="checked"
+                             :label="label"
+                             :disabled="disabled"
+                             :tooltip-content="tooltipContent"
+                             :data-qa="dataQa"
+                             @change="onChange"/>
+          </div>
+      </div>`,
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    checked: false,
+    disabled: false,
+    label: "Peter Parker",
+    tooltipContent: "Peter is seek with Covid-19",
+    avatar: {
+        path: "https://www.citypng.com/public/uploads/preview/-101609838369it1a5cyvuz.png",
+        colorId: 10
+    },
+    dataQa: 'vc-checklist-item',
+    onChange: action('changed'),
+}
+
+export default {
+    title: 'form / list box / VcChecklistItem', // This will control the story sidebar position
+    id: 'VcChecklistItem', // This will be the link to this component
+    component: VcChecklistItemCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=7340%3A69294',
+        },
+        status: {
+            type: 'releaseCandidate', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+    },
+};

package/src/components/listBox/VcChecklistItem/VcChecklistItem.vue

@@ -0,0 +1,112 @@
+<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>
+
+import VcCheckbox from "@/components/VcCheckbox/VcCheckbox.vue";
+import VcLayout from "@/components/VcLayout/VcLayout.vue";
+import VcTooltip from "@/components/VcTooltip/VcTooltip.vue";
+
+export default {
+  name: "VcChecklistItem",
+  components: {VcLayout, VcCheckbox, VcTooltip},
+  model: {
+    prop: 'checked',
+  },
+  props: {
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    avatar: {
+      type: Object,
+      default: undefined,
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    tooltipContent: {
+      type: String,
+      default: ''
+    },
+    dataQa: {
+      type: String,
+      default: 'VcChecklistItem'
+    }
+  },
+  computed: {
+    getAvatar() {
+      if (this.avatar && Object.keys(this.avatar).length) {
+        return {
+          name: this.label,
+          ...this.avatar,
+        }
+      }
+    }
+  },
+  methods: {
+    onChange(val) {
+      this.$emit('change', {checked: val})
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/../styles/variables.scss';
+@import "@/../src/scss/mixins.scss";
+
+.VcChecklistItem-wrapper {
+  width: 100%;
+
+  .VcChecklistItem {
+    padding: var(--size-value2) var(--size-value4);
+
+    &.disabled {
+      background-color: var(--gray-lighten-3);
+    }
+
+    .vc-checkbox {
+      flex: 1 1 auto;
+      padding: var(--size-value0);
+      margin: var(--size-value0);
+    }
+
+    &:hover {
+      background-color: var(--gray-lighten-3);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--v-secondary-lighten1);
+    }
+
+    &:active {
+      background-color: var(--v-secondary-lighten3);
+    }
+  }
+}
+</style>