add slot for avatarIcon instead of dynamic component vue 3

dialpad · Sep 4, 2024 · 7b32652 · 7b32652
1 parent 822c3c0
commit 7b32652
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 29 deletions.
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
@@ -1,15 +1,15 @@
 /* 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';
 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,7 +39,13 @@ export const argTypesData = {
   },
 
   avatarIcon: {
-    control: 'object',
+    options: iconsList,
+    control: {
+      type: 'select',
+      labels: {
+        undefined: '(empty)',
+      },
+    },
   },
 
   avatarColor: {
@@ -152,7 +158,7 @@ export const Default = {
   render: DefaultTemplate,
 
   args: {
-    avatarIcon: DtIconUser,
+    avatarIcon: 'user',
     avatarSrc: avatarImage,
     avatarSeed: 'JL',
     avatarFullName: 'Joseph Lumaban',
@@ -217,6 +223,7 @@ export const Variants = {
   render: VariantsTemplate,
 
   args: {
+    avatarIcon: 'user',
     avatarFullName: 'Natalie Woods',
     avatarSeed: 'NW',
     avatarSize: 'lg',

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
@@ -30,13 +30,11 @@
             :avatar-class="[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]"
           >
             <template
-              v-if="avatarIcon"
+              v-if="hasAvatarIcon"
               #icon="{ iconSize }"
             >
-              <component
-                :is="avatarIcon"
-                :size="iconSize"
-              />
+              <!-- @slot Slot for avatar icon in a list -->
+              <slot name="avatarIcon" :icon-size="iconSize" />
             </template>
             <template
               v-if="avatar.icon"
@@ -57,13 +55,11 @@
           :presence="presence"
         >
           <template
-            v-if="avatarIcon"
+            v-if="hasAvatarIcon"
             #icon="{ iconSize }"
           >
-            <component
-              :is="avatarIcon"
-              :size="iconSize"
-            />
+            <!-- @slot Slot for avatar icon in a list -->
+            <slot name="avatarIcon" :icon-size="iconSize" />
           </template>
         </dt-avatar>
       </button>
@@ -107,6 +103,7 @@
 <script>
 import DtItemLayout from '@/components/item_layout/item_layout.vue';
 import DtAvatar from '@/components/avatar/avatar.vue';
+import { hasSlotContent } from '@/common/utils/index.js';
 
 export default {
   name: 'DtRecipeContactInfo',
@@ -164,14 +161,6 @@ export default {
       default: '',
     },
 
-    /**
-     * Avatar icon to display if `avatarSrc` is empty.
-     */
-    avatarIcon: {
-      type: Object,
-      default: null,
-    },
-
     /**
      * The size of the avatar
      * @values xs, sm, md, lg, xl
@@ -227,6 +216,12 @@ export default {
 
   emits: ['avatar-click'],
 
+  computed: {
+    hasAvatarIcon () {
+      return hasSlotContent(this.$slots.avatarIcon);
+    },
+  },
+
   methods: {
     avatarClick () {
       this.$emit('avatar-click');

diff --git a/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info_default.story.vue b/packages/dialtone-vue3/recipes/item_layout/contact_info/contact_info_default.story.vue
@@ -4,7 +4,6 @@
     :avatar-src="$attrs.avatarSrc"
     :avatar-full-name="$attrs.avatarFullName"
     :avatar-labelledby="$attrs.avatarLabelledby"
-    :avatar-icon="$attrs.avatarIcon"
     :avatar-size="$attrs.avatarSize"
     :avatar-seed="$attrs.avatarSeed"
     :avatar-color="$attrs.avatarColor"
@@ -18,6 +17,16 @@
       <span v-html="$attrs.header" />
     </template>
 
+    <template
+      #avatarIcon="{ iconSize }"
+    >
+      <dt-icon
+        v-if="$attrs.avatarIcon"
+        :name="$attrs.avatarIcon"
+        :size="iconSize"
+      />
+    </template>
+
     <template
       v-if="$attrs.subtitle"
       #subtitle
@@ -43,9 +52,10 @@
 
 <script>
 import DtRecipeContactInfo from './contact_info.vue';
+import { DtIcon } from '@/components/icon';
 
 export default {
   name: 'DtRecipeContactInfoDefault',
-  components: { DtRecipeContactInfo },
+  components: { DtRecipeContactInfo, DtIcon },
 };
 </script>
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
@@ -6,8 +6,16 @@
       </p>
       <dt-recipe-contact-info
         avatar-labelled-by="contact-number1"
-        :avatar-icon="avatarIcon"
       >
+        <template
+          #avatarIcon="{ iconSize }"
+        >
+          <dt-icon
+            v-if="$attrs.avatarIcon"
+            :name="$attrs.avatarIcon"
+            :size="iconSize"
+          />
+        </template>
         <template #header>
           <div class="d-d-flex d-ai-center d-mb2">
             <div
@@ -33,8 +41,16 @@
       </p>
       <dt-recipe-contact-info
         avatar-labelled-by="contact-number2"
-        :avatar-icon="avatarIcon"
       >
+        <template
+          #avatarIcon="{ iconSize }"
+        >
+          <dt-icon
+            v-if="$attrs.avatarIcon"
+            :name="$attrs.avatarIcon"
+            :size="iconSize"
+          />
+        </template>
         <template #header>
           <div class="d-d-flex d-ai-center d-mb2">
             <div
@@ -68,8 +84,16 @@
       >
         <dt-recipe-contact-info
           avatar-labelled-by="contact-name1"
-          :avatar-icon="avatarIcon"
         >
+          <template
+            #avatarIcon="{ iconSize }"
+          >
+            <dt-icon
+              v-if="$attrs.avatarIcon"
+              :name="$attrs.avatarIcon"
+              :size="iconSize"
+            />
+          </template>
           <template #header>
             <div class="d-d-flex d-ai-center d-mb2">
               <div
@@ -111,8 +135,16 @@
       </p>
       <dt-recipe-contact-info
         avatar-labelled-by="contact-name2"
-        :avatar-icon="avatarIcon"
       >
+        <template
+          #avatarIcon="{ iconSize }"
+        >
+          <dt-icon
+            v-if="$attrs.avatarIcon"
+            :name="$attrs.avatarIcon"
+            :size="iconSize"
+          />
+        </template>
         <template #header>
           <div class="d-d-flex d-ai-center d-mb2">
             <div
@@ -286,6 +318,36 @@
         </template>
       </dt-recipe-contact-info>
     </div>
+    <div class="d-m32">
+      <p class="d-my16 d-fs-200 d-fw-bold">
+        Group call with icon
+      </p>
+      <dt-recipe-contact-info
+        avatar-labelled-by="group-name"
+        :avatar-list="groupCallAvatars"
+      >
+        <template #header>
+          <div class="d-d-flex d-ai-center d-mb2">
+            <div
+              id="group-name"
+              class="d-fw-bold d-fs-200"
+            >
+              Group Call
+            </div>
+          </div>
+        </template>
+        <template #avatarIcon="{ iconSize }">
+          <dt-icon-user :size="iconSize" />
+        </template>
+        <template #subtitle>
+          <div class="d-d-flex d-ai-center">
+            <div class="d-fs-100 d-mr4">
+              Manage participants
+            </div>
+          </div>
+        </template>
+      </dt-recipe-contact-info>
+    </div>
   </div>
 </template>
 
@@ -302,7 +364,7 @@ import { DtIconHear, DtIconUser } from '@dialpad/dialtone-icons/vue3';
 
 export default {
   name: 'DtRecipeContactInfoVariants',
-  components: { DtButton, DtRecipeContactInfo, DtIcon, DtLink },
+  components: { DtButton, DtRecipeContactInfo, DtIcon, DtLink, DtIconUser },
 
   data () {
     return {