feat: add avatar slot to feed-item-row (#1267)

* feat: add avatar slot to feed-item-row * $attrs * Update recipes/conversation_view/feed_item_row/feed_item_row_default.story.vue Co-authored-by: Julio Ortega <julio.ortega@dialpad.com> --------- Co-authored-by: Julio Ortega <julio.ortega@dialpad.com>
dialpad · Oct 20, 2023 · 1cc8b71 · 1cc8b71
1 parent 6a67cae
commit 1cc8b71
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/recipes/conversation_view/feed_item_row/feed_item_row.stories.js b/recipes/conversation_view/feed_item_row/feed_item_row.stories.js
@@ -48,6 +48,15 @@ export const argTypesData = {
     },
   },
 
+  avatar: {
+    control: 'text',
+    table: {
+      type: {
+        summary: 'VNode',
+      },
+    },
+  },
+
   threading: {
     name: 'threading',
     control: 'text',

diff --git a/recipes/conversation_view/feed_item_row/feed_item_row.vue b/recipes/conversation_view/feed_item_row/feed_item_row.vue
@@ -9,12 +9,17 @@
   >
     <!-- Avatar or time -->
     <template #left>
-      <dt-avatar
+      <!-- @slot Slot to contain the avatar, overrides avatar props. -->
+      <slot
         v-if="showHeader"
-        :full-name="displayName"
-        :image-src="avatarImageUrl"
-        :seed="avatarSeed"
-      />
+        name="avatar"
+      >
+        <dt-avatar
+          :full-name="displayName"
+          :image-src="avatarImageUrl"
+          :seed="avatarSeed"
+        />
+      </slot>
       <!-- show time instead of avatar when headers not present -->
       <div
         v-if="!showHeader"

diff --git a/recipes/conversation_view/feed_item_row/feed_item_row_default.story.vue b/recipes/conversation_view/feed_item_row/feed_item_row_default.story.vue
@@ -14,6 +14,14 @@
       <template v-if="$attrs.default">
         <span v-html="$attrs.default" />
       </template>
+      <template
+        v-if="$attrs.avatar"
+        #avatar
+      >
+        <span
+          v-html="$attrs.avatar"
+        />
+      </template>
       <template
         v-if="$attrs.threading"
         #threading