@bytebrand/fe-ui-core 4.2.138 → 4.2.140

package/package.json

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

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

@@ -23,7 +23,7 @@ export interface IVehiclePriceProps {
   size?: 'small' | 'semimedium' | 'medium' | 'large';
   disableStyles?: boolean;
   disablePrice?: boolean;
-  isDynamicFontSize?:boolean;
+  dynamicFontSize?: string;
 
   // FormattedNumber props
   toRound?: boolean;
@@ -38,12 +38,21 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   const textRef = useRef(null);
 
   const updateFontSize = useCallback(() => {
-    if (price && isDynamicFontSize && textRef.current) {
+    if (price && dynamicFontSize && textRef.current) {
+      const textWidth = textRef.current.getBoundingClientRect().width;
       const priceLength = Math.round(price).toString().length;
-      const newSize = Math.min(60, 200 / priceLength);
-      textRef.current.style.fontSize = `${newSize}px`;
+      if (textWidth > 110) {
+        if (dynamicFontSize === 'small') {
+          const newSize = Math.min(60, 165 / priceLength);
+          textRef.current.style.fontSize = `${newSize}px`;
+        } else {
+          const newSize = Math.min(60, (165 / priceLength) + 6);
+          textRef.current.style.fontSize = `${newSize}px`;
+        }
+
+      }
     }
-  }, [props.price, props.isDynamicFontSize]);
+  }, [props.price, props.dynamicFontSize]);
 
   useEffect(() => {
     updateFontSize();
@@ -52,10 +61,10 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   function renderUnit(): React.ReactNode {
     const { postfix, unit, unitClassName } = props;
     return (
-    <span className={classnames(styles.unit, unitClassName)}>
-      &nbsp;{unit}
-      {postfix ? renderPostfix() : ''}
-    </span>);
+      <span className={classnames(styles.unit, unitClassName)}>
+        &nbsp;{unit}
+        {postfix ? renderPostfix() : ''}
+      </span>);
   }
 
   function renderUnitMonthly(): React.ReactNode {
@@ -93,7 +102,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   // FormattedNumber props
   const {
     unit, sub, numbersAfterDot, toRound, numberContainerClassName,
-    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, isDynamicFontSize
+    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, dynamicFontSize
   } = props;
 
   const decimalsClass = classnames(afterCommaClassName, styles.decimals);
@@ -109,7 +118,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
     disableFormatting,
     numbersAfterDot,
     toRound,
-    isDynamicFontSize,
+    dynamicFontSize,
     beforeCommaClassName,
     value: price,
     className: numberContainerClassName,
@@ -141,7 +150,7 @@ VehicleFormattedPrice.defaultProps = {
   unitClassName: '',
   postfixClassName: '',
   subClassName: '',
-  isDynamicFontSize: false,
+  dynamicFontSize: '',
   sub: '',
   // FormattedNumber props
   toRound: false,

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

@@ -1,7 +1,7 @@
 @import '../../../theme/mixins.styl';
 
 .newFinancingPriceWrapper
-  width: 100%
+  width: 159px
   display: flex
   align-items: flex-start;
   color: $lightGreen;
@@ -10,7 +10,7 @@
     font-size: 60px;
     display flex;
     line-height: .8;
-    margin 8px 0 0 16px;
+    margin 8px 0 0 10px;
   [class^="VehicleFormattedPrice__decimals"], [class^="VehicleFormattedPrice__unit"]
     font-size: 16px !important;
     transform: none !important;
@@ -18,11 +18,9 @@
 .tabContentPaddingForBuy
   .newFinancingPriceWrapper
     [class*="VehicleFormattedPrice__large"]
-      font-size: 40px;
       margin-left: 0;
     +media-phone-only()
       [class*="VehicleFormattedPrice__large"]
-        font-size: 45px!important;
         margin-left: 3px;
 
 
@@ -117,13 +115,8 @@
    padding-right: 15px;
 
 .priceFontSizeSmall
-  .financingPriceItem
-    display: block;
   .priceInfoLabel
     margin-top:8px!important 
-  .wrapper
-    +media-tablet-landscape-up()
-      padding-right: 0px;
   
 
 .tabContentPaddingForBuy.priceFontSizeSmall

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

@@ -46,7 +46,7 @@ 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 priceFontSize: string = monthlyInstallment ? (getFormattedPrice(monthlyInstallment)?.toString().match(/\d/g).length >= 4 ? 'small' : 'large') : '';
 
   const tabContentPaddingClassName = classnames(
     styles.tabContentPadding,
@@ -94,7 +94,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
                 postfix={postfix}
                 numbersAfterDot={0}
                 size='large'
-                isDynamicFontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy')? false : true}
+                dynamicFontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy') ? 'large' : 'small'}
               />
             </div>
           ) : null}
@@ -114,7 +114,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
           </span>
         </div>
       </div>
-      {offerBlockOpen && <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} /> }
+      {offerBlockOpen && <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} />}
       <RequestOffer {...requestOfferProps} />
     </>
   );

package/source/locales/data.ts

@@ -56,7 +56,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         na: 'N/A',
         priceSub: '/mtl.',
         priceSubMtl: '/mtl.',
-        prefixOldPrice: 'ab',
+        prefixOldPrice: 'z.B.',
         vehicleOwners: `${vehicleOption.vehicleOwners} Fahrzeughalter`,
         vehicleOwners_plural: `${count} Fahrzeughalter`,
         doorsOnly: `${vehicleOption.doorsOnly} Türen`,
@@ -164,7 +164,7 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         'firstRegistration': 'Erstzulassung',
         'mileage': 'Kilometerstand',
         'consumptionAndCo2': 'Kraftstoffverbrauch*',
-        'monthlyFrom': 'monatlich ab',
+        'monthlyFrom': 'monatlich z.B.',
         'buy': 'Kaufen',
         'financingDescription': 'Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.',
         'leasingDescription': 'Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.',