@bytebrand/fe-ui-core 4.1.202 → 4.1.203

package/package.json

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

package/source/components/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 import styles from './OfferCheckboxGroup.styl';
 import classnames from 'classnames';
-import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-import Tooltip from '../../_common/Tooltip/Tooltip';
+// import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+// import Tooltip from '../../_common/Tooltip/Tooltip';
 import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
+import MaterialTooltip from '../../_common/MaterialTooltip/MaterialTooltip';
 
 export interface ICheckboxProps {
   // Native checkbox props
@@ -133,7 +134,7 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
           {description ? (
             <span className={styles.labelContent}>
               {description}
-              {tooltipDescription && <Tooltip description={tooltipDescription} positionY={'top'} positionX={tooltipPosX} tooltipClassName={styles.tooltipCheckbox} iconName='InfoTransparent' />}
+              {tooltipDescription && <MaterialTooltip text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
             </span>
           ) : false}
         </label>
@@ -142,4 +143,4 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
   }
 }
 
-export default CheckboxContainer;
+export default CheckboxContainer;

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

@@ -82,9 +82,10 @@
   pointer-events: none;
   .priceItemCategory
     color: $grey-9;
-  [class*='tooltipWrap__icon']
-    path
-      fill: $grey-9;
+  [class*='MuiIconButton-root']
+    svg
+      path
+        fill: $grey-9;
   .priceNewBlock
     background-color $grey-9;
 
@@ -162,4 +163,4 @@
 
 .tooltipWrapFavorites
   transform: translateY(0px);
-  margin-left: 5px;
+  margin-left: 5px;

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

@@ -2,10 +2,11 @@ import * as React from 'react';
 import VehicleFormattedPrice from '../../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
 import IconSVG from '../../../_common/IconSVG/IconSVG';
 import classnames from 'classnames';
-import Tooltip from '../../../_common/Tooltip/Tooltip';
+// import Tooltip from '../../../_common/Tooltip/Tooltip';
 import styles from './VechiclePriceItem.styl';
-import { isMobileOnly } from 'react-device-detect';
+// import { isMobileOnly } from 'react-device-detect';
 import { IPrice } from '../../../../framework/types/types';
+import MaterialTooltip from '../../../_common/MaterialTooltip/MaterialTooltip';
 
 export interface IVehiclePriceItemProps {
   priceTitle: string;
@@ -100,12 +101,12 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           href: url
         })}
         {tooltipDescription && (
-          <Tooltip
-            tooltipClassName={styles.tooltipWrapFavorites}
-            description={tooltipDescription}
-            positionX={positionX}
-            positionY={positionY}
-            iconName={'infoIcon'}
+          <MaterialTooltip
+            className={styles.tooltipWrapFavorites}
+            text={tooltipDescription}
+            // positionX={positionX}
+            // positionY={positionY}
+            icon='infoIcon'
           />
         )}
         {isNewPriceCategory && (
@@ -183,4 +184,4 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     );
   }
 }
-export default VehiclePriceItem;
+export default VehiclePriceItem;

package/source/components/VehicleSmallCardForDealerships/VehicleSmallCardForDealerships.tsx

@@ -8,10 +8,11 @@ import Image from '../_common/Image/Image';
 import { IPrice, IVehicleInfo, IVehicleTitleProps } from '../../framework/types/types';
 import getDecoratedProps from '../../framework/vehiclesProps/decoratedLightProps';
 import IconSVG from '../_common/IconSVG/IconSVG';
-import Tooltip from '../_common/Tooltip/Tooltip';
+// import Tooltip from '../_common/Tooltip/Tooltip';
 import VehicleFormattedPrice from '../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
 import styles from './VehicleSmallCardForDealerships.styl';
 import { vehicleProps } from '../../locales/data';
+import MaterialTooltip from '../_common/MaterialTooltip/MaterialTooltip';
 
 const ImageWithStats = withStats(Image);
 interface IVehicleSmallCardForDealershipsProps {
@@ -114,12 +115,12 @@ const VehicleSmallCardForDealerships: React.FunctionComponent<IVehicleSmallCardF
         <div className={styles.priceItem}>
           <div className={styles.priceTextWrap}>
             <a className={styles.priceItemCategory} href={url} onClick={() => routeToActiveTab('Finanzierung')}>Finanzierung</a>
-            <Tooltip
-              tooltipClassName={styles.tooltipWrap}
-              iconName='infoIcon'
-              positionX='left'
-              positionY='top'
-              description={`
+            <MaterialTooltip
+              className={styles.tooltipWrap}
+              icon='infoIcon'
+              // positionX='left'
+              // positionY='top'
+              text={`
                 Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil.
                 Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.
               `}
@@ -181,4 +182,4 @@ VehicleSmallCardForDealerships.defaultProps = {
   onContainerClick: () => { }
 };
 
-export default VehicleSmallCardForDealerships;
+export default VehicleSmallCardForDealerships;

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

@@ -7,6 +7,7 @@ import { IconSvgWrapper } from './MaterialTooltip.styled';
 interface IMaterialTooltip {
   text: string;
   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';
 }
 
@@ -21,9 +22,9 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   },
 }));
 
-const MaterialTooltip = ({ text, icon = 'infoIcon', placement }: IMaterialTooltip) => {
+const MaterialTooltip = ({ text, icon = 'infoIcon', placement, className }: IMaterialTooltip) => {
   return (
-    <LightTooltip placement={placement} title={text}>
+    <LightTooltip placement={placement} title={text} className={className}>
       <IconButton>
         <IconSvgWrapper name={icon} customDimensions />
       </IconButton>