@bytebrand/fe-ui-core 4.2.209 → 4.2.210

package/package.json

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

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

@@ -36,6 +36,7 @@ export interface IVehiclePriceItemProps {
   combineRefAlternative?: boolean;
   postfix?: string;
   margin?: number;
+  isMarge?: boolean;
 }
 class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
   routeToActiveTab = () => {
@@ -70,7 +71,8 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       showAboIcon = false,
       isPriceDisable = false,
       isNewPriceCategory = false,
-      isStrikeShown = false
+      isStrikeShown = false,
+      isMarge
     } = this.props;
 
     const stylesItem = classnames(
@@ -150,7 +152,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                 <span className={styles.noPrice}>---</span>
               )}
 
-              {isStrikeShown && isTotal &&  (
+              {isStrikeShown && isTotal && !isMarge && (
                 <VehicleFormattedPrice
                   numbersAfterDot={0}
                   className={styles.oldPrice}

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

@@ -195,7 +195,8 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     {
       isTotal: true,
       totalCurrent: margin ? margin : currentSalesPriceExtra,
-      title: t('vehicleProps:title.marge')
+      title: t('vehicleProps:title.marge'),
+      isMarge: true
     }
   ] : [
     ...priceItemsGlobal,
@@ -254,6 +255,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
           routeObj={routeObj}
           vehicleComponentName={vehicleComponentName}
           combineRefAlternative={combineRefAlternative}
+          isMarge={props.isMarge}
         />
       ))}
       {vehicleComponentName === 'favorite' && showCompareCheckboxes && (

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

@@ -28,6 +28,9 @@
     display block
     +media-tablet-landscape-up()
       display flex
+  &.wrapTitlesAlternative
+    +media-tablet-landscape-up()
+      flex-wrap: wrap
   &.wrapTitlesFavorite
     display: flex;
     +media-tablet-landscape-up()
@@ -57,7 +60,7 @@
 
   +media-tablet-landscape-up()
     margin: 0 0 -1px 3px
-    max-width: 100%;
+    overflow: hidden
 
 .optionTitle
   display: flex
@@ -72,6 +75,7 @@
     margin-top: 3px;
     +media-tablet-landscape-up()
       margin-left: 8px;
+      width: 100%
       margin-top: 0;
   &.optionTitleFavorite
     font-size: 12px;
@@ -83,7 +87,12 @@
     margin-left: 8px;
   &.optionTitleIsAlternative
     overflow: hidden;
-    max-width: 260px;
+    .subModel
+      margin: 5px 0 0 0
+      +media-tablet-landscape-up()
+        max-width: 260px;
+    +media-tablet-landscape-up()
+      margin-left: 0
 
 .sponsored
   font-weight: 700

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

@@ -33,7 +33,8 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
     styles.wrapTitles,
     { [styles.wrapTitlesFavorite]: vehicleComponentName === 'favorite' },
     { [styles.wrapTitlesRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
+    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+    { [styles.wrapTitlesAlternative]: combineRefAlternative }
   );
   const optionTitleClassName = classnames(
     styles.optionTitle,

package/source/components/_common/Button/Button.tsx

@@ -15,7 +15,6 @@ export interface IButtonProps {
   color?: variantColor;
   children?: any;
   variant?: variantType;
-  getRef?: (ref: HTMLButtonElement) => void;
 
   disabled?: boolean;
   loading?: boolean;
@@ -26,7 +25,7 @@ export interface IButtonProps {
   onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-const Button: React.FC<IButtonProps> = ({ getRef, className, color, onClick, onMouseEnter, onMouseLeave, variant, loading, disabled, children  }: IButtonProps) => {
+const Button: React.FC<IButtonProps> = ({ className, color, onClick, onMouseEnter, onMouseLeave, variant, loading, disabled, children  }: IButtonProps) => {
   const onHandlerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
@@ -53,7 +52,6 @@ const Button: React.FC<IButtonProps> = ({ getRef, className, color, onClick, onM
     onClick: onHandlerClick,
     onMouseEnter: onHandlerMouseEnter,
     onMouseLeave: onHandlerMouseLeave,
-    ref:getRef,
     disabled: disabled || loading
   };
 
@@ -71,7 +69,7 @@ Button.defaultProps = {
   buttonType: 'button',
 
   onClick: () => { },
-  getRef: () => { },
+
   onMouseEnter: () => { },
   onMouseLeave: () => { }
 };

package/source/components/_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper.tsx

@@ -23,17 +23,13 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
   const dealerId = _get(car, 'metaData.ownerId') || null;
   const carId = _get(car, '_id', '');
   const onAutoDeIdClick = () => {
-    btnEl.current?.click();
+    btnEl.current.onClick();
   };
 
   const controlsContainerClassName = classnames(
     styles.controlsContainer,
     controlsClassContainer
   );
-
-  const getRef = (ref: HTMLButtonElement): void => {
-    btnEl.current = ref;
-  };
   return (
     <>
       <div className={controlsContainerClassName}>
@@ -46,7 +42,7 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
             isLoading: boolean,
             isSale: boolean,
             isAlternative: boolean
-          ) => {
+            ) => {
             const { metaData } = car;
             const isAlternativeType = !!metaData && !!metaData.type;
             const offerButtonClassName = classnames(
@@ -67,10 +63,10 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
 
             return (
               <StyledButton
+                refs={btnEl}
                 className={offerButtonClassName}
                 onClick={onClick}
                 loading={isLoading}
-                getRef={getRef}
               >
                 {isOfferRequested
                   ? null