ui v2: update UserInformation component (#782)

frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx

@@ -1,23 +1,28 @@
 import * as React from "react";
-import { Grid } from "@material-ui/core";
+import styled from "@emotion/styled";
+import { Grid as MuiGrid } from "@material-ui/core";
 import type { Meta } from "@storybook/react";
 
+import type { UserInformationProps } from "../user";
 import { UserInformation } from "../user";
 
 export default {
   title: "Core/AppLayout/User Information",
   component: UserInformation,
-  parameters: {
-    backgrounds: {
-      default: "header blue",
-      values: [{ name: "header blue", value: "#131C5F" }],
-    },
-  },
 } as Meta;
 
-const Template = () => (
+const Grid = styled(MuiGrid)({
+  height: "64px",
+  backgroundColor: "#131C5F",
+});
+
+const Template = (props: UserInformationProps) => (
   <Grid container alignItems="center" justify="center">
-    <UserInformation />
+    <UserInformation {...props} />
   </Grid>
 );
 export const Primary = Template.bind({});
+Primary.args = {
+  data: [{ value: "Dashboard" }, { value: "Settings" }],
+  user: "fooBar@example.com",
+};

frontend/packages/core/src/AppLayout/user.tsx

@@ -2,17 +2,16 @@ import React from "react";
 import styled from "@emotion/styled";
 import {
   Avatar as MuiAvatar,
-  Box,
   ClickAwayListener,
+  Divider as MuiDivider,
   Grow as MuiGrow,
   IconButton,
   ListItemIcon,
-  ListItemText,
+  ListItemText as MuiListItemText,
   MenuItem as MuiMenuItem,
-  MenuList,
+  MenuList as MuiMenuList,
   Paper as MuiPaper,
   Popper as MuiPopper,
-  Typography,
 } from "@material-ui/core";
 import Cookies from "js-cookie";
 import jwtDecode from "jwt-decode";
@@ -25,51 +24,93 @@ const UserPhoto = styled(IconButton)({
   "&:active": {
     background: "#2938a5",
   },
+  // avatar on header
+  ".MuiAvatar-root": {
+    height: "32px",
+    width: "32px",
+    fontSize: "14px",
+    lineHeight: "18px",
+  },
 });
 
+// header and menu avatar
 const Avatar = styled(MuiAvatar)({
-  backgroundColor: "#dce7f4",
-  height: "28px",
-  width: "28px",
-  border: "2px solid #f6faff",
-  borderRadius: "50%",
-});
-
-const Initials = styled(Typography)({
-  color: "#0d1030",
-  opacity: 0.6,
-  fontSize: "14px",
+  backgroundColor: "#727FE1",
+  color: "#FFFFFF",
   fontWeight: 500,
 });
 
 const Paper = styled(MuiPaper)({
-  width: "266px",
-  border: "1px solid #e2e2e6",
+  width: "242px",
+  border: "1px solid #E7E7EA",
   boxShadow: "0px 5px 15px rgba(53, 72, 212, 0.2)",
 });
 
 const Popper = styled(MuiPopper)({
   padding: "0 12px",
   marginLeft: "12px",
+  zIndex: 1101,
 });
 
-const UserProfileMenuItem = styled(MuiMenuItem)({
-  "&:focus": {
-    background: "transparent",
-  },
-  "&:hover": {
-    background: "transparent",
+const MenuList = styled(MuiMenuList)({
+  padding: "0px",
+  borderRadius: "4px",
+  ".MuiMenuItem-root": {
+    "&:hover": {
+      backgroundColor: "#E7E7EA",
+    },
+    "&:active": {
+      backgroundColor: "#EBEDFB",
+    },
   },
 });
 
+// user details menu item
+const AvatarMenuItem = styled(MuiMenuItem)({
+  height: "52px",
+  margin: "16px 0 16px 0",
+  padding: "0 16px 0 16px",
+});
+
 const AvatarListItemIcon = styled(ListItemIcon)({
-  marginLeft: "8px",
+  minWidth: "inherit",
+  width: "48px",
+  // avatar on menu
+  ".MuiAvatar-root": {
+    height: "48px",
+    width: "48px",
+    fontSize: "20px",
+    lineHeight: "24px",
+  },
+});
+
+const AvatarListItemText = styled(MuiListItemText)({
+  paddingLeft: "16px",
+  margin: "0px",
+  ".MuiTypography-root": {
+    color: "rgba(13, 16, 48, 0.6)",
+    fontSize: "14px",
+    lineHeight: "24px",
+  },
+});
+
+// default menu items
+const MenuItem = styled(MuiMenuItem)({
+  height: "48px",
+  padding: "12px",
+});
+
+const ListItemText = styled(MuiListItemText)({
+  margin: "0px",
+  ".MuiTypography-root": {
+    color: "#0D1030",
+    fontSize: "14px",
+    lineHeight: "24px",
+  },
 });
 
-const AvatarListItemText = styled(Typography)({
-  color: "#0d1030",
-  fontSize: "14px",
-  opacity: "0.6",
+const Divider = styled(MuiDivider)({
+  backgroundColor: "#E7E7EA",
 });
 
 const Grow = styled(MuiGrow)((props: { placement: string }) => ({
@@ -96,17 +137,26 @@ const userId = (): string => {
   return subject;
 };
 
-const UserAvatar: React.FC = () => {
-  return (
-    <Avatar>
-      <Initials>{userId().slice(0, 2).toUpperCase()}</Initials>
-    </Avatar>
-  );
+interface UserAvatarProps {
+  initials: string;
+}
+
+const UserAvatar: React.FC<UserAvatarProps> = ({ initials }) => {
+  return <Avatar>{initials}</Avatar>;
 };
 
-// TODO (sperry): add interface to render menu items
+interface UserData {
+  value: string;
+}
+
+export interface UserInformationProps {
+  data?: UserData[];
+  user?: string;
+}
+
 // TODO (sperry): investigate using popover instead of popper
-const UserInformation: React.FC = () => {
+const UserInformation: React.FC<UserInformationProps> = ({ data, user = userId() }) => {
+  const userInitials = user.slice(0, 2).toUpperCase();
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
 
@@ -129,23 +179,17 @@ const UserInformation: React.FC = () => {
   }
 
   return (
-    <Box>
+    <>
       <UserPhoto
         ref={anchorRef}
         edge="end"
         aria-controls={open ? "account-options" : undefined}
         aria-haspopup="true"
         onClick={handleToggle}
       >
-        <UserAvatar />
+        <UserAvatar initials={userInitials} />
       </UserPhoto>
-      <Popper
-        open={open}
-        anchorEl={anchorRef.current}
-        role={undefined}
-        transition
-        placement="bottom-end"
-      >
+      <Popper open={open} anchorEl={anchorRef.current} transition placement="bottom-end">
         {({ TransitionProps, placement }) => (
           <Grow
             {...TransitionProps}
@@ -154,21 +198,25 @@ const UserInformation: React.FC = () => {
             <Paper>
               <ClickAwayListener onClickAway={handleClose}>
                 <MenuList autoFocusItem={open} id="account-options" onKeyDown={handleListKeyDown}>
-                  <UserProfileMenuItem>
+                  <AvatarMenuItem>
                     <AvatarListItemIcon>
-                      <UserAvatar />
+                      <UserAvatar initials={userInitials} />
                     </AvatarListItemIcon>
-                    <ListItemText>
-                      <AvatarListItemText>{userId()}</AvatarListItemText>
-                    </ListItemText>
-                  </UserProfileMenuItem>
+                    <AvatarListItemText>{user}</AvatarListItemText>
+                  </AvatarMenuItem>
+                  {data?.length === 0 ? null : <Divider />}
+                  {data?.map(d => (
+                    <MenuItem>
+                      <ListItemText>{d.value}</ListItemText>
+                    </MenuItem>
+                  ))}
                 </MenuList>
               </ClickAwayListener>
             </Paper>
           </Grow>
         )}
       </Popper>
-    </Box>
+    </>
   );
 };