@bytebrand/fe-ui-core 4.1.200 → 4.1.202

package/package.json

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

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/_common/MaterialTooltip/MaterialTooltip.styled.tsx

@@ -0,0 +1,8 @@
+import { styled } from '@mui/system';
+import IconSVG from '../IconSVG/IconSVG';
+
+export const IconSvgWrapper = styled(IconSVG)({
+  fill: '#005ccb',
+  width: '12px',
+  height: '12px'
+});

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

@@ -1,21 +1,34 @@
 import React from 'react';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import IconSVG from '../IconSVG/IconSVG';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
+import { IconSvgWrapper } from './MaterialTooltip.styled';
 
 interface IMaterialTooltip {
   text: string;
-  icon: string;
+  icon?: string;
+  placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 }
 
-const MaterialTooltip = ({ text, icon }: IMaterialTooltip) => {
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.common.white,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 11,
+  },
+}));
+
+const MaterialTooltip = ({ text, icon = 'infoIcon', placement }: IMaterialTooltip) => {
   return (
-    <Tooltip title={text}>
+    <LightTooltip placement={placement} title={text}>
       <IconButton>
-        <IconSVG name={icon} customDimensions />
+        <IconSvgWrapper name={icon} customDimensions />
       </IconButton>
-    </Tooltip>
+    </LightTooltip>
   );
 };
 
-export default MaterialTooltip;
+export default MaterialTooltip;