@bytebrand/fe-ui-core 4.1.172 → 4.1.174

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

@@ -9,25 +9,35 @@
   height: 46px;
   box-sizing: border-box;
 
+  &.priceItemSearch
+    height: 44px;
+    +media-tablet-landscape-up()
+      height: 51px;
+    &.priceItemBuy
+      border-top: none;
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+      +media-tablet-landscape-up()
+        border: none;
+
   &.priceItemFavorite
     height: 44px;
+    +media-tablet-landscape-up()
+      height: 46px;
+      &.priceItemBuy
+        height: 52px;
+
+  &.priceItemRecently
+    height: 44px;
+
+    &.priceItemBuy
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+
+  &.priceItemComparable
+    +media-tablet-landscape-up()
+      height: 38px;
+      [class*='semimedium__']
+        font-size: 16px;
 
-  +media-phone-up()
-    height: 42px;
-    &.priceItemFavorite
-      height: 42px;
-
-  &:first-of-type
-    align-items: flex-end;
-    padding-bottom: 10px;
-    .priceItemCategory
-      font-size: 12px;
-      +media-phone-up()
-        font-size: 11px;
-
-      &.priceItemCategorySearch
-        +media-tablet-landscape-up()
-          font-size: 12px;
   &:nth-of-type(3), &:last-of-type
     .tooltipWrap
       &__block
@@ -41,34 +51,31 @@
           transform: rotate(180deg) translateX(3px);
 
 .priceItemBuy
-  border-top: 1px solid $grey-d3
+  border-top: 1px solid rgba(76, 78, 100, 0.12);
+
+  .priceItemPrice
+    transform: translateX(-6px);
 
 .priceItemCategory
   font-size: 12px
-  font-weight bold
-  color: $grey-3
+  color: rgba(76, 78, 100, 0.87);
   box-sizing: border-box
   padding 3px 0;
   cursor pointer;
   text-decoration none;
   margin-right: 2px
   flex-shrink: 0;
-  position relative
+  position relative;
+
+  &.priceItemCategoryComparable
+    +media-tablet-landscape-up()
+      font-size: 9px;
 
   & > span:hover
     background: rgba(196, 196, 196, 0.6);
 
-  +media-phone-up()
-    font-size: 9px;
-
-  &.priceItemCategorySearch
-    +media-tablet-landscape-up()
-      font-size: 12px;
-
-  &.priceItemCategoryFavorite
-    +media-tablet-landscape-up()
-      font-size: 13px !important;
-      color: rgba(76, 78, 100, 0.87);
+  +media-tablet-landscape-up()
+    font-size: 13px
 
 .priceItemDisable
   pointer-events: none;
@@ -80,7 +87,6 @@
   .priceNewBlock
     background-color $grey-9;
 
-
 .noPrice
   color: $grey-9;
   font-size: 11px;
@@ -96,19 +102,27 @@
   align-items: flex-end;
   color: inherit;
 
-  .largeMobilePrice
-    +media-phone-only()
-      font-size: 25px;
-      & > span:last-of-type
-        transform: translateY(-12px);
+.oldPriceWrap
+  display: flex;
+  font-size: 10px;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+
+.prefixOldPrice
+  margin: 0 8px;
+  color: rgba(51, 51, 51, 0.83);
 
 .oldPrice
-  font-size: 10px
+  margin-left: auto;
   & > span:last-of-type
     font-size: 8px;
     transform: translateY(-2px);
     display: inline-flex;
 
+.priceMtl
+  transform: translateX(6px);
+
 .priceNewBlock
   flex-shrink: 0;
   width: 18px
@@ -145,5 +159,5 @@
   bottom: 5px;
 
 .tooltipWrapFavorites
-  transform: translateY(-1px);
-  margin-left: 5px;
+  transform: translateY(0px);
+  margin-left: 5px;

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

@@ -10,21 +10,25 @@ import { IPrice } from '../../../../framework/types/types';
 export interface IVehiclePriceItemProps {
   priceTitle: string;
   tooltipDescription?: string;
+  priceSub?: string;
   price?: IPrice;
   isTotal: Boolean;
   isNewPriceCategory: Boolean;
   showAboIcon: Boolean;
   isPriceDisable: Boolean;
   isAlternativeText?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   perMonthCurrent?: number;
   iconName?: string;
+  prefixOldPrice?: string;
   perMonthOld?: number;
   totalCurrent?: number;
   totalOld?: number;
   positionX?: string;
   positionY?: string;
   url?: string;
+  target?: string;
+  rel?: string;
   routeObj?: any;
   linkTag?: string;
   isStrikeShown?: boolean;
@@ -44,6 +48,8 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       perMonthCurrent,
       perMonthOld,
       url,
+      target,
+      rel,
       totalOld,
       totalCurrent,
       tooltipDescription,
@@ -54,9 +60,11 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       linkTag,
       routeObj,
       combineRefAlternative,
+      prefixOldPrice,
       margin,
       isAlternativeText,
       vehicleComponentName,
+      priceSub,
       isTotal = false,
       showAboIcon = false,
       isPriceDisable = false,
@@ -67,6 +75,9 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const stylesItem = classnames(
       styles.priceItem,
       { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
+      { [styles.priceItemSearch]: vehicleComponentName === 'search' },
+      { [styles.priceItemRecently]: vehicleComponentName === 'recently' },
+      { [styles.priceItemComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
       { [styles.priceItemDisable]: isPriceDisable },
       { [styles.priceItemBuy]: isTotal }
     );
@@ -74,8 +85,9 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const priceItemCategoryClassName = classnames(
       styles.priceItemCategory,
       { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.priceItemCategoryFavorite]: vehicleComponentName === 'favorite' }
+      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' }
     );
+
     return (
       <div className={stylesItem}>
         {React.createElement(linkTag, {
@@ -83,15 +95,17 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           onClick: this.routeToActiveTab,
           className: priceItemCategoryClassName,
-          href: url
+          href: url,
+          target,
+          rel
         })}
         {tooltipDescription && (
           <Tooltip
-            tooltipClassName={vehicleComponentName === 'favorite' ? styles.tooltipWrapFavorites : ''}
+            tooltipClassName={styles.tooltipWrapFavorites}
             description={tooltipDescription}
             positionX={positionX}
             positionY={positionY}
-            iconName={vehicleComponentName === 'favorite' ? 'infoIcon' : iconName}
+            iconName={'infoIcon'}
           />
         )}
         {isNewPriceCategory && (
@@ -105,13 +119,17 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
               {!isPriceDisable ? (
                 <>
                   {isStrikeShown && perMonthOld && (
-                    <VehicleFormattedPrice
-                      numbersAfterDot={0}
-                      className={styles.oldPrice}
-                      price={perMonthOld}
-                      isOld
-                      disableStyles
-                    />
+                    <div className={styles.oldPriceWrap}>
+                      {prefixOldPrice && <span className={styles.prefixOldPrice}>{prefixOldPrice}</span>}
+                      <VehicleFormattedPrice
+                        numbersAfterDot={0}
+                        className={styles.oldPrice}
+                        price={perMonthOld}
+                        size='semimedium'
+                        isOld
+                        disableStyles
+                      />
+                    </div>
                   )}
 
                   {perMonthCurrent && (
@@ -119,9 +137,10 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                       numbersAfterDot={0}
                       price={perMonthCurrent}
                       postfix={postfix}
+                      className={styles.priceMtl}
                       isNew={isStrikeShown}
-                      className={styles.largeMobilePrice}
-                      size={vehicleComponentName === 'search' && !isMobileOnly ? 'semimedium' : 'small'}
+                      size='semimedium'
+                      sub={priceSub}
                     />
                   )}
                 </>
@@ -135,6 +154,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                   className={styles.oldPrice}
                   price={totalOld}
                   postfix={isStrikeShown ? '2' : ''}
+                  size='semimedium'
                   isOld
                   disableStyles
                 />
@@ -145,7 +165,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                   price={totalCurrent}
                   isNew={isStrikeShown}
                   toRound={false}
-                  size={vehicleComponentName === 'search' && !isMobileOnly ? 'semimedium' : 'small'}
+                  size='semimedium'
                   afterCommaClassName={styles.priceAfterComma}
                   postfix={postfix}
                 />
@@ -155,7 +175,9 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           onClick: this.routeToActiveTab,
           className: styles.priceItemPrice,
-          href: url
+          href: url,
+          target,
+          rel
         })}
       </div>
     );

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

@@ -2,7 +2,7 @@
 
 .vehicleInfo
   box-sizing: border-box
-  padding: 8px 7px 14px 11px
+  padding: 8px 7px 14px 7px
   flex-shrink: 0;
   display: grid;
   text-align: left;
@@ -17,9 +17,6 @@
   +media-tablet-landscape-down()
     padding: 0 10px;
 
-    & > div:last-of-type
-      margin: auto;
-
   &::after
     content: '';
     position absolute;
@@ -27,7 +24,7 @@
     width: 1px;
     height: calc(100% - 10px);
     top: 10px;
-    background-color $grey-d3;
+    background-color rgba(76, 78, 100, 0.12);
 
     +media-phone-up()
       height: calc(100% - 20px);
@@ -51,11 +48,24 @@
       grid-auto-rows: 36px;
       grid-template-columns: 100%;
 
+      span
+        font-size: 11px;
+
       & > .consumptionCombined,
       & > div:last-of-type
         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%;
@@ -68,9 +78,25 @@
     +media-phone-up()
       grid-auto-rows: 38px;
 
+      & > .consumptionCombined span
+        font-size: 8px
+
     +media-tablet-landscape-up()
       grid-auto-rows: 36px;
 
+      span
+        font-size: 11px;
+
+      & .priceRatingSegmentWrapSRL
+        gap: 2px;
+        & > div
+          width: 13px;
+          height: 12px;
+
+      & .priceRatingSRL span
+        font-size: 8px;
+        margin-bottom: 2px;
+
   &.vehiclePropertiesComparable
     grid-template-columns: 100%;
     grid-auto-rows: 40px;
@@ -84,12 +110,15 @@
     +media-phone-up()
       grid-auto-rows: 38px;
 
-      & > .consumptionCombined
+      & > .consumptionCombined span
         font-size: 8px
 
     +media-tablet-landscape-up()
       grid-auto-rows: 36px;
 
+      span
+        font-size: 11px;
+
       & .priceRatingSegmentWrapSRL
         gap: 2px;
         & > div
@@ -97,7 +126,7 @@
           height: 12px;
 
       & .priceRatingSRL span
-        font-size: 10px;
+        font-size: 8px;
         margin-bottom: 2px;
 
   &.vehiclePropertiesSearch,
@@ -141,11 +170,6 @@
       & > .offerAvailability
         border: none;
 
-      & .carIconSearch
-        width: 30px;
-        height: 30px;
-        max-width: 28px;
-
       & .priceRatingSRL
         margin: auto;
 
@@ -177,14 +201,19 @@
         & + div
           border: none;
 
-      & .carIconSearch
-        width: 30px;
-        height: 30px;
-        max-width: 28px;
-
       & .priceRatingSRL
         margin: auto;
 
+  &.vehiclePropertiesRecently
+    grid-template-columns: 1fr;
+    display: grid;
+    grid-auto-rows: 44px;
+    padding: 0 10px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-row: 4;
+
   &.vehiclePropertiesMyVehicles
     &::after
       +media-tablet-landscape-down()

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

@@ -27,6 +27,8 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     currentSalesPrice,
     language,
     url,
+    target,
+    rel,
     regDate,
     linkTag,
     routeObj,
@@ -78,7 +80,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       icon: decoratedProps[prop].icon,
       description: decoratedProps[prop].value,
       className: styles[decoratedProps[prop].name],
-      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite') && styles.carIconSearch
+      classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch
     }));
 
     return mainPropertiesList.map((property: any, index: number) => (
@@ -94,15 +96,18 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
     { [styles.vehiclePropertiesSearch]: vehicleComponentName === 'search' },
     { [styles.vehiclePropertiesFavorite]: vehicleComponentName === 'favorite' },
     { [styles.vehiclePropertiesMyVehicles]: vehicleComponentName === 'myVehicles' },
+    { [styles.vehiclePropertiesRecently]: vehicleComponentName === 'recently' },
     { [styles.vehiclePropertiesIsAlternative]: combineRefAlternative },
   );
 
+  const conditionForRating = vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently';
+
   return (
     <>
       {React.createElement(linkTag, {
         children: (
         <>
-          {vehicleComponentName === 'comparable' ? renderProperty(getMainPropertiesForComparableCars) : ''}
+          {vehicleComponentName === 'comparable' || vehicleComponentName === 'recently' ? renderProperty(getMainPropertiesForComparableCars) : ''}
           {vehicleComponentName === 'main' ? renderProperty(getMainPropertiesForLandingCars) : ''}
           {vehicleComponentName === 'landing' ? (
             <>
@@ -130,16 +135,18 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
             t={t}
             i18nPrefix={i18nPrefixForPriceRating ? `${i18nPrefixForPriceRating}priceRating.` : 'priceRating.'}
             rating={getPriceRating(currentSalesPrice, mlCurrentSalesPricePredicted)}
-            className={`${styles.priceRating} ${vehicleComponentName === 'search' || 'myVehicles' || 'favorite' ? styles.priceRatingSRL : ''}`}
-            classLabel={vehicleComponentName === 'search' || 'myVehicles' || 'favorite' ? styles.priceRatingLabelSRL : ''}
-            classSegmentWrapper={vehicleComponentName === 'search' || 'myVehicles' || 'favorite' ? styles.priceRatingSegmentWrapSRL : ''}
+            className={`${styles.priceRating} ${conditionForRating ? styles.priceRatingSRL : ''}`}
+            classLabel={conditionForRating ? styles.priceRatingLabelSRL : ''}
+            classSegmentWrapper={conditionForRating ? styles.priceRatingSegmentWrapSRL : ''}
           />
         </>
       ),
         ...routeObj,
         className: wrapClasses,
         onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
-        href: url
+        href: url,
+        target,
+        rel
       })}
     </>
   );

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

@@ -13,34 +13,51 @@
     padding: 13px 12px 0 8px
 
   &.vehiclePriceSectionSearch
+    padding: 0 10px;
     +media-tablet-landscape-up()
       flex-shrink: 0;
-      padding: 0 5px 0 15px;
-      border-left: 1px solid $grey-d
+      padding: 24px 5px 0 15px;
+      border-left: 1px solid rgba(76, 78, 100, 0.12)
 
   &.vehiclePriceSectionFavorite
-    padding: 0 10px 0 10px
+    padding: 1px 10px 0 10px
     +media-tablet-landscape-up()
+      margin-top: -1px;
       flex-shrink: 0;
       padding: 0 5px 0 15px;
-      border-left: 1px solid $grey-d
+      border-left: 1px solid rgba(76, 78, 100, 0.12)
       gap: 3px;
 
+  &.vehiclePriceSectionRecently
+    padding: 1px 10px 0 10px
+
 .vehiclePriceTitle
-  color: $grey-3
-  display block;
+  color: rgba(76, 78, 100, 0.87);
+  display flex;
+  align-items: center;
   flex-shrink: 0;
   font-size: 11px;
   height: 20px;
 
-  +media-phone-up()
+  +media-tablet-landscape-up()
     font-size 10px
     height: 12px;
 
   &.vehiclePriceTitleSearch
+    font-size: 12px;
+    height: 44px;
+
+  &.vehiclePriceTitleFavorite
+    font-size: 12px;
+    height: 42px;
+
     +media-tablet-landscape-up()
-      font-size: 11px;
-      height: 20px;
+      font-size: 13px;
+      height: 46px;
+
+  &.vehiclePriceTitleRecently
+    font-size: 12px;
+    height: 42px;
 
 .addOfferButton
   white-space: normal
@@ -51,30 +68,34 @@
   width: 100%
   height: 40px
   font-size: 16px
-  margin-top: 5px !important;
+  margin-top: 8px !important;
   font-weight bold !important;
   border-radius: 0 !important;
-  text-transform: uppercase !important
 
 .isAlternativeButton
   background-color: $alternative !important
 
 .wrapCheckbox
-  height: 42px;
-  & > div
-    order: 1;
+  min-height: 42px !important;
+  justify-content: space-between !important;
+  margin-left: 0 !important;
+
   & span
-    margin: 0 !important;
     color: rgba(76, 78, 100, 0.87);
+    font-size: 12px;
+
+    +media-tablet-landscape-up()
+      font-size: 13px;
 
 .wrapHandleCompare
   display: flex;
   gap: 8px;
-  border-top: 1px solid $grey-d3;
+  border-top: 1px solid rgba(76, 78, 100, 0.12);
   padding-top: 15px;
+  justify-content: center;
 
   +media-tablet-landscape-up()
-    margin-top: 19px;
+    margin-top: 12px;
     padding-top: 0;
     border: none;
 
@@ -85,19 +106,18 @@
   display: flex !important;
 
 .btnCarToCompare
-  display: flex;
+  display: flex !important;
   height: 30px;
-  align-items: center;
-  text-transform uppercase !important
-  width: 100%;
+  font-size: 13px !important;
   min-width: auto !important;
-  max-width: 100% !important;
+  width: 100%;
+
+  +media-tablet-landscape-up()
+    width: 100%;
 
 .btnPlusIcon
-  font-size: 26px;
-  margin-right: 10px;
-  line-height: 26px;
+  font-size: 13px;
+  margin-right: 5px;
 
-.btnText
-  position: relative;
-  top: -2px;
+  +media-tablet-landscape-up()
+    margin-right: 10px;