@vcita/design-system 1.18.1 → 1.18.2

package/package.json

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

package/src/components/VcAvatarStack/VcAvatarStack.spec.js

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import VcAvatarStack from './VcAvatarStack.vue';
 import Vuetify from 'vuetify';
-import { render } from '@testing-library/vue';
+import { render, waitFor } from '@testing-library/vue';
 import init from '../../../testing-library.config';
 
 init();
@@ -55,6 +55,7 @@ describe('VcAvatarStack.vue', () => {
       },
       ...additionalRefs,
     },
+    handleMoreIndicator: jest.fn(),
   });
 
   it('mounts with standard content', async () => {
@@ -180,15 +181,17 @@ describe('VcAvatarStack.vue', () => {
       1: [{ $el: { offsetTop: 0, offsetHeight: 40 } }],
       2: [{ $el: { offsetTop: 40, offsetHeight: 40 } }], // Overflowing avatar
     });
-
+    params.avatarOverflows = jest.fn().mockImplementation((el) => {
+      return el.offsetTop === 40;
+    });
     await VcAvatarStack.methods.processAvatars.apply(params);
     // eslint-disable-next-line no-undef
     await new Promise((resolve) => setTimeout(resolve, 100));
 
     // Assertions
-    expect(params.visibleAvatars.length).toBe(1);
-    expect(params.hiddenAvatars.length).toBe(2);
-    expect(params.hiddenAvatars[0]).toEqual(avatarsMock[1]);
+    expect(params.visibleAvatars.length).toBe(2);
+    expect(params.hiddenAvatars.length).toBe(1);
+    expect(params.hiddenAvatars[0]).toEqual(avatarsMock[2]);
   });
 
   it('passes showBorder prop to VcAvatar components', () => {
@@ -220,7 +223,7 @@ describe('VcAvatarStack.vue', () => {
   it('sets processingDone to true after processing avatars', async () => {
     const spyEmit = jest.fn();
     const params = mockParams(spyEmit);
-
+    params.avatarOverflows = jest.fn();
     await VcAvatarStack.methods.processAvatars.apply(params);
 
     expect(params.processingDone).toBe(true);
@@ -240,4 +243,120 @@ describe('VcAvatarStack.vue', () => {
     expect(getByText('A2')).toBeInTheDocument();
   });
 
+  it('moves an avatar from visibleAvatars to hiddenAvatars when more indicator is below avatar list', async () => {
+    const params = {
+      hiddenAvatars: [avatarsMock[2]],
+      visibleAvatars: [avatarsMock[0], avatarsMock[1]],
+      $refs: {
+        'more-indicator': {
+          $el: { offsetTop: 150, offsetHeight: 50 },
+        },
+        'avatar-list': { offsetTop: 0, },
+      },
+      $nextTick: jest.fn().mockResolvedValue(null),
+    };
+    await VcAvatarStack.methods.handleMoreIndicator.apply(params, [params.$refs['avatar-list']]);
+    // eslint-disable-next-line no-undef
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // Assertions
+    expect(params.visibleAvatars.length).toBe(1);
+    expect(params.hiddenAvatars.length).toBe(2);
+    expect(params.hiddenAvatars[0]).toEqual(avatarsMock[1]);
+    expect(params.hiddenAvatars[1]).toEqual(avatarsMock[2]);
+  });
+
+  it('handles maxVisibleAvatars correctly', async () => {
+    const { queryAllByTestId } = renderWithVuetify(VcAvatarStack, {
+      props: { ...props, maxVisibleAvatars: 2 },
+      data() {
+        return {
+          visibleAvatars: [],
+          hiddenAvatars: [],
+        };
+      },
+    });
+    await waitFor(async () => {
+      // We have 3 avatars but the maxVisibleAvatars is 2.
+      const visibleAvatars = queryAllByTestId(/vc-avatar-item-/);
+      expect(visibleAvatars.length).toBe(1);  // Should show only 2 avatars
+    });
+  });
+
+  it('processes avatars correctly when maxVisibleAvatars is null', async () => {
+    const { queryAllByTestId } = renderWithVuetify(VcAvatarStack, {
+      props: { ...props, maxVisibleAvatars: null },
+      data() {
+        return {
+          visibleAvatars: [],
+          hiddenAvatars: [],
+        };
+      },
+    });
+
+    // Check the avatars processed
+    await VcAvatarStack.methods.processAvatars.apply({
+      visibleAvatars: [],
+      hiddenAvatars: [],
+      avatars: avatarsMock,
+      $nextTick: jest.fn().mockResolvedValue(null),
+      $refs: {
+        'avatar-list': { offsetTop: 0, offsetHeight: 200 },
+      },
+      avatarOverflows: jest.fn(),
+      handleMoreIndicator: jest.fn(),
+    });
+
+    const visibleAvatars = queryAllByTestId(/vc-avatar-item-/);
+    expect(visibleAvatars.length).toBe(3);  // No limit on maxVisibleAvatars
+  });
+
+  it('processes avatars correctly when some avatars overflow', async () => {
+    const params = {
+      visibleAvatars: [],
+      hiddenAvatars: [],
+      avatars: avatarsMock,
+      $nextTick: jest.fn().mockResolvedValue(null),
+      $refs: {
+        'avatar-list': { offsetTop: 0, offsetHeight: 200 },
+        // Mocking the refs for each avatar
+        0: [{ $el: { offsetTop: 0, offsetHeight: 40 } }],  // First avatar
+        1: [{ $el: { offsetTop: 80, offsetHeight: 40 } }], // Second avatar
+        2: [{ $el: { offsetTop: 80, offsetHeight: 40 } }], // Third avatar, which will overflow
+      },
+      handleMoreIndicator: jest.fn(),
+    };
+
+    params.avatarOverflows = jest.fn().mockImplementation((el) => {
+      return el.offsetTop >= 80;  // Simulating overflow condition for the 3rd avatar
+    });
+
+    await VcAvatarStack.methods.processAvatars.apply(params);
+
+    expect(params.hiddenAvatars.length).toBe(2);  // The 2nd and 3rd avatars should be hidden
+    expect(params.hiddenAvatars[0]).toEqual(avatarsMock[1]);  // Check the correct avatar is hidden
+    expect(params.hiddenAvatars[1]).toEqual(avatarsMock[2]);  // Check the correct avatar is hidden
+  });
+
+  it('moves a visible avatar to hiddenAvatars when more indicator is not overflowing', async () => {
+    const params = {
+      hiddenAvatars: [avatarsMock[2]],
+      visibleAvatars: [avatarsMock[0], avatarsMock[1]],
+      $refs: {
+        'more-indicator': {
+          $el: { offsetTop: 0, offsetHeight: 50 },
+        },
+        'avatar-list': { offsetTop: 0, },
+      },
+      $nextTick: jest.fn().mockResolvedValue(null),
+    };
+    await VcAvatarStack.methods.handleMoreIndicator.apply(params, [params.$refs['avatar-list']]);
+    // eslint-disable-next-line no-undef
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // Assertions
+    expect(params.visibleAvatars.length).toBe(2);
+    expect(params.hiddenAvatars.length).toBe(1);
+    expect(params.hiddenAvatars[0]).toEqual(avatarsMock[2]);
+  });
 });

package/src/components/VcAvatarStack/VcAvatarStack.stories.js

@@ -3,15 +3,15 @@ import VcBaseDocs from '@/stories/VcBaseDocs.mdx';
 
 const avatar1 = {
   colorId: 1,
-  name: 'First Avatar',
+  name: 'John Smith 0',
   path: require('@/stories/assets/pics/avatar1.png'),
 }
 const avatars = [avatar1];
 
-for (let i = 0; i < 24; i++) {
-  avatars.push({ name: 'John Smith', colorId: i + 1 });
+for (let i = 1; i < 24; i++) {
+  avatars.push({ name: 'John Smith ' + i, colorId: i + 1 });
 }
-avatars.push({ name: 'Last Avatar', colorId: avatars[avatars.length-1].colorId + 1 });
+avatars.push({ name: 'John Smith ' + avatars.length, colorId: avatars[avatars.length-1].colorId + 1 });
 
 const baseProps = {
   avatars,

package/src/components/VcAvatarStack/VcAvatarStack.vue

@@ -5,17 +5,16 @@
     :data-qa="dataQa"
     :class="{'VcChipList--loaded': processingDone}"
   >
-    <v-tooltip v-for="(avatar, i) in visibleAvatars"
-               :key="i"
-               :bottom="!tooltipTop"
-               :top="tooltipTop"
+    <div v-for="(avatar, i) in visibleAvatars"
+         :key="i"
+         class="avatar-item-wrapper"
     >
-      <template v-slot:activator="{ on, attrs }">
-        <span
+      <v-tooltip :bottom="!tooltipTop" :top="tooltipTop">
+        <template v-slot:activator="{ on, attrs }">
+          <span
           v-show="visibleAvatars.length"
           v-bind="attrs"
           v-on="on"
-          class="avatar-item-wrapper"
         >
           <VcAvatar
             :image-path="avatar.path"
@@ -28,9 +27,11 @@
             :ref="i"
           />
         </span>
-      </template>
-      {{ avatar.name || avatar.text }}
-    </v-tooltip>
+        </template>
+        {{ avatar.name || avatar.text }}
+      </v-tooltip>
+    </div>
+
 
     <v-tooltip
       :bottom="!tooltipTop"
@@ -44,7 +45,7 @@
           v-bind="attrs"
           v-on="on"
           data-qa="more-indicator"
-          class="avatar-item-wrapper"
+          :class="{'avatar-item-wrapper':visibleAvatars.length}"
           :data-text="'+' + hiddenAvatars.length"
         >
           <VcAvatar
@@ -70,7 +71,7 @@
 
 <script>
 import debounce from "just-debounce";
-import VcAvatar from "@/components/VcAvatar/VcAvatar.vue";
+import VcAvatar from "../VcAvatar/VcAvatar.vue";
 
 export default {
   name: "VcAvatarStack",
@@ -113,21 +114,27 @@ export default {
     this.processAvatars();
   },
   methods: {
+    handleMaxAvatars() {
+      const totalAvatars = this.avatars.length;
+      let visibleCount = Math.min(this.maxVisibleAvatars, totalAvatars);
+      if (totalAvatars > this.maxVisibleAvatars) visibleCount -= 1;
+      this.visibleAvatars = this.avatars.slice(0, visibleCount);
+      this.hiddenAvatars = totalAvatars > visibleCount ? this.avatars.slice(visibleCount) : [];
+    },
     async processAvatars() {
       this.processingDone = false;
       await this.$nextTick(); // wait for avatar list height to render
 
+      if (this.maxVisibleAvatars) {
+        this.handleMaxAvatars();
+        return;
+      }
       const avatars = this.avatars;
       this.visibleAvatars = [];
       this.hiddenAvatars = [];
       const avatarListEl = this.$refs["avatar-list"];
       if (!avatarListEl) return;
 
-      let avatarListTopHeight =
-        avatarListEl.offsetTop + avatarListEl.offsetHeight;
-      const moreIndicatorEl = this.$refs["more-indicator"].$el
-        ? this.$refs["more-indicator"].$el
-        : this.$refs["more-indicator"];
       let overflowReached = false;
       for (let i in avatars) {
         if (overflowReached) {
@@ -139,30 +146,31 @@ export default {
         await this.$nextTick(); // wait for avatar to render
 
         const avatarEl = this.$refs[i] && this.$refs[i][0]?.$el;
-        if (
-          !avatarEl ||
-          avatarEl.offsetTop >= avatarListTopHeight ||
-          this.maxVisibleAvatars === this.visibleAvatars.length - 1
-        ) {
+        if (this.avatarOverflows(avatarEl, avatarListEl)) {
           this.hiddenAvatars.push(this.visibleAvatars.pop());
           overflowReached = true;
         }
       }
 
-      if (this.hiddenAvatars.length) {
-        await this.$nextTick(); // wait for more indicator to render
+      await this.handleMoreIndicator(avatarListEl);
 
-        // if the 'more' indicator is overflowed, hide the last visible avatar and show it in the tooltip
-        if (
-          moreIndicatorEl.offsetTop + moreIndicatorEl.offsetHeight >=
-          avatarListTopHeight
-        ) {
-          this.hiddenAvatars.unshift(this.visibleAvatars.pop());
-          await this.$nextTick();
-        }
-      }
       this.processingDone = true;
     },
+    avatarOverflows(avatarEl, avatarListEl) {
+      return (
+        !avatarEl
+        || avatarEl.offsetTop > avatarListEl.offsetTop
+      );
+    },
+    async handleMoreIndicator(avatarListEl) {
+      if(!this.hiddenAvatars.length) return;
+      await this.$nextTick(); // wait for more indicator to render
+      // if the 'more' indicator is overflowed, hide the last visible avatar and show it in the tooltip
+      const moreIndicatorEl = this.$refs['more-indicator']?.$el || this.$refs['more-indicator'];
+      if (moreIndicatorEl?.offsetTop > avatarListEl.offsetTop) {
+        this.hiddenAvatars.unshift(this.visibleAvatars.pop());
+      }
+    },
   },
   watch: {
     avatars: {
@@ -197,7 +205,7 @@ export default {
   }
 }
 .avatar-item-wrapper {
-  + .avatar-item-wrapper {
+  ~ .avatar-item-wrapper {
     margin-inline-start: -8px;
   }
 }