@bytebrand/fe-ui-core 4.1.213 → 4.1.215

package/package.json

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

package/source/components/SearchFilters/filters/Fuel.tsx

@@ -54,7 +54,8 @@ class Fuel extends React.Component<IFuelProps, {}> {
       items: this.getOptions(options),
       value: values || [],
       onChange: (values: any) => this.onDropDownChange(values),
-      multiple: true
+      multiple: true,
+      dense:true
     };
 
     return <MaterialSelect {...ddProps} />;

package/source/components/SearchPageMobile/FiltersDetailed/Fuel.tsx

@@ -59,7 +59,8 @@ class Fuel extends React.Component<IFuelProps, {}> {
       items: this.getOptions(options),
       value: values || [],
       onChange: (values: any) => this.onDropDownChange(values),
-      multiple: true
+      multiple: true,
+      dense:true
     };
 
     return <MaterialSelect {...ddProps} />;

package/source/components/SearchWidgetsMobile/EngineTransDriveWidget/EngineTransDriveWidget.tsx

@@ -85,6 +85,7 @@ const EngineTransDriveWidget: React.FC<IDriveTransmissionWidgetProps> = ({
           label={t('filters.fuel')}
           items={getOptionsFuel(FUEL.options)}
           multiple
+          dense={true}
         >
         </MaterialSelect>
         <div className={styles.flexWrap}>

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.styl

@@ -82,14 +82,6 @@
   pointer-events: none;
   .priceItemCategory
     color: $grey-9;
-  [class*='MuiIconButton-root']
-    svg
-      circle
-        // fill: $grey-9;
-        stroke: $grey-9;
-      path
-        stroke: $grey-9;
-        fill: $grey-9;
 
   .priceNewBlock
     background-color $grey-9;
@@ -169,4 +161,3 @@
 .tooltipWrapFavorites
   transform: translateY(0px);
   margin-left: 5px;
-  

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

@@ -106,7 +106,8 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
             text={tooltipDescription}
             // positionX={positionX}
             // positionY={positionY}
-            icon='InfoTransparent'
+            icon='infoIcon'
+            disabled={isPriceDisable}
           />
         )}
         {isNewPriceCategory && (

package/source/components/_common/MaterialSelect/MaterialSelect.tsx

@@ -36,6 +36,7 @@ export interface IVehicleModalProps {
   selectClassName?: string;
   amountOfItems?: number;
   customDimensionsIcon?: boolean;
+  dense?:boolean;
 }
 
 const ITEM_HEIGHT = isMobileOnly ? 56 : 48;
@@ -63,6 +64,7 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
   items,
   icon,
   customDimensionsIcon,
+  dense,
   amountOfItems = MENU_ITEMS
 }: IVehicleModalProps) => {
   const [newValue, setValue] = useState('');
@@ -109,7 +111,7 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
       const setDisabled = isDisabled || isSeries;
       if (multiple) {
         return (
-          <MenuItem key={`${value}_${index}`} value={value}>
+          <MenuItem key={`${value}_${index}`} value={value} dense={dense}>
             <Checkbox checked={multipleValue.indexOf(value) > -1} />
             <ListItemText primary={label} />
           </MenuItem>

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

@@ -1,7 +1,8 @@
 import { styled } from '@mui/system';
 import IconSVG from '../IconSVG/IconSVG';
 
-export const IconSvgWrapper = styled(IconSVG)({
+export const IconSvgWrapper = styled(IconSVG)((props) => ({
+  fill: props.disabled ? '#4C4E6442' : '#4C4E648A',
   width: '12px',
   height: '12px'
-});
+}));

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
@@ -9,6 +9,7 @@ interface IMaterialTooltip {
   icon?: string;
   className?: string;
   placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
+  disabled?: Boolean;
 }
 
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
@@ -18,18 +19,33 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.palette.common.white,
     color: 'rgba(60,60,60,0.87)',
-    boxShadow: '0px 4px 10px 6px rgb(60 60 60 / 22%)',
     border: '1px solid rgb(60 60 60 / 22%)',
     fontSize: 11,
-    borderRadius: 4
+    borderRadius: 6,
+    background: '#FFFFFF',
+    boxShadow: '0px 0px 1px -2px rgba(76, 78, 100, 0.2), 0px 0px 2px rgba(76, 78, 100, 0.14), 0px 0px 5px rgba(76, 78, 100, 0.12)'
   }
 }));
 
-const MaterialTooltip = ({ text, icon = 'InfoTransparent', placement, className }: IMaterialTooltip) => {
+const MaterialTooltip = ({ text, placement, className, disabled }: IMaterialTooltip) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onHandleClick = (event: React.SyntheticEvent) => {
+    event.persist();
+    setIsOpen(!isOpen);
+  };
+
   return (
-    <LightTooltip placement={placement} title={text} className={className}>
-      <IconButton>
-        <IconSvgWrapper name={icon} customDimensions />
+    <LightTooltip
+      open={isOpen}
+      onMouseOver={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+      placement={placement}
+      title={text}
+      className={className}
+    >
+      <IconButton onTouchEnd={(e) => onHandleClick(e)}>
+        <IconSvgWrapper name={'infoIcon'} customDimensions disabled={disabled} />
       </IconButton>
     </LightTooltip>
   );