feat(confact-info): add showAvatar and avatarIcon props (Vue3) (#983

)

* feat(confact-info): add `showAvatar` and `avatarIcon` props

* simplify avatar display logic and remove `showAvatar` args in stories

* Address code review comments

* Replace text filed with item selection filed for avatar icon

recipes/list_items/contact_info/contact_info.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import { action } from '@storybook/addon-actions';
-import { createTemplateFromVueFile } from '@/common/storybook_utils';
+import { createTemplateFromVueFile, getIconNames } from '@/common/storybook_utils';
 import DtRecipeContactInfo from './contact_info.vue';
 
 import DtRecipeContactInfoDefaultTemplate from './contact_info_default.story.vue';
@@ -9,6 +9,7 @@ import { AVATAR_SIZE_MODIFIERS } from '@/components/avatar';
 import { PRESENCE_STATES_LIST } from '@/components/presence';
 
 import avatarImage from './avatar.png';
+const iconsList = getIconNames();
 
 // Default Prop Values
 export const argsData = {
@@ -36,6 +37,16 @@ export const argTypesData = {
     options: Object.keys(AVATAR_SIZE_MODIFIERS),
   },
 
+  avatarIcon: {
+    options: iconsList,
+    control: {
+      type: 'select',
+      labels: {
+        undefined: '(empty)',
+      },
+    },
+  },
+
   presence: {
     options: [...PRESENCE_STATES_LIST],
     control: {

recipes/list_items/contact_info/contact_info.test.js

@@ -108,11 +108,10 @@ describe('DtRecipeContactInfo Tests', () => {
       });
     });
 
-    describe('When both `avatarSrc` and `avatarInitials` are empty', () => {
+    describe('When `showAvatar` is false', () => {
       beforeEach(async () => {
         await wrapper.setProps({
-          avatarSrc: '',
-          avatarInitials: '',
+          showAvatar: false,
         });
         _setChildWrappers();
       });

recipes/list_items/contact_info/contact_info.vue

@@ -7,6 +7,7 @@
   >
     <template #left>
       <div
+        v-if="showAvatar"
         class="d-ps-relative"
         data-qa="contact-info-left"
       >
@@ -19,7 +20,6 @@
             :key="index"
           >
             <dt-avatar
-              v-if="avatar.src"
               :size="avatarSize"
               :seed="avatar.seed"
               :initials="avatar.initials"
@@ -29,48 +29,43 @@
               :avatar-class="['d-ba d-baw4 d-bc-white d-bar-pill', { 'd-mln24': index > 0 }]"
             >
               <img
+                v-if="avatar.src"
                 data-qa="dt-contact-avatar"
                 :src="avatar.src"
                 :alt="avatar.initials"
               >
-            </dt-avatar>
-            <dt-avatar
-              v-else-if="avatar.initials"
-              :size="avatarSize"
-              :seed="avatar.seed"
-              :initials="avatar.initials"
-              :overlay-icon="avatar.icon"
-              :overlay-text="avatar.text"
-              overlay-class="d-mn4 d-ba d-baw4 d-bc-white d-box-unset"
-              :avatar-class="['d-ba d-baw4 d-bc-white d-bar-pill', { 'd-mln24': index > 0 }]"
-            >
-              {{ avatar.initials }}
+              <div v-else-if="avatar.initials">
+                {{ avatar.initials }}
+              </div>
+              <dt-icon
+                v-else
+                :name="avatarIcon"
+              />
             </dt-avatar>
           </div>
         </div>
         <dt-avatar
-          v-else-if="avatarSrc"
+          v-else
           :size="avatarSize"
           :initials="avatarInitials"
           :seed="avatarSeed"
           :presence="presence"
         >
           <img
+            v-if="avatarSrc"
             data-qa="dt-contact-avatar"
             :src="avatarSrc"
             :initials="avatarInitials"
             :seed="avatarSeed"
             :alt="avatarInitials"
           >
-        </dt-avatar>
-        <dt-avatar
-          v-else-if="avatarInitials"
-          :size="avatarSize"
-          :initials="avatarInitials"
-          :seed="avatarSeed"
-          :presence="presence"
-        >
-          {{ avatarInitials }}
+          <div v-else-if="avatarInitials">
+            {{ avatarInitials }}
+          </div>
+          <dt-icon
+            v-else
+            :name="avatarIcon"
+          />
         </dt-avatar>
       </div>
     </template>
@@ -107,13 +102,15 @@
 <script>
 import DtListItem from '@/components/list_item/list_item.vue';
 import DtAvatar from '@/components/avatar/avatar.vue';
+import DtIcon from '@/components/icon/icon.vue';
 import utils from '@/common/utils';
 
 export default {
   name: 'DtRecipeContactInfo',
 
   components: {
     DtAvatar,
+    DtIcon,
     DtListItem,
   },
 
@@ -140,6 +137,14 @@ export default {
       default: '',
     },
 
+    /**
+     * Display avatar if `showAvatar` property is true.
+     */
+    showAvatar: {
+      type: Boolean,
+      default: true,
+    },
+
     /**
      * Optional avatar image url.
      * if provided, it's also required to provide a value in the `avatarInitials` prop to use
@@ -167,7 +172,14 @@ export default {
     },
 
     /**
-     * Status color of user from contact.
+     * Avatar icon to display if `avatarSrc` and `avatarInitials` are empty.
+     */
+    avatarIcon: {
+      type: String,
+      default: 'user',
+    },
+
+    /**
      * The size of the avatar
      * @values xs, sm, md, lg, xl
      */

recipes/list_items/contact_info/contact_info_default.story.vue

@@ -1,7 +1,9 @@
 <template>
   <dt-recipe-contact-info
+    :show-avatar="$attrs.showAvatar"
     :avatar-src="$attrs.avatarSrc"
     :avatar-initials="$attrs.avatarInitials"
+    :avatar-icon="$attrs.avatarIcon"
     :avatar-size="$attrs.avatarSize"
     :avatar-color="$attrs.avatarColor"
     :avatar-seed="$attrs.avatarSeed"