@bytebrand/fe-ui-core 4.1.209 → 4.1.211

package/package.json

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

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

@@ -84,8 +84,13 @@
     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;
 
@@ -163,4 +168,5 @@
 
 .tooltipWrapFavorites
   transform: translateY(0px);
-  margin-left: 5px;
+  margin-left: 5px;
+  

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

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

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

@@ -3,7 +3,6 @@ import styles from './VehiclePrice.styl';
 import classnames from 'classnames';
 import VehiclePriceItem from '../VechiclePriceItem/VechiclePriceItem';
 import { IBuy, ILeasing, IFinancing, ICommonFinancing } from '../../../../framework/types/types';
-import { Hidden } from 'react-grid-system';
 import { isMobileOnly } from 'react-device-detect';
 import Button from '../../../../components/_common/Button/Button';
 import CheckboxMaterial from '../../../../components/_common/CheckboxMaterial/CheckboxMaterial';
@@ -30,6 +29,7 @@ export interface IVehiclePriceSectionProps {
   target?: string;
   rel?: string;
   iconName?: string;
+  priceSubMtl?: string | null;
   mainImageId?: string;
   showCompareCheckboxes?: boolean;
   toRound?: boolean;
@@ -63,6 +63,8 @@ interface IPriceData {
   isTotal?: boolean;
   isNewPriceCategory?: boolean;
   positionY?: any;
+  priceSub?: string | null;
+  prefixOldPrice?: string | null;
   postfix?: any;
   title?: string;
   margin?: number;
@@ -98,6 +100,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       routeObj,
       toggleCarToCompare,
       toCompare,
+      priceSubMtl,
       classButton,
       onRemoveClick,
       showCompareCheckboxes,
@@ -133,6 +136,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       { [styles.vehiclePriceTitleLanding]: vehicleComponentName === 'landing' },
       { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' }
     );
+
     const priceItemsGlobal = [
       {
         perMonthOld: oldMonthlyInstallment,
@@ -140,7 +144,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         title: t('vehicleProps:title.financing'),
         prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
         postfix: '3',
-        priceSub: isMobileOnly ? null : t('vehicleProps:value.priceSub'),
+        priceSub: priceSubMtl,
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
       },
       {
@@ -150,7 +154,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         postfix: '1,3',
         isPriceDisable: !isLeasingActive,
         title: t('vehicleProps:title.leasing'),
-        priceSub: isMobileOnly ? null : t('vehicleProps:value.priceSub'),
+        priceSub: priceSubMtl,
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
       }
     ];

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

@@ -31,7 +31,7 @@
   &.wrapTitlesFavorite
     display: flex;
     +media-tablet-landscape-up()
-      display: block;
+      display: flex;
   &.wrapTitlesRecently
     display: flex;
 
@@ -77,8 +77,7 @@
     font-size: 12px;
     margin-left: 8px;
     +media-tablet-landscape-up()
-      margin-left: -3px;
-      margin-top: 3px;
+      margin-left: 8px;
   &.optionTitleRecently
     font-size: 12px;
     margin-left: 8px;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -59,6 +59,7 @@ interface IVehicleSmallCardProps {
   modificationDate?: string;
   baseUrl?: string;
   offerSource?: string;
+  priceSubMtl?: string | null;
   ownerName?: string;
   className?: string;
   percentage?: number;
@@ -114,6 +115,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     url,
     target,
     rel,
+    priceSubMtl,
     onContainerClick,
     onAddOfferToMainSlideClick,
     isDealer,
@@ -230,6 +232,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     vehicleComponentName,
     classButton,
     linkTag,
+    priceSubMtl,
     onAddOfferToMainSlideClick,
     isDealerSuperAdmin,
     onDetailsClick,
@@ -354,6 +357,7 @@ VehicleSmallCard.defaultProps = {
   showSlider: false,
   isDealerSuperAdmin: false,
   showCompareCheckboxes: false,
+  priceSubMtl: null,
   slider: {},
   stats: {},
   title: {},

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

@@ -2,7 +2,6 @@ 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

@@ -14,15 +14,18 @@ interface IMaterialTooltip {
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
 ))(({ theme }) => ({
+  zIndex: 10000,
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: theme.palette.common.white,
-    color: 'rgba(0, 0, 0, 0.87)',
-    boxShadow: theme.shadows[1],
-    fontSize: 11
+    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
   }
 }));
 
-const MaterialTooltip = ({ text, icon = 'infoIcon', placement, className }: IMaterialTooltip) => {
+const MaterialTooltip = ({ text, icon = 'InfoTransparent', placement, className }: IMaterialTooltip) => {
   return (
     <LightTooltip placement={placement} title={text} className={className}>
       <IconButton>

package/source/locales/data.ts

@@ -55,6 +55,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         co2: `${vehicleOption.co2} g/km `,
         na: 'N/A',
         priceSub: '/mtl.',
+        priceSubMtl: '/mtl.',
         prefixOldPrice: 'ab',
         vehicleOwners: `${vehicleOption.vehicleOwners} Fahrzeughalter`,
         vehicleOwners_plural: `${count} Fahrzeughalter`,