feat(useravatar): create useravatar web component

packages/ibm-products-web-components/src/components/useravatar/user-avatar.stories.ts

@@ -14,6 +14,10 @@ import { prefix } from '../../globals/settings';
 
 import { POPOVER_ALIGNMENT } from '@carbon/web-components/es/components/popover/defs.js';
 import styles from './story-styles.scss?lit';
+import Group from '@carbon/web-components/es/icons/group/16';
+import User from '@carbon/web-components/es/icons/user/16';
+import Add from '@carbon/web-components/es/icons/add/16';
+//import Group from '@carbon/icons/lib/group/16';
 
 const storyPrefix = 'user-avatar-stories__';
 
@@ -32,23 +36,28 @@ const defaultTemplate = {
   args: {
     tooltipAlignment: POPOVER_ALIGNMENT.RIGHT,
     tooltipText: 'TW, Thomas J. Watson user profile',
-    name: 'Thomas J Watson',
+    renderIcon: Group,
   },
   argTypes: {
     tooltipAlignment: {
       control: 'select',
-      description:
-        'Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end.',
+      description: 'Specify the alignment of the tooltip.',
       options: tooltipAlignments,
     },
     tooltipText: {
       control: 'text',
-      description: 'Specify the text of the tooltip for icon-only buttons.',
+      description: 'Specify the text of the tooltip',
     },
     name: {
       control: 'text',
       description: 'Specify the name of the user',
     },
+    renderIcon: {
+      control: 'select',
+      description: 'Specify the renderIcon for user',
+      options: ['No icon', 'User', 'Group', 'Add'],
+      mapping: { 'No icon': '', User: User, Group: Group, Add: Add },
+    },
   },
   render: (args) => {
     return html`
@@ -67,6 +76,7 @@ const defaultTemplate = {
         tooltip-alignment=${args.tooltipAlignment}
         tooltip-text=${args.tooltipText}
         name=${args.name}
+        .renderIcon=${args.renderIcon}
       >
       </c4p-user-avatar>
     `;

packages/ibm-products-web-components/src/components/useravatar/user-avatar.ts

@@ -15,8 +15,7 @@ import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-lis
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
 import styles from './user-avatar.scss?lit';
 import '@carbon/web-components/es/components/tooltip/index.js';
-
-import { classMap } from 'lit/directives/class-map.js';
+import User from '@carbon/web-components/es/icons/user/16';
 
 const blockClass = `${prefix}--user-avatar`;
 /**
@@ -45,21 +44,32 @@ class CDSUseravatar extends HostListenerMixin(LitElement) {
   @property({ reflect: true })
   name;
 
+  /**
+   * Provide a custom icon to use if you need to use an icon other than the default one
+   */
+  @property()
+  renderIcon;
+
   getItem = () => {
-    const parts = this.name?.split(' ') || [];
-    const firstChar = parts[0].charAt(0).toUpperCase();
-    const secondChar = parts[0].charAt(1).toUpperCase();
-    if (parts.length === 1) {
-      return firstChar + secondChar;
-    }
-    const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
-    const initials = [firstChar];
-    if (lastChar) {
-      initials.push(lastChar);
-    }
-    console.log(initials);
+    if (this.name) {
+      const parts = this.name?.split(' ') || [];
+      const firstChar = parts[0].charAt(0).toUpperCase();
+      const secondChar = parts[0].charAt(1).toUpperCase();
+      if (parts.length === 1) {
+        return firstChar + secondChar;
+      }
+      const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
+      const initials = [firstChar];
+      if (lastChar) {
+        initials.push(lastChar);
+      }
 
-    return ''.concat(...initials);
+      return ''.concat(...initials);
+    } else if (this.renderIcon) {
+      return html`${this.renderIcon()}`;
+    } else {
+      return html`${User({ slot: 'icon' })} `;
+    }
   };
 
   Avatar = () => html`<div>${this.getItem()}</div>`;