remove dt-icon from Avatar

dialpad · Aug 21, 2024 · 44a4c79 · 44a4c79
1 parent 1f774f5
commit 44a4c79
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 45 deletions.
diff --git a/packages/dialtone-vue3/components/avatar/avatar.vue b/packages/dialtone-vue3/components/avatar/avatar.vue
@@ -22,13 +22,14 @@
         :src="imageSrc"
         :alt="imageAlt"
       >
-      <dt-icon
-        v-else-if="iconName"
-        :name="iconName"
+      <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->
+      <slot
+        v-else-if="hasSlotContent($slots.icon)"
+        name="icon"
         :aria-label="iconAriaLabel"
-        :size="iconSize || AVATAR_ICON_SIZES[size]"
-        :class="[iconClass, AVATAR_KIND_MODIFIERS.icon]"
-        data-qa="dt-avatar-icon"
+        :icon-size="iconSize || AVATAR_ICON_SIZES[size]"
+        :icon-class="[iconClass, AVATAR_KIND_MODIFIERS.icon]"
+        :data-qa="iconDataQa"
       />
       <span
         v-else
@@ -38,13 +39,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 +73,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 +84,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 +191,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 +225,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 +281,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 +305,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 +315,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
@@ -35,8 +35,16 @@
           :seed="$attrs.seed"
           :size="size"
           full-name="Avatar Icon"
-          icon-name="user"
-        />
+        >
+          <template #icon="{ iconSize, iconClass, dataQa, ariaLabel }">
+            <dt-icon-user
+              :size="iconSize"
+              :class="iconClass"
+              :data-qa="dataQa"
+              :aria-label="ariaLabel"
+            />
+          </template>
+        </dt-avatar>
       </div>
     </div>
     <div>
@@ -64,7 +72,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 +97,18 @@
         />
         <dt-avatar
           :seed="$attrs.seed"
-          icon-name="user"
           icon-aria-label="user icon"
           clickable
-        />
+        >
+          <template #icon="{ iconSize, iconClass, dataQa, ariaLabel }">
+            <dt-icon-user
+              :size="iconSize"
+              :class="iconClass"
+              :data-qa="dataQa"
+              :aria-label="ariaLabel"
+            />
+          </template>
+        </dt-avatar>
         <dt-avatar
           :seed="$attrs.seed"
           full-name="Person avatar"
@@ -108,9 +128,17 @@
         />
         <dt-avatar
           :seed="$attrs.seed"
-          icon-name="user"
           :group="10"
-        />
+        >
+          <template #icon="{ iconSize, iconClass, dataQa, ariaLabel }">
+            <dt-icon-user
+              :size="iconSize"
+              :class="iconClass"
+              :data-qa="dataQa"
+              :aria-label="ariaLabel"
+            />
+          </template>
+        </dt-avatar>
         <dt-avatar
           :seed="$attrs.seed"
           full-name="Person avatar"
@@ -124,12 +152,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),