@bytebrand/fe-ui-core 4.1.177 → 4.1.179

package/package.json

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

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -96,7 +96,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
               <div className={styles.tdContent}>
                 {filteredKeys.map((prop: string) => (
                   <div className={styles.wrapChecked} key={prop}>
-                    <IconSVG name={prop.startsWith('extras_trailerCoupling') ? 'search_trailerHitch' : 'checkBlue'} className={styles.cellCheckIcon} customDimensions />
+                    <IconSVG name={'checkBlue'} className={styles.cellCheckIcon} customDimensions />
                     <span className={styles.checkedItem}>{t(`cbd:${prop}`)}</span>
                   </div>
                 ))}

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

@@ -54,7 +54,8 @@
   border-top: 1px solid rgba(76, 78, 100, 0.12);
 
   .priceItemPrice
-    transform: translateX(-6px);
+    +media-tablet-landscape-up()
+      transform: translateX(-6px);
 
 .priceItemCategory
   font-size: 12px
@@ -109,6 +110,10 @@
   width: 100%;
   justify-content: space-between;
 
+.priceMtl
+  &.priceMtlActive
+    transform: translateX(6px);
+
 .prefixOldPrice
   margin: 0 8px;
   color: rgba(51, 51, 51, 0.83);
@@ -120,9 +125,6 @@
     transform: translateY(-2px);
     display: inline-flex;
 
-.priceMtl
-  transform: translateX(6px);
-
 .priceNewBlock
   flex-shrink: 0;
   width: 18px

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

@@ -137,7 +137,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                       numbersAfterDot={0}
                       price={perMonthCurrent}
                       postfix={postfix}
-                      className={styles.priceMtl}
+                      className={classnames(styles.priceMtl, { [styles.priceMtlActive]: !!priceSub})}
                       isNew={isStrikeShown}
                       size='semimedium'
                       sub={priceSub}

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

@@ -29,7 +29,7 @@
       gap: 3px;
 
   &.vehiclePriceSectionRecently
-    padding: 2px 10px 0 10px
+    padding: 1px 10px 0 10px
 
 .vehiclePriceTitle
   color: rgba(76, 78, 100, 0.87);

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

@@ -141,7 +141,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         title: t('vehicleProps:title.financing'),
         prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
         postfix: '3',
-        priceSub: t('vehicleProps:value.priceSub'),
+        priceSub: isMobileOnly ? null : t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
       },
       {
@@ -151,7 +151,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         postfix: '1,3',
         isPriceDisable: !isLeasingActive,
         title: t('vehicleProps:title.leasing'),
-        priceSub: t('vehicleProps:value.priceSub'),
+        priceSub: isMobileOnly ? null : t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
       }
     ];
@@ -266,7 +266,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && (
           <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
         )}
-        {vehicleComponentName === 'search' && isMobileOnly && (
+        {isMobileOnly && !showCompareCheckboxes && (
           <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
         )}
         {ListPrices}