@vcita/design-system 1.8.1 → 1.9.0-beta.1

package/src/components/VcGroupedItems/VcGroupedItems.vue

@@ -1,27 +1,32 @@
 <template>
   <VcLayout column :data-qa="dataQa" class="grouped-items">
     <div class="grouped-items__group"
+         :class="{[groupClass]: groupClass}"
          v-for="(group, groupIndex) in itemGroups"
          :key="group.id"
          :data-qa="`group-${group.id}`">
-      <div :class="`grouped-items__group__header ${flavor} mb-2`" >
-        <slot :name="`group-${group.id}-header`" :group="group">
-          {{group.label}}
+      <slot :name="`group-${group.id}-header`" :group="group">
+        <slot name="header" :group="group">
+          <div :class="`grouped-items__group__header ${flavor} mb-2`">
+            {{ group.label }}
+          </div>
         </slot>
-      </div>
+      </slot>
       <VcLayout column :class="`grouped-items__group__container ${flavor}`">
         <VcLayout @click="$emit('change',item.id)"
-             :data-qa="`item-${item.id}`"
-             v-if="group.items"
-             v-for="(item) in group.items"
-             :key="item.id"
-             :class="{selected: item.id === selected, disabled: item.disabled, mobile: isMobile, 'rtl': $vuetify.rtl}"
-             class="grouped-items__group__container__menu-item d-flex align-center flex-grow-1">
+                  :data-qa="`item-${item.id}`"
+                  v-if="group.items"
+                  v-for="(item) in group.items"
+                  :key="item.id"
+                  :class="{selected: item.id === selected, disabled: item.disabled, mobile: isMobile, 'rtl': $vuetify.rtl, [itemClass]: itemClass}"
+                  class="grouped-items__group__container__menu-item d-flex align-center flex-grow-1">
           <slot :name="`item-${item.id}`" :item="item">
-            <VcLayout justify-space-between align-center class="px-4 flex-grow-1">
-              <span>{{item.label}}</span>
-              <vcIcon size="12" v-if="isMobile">$chevron_right</vcIcon>
-            </VcLayout>
+            <slot name="item" :item="item">
+              <VcLayout justify-space-between align-center class="px-4 flex-grow-1">
+                <span>{{ item.label }}</span>
+                <vcIcon size="12" v-if="isMobile">$chevron_right</vcIcon>
+              </VcLayout>
+            </slot>
           </slot>
         </VcLayout>
       </VcLayout>
@@ -59,6 +64,12 @@ export default {
     showDividers: {
       type: Boolean,
       default: false,
+    },
+    groupClass: {
+      type: String,
+    },
+    itemClass: {
+      type: String,
     }
   },
   model: {
@@ -66,7 +77,7 @@ export default {
     event: 'change'
   },
   computed: {
-    isMobile(){
+    isMobile() {
       return !this.$vuetify.breakpoint.mdAndUp
     }
   }
@@ -75,9 +86,10 @@ export default {
 
 <style lang="scss" scoped>
 .grouped-items {
-  gap: var(--size-value5);
-  &__group{
-    &__header{
+  column-gap: var(--size-value5);
+
+  &__group {
+    &__header {
       font-size: var(--font-size-xx-small);
       font-weight: var(--font-weight-large);
       line-height: var(--size-value5);
@@ -88,13 +100,16 @@ export default {
         font-size: var(--font-size-xxx-small);
       }
     }
-    &__container{
+
+    &__container {
       border-radius: var(--border-radius);
       background-color: var(--modal-bg-color);
+
       &.elevated {
         box-shadow: var(--shadow-1);
       }
-      &__menu-item{
+
+      &__menu-item {
         cursor: pointer;
         box-sizing: border-box;
         height: var(--size-value11);
@@ -103,46 +118,57 @@ export default {
         border-inline-start: 3px solid var(--modal-bg-color);
         transition: 0.3s;
         transition-property: border-color, background-color;
-        &:first-of-type{
+
+        &:first-of-type {
           margin-top: var(--size-value1);
         }
-        &:last-of-type{
+
+        &:last-of-type {
           margin-bottom: var(--size-value1);
         }
-        &:hover{
+
+        &:hover {
           border-color: var(--gray-lighten-3);
           background-color: var(--gray-lighten-3);
         }
-        &:focus{
+
+        &:focus {
           border: 3px solid var(--v-secondary-lighten1);
         }
-        &:active:not(.mobile){
+
+        &:active:not(.mobile) {
           border-color: var(--gray-lighten-1);
           background-color: var(--gray-lighten-1);
         }
-        &.selected{
+
+        &.selected {
           font-weight: var(--font-weight-large);
         }
-        &.selected:not(.mobile){
+
+        &.selected:not(.mobile) {
           border-inline-start: 3px solid var(--v-secondary-base);
         }
-        &.disabled{
+
+        &.disabled {
           cursor: unset;
           pointer-events: none;
           border-color: var(--gray-lighten-3);
           background-color: var(--gray-lighten-3);
           color: var(--gray-darken-2);
         }
-        &.mobile{
+
+        &.mobile {
           color: var(--gray-darken-5);
           height: var(--size-value13);
-          ::v-deep{
+
+          ::v-deep {
             svg.vc-chevron-right {
               fill: var(--gray-darken-2);
             }
           }
-          &.rtl{
-            ::v-deep{
+
+          &.rtl {
+            ::v-deep {
               svg.vc-chevron-right {
                 transform: scaleX(-1);
               }

package/src/components/VcSearchLayout/VcSearchLayout.spec.js

@@ -0,0 +1,217 @@
+import '@testing-library/jest-dom'
+import VcSearchLayout from "./VcSearchLayout.vue";
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import init from "../../../testing-library.config";
+import userEvent from "@testing-library/user-event";
+
+init();
+
+Vue.use(Vuetify)
+
+const itemGroupsInput = [
+    {
+        label: 'CLIENTS (1)',
+        id: 1,
+        items: [
+            {id: '1', name: 'Allan blair', colorId: 1, details: 'allan_blair2002@gmail.com'},
+        ]
+    },
+    {
+        label: 'BOOKING (1)',
+        id: 2,
+        items: [
+            {
+                id: '2', name: 'Appointment', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/booking_thumbnail.svg')
+            },
+        ]
+    },
+    {
+        label: 'PAYMENTS (8)',
+        id: 3,
+        items: [
+            {
+                id: '3', name: 'Record payment', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/payment_thumbnail.svg')
+            },
+            {
+                id: '4', name: 'Estimate #0000122', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/payment_thumbnail.svg')
+            },
+            {
+                id: '5', name: '<div>Record payment</div>', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/payment_thumbnail.svg')
+            },
+            {
+                id: 'showMore', showMore: true,
+            },
+        ]
+    },
+    {
+        label: 'DOCUMENTS (1)',
+        id: 4,
+        items: [
+            {
+                id: '7', name: 'Contract AB.pdf', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/marketing_thumbnail.svg')
+            },
+        ]
+    },
+    {
+        label: 'CONVERSATION (1)',
+        id: 5,
+        items: [
+            {
+                id: '8', name: 'Message sent', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/clients_thumbnail.svg')
+            },
+        ]
+    },
+];
+
+const baseProps = {
+    label: 'Search with results',
+    value: false,
+    itemGroups: itemGroupsInput,
+    isLoading: false,
+    emptyStateTitle: undefined,
+    emptyStateSubtitle: undefined,
+    emptyStateImage: require('@/stories/assets/rabbit.svg'),
+    dataQa: 'VcSearchLayout',
+};
+
+describe("VcSearchLayout.vue", () => {
+
+    const renderWithVuetify = (component, options, callback, isMobile = false) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        const vuetify = new Vuetify()
+        if (isMobile) {
+            const breakpoint = {
+                init: jest.fn(),
+                framework: {},
+                smAndDown: true,
+            }
+
+            vuetify.framework.breakpoint = breakpoint;
+        }
+
+        return render(
+            component,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify,
+                ...options,
+                mocks: {
+                    $t: value => value,
+                    $dst: value => value, // <- for the design system
+                },
+            },
+            callback,
+        )
+    }
+
+    it("displays basic items", () => {
+        const {container, getByTestId} = renderWithVuetify(VcSearchLayout, {
+            props: {
+                ...baseProps,
+                groupItems: undefined,
+            }
+        });
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        expect(getByTestId('VcSearchLayout-searchBar')).toBeInTheDocument();
+    });
+
+    it("displays item groups", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByTestId} = renderWithVuetify(VcSearchLayout, {
+            props: {
+                ...baseProps,
+                value: true
+            }
+        });
+
+        // Make sure the component has the data-qa attribute
+        expect(getByTestId('VcSearchLayout-content')).toBeInTheDocument();
+        expect(getByTestId('VcSearchLayout-footer')).toBeInTheDocument();
+        expect(getByTestId('VcSearchLayout-groupedItems')).toBeInTheDocument();
+    });
+
+    it("opens and closes based on value", async () => {
+        const {getByTestId, updateProps, queryByTestId} = renderWithVuetify(VcSearchLayout, {
+            props: {
+                ...baseProps,
+                itemGroups: undefined,
+                value: true
+            }
+        });
+
+        expect(getByTestId('VcSearchLayout-content')).toBeInTheDocument();
+        await updateProps({value: false});
+        expect(queryByTestId('VcSearchLayout-content')).not.toBeVisible();
+    });
+
+    it("clicks work", async () => {
+        const {getByText, getByTestId, emitted} = renderWithVuetify(VcSearchLayout, {
+            props: {
+                ...baseProps,
+                value: true,
+            }
+        });
+
+        // show more is clicked
+        const showMore = getByText('ds.search_layout.show_more');
+        await userEvent.click(showMore);
+        expect(emitted().onItemClicked.length).toBe(1);
+        console.log(JSON.stringify(baseProps.itemGroups[2].items[3].id));
+        expect(emitted().onItemClicked).toStrictEqual([[baseProps.itemGroups[2].items[3].id]]);
+
+        // show all is clicked
+        const showAll = getByText('ds.search_layout.view_all');
+        await userEvent.click(showAll);
+        expect(emitted().onSeeAllClicked.length).toBe(1);
+
+        const inputField = getByTestId('VcSearchLayout-searchBar');
+        await userEvent.type(inputField, 'a');
+        expect(emitted().onSearch.length).toBe(1);
+        expect(emitted().onSearch[0]).toEqual(['a']);
+
+        const searchItem = getByTestId('item-2');
+        await userEvent.click(searchItem);
+        expect(emitted().onItemClicked.length).toBe(2);
+        expect(emitted().onItemClicked[1]).toEqual(["2"]);
+    });
+
+    it("loading state", () => {
+        const {getByTestId} = renderWithVuetify(VcSearchLayout, {
+            props: {
+                ...baseProps,
+                value: true,
+                isLoading: true,
+            },
+        });
+
+        const loader = getByTestId('VcLoader');
+        expect(loader).toBeInTheDocument();
+    });
+
+    it("empty state", () => {
+        const {getByTestId} = renderWithVuetify(VcSearchLayout, {
+            props: {
+                ...baseProps,
+                groupItems: undefined,
+                value: true,
+                itemGroups: undefined,
+            }
+        });
+
+        expect(getByTestId('VcEmptyState')).toBeInTheDocument();
+    });
+});

package/src/components/VcSearchLayout/VcSearchLayout.stories.js

@@ -0,0 +1,160 @@
+import VcSearchLayoutCmp from './VcSearchLayout';
+import VcBaseDocs from '@/stories/VcBaseDocs.mdx'
+
+const itemGroupsInput = [
+    {
+        label: 'CLIENTS (1)',
+        id: 1,
+        items: [
+            {id: '1', name: 'Allan blair', colorId: 1, details: 'allan_blair2002@gmail.com'},
+        ]
+    },
+    {
+        label: 'BOOKING (1)',
+        id: 2,
+        items: [
+            {
+                id: '2', name: 'Appointment', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/booking_thumbnail.svg')
+            },
+        ]
+    },
+    {
+        label: 'PAYMENTS (8)',
+        id: 3,
+        items: [
+            {
+                id: '3', name: 'Record payment', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/payment_thumbnail.svg')
+            },
+            {
+                id: '4', name: 'Estimate #0000122', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/payment_thumbnail.svg')
+            },
+            {
+                id: '5', name: '<div>Record payment</div>', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/payment_thumbnail.svg')
+            },
+            {
+                id: 'showMore', showMore: true,
+            },
+        ]
+    },
+    {
+        label: 'DOCUMENTS (1)',
+        id: 4,
+        items: [
+            {
+                id: '7', name: 'Contract AB.pdf', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/marketing_thumbnail.svg')
+            },
+        ]
+    },
+    {
+        label: 'CONVERSATION (1)',
+        id: 5,
+        items: [
+            {
+                id: '8', name: 'Message sent', details: 'Allan Blair | Sep 20, 2021',
+                imagePath: require('@/stories/assets/pics/clients_thumbnail.svg')
+            },
+        ]
+    },
+];
+
+const baseProps = {
+    label: 'Search with results',
+    isLoading: false,
+    emptyStateTitle: undefined,
+    emptyStateSubtitle: undefined,
+    emptyStateImage: require('@/stories/assets/rabbit.svg'),
+    dataQa: 'VcSearchLayout',
+};
+
+const Template = (args, {argTypes}) => ({
+    components: {VcSearchLayout: VcSearchLayoutCmp},
+    props: Object.keys(argTypes),
+    data: () => ({
+       itemGroups: [],
+        value: true,
+    }),
+    template: `
+      <div>You can pass here any props you would pass to VcSearchBar <br>
+        Enter any text to see results, Enter 'al' to see highlighting
+        <VcSearchLayout :value="value"
+                        :label="label"
+                        :dataQa="dataQa"
+                        :itemGroups="itemGroups"
+                        :is-loading="isLoading"
+                        :empty-state-title="emptyStateTitle"
+                        :empty-state-subtitle="emptyStateSubtitle"
+                        :empty-state-image="emptyStateImage"
+                        @onDropdownChange="onDropdownChange"
+                        @onSearch="onInput"
+                        @onItemClicked="onItemClicked"
+                        @onSeeAllClicked="onSeeAllClicked"/>
+      </div>`,
+    methods: {
+        onInput(value) {
+            this.onSearch(value);
+            if (value.length > 0) {
+                this.itemGroups = itemGroupsInput;
+                this.value = true;
+            }
+            else {
+                this.itemGroups = undefined;
+                this.value = false;
+            }
+        }
+    }
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    ...baseProps,
+}
+
+export const Loading = Template.bind({});
+
+// Set default values
+Loading.args = {
+    ...baseProps,
+    isLoading: true,
+    value: true,
+    itemGroups: undefined,
+}
+export const EmptyState = Template.bind({});
+
+// Set default values
+EmptyState.args = {
+    ...baseProps,
+    value: true,
+    itemGroups: undefined,
+}
+
+export default {
+    title: 'desktop layout / VcSearchLayout', // This will control the story sidebar position
+    id: 'VcSearchLayout', // This will be the permanent link to this component
+    component: VcSearchLayoutCmp,
+    argTypes: {
+        label: {table: {category: 'Search Bar props'}},
+        onSearch: {table: {category: 'Search Bar event'}},
+        onItemClicked: {table: {category: 'Grouped Items event'}},
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/lso6l9nvwhOn2snCxg9VZK/New-Layout-(MVP)?type=design&node-id=1684-134993&mode=design&t=K13zOU49FG5nAWWh-0',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+        docs: {
+            page: VcBaseDocs,
+            inlineStories: false,
+            iframeHeight: 700,
+        },
+    },
+};