@bytebrand/fe-ui-core 4.1.25 → 4.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.25",
+  "version": "4.1.26",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/UserMenu/MenuItem.tsx

@@ -3,29 +3,29 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import IconSVG from '../IconSVG/IconSVG';
 import ListItemText from '@mui/material/ListItemText';
-import { AmountBlock } from './MenuItem.styled';
+import { AmountBlock } from './UserMenu.styled';
 import { Link } from '@mui/material';
 
 interface IListItem {
   icon: string;
-  text: string;
+  content: any;
   amount?: number;
   divider?: boolean;
   onClick?: () => void;
   href?: string;
+  isComponent?: string;
 }
 
-const ListItem = ({ icon, text, amount, divider, onClick, href }: IListItem) => {
+const ListItem = ({ icon, content, amount, divider, onClick, href, isComponent }: IListItem) => {
   return (
     <Link color='#4C4E64DE' variant='caption' href={href} underline='none' onClick={onClick}>
       <MenuItem
-        sx={{ height: 44 }}
         divider={divider}
+        disableRipple={isComponent ? true : false}
+        isComponent={isComponent}
       >
-        <ListItemIcon>
-          <IconSVG name={icon} />
-        </ListItemIcon>
-        <ListItemText>{text}</ListItemText>
+        {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
+        <ListItemText>{content}</ListItemText>
         {amount && <AmountBlock>{amount}</AmountBlock>}
       </MenuItem>
     </Link>

package/source/components/_common/UserMenu/UserMenu.story.js

@@ -8,53 +8,49 @@ const superAdmin = true;
 const userMenuItems = [
   {
     icon: 'dashboardIcon',
-    text: 'Dashboard'
+    content: 'Dashboard'
   },
   {
     icon: 'userProfileIcon',
-    text: 'Profile'
+    content: 'Profile'
   },
   {
     icon: 'addressIcon',
-    text: 'Address'
+    content: 'Address'
   },
   {
     icon: 'myVehiclesIcon',
-    text: 'My Vehicles'
+    content: 'My Vehicles'
   },
   {
     icon: 'savedSearchsIcon',
-    text: 'Saved searchs'
+    content: 'Saved searchs'
   },
   {
     icon: 'favoritesIcon',
-    text: 'Favorites',
+    content: 'Favorites',
     amount: 122
   },
   {
     icon: 'dealersIcon',
-    text: 'Dealers',
+    content: 'Dealers',
     amount: 1234,
     divider: true
   },
   {
     icon: 'imageSettingsIcon',
-    text: 'Image Settings'
+    content: 'Image Settings'
   },
   superAdmin && {
     icon: 'supportCallbackIcon',
-    text: 'Support & Call back',
+    content: 'Support & Call back',
     divider: true
   },
   {
     icon: 'logoutIcon',
-    text: 'Logout'
+    content: 'Logout'
   },
 
 ];
 
-storiesOf('_Common_UI', module).add('UserMenu', () => (
-  <div>
-      <UserMenu userMenuItems={userMenuItems} profileName='Firstname Lastname' />
-  </div>
-));
+storiesOf('_Common_UI', module).add('UserMenu', () => <UserMenu userMenuItems={userMenuItems} headerComponent='Firstname Lastname' />);

package/source/components/_common/UserMenu/UserMenu.styled.tsx

@@ -0,0 +1,63 @@
+import { styled } from '@mui/system';
+import { createTheme } from '@mui/material/styles';
+
+export const Theme = createTheme({
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          fontSize: '14px'
+        }
+      }
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          color: '#4C4E64DE'
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          overflow: 'visible',
+          filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+          marginTop: 1.5,
+          width: '230px',
+          borderRadius: '10px'
+        }
+      }
+    },
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: 0
+        }
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          minHeight: '44px !important',
+          fontSize: '14px important',
+          ...(ownerState.isComponent && {
+            cursor: 'initial !important',
+            '&:hover': {
+              background: 'transparent !important'
+            }
+          })
+        })
+      }
+    }
+  }
+});
+
+export const AmountBlock = styled('span')({
+  backgroundColor: '#5C88FF',
+  color: '#fff',
+  borderRadius: '64px',
+  padding: '0 6px',
+  lineHeight: '20px',
+  fontSize: '12px',
+  fontWeight: 'bold'
+});

package/source/components/_common/UserMenu/UserMenu.tsx

@@ -1,16 +1,16 @@
 import React, { useState, useRef } from 'react';
 import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
 import ListItem from './MenuItem';
+import { ThemeProvider } from '@mui/material/styles';
+import { Theme } from './UserMenu.styled';
 
 export interface ILoggedInUserInfoProps {
-  profileName: string;
+  profileName?: string;
   userMenuItems: any;
+  headerComponent?: any;
 }
 
-const LoggedInUserInfo = ({ profileName, userMenuItems }: ILoggedInUserInfoProps) => {
+const LoggedInUserInfo = ({ userMenuItems, headerComponent }: ILoggedInUserInfoProps) => {
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -24,55 +24,29 @@ const LoggedInUserInfo = ({ profileName, userMenuItems }: ILoggedInUserInfoProps
   const containerRef = useRef(null);
 
   return (
-    <>
-      <div
-        ref={containerRef}
-        onMouseEnter={handleClick}
-      >
+    <ThemeProvider theme={Theme}>
+      <div ref={containerRef} onMouseEnter={handleClick}>
         <div>
-          <Tooltip title='Account settings'>
-            <Typography sx={{ minWidth: 100 }} onClick={handleClick}>{profileName}</Typography>
-          </Tooltip>
+          {headerComponent}
         </div>
         <Menu
           anchorEl={anchorEl}
-          id='account-menu'
           open={open}
           onClose={handleClose}
           onClick={handleClose}
           PaperProps={{
-            elevation: 0,
-            sx: {
-              overflow: 'visible',
-              filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-              mt: 1.5,
-              width: '230px',
-              borderRadius: '10px',
-              '& .MuiAvatar-root': {
-                width: 32,
-                height: 32,
-                ml: -0.5,
-                mr: 1
-              }
-            }
+            onMouseLeave: handleClose,
+            elevation: 0
           }}
           transformOrigin={{ horizontal: 'right', vertical: 'top' }}
           anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
         >
-          <MenuItem
-            divider={true}
-            sx={{ justifyContent: 'center', height: 48 }}
-            disableRipple={true}
-          >
-            {profileName}
-          </MenuItem>
-
           {userMenuItems.map((listItemProps: any) => {
             return !!listItemProps && <ListItem key={listItemProps.text} { ...listItemProps } />;
           })}
         </Menu>
       </div>
-    </>
+    </ThemeProvider>
   );
 };
 

package/source/components/_common/UserMenu/MenuItem.styled.tsx

@@ -1,11 +0,0 @@
-import { styled } from '@mui/system';
-
-export const AmountBlock = styled('span')({
-  backgroundColor: '#5C88FF',
-  color: '#fff',
-  borderRadius: '64px',
-  padding: '0 6px',
-  lineHeight: '20px',
-  fontSize: '12px',
-  fontWeight: 'bold'
-});