@vcita/design-system 1.11.15 → 1.11.17

package/package.json

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

package/src/components/VcMenuItem/VcMenuItem.vue

@@ -45,7 +45,7 @@
       <v-expansion-panel-content eager v-for="(item, index) in submenuItems"
                                  :class="`${isSelected && selectedSubitem === index ? 'selected' : ''} ${flavor}`">
         <VcLayout
-            :class="`VcMenuItem-subitem VcMenuItem-userSelectNone ps-9 ${size} ${flavor}`"
+            :class="`VcMenuItem-subitem VcMenuItem-userSelectNone ps-6 ${size} ${flavor}`"
             :data-qa="`${dataQa}-subitem-${item.name}`"
             align-center
             @click="$emit('onSubmenuClicked', item, index)">
@@ -193,13 +193,16 @@ export default {
 
 .VcMenuItem-complex {
   padding-inline-start: var(--size-value5);
-  border-inline-start: 3px solid transparent;
 
   &.desktop {
     padding-inline-start: 17px;
   }
 }
 
+.v-expansion-panels:not(.v-expansion-panels--accordion):not(.v-expansion-panels--tile) > .v-expansion-panel--active {
+  border-radius: 0;
+}
+
 .desktop {
   ::v-deep {
     .v-expansion-panel-header:hover {
@@ -284,6 +287,8 @@ export default {
   &.desktop {
     height: var(--size-value6);
     color: var(--v-text-base);
+    margin: -8px 0px;
+    padding: var(--size-value5) var(--size-value12);
 
     &:hover {
       cursor: pointer;

package/src/components/VcSearchLayout/VcSearchLayout.spec.js

@@ -75,7 +75,7 @@ const baseProps = {
     label: 'Search with results',
     value: false,
     itemGroups: itemGroupsInput,
-    isLoading: false,
+    isSearching: false,
     emptyStateTitle: undefined,
     emptyStateSubtitle: undefined,
     emptyStateImage: require('@/stories/assets/rabbit.svg'),
@@ -193,7 +193,7 @@ describe("VcSearchLayout.vue", () => {
             props: {
                 ...baseProps,
                 value: true,
-                isLoading: true,
+                isSearching: true,
             },
         });
 

package/src/components/VcSearchLayout/VcSearchLayout.stories.js

@@ -64,7 +64,7 @@ const itemGroupsInput = [
 
 const baseProps = {
     label: 'Search with results',
-    isLoading: false,
+    isSearching: false,
     emptyStateTitle: undefined,
     emptyStateSubtitle: undefined,
     emptyStateImage: require('@/stories/assets/rabbit.svg'),
@@ -85,7 +85,7 @@ const Template = (args, {argTypes}) => ({
                         :label="label"
                         :dataQa="dataQa"
                         :itemGroups="itemGroups"
-                        :is-loading="isLoading"
+                        :is-searching="isSearching"
                         :empty-state-title="emptyStateTitle"
                         :empty-state-subtitle="emptyStateSubtitle"
                         :empty-state-image="emptyStateImage"
@@ -121,7 +121,7 @@ export const Loading = Template.bind({});
 // Set default values
 Loading.args = {
     ...baseProps,
-    isLoading: true,
+    isSearching: true,
     value: true,
     itemGroups: undefined,
 }

package/src/components/VcSearchLayout/VcSearchLayout.vue

@@ -6,8 +6,8 @@
       <VcSearchBar size="small" v-bind="$attrs" :data-qa="`${dataQa}-searchBar`" @search="onSearch"/>
     </template>
     <VcLayout class="searchResults" flex-wrap
-              :class="{loadingState: isLoading, emptyState: !$attrs.itemGroups || $attrs.itemGroups.length === 0}">
-      <VcLoader v-if="isLoading"/>
+              :class="{loadingState: isSearching, emptyState: !$attrs.itemGroups || $attrs.itemGroups.length === 0}">
+      <VcLoader v-if="isSearching"/>
       <VcGroupedItems :item-groups="itemGroupsBolded" v-else-if="$attrs.itemGroups && $attrs.itemGroups.length > 0"
                       showDividers group-class="searchLayoutGroup" item-class="searchLayoutItem"
                       :data-qa="`${dataQa}-groupedItems`"
@@ -36,7 +36,7 @@
     <template #footer>
       <VcLayout column @click="$emit('onSeeAllClicked')">
         <v-divider></v-divider>
-        <VcLayout v-if="!isLoading && $attrs.itemGroups && $attrs.itemGroups.length > 0" justify-center flex-wrap
+        <VcLayout v-if="!isSearching && $attrs.itemGroups && $attrs.itemGroups.length > 0" justify-center flex-wrap
                   align-center
                   class="viewAll">
           <VcIcon small color="var(--blue)">$magnify_glass</VcIcon>
@@ -68,7 +68,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    isLoading: {
+    isSearching: {
       type: Boolean,
       default: false,
     },

package/src/components/VcSkeleton/VcSkeleton.stories.js

@@ -4,14 +4,17 @@ import VcBaseDocs from '@/stories/VcBaseDocs.mdx';
 const baseProps = {
     type: 'list-item',
     width: '100%',
+    height: '100%',
     dataQa: 'VcSkeleton',
 }
 
 const Template = (args, {argTypes}) => ({
     components: {VcSkeleton: VcSkeletonCmp},
     props: Object.keys(argTypes),
-    template: `<div> for options see <a ref="https://vuetifyjs.com/en/components/skeleton-loaders">Vuetify skeleton loaders</a>
-      <VcSkeleton :type="type" :width="width" :data-qa="dataQa"/></div>
+    template: `
+      <div> for options see <a ref="https://vuetifyjs.com/en/components/skeleton-loaders">Vuetify skeleton loaders</a>
+        <VcSkeleton :type="type" :width="width" :height="height" :data-qa="dataQa"/>
+      </div>
     `,
 })
 
@@ -26,9 +29,43 @@ export default {
     title: 'content display / VcSkeleton', // This will control the story sidebar position
     id: 'VcSkeleton', // This will be the permanent link to this component
     component: VcSkeletonCmp,
+    argTypes: {
+        type: {
+            options: ['button',
+                'chip',
+                'avatar',
+                'divider',
+                'heading',
+                'image',
+                'text',
+                'sentences',
+                'paragraph',
+                'actions',
+                'article',
+                'card',
+                'card-avatar',
+                'date-picker',
+                'date-picker-options',
+                'date-picker-days',
+                'list-item',
+                'list-item-avatar',
+                'list-item-two-line',
+                'list-item-avatar-two-line',
+                'list-item-three-line',
+                'list-item-avatar-three-line',
+                'table',
+                'table-heading',
+                'table-thead',
+                'table-tbody',
+                'table-row-divider',
+                'table-row',
+                'table-tfoot'],
+            control: {type: 'radio'}
+        },
+    },
     parameters: {
         status: {
-            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            type: 'beta', // 'beta'  'stable'  'deprecated'  'releaseCandidate'
             url: 'https://vuetifyjs.com/en/components/skeleton-loaders', // will make the tag a link
         },
         docs: {

package/src/components/VcWideTopMenuBar/VcWideTopMenuBar.spec.js

@@ -185,4 +185,30 @@ describe("VcWideTopMenuBar.vue", () => {
         await VcWideTopMenuBar.methods.onAccountMenuClick.apply(params);
         expect(params.isAccountMenuOpen).toBeFalsy();
     });
+
+    it("should contain the 'customMenuItems' slot", async () => {
+        const innerElementText = 'Custom Menu Items';
+        const { getByText }= renderWithVuetify(VcWideTopMenuBar, {
+            props: {
+                ...baseProps,
+            },
+            slots: {
+                customMenuItems: `<div>${innerElementText}</div>`
+            },
+        });
+
+        expect(getByText(innerElementText)).toBeInTheDocument();
+    });
+
+    it("has loading state", async () => {
+        const { getAllByTestId }= renderWithVuetify(VcWideTopMenuBar, {
+            props: {
+                ...baseProps,
+                isLoading: true,
+            },
+        });
+
+        // test loading state
+        expect(getAllByTestId('VcSkeleton')).toHaveLength(6);
+    });
 });

package/src/components/VcWideTopMenuBar/VcWideTopMenuBar.stories.js

@@ -1,5 +1,6 @@
 import VcWideTopMenuBarCmp from './VcWideTopMenuBar';
 import VcBaseDocs from '@/stories/VcBaseDocs.mdx'
+import VcButton from "@/components/VcButton/VcButton.vue";
 
 const baseProps = {
     name: "John Smith",
@@ -39,10 +40,12 @@ const baseProps = {
     showBackButton: true,
     isNotificationsDialogOpen:false,
     notificationsPane: '',
+    isLoading: false,
+    isSearching: false,
 };
 
 const Template = (args, {argTypes}) => ({
-    components: {VcWideTopMenuBar: VcWideTopMenuBarCmp},
+    components: {VcWideTopMenuBar: VcWideTopMenuBarCmp, VcButton},
     props: Object.keys(argTypes),
     template: `
       <div>
@@ -61,6 +64,8 @@ const Template = (args, {argTypes}) => ({
                           :show-back-button="showBackButton"
                           :back-button-label="backButtonLabel"
                           :is-notifications-dialog-open="isNotificationsDialogOpen"
+                          :is-loading="isLoading"
+                          :is-searching="isSearching"
                           @onAccountButtonClicked="onAccountButtonClicked"
                           @onAccountMenuChange="onAccountMenuChange"
                           @onAccountMenuClick="onAccountMenuClick"
@@ -71,6 +76,9 @@ const Template = (args, {argTypes}) => ({
                           @onNotificationsDropdownToggle="onNotificationsDropdownToggle"
                           @onSearch="onSearch"
                           @onBackButtonClicked="onBackButtonClicked">
+          <template v-if="${Boolean(args.customMenuItems)}" #customMenuItems>
+            ${args.customMenuItems}
+          </template>
           <template #notificationsPane>
             ${args.notificationsPane}
           </template>
@@ -108,7 +116,16 @@ WithNotificationsBadgeSlotContent.args = {
                         </div>`
 }
 
+export const WithCustomMenuItemsSlotContent = Template.bind({});
+WithCustomMenuItemsSlotContent.args = {
+    ...baseProps,
+    customMenuItems: `<VcButton ghost flavor="secondary">
+                        Custom template
+                      </VcButton>`
+}
+
 export default {
+    components: {VcButton},
     title: 'desktop layout / VcWideTopMenuBar', // This will control the story sidebar position
     id: 'VcWideTopMenuBar', // This will be the permanent link to this component
     component: VcWideTopMenuBarCmp,

package/src/components/VcWideTopMenuBar/VcWideTopMenuBar.vue

@@ -2,18 +2,26 @@
   <VcLayout class="VcWideTopMenuBar" ref="compRoot" :data-qa="dataQa">
     <VcLayout class="topBarSection leftSection" justify-end>
       <VcLayout v-if="showBackButton" class="backButtonSection">
-        <div @click="$emit('onBackButtonClicked')" :data-qa="`${dataQa}-backButton`">
-          <VcIcon color="var(--gray-darken-3)" size="12">{{ $vuetify.rtl ? '$chevron_right' : '$chevron_left' }}</VcIcon>
+        <div v-if="!isLoading" @click="$emit('onBackButtonClicked')" :data-qa="`${dataQa}-backButton`">
+          <VcIcon color="var(--gray-darken-3)" size="var(--font-size-small2)">{{ $vuetify.rtl ? '$chevron_right' : '$chevron_left' }}</VcIcon>
           <span class="backButtonLabel"> {{ backButtonLabel }} </span>
         </div>
       </VcLayout>
 
       <VcLayout class="topBarSection searchSection">
-        <VcSearchLayout v-bind="$attrs" v-on="$listeners" :data-qa="dataQa"/>
+        <VcSkeleton v-if="isLoading" type="avatar"></VcSkeleton>
+        <VcSkeleton v-if="isLoading" type="list-item" width="100%"/>
+        <VcSearchLayout v-else v-bind="$attrs" v-on="$listeners" :data-qa="dataQa"/>
       </VcLayout>
     </VcLayout>
     <VcLayout class="topBarSection rightSection" flex-wrap justify-end>
-      <VcDropdown v-model:value="isNotificationsDialogOpen"
+      <template>
+        <VcSkeleton v-if="isLoading && $slots.customMenuItems" type="avatar"></VcSkeleton>
+        <!--   Slot for custom addition of items in top-bar   -->
+        <slot v-else name="customMenuItems"/>
+      </template>
+      <VcSkeleton v-if="isLoading" type="avatar"></VcSkeleton>
+      <VcDropdown v-else v-model:value="isNotificationsDialogOpen"
                   :max-height="700"
                   :data-qa="`${dataQa}-notificationsPaneDropdown`"
                   @input="data => $emit('onNotificationsDropdownToggle', data)">
@@ -29,7 +37,9 @@
         </template>
         <slot name="notificationsPane"/>
       </VcDropdown>
-      <VcDropdown :data-qa="`${dataQa}-helpMenu`">
+      <VcSkeleton v-if="isLoading" type="avatar"></VcSkeleton>
+      <VcSkeleton v-if="isLoading && width > 1200" type="list-item" width="32"/>
+      <VcDropdown v-else-if="!isLoading" :data-qa="`${dataQa}-helpMenu`">
         <template #activator="{ on, attrs }">
           <VcButton class="helpButton specialButtonHeight" flavor="secondary" ghost :data-qa="`${dataQa}-help`"
                     @click="$emit('onHelpButtonClicked')" v-bind='attrs' v-on='on'>
@@ -50,7 +60,9 @@
           </template>
         </VcList>
       </VcDropdown>
-      <VcButton v-if="upgradeButtonLabel" outlined small class="upgradeButton specialButtonHeight" :data-qa="`${dataQa}-upgrade`"
+      <VcSkeleton v-if="isLoading" type="avatar"></VcSkeleton>
+      <VcSkeleton v-if="isLoading && width > 784" type="list-item" width="59"/>
+      <VcButton v-else-if="!isLoading && upgradeButtonLabel" outlined small class="upgradeButton specialButtonHeight" :data-qa="`${dataQa}-upgrade`"
                 @click="$emit('onUpgradeButtonClicked')">
         <template #prepend>
           <VcIcon color="var(--v-secondary-base)">$upgrade</VcIcon>
@@ -63,7 +75,8 @@
                      @click="onAccountMenuClick"
                      :data-qa="`${dataQa}-accountMenu`">
         <template #activator="{ on, attrs }">
-          <VcButton flavor="secondary" ghost class="accountMenuButton specialButtonHeight" :data-qa="`${dataQa}-account`"
+          <VcSkeleton v-if="isLoading" :type="width > 1040 ? 'list-item' : 'avatar'" width="59"/>
+          <VcButton v-else flavor="secondary" ghost class="accountMenuButton specialButtonHeight" :data-qa="`${dataQa}-account`"
                     @click="onAccountButtonClicked">
             <template #prepend>
               <VcAvatar :name="name" :color-id="colorId" :image-path="imagePath" size="x-sm" :data-qa="`${dataQa}-accountAvatar`"/>
@@ -91,10 +104,12 @@ import VcBadge from "@/components/VcBadge/VcBadge.vue";
 import VcSearchLayout from "@/components/VcSearchLayout/VcSearchLayout.vue";
 import VcDropdown from "@/components/VcMenu/VcDropdown.vue";
 import VcList from "@/components/list/VcList/VcList.vue";
+import VcSkeleton from "@/components/VcSkeleton/VcSkeleton.vue";
 
 export default {
   name: 'VcWideTopMenuBar',
   components: {
+    VcSkeleton,
     VcList,
     VcDropdown, VcSearchLayout, VcIcon, VcLayout, VcAvatar, VcAccountMenu, VcButton, VcBadge
   },
@@ -155,6 +170,20 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * Indicates if the component is in loading state, which will display skeleton loaders
+     */
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * This prop is passed down to VcSearchLayout
+     */
+    isSearching: {
+      type: Boolean,
+      default: false,
+    },
     dataQa: {
       type: String,
       default: 'VcWideTopMenuBar'
@@ -211,6 +240,7 @@ export default {
 .searchSection {
   flex-basis: 50%;
   flex-grow: 0;
+  gap: var(--size-value2);
 }
 
 .rightSection {

package/styles/vuetify-variables.scss

@@ -46,3 +46,9 @@ $color-picker-border-radius: 4px;
 // VcMenuItem - skeleton
 $skeleton-loader-text-border-radius: 4px;
 $skeleton-loader-item-padding: 0;
+
+// Skeleton
+$skeleton-loader-button-border-radius: 8px;
+$skeleton-loader-list-item-height: 15px;
+$skeleton-loader-avatar-height: 15px;
+$skeleton-loader-avatar-width: 15px;