@bytebrand/fe-ui-core 4.2.8 → 4.2.9

package/package.json

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

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.tsx

@@ -260,7 +260,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
 
     const offerBtnVariantCondition = vehicleComponentName === 'recently' ||
                                      vehicleComponentName === 'landing' ||
-                                     vehicleComponentName === 'main' ? 'outlined' : 'contained'
+                                     vehicleComponentName === 'main' ? 'outlined' : 'contained';
     return (
       <section className={vehiclePriceSectionClassName}>
         {vehicleComponentName === 'favorite' && showCompareCheckboxes && (

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -16,7 +16,7 @@ interface IMaterialTooltip {
 
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
-))((props) => ({
+))(props => ({
   zIndex: props.zindex ? props.zindex : 9996,
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: '#fff',
@@ -42,7 +42,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
   return (
     <ClickAwayListener onClickAway={() => setIsOpen(false)}>
       <LightTooltip
-        open={isOpen} 
+        open={isOpen}
         onMouseOver={() => setIsOpen(true)}
         onMouseLeave={() => setIsOpen(false)}
         placement={placement}

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import MaterialMenu from './MaterialMenu';
 
-const superAdmin = true;
+const superAdmin = false;
 
 const userMenuItems = [
   {
@@ -35,7 +35,24 @@ const userMenuItems = [
     icon: 'dealersIcon',
     label: 'Dealers',
     amount: 1234,
-    divider: true
+    divider: true,
+    nestedItems: [
+      {
+        icon: 'supportCallbackIcon',
+        label: 'Support & Call back',
+        divider: true,
+      },
+      {
+        icon: 'supportCallbackIcon',
+        label: 'Support & Call back',
+        divider: true,
+      },
+      {
+        icon: 'supportCallbackIcon',
+        label: 'Support & Call back',
+        divider: true,
+      }
+    ]
   },
   {
     icon: 'imageSettingsIcon',

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

@@ -5,6 +5,7 @@ import { ThemeProvider } from '@mui/material/styles';
 import { Theme, FlexContainer, HeaderComponent } from './MaterialMenu.styled';
 import IconSVG from '../IconSVG/IconSVG';
 import { isMobileOnly } from 'react-device-detect';
+import NestedMenu from './NestedMenu';
 
 export interface ILoggedInUserInfoProps {
   profileName?: string;
@@ -72,6 +73,11 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
           anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
         >
           {menuItems.map((listItemProps: any, index: number) => {
+            if (!!listItemProps && listItemProps.nestedItems && listItemProps.nestedItems.length > 0) {
+              return (
+                <NestedMenu {...listItemProps} />
+              );
+            }
             return !!listItemProps &&
               <ListItem
                 key={index}

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

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import Menu from '@mui/material/Menu';
+import ListItem from './MaterialMenuItem';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import IconSVG from '../IconSVG/IconSVG';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import { AmountBlock } from './MaterialMenu.styled';
+
+export interface INestedMenuProps {
+  nestedItems: any;
+  label: string;
+  icon?: string;
+  amount?: number;
+}
+
+const NestedMenu = ({ nestedItems, label, icon, amount }: INestedMenuProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+      <>
+        <MenuItem onClick={handleClick}>
+          {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
+          <ListItemText>
+            {label}
+          </ListItemText>
+          {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
+        </MenuItem>
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          PaperProps={{
+            elevation: 0
+          }}
+          transformOrigin={{ horizontal: 'right', vertical: 'center' }}
+          anchorOrigin={{ horizontal: 'left', vertical: 'center' }}
+        >
+          {nestedItems.map((nestedListItemProps: any, nestedIndex: number) => {
+            return (
+              <ListItem
+                key={nestedIndex}
+                { ...nestedListItemProps }
+              />
+            );
+          })}
+        </Menu>
+      </>
+  );
+};
+
+export default NestedMenu;