feat(topbar): add optional initials for user avatar (#481)

Author: NiklasRamstrom

components/topbar/src/profile-menu.tsx

@@ -31,6 +31,7 @@ export const ProfileMenu = ({
   language,
   name,
   email,
+  initials,
   onSignOut,
   signOutLabel,
   tag,
@@ -50,6 +51,7 @@ export const ProfileMenu = ({
             <Avatar
               color="mink"
               name={name}
+              initials={initials}
               size={24}
               badge={
                 hasNotification
@@ -79,7 +81,12 @@ export const ProfileMenu = ({
       </MenuTrigger>
       <MenuPopover>
         <MenuList>
-          <UserInformation name={name} email={email} tag={tag} />
+          <UserInformation
+            name={name}
+            email={email}
+            initials={initials}
+            tag={tag}
+          />
           {(customContent === undefined || showCustomContentTopDivider) && (
             <MenuDivider />
           )}

components/topbar/src/profile-menu.types.ts

@@ -27,6 +27,8 @@ export type UserInformationProps = {
   readonly email: string;
   // Optional third tagline (for extra information)
   readonly tag?: string;
+  // Optional custom initials for avatar
+  readonly initials?: string;
 };
 
 export type ProfileMenuProps = UserInformationProps & {

components/topbar/src/profile-user-information.tsx

@@ -3,12 +3,19 @@ import React from "react";
 import { UserInformationProps } from "./profile-menu.types";
 import { useUserInfoStyles } from "./profile-user-information.styles";
 
-export const UserInformation = ({ name, email, tag }: UserInformationProps) => {
+export const UserInformation = ({
+  name,
+  email,
+  initials,
+  tag,
+}: UserInformationProps) => {
   const styles = useUserInfoStyles();
 
   return (
     <div className={styles.root}>
       <Persona
+        data-testid="profile-menu-persona"
+        avatar={{ initials: initials }}
         name={name}
         secondaryText={email}
         size="large"

components/topbar/src/top-bar.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import React from "react";
+import React, { act } from "react";
 import { TopBar } from "./top-bar";
 
 describe("Topbar", () => {
@@ -65,4 +65,54 @@ describe("Topbar", () => {
     const appMenuButton = await findByTestId("application-drawer-trigger");
     expect(appMenuButton).toBeTruthy();
   });
+
+  it("should render standard initials", async () => {
+    const { findByTestId } = render(
+      <TopBar
+        profileMenu={{
+          name: "Super User",
+          email: "[email protected]",
+          language: { onChange: () => {}, value: "en" },
+          theme: { onChange: () => {}, value: "dark" },
+          onSignOut: () => {},
+        }}
+      />
+    );
+
+    const profileMenuButton = await findByTestId("profile-menu-button");
+    expect(profileMenuButton).toHaveTextContent("SU");
+
+    act(() => {
+      profileMenuButton.click();
+    });
+    const profileMenuPersona = await findByTestId("profile-menu-persona");
+    expect(profileMenuPersona).toHaveTextContent(
+      "SUSuper [email protected]"
+    );
+  });
+
+  it("should render custom initials", async () => {
+    const { findByTestId } = render(
+      <TopBar
+        profileMenu={{
+          name: "Super User",
+          email: "[email protected]",
+          initials: "XY",
+          language: { onChange: () => {}, value: "en" },
+          theme: { onChange: () => {}, value: "dark" },
+          onSignOut: () => {},
+        }}
+      />
+    );
+
+    const profileMenuButton = await findByTestId("profile-menu-button");
+    expect(profileMenuButton).toHaveTextContent("XY");
+    act(() => {
+      profileMenuButton.click();
+    });
+    const profileMenuPersona = await findByTestId("profile-menu-persona");
+    expect(profileMenuPersona).toHaveTextContent(
+      "XYSuper [email protected]"
+    );
+  });
 });