feat(ui5-user-menu-account): introduce additional-info property

packages/fiori/cypress/specs/UserMenu.cy.tsx

@@ -27,7 +27,97 @@ describe("Initial rendering", () => {
 		cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 1);
 	});
 
-	it("tests config show-manage-account", () => {
+    it("tests title", () => {
+    	cy.mount(
+    		<>
+    			<Button id="openUserMenuBtn">Open User Menu</Button>
+    			<UserMenu open={true} opener="openUserMenuBtn">
+    				<UserMenuAccount
+    					slot="accounts"
+    					titleText="Alain Chevalier">
+    				</UserMenuAccount>
+    			</UserMenu>
+    		</>
+    	);
+    	cy.get("[ui5-user-menu]").as("userMenu");
+    	cy.get("@userMenu").should("exist");
+    	cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
+    	cy.get("@responsivePopover").should("exist");
+    	cy.get("@responsivePopover").find("[ui5-text]").as("name");
+    	cy.get("@name").should("have.length", 1);
+    	cy.get("@name").contains("Alain Chevalier");
+    	cy.get("@name").should("have.class", "ui5-user-menu-selected-account-title");
+
+    });
+
+    it("tests subtitle", () => {
+        cy.mount(
+            <>
+                <Button id="openUserMenuBtn">Open User Menu</Button>
+                <UserMenu open={true} opener="openUserMenuBtn">
+                    <UserMenuAccount
+                        slot="accounts"
+                        subtitleText="Alain.Chevalier@sap.com">
+                    </UserMenuAccount>
+                </UserMenu>
+            </>
+        );
+        cy.get("[ui5-user-menu]").as("userMenu");
+        cy.get("@userMenu").should("exist");
+        cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
+        cy.get("@responsivePopover").should("exist");
+        cy.get("@responsivePopover").find("[ui5-text]").as("email");
+        cy.get("@email").should("have.length", 1);
+        cy.get("@email").contains("Alain.Chevalier@sap.com");
+        cy.get("@email").should("have.class", "ui5-user-menu-selected-account-subtitleText");
+    });
+
+    it("tests description", () => {
+        cy.mount(
+            <>
+                <Button id="openUserMenuBtn">Open User Menu</Button>
+                <UserMenu open={true} opener="openUserMenuBtn">
+                    <UserMenuAccount
+                        slot="accounts"
+                        description="Delivery Manager, SAP SE">
+                    </UserMenuAccount>
+                </UserMenu>
+            </>
+        );
+        cy.get("[ui5-user-menu]").as("userMenu");
+        cy.get("@userMenu").should("exist");
+        cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
+        cy.get("@responsivePopover").should("exist");
+        cy.get("@responsivePopover").find("[ui5-text]").as("role");
+        cy.get("@role").should("have.length", 1);
+        cy.get("@role").contains("Delivery Manager, SAP SE");
+        cy.get("@role").should("have.class", "ui5-user-menu-selected-account-description");
+    });
+
+    it("tests additional info", () => {
+        cy.mount(
+            <>
+                <Button id="openUserMenuBtn">Open User Menu</Button>
+                <UserMenu open={true} opener="openUserMenuBtn">
+                    <UserMenuAccount
+                        slot="accounts"
+                        additionalInfo="Primary Employment">
+                    </UserMenuAccount>
+                </UserMenu>
+            </>
+        );
+        cy.get("[ui5-user-menu]").as("userMenu");
+        cy.get("@userMenu").should("exist");
+        cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover");
+        cy.get("@responsivePopover").should("exist");
+        cy.get("@responsivePopover").find("[ui5-text]").as("info");
+        cy.get("@info").should("have.length", 1);
+        cy.get("@info").contains("Primary Employment");
+        cy.get("@info").should("have.class", "ui5-user-menu-selected-account-additional-info");
+    });
+
+
+    it("tests config show-manage-account", () => {
 		cy.mount(
 			<>
 				<Button id="openUserMenuBtn">Open User Menu</Button>

packages/fiori/src/UserMenuAccount.ts

@@ -65,6 +65,15 @@ class UserMenuAccount extends UI5Element {
 	@property({ type: String })
 	description = "";
 
+	/**
+	 * Defines additional information for the user.
+	 *
+	 * @default ""
+	 * @public
+	 */
+	@property({ type: String })
+	additionalInfo = "";
+
 	/**
 	 * Defines if the user is selected.
 	 *

packages/fiori/src/UserMenuTemplate.tsx

@@ -115,6 +115,9 @@ function headerContent(this: UserMenu) {
 				{this._selectedAccount.description &&
 					<Text class="ui5-user-menu-selected-account-description">{this._selectedAccount.description}</Text>
 				}
+				{this._selectedAccount.additionalInfo &&
+					<Text class="ui5-user-menu-selected-account-additional-info">{this._selectedAccount.additionalInfo}</Text>
+				}
 
 				{this.showManageAccount &&
 					<Button id="selected-account-manage-btn" icon={userSettings} class="ui5-user-menu-manage-account-btn" onClick={this._handleManageAccountClick}>{this._manageAccountButtonText}</Button>

packages/fiori/src/themes/UserMenu.css

@@ -80,6 +80,14 @@
     color: var(--sapContent_LabelColor);
 }
 
+.ui5-user-menu-selected-account-additional-info {
+	margin-top: 0.25rem;
+	text-align: center;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	color: var(--sapContent_LabelColor);
+}
+
 .ui5-user-menu-manage-account-btn {
     font-family: var(--sapFontSemiboldDuplexFamily);
     margin-block-start: 1rem;

packages/fiori/test/pages/UserMenu.html

@@ -36,6 +36,7 @@
 						   title-text="Alain Chevalier 1"
 						   subtitle-text="alian.chevalier@sap.com"
 						   description="Delivery Manager, SAP SE"
+						   additional-info="Primary Employment"
 						   selected>
 	</ui5-user-menu-account>
 	<ui5-user-menu-account slot="accounts"