@bytebrand/fe-ui-core 4.1.201 → 4.1.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.201",
+  "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/SearchFilters/common/FilterBlock/FilterBlockFactory.tsx

@@ -135,7 +135,7 @@ export const FilterBlockFactory: IFilterBlockFactory = {
 };
 
 export const FilterBlockFactoryDetailed: IFilterBlockFactory = {
-  BASIC_DATA:         (props: any): JSX.Element => (<BasicDataWidgetMobile {...props} />),
+  BASIC_DATA:         (props: any): JSX.Element => (<BasicDataWidgetMobile {...props} isNotDetailed={false}/>),
   HIGHLIGHTS:         (props: any): JSX.Element => (<HighlightsWidgetMobile {...props} />),
   ENGINE_TRANS_DRIVE: (props: any): JSX.Element => (<EngineTransDriveWidgetMobile {...props} />),
   BODY_COLOR:         (props: any): JSX.Element => (<BodyColorWidget {...props} />),

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

@@ -16,6 +16,7 @@ export interface IFuelProps {
   onDropDownFocus?: (id: string) => void;
   t?: (phrase: string) => string;
   optionClassName?: string;
+  isNotDetailed:boolean;
 }
 
 class Fuel extends React.Component<IFuelProps, {}> {
@@ -33,7 +34,7 @@ class Fuel extends React.Component<IFuelProps, {}> {
   };
 
   getOptions = (options: string[]) => options.map((option: string) => {
-    const { t } = this.props;
+    const { t, isNotDetailed} = this.props;
 
     const agg = this.getAggregation(option);
 
@@ -41,6 +42,7 @@ class Fuel extends React.Component<IFuelProps, {}> {
       value: option,
       label: (
         <span className={styles.wrapOptions}>
+          {isNotDetailed ? null : <IconSVG name={option} customDimensions />}
           <FilterLabel text={t(`cbd:${option}`)} agg={agg} />
         </span>
       )

package/source/components/SearchWidgetsMobile/BasicDataWidgetMobile/BasicDataWidgetMobile.tsx

@@ -19,6 +19,7 @@ import { OBJECT_FILTERS, RATE_DEFAULT_CONTROLS } from '../../../framework/consta
 interface IBasicDataWidgetDetailedProps {
   [key: string]: any;
   t?: (phrase: string) => string;
+  isNotDetailed:boolean;
 }
 
 interface IBasicDataWidgetDetailedState {
@@ -31,7 +32,7 @@ class BasicDataWidgetMobile extends React.Component<IMakeModelProps & IMakeModel
   };
 
   shouldComponentUpdate(nextProps: any, nextState: any) {
-    const { MMS_GROUPS, BODY_TYPE, FIRST_REGISTRATION, MILEAGE, POWER, RATE, PRICE, CONSUMPTION, SEATS, DOORS, FUEL, t } = this.props;
+    const { MMS_GROUPS, BODY_TYPE, FIRST_REGISTRATION, MILEAGE, POWER, RATE, PRICE, CONSUMPTION, SEATS, DOORS, FUEL, t,isNotDetailed } = this.props;
 
     const dataBlocks = {
       MMS_GROUPS, BODY_TYPE, FIRST_REGISTRATION, MILEAGE, POWER, RATE, PRICE, CONSUMPTION, SEATS, DOORS, FUEL
@@ -66,7 +67,7 @@ class BasicDataWidgetMobile extends React.Component<IMakeModelProps & IMakeModel
     const {
       MMS_GROUPS, BODY_TYPE, FIRST_REGISTRATION, MILEAGE, POWER, RATE, PRICE, CONSUMPTION, SEATS, DOORS, FUEL,
       onFilterChange, onChangeFilterControls, onAddMmsGroup, onRemoveMmsGroup, onDropDownFocus,
-      MM_GROUPS_EXCLUDE, onAddMmExcludeGroup, onRemoveMmExcludeGroup, t, showModal, hideModal, onAddMmsGroupClick
+      MM_GROUPS_EXCLUDE, onAddMmExcludeGroup, onRemoveMmExcludeGroup, t, showModal, hideModal, onAddMmsGroupClick,isNotDetailed
     } = this.props;
     const commonProps = { t, onChange: onFilterChange };
 
@@ -98,6 +99,8 @@ class BasicDataWidgetMobile extends React.Component<IMakeModelProps & IMakeModel
       onDropDownFocus,
       options: FUEL.options,
       values: FUEL.values,
+      // tslint:disable-next-line:object-literal-shorthand
+      isNotDetailed:isNotDetailed,
       aggregation: FUEL.aggregation || {}
     };
 

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>