@vcita/design-system 1.3.2 → 1.3.4

package/src/components/VcGroupedItems/VcGroupedItems.vue

@@ -0,0 +1,155 @@
+<template>
+  <VcLayout column :data-qa="dataQa" class="grouped-items">
+    <div class="grouped-items__group mt-5"
+         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>
+      </div>
+      <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">
+          <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>
+        </VcLayout>
+      </VcLayout>
+      <v-divider v-if="showDividers && groupIndex < itemGroups.length - 1"></v-divider>
+    </div>
+  </VcLayout>
+</template>
+<script>
+
+import VcIcon from "@/components/VcIcon/VcIcon.vue";
+import VcLayout from "@/components/VcLayout/VcLayout.vue";
+
+export default {
+  name: "VcGroupedItems",
+  components: {VcLayout, VcIcon},
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcGroupedItems'
+    },
+    selected: {
+      type: String,
+      required: false,
+    },
+    itemGroups: {
+      type: Array,
+      validator: prop => prop.every((group) => group.label && group.id),
+      required: true,
+    },
+    flavor: {
+      type: String,
+      default: 'flat',
+      validator: value => ['flat', 'elevated'].includes(value),
+    },
+    showDividers: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  model: {
+    prop: 'selected',
+    event: 'change'
+  },
+  computed: {
+    isMobile(){
+      return !this.$vuetify.breakpoint.mdAndUp
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.grouped-items{
+  &__group{
+    &__header{
+      font-size: var(--font-size-xx-small);
+      font-weight: var(--font-weight-large);
+      line-height: var(--size-value5);
+      color: var(--gray-darken-2);
+
+      &.flat {
+        padding-left: var(--size-value4);
+        font-size: var(--font-size-xxx-small);
+      }
+    }
+    &__container{
+      border-radius: var(--border-radius);
+      background-color: var(--modal-bg-color);
+      &.elevated {
+        box-shadow: var(--shadow-1);
+      }
+      &__menu-item{
+        cursor: pointer;
+        box-sizing: border-box;
+        height: var(--size-value11);
+        font-weight: var(--font-weight-medium2);
+        font-size: var(--font-size-x-small);
+        border-inline-start: 3px solid var(--modal-bg-color);
+        transition: 0.3s;
+        transition-property: border-color, background-color;
+        &:first-of-type{
+          margin-top: var(--size-value1);
+        }
+        &:last-of-type{
+          margin-bottom: var(--size-value1);
+        }
+        &:hover{
+          border-color: var(--gray-lighten-3);
+          background-color: var(--gray-lighten-3);
+        }
+        &:focus{
+          border: 3px solid var(--v-secondary-lighten1);
+        }
+        &:active:not(.mobile){
+          border-color: var(--gray-lighten-1);
+          background-color: var(--gray-lighten-1);
+        }
+        &.selected{
+          font-weight: var(--font-weight-large);
+        }
+        &.selected:not(.mobile){
+          border-inline-start: 3px solid var(--v-secondary-base);
+        }
+        &.disabled{
+          cursor: unset;
+          pointer-events: none;
+          border-color: var(--gray-lighten-3);
+          background-color: var(--gray-lighten-3);
+          color: var(--gray-darken-2);
+        }
+        &.mobile{
+          color: var(--gray-darken-5);
+          height: var(--size-value13);
+          ::v-deep{
+            svg.vc-chevron-right {
+              fill: var(--gray-darken-2);
+            }
+          }
+          &.rtl{
+            ::v-deep{
+              svg.vc-chevron-right {
+                transform: scaleX(-1);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/VcLink/VcLink.spec.js

@@ -87,7 +87,7 @@ describe("VcLink.vue", () => {
         const vcIconComponent = getByTestId('VcIcon');
         expect(vcIconComponent).toBeInTheDocument();
         expect(vcIconComponent).toHaveClass('prepend-icon');
-        expect(vcIconComponent).toHaveTextContent('$trash');
+        expect(vcIconComponent).toHaveTextContent('trash');
     });
 
     it("prepend icon - copy icon shows", () => {
@@ -101,7 +101,7 @@ describe("VcLink.vue", () => {
         const vcIconComponent = getByTestId('VcIcon');
         expect(vcIconComponent).toBeInTheDocument();
         expect(vcIconComponent).toHaveClass('prepend-icon');
-        expect(vcIconComponent).toHaveTextContent('$copy');
+        expect(vcIconComponent).toHaveTextContent('copy');
     });
 
     it("prepend icon - left icon shows", () => {
@@ -115,7 +115,7 @@ describe("VcLink.vue", () => {
         const vcIconComponent = getByTestId('VcIcon');
         expect(vcIconComponent).toBeInTheDocument();
         expect(vcIconComponent).toHaveClass('prepend-icon');
-        expect(vcIconComponent).toHaveTextContent('$chevron_left');
+        expect(vcIconComponent).toHaveTextContent('left');
     });
 
     it('link click emits event', async () => {

package/src/components/VcLink/VcLink.stories.js

@@ -1,4 +1,4 @@
-import {default as VcLinkCmp, VcLinkIcons} from './VcLink';
+import {default as VcLinkCmp} from './VcLink';
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
 const baseProps = {
@@ -41,7 +41,7 @@ export const WithPrependIcon = Template.bind({});
 // Set default values
 WithPrependIcon.args = {
     ...baseProps,
-    prependIcon: 'left'
+    prependIcon: 'copy'
 }
 
 export default {
@@ -50,10 +50,6 @@ export default {
     component: VcLinkCmp,
     argTypes: {
         onClick: {action: 'onClick', table: {disable: true}},
-        prependIcon: {
-            options: Object.values(VcLinkIcons),
-            control: {type: 'select'}
-        },
         target:{
             options: ['_blank', '_self', '_parent', '_top', '_system'],
             control: {type: 'radio'}

package/src/components/VcLink/VcLink.vue

@@ -4,16 +4,13 @@
      :class="{'link-secondary': secondary, 'disabled' : disabled}"
      :data-qa="dataQa"
      @click="$emit('click')">
-    <VcIcon v-if="!!prependIcon" class="prepend-icon" small>{{ getIcon }}</VcIcon>
+    <VcIcon v-if="!!prependIcon" class="prepend-icon" small>{{ prependIcon }}</VcIcon>
     <label>{{ label }}</label>
   </a>
 </template>
 
 <script>
 import VcIcon from "@/components/VcIcon/VcIcon.vue";
-
-export const VcLinkIcons = ['', 'copy', 'trash', 'left'];
-
 export default {
   name: "VcLink",
   components: {VcIcon},
@@ -33,7 +30,6 @@ export default {
     prependIcon: {
       type: String,
       required: false,
-      validator: prop => VcLinkIcons.includes(prop)
     },
     dataQa: {
       type: String,
@@ -48,19 +44,6 @@ export default {
       type: Boolean,
       default: false,
     }
-  },
-  computed: {
-    getIcon() {
-      switch (this.prependIcon) {
-        case 'copy':
-          return '$copy';
-        case 'trash':
-          return '$trash';
-        case 'left':
-        default:
-          return '$chevron_left';
-      }
-    },
   }
 }
 </script>

package/src/components/VcMenu/VcDropdown.spec.js

@@ -0,0 +1,120 @@
+import '@testing-library/jest-dom'
+import VcDropdown from "./VcDropdown.vue";
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import init from "../../../testing-library.config";
+
+init();
+
+Vue.use(Vuetify)
+
+describe("VcDropdown.vue", () => {
+
+    const renderWithVuetify = (component, options, callback, isMobile = false) => {
+        const root = document.createElement('div');
+        root.setAttribute('data-app', 'true');
+        root.setAttribute('id', 'root');
+
+        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("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText} = renderWithVuetify(VcDropdown, {
+            props: {
+                attach: '#root',
+                value: true,
+            },
+            slots: {
+                header: '<div>slot header</div>',
+                default: '<div>slot content</div>',
+                footer: '<div>slot footer</div>',
+            },
+        })
+
+        // 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 header = getByTestId('VcDropdown-header');
+        expect(header).toBeInTheDocument();
+        const headerSlot = getByText('slot header');
+        expect(headerSlot).toBeInTheDocument();
+
+        const content = getByTestId('VcDropdown-content');
+        expect(content).toBeInTheDocument();
+        const contentSlot = getByText('slot content');
+        expect(contentSlot).toBeInTheDocument();
+
+        const footer = getByTestId('VcDropdown-footer');
+        expect(footer).toBeInTheDocument();
+        const footerSlot = getByText('slot footer');
+        expect(footerSlot).toBeInTheDocument();
+    });
+
+    it("shows add another", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByTestId, debug} = renderWithVuetify(VcDropdown, {
+            props: {
+                attach: '#root',
+                value: true,
+                showAddAnother: true,
+            },
+            slots: {
+                header: '<div>slot header</div>',
+                default: '<div>slot content</div>',
+            },
+        });
+
+        expect(getByTestId('VcDropdown-add')).toBeInTheDocument();
+
+        debug();
+
+
+    });
+
+    it("overrides add another label", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByTestId, getByText} = renderWithVuetify(VcDropdown, {
+            props: {
+                attach: '#root',
+                value: true,
+                showAddAnother: true,
+                addAnotherLabel: 'override label',
+            },
+            slots: {
+                header: '<div>slot header</div>',
+                default: '<div>slot content</div>',
+            },
+        });
+
+        expect(getByTestId('VcDropdown-add')).toBeInTheDocument();
+        expect(getByText('override label')).toBeInTheDocument();
+    });
+
+});

package/src/components/VcMenu/VcDropdown.stories.js

@@ -0,0 +1,272 @@
+import VcDropdown from './VcDropdown';
+import VcBaseDocs from '@/stories/VcBaseDocs.mdx'
+import VcButton from "@/components/VcButton/VcButton";
+import VcLayout from "@/components/VcLayout/VcLayout";
+import VcSearchBar from "@/components/VcSearchBar/VcSearchBar";
+import VcGroupedItems from "@/components/VcGroupedItems/VcGroupedItems";
+import VcCheckbox from "@/components/VcCheckbox/VcCheckbox";
+import VcList from "@/components/list/VcList/VcList";
+import VcBadge from "@/components/VcBadge/VcBadge";
+
+const Template = (args, {argTypes}) => ({
+    components: {VcDropdown, VcButton, VcLayout, VcSearchBar, VcGroupedItems, VcList, VcCheckbox, VcBadge},
+    props: Object.keys(argTypes),
+    data: () => ({
+        filter: '',
+    }),
+    template: `
+      <div>
+      You can use any props and events on this component that you can use on VcMenu
+      <br>
+      <VcDropdown :max-height="maxHeight" :dataQa="dataQa"
+                        :show-add-another="showAddAnother" :add-another-label="addAnotherLabel"
+                        @onAddItem="onAddItem">
+        <template #activator="{ on, attrs }">
+          ${args.activator}
+        </template>
+        <template #header v-if="header">
+          ${args.header}
+        </template>
+        ${args.default}
+        <template #footer v-if="footer">
+          ${args.footer}
+        </template>
+      </VcDropdown>
+      </div>`,
+    methods: {
+        onSearch(data) {
+            this.onSearchEvent(data);
+            this.filter = data;
+        },
+    },
+    computed: {
+        filteredItems() {
+            return this.listItems.filter(item => {
+                if (item.avatar?.name)
+                    return item.avatar.name.toLowerCase().includes(this.filter);
+                else
+                    return true;
+            });
+        },
+    }
+});
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    dataQa: 'VcDropdown',
+    maxHeight: 297,
+    activator: `<VcButton v-bind='attrs' v-on='on'>Click me</VcButton>`,
+    header: `<VcLayout :style="{ minHeight: '48px', minWidth: '220px' ,backgroundColor: 'var(--green-lighten-2)', border: 'dashed var(--green)'}">header slot (sticky)</VcLayout>`,
+    default: `<VcLayout :style="{ minHeight: '400px', backgroundColor: 'var(--green-lighten-2)',border: 'dashed var(--green)'}">content slot (scrolling)</VcLayout>`,
+    footer: `<VcLayout align-center justify-center :style="{ minHeight: '48px', backgroundColor: 'var(--green-lighten-2)', border: 'dashed var(--green)'}">footer slot (sticky)</VcLayout>`,
+    showAddAnother: false,
+    addAnotherLabel: '',
+}
+
+const listItems = [
+    {
+        disabled: true,
+        avatar:
+            {
+                name: 'Person One',
+                path: require('@/stories/assets/pics/avatar4.png'),
+            },
+        identifier: 0
+    },
+    {
+        disabled: true,
+        avatar: {
+            name: 'Person Two',
+            path: require('@/stories/assets/pics/avatar2.png'),
+        },
+        identifier: 1
+    },
+    {
+        selected: true,
+        avatar: {
+            name: 'Person Three',
+            path: require('@/stories/assets/pics/avatar1.png'),
+        },
+        identifier: 2
+    },
+    {
+        selected: true,
+        avatar: {
+            name: 'Person Four',
+            colorId: 3,
+        },
+        identifier: 3
+    },
+    {
+        avatar: {
+            name: 'Person Five',
+            colorId: 4,
+        },
+        identifier: 4
+    },
+];
+
+export const SimpleListMenu = Template.bind({});
+
+// Set default values
+SimpleListMenu.args = {
+    dataQa: 'VcDropdown',
+    maxHeight: 297,
+    activator: `<VcButton v-bind='attrs' v-on='on'>Click me</VcButton>`,
+    default: `<VcList :items='filteredItems' multiple @select='onSelect'>
+        <template #default='item'>
+          <VcCheckbox :label='item.avatar.name'
+                      :avatar='item.avatar'
+                      :checked='item.selected'
+                      :disabled='item.disabled'
+                      :show-border='false'
+                      style='padding: 0; margin: 0; flex: 1 1 auto'/>
+        </template>
+      </VcList>`,
+    listItems,
+}
+
+export const WithSearchAndAddItem = Template.bind({});
+
+// Set default values
+WithSearchAndAddItem.args = {
+    dataQa: 'VcDropdown',
+    activator: `<VcButton v-bind='attrs' v-on='on'>Click me</VcButton>`,
+    header: `<VcLayout :style="{margin: '4px'}"><VcSearchBar size='medium' @search='onSearch'></VcSearchBar></VcLayout>`,
+    default: `<VcList :items='filteredItems' multiple @select='onSelect'>
+        <template #default='item'>
+          <VcCheckbox :label='item.avatar.name'
+                      :avatar='item.avatar'
+                      :checked='item.selected'
+                      :disabled='item.disabled'
+                      show-border='false'
+                      style='padding: 0; margin: 0; flex: 1 1 auto'/>
+        </template>
+      </VcList>`,
+    showAddAnother: true,
+    listItems,
+}
+
+const menuItems = [
+    {
+        label: 'GROUP 1',
+        id: 1,
+        items: [
+            {id: '1', label: 'Menu Item 1'},
+            {id: '2', label: 'Menu Item 2'},
+            {id: '3', label: 'Menu Item 3'},
+            {id: '4', label: 'Menu Item 4'},
+            {id: '5', label: 'Menu Item 5', disabled: true},
+        ]
+    },
+    {
+        label: 'GROUP 2',
+        id: 2,
+        items: [
+            {id: '6', label: 'Menu Item 6'},
+            {id: '7', label: 'Menu Item 7'},
+            {id: '8', label: 'Menu Item 8'},
+            {id: '9', label: 'Menu Item 9'},
+            {id: '10', label: 'Menu Item 10'},
+        ]
+    },
+];
+
+const GroupedTemplate = (args, {argTypes}) => ({
+    components: {VcDropdown, VcButton, VcLayout, VcGroupedItems, VcCheckbox},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+      You can use any props and events on this component that you can use on VcMenu
+      <br>
+      <VcDropdown :max-height="maxHeight" :dataQa="dataQa"
+                        :show-add-another="showAddAnother" :add-another-label="addAnotherLabel"
+                        @onAddItem="onAddItem">
+        <template #activator="{ on, attrs }">
+          ${args.activator}
+        </template>
+        <template #header v-if="header">
+          ${args.header}
+        </template>
+        ${args.default}
+        <template #footer v-if="footer">
+          ${args.footer}
+        </template>
+      </VcDropdown>
+      </div>`,
+    methods: {
+        getItemSlotName(itemId) {
+            return `item-${itemId}`;
+        },
+    },
+    computed: {
+        allGroupedItems() {
+            return this.menuItems.reduce((acc, group) => acc.concat(group.items), []);
+        }
+    }
+});
+
+export const WithGroupedItems = GroupedTemplate.bind({});
+
+// Set default values
+WithGroupedItems.args = {
+    dataQa: 'VcDropdown',
+    maxHeight: 297,
+    activator: `<VcButton v-bind='attrs' v-on='on'>Click me</VcButton>`,
+    default: `<VcLayout :style="{ minHeight: '400px'}">
+            <VcGroupedItems :item-groups='menuItems' show-dividers @change='onChange'>
+                <template #group-1-header='groupData'>
+                  <div class='d-flex align-center'>
+                    <span>{{groupData.group.label}}</span>
+                    <VcBadge class='ps-2' badgeText='new' :offsetX='-2' :offsetY='0'></VcBadge>
+                  </div>
+                </template>
+                
+                <template v-for='item in allGroupedItems' #[getItemSlotName(item.id)]='data'>
+                  <div class='d-flex align-center flex-grow-1 px-4'>
+                    <VcCheckbox :label='item.label'
+                      :checked='item.selected'
+                      :disabled='item.disabled'
+                      :show-border='false'
+                      style='padding: 0; margin: 0; flex: 1 1 auto'/>
+                  </div>
+                </template>
+                <template v-for='item in allGroupedItems' #item-4>
+                  <div class='d-flex align-center flex-grow-1 px-4'>
+                    <span>Slot display override</span>
+                    <VcBadge class='ps-2' badgeText='new' :offsetX='-2' :offsetY='0'></VcBadge>
+                  </div>
+                </template>
+            </VcGroupedItems>
+         </VcLayout>`,
+    menuItems,
+    showAddAnother: true,
+    addAnotherLabel: 'Click to add item',
+}
+
+export default {
+    title: 'containers / menu / VcDropdown', // This will control the story sidebar position
+    id: 'VcDropdown', // This will be the permanent link to this component
+    component: VcDropdown,
+    argTypes: {
+        onSelect: {action: 'select', table: {disable: true}},
+        onSearchEvent: {action: 'search', table: {disable: true}},
+        onChange: {action: 'change', table: {disable: true}},
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=251%3A908',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+        docs: {
+            page: VcBaseDocs,
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+};