@vcita/design-system 1.2.0 → 1.2.2

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,4 @@ 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';

package/src/components/list/VcList/pattern/VcMobilePickerPattern.stories.js

@@ -247,8 +247,8 @@ MobileSingleSelectPickerWithAvatars.parameters = {
                    readonly
                    append-icon="$chevron_right"
                    @click="showDialog = true">
-        <template #prepend-inner>
-          [Your selected item implementation]
+        <template #prepend-inner="data">
+          [1. implement selected item]
         </template>
       </VcTextField>
 
@@ -261,21 +261,30 @@ MobileSingleSelectPickerWithAvatars.parameters = {
                        @search="onSearch"
                        style="margin-bottom: 16px"/>
           <VcList :items="items"
-                  :image-path="[pathToEmptyStateImage]"
+                  :image-path="[2. (optional) - pass empty state image]"
                   :empty-list-msg="$t('your.emptyListMsg.here')"
                   @select="onSelect">
-            <template #default="item">
-              [Your item implementation]
+            <template #default="data">
+              [3. your list item implementation]
             </template>
           </VcList>
         </template>
       </VcInputModal>
   </template>
+  
+  /** 
+    TODO: - to get this code running you need to
+    1. Implement selected item - display the current selected item
+    2. Optional - pass empty state image, or you can delete this line 
+    3. Your list item implementation - display each item on the list
+    4. YourPageHere - declare the name of your page
+    5. YourStoreModule - map the items data to the store (the don't have to be called "items") 
+  */
       
   import {mapGetters} from "vuex";
   
   export default {
-        name: "[YourPageHere]",
+        name: "[4. YourPageHere]",
         data() {
             return {
               showDialog: false,
@@ -284,7 +293,7 @@ MobileSingleSelectPickerWithAvatars.parameters = {
             };
         },
         computed: {
-            ...mapGetters("[yourModule]", ["items"]),
+            ...mapGetters("[5. YourStoreModule]", ["items"]),
         },
         methods: {
             onSearch(search) {
@@ -295,7 +304,12 @@ MobileSingleSelectPickerWithAvatars.parameters = {
                 // Handle any other reaction to selection change
             },
         },
-    }`,
+    }
+
+    <style lang="scss" scoped>
+        // Your css here
+    </style>
+`,
             type: "auto",
         },
     },

package/src/components/list/VcListEntity/VcListEntity.stories.js

@@ -1,6 +1,13 @@
 import VcListEntityCmp from './VcListEntity.vue';
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const baseProps = {
+    disabled: false,
+    value: false,
+    title: 'text for <b>storybook</b>',
+    dataQa: 'VcListEntity',
+};
+
 const Template = (args, {argTypes}) => ({
     components: {VcListEntity: VcListEntityCmp},
     props: Object.keys(argTypes),
@@ -10,6 +17,7 @@ const Template = (args, {argTypes}) => ({
     template: `
       <div>
       <VcListEntity :disabled="disabled" v-model="itemValue" :value="itemValue" :title="title"
+                    :data-qa="dataQa"
                     @input="onInput"></VcListEntity>
       </div>`,
     watch: {
@@ -23,27 +31,15 @@ export const Playground = Template.bind({});
 
 // Set default values
 Playground.args = {
-    disabled: false,
-    value: false,
-    title: 'text to <b>storybook</b>'
+    ...baseProps,
 }
 
-const TemplateDisabled = (args, {argTypes}) => ({
-    components: {VcListEntity: VcListEntityCmp},
-    props: Object.keys(argTypes),
-    data: () => ({
-        itemValue: true,
-    }),
-    template: '<div><VcListEntity :disabled="disabled" :value="itemValue" :title="title" /></div>',
-})
-
-export const Disabled = TemplateDisabled.bind({});
+export const Disabled = Template.bind({});
 
 // Set default values
 Disabled.args = {
+    ...baseProps,
     disabled: true,
-    value: false,
-    title: 'text to <b>storybook</b>'
 }
 
 const TemplateWithSlot = (args, {argTypes}) => ({
@@ -54,7 +50,8 @@ const TemplateWithSlot = (args, {argTypes}) => ({
     }),
     template: `
       <div>
-      <VcListEntity :disabled="disabled" :value="itemValue" :title="title">
+      <VcListEntity :disabled="disabled" :value="itemValue" :title="title" :data-qa="dataQa"
+                    @input="onInput">
         <template v-slot:icon>
           <v-icon size="12">home</v-icon>
         </template>
@@ -66,9 +63,7 @@ export const WithSlot = TemplateWithSlot.bind({});
 
 // Set default values
 WithSlot.args = {
-    disabled: false,
-    value: false,
-    title: 'text to <b>storybook</b>'
+    ...baseProps,
 }