From 6ef90db28f3c5164c4c9c9657b039a74a9b6daf5 Mon Sep 17 00:00:00 2001
From: Nina <ninamrepetto@gmail.com>
Date: Fri, 23 Aug 2024 14:44:46 -0300
Subject: [PATCH] feat(avatar): DLT-1916 remove dt-icon (#466)

---
 .../components/avatar/avatar.test.js          | 12 ++--
 .../components/avatar/avatar.vue              | 70 +++++++++----------
 .../avatar/avatar_variants.story.vue          | 30 +++++---
 .../feed_item_row/feed_item_row.vue           | 18 +++--
 .../contact_info/contact_info.stories.js      | 13 ++--
 .../item_layout/contact_info/contact_info.vue | 35 ++++++++--
 .../contact_info_variants.story.vue           | 15 ++--
 .../recipes/leftbar/callbox/callbox.vue       | 13 +++-
 .../leftbar/contact_row/contact_row.vue       | 19 +++--
 .../contact_row_variants.story.vue            | 13 ++++
 10 files changed, 152 insertions(+), 86 deletions(-)

diff --git a/packages/dialtone-vue3/components/avatar/avatar.test.js b/packages/dialtone-vue3/components/avatar/avatar.test.js
index 920654f906..c904919a33 100644
--- a/packages/dialtone-vue3/components/avatar/avatar.test.js
+++ b/packages/dialtone-vue3/components/avatar/avatar.test.js
@@ -9,6 +9,7 @@ const MOCK_INITIALS = 'JN';
 const MOCK_SIZE = 'lg';
 const MOCK_GROUP = 25;
 const MOCK_CUSTOM_CLASS = 'my-custom-class';
+const MOCK_ICON_SLOT = '<template #icon=>Icon</template>';
 let MOCK_ELEMENT = null;
 
 const baseProps = {
@@ -19,6 +20,7 @@ const baseAttrs = {};
 
 let mockProps = {};
 let mockAttrs = {};
+let mockSlots = {};
 
 describe('DtAvatar Tests', () => {
   let wrapper;
@@ -30,6 +32,7 @@ describe('DtAvatar Tests', () => {
     wrapper = mount(DtAvatar, {
       props: { ...baseProps, ...mockProps },
       attrs: { ...baseAttrs, ...mockAttrs },
+      slots: { ...mockSlots },
     });
 
     image = wrapper.find('[data-qa="dt-avatar-image"]');
@@ -43,6 +46,7 @@ describe('DtAvatar Tests', () => {
 
   afterEach(() => {
     mockProps = {};
+    mockSlots = {};
   });
 
   describe('Presentation Tests', () => {
@@ -76,19 +80,19 @@ describe('DtAvatar Tests', () => {
       });
     });
 
-    describe('When the iconName is provided', () => {
+    describe('When the icon slot is provided', () => {
       beforeEach(() => {
-        mockProps = { iconName: 'accessibility' };
+        mockSlots = { icon: MOCK_ICON_SLOT };
 
         updateWrapper();
       });
 
       it('icon should exist', () => {
-        expect(wrapper.find('svg').exists()).toBeTruthy();
+        expect(wrapper.find('[data-qa="dt-avatar-icon"]').exists()).toBeTruthy();
       });
 
       it('should have correct class', () => {
-        expect(wrapper.find('svg').classes(AVATAR_KIND_MODIFIERS.icon)).toBe(true);
+        expect(wrapper.find('[data-qa="dt-avatar-icon"]').classes(AVATAR_KIND_MODIFIERS.icon)).toBe(true);
       });
     });
 
diff --git a/packages/dialtone-vue3/components/avatar/avatar.vue b/packages/dialtone-vue3/components/avatar/avatar.vue
index 2913e9d65d..c30561c973 100644
--- a/packages/dialtone-vue3/components/avatar/avatar.vue
+++ b/packages/dialtone-vue3/components/avatar/avatar.vue
@@ -22,14 +22,19 @@
         :src="imageSrc"
         :alt="imageAlt"
       >
-      <dt-icon
-        v-else-if="iconName"
-        :name="iconName"
-        :aria-label="iconAriaLabel"
-        :size="iconSize || AVATAR_ICON_SIZES[size]"
+      <div
+        v-else-if="isIconType"
         :class="[iconClass, AVATAR_KIND_MODIFIERS.icon]"
-        data-qa="dt-avatar-icon"
-      />
+        :aria-label="clickable ? iconAriaLabel : ''"
+        :data-qa="iconDataQa"
+        :role="clickable ? 'button' : ''"
+      >
+        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->
+        <slot
+          name="icon"
+          :icon-size="iconSize || AVATAR_ICON_SIZES[size]"
+        />
+      </div>
       <span
         v-else
         :class="[AVATAR_KIND_MODIFIERS.initials]"
@@ -38,13 +43,13 @@
       </span>
     </div>
     <div
-      v-if="overlayIcon || overlayText"
+      v-if="hasOverlayIcon || overlayText"
       :class="overlayClasses"
     >
-      <dt-icon
-        v-if="overlayIcon"
-        class="d-avatar__overlay-icon"
-        :name="overlayIcon"
+      <!-- @slot Slot for overlay icon. -->
+      <slot
+        v-if="hasOverlayIcon"
+        name="overlayIcon"
       />
       <p
         v-else-if="overlayText"
@@ -72,9 +77,8 @@
 </template>
 
 <script>
-import { getUniqueString, getRandomElement } from '@/common/utils';
+import { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';
 import { DtPresence } from '../presence';
-import { DtIcon } from '@/components/icon';
 import {
   AVATAR_KIND_MODIFIERS,
   AVATAR_SIZE_MODIFIERS,
@@ -84,19 +88,16 @@ import {
   AVATAR_GROUP_VALIDATOR,
   AVATAR_ICON_SIZES,
 } from './avatar_constants';
-import { getIconNames } from '@/common/storybook_utils.js';
 import { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';
 import { extractInitialsFromName } from './utils';
 
-const ICONS_LIST = getIconNames();
-
 /**
  * An avatar is a visual representation of a user or object.
  * @see https://dialtone.dialpad.com/components/avatar.html
  */
 export default {
   name: 'DtAvatar',
-  components: { DtPresence, DtIcon },
+  components: { DtPresence },
 
   inheritAttrs: false,
 
@@ -194,14 +195,6 @@ export default {
       validator: (group) => AVATAR_GROUP_VALIDATOR(group),
     },
 
-    /**
-     * The icon that overlays the avatar
-     */
-    overlayIcon: {
-      type: String,
-      default: '',
-    },
-
     /**
      * The text that overlays the avatar
      */
@@ -236,15 +229,6 @@ export default {
       default: undefined,
     },
 
-    /**
-     * Icon name to be displayed on the avatar
-     */
-    iconName: {
-      type: String,
-      default: undefined,
-      validator: (name) => ICONS_LIST.includes(name),
-    },
-
     /**
      * Icon size to be displayed on the avatar
      * @values 100, 200, 300, 400, 500, 600, 700, 800
@@ -301,12 +285,21 @@ export default {
       imageLoadedSuccessfully: null,
       formattedInitials: '',
       initializing: false,
+      hasSlotContent,
     };
   },
 
   computed: {
-    isNotIconType () {
-      return !this.iconName;
+    isIconType () {
+      return hasSlotContent(this.$slots.icon);
+    },
+
+    hasOverlayIcon () {
+      return hasSlotContent(this.$slots.overlayIcon);
+    },
+
+    iconDataQa () {
+      return 'dt-avatar-icon';
     },
 
     avatarClasses () {
@@ -316,7 +309,7 @@ export default {
         this.avatarClass,
         {
           'd-avatar--group': this.showGroup,
-          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
+          [`d-avatar--color-${this.getColor()}`]: !this.isIconType,
           'd-avatar--clickable': this.clickable,
         },
       ];
@@ -326,6 +319,7 @@ export default {
       return [
         'd-avatar__overlay',
         this.overlayClass,
+        { 'd-avatar__overlay-icon': this.hasOverlayIcon },
       ];
     },
 
diff --git a/packages/dialtone-vue3/components/avatar/avatar_variants.story.vue b/packages/dialtone-vue3/components/avatar/avatar_variants.story.vue
index b2ac1db739..abcfc2a565 100644
--- a/packages/dialtone-vue3/components/avatar/avatar_variants.story.vue
+++ b/packages/dialtone-vue3/components/avatar/avatar_variants.story.vue
@@ -35,8 +35,11 @@
           :seed="$attrs.seed"
           :size="size"
           full-name="Avatar Icon"
-          icon-name="user"
-        />
+        >
+          <template #icon="{ iconSize }">
+            <dt-icon-user :size="iconSize" />
+          </template>
+        </dt-avatar>
       </div>
     </div>
     <div>
@@ -64,7 +67,11 @@
           :image-src="$attrs.imageSrc"
           :image-alt="$attrs.imageAlt"
           overlay-icon="hear"
-        />
+        >
+          <template #overlayIcon>
+            <dt-icon-hear />
+          </template>
+        </dt-avatar>
         <dt-avatar
           :seed="$attrs.seed"
           size="xl"
@@ -85,10 +92,13 @@
         />
         <dt-avatar
           :seed="$attrs.seed"
-          icon-name="user"
           icon-aria-label="user icon"
           clickable
-        />
+        >
+          <template #icon="{ iconSize }">
+            <dt-icon-user :size="iconSize" />
+          </template>
+        </dt-avatar>
         <dt-avatar
           :seed="$attrs.seed"
           full-name="Person avatar"
@@ -108,9 +118,12 @@
         />
         <dt-avatar
           :seed="$attrs.seed"
-          icon-name="user"
           :group="10"
-        />
+        >
+          <template #icon="{ iconSize }">
+            <dt-icon-user :size="iconSize" />
+          </template>
+        </dt-avatar>
         <dt-avatar
           :seed="$attrs.seed"
           full-name="Person avatar"
@@ -124,12 +137,13 @@
 </template>
 
 <script>
+import { DtIconUser, DtIconHear } from '@dialpad/dialtone-icons/vue3';
 import DtAvatar from './avatar.vue';
 import { AVATAR_PRESENCE_STATES, AVATAR_SIZE_MODIFIERS } from './avatar_constants.js';
 
 export default {
   name: 'DtAvatarVariants',
-  components: { DtAvatar },
+  components: { DtAvatar, DtIconUser, DtIconHear },
   data () {
     return {
       avatarSizes: Object.keys(AVATAR_SIZE_MODIFIERS),
diff --git a/packages/dialtone-vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue b/packages/dialtone-vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue
index dbd8496b68..b0000ce5be 100644
--- a/packages/dialtone-vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue
+++ b/packages/dialtone-vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue
@@ -21,9 +21,17 @@
             :full-name="displayName"
             :image-src="avatarImageUrl"
             image-alt=""
-            :icon-name="iconName"
             :seed="avatarSeed"
-          />
+          >
+            <template
+              v-if="noInitials"
+              #icon="{ iconSize }"
+            >
+              <dt-icon-user
+                :size="iconSize"
+              />
+            </template>
+          </dt-avatar>
         </slot>
       </div>
       <!-- show time instead of avatar when headers not present -->
@@ -118,6 +126,7 @@ import { DtLazyShow } from '@/components/lazy_show';
 import { DtListItem } from '@/components/list_item';
 import { DtBadge } from '@/components/badge';
 import Modal from '@/common/mixins/modal';
+import { DtIconUser } from '@dialpad/dialtone-icons/vue3';
 
 export default {
   name: 'DtRecipeFeedItemRow',
@@ -127,6 +136,7 @@ export default {
     DtLazyShow,
     DtListItem,
     DtBadge,
+    DtIconUser,
   },
 
   mixins: [Modal],
@@ -270,10 +280,6 @@ export default {
       };
     },
 
-    iconName () {
-      return this.noInitials ? 'user' : null;
-    },
-
     listItemClasses () {
       return [
         'dt-feed-item-row',
diff --git a/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info.stories.js b/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info.stories.js
index fb066b0d97..60f3ab12ef 100644
--- a/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info.stories.js
+++ b/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info.stories.js
@@ -1,15 +1,15 @@
 /* eslint-disable max-lines */
 import { action } from '@storybook/addon-actions';
-import { createTemplateFromVueFile, getIconNames } from '@/common/storybook_utils';
+import { createTemplateFromVueFile } from '@/common/storybook_utils';
 import DtRecipeContactInfo from './contact_info.vue';
 
 import DtRecipeContactInfoDefaultTemplate from './contact_info_default.story.vue';
 import DtRecipeContactInfoVariantsTemplate from './contact_info_variants.story.vue';
 import { AVATAR_SIZE_MODIFIERS, AVATAR_COLORS } from '@/components/avatar';
 import { PRESENCE_STATES_LIST } from '@/components/presence';
+import { DtIconUser } from '@dialpad/dialtone-icons/vue3';
 
 import avatarImage from '@/common/assets/avatar1.png';
-const iconsList = getIconNames();
 
 // Default Prop Values
 export const argsData = {
@@ -39,13 +39,7 @@ export const argTypesData = {
   },
 
   avatarIcon: {
-    options: iconsList,
-    control: {
-      type: 'select',
-      labels: {
-        undefined: '(empty)',
-      },
-    },
+    control: 'object',
   },
 
   avatarColor: {
@@ -158,6 +152,7 @@ export const Default = {
   render: DefaultTemplate,
 
   args: {
+    avatarIcon: DtIconUser,
     avatarSrc: avatarImage,
     avatarSeed: 'JL',
     avatarFullName: 'Joseph Lumaban',
diff --git a/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info.vue b/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info.vue
index 185c66a6d7..af4a35abc2 100644
--- a/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info.vue
+++ b/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info.vue
@@ -26,11 +26,25 @@
             :full-name="avatar.fullName"
             :image-src="avatar.src"
             image-alt=""
-            :icon-name="avatarIcon"
-            :overlay-icon="avatar.icon"
             :overlay-text="avatar.text"
             :avatar-class="[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]"
-          />
+          >
+            <template
+              v-if="avatarIcon"
+              #icon="{ iconSize }"
+            >
+              <component
+                :is="avatarIcon"
+                :size="iconSize"
+              />
+            </template>
+            <template
+              v-if="avatar.icon"
+              #overlayIcon
+            >
+              <component :is="avatar.icon" />
+            </template>
+          </dt-avatar>
         </span>
         <dt-avatar
           v-else
@@ -38,11 +52,20 @@
           :full-name="avatarFullName"
           :image-src="avatarSrc"
           image-alt=""
-          :icon-name="avatarIcon"
           :seed="avatarSeed"
           :color="avatarColor"
           :presence="presence"
-        />
+        >
+          <template
+            v-if="avatarIcon"
+            #icon="{ iconSize }"
+          >
+            <component
+              :is="avatarIcon"
+              :size="iconSize"
+            />
+          </template>
+        </dt-avatar>
       </button>
     </template>
     <template #default>
@@ -145,7 +168,7 @@ export default {
      * Avatar icon to display if `avatarSrc` is empty.
      */
     avatarIcon: {
-      type: String,
+      type: Object,
       default: null,
     },
 
diff --git a/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info_variants.story.vue b/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info_variants.story.vue
index feb71be5cc..cfde87f9b8 100644
--- a/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info_variants.story.vue
+++ b/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info_variants.story.vue
@@ -6,7 +6,7 @@
       </p>
       <dt-recipe-contact-info
         avatar-labelled-by="contact-number1"
-        avatar-icon="user"
+        :avatar-icon="avatarIcon"
       >
         <template #header>
           <div class="d-d-flex d-ai-center d-mb2">
@@ -33,7 +33,7 @@
       </p>
       <dt-recipe-contact-info
         avatar-labelled-by="contact-number2"
-        avatar-icon="user"
+        :avatar-icon="avatarIcon"
       >
         <template #header>
           <div class="d-d-flex d-ai-center d-mb2">
@@ -68,7 +68,7 @@
       >
         <dt-recipe-contact-info
           avatar-labelled-by="contact-name1"
-          avatar-icon="user"
+          :avatar-icon="avatarIcon"
         >
           <template #header>
             <div class="d-d-flex d-ai-center d-mb2">
@@ -111,7 +111,7 @@
       </p>
       <dt-recipe-contact-info
         avatar-labelled-by="contact-name2"
-        avatar-icon="user"
+        :avatar-icon="avatarIcon"
       >
         <template #header>
           <div class="d-d-flex d-ai-center d-mb2">
@@ -290,6 +290,7 @@
 </template>
 
 <script>
+/* eslint-disable max-lines */
 import DtRecipeContactInfo from './contact_info.vue';
 import { DtButton } from '@/components/button';
 import { DtIcon } from '@/components/icon';
@@ -297,15 +298,17 @@ import { DtLink } from '@/components/link';
 
 import avatar1 from '@/common/assets/avatar1.png';
 import avatar2 from '@/common/assets/avatar2.png';
+import { DtIconHear, DtIconUser } from '@dialpad/dialtone-icons/vue3';
 
 export default {
   name: 'DtRecipeContactInfoVariants',
   components: { DtButton, DtRecipeContactInfo, DtIcon, DtLink },
+
   data () {
     return {
       adminListenInAvatars: [
         { src: avatar1, fullName: 'Jaqueline Nackos', seed: 'JN' },
-        { src: avatar2, fullName: 'Joseph Lumaban', icon: 'hear', seed: 'JL' },
+        { src: avatar2, fullName: 'Joseph Lumaban', icon: DtIconHear, seed: 'JL' },
       ],
 
       groupCallAvatars: [
@@ -313,6 +316,8 @@ export default {
         { src: avatar1, fullName: 'Jaqueline Nackos', seed: 'JN' },
         { src: avatar2, fullName: 'Natalie Woods', text: '+3', seed: 'NW' },
       ],
+
+      avatarIcon: DtIconUser,
     };
   },
 };
diff --git a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue
index 068ba98bcf..e27ebb9210 100644
--- a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue
+++ b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue
@@ -26,10 +26,16 @@
           :full-name="avatarFullName"
           :seed="avatarSeed"
           :clickable="clickable"
-          :overlay-icon="isOnHold ? 'pause' : null"
           size="sm"
           @click="handleClick"
-        />
+        >
+          <template
+            v-if="isOnHold"
+            #overlayIcon
+          >
+            <dt-icon-pause />
+          </template>
+        </dt-avatar>
         <div class="dt-recipe-callbox--content">
           <component
             :is="clickable ? 'button' : 'span'"
@@ -85,11 +91,12 @@
 import { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';
 import DtAvatar from '@/components/avatar/avatar.vue';
 import DtBadge from '@/components/badge/badge.vue';
+import { DtIconPause } from '@dialpad/dialtone-icons/vue3';
 
 export default {
   name: 'DtRecipeCallbox',
 
-  components: { DtBadge, DtAvatar },
+  components: { DtBadge, DtAvatar, DtIconPause },
 
   inheritAttrs: false,
 
diff --git a/packages/dialtone-vue3/recipes/leftbar/contact_row/contact_row.vue b/packages/dialtone-vue3/recipes/leftbar/contact_row/contact_row.vue
index 6f821d929c..6bc1f51bd9 100644
--- a/packages/dialtone-vue3/recipes/leftbar/contact_row/contact_row.vue
+++ b/packages/dialtone-vue3/recipes/leftbar/contact_row/contact_row.vue
@@ -18,12 +18,19 @@
         :full-name="name"
         :image-src="avatarSrc"
         image-alt=""
-        :icon-name="iconName"
-        icon-size="200"
         size="sm"
         :seed="avatarSeed"
         :presence="avatarPresence"
-      />
+      >
+        <template
+          v-if="noInitials"
+          #icon
+        >
+          <dt-icon-user
+            :size="200"
+          />
+        </template>
+      </dt-avatar>
     </template>
     <template #label>
       <dt-emoji-text-wrapper
@@ -60,6 +67,7 @@ import { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';
 import DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';
 import DtAvatar from '@/components/avatar/avatar.vue';
 import { extractVueListeners, safeConcatStrings } from '@/common/utils';
+import { DtIconUser } from '@dialpad/dialtone-icons/vue3';
 
 export default {
   name: 'DtRecipeContactRow',
@@ -68,6 +76,7 @@ export default {
     DtAvatar,
     DtRecipeGeneralRow,
     DtEmojiTextWrapper,
+    DtIconUser,
   },
 
   inheritAttrs: false,
@@ -231,10 +240,6 @@ export default {
     contactDescription () {
       return safeConcatStrings([this.name, this.presenceText, this.userStatus]);
     },
-
-    iconName () {
-      return this.noInitials ? 'user' : null;
-    },
   },
 };
 </script>
diff --git a/packages/dialtone-vue3/recipes/leftbar/contact_row/contact_row_variants.story.vue b/packages/dialtone-vue3/recipes/leftbar/contact_row/contact_row_variants.story.vue
index eec463bb83..34d4e0f4c7 100644
--- a/packages/dialtone-vue3/recipes/leftbar/contact_row/contact_row_variants.story.vue
+++ b/packages/dialtone-vue3/recipes/leftbar/contact_row/contact_row_variants.story.vue
@@ -86,6 +86,19 @@
         call-button-tooltip="Call"
       />
     </div>
+    <div>
+      <h3>
+        With icon
+      </h3>
+      <dt-recipe-contact-row
+        name="Jaqueline Nackos"
+        avatar-presence="active"
+        avatar-seed="JN"
+        avatar-alt="Avatar person"
+        call-button-tooltip="Call"
+        :no-initials="true"
+      />
+    </div>
     <div>
       <h3>
         With emojis in the name