@bytebrand/fe-ui-core 4.2.116 → 4.2.118

package/package.json

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

package/source/components/FormattedNumber/FormattedNumber.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import styles from './FormattedNumber.styl';
 
 import classnames from 'classnames';
+import _uniqueId from 'lodash/uniqueId';
 
 export interface IFormattedPriceProps {
   value: number;
@@ -12,15 +13,43 @@ export interface IFormattedPriceProps {
   className?: string;
   afterCommaClassName?: string;
   beforeCommaClassName?: string;
+  fontSize?:string;
 }
 
 // const breakpointForRound = 10000;
 const separatorCounter = 3;
-
-const FormattedNumber: React.FunctionComponent<IFormattedPriceProps> = ({ className, value, disableFormatting, toRound, numbersAfterDot, beforeCommaClassName, afterCommaClassName }) => {
+const FormattedNumber: React.FunctionComponent<IFormattedPriceProps> = ({ className, value, disableFormatting, toRound, numbersAfterDot, beforeCommaClassName, afterCommaClassName, fontSize }) => {
+  // const textRef = useRef(null);
+  // const uniqueId = _uniqueId(className);
+
+  // const [newFontSize, setFontSize] = useState(fontSize);
+  // useEffect(() => {
+  //   const priceElement = document.getElementById(uniqueId);
+  //   // const resizeFont = () => {
+  //   //   const textWidth = priceElement.getBoundingClientRect().width;
+  //   //   let parentWidth = fontSize === 40 ? 150 : 100;
+  //   //   if (window.innerWidth < 720) {
+  //   //     parentWidth = fontSize === 40 ? 200 : 150;
+  //   //   }
+  //     if (fontSize && value.toString().length>4) {
+  //       // textRef.current.parentNode.style.maxWidth = `${parentWidth}px`;
+  //       // const newFont = Math.floor(newFontSize * parentWidth / textWidth);
+  //       // priceElement.style.fontSize = `45px`;
+  //       // priceElement.style.verticalAlign = 'top';
+  //       textRef.current.parentNode.style.fontSize = `45px`;
+  //       // setFontSize(newFont);
+  //     }
+  //   // };
+  //   // resizeFont();
+  //   // window.addEventListener('resize', resizeFont);
+  //   // return () => window.removeEventListener('resize', resizeFont);
+  //   // if(fontSize && )
+  //   console.log('value',value.toString().length);
+  // },        [uniqueId]);
 
   function getFormattedNumber() {
     // First we need to check if value is actual number;
+
     const notFalsieValue = !!value ? value : 0;
 
     const rounded = toRound ? Math.round(notFalsieValue) : notFalsieValue;
@@ -72,7 +101,7 @@ const FormattedNumber: React.FunctionComponent<IFormattedPriceProps> = ({ classN
 
   return (
     <span className={classnames(styles.formattedNumber, className)}>
-      <span className={styles.value}>{val}</span>
+      <span className={styles.value} >{val}</span>
     </span>
   );
 };

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

@@ -51,7 +51,6 @@ const PanelConfig: React.FunctionComponent<IPanelConfigProps> = ({
       ] : [];
 
     const wrapperClassName = classnames(styles.wrapConfigDetails, { [styles.wrapConfigDetailsMobile]: mobileMode });
-
     return (
       <div className={wrapperClassName}>
         <Hidden xs sm md>

package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import styles from './VehicleFormattedPrice.styl';
+import _uniqueId from 'lodash/uniqueId';
 
 export interface IVehiclePriceProps {
   price: number;
@@ -23,6 +24,7 @@ export interface IVehiclePriceProps {
   size?: 'small' | 'semimedium' | 'medium' | 'large';
   disableStyles?: boolean;
   disablePrice?: boolean;
+  fontSize?:string;
 
   // FormattedNumber props
   toRound?: boolean;
@@ -34,11 +36,22 @@ export interface IVehiclePriceProps {
 }
 
 const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (props) => {
+  const textRef = useRef(null);
+  const uniqueId = _uniqueId(props.className);
+
+  useEffect(() => {
+    const priceElement = document.getElementById(uniqueId);
+    if (fontSize === 'small') {
+      priceElement.style.fontSize = `45px`;
+      priceElement.style.margin = `9px 0px 0px 4px`;
+    }
+  },        [uniqueId]);
+
   function renderUnit(): React.ReactNode {
     const { postfix, unit, unitClassName } = props;
     return (
     <span className={classnames(styles.unit, unitClassName)}>
-      &nbsp;{unit}
+     {fontSize === 'small' ? unit : '\u00A0' + unit}
       {postfix ? renderPostfix() : ''}
     </span>);
   }
@@ -78,7 +91,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   // FormattedNumber props
   const {
     unit, sub, numbersAfterDot, toRound, numberContainerClassName,
-    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice
+    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, fontSize
   } = props;
 
   const decimalsClass = classnames(afterCommaClassName, styles.decimals);
@@ -94,6 +107,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
     disableFormatting,
     numbersAfterDot,
     toRound,
+    fontSize,
     beforeCommaClassName,
     value: price,
     className: numberContainerClassName,
@@ -101,7 +115,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   };
 
   return (
-    <span className={containerClass}>
+    <span className={containerClass} ref={textRef} id={uniqueId}>
       {<FormattedNumber {...formattedNumberProps} />}
       {(unit && !monthly) && renderUnit()}
       {(monthly && unit) && renderUnitMonthly()}

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

@@ -22,9 +22,12 @@
       margin-left: 0;
     +media-phone-only()
       [class*="VehicleFormattedPrice__large"]
-        font-size: 45px;
+        font-size: 45px!important;
         margin-left: 3px;
 
+
+
+
 .tabContentPadding
   padding: 10px 10px 10px 10px;
   flex-direction: row
@@ -112,3 +115,17 @@
 .wrapper
   +media-tablet-landscape-up()
    padding-right: 15px;
+
+.priceFontSizeSmall
+  .financingPriceItem
+    display: block;
+  .priceInfoLabel
+    margin-top:8px!important 
+  .wrapper
+    +media-tablet-landscape-up()
+      padding-right: 0px;
+  
+
+.tabContentPaddingForBuy.priceFontSizeSmall
+  .financingPriceItem
+      display: flex;

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

@@ -7,6 +7,7 @@ import styles from './PriceContent.styl';
 import VehicleFormattedPrice from '../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
 import PriceRating from '../../PriceRating/PriceRating';
 import RequestOffer from '../../_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper';
+import { getFormattedPrice } from '../../../../utils';
 
 const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
   t,
@@ -45,11 +46,14 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
     isAdditionalOption: true,
     onShowOfferDetails: offerBlockProps.onShowOfferDetails
   };
+  const priceFontSize:string = monthlyInstallment ? (getFormattedPrice(monthlyInstallment)?.toString().match(/\d/g).length >= 4 ? 'small' :'large') :'';
 
   const tabContentPaddingClassName = classnames(
     styles.tabContentPadding,
-    { [styles.tabContentPaddingForBuy]: isBuy }
+    { [styles.tabContentPaddingForBuy]: isBuy },
+    { [styles.priceFontSizeSmall]: priceFontSize === 'small' }
   );
+
   return (
     <>
       <div className={tabContentPaddingClassName}>
@@ -90,6 +94,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
                 postfix={postfix}
                 numbersAfterDot={0}
                 size='large'
+                fontSize={priceFontSize}
               />
             </div>
           ) : null}