feat(callbox): add clickable behavior (#1196)

* feat(avatar): add clickable behavior * feat(callbox): add clickable behavior * refactor(avatar): dynamically change to button * refactor(callbox): remove dt-item-layout base * docs(avatar): clickable variant * test(avatar): clickable variant * move events to top element * fix a11ty * update border colors * update * test(callbox): add tests * docs(callbox): add documentation * avatar cleanup * add .stop to prevent bubbling * cleanup * remove attribute inheritance to prevent click event over the component * fix avatar class * rollback item-layout attribute inheritance
dialpad · Sep 20, 2023 · bf5ac2b · bf5ac2b
1 parent 4a41d02
commit bf5ac2b
Show file tree

Hide file tree

Showing 8 changed files with 290 additions and 146 deletions.
diff --git a/components/avatar/avatar.vue b/components/avatar/avatar.vue
@@ -5,7 +5,7 @@
     :class="avatarClasses"
     data-qa="dt-avatar"
     :aria-label="buttonAriaLabel"
-    @click="handleClick"
+    @click.stop="handleClick"
   >
     <div
       ref="canvas"

diff --git a/components/avatar/avatar_variants.story.vue b/components/avatar/avatar_variants.story.vue
@@ -79,20 +79,17 @@
           full-name="Person avatar"
           image-src="/common/assets/person.png"
           clickable
-          @click="onClick"
         />
         <dt-avatar
           :seed="seed"
           full-name="Person avatar"
           clickable
-          @click="onClick"
         />
         <dt-avatar
           :seed="seed"
           icon-name="user"
           aria-label="user icon avatar"
           clickable
-          @click="onClick"
         />
       </div>
     </div>

diff --git a/recipes/leftbar/callbox/callbox.mdx b/recipes/leftbar/callbox/callbox.mdx
@@ -117,3 +117,14 @@ import { DtRecipeCallbox } from '@dialpad/dialtone-vue';
   </template>
 </dt-recipe-callbox>
 ```
+
+### Clickable
+
+Callbox has a clickable behavior to enable clicking the `avatar` or the `title` if the properties are set.
+This will emit a `click` event that can be listen through `@click`
+
+```jsx
+<dt-recipe-callbox
+  clickable
+/>
+```
diff --git a/recipes/leftbar/callbox/callbox.stories.js b/recipes/leftbar/callbox/callbox.stories.js
@@ -2,18 +2,28 @@ import { createTemplateFromVueFile } from '@/common/storybook_utils';
 import DtRecipeCallbox from './callbox.vue';
 import DtRecipeCallboxDefaultTemplate from './callbox_default.story.vue';
 import DtRecipeCallboxVariantsTemplate from './callbox_variants.story.vue';
+import { action } from '@storybook/addon-actions';
 
-export const argTypesData = {};
+export const argTypesData = {
+  // Action Event Handlers
+  onClick: {
+    table: {
+      disable: true,
+    },
+  },
+};
 
 const decorator = () => ({
   template: `<div style="background-color: var(--dt-theme-sidebar-color-background)" class="d-wmx264 d-p8"><story />
   </div>`,
 });
 
 export const argsData = {
+  onClick: action('click'),
   title: 'Title',
   avatarFullName: 'Title',
   borderColor: 'ai',
+  clickable: true,
 };
 
 export default {

diff --git a/recipes/leftbar/callbox/callbox.test.js b/recipes/leftbar/callbox/callbox.test.js
@@ -2,6 +2,7 @@ import { createLocalVue, mount } from '@vue/test-utils';
 import DtRecipeCallbox from './callbox.vue';
 import { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from '@/recipes/leftbar/callbox/callbox_constants.js';
 
+const MOCK_CALLBOX_STUB = vi.fn();
 const MOCK_AVATAR_IMAGE_SOURCE = 'image.png';
 const MOCK_AVATAR_FULL_NAME = 'Jaqueline Nackos';
 const MOCK_AVATAR_INITIALS = 'J';
@@ -21,9 +22,11 @@ const baseProps = {
   borderColor: MOCK_BORDER_COLOR,
   title: MOCK_TITLE,
 };
+const baseListeners = {};
 const baseSlots = {};
 
 let mockProps = {};
+let mockListeners = {};
 let mockSlots = {};
 const testContext = {};
 
@@ -43,6 +46,7 @@ describe('DtRecipeCallbox Tests', () => {
   const updateWrapper = () => {
     wrapper = mount(DtRecipeCallbox, {
       propsData: { ...baseProps, ...mockProps },
+      listeners: { ...baseListeners, ...mockListeners },
       slots: { ...baseSlots, ...mockSlots },
       localVue: testContext.localVue,
     });
@@ -69,7 +73,9 @@ describe('DtRecipeCallbox Tests', () => {
 
   afterEach(() => {
     mockProps = {};
+    mockListeners = {};
     mockSlots = {};
+    vi.resetAllMocks();
   });
 
   describe('Presentation Tests', () => {
@@ -191,6 +197,93 @@ describe('DtRecipeCallbox Tests', () => {
     });
   });
 
+  describe('Interactivity Tests', () => {
+    describe('When clickable is false (default)', () => {
+      describe('When avatar is clicked', () => {
+        beforeEach(async () => {
+          mockProps = {
+            avatarSrc: MOCK_AVATAR_IMAGE_SOURCE,
+            avatarFullName: MOCK_AVATAR_FULL_NAME,
+          };
+          mockListeners = { click: MOCK_CALLBOX_STUB };
+
+          updateWrapper();
+
+          await avatar.trigger('click');
+        });
+
+        it('Should not call listener', async () => {
+          expect(MOCK_CALLBOX_STUB).toHaveBeenCalledTimes(0);
+        });
+
+        it('Should not emit click event', () => {
+          expect(wrapper.emitted()).not.toHaveProperty('click');
+        });
+      });
+
+      describe('When title is clicked', () => {
+        beforeEach(async () => {
+          mockListeners = { click: MOCK_CALLBOX_STUB };
+
+          updateWrapper();
+
+          await title.trigger('click');
+        });
+
+        it('Should not call listener', async () => {
+          expect(MOCK_CALLBOX_STUB).toHaveBeenCalledTimes(0);
+        });
+
+        it('Should not emit click event', () => {
+          expect(wrapper.emitted()).not.toHaveProperty('click');
+        });
+      });
+    });
+    describe('When clickable is true', () => {
+      describe('When avatar is clicked', () => {
+        beforeEach(async () => {
+          mockProps = {
+            avatarSrc: MOCK_AVATAR_IMAGE_SOURCE,
+            avatarFullName: MOCK_AVATAR_FULL_NAME,
+            clickable: true,
+          };
+          mockListeners = { click: MOCK_CALLBOX_STUB };
+
+          updateWrapper();
+
+          await avatar.trigger('click');
+        });
+
+        it('Should call listener', async () => {
+          expect(MOCK_CALLBOX_STUB).toBeCalledTimes(1);
+        });
+
+        it('Should emit click event', () => {
+          expect(wrapper.emitted()).toHaveProperty('click');
+        });
+      });
+
+      describe('When title is clicked', () => {
+        beforeEach(async () => {
+          mockProps = { clickable: true };
+          mockListeners = { click: MOCK_CALLBOX_STUB };
+
+          updateWrapper();
+
+          await title.trigger('click');
+        });
+
+        it('Should call listener', async () => {
+          expect(MOCK_CALLBOX_STUB).toBeCalledTimes(1);
+        });
+
+        it('Should emit click event', () => {
+          expect(wrapper.emitted()).toHaveProperty('click');
+        });
+      });
+    });
+  });
+
   describe('Validation Tests', () => {
     describe('Badge color validation', () => {
       describe('When badgeColor is not provided', () => {