@bytebrand/fe-ui-core 4.1.186 → 4.1.188

package/package.json

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

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

@@ -53,7 +53,7 @@
 .priceItemBuy
   border-top: 1px solid rgba(76, 78, 100, 0.12);
 
-  .priceItemPrice
+  +media-tablet-landscape-up()
     transform: translateX(-6px);
 
 .priceItemCategory
@@ -121,7 +121,8 @@
     display: inline-flex;
 
 .priceMtl
-  transform: translateX(6px);
+  &.priceMtlActive
+    transform: translateX(6px);
 
 .priceNewBlock
   flex-shrink: 0;

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={styles.priceMtl}
+                      className={classnames(styles.priceMtl, { [styles.priceMtlActive]: !!priceSub})}
                       isNew={isStrikeShown}
                       size='semimedium'
                       sub={priceSub}

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

@@ -140,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: t('vehicleProps:value.priceSub'),
+        priceSub: isMobileOnly ? null : t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
       },
       {
@@ -150,7 +150,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         postfix: '1,3',
         isPriceDisable: !isLeasingActive,
         title: t('vehicleProps:title.leasing'),
-        priceSub: t('vehicleProps:value.priceSub'),
+        priceSub: isMobileOnly ? null : t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
       }
     ];
@@ -266,7 +266,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && (
           <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
         )}
-        {vehicleComponentName === 'search' && isMobileOnly && (
+        {isMobileOnly && !showCompareCheckboxes && (
           <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
         )}
         {ListPrices}
@@ -287,7 +287,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
           </Button>
         ) : null}
         {showOfferBtn ? (
-          <Button color='primary' className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+          <Button variant={vehicleComponentName === 'recently' ? 'outlined' : 'contained'} className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
         ) : ''}
       </section>
     );

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -58,7 +58,7 @@
     margin-bottom: 5px;
     padding-bottom: 8px;
     +media-tablet-landscape-up()
-      height: 252px;
+      min-height: 252px;
       box-sizing: border-box;
       border: 1px solid rgba(76, 78, 100, 0.12);
       padding: 10px;
@@ -101,7 +101,7 @@
     & [class*='withStats__topWrapper']
       left: 16px;
       right: 16px;
-      
+
     & [class*='withStats__controls']
       padding: 0 16px;
 
@@ -126,7 +126,7 @@
     & [class*='withStats__topWrapper']
       left: 16px;
       right: 16px;
-      
+
     & [class*='withStats__controls']
       padding: 0 16px;
 

package/source/components/_common/FilterLabel/FilterLabel.styl

@@ -14,6 +14,7 @@
   font-size: 8px
   vertical-align: middle
   flex-shrink: 0
+  margin-left:5px
 
 .labelVertical
   flex-direction: column;

package/source/components/_common/FilterLabel/FilterLabel.tsx

@@ -11,8 +11,7 @@ interface IFilterLabelProps {
 
 const FilterLabel: React.FunctionComponent<IFilterLabelProps> = ({ text, agg, isVertical }) => (
   <span className={classnames(styles.label, { [styles.labelVertical]: isVertical }) }>
-    <span className={styles.labelText}>{text}</span>
-    <span className={styles.labelAgg}>(<FormattedNumber numbersAfterDot={0} value={agg} />)</span>
+    <span className={styles.labelText}>{text}<span className={styles.labelAgg}>(<FormattedNumber numbersAfterDot={0} value={agg} />)</span></span>
   </span>
 );
 

package/source/components/_common/MaterialAutocomplete/MaterialAutocomplete.tsx

@@ -101,7 +101,7 @@ const MaterialAutocomplete: React.FC<IMaterialAutocompleteProps> = ({
         handleHomeEndKeys
         value={value}
         name={name}
-        error={error ? error.toString() : error}
+        error={error ? error.toString() : ''}
         readOnly={readOnly}
         listwithimage={listWithImage}
         onChange={(e, newValue, reason: string, details?: { option: any }) => {