@bytebrand/fe-ui-core 4.1.98 → 4.1.99

package/package.json

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

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

@@ -12,6 +12,7 @@
   &.priceItemFavorite
     height: 44px;
     +media-tablet-landscape-up()
+      height: 46px;
       &.priceItemBuy
         height: 52px;
 
@@ -20,11 +21,6 @@
       [class*='semimedium__']
         font-size: 16px;
 
-  +media-phone-up()
-    height: 42px;
-    &.priceItemFavorite
-      height: 42px;
-
   &:nth-of-type(3), &:last-of-type
     .tooltipWrap
       &__block

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

@@ -29,19 +29,29 @@
       gap: 3px;
 
 .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
     +media-tablet-landscape-up()
       font-size: 11px;
+      height: 24px;
+
+  &.vehiclePriceTitleFavorite
+    font-size: 12px;
+    height: 42px;
+
+    +media-tablet-landscape-up()
+      font-size: 13px;
+      height: 46px;
 
 .addOfferButton
   white-space: normal

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

@@ -18,7 +18,10 @@ export interface IVehiclePriceSectionProps {
   isDealerSuperAdmin?: boolean;
   routeObj?: any;
   linkTag?: string;
+  classButton?: string;
   showAboIcon?: boolean;
+  showDashboardButton?: boolean;
+  dashboardButtonText?: string;
   isNewPriceCategory?: boolean;
   vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
   monthlyInstallment?: number;
@@ -27,6 +30,7 @@ export interface IVehiclePriceSectionProps {
   url?: string;
   iconName?: string;
   mainImageId?: string;
+  showCompareCheckboxes?: boolean;
   toRound?: boolean;
   showOfferBtn?: boolean;
   margin?: number;
@@ -90,7 +94,11 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       routeObj,
       toggleCarToCompare,
       toCompare,
+      showDashboardButton,
+      dashboardButtonText,
+      classButton,
       onRemoveClick,
+      showCompareCheckboxes,
       vatRate,
       iconName,
       vehicleComponentName,
@@ -117,7 +125,8 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
 
     const vehiclePriceTitleClassName = classnames(
       styles.vehiclePriceTitle,
-      { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' || 'favorite' }
+      { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
+      { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || 'myVehicles' }
     );
     const priceItemsGlobal = [
       {
@@ -223,12 +232,13 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       );
     });
     const buttonClassNames = classnames(
+      classButton,
       styles.buttonDetails,
       { [styles.isAlternativeButton]: typeAlternative }
     );
     return (
       <section className={vehiclePriceSectionClassName}>
-        {vehicleComponentName === 'favorite' ? (
+        {vehicleComponentName === 'favorite' && showCompareCheckboxes ? (
           <CheckboxMaterial
             checked={toCompare}
             onChange={toggleCarToCompare}
@@ -238,7 +248,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
           />
         ) : <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>}
         {ListPrices}
-        {vehicleComponentName === 'favorite' && (
+        {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
           <div className={styles.wrapHandleCompare}>
             <Button variant='outlined' onClick={onRemoveClick} className={styles.btnCompareRemove} color='error'>
               <IconSVG className={styles.removeIcon} name='trashRed' customDimensions />
@@ -249,6 +259,11 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
             </Button>
           </div>
         )}
+        {showDashboardButton && (
+          <Button color='primary' className={buttonClassNames} onClick={this.onDetailsClick}>
+            {dashboardButtonText}
+          </Button>
+        )}
         {isDealerSuperAdmin && !typeAlternative ? (
           <Button className={styles.addOfferButton} onClick={this.onAddOfferClick}>
             {t('vehicleProps:title.addOfferToMainSlide')}

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

@@ -7,7 +7,7 @@
   display: block
   padding: 10px 30px 10px 16px
   +media-tablet-landscape-up()
-    padding: 7px 6px;
+    padding: 6px;
     display: flex
   &.infoSectionSearch
     +media-tablet-landscape-up()
@@ -27,7 +27,8 @@
       margin: 0;
   &.wrapTitlesFavorite
     display: flex;
-
+    +media-tablet-landscape-up()
+      display: block;
 
 .manufacturerModel
   font-size: 16px
@@ -49,7 +50,7 @@
   margin 0
   max-width: 88vw
 
-  +media-phone-up()
+  +media-tablet-landscape-up()
     margin: 0 0 -1px 3px
     max-width: 100%;
 
@@ -67,6 +68,9 @@
   &.optionTitleFavorite
     font-size: 12px;
     margin-left: 8px;
+    +media-tablet-landscape-up()
+      margin-left: -3px;
+      margin-top: 3px;
   &.optionTitleIsAlternative
     overflow: hidden;
     max-width: 260px;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -37,6 +37,8 @@ interface IVehicleSmallCardProps {
   isDealer?: boolean;
   isDealerSuperAdmin?: boolean;
   isReferenceSearch?: boolean;
+  showDashboardButton?: boolean;
+  dashboardButtonText?: string;
   showNewLabel?: boolean;
   CircularProgressbar?: any;
   slider?: IVehicleSliderProps | IVehicleSliderForSRLProps;
@@ -53,6 +55,7 @@ interface IVehicleSmallCardProps {
   offer?: object;
   price?: IPrice;
   seoText?: string;
+  classButton?: string;
   mainImageId?: string;
   crawledAt?: string;
   modificationDate?: string;
@@ -70,6 +73,7 @@ interface IVehicleSmallCardProps {
   showSlider?: boolean;
   showOfferBtn?: boolean;
   hasInteriorExteriorPhoto?: boolean;
+  showCompareCheckboxes?: boolean;
   showFavoriteStar?: boolean;
   minimizeData?: boolean;
   onContainerClick?: (event?: any) => void;
@@ -100,6 +104,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     consumption,
     environmentEmissions,
     isReferenceSearch,
+    showCompareCheckboxes,
     CircularProgressbar,
     engineData,
     offer,
@@ -131,7 +136,10 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     iconName,
     showSlider,
     percentage,
+    classButton,
     hasInteriorExteriorPhoto,
+    showDashboardButton,
+    dashboardButtonText,
     showOfferBtn = false,
     showFavoriteStar = true,
     minimizeData = false,
@@ -213,7 +221,10 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     id,
     url,
     iconName,
+    showDashboardButton,
+    dashboardButtonText,
     vehicleComponentName,
+    classButton,
     linkTag,
     onAddOfferToMainSlideClick,
     isDealerSuperAdmin,
@@ -224,6 +235,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     combineRefAlternative,
     typeAlternative,
     isAlternative,
+    showCompareCheckboxes,
     ...price,
     ...compareProps
   };
@@ -329,6 +341,8 @@ VehicleSmallCard.defaultProps = {
   isTop: false,
   showSlider: false,
   isDealerSuperAdmin: false,
+  showCompareCheckboxes: false,
+  showDashboardButton: false,
   slider: {},
   stats: {},
   title: {},

package/source/components/_common/withStats/withStats.styl

@@ -23,7 +23,7 @@ $indent = 10px
   user-select: none;
 
   +media-tablet-landscape-up()
-    padding: 0 $indent
+    padding: 0 6px
 
   &::after
     position: absolute;
@@ -139,8 +139,8 @@ $indent = 10px
   gap: 10px;
 
   +media-tablet-landscape-up()
-    left: 10px
-    right: 10px
+    left: 6px
+    right: 6px
 
 .priceDifferencePerCent
   margin-left: auto;