@vcita/design-system 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcButton/VcButton.stories.js

@@ -28,28 +28,28 @@ const GeneralTemplate = (args, {argTypes}) => ({
     components: {VcButton: VcButtonCmp},
     props: Object.keys(argTypes),
     template: `
-        <div>
-        <p v-if="description">{{description}}</p>
-        <VcButton :color="color"
-                  :flavor="flavor"
-                  :ghost="ghost"
-                  :x-small="xSmall"
-                  :small="small"
-                  :large="large"
-                  :x-large="xLarge"
-                  :icon="icon"
-                  :fab="fab"
-                  :pill="pill"
-                  :outlined="outlined"
-                  :loading="loading"
-                  :width="width"
-                  :disabled="disabled"
-                  :href="href"
-                  :prepend-default-icon="prependDefaultIcon"
-                  @click="onClick">
-            {{ label }}
-        </VcButton>
-        </div>`,
+      <div>
+      <p v-if="description">{{ description }}</p>
+      <VcButton :color="color"
+                :flavor="flavor"
+                :ghost="ghost"
+                :x-small="xSmall"
+                :small="small"
+                :large="large"
+                :x-large="xLarge"
+                :icon="icon"
+                :fab="fab"
+                :pill="pill"
+                :outlined="outlined"
+                :loading="loading"
+                :width="width"
+                :disabled="disabled"
+                :href="href"
+                :prepend-default-icon="prependDefaultIcon"
+                @click="onClick">
+        {{ label }}
+      </VcButton>
+      </div>`,
 })
 
 export const Playground = GeneralTemplate.bind({});
@@ -296,7 +296,7 @@ export default {
         fab: {table: {category: 'Shape'}},
         pill: {table: {category: 'Shape'}},
         outlined: {table: {category: 'Shape'}},
-        onClick: {action: 'onClick',table: {disable: true}},
+        onClick: {action: 'onClick', table: {disable: true}},
     },
     parameters: {
         docs: {

package/src/components/VcChip/VcChip.stories.js

@@ -1,5 +1,4 @@
 import VcChipCmp from "./VcChip";
-import {action} from "@storybook/addon-actions";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
 const GeneralTemplate = (args, {argTypes}) => ({
@@ -36,13 +35,15 @@ Playground.args = {
     invalid: false,
     dataQa: 'vc-chip',
     isRipple: true,
-    onClose: action('close'),
 }
 
 export default {
     title: 'Content Display / VcChip',
     id: 'VcChip',
     component: VcChipCmp,
+    argTypes: {
+        onClose: {action: 'close', table: {disable: true}},
+    },
     parameters: {
         design: {
             type: 'figma',

package/src/components/VcChipList/VcChipList.stories.js

@@ -3,14 +3,20 @@ import VcChipListCmp from './VcChipList';
 const chip = {
     label: 'Chip name',
     avatar: {
-        imagePath: require('@/stories/assets/pics/avatar1.png')
+        imagePath: require(`@/stories/assets/pics/avatar1.png`)
     }
 };
 
 const items = [];
 
 for (let i = 0; i < 30; i++) {
-    items.push(chip);
+    items.push({...chip, label: chip.label + ' ' + (i + 1)});
+}
+
+const baseProps = {
+    items,
+    moreText: 'and $NUMBER more',
+    dataQa: 'VcChipList',
 }
 
 const PlaygroundTemplate = (args, {argTypes}) => ({
@@ -23,21 +29,26 @@ const PlaygroundTemplate = (args, {argTypes}) => ({
     },
     computed: {
         moreString() {
-            return `and ${this.hiddenNumber} more`;
+            return this.moreText.replace('$NUMBER', this.hiddenNumber);
         }
     },
     template: `
       <div>
       <div>VcChipList renders a list of VcChip components according to an array of items.</div>
-      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the "more" indicator.</div>
+      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the
+        "more" indicator.
+      </div>
       <br>
       <div>The "moreText" prop will determine the text for the "more" indicator.</div>
-      <div>It's not editable as a prop in this example, because it's computed in order to include the number of hidden chips.</div>
+      <div>This example shows one way for including the number of hidden items in the "moreText" label.</div>
       <br>
-      <div>This example shows the default content of the VcChip (label) and the default display of the tooltip content.</div>
+      <div>This example shows the default content of the VcChip (label) and the default display of the tooltip
+        content.
+      </div>
       <br>
       <VcChipList :items="items"
                   :more-text="moreString"
+                  :data-qa="dataQa"
                   @onHiddenChipsChange="(num) => this.hiddenNumber = num"/>
       </div>
     `
@@ -46,7 +57,7 @@ const PlaygroundTemplate = (args, {argTypes}) => ({
 export const Playground = PlaygroundTemplate.bind({});
 
 Playground.args = {
-    items
+    ...baseProps,
 };
 
 const CustomTemplate = (args, {argTypes}) => ({
@@ -59,32 +70,34 @@ const CustomTemplate = (args, {argTypes}) => ({
     },
     computed: {
         moreString() {
-            return `and ${this.hiddenNumber} more`;
+            return this.moreText.replace('$NUMBER', this.hiddenNumber);
         }
     },
     template: `
       <div>
       <div>VcChipList renders a list of VcChip components according to an array of items.</div>
-      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the "more" indicator.</div>
+      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the
+        "more" indicator.
+      </div>
       <br>
       <div>The "moreText" prop will determine the text for the "more" indicator.</div>
-      <div>It's not editable as a prop in this example, because it's computed in order to include the number of hidden chips.</div>
+      <div>This example shows one way for including the number of hidden items in the "moreText" label.</div>
       <br>
       <div>This example shows the VcChip with custom content and the custom display of the tooltip content.</div>
       <br>
       <VcChipList :items="items"
                   :more-text="moreString"
                   @onHiddenChipsChange="(num) => this.hiddenNumber = num">
-      <template #chipLabel="{item}">
-        <span style="color:gray;margin-inline-end:4px;">{{item.label}} |</span>
-        <span>Custom content</span>
-      </template>
-      <template #tooltipSlot="{items}">
-        <div v-for="item in items">
-          <span style="font-weight:400;">{{item.label}} |</span>
-          <span style="font-weight:600;">Custom content</span>
-        </div>
-      </template>
+        <template #chipLabel="{item}">
+          <span style="color:gray;margin-inline-end:4px;">{{ item.label }} |</span>
+          <span>Custom content</span>
+        </template>
+        <template #tooltipSlot="{items}">
+          <div v-for="item in items">
+            <span style="font-weight:400;">{{ item.label }} |</span>
+            <span style="font-weight:600;">Custom content</span>
+          </div>
+        </template>
       </VcChipList>
       </div>
     `
@@ -93,7 +106,7 @@ const CustomTemplate = (args, {argTypes}) => ({
 export const CustomContent = CustomTemplate.bind({});
 
 CustomContent.args = {
-    items
+    ...baseProps,
 }
 
 export default {

package/src/components/VcIcon/VcIcon.stories.js

@@ -2,40 +2,63 @@ import VcIconCmp from './VcIcon';
 import icons from "../../../init/SvgIcons";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const baseProps = {
+    iconName: 'success',
+    color: 'black',
+    dataQa: 'VcIcon',
+    small: false,
+};
+
 const Template = (args, {argTypes}) => ({
     components: {VcIcon: VcIconCmp},
     props: Object.keys(argTypes),
-    template: '<div><VcIcon :color="color">{{`$${iconName}`}}</VcIcon></div>',
+    template: '<div><VcIcon :color="color" :data-qa="dataQa">{{`$${iconName}`}}</VcIcon></div>',
 })
 
 export const Playground = Template.bind({});
 
 // Set default values
 Playground.args = {
-    iconName: 'success',
-    color: 'black'
+    ...baseProps,
 }
 
 export const WithColor = Template.bind({});
 
 // Set default values
 WithColor.args = {
-    iconName: 'success',
+    ...baseProps,
     color: 'orange',
 }
 
+export const WithColorFromVar = Template.bind({});
+
+// Set default values
+WithColorFromVar.args = {
+    ...baseProps,
+    color: 'var(--gray-darken-2)',
+}
+
 const TemplateSmall = (args, {argTypes}) => ({
     components: {VcIcon: VcIconCmp},
     props: Object.keys(argTypes),
-    template: '<div><VcIcon :color="color" small>{{iconName}}</VcIcon></div>',
+    template: '<div><VcIcon :color="color" :small="small" :size="size" :data-qa="dataQa">{{iconName}}</VcIcon></div>',
 })
 
 export const Small = TemplateSmall.bind({});
 
 // Set default values
 Small.args = {
-    iconName: 'success',
-    color: 'black'
+    ...baseProps,
+    small: true,
+}
+
+export const SizeInPixels = TemplateSmall.bind({});
+
+// Set default values
+SizeInPixels.args = {
+    ...baseProps,
+    iconName: 'check_circle',
+    size: 30,
 }
 
 export default {

package/src/components/VcIcon/VcIcon.vue

@@ -5,13 +5,22 @@ export default {
     dataQa: {
       type: String,
       default: 'VcIcon'
-    }
+    },
+    color: {
+      type: String,
+      default: 'black',
+    },
   },
   render: function (createElement) {
     const props = {
       attrs: {...this.$attrs, 'data-qa': this.dataQa},
-      on: this.$listeners
+      on: this.$listeners,
+      style: {
+        fill: this.$props.color,
+        color: this.$props.color,
+      },
     };
+
     return createElement('v-icon', props, this.$slots.default);
   }
 }

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>