@bytebrand/fe-ui-core 4.1.184 → 4.1.185

package/package.json

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

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

@@ -54,8 +54,7 @@
   border-top: 1px solid rgba(76, 78, 100, 0.12);
 
   .priceItemPrice
-    +media-tablet-landscape-up()
-      transform: translateX(-6px);
+    transform: translateX(-6px);
 
 .priceItemCategory
   font-size: 12px
@@ -110,10 +109,6 @@
   width: 100%;
   justify-content: space-between;
 
-.priceMtl
-  &.priceMtlActive
-    transform: translateX(6px);
-
 .prefixOldPrice
   margin: 0 8px;
   color: rgba(51, 51, 51, 0.83);
@@ -125,6 +120,9 @@
     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={classnames(styles.priceMtl, { [styles.priceMtlActive]: !!priceSub})}
+                      className={styles.priceMtl}
                       isNew={isStrikeShown}
                       size='semimedium'
                       sub={priceSub}

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

@@ -32,6 +32,7 @@
   &.vehiclePropertiesLanding
     grid-auto-rows: 44px;
     grid-template-columns: 1fr 1fr;
+    padding: 0 6px;
 
     & > .consumptionCombined
       white-space: pre-line;
@@ -41,11 +42,9 @@
     & > div:last-of-type
       grid-column: 1 / span 2;
 
-    +media-phone-up()
-      grid-auto-rows: 38px;
-
     +media-tablet-landscape-up()
-      grid-auto-rows: 36px;
+      padding-top: 2px;
+      grid-auto-rows: 38px;
       grid-template-columns: 100%;
 
       span
@@ -56,16 +55,6 @@
         grid-column: auto;
         grid-row: auto;
 
-      & .priceRatingSegmentWrapSRL
-        gap: 2px;
-        & > div
-          width: 13px;
-          height: 12px;
-
-      & .priceRatingSRL span
-        font-size: 8px;
-        margin-bottom: 2px;
-
   &.vehiclePropertiesMain
     grid-auto-rows: 44px;
     grid-template-columns: 100%;

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

@@ -22,9 +22,9 @@
   &.vehiclePriceSectionFavorite
     padding: 1px 10px 0 10px
     +media-tablet-landscape-up()
-      margin-top: auto;
+      margin-top: -1px;
       flex-shrink: 0;
-      padding: 0 5px 4px 15px;
+      padding: 0 5px 0 15px;
       border-left: 1px solid rgba(76, 78, 100, 0.12)
       gap: 3px;
 
@@ -58,6 +58,10 @@
   &.vehiclePriceTitleRecently
     font-size: 12px;
     height: 42px;
+    
+  &.vehiclePriceTitleLanding
+    font-size: 11px;
+    height: 38px;
 
 .addOfferButton
   white-space: normal
@@ -70,6 +74,7 @@
   font-size: 16px
   margin-top: 8px !important;
   font-weight bold !important;
+  border-radius: 0 !important;
 
 .isAlternativeButton
   background-color: $alternative !important

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

@@ -21,7 +21,6 @@ export interface IVehiclePriceSectionProps {
   linkTag?: string;
   classButton?: string;
   showAboIcon?: boolean;
-  dashboardButtonText?: string;
   isNewPriceCategory?: boolean;
   vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   monthlyInstallment?: number;
@@ -99,7 +98,6 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       routeObj,
       toggleCarToCompare,
       toCompare,
-      dashboardButtonText,
       classButton,
       onRemoveClick,
       showCompareCheckboxes,
@@ -125,13 +123,14 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       styles.vehiclePriceSection,
       { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
       { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' },
-      { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' }
+      { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' }
     );
 
     const vehiclePriceTitleClassName = classnames(
       styles.vehiclePriceTitle,
       { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
       { [styles.vehiclePriceTitleRecently]: vehicleComponentName === 'recently' },
+      { [styles.vehiclePriceTitleLanding]: vehicleComponentName === 'landing' },
       { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' }
     );
     const priceItemsGlobal = [
@@ -141,7 +140,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: t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
       },
       {
@@ -151,14 +150,15 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         postfix: '1,3',
         isPriceDisable: !isLeasingActive,
         title: t('vehicleProps:title.leasing'),
-        priceSub: isMobileOnly ? null : t('vehicleProps:value.priceSub'),
+        priceSub: t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
       }
     ];
 
-    const showAboCondition = vehicleComponentName !== 'favorite' &&
-                             vehicleComponentName !== 'recently' &&
-                             vehicleComponentName !== 'search';
+    // const showAboCondition = vehicleComponentName !== 'favorite' &&
+    //                          vehicleComponentName !== 'recently' &&
+    //                          vehicleComponentName !== 'search';
+    const showAboCondition = false;
 
     const Abo = showAboCondition ? [
       {
@@ -266,7 +266,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && (
           <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
         )}
-        {isMobileOnly && !showCompareCheckboxes && (
+        {vehicleComponentName === 'search' && isMobileOnly && (
           <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
         )}
         {ListPrices}
@@ -287,7 +287,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
           </Button>
         ) : null}
         {showOfferBtn ? (
-          <Button variant={vehicleComponentName === 'recently' ? 'outlined' : 'contained'} className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+          <Button color='primary' className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
         ) : ''}
       </section>
     );

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

@@ -29,9 +29,9 @@
     +media-tablet-landscape-up()
       display flex
   &.wrapTitlesFavorite
-    display block
+    display: flex;
     +media-tablet-landscape-up()
-      display flex
+      display: block;
   &.wrapTitlesRecently
     display: flex;
 
@@ -75,10 +75,10 @@
       margin-top: 0;
   &.optionTitleFavorite
     font-size: 12px;
-    margin-top: 3px;
+    margin-left: 8px;
     +media-tablet-landscape-up()
-      margin-left: 8px;
-      margin-top: 0;
+      margin-left: -3px;
+      margin-top: 3px;
   &.optionTitleRecently
     font-size: 12px;
     margin-left: 8px;

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

@@ -25,20 +25,20 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
   const infoSectionClassName = classnames(
     styles.infoSection,
     { [styles.infoSectionSearch]: vehicleComponentName === 'search' },
-    { [styles.infoSectionRecently]: vehicleComponentName === 'recently' },
+    { [styles.infoSectionRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' },
     { [styles.infoSectionMyVehicles]: vehicleComponentName === 'myVehicles' }
   );
 
   const wrapTitlesClassName = classnames(
     styles.wrapTitles,
     { [styles.wrapTitlesFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.wrapTitlesRecently]: vehicleComponentName === 'recently' },
+    { [styles.wrapTitlesRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' },
     { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
   );
   const optionTitleClassName = classnames(
     styles.optionTitle,
     { [styles.optionTitleFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.optionTitleRecently]: vehicleComponentName === 'recently' },
+    { [styles.optionTitleRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' },
     { [styles.optionTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
     { [styles.optionTitleIsAlternative]: combineRefAlternative }
   );

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -14,7 +14,6 @@
      border-bottom: 0;
 
   &.vehicleWrapMain,
-  &.vehicleWrapLanding,
   &.vehicleWrapComparable
     grid-template-areas:
     'title title'\
@@ -22,14 +21,6 @@
     'info price'\
     'seoText seoText'
 
-  &.vehicleWrapLanding
-    grid-template-columns: 1fr 1fr;
-    border-bottom: 6px solid $skyBlue;
-
-    +media-tablet-landscape-up()
-      border: 1px solid rgba(76, 78, 100, 0.12);
-      grid-template-columns: 112px 1fr;
-
   &.vehicleWrapComparable
     min-width: 230px
     margin: 0 4px
@@ -67,7 +58,7 @@
     margin-bottom: 5px;
     padding-bottom: 8px;
     +media-tablet-landscape-up()
-      min-height: 252px;
+      height: 252px;
       box-sizing: border-box;
       border: 1px solid rgba(76, 78, 100, 0.12);
       padding: 10px;
@@ -97,12 +88,12 @@
 
   &.vehicleWrapRecently
     box-sizing: border-box;
+    grid-template-columns: 160px 1fr;
     grid-template-areas:
       'title title'\
       'image image'\
       'info price'\
       'seoText seoText'
-    grid-template-columns: 160px 1fr;
     border: 1px solid rgba(76, 78, 100, 0.12);
     border-radius: 10px;
     padding-bottom: 15px;
@@ -119,6 +110,33 @@
     +media-tablet-landscape-up()
       max-width: 346px;
 
+  &.vehicleWrapLanding
+    box-sizing: border-box;
+    grid-template-areas:
+      'title title'\
+      'image image'\
+      'info price'\
+      'seoText seoText'
+    grid-template-columns: 55% 45%;
+    border-bottom: 1px solid #DFDFDF;
+    border-top: 1px solid #DFDFDF;
+    margin-bottom: 5px;
+    padding-bottom: 8px;
+
+    & [class*='withStats__topWrapper']
+      left: 16px;
+      right: 16px;
+      
+    & [class*='withStats__controls']
+      padding: 0 16px;
+
+    +media-tablet-landscape-up()
+      grid-template-columns: 120px 1fr;
+      border: 1px solid rgba(76, 78, 100, 0.12);
+      border-radius: 10px;
+      padding-bottom: 15px;
+      margin-bottom: 0;
+
   &.vehicleWrapMyVeicles
     grid-template-areas:
       'title title'\