@bytebrand/fe-ui-core 4.1.40 → 4.1.42

package/package.json

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

package/source/components/PriceRating/PriceRating.styl

@@ -4,29 +4,38 @@
 
 .wrapper
   text-align: center
-  white-space: nowrap
+  white-space: nowrap;
+  position: relative;
   width: 100%
 
 .pointer
   cursor: pointer
 
 .label
-  display: block
-  font-family: $font-style-arial
-  font-size: 8px
-  line-height: 1;
+  font-size: 12px
   text-transform: uppercase
   font-weight: bold
-  color: $priceReviewColors[darkBackground]
-  margin-bottom: 2px
-
-  +media-phone-only()
-    font-size: 10px
-    margin-bottom: 6px;
+  color: $priceReviewColors[darkBackground];
 
 .segmentWrapper
-  display: flex
-  justify-content: center
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  height: 30px;
+  justify-content: center;
+  border-radius: 4px;
+  position: relative;
+  border: 1px solid $priceReviewColors[darkBackground];
+  &:before
+    content: '';
+    height: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 4px 0px 0px 4px;
+    width: 12px;
+    background-color: $priceReviewColors[darkBackground];
+    z-index: 2;
 
 .segment
   display: inline-block
@@ -49,10 +58,13 @@
 
 for colorName in $priceReviewColors
   $color = $priceReviewColors[colorName]
+  $backgroundColor = $priceReviewColors[colorName]
   if $color == $priceReviewColors.noRating
     $color = $priceReviewColors[darkBackground]
   $backgroundColor = $priceReviewColors[colorName]
   .{colorName}
     color: $color
   .{colorName}Background
-    background-color: $backgroundColor
+    border-color: $backgroundColor
+    &:before
+      background-color: $backgroundColor

package/source/components/PriceRating/PriceRating.tsx

@@ -20,7 +20,7 @@ export interface IPriceRatingProps {
 const PriceRating: React.SFC<IPriceRatingProps> = ({ t, rating, className, darkBackground, i18nPrefix, classLabel, classSegmentWrapper, onClick }) => {
   const ratingCode = (rating > 0 && rating < priceRatings.length) ? rating : 0;
   const ratingName = priceRatings[ratingCode];
-
+  console.log('ratingName', ratingName);
   const onWrapperClick = (event: React.SyntheticEvent<HTMLDivElement>) => {
     if (typeof onClick === 'function') {
       onClick(event);
@@ -46,10 +46,11 @@ const PriceRating: React.SFC<IPriceRatingProps> = ({ t, rating, className, darkB
       className={classnames(styles.wrapper, className, { [styles.pointer]: typeof onClick === 'function' })}
       onClick={onWrapperClick}
     >
-      <span className={classnames(styles.label, styles[ratingName], classLabel)}>
-        {t(`${i18nPrefix}${ratingName}`)}
-      </span>
-      <div className={classnames(styles.segmentWrapper, classSegmentWrapper)}>{renderSegments()}</div>
+      <div className={classnames(styles.segmentWrapper, styles[`${ratingName}Background`], classSegmentWrapper)}>
+        <span className={classnames(styles.label, styles[ratingName], classLabel)}>
+          {t(`${i18nPrefix}${ratingName}`)}
+        </span>
+      </div>
     </div>
   );
 };

package/source/components/VehicleDetailedSidebar/partials/PriceContent.styl

@@ -53,11 +53,6 @@
 .priceRating
   [class^=PriceRating__label]
     font-size: 10px;
-    margin-bottom: 12px;
-  [class^=PriceRating__segmentWrapper] > div
-    max-width: 18px;
-    width: 18px;
-    height: 14px
 
 .financingUnits
   color: rgba($grey-3, .8);

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

@@ -8,8 +8,14 @@
   flex-shrink: 0;
   height: 46px;
   box-sizing: border-box;
+
+  &.priceItemFavorite
+    height: 44px;
+
   +media-phone-up()
     height: 42px;
+    &.priceItemFavorite
+      height: 42px;
 
   &:first-of-type
     align-items: flex-end;

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

@@ -66,6 +66,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
 
     const stylesItem = classnames(
       styles.priceItem,
+      { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
       { [styles.priceItemDisable]: isPriceDisable },
       { [styles.priceItemBuy]: isTotal },
     );

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

@@ -20,7 +20,6 @@
     & > div:last-of-type
       width: 100%;
       max-width: 142px;
-      margin: 0 auto;
       display flex
       flex-direction: column;
       justify-content: center;
@@ -153,29 +152,14 @@
         max-width: 25%;
 
   &.vehiclePropertiesFavorite
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     display: grid;
     grid-auto-rows: 44px;
 
     & > .consumptionCombined
       white-space: pre-line;
-      grid-column: 1 / span 2;
       grid-row: 4;
 
-    & > .location
-      grid-column: 1 / span 2;
-
-      +media-tablet-landscape-up()
-        height: 30px;
-        margin-top: auto;
-        border: none;
-
-    & > div:last-of-type
-      grid-column: 1 / span 2;
-
-    &::after
-      height: calc(100% - 20px);
-
     +media-tablet-landscape-up()
       grid-template-columns: 1fr 1fr 1fr;
       margin-top: -13px;

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

@@ -119,7 +119,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
           {vehicleComponentName === 'favorite' ? (
             <>
               <Visible xs sm md>
-                {renderProperty(getMainPropertiesForSRL, vehicleComponentName)}
+                {renderProperty(getMainPropertiesForComparableCars)}
               </Visible>
               <Hidden xs sm md>
                 {renderProperty(getMainPropertiesForFavorite, vehicleComponentName)}

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

@@ -19,6 +19,7 @@
       border-left: 1px solid $grey-d
 
   &.vehiclePriceSectionFavorite
+    padding: 0 10px 0 10px
     +media-tablet-landscape-up()
       flex-shrink: 0;
       padding: 0 5px 0 15px;
@@ -69,25 +70,33 @@
 .wrapHandleCompare
   display: flex;
   gap: 8px;
-  margin-top: 20px;
+  border-top: 1px solid $grey-d3;
+  padding-top: 15px;
+
+  +media-tablet-landscape-up()
+    margin-top: 19px;
+    padding-top: 0;
+    border: none;
 
 .btnCompareRemove
   min-width: 50px !important;
-  height: 34px;
+  height: 30px;
   border: 1px solid #BA1A1A !important;
 
 .btnCarToCompare
   display: flex;
-  height: 34px;
+  height: 30px;
   align-items: center;
   text-transform uppercase !important
   width: 100%;
+  min-width: auto !important;
+  max-width: 100% !important;
 
 .btnPlusIcon
   font-size: 26px;
   margin-right: 10px;
-  line-height: 32px;
+  line-height: 26px;
 
 .btnText
   position: relative;
-  top: -4px;
+  top: -2px;

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

@@ -241,7 +241,7 @@ class VehiclePrice extends React.Component<IVehiclePriceSectionProps> {
             </Button>
             <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
               <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
-              <span className={styles.btnText}>{t('FavoritesPage:toCompare')}</span>
+              <span className={styles.btnText}>{t('FavoritesPage:compare')}</span>
             </Button>
           </div>
         )}

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -78,8 +78,12 @@
       'image image'\
       'info price'\
       'seoText seoText'
-    grid-template-columns: 50% 50%;
-    border-bottom: 6px solid $skyBlue;
+    grid-template-columns: 155px 1fr;
+    border: 1px solid $grey-e;
+    border-radius: 10px;
+    // border-bottom: 6px solid $skyBlue;
+    margin: 10px;
+    padding-bottom: 15px;
     +media-tablet-landscape-up()
       border: 1px solid $grey-e;
       padding: 10px;