diff --git a/packages/fiori/cypress/specs/UserMenu.cy.tsx b/packages/fiori/cypress/specs/UserMenu.cy.tsx index a0fae3faeecb..79b245a98a62 100644 --- a/packages/fiori/cypress/specs/UserMenu.cy.tsx +++ b/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( + <> + + + + + + + ); + 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( + <> + + + + + + + ); + 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( + <> + + + + + + + ); + 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( + <> + + + + + + + ); + 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( <> diff --git a/packages/fiori/src/UserMenuAccount.ts b/packages/fiori/src/UserMenuAccount.ts index 75bcde61f7da..e45dc6e4af90 100644 --- a/packages/fiori/src/UserMenuAccount.ts +++ b/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. * diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx index 462ff69db0c2..6843ef5aeb7f 100644 --- a/packages/fiori/src/UserMenuTemplate.tsx +++ b/packages/fiori/src/UserMenuTemplate.tsx @@ -115,6 +115,9 @@ function headerContent(this: UserMenu) { {this._selectedAccount.description && {this._selectedAccount.description} } + {this._selectedAccount.additionalInfo && + {this._selectedAccount.additionalInfo} + } {this.showManageAccount && diff --git a/packages/fiori/src/themes/UserMenu.css b/packages/fiori/src/themes/UserMenu.css index 3ae28fd0bf80..9e69fef0c6a0 100644 --- a/packages/fiori/src/themes/UserMenu.css +++ b/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; diff --git a/packages/fiori/test/pages/UserMenu.html b/packages/fiori/test/pages/UserMenu.html index 4c2002d15565..b889d66cebfb 100644 --- a/packages/fiori/test/pages/UserMenu.html +++ b/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>