@bytebrand/fe-ui-core 4.1.214 → 4.1.215

package/package.json

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

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/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>
   );