@vcita/design-system 0.6.15 → 0.6.17-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "0.6.15",
+  "version": "0.6.17-beta.0",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcSearchBar/VcSearchBar.vue

@@ -18,6 +18,7 @@
 
 import VcIcon from '@/components/VcIcon/VcIcon.vue'
 import VcTextField from "@/components/VcTextField/VcTextField.vue";
+
 const throttle = require("lodash.throttle")
 
 export default {
@@ -75,14 +76,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.vc-search-bar {
+.vc-search-bar.VcTextInput {
   padding: var(--size-value0);
   margin: var(--size-value0);
 
   &.border-top-radius {
     ::v-deep {
-      .v-input__slot {
-        border-radius: var(--border-radius) var(--border-radius) var(--size-value0) var(--size-value0);
+      .v-input__control {
+        .v-input__slot {
+          border-radius: var(--border-radius) var(--border-radius) var(--size-value0) var(--size-value0);
+        }
       }
     }
   }

package/src/components/VcTooltip/VcTooltip.vue

@@ -62,8 +62,6 @@ export default {
     },
     content: {
       type: String,
-      required: true,
-      validator: prop => prop.length > 0
     },
     top: {
       type: Boolean,

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

@@ -1,17 +1,17 @@
 <template>
   <VcTooltip :content="tooltipContent"
-             dark
              :disabled="!tooltipContent || !disabled"
-             class="VcChecklistItem-wrapper">
+             class="VcChecklistItem-wrapper"
+             dark>
     <template>
-      <VcLayout class="VcChecklistItem" :data-qa="dataQa"
-                :class="{'disabled': disabled}">
-        <VcCheckbox :checked="checked"
-                    :avatar="getAvatar"
+      <VcLayout :class="{'disabled': disabled}" :data-qa="dataQa"
+                class="VcChecklistItem">
+        <VcCheckbox :avatar="getAvatar"
+                    :checked="checked"
+                    :data-qa="`${dataQa}-checkbox`"
+                    :disabled="disabled"
                     :label="label"
                     :show-avatar-border="false"
-                    :disabled="disabled"
-                    :data-qa="`${dataQa}-checkbox`"
                     @change="onChange">
 
         </VcCheckbox>
@@ -83,6 +83,10 @@ export default {
 .VcChecklistItem-wrapper {
   width: 100%;
 
+  &[hide=true] {
+    display: none;
+  }
+
   .VcChecklistItem {
     &.disabled {
       background-color: var(--gray-lighten-3);

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

@@ -4,6 +4,7 @@ import Vuetify from 'vuetify'
 import {render} from "@testing-library/vue";
 import init from "../../../../testing-library.config";
 import {fireEvent} from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
 
 init();
 
@@ -14,13 +15,15 @@ const props = {
             label: 'Peter Parker',
             avatar: {
                 path: require('@/stories/assets/pics/spider-man.png'),
-            }
+            },
+            identifier: 0
         },
         {
             label: 'Tony Stark',
             avatar: {
                 path: require('@/stories/assets/pics/ironman.png'),
-            }
+            },
+            identifier: 1
         },
         {
             label: 'Bruce Banner',
@@ -28,13 +31,15 @@ const props = {
                 path: require('@/stories/assets/pics/hulk.png'),
             },
             disabled: true,
-            tooltipContent: 'Hulk is too STRONG'
+            tooltipContent: 'Hulk is too STRONG',
+            identifier: 2
         },
         {
             label: 'Clint Barton',
             avatar: {
                 colorId: 13,
             },
+            identifier: 3
         },
     ],
 }
@@ -123,4 +128,60 @@ describe("VcListbox.vue", () => {
         expect(emitted().addNew.length).toBe(1);
         expect(getByText('add new Item')).toBeInTheDocument();
     });
-});
+
+    it("With search bar", async () => {
+        const {container, getByText, getByTestId} = renderWithVuetify(VcListbox, {
+            props: {
+                ...props,
+                addSearch: true,
+            }
+        })
+        const searchBar = getByTestId('vc-list-box-search')
+        expect(searchBar).toBeVisible()
+
+        props.items.forEach((item) => expect(getByText(item.label)).toBeVisible())
+
+        await userEvent.type(searchBar, 'peter')
+
+        const checklistItemWrappers = container.getElementsByClassName('VcChecklistItem-wrapper')
+
+        expect(checklistItemWrappers[0]).not.toHaveAttribute('hide', 'true')
+
+        for (let i = 1; i < props.items.length; i++) {
+            expect(checklistItemWrappers[i]).toHaveAttribute('hide', 'true')
+        }
+    });
+
+    it("Empty result from the search bar", async () => {
+        const {getByText, getByTestId, queryByText} = renderWithVuetify(VcListbox, {
+            props: {
+                ...props,
+                addSearch: true
+            }
+        })
+
+        props.items.forEach((item) => expect(getByText(item.label)).toBeVisible())
+
+        const searchBar = getByTestId('vc-list-box-search')
+        await userEvent.paste(searchBar, 'clark kent')
+
+        for (let i = 0; i < props.items.length; i++) {
+            expect(queryByText(props.items[i].label)).not.toBeInTheDocument()
+        }
+    });
+
+    it("Empty result from the search bar with unique empty list massage", async () => {
+        const {getByTestId} = renderWithVuetify(VcListbox, {
+            props: {
+                ...props,
+                addSearch: true,
+                emptyListMsg: 'No Avengers found'
+            }
+        })
+
+        const searchBar = getByTestId('vc-list-box-search')
+        await userEvent.paste(searchBar, 'clark kent')
+        const emptyCase = getByTestId('vc-list-box-empty')
+        expect(emptyCase).toHaveTextContent('No Avengers found')
+    });
+});

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

@@ -9,6 +9,8 @@ const Template = (args, {argTypes}) => ({
                  :title="title"
                  :add-another="addAnother"
                  :add-another-label="addAnotherLabel"
+                 :add-search="addSearch"
+                 :empty-list-msg="emptyListMsg"
                  :data-qa="dataQa"
                  @change="onChange"
                  @addNew="onAddNew">
@@ -21,28 +23,33 @@ export const Playground = Template.bind({});
 // Set default values
 Playground.args = {
     title: 'Avengers crew',
+    addSearch: false,
     addAnother: false,
     addAnotherLabel: 'Add new Avenger',
+    emptyListMsg: 'No Avengers found',
     dataQa: "vc-listbox",
     items: [
         {
             label: 'Peter Parker',
             avatar: {
                 path: require('@/stories/assets/pics/spider-man.png'),
-            }
+            },
+            identifier: 0
         },
         {
             label: 'Tony Stark',
             avatar: {
                 path: require('@/stories/assets/pics/ironman.png'),
             },
-            checked: true
+            checked: true,
+            identifier: 1
         },
         {
             label: 'Natasha Romanoff',
             avatar: {
                 path: require('@/stories/assets/pics/black-widow.jpeg'),
-            }
+            },
+            identifier: 2
         },
         {
             label: 'Bruce Banner',
@@ -50,13 +57,15 @@ Playground.args = {
                 path: require('@/stories/assets/pics/hulk.png'),
             },
             disabled: true,
-            tooltipContent: 'Hulk is too STRONG'
+            tooltipContent: 'Hulk is too STRONG',
+            identifier: 3
         },
         {
             label: 'Clint Barton',
             avatar: {
                 colorId: 13,
             },
+            identifier: 4
         },
     ],
     onChange: action('changed'),

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

@@ -1,34 +1,48 @@
 <template>
   <div>
     <div v-if="title"
-         class="vc-list-title"
-         :data-qa="`${dataQa}-title`">
+         :data-qa="`${dataQa}-title`"
+         class="vc-list-title">
       {{ title }}
     </div>
 
-    <v-list class="VcListbox"
-            :data-qa="dataQa">
+    <v-list :class="{'with-search' : addSearch, 'with-add-another' : addAnother}"
+            :data-qa="dataQa"
+            class="VcListbox">
+      <VcSearchBar v-if="addSearch"
+                   :data-qa="`${dataQa}-search`"
+                   border-top-radius
+                   @search="onSearch">
+      </VcSearchBar>
       <div class="vc-overflow">
         <v-list-item-group
+          v-if="listExist"
           :value="confirmedArray"
           multiple
           @change="onSelection">
-          <VcTooltip v-for="(item, index) in items"
-                     :key="index"
-                     dark
+          <VcTooltip v-for="item in filteredItems"
+                     :key="item.identifier"
                      :content="item.tooltipContent"
+                     :data-qa="`${dataQa}-${setDataQa(item.label)}-tooltip`"
                      :disabled="!item.tooltipContent || !item.disabled"
-                     :data-qa="`${dataQa}-${setDataQa(item.label)}-tooltip`">
-            <v-list-item class="vc-list-item"
-                         :tabindex="index"
+                     dark>
+            <v-list-item :disabled="item.disabled"
+                         :tabindex="`${item.label}-${item.identifier}`"
                          :value="item"
-                         :disabled="item.disabled">
-              <VcChecklistItem :data-qa="`${dataQa}-${setDataQa(item.label)}`"
-                               v-bind="item">
+                         class="vc-list-item">
+              <VcChecklistItem v-bind="item"
+                               :data-qa="`${dataQa}-${setDataQa(item.label)}`">
               </VcChecklistItem>
             </v-list-item>
           </VcTooltip>
         </v-list-item-group>
+        <VcLayout v-else
+                  :data-qa="`${dataQa}-empty`"
+                  align-center
+                  class="VcListbox__empty"
+                  justify-center>
+          {{ noItemsMsg }}
+        </VcLayout>
       </div>
 
       <div v-if="addAnother"
@@ -49,20 +63,26 @@
 import VcChecklistItem from "@/components/listBox/VcChecklistItem/VcChecklistItem.vue";
 import VcIcon from "@/components/VcIcon/VcIcon.vue";
 import VcTooltip from "@/components/VcTooltip/VcTooltip.vue";
+import VcSearchBar from "@/components/VcSearchBar/VcSearchBar.vue";
+import VcLayout from "@/components/VcLayout/VcLayout.vue";
 
 export default {
   name: "VcListbox",
-  components: {VcChecklistItem, VcIcon, VcTooltip},
+  components: {VcLayout, VcSearchBar, VcChecklistItem, VcIcon, VcTooltip},
   props: {
     items: {
       type: Array,
       required: true,
-      validator: items => items.every(item => item.label),
+      validator: items => items.every(item => item.label && item.identifier || item.identifier === 0),
     },
     addAnother: {
       type: Boolean,
       default: false
     },
+    addSearch: {
+      type: Boolean,
+      default: false
+    },
     addAnotherLabel: {
       type: String,
       default: ""
@@ -71,17 +91,38 @@ export default {
       type: String,
       default: ''
     },
+    emptyListMsg: {
+      type: String
+    },
     dataQa: {
       type: String,
       default: 'VcListbox'
     }
   },
+  data: () => ({
+      search: ''
+    }
+  ),
   computed: {
     getAddAnotherLabel() {
       return this.addAnotherLabel || this.$dst('ds.listbox.add')
     },
     confirmedArray() {
-      return this.items.filter(item => item.checked)
+      return this.filteredItems.filter(item => item.checked)
+    },
+    filteredItems() {
+      return this.items.map((item) => (
+        {
+          ...item,
+          hide: !item.label.toLowerCase().includes(this.search),
+        })
+      )
+    },
+    listExist() {
+      return this.filteredItems.some((item) => !item.hide)
+    },
+    noItemsMsg() {
+      return this.emptyListMsg || this.$dst('ds.listbox.empty_list')
     }
   },
   methods: {
@@ -89,8 +130,11 @@ export default {
       const newSelections = selections.map((selected) => ({...selected, checked: true}))
       this.$emit('change', newSelections)
     },
+    onSearch(search) {
+      this.search = search
+    },
     setDataQa(label) {
-      return label.replace(/ /g,'-')
+      return label.replace(/ /g, '-')
     }
   }
 };
@@ -115,13 +159,38 @@ export default {
   border-radius: var(--border-radius);
   box-shadow: none !important;
 
+  &.with-search {
+    border: none;
+
+    .vc-overflow {
+      border-inline: var(--border-frame);
+      border-block-end: var(--border-frame);
+      border-radius: 0 0 var(--border-radius) var(--border-radius);
+    }
+
+    &.with-add-another {
+      .vc-overflow {
+        border-inline: var(--border-frame);
+        border-block-end: unset;
+        border-radius: unset;
+      }
+
+      .last-item {
+        border-inline: var(--border-frame);
+        border-block-end: var(--border-frame);
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+      }
+    }
+  }
+
   .vc-overflow {
     overflow: auto;
-    max-height: 160px;
+    height: 160px;
 
     .vc-list-item {
       padding: var(--size-value0);
       min-height: unset;
+
       &:before {
         opacity: 0;
       }
@@ -135,6 +204,7 @@ export default {
   .last-item {
     cursor: pointer;
     min-height: var(--size-value10);
+    padding-block: var(--size-value1) var(--size-value2);
 
     &:hover {
       background-color: var(--gray-lighten-3);
@@ -163,5 +233,12 @@ export default {
       }
     }
   }
+
+  &__empty {
+    height: 100%;
+    font-weight: var(--font-weight-medium2);
+    font-size: var(--font-size-xx-small);
+    color: var(--gray-darken-4);
+  }
 }
 </style>

package/src/components/wizard/VcWizard/VcWizard.vue

@@ -135,7 +135,7 @@ export default {
   @include md-and-up {
     display: grid;
     grid-template-columns: minmax(250px,1fr) 3fr;
-    grid-template-rows: minmax(562px,1fr) 80px;
+    grid-template-rows: 1fr 80px;
     grid-row-gap: 0px;
     &.wizard-size {
       &-md {