@vcita/design-system 1.2.1 → 1.2.3

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

@@ -0,0 +1,105 @@
+import '@testing-library/jest-dom';
+import VcSideNav from "./VcSideNav.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);
+
+describe("VcSideNav.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,
+        )
+    }
+
+    const navGroupsData = [
+        {id: 1, label: 'Group 1', items: [{id: '1', label: 'Item 1'},{id: '2', label: 'Item 2'}]},
+        {id: 2, label: 'Group 2', items: [{id: '3', label: 'Item 3'},{id: '4', label: 'Item 4'}]}
+    ]
+    const slotItemText = 'item as slot';
+    const slotGroupHeaderText = 'group header as slot';
+
+    it ("mount with all elements", async ()=> {
+        const {container, getByTestId} = renderWithVuetify(VcSideNav, {props: {navGroups: navGroupsData}})
+
+        expect(container).toHaveAttribute('data-app', "true")
+        const component = getByTestId('VcSideNav');
+        expect(component).toBeInTheDocument()
+        navGroupsData.forEach((group) => {
+            // Verify Groups
+            let groupElement = getByTestId(group.id)
+            expect(groupElement).toBeInTheDocument()
+            group.items.forEach((item) => {
+                // Verify Items
+                let itemElement = getByTestId(`item-${item.id}`)
+                expect(itemElement).toBeInTheDocument()
+            })
+        })
+    })
+
+    it ("check selected items", async () => {
+        const {emitted, getByTestId, updateProps} = renderWithVuetify(VcSideNav, {props: {navGroups: navGroupsData, selected: '4'}})
+        const selectedCmp = getByTestId(`item-4`);
+        expect(selectedCmp).toBeInTheDocument()
+        expect(selectedCmp).toHaveClass("selected")
+
+        let item2 = getByTestId('item-2')
+        await userEvent.click(item2)
+        expect(emitted().change.length).toBe(1);
+        expect(emitted().change[0]).toEqual(["2"]);
+
+        await updateProps({selected: '2'})
+        item2 = getByTestId('item-2')
+        expect(item2).toHaveClass("selected")
+    })
+
+    it ("check slot usage", async () => {
+        const {getByText} = renderWithVuetify(VcSideNav, {
+            props: {navGroups: navGroupsData, selected: '2'}
+            ,
+            slots: {
+                "item-2" : slotItemText,
+                "group-1-header" : slotGroupHeaderText,
+            }
+        })
+        const slotItem = getByText(slotItemText);
+        expect(slotItem).toBeInTheDocument()
+        expect(slotItem).toHaveClass("selected")
+
+        const slotGroupHeader = getByText(slotGroupHeaderText);
+        expect(slotGroupHeader).toBeInTheDocument()
+    })
+
+
+
+})

package/src/components/VcSideNav/VcSideNav.stories.js

@@ -0,0 +1,117 @@
+import VcSideNav from './VcSideNav';
+import VcIcon from "@/components/VcIcon/VcIcon";
+import VcBadge from "@/components/VcBadge/VcBadge";
+import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
+
+const basicProps = {
+    navGroups: [
+        {
+            label: 'GROUP 1',
+            id: 1,
+            items: [
+                {id: '1', label: 'Menu Item'},
+                {id: '2', label: 'Menu Item'},
+                {id: '3', label: 'Menu Item'},
+                {id: '4', label: 'Menu Item'},
+                {id: '5', label: 'Menu Item', disabled: true},
+            ]
+        },
+        {
+            label: 'GROUP 2',
+            id: 2,
+            items: [
+                {id: '6', label: 'Menu Item'},
+                {id: '7', label: 'Menu Item'},
+                {id: '8', label: 'Menu Item'},
+                {id: '9', label: 'Menu Item'},
+                {id: '10', label: 'Menu Item'},
+            ]
+        },
+    ],
+    dataQa: 'VcSideNav',
+}
+
+
+const Template = (args, {argTypes}) => ({
+    components: {VcSideNav: VcSideNav},
+    props: Object.keys(argTypes),
+    data: () => ({
+        selectedIdx: '1',
+    }),
+    template: `<div>
+                <VcSideNav :navGroups="navGroups" v-model="selectedIdx" @change="onChange">
+                </VcSideNav>
+              </div>`,
+});
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+    ...basicProps,
+}
+
+const UsingSlotsTemplate = (args, {argTypes}) => ({
+    components: {VcSideNav: VcSideNav, VcIcon: VcIcon, VcBadge: VcBadge},
+    props: Object.keys(argTypes),
+    data: () => ({
+        selectedIdx: '',
+        navGroupsData: [{id: 1, label: 'GROUP', items: [{id: '0', label: 'This is place holder'},{id: '1', label: 'This is place holder'}]}]
+    }),
+    template: `
+      <div>
+        <VcSideNav :navGroups="navGroupsData" v-model="selectedIdx" @change="onChange">
+            <template #group-1-header>
+              <div class="d-flex align-center">
+                <span>Group Title</span>
+                <VcBadge class="ps-2" badgeText="new" :offsetX="-2" :offsetY="0"></VcBadge>
+              </div>
+            </template>
+            <template #item-0>
+              <div class="d-flex align-center flex-grow-1 justify-space-between px-6">
+                <span>Slot Label</span>
+                <div class="d-flex align-center">
+                  <vc-icon size="16" color="black" class="mx-3">$magnify_glass</vc-icon>
+                  <vc-icon size="16" color="black" class="mx-3">$plus</vc-icon>
+                </div>
+              </div>
+            </template>     
+              
+            <template #item-1>
+              <div class="d-flex align-center flex-grow-1 justify-space-between px-6">
+                <div class="d-flex align-center">
+                <span>Slot Label </span>
+                  <VcBadge class="ps-2" badgeText="beta" :offsetX="-2" :offsetY="4"></VcBadge>
+                </div>
+                  <vc-icon size="16" color="black" class="mx-3">$plus</vc-icon>
+              </div>
+            </template>
+        </VcSideNav>
+      </div>
+    `
+})
+export const UsingSlots = UsingSlotsTemplate.bind({});
+
+UsingSlots.args = {}
+
+
+export default {
+    title: 'containers / VcSideNav',
+    component: VcSideNav,
+    id: 'VcSideNav',
+    argTypes: {
+        onChange: {action: 'change', table: {disable: true}},
+
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=11638%3A241955',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+        docs: {
+            page: VcBaseDocs,
+        },
+    },
+};

package/src/components/VcSideNav/VcSideNav.vue

@@ -0,0 +1,136 @@
+<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>
+</template>
+<script>
+import VcIcon from "@/components/VcIcon/VcIcon.vue";
+export default {
+  name: "VcSideNav",
+  components: {VcIcon},
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcSideNav'
+    },
+    selected: {
+      type: String,
+      required: true,
+    },
+    navGroups: {
+      type: Array,
+      validator: prop => prop.every((group) => group.label && group.id)
+    }
+  },
+  model: {
+    prop: 'selected',
+    event: 'change'
+  },
+  computed: {
+    isMobile(){
+      return !this.$vuetify.breakpoint.mdAndUp
+    }
+  }
+}
+</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.stories.js

@@ -2,6 +2,32 @@ import VcTextFieldCmp from './VcTextField';
 import icons from "../../../init/SvgIcons";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const baseProps = {
+    label: "Label",
+    type: 'text',
+    placeholder: '',
+    value: '',
+    maxlength: 100,
+    hint: '',
+    counter: false,
+    disabled: false,
+    appendIcon: '',
+    rules: [],
+    tooltipContent: '',
+    tooltipHeader: '',
+    tooltipNudgeLeft: 0,
+    tooltipNudgeRight: 0,
+    prefix: '',
+    errorMessages: '',
+    dataQa: 'vc-text-field',
+    hideDetails: 'auto',
+    persistentHint: true,
+    singleLine: false,
+    readonly: false,
+    googleAddressAutoComplete: false,
+    googleAddressCountryOptions: []
+}
+
 const TextFieldTemplate = (args, {argTypes}) => ({
     components: {VcTextField: VcTextFieldCmp},
     props: Object.keys(argTypes),
@@ -12,7 +38,7 @@ const TextFieldTemplate = (args, {argTypes}) => ({
     },
     template: `
       <v-layout column>
-      <p>In the case of using the append icon make sure there is no tooltip content that will override the slot</p>
+      ${args.description}
       <VcTextField :value="value"
                    :maxlength="maxlength"
                    :hint="hint"
@@ -34,6 +60,8 @@ const TextFieldTemplate = (args, {argTypes}) => ({
                    :persistent-hint="persistentHint"
                    :single-line="singleLine"
                    :readonly="readonly"
+                   :google-address-auto-complete="googleAddressAutoComplete"
+                   :google-address-country-options="googleAddressCountryOptions"
                    @click="onClick"
                    @input="onInput"/>
       </v-layout>`,
@@ -41,86 +69,44 @@ const TextFieldTemplate = (args, {argTypes}) => ({
 
 export const Playground = TextFieldTemplate.bind({});
 Playground.args = {
-    label: "Label",
-    type: 'text',
-    placeholder: 'Placeholder',
-    value: '',
-    maxlength: 10,
-    hint: 'Hint',
-    counter: true,
-    disabled: false,
-    appendIcon: '',
-    rules: [],
-    tooltipContent: 'Tooltip content',
-    tooltipHeader: 'Tooltip header',
-    tooltipNudgeLeft: 0,
-    tooltipNudgeRight: 0,
-    prefix: '',
-    errorMessages: '',
-    dataQa: 'vc-text-field',
-    hideDetails: 'auto',
-    persistentHint: true,
-    singleLine: false,
-    readonly: false,
+    ...baseProps,
+    description: 'In the case of using the append icon make sure there is no tooltip content that will override the slot'
 }
 
 export const Prefix = TextFieldTemplate.bind({});
 Prefix.args = {
-    label: "Label",
-    type: 'text',
+    ...baseProps,
     prefix: '$'
 }
 
 export const Placeholder = TextFieldTemplate.bind({});
 Placeholder.args = {
-    label: "Label",
+    ...baseProps,
     placeholder: "Placeholder Text"
 }
 
-const TooltipTemplate = (args, {argTypes}) => ({
-    components: {VcTextField: VcTextFieldCmp},
-    props: Object.keys(argTypes),
-    template: `<div><br/><br/><br/><br/><br/><br/><br/>
-      <VcTextField :value="value"
-                   :maxlength="maxlength"
-                   :hint="hint"
-                   :counter="counter"
-                   :disabled="disabled"
-                   :rules="rules"
-                   :label="label"
-                   :type="type"
-                   :placeholder="placeholder"
-                   :tooltip-content="tooltipContent"
-                   :tooltip-header="tooltipHeader"
-                   :tooltip-nudge-left="tooltipNudgeLeft"
-                   :tooltip-nudge-right="tooltipNudgeRight"
-                   @input="onInput"/></div>`,
-})
-
-export const Tooltip = TooltipTemplate.bind({});
+export const Tooltip = TextFieldTemplate.bind({});
 Tooltip.args = {
-    label: "Label",
+    ...baseProps,
     tooltipHeader: "tooltipHeader",
     tooltipContent: "tooltipContent"
 }
 
 export const Disabled = TextFieldTemplate.bind({});
 Disabled.args = {
-    label: "Label",
-    type: 'text',
+    ...baseProps,
     disabled: true
 }
 export const Hint = TextFieldTemplate.bind({});
 Hint.args = {
-    label: "Label",
-    type: 'text',
+    ...baseProps,
     hint: "Help text"
 }
 
 export const ErrorRules = TextFieldTemplate.bind({});
 ErrorRules.args = {
+    ...baseProps,
     label: "Email",
-    type: 'text',
     rules: [value => !!value || 'Required.', value => {
         const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
         return pattern.test(value) || 'Invalid e-mail.'
@@ -129,53 +115,29 @@ ErrorRules.args = {
 
 export const ErrorMessage = TextFieldTemplate.bind({});
 ErrorMessage.args = {
-    label: "Label",
-    type: 'text',
+    ...baseProps,
     errorMessages: 'Error message'
 }
 
 export const Counter = TextFieldTemplate.bind({});
 Counter.args = {
+    ...baseProps,
     label: "Email",
-    type: 'text',
-    counter: true,
-    maxlength: 100
+    counter: true
 }
 
-const GoogleAutoCompleteTemplate = (args, {argTypes}) => ({
-    components: {VcTextField: VcTextFieldCmp},
-    props: Object.keys(argTypes),
-    template: `<div>
-      <p>To use Google Address Auto Complete, you must have a Google API key.</p>
-      <p>Vue.prototype.$ds = {options: {googleAppKey: 'Google_API_Key'}};</p>
-      <VcTextField :value="value"
-                   :maxlength="maxlength"
-                   :hint="hint"
-                   :counter="counter"
-                   :disabled="disabled"
-                   :rules="rules"
-                   :label="label"
-                   :type="type"
-                   :placeholder="placeholder"
-                   :tooltip-content="tooltipContent"
-                   :tooltip-header="tooltipHeader"
-                   :google-address-auto-complete="googleAddressAutoComplete"
-                   :google-address-country-options="googleAddressCountryOptions"
-                   @input="onInput"
-                   @onPlaceSelected="onPlaceSelected"/>
-    </div>`,
-})
-
-export const GoogleAddressAutocomplete = GoogleAutoCompleteTemplate.bind({});
+export const GoogleAddressAutocomplete = TextFieldTemplate.bind({});
 GoogleAddressAutocomplete.args = {
+    ...baseProps,
     label: "Address",
-    type: 'text',
     googleAddressAutoComplete: true,
     googleAddressCountryOptions: ['us'],
     tooltipHeader: "header",
     tooltipContent: "content",
     hint: "hint",
-    placeholder: "placeholder"
+    placeholder: "placeholder",
+    description: `<p>To use Google Address Auto Complete, you must have a Google API key.</p>
+      <p>Vue.prototype.$ds = {options: {googleAppKey: 'Google_API_Key'}};</p>`
 }
 
 export default {
@@ -187,27 +149,23 @@ export default {
             options: ['number', 'text', 'search'],
             control: {type: 'radio'}
         },
-        disabled: {
-            options: [true, false],
-            control: {type: 'boolean'}
-        },
-        counter: {
-            options: [true, false],
-            control: {type: 'boolean'}
-        },
-        maxlength: {
-            control: {type: 'number'}
-        },
-        value: {
-            control: {type: 'text'}
-        },
-        googleAddressAutoComplete: {
-            control: {type: 'boolean'}
-        },
         appendIcon: {
             options: Object.keys(icons),
             control: {type: 'select'}
         },
+        counter: {table: {category: 'counter'}},
+        maxlength: {table: {category: 'counter'}},
+        rules: {table: {category: 'error'}},
+        hint: {table: {category: 'hint'}},
+        persistentHint: {table: {category: 'hint'}},
+        errorMessages: {table: {category: 'error'}},
+        tooltipContent: {table: {category: 'tooltip'}},
+        tooltipHeader: {table: {category: 'tooltip'}},
+        tooltipNudgeLeft: {table: {category: 'tooltip'}},
+        tooltipNudgeRight: {table: {category: 'tooltip'}},
+        googleAddressAutoComplete: {table: {category: 'google address'}},
+        googleAddressCountryOptions: {table: {category: 'google address'}},
+        description: {table: {disable: true}},
         onInput: {action: 'input', table: {disable: true}},
         onClick: {action: 'click', table: {disable: true}},
     },
@@ -222,6 +180,7 @@ export default {
         },
         docs: {
             page: VcBaseDocs,
+            inlineStories: false, // Opt-out of inline rendering
         },
     },
 };

package/src/components/VcTextField/VcTextField.vue

@@ -1,6 +1,7 @@
 <template>
   <v-text-field class="VcTextInput"
                 dense
+                :class="{'no-label': !label}"
                 :data-qa="dataQa"
                 :label="label"
                 :placeholder="placeholder"
@@ -311,6 +312,9 @@ export default {
     .v-text-field__slot {
       margin-bottom: -14px;
     }
+    &.no-label .v-text-field__slot {
+      margin-bottom: unset;
+    }
   }
 
   &.v-input--is-disabled {

package/src/components/index.js

@@ -64,3 +64,7 @@ export {default as VcTimeSince} from './VcTimeSince/VcTimeSince.vue';
 export {default as VcSearchPicker} from './VcSearchPicker/VcSearchPicker.vue';
 export {default as VcDraggableList} from './VcDraggableList/VcDraggableList.vue';
 export {default as VcTabs} from './VcTabs/VcTabs.vue';
+export {default as VcSideNav} from './VcSideNav/VcSideNav.vue';
+export {default as VcMiniBanner} from './VcMiniBanner/VcMiniBanner.vue';
+export {default as VcGalleryItem} from './VcGalleryItem/VcGalleryItem.vue';
+export {default as VcGalleryList} from './VcGalleryList/VcGalleryList.vue';