@bytebrand/fe-ui-core 4.1.161 → 4.1.163

package/package.json

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

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

@@ -9,6 +9,16 @@
   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()
@@ -92,8 +102,19 @@
   align-items: flex-end;
   color: inherit;
 
+.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);
@@ -139,4 +160,4 @@
 
 .tooltipWrapFavorites
   transform: translateY(0px);
-  margin-left: 5px;
+  margin-left: 5px;

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

@@ -20,6 +20,7 @@ export interface IVehiclePriceItemProps {
   vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   perMonthCurrent?: number;
   iconName?: string;
+  prefixOldPrice?: string;
   perMonthOld?: number;
   totalCurrent?: number;
   totalOld?: number;
@@ -59,6 +60,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       linkTag,
       routeObj,
       combineRefAlternative,
+      prefixOldPrice,
       margin,
       isAlternativeText,
       vehicleComponentName,
@@ -73,6 +75,7 @@ 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 },
@@ -85,8 +88,6 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' }
     );
 
-    const addCustomTooltipClass = vehicleComponentName === 'favorite' || vehicleComponentName === 'recently';
-
     return (
       <div className={stylesItem}>
         {React.createElement(linkTag, {
@@ -100,11 +101,11 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
         })}
         {tooltipDescription && (
           <Tooltip
-            tooltipClassName={addCustomTooltipClass ? styles.tooltipWrapFavorites : ''}
+            tooltipClassName={styles.tooltipWrapFavorites}
             description={tooltipDescription}
             positionX={positionX}
             positionY={positionY}
-            iconName={addCustomTooltipClass ? 'infoIcon' : iconName}
+            iconName={'infoIcon'}
           />
         )}
         {isNewPriceCategory && (
@@ -118,14 +119,17 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
               {!isPriceDisable ? (
                 <>
                   {isStrikeShown && perMonthOld && (
-                    <VehicleFormattedPrice
-                      numbersAfterDot={0}
-                      className={styles.oldPrice}
-                      price={perMonthOld}
-                      size='semimedium'
-                      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 && (

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

@@ -135,9 +135,6 @@
     grid-template-columns: 1fr 1fr;
     grid-auto-rows: 44px;
 
-    & .priceRatingSRL
-      margin: auto;
-
     & > .consumptionCombined
       white-space: pre-line;
       grid-column: 1 / span 2;

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

@@ -13,10 +13,10 @@
     padding: 13px 12px 0 8px
 
   &.vehiclePriceSectionSearch
+    padding: 0 10px;
     +media-tablet-landscape-up()
-      margin-top: -3px;
       flex-shrink: 0;
-      padding: 0 5px 0 15px;
+      padding: 24px 5px 0 15px;
       border-left: 1px solid rgba(76, 78, 100, 0.12)
 
   &.vehiclePriceSectionFavorite
@@ -44,9 +44,8 @@
     height: 12px;
 
   &.vehiclePriceTitleSearch
-    +media-tablet-landscape-up()
-      font-size: 11px;
-      height: 24px;
+    font-size: 12px;
+    height: 44px;
 
   &.vehiclePriceTitleFavorite
     font-size: 12px;
@@ -69,10 +68,9 @@
   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

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

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import VehiclePriceItem from '../VechiclePriceItem/VechiclePriceItem';
 import { IBuy, ILeasing, IFinancing, ICommonFinancing } from '../../../../framework/types/types';
 import { Hidden } from 'react-grid-system';
+import { isMobileOnly } from 'react-device-detect';
 import Button from '../../../../components/_common/Button/Button';
 import CheckboxMaterial from '../../../../components/_common/CheckboxMaterial/CheckboxMaterial';
 import IconSVG from '../../../_common/IconSVG/IconSVG';
@@ -20,7 +21,6 @@ export interface IVehiclePriceSectionProps {
   linkTag?: string;
   classButton?: string;
   showAboIcon?: boolean;
-  showDashboardButton?: boolean;
   dashboardButtonText?: string;
   isNewPriceCategory?: boolean;
   vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
@@ -99,7 +99,6 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       routeObj,
       toggleCarToCompare,
       toCompare,
-      showDashboardButton,
       dashboardButtonText,
       classButton,
       onRemoveClick,
@@ -140,6 +139,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
         perMonthOld: oldMonthlyInstallment,
         perMonthCurrent: monthlyInstallment,
         title: t('vehicleProps:title.financing'),
+        prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
         postfix: '3',
         priceSub: t('vehicleProps:value.priceSub'),
         tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
@@ -147,6 +147,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       {
         perMonthOld: lOldMonthlyInstallment,
         perMonthCurrent: lMonthlyInstallment,
+        prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
         postfix: '1,3',
         isPriceDisable: !isLeasingActive,
         title: t('vehicleProps:title.leasing'),
@@ -155,7 +156,9 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
       }
     ];
 
-    const showAboCondition = vehicleComponentName !== 'favorite' && vehicleComponentName !== 'recently';
+    const showAboCondition = vehicleComponentName !== 'favorite' &&
+                             vehicleComponentName !== 'recently' &&
+                             vehicleComponentName !== 'search';
 
     const Abo = showAboCondition ? [
       {
@@ -201,6 +204,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
     {
       title,
       priceSub,
+      prefixOldPrice,
       totalCurrent,
       tooltipDescription,
       perMonthOld,
@@ -233,6 +237,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
           rel={rel}
           isStrikeShown={isStrikeShown}
           iconName={iconName}
+          prefixOldPrice={prefixOldPrice}
           totalCurrent={totalCurrent}
           postfix={postfix}
           linkTag={linkTag}
@@ -249,7 +254,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
     );
     return (
       <section className={vehiclePriceSectionClassName}>
-        {vehicleComponentName === 'favorite' && showCompareCheckboxes ? (
+        {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
           <CheckboxMaterial
             checked={toCompare}
             onChange={toggleCarToCompare}
@@ -257,7 +262,13 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
             label={t('FavoritesPage:toCompare')}
             formControlClassName={styles.wrapCheckbox}
           />
-        ) : <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>}
+        )}
+        {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && (
+          <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+        )}
+        {vehicleComponentName === 'search' && isMobileOnly && (
+          <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+        )}
         {ListPrices}
         {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
           <div className={styles.wrapHandleCompare}>
@@ -270,20 +281,13 @@ 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')}
           </Button>
         ) : null}
         {showOfferBtn ? (
-          <Hidden xs>
-            <Button color='primary' className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
-          </Hidden>
+          <Button color='primary' className={buttonClassNames} onClick={this.onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
         ) : ''}
       </section>
     );

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

@@ -26,8 +26,8 @@
     display block
   &.wrapTitlesSearch
     display block
-    & p
-      margin: 0;
+    +media-tablet-landscape-up()
+      display flex
   &.wrapTitlesFavorite
     display: flex;
     +media-tablet-landscape-up()
@@ -69,7 +69,10 @@
 
   &.optionTitleSearch
     font-size: 12px;
-    margin-top: 2px;
+    margin-top: 3px;
+    +media-tablet-landscape-up()
+      margin-left: 8px;
+      margin-top: 0;
   &.optionTitleFavorite
     font-size: 12px;
     margin-left: 8px;

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -7,7 +7,7 @@
   display: grid;
 
   +media-tablet-landscape-up()
-    border-radius: 3px;
+    border-radius: 10px;
     border: 1px solid rgba(76, 78, 100, 0.12)
 
   &.disableBorder
@@ -61,13 +61,18 @@
       'image image'\
       'info price'\
       'seoText seoText'
-    grid-template-columns: 50% 50%;
-    border-bottom: 6px solid $skyBlue;
+    grid-template-columns: 55% 45%;
+    border-bottom: 1px solid #DFDFDF;
+    border-top: 1px solid #DFDFDF;
+    margin-bottom: 5px;
+    padding-bottom: 8px;
     +media-tablet-landscape-up()
+      height: 252px;
+      box-sizing: border-box;
       border: 1px solid rgba(76, 78, 100, 0.12);
       padding: 10px;
       grid-gap: 10px 15px;
-      grid-template-columns: 260px 1fr 169px;
+      grid-template-columns: 260px 1fr 189px;
       grid-template-areas:
         'title title price'\
         'image info price'
@@ -91,6 +96,7 @@
         'image info price'
 
   &.vehicleWrapRecently
+    box-sizing: border-box;
     grid-template-areas:
       'title title'\
       'image image'\
@@ -108,172 +114,10 @@
     & [class*='withStats__controls']
       padding: 0 16px;
 
-  &.vehicleWrapMyVeicles
-    grid-template-areas:
-      'title title'\
-      'image image'\
-      'controls controls'\
-      'info price'\
-      'aggregation dealerWidget';
-    padding-bottom: 10px;
-    grid-template-columns: 50% 50%;
-    border-bottom: 6px solid $skyBlue;
+    +media-tablet-up()
+      max-width: 98%;
     +media-tablet-landscape-up()
-      border: 1px solid rgba(76, 78, 100, 0.12);
-      padding: 10px;
-      grid-gap: 0 15px;
-      grid-template-columns: 260px 1fr 169px 236px;
-      grid-template-areas:
-        'title title title dealerWidget'\
-        'image info price dealerWidget'\
-        'image info price dealerWidget'\
-        'image info price controls'\
-        'image info price controls'\
-        'aggregation aggregation aggregation buttonSell'
-
-.figure
-  position: relative
-  margin: 0
-  padding-top: 75%
-  & > :first-child
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-
-.labelWrapper
-  border: none
-.labelWrapper::after
-  content: ''
-  position absolute
-  bottom: 0
-  width: 100%
-  height: 6px
-  background-color: $mantisGreen
-
-.topVehicle:before
-  border-color: $mantisGreen
-
-.redirectClassLink
-  width: 100%;
-  color: inherit;
-  text-decoration: none;
-  display: block;
-
-.gridAreaImage
-
-.gridAreaTitle
-  grid-area: title;
-  max-width: 100%;
-
-.gridAreaSeoText
-  width: 100%;
-  overflow: hidden
-  box-sizing: border-box;
-  padding: 10px
-  grid-area: seoText;
-
-.gridAreaImage
-  grid-area: image;
-
-.wrapAlternativeData
-  display flex
-  font-size: 12px;@import '../../theme/mixins.styl';
-@import '../../theme/theme.styl';
-
-.vehicle
-  position: relative
-  background-color: #fff;
-  display: grid;
-
-  +media-tablet-landscape-up()
-    border-radius: 3px;
-    border: 1px solid rgba(76, 78, 100, 0.12)
-
-  &.disableBorder
-     border-bottom: 0;
-
-  &.vehicleWrapMain,
-  &.vehicleWrapLanding,
-  &.vehicleWrapComparable
-    grid-template-areas:
-    'title title'\
-    'image image'\
-    'info price'\
-    'seoText seoText'
-
-  &.vehicleWrapLanding
-    grid-template-columns: 1fr 1fr;
-    border-bottom: 6px solid $skyBlue;
-
-    +media-tablet-landscape-up()
-      border: 1px solid rgba(76, 78, 100, 0.12);
-      grid-template-columns: 112px 1fr;
-
-  &.vehicleWrapComparable
-    min-width: 230px
-    margin: 0 4px
-    border-radius 3px
-    border: 1px solid rgba(76, 78, 100, 0.12);
-    grid-template-columns: 100px 1fr;
-
-    +media-tablet-down()
-      min-width: 340px;
-
-    +media-phone-only()
-      margin: 0 auto;
-      min-width: auto;
-      max-width: 335px;
-      width: 100%;
-      grid-template-columns: 155px 1fr;
-
-  &.vehicleWrapMain
-    grid-template-columns: 112px 1fr;
-    border-radius 3px
-    border: 1px solid rgba(76, 78, 100, 0.12);
-
-    +media-phone-only()
-      grid-template-columns: 155px 1fr;
-
-  &.vehicleWrapSearch
-    grid-template-areas:
-      'title title'\
-      'image image'\
-      'info price'\
-      'seoText seoText'
-    grid-template-columns: 50% 50%;
-    border-bottom: 6px solid $skyBlue;
-    +media-tablet-landscape-up()
-      border: 1px solid rgba(76, 78, 100, 0.12);
-      padding: 10px;
-      grid-gap: 10px 15px;
-      grid-template-columns: 260px 1fr 169px;
-      grid-template-areas:
-        'title title price'\
-        'image info price'
-
-  &.vehicleWrapFavorite
-    grid-template-areas:
-      'title title'\
-      'image image'\
-      'info price'\
-      'seoText seoText'
-    grid-template-columns: 170px 1fr;
-    border: 1px solid rgba(76, 78, 100, 0.12);
-    border-radius: 10px;
-    padding-bottom: 15px;
-
-    +media-tablet-landscape-down()
-      [class*='withStats__controls']:after
-        content: ''
-
-    +media-tablet-landscape-up()
-      padding: 10px;
-      grid-gap: 10px 15px;
-      grid-template-columns: 260px 1fr 245px;
-      grid-template-areas:
-        'title title price'\
-        'image info price'
+      max-width: 346px;
 
   &.vehicleWrapMyVeicles
     grid-template-areas:
@@ -327,8 +171,6 @@
   text-decoration: none;
   display: block;
 
-.gridAreaImage
-
 .gridAreaTitle
   grid-area: title;
   max-width: 100%;
@@ -356,9 +198,6 @@
     &:first-of-type
       color: $skyBlue;
 
-.svgIcon
-  margin-right: 10px;
-
 .isFirstReferenceCar
   border: 1px solid $skyBlue !important;
   background-color: #005CCB0D;
@@ -370,11 +209,4 @@
     align-items: center
 
     &:first-of-type
-      color: $skyBlue;
-
-.svgIcon
-  margin-right: 10px;
-
-.isFirstReferenceCar
-  border: 1px solid $skyBlue !important;
-  background-color: #005CCB0D;
+      color: $skyBlue;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -37,7 +37,6 @@ interface IVehicleSmallCardProps {
   isDealer?: boolean;
   isDealerSuperAdmin?: boolean;
   isReferenceSearch?: boolean;
-  showDashboardButton?: boolean;
   dashboardButtonText?: string;
   showNewLabel?: boolean;
   CircularProgressbar?: any;
@@ -138,7 +137,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     percentage,
     classButton,
     hasInteriorExteriorPhoto,
-    showDashboardButton,
     dashboardButtonText,
     showOfferBtn = false,
     showFavoriteStar = true,
@@ -198,7 +196,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
   };
 
   const routeObj = linkTag !== 'a'
-    ? { to: { pathname: url, state: { mainImageId, mainImageUrl: src, carId: id, isSavedCheckout: showDashboardButton, ...title } } }
+    ? { to: { pathname: url, state: { mainImageId, mainImageUrl: src, carId: id, isSavedCheckout: showOfferBtn, ...title } } }
     : '';
 
   const vehicleInfoProps = {
@@ -228,7 +226,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     target,
     rel,
     iconName,
-    showDashboardButton,
     dashboardButtonText,
     vehicleComponentName,
     classButton,
@@ -357,7 +354,6 @@ VehicleSmallCard.defaultProps = {
   showSlider: false,
   isDealerSuperAdmin: false,
   showCompareCheckboxes: false,
-  showDashboardButton: false,
   slider: {},
   stats: {},
   title: {},

package/source/components/_common/ExpansionPanel/ExpansionPanel.tsx

@@ -22,6 +22,8 @@ export interface IExpansionPanelProps {
   expandedClassName?: string;
   arrowIconClassName?: string;
   expanded?: string | boolean;
+  vehiclesComparedCount?: number;
+  widthCompareBlock?: number;
   isCompare?: boolean;
   accordionSummaryClassName?: string;
   accordionClassName?: string;
@@ -52,12 +54,14 @@ class ExpansionPanel extends React.Component<IExpansionPanelProps> {
       onChange,
       expanded,
       accordionClassName,
+      vehiclesComparedCount,
+      widthCompareBlock,
       isCompare = false
     } = this.props;
 
     const scrollElementClassName = classnames(reactScrollClassName);
     const subtitleCombinedClassName = classnames(styles.subTitle, subTitleClassName);
-
+    const widthForTitle = `${vehiclesComparedCount * widthCompareBlock}px`;
     return (
       <ConditionalWrapper
         condition={reactScrollName}
@@ -75,6 +79,7 @@ class ExpansionPanel extends React.Component<IExpansionPanelProps> {
               aria-controls={title}
               className={accordionSummaryClassName}
               id={title}
+              sx={isCompare && { width: widthForTitle }}
             >
               <span>
                 {title}

package/source/locales/data.ts

@@ -55,6 +55,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         co2: `${vehicleOption.co2} g/km `,
         na: 'N/A',
         priceSub: '/mtl.',
+        prefixOldPrice: 'ab',
         vehicleOwners: `${vehicleOption.vehicleOwners} Fahrzeughalter`,
         vehicleOwners_plural: `${count} Fahrzeughalter`,
         doorsOnly: `${vehicleOption.doorsOnly} Türen`,