@bytebrand/fe-ui-core 4.1.172 → 4.1.174

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -81,14 +81,12 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
 
   renderExtendTable = (data: IEquipmentProps[] = [], header: string): React.ReactNode => {
     const { t } = this.props;
-
     return (
       <div className= {classnames(styles.table, styles.tableMaxWitdth)}>
         <h3 className={styles.tableName}>{header}</h3>
         {data.map(({ title, icon, value = {} }, i) => {
           const filteredKeys = Object.keys(value).filter(key => key !== 'selector_unknown' && value[key]);
           if (filteredKeys.length === 0) return null;
-
           return (
             <div key={i} className={classnames(styles.tr, styles.trGrid)}>
               <div className={styles.th}>
@@ -98,7 +96,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
               <div className={styles.tdContent}>
                 {filteredKeys.map((prop: string) => (
                   <div className={styles.wrapChecked} key={prop}>
-                    <IconSVG name={'checkBlue'} className={styles.cellCheckIcon} customDimensions />
+                    <IconSVG name={prop.startsWith('extras_trailerCoupling') ? 'search_trailerHitch' : 'checkBlue'} className={styles.cellCheckIcon} customDimensions />
                     <span className={styles.checkedItem}>{t(`cbd:${prop}`)}</span>
                   </div>
                 ))}

package/source/components/Alternative/DealerInfo.styl

@@ -96,6 +96,7 @@
     width: 1.5rem;
     height: auto;
     fill: $skyBlue
+    margin-left: 5px
 
 .ourPriceBlock
     display: flex;
@@ -107,4 +108,9 @@
     cursor: pointer;
 
 .editIconBlock
-    cursor: pointer;
+    cursor: pointer;
+
+.editFieldWrapper
+    display: flex
+    align-items: center
+

package/source/components/Alternative/DealerInfo.tsx

@@ -20,15 +20,37 @@ const DealerInfo = ({ infoSections, t, dealerPrice, link, linkName, currentSales
   const inputRef = useRef(null);
 
   const handleSubmit = () => {
-    setPriceUpdating(false);
     setNewPrice(Math.max(currentSalesPrice, newPrice));
     onCurrentSalesPriceChange(Math.max(currentSalesPrice, newPrice));
   };
 
+  const handlePriceUpdating = () => {
+    if (isPriceUpdating) {
+      handleSubmit();
+      setPriceUpdating(false);
+    } else if (!isPriceUpdating) {
+      setPriceUpdating(true);
+      setTimeout(
+        () => {
+          inputRef.current.focus();
+        },
+        200
+      );
+    }
+  };
+
   const onPriceChange = (e: any) => {
     const newPrice = +e.target.value;
     setNewPrice(Math.max(0, newPrice));
   };
+
+  const onEnterSubmit = (e: any) => {
+    if (e.key === 'Enter') {
+      handleSubmit();
+      setPriceUpdating(false);
+    }
+  };
+
   const ourMargin = newPrice - dealerPrice;
 
   return (
@@ -99,44 +121,48 @@ const DealerInfo = ({ infoSections, t, dealerPrice, link, linkName, currentSales
           <span>
             {t('vehicleProps:alternative.ourPrice')}
           </span>
-          {isPriceUpdating
-            ? <div className={styles.ourPriceBlock}>
-                <input
-                  className={styles.ourPriceInput}
-                  type='number'
-                  value={newPrice}
-                  onChange={e => onPriceChange(e)}
-                  ref={inputRef}
-                  onBlur={handleSubmit}
+          <div className={styles.editFieldWrapper}>
+            {isPriceUpdating
+              ? <div className={styles.ourPriceBlock}>
+                  <input
+                    className={styles.ourPriceInput}
+                    type='number'
+                    value={newPrice}
+                    onChange={e => onPriceChange(e)}
+                    ref={inputRef}
+                    onBlur={handleSubmit}
+                    onKeyPress={onEnterSubmit}
+                  />
+              </div>
+              : <span onClick={
+                  () => {
+                    setPriceUpdating(true);
+                    setTimeout(
+                      () => {
+                        inputRef.current.focus();
+                      },
+                      200
+                    );
+                  }}
+                >
+                <VehicleFormattedPrice
+                  className={classnames(styles.price, styles.ourPrice)}
+                  numbersAfterDot={0}
+                  price={newPrice}
+                  unit='€'
+                  isNew={true}
+                  numberContainerClassName={styles.numberContainer}
+                  unitWrapperClassName={styles.unitWrapper}
+                  unitClassName={styles.unit}
+                  monthlyClassName={styles.monthly}
                 />
-                <span className={styles.editIconBlock} onClick={handleSubmit}>
-                  <IconSVG className={styles.editIcon} customDimensions name='editIcon'></IconSVG>
-                </span>
-            </div>
-            : <span onClick={
-                () => {
-                  setPriceUpdating(true);
-                  setTimeout(
-                    () => {
-                      inputRef.current.focus();
-                    },
-                    200
-                  );
-                }}
-              >
-              <VehicleFormattedPrice
-                className={classnames(styles.price, styles.ourPrice)}
-                numbersAfterDot={0}
-                price={newPrice}
-                unit='€'
-                isNew={true}
-                numberContainerClassName={styles.numberContainer}
-                unitWrapperClassName={styles.unitWrapper}
-                unitClassName={styles.unit}
-                monthlyClassName={styles.monthly}
-              />
-            </span>}
-          </span>
+              </span>
+            }
+            <span className={styles.editIconBlock} onClick={handlePriceUpdating}>
+              <IconSVG className={styles.editIcon} customDimensions name='editPriceIcon'></IconSVG>
+            </span>
+          </div>
+        </span>
       </div>
     </div>
   );

package/source/components/Breadcrumbs/Breadcrumbs.styl

@@ -1,5 +1,4 @@
 @import '../../theme/mixins.styl'
-@import '../../theme/theme.styl'
 
 .breadcrumbsWrap
   display none
@@ -8,16 +7,19 @@
     align-items: center;
     justify-content: space-between;
     display: flex;
-    border: 1px solid $grey-trans
+    border: 1px solid rgba(76, 78, 100, 0.12);
     background-color: #fff;
     margin 8px 0;
     padding 0 12px;
     height: 44px;
+    border-radius: 6px;
 
 .breadcrumbs
   padding-right: 15px;
   box-sizing: border-box
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
   +media-phone-only()
     display none
   +media-tablet-landscape-down()
@@ -27,15 +29,16 @@
       width: 20px;
       height: 20px;
       font-size: 0;
-      display: inline-block
+      display: block;
       position: relative
 
 .link
   display: inline-block
   position: relative
   margin-right: 20px
-  font-size: 12px
-  color: $grey-3
+  font-size: 16px
+  line-height: 1;
+  color: rgba(76, 78, 100, 0.68);
   text-decoration: none
   // vertical-align: middle
 
@@ -46,15 +49,16 @@
     transform translateY(-50%)
     right: -13px
     background-image: url('../../../media/svg/common/arrow_breadcrumps.svg')
-    width: 5px
-    height: 8px
+    width: 7px
+    height: 10px
 
 .homeLink
   display: inline-block
   position: relative
   margin-right: 20px
-  font-size: 12px
-  color: $grey-3
+  font-size: 16px
+  line-height: 1;
+  color: rgba(76, 78, 100, 0.68);
   text-decoration: none
   vertical-align: middle
 
@@ -65,9 +69,9 @@
     transform translateY(-50%)
     right: -13px
     background-image: url('../../../media/svg/common/arrow_breadcrumps.svg')
-    width: 5px
-    height: 8px
-    
+    width: 7px
+    height: 10px
+
   &::before
     position: absolute
     content: ''
@@ -81,11 +85,12 @@
 
 .text
   display: inline-block
-  font-size: 12px
-  color: $grey-74
+  line-height: 1;
+  font-size: 16px
+  color: rgba(76, 78, 100, 0.68);
 
 .active
-  font-weight: bold;
+  // font-weight: bold;
 
 .back
   display: inline-block
@@ -94,7 +99,7 @@
   position relative;
   color: $grey-74
 
-  &::before 
+  &::before
     position: absolute
     content: ''
     z-index: 1;
@@ -111,10 +116,17 @@
   cursor: pointer
   color: $grey-74
 
-.classBreadcrumbsCDP
-  [class*='FirstInfoBlock__firstInfoBlock']
-    grid-template-columns: repeat(4, minmax(auto, 171px));
+.breadcrumbsCDP
+  [class*='Breadcrumbs__link'],
+  [class*='Breadcrumbs__text']
+    font-size: 12px;
+    color: rgba(76, 78, 100, 0.87);
 
+.breadcrumbsUserDashboard
+  display: none;
+.breadcrumbsMySearches
+  height: 56px;
+  border-radius: 8px;
   // [class*='FirstInfoBlock__container']
   //   width: 100px;
   //   margin 0 auto;

package/source/components/Breadcrumbs/Breadcrumbs.tsx

@@ -64,9 +64,9 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
                             ? BreadcrumbsFactory[page]({ t, ...pageProps })
                             : BreadcrumbsFactory['DEFAULT']();
 
-    const { list, withBackBtn, classBreadcrumbsAny } = BreadcrumbsConfig;
+    const { list, withBackBtn, classBreadcrumbsAny, className } = BreadcrumbsConfig;
 
-    const stylesNewForBreadcrumbs = classBreadcrumbsAny === 'VEHICLE_DETAILS' ? styles.classBreadcrumbsCDP : '';
+    const stylesNewForBreadcrumbs = className ? styles[className]  : '';
 
     const infoBlockProps = { infoBlockData, t };
 
@@ -75,7 +75,7 @@ class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
         <div className={styles.breadcrumbs}>
           <span className={styles.homeLink}><a href='/search'></a></span>
           {list && list.length ? this.renderList(list) : false}
-          {withBackBtn ? this.renderGoBackButton() : false}
+          {/* {withBackBtn ? this.renderGoBackButton() : false} */}
         </div>
         {classBreadcrumbsAny ? <FirstInfoBlock {...infoBlockProps} /> : ''}
       </div>

package/source/components/Breadcrumbs/FirstInfoBlock/FirstInfoBlock.styl

@@ -2,7 +2,7 @@
 
 .firstInfoBlock
   display grid
-  grid-template-columns: repeat(4, minmax(auto, 179px))
+  grid-template-columns: repeat(4, minmax(auto, 216px))
 
   +media-tablet-landscape-down()
     display none
@@ -16,38 +16,32 @@
   position relative
   // width: 211px
 
-  &::before
-    content: ''
-    width: 1px;
-    background-color: $grey-d;
-    height: 100%;
-    position absolute;
-    left: 0;
-    top: 0;
+  // &::before
+  //   content: ''
+  //   width: 1px;
+  //   background-color: $grey-d;
+  //   height: 100%;
+  //   position absolute;
+  //   left: 0;
+  //   top: 0;
 
   &:last-of-type
     width: 179px
 
   &:nth-of-type(1) .icon
     background-image: url('../../../../media/svg/common/whyAutodeIconSet-Q.svg');
-    width: 34px
-    height: 34px
   &:nth-of-type(2) .icon
     background-image: url('../../../../media/svg/common/whyAutodeIconSet-G.svg');
-    width: 22px
-    height: 26px
   &:nth-of-type(3) .icon
     background-image: url('../../../../media/svg/common/whyAutodeIconSet-F.svg');
-    width: 36px
-    height: 36px
   &:nth-of-type(4) .icon
     background-image: url('../../../../media/svg/common/whyAutodeIconSet-R.svg');
-    width: 27px
-    height: 27px
 
 .icon
   margin-right: 10px
   display block;
+  width: 34px;
+  height: 34px;
   background-repeat no-repeat
   background-position center center;
   background-size contain
@@ -58,5 +52,4 @@
   text-align center
   font-weight: 400
   color: $grey-75;
-  width: 57px;
   margin 0

package/source/components/PriceRating/PriceRating.styl

@@ -16,6 +16,7 @@
   text-transform: uppercase
   color: $priceReviewColors[darkBackground]
   margin-bottom: 4px
+  font-weight: bold;
 
 .segmentWrapper
   display: flex

package/source/components/SearchFilters/common/RangeControlled/RangeControlled.tsx

@@ -144,5 +144,6 @@ const RangeControlled = ({
 
 export default memo(RangeControlled, (prevProps: any, nextProps: any) => {
   return prevProps.controls.from === nextProps.controls.from &&
-         prevProps.controls.to === nextProps.controls.to;
+         prevProps.controls.to === nextProps.controls.to &&
+         prevProps.t === nextProps.t;
 });

package/source/components/SearchPage/SearchTopBar/SearchTopBar.styl

@@ -6,7 +6,6 @@
   display: flex
   flex-direction: row
   align-items: center
-  padding: 5px 0
   margin-bottom: 10px;
   margin-top: 10px;
   box-sizing: border-box
@@ -46,9 +45,19 @@
   font-weight: 700
 
 .sorting
-  min-width: 180px;
+  min-width: 181px;
+  max-width: 285px;
+  height: 100%;
+  [class*='MuiPaper-root'], [class*='MuiFormControl-root-MuiTextField-root']
+    height: 100%
   [class*='MuiPaper-root'], [class*='MuiOutlinedInput-root']
     font-size: 14px !important
+    height: 100%
+  [class*='MuiOutlinedInput-input']
+    padding: 5.5px 30px 7.5px 6px !important
+  +media-tablet-landscape-down()
+    min-width: 150px;
+    max-width: 199px;
 
 .saveSearch
   flex-basis: 20%
@@ -56,7 +65,6 @@
   cursor: pointer
   font-size: 13px
   margin-left: auto
-  margin-right: 10px
   color: $skyBlue
   +media-tablet-down()
     flex-basis: unset
@@ -82,6 +90,8 @@
 
 .select
   min-width: 0
+  height:100%
+
 
 +media-tablet-down()
   .sorting

package/source/components/SearchPage/SearchTopBar/SearchTopBar.tsx

@@ -74,7 +74,7 @@ class SearchTopBar extends React.Component<ISearchTopBarProps, {}> {
       />
       :
       <MaterialAutocomplete
-        size={'custom'}
+        size={'small'}
         freeSolo={false}
         disabled={!resultsCount}
         className={styles.select}
@@ -82,9 +82,9 @@ class SearchTopBar extends React.Component<ISearchTopBarProps, {}> {
         placeholder={t('sortingPlaceholder')}
         items={translatedSortingOptions}
         onChange={onSortChange}
-        name='mobileSearch'
+        name={isMobileOnly ? 'mobileSearch' : ''}
         disableClearable={true}
-      />;
+        label={''}      />;
   };
 
   render(): JSX.Element {

package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.styl

@@ -12,6 +12,7 @@ $color-price-new = $lightGreen
 .old
   color: $grey-3;
   font-size: 8px;
+  margin-bottom: 1px;
 
   &::after
     content: ''
@@ -61,7 +62,7 @@ _:-ms-fullscreen, :root .old::after
   font-weight: 700
 
 .price.semimedium
-  font-size: 18px
+  font-size: 20px
   font-weight: 700
 
 .price.small
@@ -83,9 +84,12 @@ _:-ms-fullscreen, :root .old::after
   transform: translateY(-7px)
   font-size: 9px
 
-// .price.large .decimals,
-// .price.large .unit
-//   top: 4px
+.price.semimedium .decimals,
+.price.semimedium .unit
+  display: inline-block
+  position: relative
+  transform: translateY(-9px)
+  font-size: 8px
 
 .price.medium .decimals,
 .price.medium .unit
@@ -96,18 +100,19 @@ _:-ms-fullscreen, :root .old::after
   top: 2px
 
 .price.semimedium .decimals,
-.price.semimedium .unit
-  top: 1px
+.price.semimedium .unit,
+.price.semimedium .sub,
+  // top: 1px
+  font-weight: 400
 
-.price.large .decimals,
-.price.medium .decimals,
-.price.small .decimals,
-.price.large .unitMonthly,
-.price.medium .unitMonthly,
-.price.small .unitMonthly
-  position: relative
-  transform: translateY(-7px)
-  font-size: 9px
+.price.semimedium .postfix,
+.old .postfix
+  position: absolute;
+  top: 0;
+  left: auto;
+
+.old .postfix
+  transform: translateX(7px);
 
 .price.large .decimals
 .price.large .unitMonthly
@@ -136,8 +141,9 @@ _:-ms-fullscreen, :root .old::after
   display: block
 
 .price .sub
-  font-size: 8px;
+  font-size: 9px;
   display: inline-block;
   position: relative;
   bottom: 0;
-  left: -5px
+  left: -5px
+  vertical-align: baseline;

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

@@ -15,10 +15,6 @@
   &:nth-child(2)
     border-top-color: transparent;
 
-.propertyIcon
-  width: 20px;
-  height: 23px;
-
 .details
   display: flex
   flex-direction: row

package/source/components/VehicleDetailedSidebar/partials/Properties.tsx

@@ -86,7 +86,7 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
       children: (
         <div className={`${styles.tabContentPadding} ${styles.tabContentOverviewPadding}`}>
           {mainProperties.map((property: any, index: number) => (
-            <VehicleProperty {...property} className={styles.property} classNameIcon={styles.propertyIcon} key={index} />
+            <VehicleProperty {...property} className={styles.property} key={index} />
           ))}
         </div>
       )