@bytebrand/fe-ui-core 4.1.104 → 4.1.105

package/package.json

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

package/source/components/SearchPage/SearchTopBar/SearchTopBar.styl

@@ -55,6 +55,8 @@
     height: 100%
   [class*='MuiOutlinedInput-input']
     padding: 5.5px 30px 7.5px 6px !important
+  +media-tablet-landscape-down()
+    min-width: auto;
 
 .saveSearch
   flex-basis: 20%

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

@@ -16,8 +16,15 @@
       &.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;
 

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

@@ -17,7 +17,7 @@ export interface IVehiclePriceItemProps {
   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;
   perMonthOld?: number;
@@ -69,6 +69,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const stylesItem = classnames(
       styles.priceItem,
       { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
+      { [styles.priceItemRecently]: vehicleComponentName === 'recently' },
       { [styles.priceItemComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' },
       { [styles.priceItemDisable]: isPriceDisable },
       { [styles.priceItemBuy]: isTotal }
@@ -77,9 +78,11 @@ 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' }
     );
+
+    const addCustomTooltipClass = vehicleComponentName === 'favorite' || vehicleComponentName === 'recently';
+
     return (
       <div className={stylesItem}>
         {React.createElement(linkTag, {
@@ -91,11 +94,11 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
         })}
         {tooltipDescription && (
           <Tooltip
-            tooltipClassName={vehicleComponentName === 'favorite' ? styles.tooltipWrapFavorites : ''}
+            tooltipClassName={addCustomTooltipClass ? styles.tooltipWrapFavorites : ''}
             description={tooltipDescription}
             positionX={positionX}
             positionY={positionY}
-            iconName={vehicleComponentName === 'favorite' ? 'infoIcon' : iconName}
+            iconName={addCustomTooltipClass ? 'infoIcon' : iconName}
           />
         )}
         {isNewPriceCategory && (

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

@@ -201,6 +201,16 @@
       & .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

@@ -78,7 +78,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 +94,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,9 +133,9 @@ 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 : ''}
           />
         </>
       ),

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

@@ -28,6 +28,9 @@
       border-left: 1px solid rgba(76, 78, 100, 0.12)
       gap: 3px;
 
+  &.vehiclePriceSectionRecently
+    padding: 1px 10px 0 10px
+
 .vehiclePriceTitle
   color: rgba(76, 78, 100, 0.87);
   display flex;
@@ -53,6 +56,10 @@
       font-size: 13px;
       height: 46px;
 
+  &.vehiclePriceTitleRecently
+    font-size: 12px;
+    height: 42px;
+
 .addOfferButton
   white-space: normal
   margin: 5px 0 !important;

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

@@ -23,7 +23,7 @@ export interface IVehiclePriceSectionProps {
   showDashboardButton?: boolean;
   dashboardButtonText?: string;
   isNewPriceCategory?: boolean;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   monthlyInstallment?: number;
   oldMonthlyInstallment?: number;
   positionY?: string;
@@ -120,12 +120,14 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
     const vehiclePriceSectionClassName = classnames(
       styles.vehiclePriceSection,
       { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' }
+      { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' },
+      { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' }
     );
 
     const vehiclePriceTitleClassName = classnames(
       styles.vehiclePriceTitle,
       { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
+      { [styles.vehiclePriceTitleRecently]: vehicleComponentName === 'recently' },
       { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' }
     );
     const priceItemsGlobal = [
@@ -148,7 +150,9 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       }
     ];
 
-    const Abo = vehicleComponentName !== 'favorite' ? [
+    const showAboCondition = vehicleComponentName !== 'favorite' && vehicleComponentName !== 'recently';
+
+    const Abo = showAboCondition ? [
       {
         perMonthOld: oldMonthlyInstallment,
         perMonthCurrent: monthlyInstallment,

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

@@ -15,6 +15,8 @@
   &.infoSectionMyVehicles
     +media-phone-only()
       display: flex
+  &.infoSectionRecently
+    padding: 12px 30px 12px 16px
 
 .wrapTitles
   display flex;
@@ -29,6 +31,8 @@
     display: flex;
     +media-tablet-landscape-up()
       display: block;
+  &.wrapTitlesRecently
+    display: flex;
 
 .manufacturerModel
   font-size: 16px
@@ -71,6 +75,9 @@
     +media-tablet-landscape-up()
       margin-left: -3px;
       margin-top: 3px;
+  &.optionTitleRecently
+    font-size: 12px;
+    margin-left: 8px;
   &.optionTitleIsAlternative
     overflow: hidden;
     max-width: 260px;

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

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

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -90,6 +90,24 @@
         'title title price'\
         'image info price'
 
+  &.vehicleWrapRecently
+    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;
+
+    & [class*='withStats__topWrapper']
+      left: 16px;
+      right: 16px;
+      
+    & [class*='withStats__controls']
+      padding: 0 16px;
+
   &.vehicleWrapMyVeicles
     grid-template-areas:
       'title title'\

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -32,7 +32,7 @@ interface IVehicleSmallCardProps {
   t?: (key: string, options?: object) => string;
   i18nPrefixForPriceRating?: string;
   language?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   isTop?: boolean;
   isDealer?: boolean;
   isDealerSuperAdmin?: boolean;
@@ -164,6 +164,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     { [styles.vehicleWrapComparable]: vehicleComponentName === 'comparable' },
     { [styles.vehicleWrapMyVeicles]: vehicleComponentName === 'myVehicles' },
     { [styles.vehicleWrapFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehicleWrapRecently]: vehicleComponentName === 'recently' },
     { [styles.topVehicle]: isTop },
     { [styles.disableBorder]: minimizeData },
     { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 && currentPage === 1 },
@@ -263,6 +264,10 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     e.preventDefault();
     if (baseUrl) window.open(baseUrl, '_blank');
   };
+  const showComponentLikeSlider = vehicleComponentName === 'search' ||
+                                  vehicleComponentName === 'myVehicles' ||
+                                  vehicleComponentName === 'favorite'
+                                  vehicleComponentName === 'recently';
   return (
     <section className={wrapperClassName} onClick={onContainerClick} id={id}>
       {createElement(linkTag, {
@@ -278,7 +283,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           <>
             {showSlider ? (
               <>
-                {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' || vehicleComponentName === 'favorite' ? (
+                {showComponentLikeSlider ? (
                   <>
                     <DecoratedSliderForSRL {...decoratedSliderProps} />
                     {renderIDInfo && isDealer ? renderIDInfo() : null}

package/source/framework/types/types.ts

@@ -89,7 +89,7 @@ export interface IVehicleInfo {
   i18nPrefixForPriceRating?: string;
   gearbox?: string;
   regDate?: number;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   language?: string;
   combineRefAlternative?: boolean;
   routeObj?: any;
@@ -115,7 +115,7 @@ export interface IVehicleTitleProps {
   model?: string;
   subModel?: string;
   option?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   isSponsored?: boolean;
   showFavoriteStar?: boolean;
   id?: string;