remove dt-icon from Feed Item Pill vue 2

dialpad · Sep 5, 2024 · d19d7c0 · d19d7c0
1 parent 5d2b4b5
commit d19d7c0
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 36 deletions.
diff --git a/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill.stories.js b/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill.stories.js
@@ -1,11 +1,13 @@
-import { createRenderConfig } from '@/common/storybook_utils';
+import { createRenderConfig, getIconNames } from '@/common/storybook_utils';
 import DtRecipeFeedItemPill from './feed_item_pill.vue';
 import DtRecipeFeedItemPillDefaultTemplate from './feed_item_pill_default.story.vue';
 import DtRecipeFeedItemPillVariantsTemplate from './feed_item_pill_variants.story.vue';
 
+const iconsList = getIconNames();
+
 // Default Prop Values
 const args = {
-  iconName: 'video',
+  leftIcon: 'video',
   title: 'This meeting has ended',
   ariaLabel: 'Click to expand',
   wrapperClass: 'd-w628',
@@ -14,6 +16,18 @@ const args = {
 
 const argTypes = {
   // Slots
+  leftIcon: {
+    table: {
+      type: { summary: 'VNode' },
+    },
+    options: iconsList,
+    control: {
+      type: 'select',
+      labels: {
+        undefined: '(empty)',
+      },
+    },
+  },
   subtitle: {
     control: 'text',
     table: {

diff --git a/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill.test.js b/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill.test.js
@@ -1,19 +1,19 @@
 import { mount } from '@vue/test-utils';
 import DtRecipeFeedItemPill from './feed_item_pill.vue';
+import { DtIconVideo } from '@dialpad/dialtone-icons/vue2';
 
 describe('DtRecipeFeedItemPill Tests', function () {
   let wrapper, feedItemPill, icon;
 
   const MOCK_ARIA_LABEL = 'Click to expand';
-  const MOCK_ICON_NAME = 'video';
+  const MOCK_ICON_SLOT = '<dt-icon-video />';
   const DATA_QA = {
     PILL: 'dt-recipe-feed-item-pill',
     PILL_ICON: 'dt-recipe-feed-item-pill__icon',
     CONTENT_ELEMENT: 'content-element',
   };
 
   const baseProps = {
-    iconName: MOCK_ICON_NAME,
     title: 'This meeting has ended',
     ariaLabel: MOCK_ARIA_LABEL,
   };
@@ -33,6 +33,7 @@ describe('DtRecipeFeedItemPill Tests', function () {
       propsData: { ...baseProps, ...mockProps },
       attrs: { ...baseAttrs, ...mockAttrs },
       slots: { ...baseSlots, ...mockSlots },
+      components: { DtIconVideo },
       global: {
         provide: { ...baseProvide, ...mockProvide },
       },
@@ -64,10 +65,23 @@ describe('DtRecipeFeedItemPill Tests', function () {
       it('should render a feed item pill', async () => {
         expect(feedItemPill.exists()).toBeTruthy();
         expect(icon.exists()).toBe(true);
-        expect(icon.classes()).toContain(`d-icon--${MOCK_ICON_NAME}`);
         expect(wrapper.find(`[data-qa="${DATA_QA.CONTENT_ELEMENT}"]`).exists()).toBe(false);
       });
     });
+
+    describe('When the icon slot is provided', () => {
+      beforeEach(async () => {
+        mockSlots = { leftIcon: MOCK_ICON_SLOT };
+
+        await updateWrapper();
+      });
+
+      it('should render the icon', () => {
+        console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
+        console.log(icon.html());
+        expect(icon.findComponent(DtIconVideo).exists()).toBe(true);
+      });
+    });
   });
 
   describe('Accessibility Tests', function () {
@@ -114,7 +128,7 @@ describe('DtRecipeFeedItemPill Tests', function () {
 
       it('should show a different icon', () => {
         expect(icon.exists()).toBe(true);
-        expect(icon.attributes('data-name')).toBe('Chevron Right');
+        expect(icon.find('[data-qa="dt-icon"]').attributes('data-name')).toBe('Chevron Right');
       });
     });
 

diff --git a/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill.vue b/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill.vue
@@ -18,12 +18,22 @@
                 <span class="dt-recipe-feed-item-pill__title">{{ title }}</span>
               </slot>
               <template #left>
-                <dt-icon
-                  data-qa="dt-recipe-feed-item-pill__icon"
-                  size="300"
+                <div
                   class="dt-recipe-feed-item-pill__icon"
-                  :name="computedIcon"
-                />
+                  data-qa="dt-recipe-feed-item-pill__icon"
+                >
+                  <component
+                    :is="toggleIcon"
+                    v-if="showChevronIcon"
+                    size="300"
+                  />
+                  <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->
+                  <slot
+                    v-else
+                    name="leftIcon"
+                    :icon-size="'300'"
+                  />
+                </div>
               </template>
               <template #subtitle>
                 <slot name="subtitle" />
@@ -49,24 +59,16 @@
 
 <script>
 import { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';
-import { DtIcon } from '@/components/icon';
 import { DtItemLayout } from '@/components/item_layout';
 import { DtCollapsible } from '@/components/collapsible';
+import { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';
 
 export default {
   name: 'DtRecipeFeedItemPill',
 
-  components: { DtItemLayout, DtIcon, DtCollapsible },
+  components: { DtItemLayout, DtCollapsible },
 
   props: {
-    /**
-     * Accepts a DtIcon name to be shown in the left
-     */
-    iconName: {
-      type: String,
-      default: () => '',
-    },
-
     /**
      * Bolded primary text
      */
@@ -131,12 +133,12 @@ export default {
   },
 
   computed: {
-    computedIcon () {
-      if (this.toggleable && this.hover) {
-        return this.expanded ? 'chevron-down' : 'chevron-right';
-      } else {
-        return this.iconName;
-      }
+    toggleIcon () {
+      return this.expanded ? DtIconChevronDown : DtIconChevronRight;
+    },
+
+    showChevronIcon () {
+      return this.toggleable && this.hover;
     },
 
     toggleableClass () {
@@ -190,7 +192,10 @@ export default {
   }
 
   &__icon {
-    animation: fade 0.15s ease-in;
+    display: flex;
+    &:deep(svg) {
+      animation: fade 0.15s ease-in;
+    }
   }
 
   &__content {

diff --git a/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill_default.story.vue b/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill_default.story.vue
@@ -1,6 +1,5 @@
 <template>
   <dt-recipe-feed-item-pill
-    :icon-name="$attrs.iconName"
     :title="$attrs.title"
     :wrapper-class="$attrs.wrapperClass"
     :button-class="$attrs.buttonClass"
@@ -9,6 +8,14 @@
     :toggleable="$attrs.toggleable"
     :default-toggled="$attrs.defaultToggled"
   >
+    <template
+      #leftIcon="{ iconSize }"
+    >
+      <dt-icon
+        :name="$attrs.leftIcon"
+        :size="iconSize"
+      />
+    </template>
     <template #subtitle>
       Last 43 minutes - Ended at 5:04pm
     </template>

diff --git a/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill_variants.story.vue b/packages/dialtone-vue2/recipes/conversation_view/feed_pill/feed_item_pill_variants.story.vue
@@ -8,10 +8,16 @@
       <dt-recipe-feed-item-pill
         default-toggled
         title="Ben called you"
-        icon-name="phone-outgoing"
         wrapper-class="d-w628"
         border-color="ai"
       >
+        <template
+          #leftIcon="{ iconSize }"
+        >
+          <dt-icon-phone-outgoing
+            :size="iconSize"
+          />
+        </template>
         <template #subtitle>
           Lasted 8 min • Ended at 11:56 AM
         </template>
@@ -58,10 +64,16 @@
       <dt-recipe-feed-item-pill
         title="Missed call from Ben"
         border-color="critical"
-        icon-name="phone-missed"
         wrapper-class="d-w628"
         :toggleable="false"
       >
+        <template
+          #leftIcon="{ iconSize }"
+        >
+          <dt-icon-phone-missed
+            :size="iconSize"
+          />
+        </template>
         <template #right>
           <div>
             <dt-button
@@ -86,11 +98,17 @@
         Voicemail
       </h3>
       <dt-recipe-feed-item-pill
-        icon-name="voicemail"
         title="Voicemail"
         wrapper-class="d-w628"
         :toggleable="false"
       >
+        <template
+          #leftIcon="{ iconSize }"
+        >
+          <dt-icon-voicemail
+            :size="iconSize"
+          />
+        </template>
         <template #subtitle>
           From (800)504-9978
         </template>
@@ -120,10 +138,16 @@
       <dt-recipe-feed-item-pill
         border-color="ai"
         title="Ben called you"
-        icon-name="phone-incoming"
         wrapper-class="d-w628"
         :toggleable="false"
       >
+        <template
+          #leftIcon="{ iconSize }"
+        >
+          <dt-icon-phone-incoming
+            :size="iconSize"
+          />
+        </template>
         <template #right>
           <div>
             <dt-button
@@ -154,12 +178,18 @@
       </h3>
       <dt-recipe-feed-item-pill
         title="Ben started a meeting"
-        icon-name="video"
         button-class="d-bar24"
         wrapper-class="d-w628"
         border-color="ai"
         :default-toggled="true"
       >
+        <template
+          #leftIcon="{ iconSize }"
+        >
+          <dt-icon-video
+            :size="iconSize"
+          />
+        </template>
         <template #subtitle>
           Started 10 minutes ago
         </template>
@@ -208,12 +238,18 @@
       </h3>
       <dt-recipe-feed-item-pill
         title="Ben started a meeting"
-        icon-name="video"
         border-color="ai"
         button-class="d-bar24"
         wrapper-class="d-w628"
         :toggleable="false"
       >
+        <template
+          #leftIcon="{ iconSize }"
+        >
+          <dt-icon-video
+            :size="iconSize"
+          />
+        </template>
         <template #subtitle>
           Started 10 minutes ago
         </template>
@@ -247,14 +283,25 @@
 import DtRecipeFeedItemPill from './feed_item_pill.vue';
 import { DtIcon } from '@/components/icon';
 import { DtButton } from '@/components/button';
-
+import {
+  DtIconPhoneOutgoing,
+  DtIconPhoneMissed,
+  DtIconPhoneIncoming,
+  DtIconVideo,
+  DtIconVoicemail,
+} from '@dialpad/dialtone-icons/vue2';
 export default {
   name: 'DtRecipeFeedItemPillVariants',
 
   components: {
     DtRecipeFeedItemPill,
     DtButton,
     DtIcon,
+    DtIconPhoneOutgoing,
+    DtIconPhoneMissed,
+    DtIconVoicemail,
+    DtIconPhoneIncoming,
+    DtIconVideo,
   },
 };
 </script>