feat(core/avatar): add user-info to dropdown

packages/angular-test-app/src/preview-examples/application-header.html

@@ -11,9 +11,8 @@
     <ix-dropdown-item label="Config 3"></ix-dropdown-item>
   </ix-dropdown-button>
 
-  <ix-avatar>
+  <ix-avatar username="John Doe" extra="Administrator">
     <ix-dropdown-item label="Action 1"></ix-dropdown-item>
     <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-    <ix-dropdown-item label="Action 3"></ix-dropdown-item>
   </ix-avatar>
 </ix-application-header>

packages/angular/src/components.ts

@@ -74,14 +74,14 @@ export declare interface IxApplicationHeader extends Components.IxApplicationHea
 
 
 @ProxyCmp({
-  inputs: ['image', 'initials']
+  inputs: ['extra', 'image', 'initials', 'username']
 })
 @Component({
   selector: 'ix-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['image', 'initials'],
+  inputs: ['extra', 'image', 'initials', 'username'],
 })
 export class IxAvatar {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -481,18 +481,48 @@
       ],
       "dependencies": [
         "ix-dropdown",
+        "ix-divider",
+        "ix-typography",
         "ix-spinner"
       ],
       "dependencyGraph": {
         "ix-avatar": [
           "ix-dropdown",
+          "ix-divider",
+          "ix-typography",
           "ix-spinner"
         ],
         "ix-menu-avatar": [
           "ix-avatar"
         ]
       },
       "props": [
+        {
+          "name": "extra",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "extra",
+          "reflectToAttr": false,
+          "docs": "Optional description text that will be displayed underneath the username.\nNote: Only working if avatar is part of the ix-application-header",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.1.0"
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "image",
           "type": "string",
@@ -534,6 +564,32 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "username",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "username",
+          "reflectToAttr": false,
+          "docs": "If set an info card displaying the username will be placed inside the dropdown.\nNote: Only working if avatar is part of the ix-application-header",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.1.0"
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],
@@ -4621,10 +4677,14 @@
       ],
       "encapsulation": "shadow",
       "dependents": [
+        "ix-avatar",
         "ix-menu-category"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "ix-avatar": [
+          "ix-divider"
+        ],
         "ix-menu-category": [
           "ix-divider"
         ]
@@ -9903,6 +9963,8 @@
         ],
         "ix-avatar": [
           "ix-dropdown",
+          "ix-divider",
+          "ix-typography",
           "ix-spinner"
         ],
         "ix-menu-avatar-item": [
@@ -15684,6 +15746,7 @@
       "dependents": [
         "ix-action-card",
         "ix-application-switch-modal",
+        "ix-avatar",
         "ix-blind",
         "ix-card-list",
         "ix-content-header",
@@ -15706,6 +15769,9 @@
         "ix-application-switch-modal": [
           "ix-typography"
         ],
+        "ix-avatar": [
+          "ix-typography"
+        ],
         "ix-blind": [
           "ix-typography"
         ],

packages/core/src/components.d.ts

@@ -145,6 +145,11 @@ export namespace Components {
      * @since 2.0.0
      */
     interface IxAvatar {
+        /**
+          * Optional description text that will be displayed underneath the username. Note: Only working if avatar is part of the ix-application-header
+          * @since 2.1.0
+         */
+        "extra": string;
         /**
           * Display a avatar image
          */
@@ -153,6 +158,11 @@ export namespace Components {
           * Display the initials of the user. Will be overwritten by image
          */
         "initials": string;
+        /**
+          * If set an info card displaying the username will be placed inside the dropdown. Note: Only working if avatar is part of the ix-application-header
+          * @since 2.1.0
+         */
+        "username": string;
     }
     /**
      * @deprecated ix-basic-navigation is deprecated in favor of ix-application
@@ -4016,6 +4026,11 @@ declare namespace LocalJSX {
      * @since 2.0.0
      */
     interface IxAvatar {
+        /**
+          * Optional description text that will be displayed underneath the username. Note: Only working if avatar is part of the ix-application-header
+          * @since 2.1.0
+         */
+        "extra"?: string;
         /**
           * Display a avatar image
          */
@@ -4024,6 +4039,11 @@ declare namespace LocalJSX {
           * Display the initials of the user. Will be overwritten by image
          */
         "initials"?: string;
+        /**
+          * If set an info card displaying the username will be placed inside the dropdown. Note: Only working if avatar is part of the ix-application-header
+          * @since 2.1.0
+         */
+        "username"?: string;
     }
     /**
      * @deprecated ix-basic-navigation is deprecated in favor of ix-application

packages/core/src/components/avatar/avatar.scss

@@ -39,6 +39,7 @@
       min-width: 2rem;
       border-radius: 100px;
       background-color: var(--theme-color-component-3);
+      color: var(--theme-color-std-text);
     }
 
     #avatar-path-background {
@@ -51,6 +52,48 @@
   }
 }
 
+:host {
+  .user-info {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    height: 2.5rem;
+    padding: 1rem;
+    width: 12.75rem;
+    min-width: 12.75rem;
+    max-width: 12.75rem;
+
+    gap: 1rem;
+
+    .avatar {
+      width: 2rem;
+      pointer-events: none;
+    }
+
+    .user {
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      justify-content: center;
+      max-width: 10rem;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .username {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .extra {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
 :host(.avatar-button) {
   button {
     @include btn-base;