fix(components): dlt-3408 components clean up (#1264)

Author: iropolo

packages/dialtone-vue/components/Avatar/Avatar.test.js

@@ -175,30 +175,20 @@ describe('DtAvatar Tests', () => {
         expect(count.exists()).toBe(false);
       });
 
-      it('applies correct digit modifiers at boundaries', async () => {
-        // 9 -> no group shown, no digit modifiers
-        await wrapper.setProps({ group: 9 });
-        expect(wrapper.classes('d-avatar--group')).toBe(true);
-        expect(wrapper.classes('d-avatar--group-digits-2')).toBe(false);
-        expect(wrapper.classes('d-avatar--group-digits-3')).toBe(false);
-
-        // 10 -> base + digits-2
-        await wrapper.setProps({ group: 10 });
-        expect(wrapper.classes('d-avatar--group')).toBe(true);
-        expect(wrapper.classes('d-avatar--group-digits-2')).toBe(true);
-        expect(wrapper.classes('d-avatar--group-digits-3')).toBe(false);
-
-        // 99 -> base + digits-2
-        await wrapper.setProps({ group: 99 });
-        expect(wrapper.classes('d-avatar--group')).toBe(true);
-        expect(wrapper.classes('d-avatar--group-digits-2')).toBe(true);
-        expect(wrapper.classes('d-avatar--group-digits-3')).toBe(false);
-
-        // 100 -> base + digits-3 and count shows 99+
+      it.each([
+        [9, true, false, false],
+        [10, true, true, false],
+        [99, true, true, false],
+        [100, true, false, true],
+      ])('group %i applies d-avatar--group=%s, digits-2=%s, digits-3=%s', async (group, hasGroup, hasDigits2, hasDigits3) => {
+        await wrapper.setProps({ group });
+        expect(wrapper.classes('d-avatar--group')).toBe(hasGroup);
+        expect(wrapper.classes('d-avatar--group-digits-2')).toBe(hasDigits2);
+        expect(wrapper.classes('d-avatar--group-digits-3')).toBe(hasDigits3);
+      });
+
+      it('shows 99+ when group is 100 or more', async () => {
         await wrapper.setProps({ group: 100 });
-        expect(wrapper.classes('d-avatar--group')).toBe(true);
-        expect(wrapper.classes('d-avatar--group-digits-2')).toBe(false);
-        expect(wrapper.classes('d-avatar--group-digits-3')).toBe(true);
         const count = wrapper.find('[data-qa="dt-avatar-count"]');
         expect(count.text()).toBe('99+');
       });

packages/dialtone-vue/components/Avatar/Avatar.vue

@@ -105,7 +105,6 @@ const supportsOklch = typeof CSS !== 'undefined' && CSS.supports?.('background',
  * @see https://dialtone.dialpad.com/components/avatar.html
  */
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DtAvatar',
   components: { DtPresence },
 

packages/dialtone-vue/components/Avatar/AvatarDefault.story.vue

@@ -2,10 +2,8 @@
   <dt-avatar
     :id="$attrs.id"
     :full-name="$attrs.fullName"
-    :icon-name="$attrs.iconName"
     :image-src="$attrs.imageSrc"
     :image-alt="$attrs.imageAlt"
-    :icon-size="$attrs.iconSize"
     :size="$attrs.size"
     :presence="$attrs.presence"
     :avatar-class="$attrs.avatarClass"
@@ -14,19 +12,38 @@
     :seed="$attrs.seed"
     :group="$attrs.group"
     :color="$attrs.color"
-    :overlay-icon="$attrs.overlayIcon"
     :overlay-text="$attrs.overlayText"
     :overlay-class="$attrs.overlayClass"
     :interactive="$attrs.interactive"
     @click="$attrs.onClick"
-  />
+  >
+    <template
+      v-if="$attrs.iconName"
+      #icon
+    >
+      <dt-icon
+        :name="$attrs.iconName"
+        :size="$attrs.iconSize"
+      />
+    </template>
+    <template
+      v-if="$attrs.overlayIcon"
+      #overlayIcon
+    >
+      <dt-icon
+        :name="$attrs.overlayIcon"
+        size="300"
+      />
+    </template>
+  </dt-avatar>
 </template>
 
 <script>
 import DtAvatar from './Avatar.vue';
+import { DtIcon } from '@/components/Icon';
 
 export default {
   name: 'DtAvatarDefault',
-  components: { DtAvatar },
+  components: { DtAvatar, DtIcon },
 };
 </script>

packages/dialtone-vue/components/Avatar/AvatarVariants.story.vue

@@ -191,20 +191,20 @@
       </dt-stack>
     </div>
     <div>
-      <h2>Clickable</h2>
+      <h2>Interactive</h2>
       <dt-stack
         direction="row"
         gap="200"
       >
         <dt-avatar
           :seed="$attrs.seed"
           full-name="Person avatar"
-          clickable
+          interactive
         />
         <dt-avatar
           :seed="$attrs.seed"
           icon-aria-label="user icon"
-          clickable
+          interactive
         >
           <template #icon>
             <dt-icon-user />
@@ -215,7 +215,7 @@
           full-name="Person avatar"
           :image-src="$attrs.imageSrc"
           :image-alt="$attrs.imageAlt"
-          clickable
+          interactive
         />
       </dt-stack>
     </div>

packages/dialtone-vue/components/Badge/Badge.stories.js

@@ -8,6 +8,7 @@ import {
   BADGE_KIND_MODIFIERS,
   BADGE_DECORATION_MODIFIERS,
 } from './BadgeConstants';
+import { ICON_SIZE_MODIFIERS } from '@/components/Icon';
 
 const iconsList = getIconNames();
 
@@ -91,6 +92,37 @@ export const argTypesData = {
     // TODO: Find a way to add conditions on more than one argument
   },
 
+  iconSize: {
+    options: Object.keys(ICON_SIZE_MODIFIERS),
+    control: {
+      type: 'select',
+    },
+  },
+
+  text: {
+    control: { type: 'text' },
+  },
+
+  startIconClass: {
+    description: 'Pass through classes. Used to customize the start icon container',
+  },
+
+  endIconClass: {
+    description: 'Pass through classes. Used to customize the end icon container',
+  },
+
+  subtle: {
+    control: {
+      type: 'boolean',
+    },
+  },
+
+  outlined: {
+    control: {
+      type: 'boolean',
+    },
+  },
+
   labelClass: {
     description: 'Pass through classes. Used to customize the label container',
   },

packages/dialtone-vue/components/Badge/Badge.vue

@@ -68,7 +68,6 @@ import { hasSlotContent } from '@/common/utils/index.js';
  * @see https://dialtone.dialpad.com/components/badge.html
  */
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DtBadge',
 
   props: {
@@ -113,7 +112,7 @@ export default {
     /**
      * Decoration for the badge. This can be only used with kind: label and type: default
      * with no left and right icons
-     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
+     * @values black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
      * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
      * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
      */
@@ -187,6 +186,10 @@ export default {
     },
   },
 
+  mounted () {
+    this.validateProps();
+  },
+
   updated () {
     this.validateProps();
   },

packages/dialtone-vue/components/Badge/BadgeDefault.story.vue

@@ -9,10 +9,10 @@
     :outlined="$attrs.outlined"
   >
     <template
+      v-if="$attrs.startIcon"
       #startIcon="{ iconSize }"
     >
       <dt-icon
-        v-if="$attrs.startIcon"
         :name="$attrs.startIcon"
         :size="iconSize"
       />
@@ -21,10 +21,10 @@
       {{ defaultSlot }}
     </template>
     <template
+      v-if="$attrs.endIcon"
       #endIcon="{ iconSize }"
     >
       <dt-icon
-        v-if="$attrs.endIcon"
         :name="$attrs.endIcon"
         :size="iconSize"
       />

packages/dialtone-vue/components/Badge/BadgeVariants.story.vue

@@ -13,7 +13,7 @@
       :type="type.value"
     />
     <dt-badge
-      v-for="type in types.slice(0, types.length - 1)"
+      v-for="type in types.filter(t => t.value !== 'ai')"
       :key="`${type.value}-count`"
       text="1"
       :type="type.value"

packages/dialtone-vue/components/Banner/Banner.stories.js

@@ -102,6 +102,28 @@ export const argTypesData = {
     },
   },
 
+  dialogClass: {
+    description: 'Inner dialog class',
+  },
+  backgroundImage: {
+    control: { type: 'text' },
+  },
+  backgroundSize: {
+    control: { type: 'text' },
+  },
+  iconClass: {
+    description: 'Additional class name for the icon wrapper element.',
+  },
+  headerClass: {
+    description: 'Additional class name for the header wrapper element.',
+  },
+  contentClass: {
+    description: 'Additional class name for the content wrapper element.',
+  },
+  actionClass: {
+    description: 'Additional class name for the action wrapper element.',
+  },
+
   // Action Event Handlers
   onClick: {
     table: {

packages/dialtone-vue/components/Banner/Banner.vue

@@ -9,7 +9,8 @@
       class="d-banner__dialog"
       :class="dialogClass"
       :role="role"
-      :aria-labelledby="headerId"
+      :aria-modal="important || undefined"
+      :aria-labelledby="hasHeader ? headerId : undefined"
       :aria-describedby="contentId"
     >
       <dt-notice-icon
@@ -59,7 +60,6 @@ import utils from '@/common/utils';
  * @see https://dialtone.dialpad.com/components/banner.html
  */
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DtBanner',
 
   components: {
@@ -230,6 +230,10 @@ export default {
       return this.important ? 'alertdialog' : 'status';
     },
 
+    hasHeader () {
+      return !!this.headerText || !!this.$slots.header;
+    },
+
     bannerClass () {
       const kindClasses = {
         critical: 'd-banner--critical',