@vcita/design-system 1.3.2 → 1.3.4

package/src/components/VcMenu/VcDropdown.vue

@@ -0,0 +1,93 @@
+<template>
+  <VcMenu :offset-y="true" v-bind="$attrs" v-on="$listeners" :close-on-content-click="false"
+          :data-qa="dataQa">
+    <template v-slot:activator="activatorObj">
+      <slot v-bind="activatorObj" name="activator"/>
+    </template>
+    <VcLayout column :style="{maxHeight: `${maxHeight}px`}" :data-qa="dataQa">
+      <VcLayout class="header-area" :data-qa="`${dataQa}-header`">
+        <slot name="header">
+        </slot>
+      </VcLayout>
+      <VcLayout class="content-area" :data-qa="`${dataQa}-content`">
+        <slot></slot>
+      </VcLayout>
+      <VcLayout class="footer-area" :data-qa="`${dataQa}-footer`">
+        <slot name="footer">
+          <VcLayout column v-if="showAddAnother">
+            <v-divider></v-divider>
+            <VcBaseListItem @click="data => $emit('onAddItem', data)" :data-qa="`${dataQa}-add`">
+              <VcIcon size="12" class="add-another-icon" dense>$plus</VcIcon>
+              <span class="add-another-label">{{ getAddAnotherLabel }}</span>
+            </VcBaseListItem>
+          </VcLayout>
+        </slot>
+      </VcLayout>
+    </VcLayout>
+  </VcMenu>
+</template>
+
+<script>
+import VcLayout from "@/components/VcLayout/VcLayout.vue";
+import VcMenu from "@/components/VcMenu/VcMenu.vue";
+import VcBaseListItem from "@/components/list/VcBaseListItem/VcBaseListItem.vue";
+import VcIcon from "@/components/VcIcon/VcIcon.vue";
+
+export default {
+  name: "VcDropdown",
+  components: {VcBaseListItem, VcLayout, VcMenu, VcIcon},
+  props: {
+    /**
+     * If set to true and no content has been placed inside the footer slot, it will contain a separator and an "add another" item, as an easy shortcut.
+     */
+    showAddAnother: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * If you use the built in "add another" footer element, this will allow you to customize the label
+     */
+    addAnotherLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Max height in pixels. additional content will be scrolled.
+     */
+    maxHeight: {
+      type: Number,
+      default: 297,
+    },
+    dataQa: {
+      type: String,
+      default: 'VcDropdown',
+    }
+  },
+  computed: {
+    getAddAnotherLabel() {
+      return this.addAnotherLabel || this.$dst('ds.menu.add')
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.content-area {
+  overflow: scroll;
+  min-width: 220px;
+}
+
+.add-another-label {
+  font-weight: var(--font-weight-medium2);
+  font-size: var(--font-size-x-small);
+  line-height: var(--size-value5);
+  color: var(--gray-darken-5);
+}
+
+.add-another-icon {
+  margin-inline-end: var(--size-value3);
+  cursor: pointer;
+}
+
+</style>

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

@@ -2,37 +2,88 @@ import '@testing-library/jest-dom'
 import VcMenu from "./VcMenu.vue";
 import init from "../../../testing-library.config"
 import Vuetify from 'vuetify'
-import {render} from "@testing-library/vue";
+import {render, waitFor} from "@testing-library/vue";
+import userEvent from "@testing-library/user-event";
 
 init();
 
 describe("VcMenu.vue", () => {
 
-    const renderWithVuetify = (component, options, callback) => {
-        const root = document.createElement('div')
-        root.setAttribute('data-app', 'true')
+    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: new Vuetify(),
+                vuetify,
                 ...options,
-                mocks: {},
+                mocks: {
+                    $t: value => value,
+                    $dst: value => value, // <- for the design system
+                },
             },
             callback,
         )
     }
 
-    it("mounts", () => {
+    it("mounts", async () => {
         // Queries: https://testing-library.com/docs/queries/about#types-of-queries
-        const {container} = renderWithVuetify(VcMenu, {
-            props: {}
+        const {container, getByText, findByRole} = renderWithVuetify(VcMenu, {
+            props: {
+                attach: '#root',
+                value: true,
+            },
+            slots: {
+                'activator': '<div>activator</div>',
+                default: '<div>menu content</div>'
+            },
         })
 
         // Expect options: https://github.com/testing-library/jest-dom
-        expect(container).toHaveAttribute('data-app', 'true')
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const activator = getByText('activator');
+        expect(activator).toBeInTheDocument();
+        await userEvent.click(activator);
+
+        await waitFor(async () => {
+            const menu = await findByRole('menu');
+            expect(menu).toBeInTheDocument();
+        });
+
+        expect(getByText('menu content')).toBeInTheDocument();
+    });
+
+    it("shows VcBottomSheet in mobile", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByText,getByTestId} = renderWithVuetify(VcMenu, {
+            props: {
+                attach: '#root',
+                value: true,
+            },
+            slots: {
+                'activator': '<div>activator</div>',
+                default: '<div>menu content</div>'
+            },
+        }, undefined, true);
+
+        expect(getByTestId('VcMenu-sheet')).toBeInTheDocument();
+        expect(getByText('menu content')).toBeInTheDocument();
     });
 
 });

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

@@ -1,27 +1,22 @@
 import VcMenuCmp from './VcMenu';
 import VcButton from "@/components/VcButton/VcButton";
+import VcLayout from "@/components/VcLayout/VcLayout";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
 const Template = (args, {argTypes}) => ({
-    components: {VcMenu: VcMenuCmp, VcButton},
+    components: {VcMenu: VcMenuCmp, VcButton, VcLayout},
     props: Object.keys(argTypes),
     template: `
       <div>
-      <VcMenu>
+      Please note: for desktop, this component will display a menu item, for mobile, it will use a bottom sheet. <br>
+      <VcMenu :offset-y="offsetY" :offset-x="offsetX" :data-qa="dataQa" @input="onInput">
         <template #activator="{ on, attrs }">
-          <VcButton v-bind="attrs" v-on="on"> Click me</VcButton>
+          ${args.activator}
         </template>
-        <v-list>
-          <v-list-item>
-            <v-list-item-title>Option 1</v-list-item-title>
-          </v-list-item>
-          <v-list-item disabled>
-            <v-list-item-title>Option 2</v-list-item-title>
-          </v-list-item>
-          <v-list-item>
-            <v-list-item-title>Option 3</v-list-item-title>
-          </v-list-item>
-        </v-list>
+        <VcLayout align-center justify-center
+                  :style="{ minHeight: '300px', backgroundColor: 'var(--green-lighten-2)', padding: '12px'}">
+          Your content goes here
+        </VcLayout>
       </VcMenu>
       </div>`,
 })
@@ -29,23 +24,33 @@ const Template = (args, {argTypes}) => ({
 export const Playground = Template.bind({});
 
 // Set default values
-Playground.args = {}
+Playground.args = {
+    activator: `<VcButton v-bind='attrs' v-on='on'>Click me</VcButton>`,
+    offsetX: false,
+    offsetY: true,
+    dataQa: 'VcMenu'
+}
 
-// export default {
-//     title: 'Containers / VcMenu',
-//     id: 'VcMenu',
-//     component: VcMenuCmp,
-//     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
-//         },
-//         docs: {
-//             page: VcBaseDocs,
-//         },
-//     },
-// };
+export default {
+    title: 'Containers / menu / VcMenu',
+    id: 'VcMenu',
+    component: VcMenuCmp,
+    argTypes: {
+        onInput: {action: 'input', table: {disable: true}},
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=12711%3A263160',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/menus/', // will make the tag a link
+        },
+        docs: {
+            page: VcBaseDocs,
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+};

package/src/components/VcMenu/VcMenu.vue

@@ -1,12 +1,28 @@
 <script>
+import VcBottomSheet from "@/components/VcBottomSheet/VcBottomSheet.vue";
+
 export default {
   name: "VcMenu",
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcMenu'
+    },
+  },
   render: function (createElement) {
-    // `<v-menu><slot></slot></v-menu>`
     const props = {
-      attrs: {...this.$attrs, ...this.$listeners},
+      ...this.$props,
+      ...this.$attrs,
+      ...this.$listeners,
     };
-    return createElement('v-menu', props, this.$slots);
+
+    return createElement(
+        this.$vuetify.breakpoint.mdAndUp ? 'v-menu' : VcBottomSheet,
+        {
+          props,
+          scopedSlots: this.$scopedSlots
+        },
+    );
   }
 }
 </script>

package/src/components/VcPopover/VcPopover.stories.js

@@ -28,8 +28,8 @@ const GeneralTemplate = (args, {argTypes}) => ({
           </VcIcon>
         </template>
         <template>
-          <VcLayout align-center justify-center 
-                    :style="{ minHeight: '200px', backgroundColor: 'var(--green-lighten-2)'}">
+          <VcLayout align-center justify-center
+                    :style="{ minHeight: '200px', backgroundColor: 'var(--green-lighten-2)', padding: '12px'}">
           Place any content in the default slot
           </VcLayout>
         </template>

package/src/components/VcRadioGroup/VcRadioGroup.spec.js

@@ -138,4 +138,32 @@ describe("VcRadioGroup.vue", () => {
         expect(customDataQaEl).toBeInTheDocument();
     });
 
+    it("passing disabled prop transfers to radio", async () => {
+        const {container, getByTestId } = renderWithVuetify(VcRadioGroup, {
+            props: {
+                dataQa: 'vc-radio-group',
+                items: generalItems,
+                value: 'all_of_em',
+                disabled: true
+            }
+        })
+
+        const currentSelected = getByTestId('radio-all_of_em');
+        expect(currentSelected.parentElement.parentElement).toHaveClass("v-radio--is-disabled")
+    });
+
+    it("renders as horizontal", async () => {
+        const {container, getByTestId } = renderWithVuetify(VcRadioGroup, {
+            props: {
+                dataQa: 'vc-radio-group',
+                items: generalItems,
+                value: 'all_of_em',
+                isHorizontal: true,
+            }
+        })
+
+        const VcRadioGroupCmp = container.querySelector('.vc-radio-buttons');
+        expect(VcRadioGroupCmp).toHaveClass('v-input--radio-group--row');
+    });
+
 });

package/src/components/VcRadioGroup/VcRadioGroup.stories.js

@@ -54,6 +54,7 @@ const GeneralTemplate = (args, {argTypes}) => ({
           :data-qa="dataQa"
           @change="onChange"
           :disabled="disabled"
+          :is-horizontal="isHorizontal"
       >
         <template v-slot:label-custom>
           custom label by using a slot!
@@ -72,7 +73,8 @@ Playground.args = {
     items: generalItems,
     dataQa: 'VcRadioGroup',
     title: 'radio group title',
-    disabled: false
+    disabled: false,
+    isHorizontal: false
 }
 
 export default {

package/src/components/VcRadioGroup/VcRadioGroup.vue

@@ -7,7 +7,8 @@
         :value="value"
         @change="val => $emit('change', val)"
         hide-details="auto"
-        class="vc-radio-buttons">
+        class="vc-radio-buttons"
+        :row="isHorizontal">
       <VcRadio v-bind="item" v-for="item in items" :key="item.value" :disabled="disabled">
         <template v-slot:label>
           <slot :name="`label-${item.value}`"></slot>
@@ -56,6 +57,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    isHorizontal: {
+      type: Boolean,
+      default: false
     }
   },
 

package/src/components/VcSearchPicker/VcSearchPicker.stories.js

@@ -84,7 +84,7 @@ const TemplateWithSlot = (args, {argTypes}) => ({
                         @onMenuToggled="onMenuToggled"
         >
             <template #customItem="data">
-              ${args.slotContent}
+              ${args.customItem}
             </template>
         </VcSearchPicker>`
 })
@@ -99,7 +99,7 @@ DocumentItem.args = {
     noDataText: 'No documents found',
     iconType: 'folder',
     menuContentClass: 'custom-    content-    class',
-    slotContent: `<VcDocItem :title="data.item.text" :uid="data.item.value" :allowActions="false"/>`
+    customItem: `<VcDocItem :title='data.item.text' :uid='data.item.value' :allowActions='false'/>`
 }
 
 export const AvatarItem = TemplateWithSlot.bind({});
@@ -110,7 +110,7 @@ AvatarItem.args = {
     placeholderFocus: 'Select characters',
     errorLabelText: 'Please select A character',
     noDataText: 'No characters found',
-    slotContent: `<VcAvatar :imagePath="data.item.image" :uid="data.item.value" size="sm"/>
+    customItem: `<VcAvatar :imagePath='data.item.image' :uid='data.item.value' size='sm'/>
                 <span :style="{'marginLeft': '12px', 'fontSize': '12px'}">{{ data.item.text }}</span>`,
 }
 
@@ -170,7 +170,6 @@ export default {
         placeholderFocus: {table: {category: 'placeholder'}},
         error: {table: {category: 'error'}},
         errorLabelText: {table: {category: 'error'}},
-        slotContent: {table: {disable: true}},
     },
     parameters: {
         design: {

package/src/components/VcSelectField/VcSelectField.vue

@@ -5,6 +5,7 @@
             hide-details="auto"
             class="VcSelectField"
             :class="{'with-tooltip': tooltipContent}"
+            :readonly="readonly"
             :label="label"
             :items="items"
             :rules="rules"
@@ -17,6 +18,7 @@
             :placeholder="placeholder"
             @change="selectionChanged">
     <template v-slot:append>
+      <slot name="prepend"></slot>
       <div class="dropdown-arrow d-flex align-center justify-center">
         <VcIcon size="9" class="icon">$caret_down</VcIcon>
       </div>
@@ -63,6 +65,10 @@ export default {
       type: String,
       default: '',
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     tooltipHeader: {
       type: String,
       default: '',

package/src/components/VcSideNav/VcSideNav.spec.js

@@ -62,7 +62,7 @@ describe("VcSideNav.vue", () => {
         expect(component).toBeInTheDocument()
         navGroupsData.forEach((group) => {
             // Verify Groups
-            let groupElement = getByTestId(group.id)
+            let groupElement = getByTestId(`group-${group.id}`)
             expect(groupElement).toBeInTheDocument()
             group.items.forEach((item) => {
                 // Verify Items

package/src/components/VcSideNav/VcSideNav.vue

@@ -1,41 +1,22 @@
 <template>
-  <div
-      :data-qa="dataQa" class="side-nav d-flex flex-column">
-    <div class="side-nav__group"
-         v-for="group in navGroups"
-         :key="group.id"
-         :data-qa="group.id">
-      <div class="side-nav__group__header mb-2" >
-        <slot :name="`group-${group.id}-header`">
-          {{group.label}}
-        </slot>
-      </div>
-      <div class="side-nav__group__container d-flex flex-column mb-5">
-        <div @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="side-nav__group__container__menu-item d-flex  align-center flex-grow-1">
-          <slot :name="`item-${item.id}`" :item="item">
-            <div class="d-flex justify-space-between px-4 align-center flex-grow-1">
-              <span>{{item.label}}</span>
-              <vcIcon size="12" v-if="isMobile">$chevron_right</vcIcon>
-            </div>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
+  <VcGroupedItems :item-groups="navGroups" :selected="selected" flavor="elevated" :data-qa="dataQa"
+                  @change="data => $emit('change', data)">
+    <template v-for="group in navGroups" #[getGroupSlotName(group.id)]>
+      <slot :name="`group-${group.id}-header`"></slot>
+    </template>
+    <template v-for="item in allItems" #[getItemSlotName(item.id)]>
+      <slot :name="`item-${item.id}`" :item="item"></slot>
+    </template>
+  </VcGroupedItems>
 </template>
 <script>
 
 import VcIcon from "@/components/VcIcon/VcIcon.vue";
+import VcGroupedItems from "@/components/VcGroupedItems/VcGroupedItems.vue";
 
 export default {
   name: "VcSideNav",
-  components: {VcIcon},
+  components: {VcGroupedItems, VcIcon},
   props: {
     dataQa: {
       type: String,
@@ -54,85 +35,21 @@ export default {
     prop: 'selected',
     event: 'change'
   },
+  methods: {
+    getGroupSlotName(groupId) {
+      return `group-${groupId}-header`;
+    },
+    getItemSlotName(itemId) {
+      return `item-${itemId}`;
+    },
+  },
   computed: {
-    isMobile(){
-      return !this.$vuetify.breakpoint.mdAndUp
+    allItems() {
+      return this.navGroups.reduce((acc, group) => acc.concat(group.items), []);
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.side-nav{
-  &__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);
-    }
-    &__container{
-      border-radius: var(--border-radius);
-      background-color: var(--modal-bg-color);
-      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 {
-                -webkit-transform: scaleX(-1);
-                transform: scaleX(-1);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
 </style>

package/src/components/VcTextField/VcTextField.spec.js

@@ -274,4 +274,17 @@ describe("VcTextField.vue", () => {
         userEvent.click(textField);
         expect(emitted().click.length).toBe(1);
     });
+
+    it("emitted onKeydownEnter event",  () => {
+        const {getByTestId, emitted} = renderWithVuetify(VcTextField, {
+
+            props: {
+                label: "labelText"
+            }
+        });
+
+        const textField = getByTestId('vc-text-field');
+        userEvent.type(textField, '{enter}');
+        expect(emitted().onKeydownEnter.length).toBe(1);
+    });
 });

package/src/components/VcTextField/VcTextField.stories.js

@@ -64,7 +64,8 @@ const TextFieldTemplate = (args, {argTypes}) => ({
                    :google-address-country-options="googleAddressCountryOptions"
                    @click="onClick"
                    @input="onInput"
-                   @onPlaceSelected="onPlaceSelected"/>
+                   @onPlaceSelected="onPlaceSelected"
+                   @onKeydownEnter="onKeydownEnter"/>
       </v-layout>`,
 })