@bytebrand/fe-ui-core 4.1.0 → 4.1.2

package/package.json

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

package/source/components/Alternative/DealerInfo.styl

@@ -86,12 +86,25 @@
     text-align: right
     font-weight: 700
     font-size: 16px;
-    color: $black80
+    color: $black80;
+    width: 60px;
 
 .ourPriceInput:focus
     outline: none
 
 .editIcon
-    width: 3rem;
+    width: 1.5rem;
     height: auto;
-    fill: $skyBlue
+    fill: $skyBlue
+
+.ourPriceBlock
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+
+.ourPrice
+    color: $skyBlue !important;
+    cursor: pointer;
+
+.editIconBlock
+    cursor: pointer;

package/source/components/Alternative/DealerInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import styles from './DealerInfo.styl';
 import IconSVG from '../_common/IconSVG/IconSVG';
 import VehicleFormattedPrice from '../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
@@ -17,6 +17,7 @@ interface IDealerInfo {
 const DealerInfo = ({ infoSections, t, dealerPrice, ourMargin, link, linkName, currentSalesPrice, onCurrentSalesPriceChange }: IDealerInfo) => {
   const [isPriceUpdating, setPriceUpdating] = useState(false);
   const [newPrice, setNewPrice] = useState(dealerPrice);
+  const inputRef = useRef(null);
 
   const handleSubmit = () => {
     setPriceUpdating(false);
@@ -87,25 +88,32 @@ const DealerInfo = ({ infoSections, t, dealerPrice, ourMargin, link, linkName, c
             />
           </span>
         </span>
-        <span className={styles.priceItem} onClick={() => setPriceUpdating(true)}>
+        <span className={styles.priceItem}>
           <span>
             {t('vehicleProps:alternative.ourPrice')}
           </span>
           {isPriceUpdating
-            ? <>
+            ? <div className={styles.ourPriceBlock}>
                 <input 
                   className={styles.ourPriceInput}
                   type="number" 
                   value={newPrice}
                   onChange={(e) => setNewPrice(+e.target.value)}
+                  ref={inputRef}
+                  onBlur={() => setPriceUpdating(false)}
                 />
-                <div onClick={handleSubmit}>
+                <span className={styles.editIconBlock} onClick={handleSubmit}>
                   <IconSVG className={styles.editIcon} customDimensions name='editIcon'></IconSVG>
-                </div>
-            </>
-            : <span>
+                </span>
+            </div>
+            : <span onClick={() => {
+              setPriceUpdating(true);
+              setTimeout(() => {
+                inputRef.current.focus();
+              }, 200)
+            }}>
               <VehicleFormattedPrice
-                className={styles.price}
+                className={classnames(styles.price, styles.ourPrice)}
                 numbersAfterDot={0}
                 price={currentSalesPrice}
                 unit='€'

package/source/components/OfferDetailedSection/partials/PanelConfig.tsx

@@ -6,8 +6,8 @@ import { getFormattedPrice } from '../../../framework/utils/CommonUtils';
 import { IPanelConfigProps } from '../../../framework/types/types';
 import VehicleFormattedPrice from '../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
 import RequestOffer from '../../_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper';
-import IconSVG from '../../_common/IconSVG/IconSVG';
 import styles from './PanelConfig.styl';
+import ExpansionPanel from '../../_common/ExpansionPanel/ExpansionPanel';
 
 const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
   t,
@@ -108,16 +108,11 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
         </Hidden>
       </div>
       <Visible xs sm md>
-        <span className={classnames(styles.toggleDetails, { [styles.toggleDetailsOpen]: isOpenDetails })} onClick={onToggleDetailsClick}>
-          {t(`sidebar.financingDetalis.${titleKey}`)}
-
-          <IconSVG
-            name='menuArrow'
-            className={styles.detailsIcon}
-            customDimensions
-          />
-        </span>
-        {isOpenDetails ? renderConfigDetails(true) : null}
+      <ExpansionPanel
+        title={t(`sidebar.financingDetalis.${titleKey}`)}
+      >
+        {renderConfigDetails(true)}
+      </ExpansionPanel>
       </Visible>
     </>
   );

package/source/components/SearchFilters/filters/Mileage.tsx

@@ -52,7 +52,8 @@ const Mileage = ({ controls, onChange, onChangeControls, t, values, options }: I
       values: transformValues(values),
       onChange: (value: string, name: string) => {
         onChange(name, value);
-        onChangeControls(name, RANGE_FILTERS_DEFAULT_CONTROLS);
+        onChangeControls(name, value);
+        // onChangeControls(name, RANGE_FILTERS_DEFAULT_CONTROLS);
       }
     };
 
@@ -99,5 +100,7 @@ const Mileage = ({ controls, onChange, onChangeControls, t, values, options }: I
 export default memo(Mileage, (prevProps: any, nextProps: any) => {
   return prevProps.controls.from === nextProps.controls.from &&
          prevProps.controls.to === nextProps.controls.to &&
-         prevProps.t === nextProps.t
+         prevProps.t === nextProps.t &&
+         prevProps.values === nextProps.values
+
 });

package/source/components/SearchFilters/filters/Power.tsx

@@ -73,7 +73,8 @@ class Power extends React.Component<IPowerProps, {}> {
         this.tempValues = value;
 
         onChange(name, { ...value, type });
-        onChangeControls(this.name, { ...RANGE_FILTERS_DEFAULT_CONTROLS, type });
+        onChangeControls(this.name, { ...value, type });
+        // onChangeControls(this.name, { ...RANGE_FILTERS_DEFAULT_CONTROLS, type });
       }
     };
 

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

@@ -14,14 +14,15 @@ export const useStyles = {
   transition: 'all 0.2s ease-in-out',
   textDecoration: 'none',
   textTransform: 'none',
-  borderRadius: 3,
+  borderRadius: 4,
   outline: 'none',
   userSelect: 'none',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   '&.MuiButton-containedPrimary': {
-    backgroundColor: '#005ccb'
+    backgroundColor: '#005ccb',
+    borderRadius: '4px !important'
   },
   '&.MuiButton-containedSecondary': {
     backgroundColor: 'red'