@bytebrand/fe-ui-core 4.8.3 → 4.8.5

package/package.json

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

package/source/components/AccordionWidget/AccordionWidget.styl

@@ -203,4 +203,7 @@
   flex-shrink: 0;
   
 .longTitle
-  max-width: 157px
+  max-width: 157px
+
+.valueDescription
+  font-size: 11px

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -62,14 +62,14 @@ class AccordionWidget extends React.Component<IAccardionSectionProps, IAccardion
         <div className={styles.table}>
           <h3 className={styles.tableName}>{header}</h3>
           {propsList.map((prop, i) => {
-            const { title, subTitle, value, isVisible = true, isLongTitle = false } = decoratedProps[prop];
+            const { title, subTitle, value, isVisible = true, isLongTitle = false, valueDescription = '' } = decoratedProps[prop];
             return isVisible && (
               <div key={i} className={title ? styles.tr : ''}>
                 {title && <div className={classnames(styles.th, isLongTitle ? styles.longTitle : '')}>
                   <span className={styles.title}>{title}</span>
                   {subTitle ? <p className={styles.subTitle}>{subTitle}</p> : null}
                 </div>}
-                <div className={styles.td}>{value}</div>
+                <div className={styles.td}>{value} {valueDescription ? <span className={styles.valueDescription}>{valueDescription}</span> : ''}</div>
               </div>
             );
           })}

package/source/framework/types/types.ts

@@ -11,6 +11,7 @@ export interface IDecoratedProp {
   subTitle?: string;
   isVisible?: boolean;
   isLongTitle?: boolean;
+  valueDescription?: string;
   readonly value?: (string | JSX.Element);
 }
 

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -1568,7 +1568,8 @@ const getDecoratedProps = (
         return Number.isFinite(co2PriceLow)
           ? t('vehicleProps:value.wltpCo2Price', { price: getFormattedPrice(co2PriceLow, '$,.2f') })
           : t('vehicleProps:value.na');
-      }
+      },
+      valueDescription: t('vehicleProps:value.wltpCo2PriceSpec')
     },
     wltpCo2CostsMiddle: {
       get title() {
@@ -1583,7 +1584,8 @@ const getDecoratedProps = (
         return Number.isFinite(co2PriceMedium)
           ? t('vehicleProps:value.wltpCo2Price', { price: getFormattedPrice(co2PriceMedium, '$,.2f') })
           : t('vehicleProps:value.na');
-      }
+      },
+      valueDescription: t('vehicleProps:value.wltpCo2PriceSpec')
     },
     wltpCo2CostsHigh: {
       get title() {
@@ -1598,7 +1600,8 @@ const getDecoratedProps = (
         return Number.isFinite(co2PriceHigh)
           ? t('vehicleProps:value.wltpCo2Price', { price: getFormattedPrice(co2PriceHigh, '$,.2f') })
           : t('vehicleProps:value.na');
-      }
+      },
+      valueDescription: t('vehicleProps:value.wltpCo2PriceSpec')
     },
     powerPrice: {
       title: t('vehicleProps:title.powerPrice'),
@@ -1624,7 +1627,7 @@ const getDecoratedProps = (
 
         const { getBaseFuelPrice } = financingUtils;
 
-        const baseFuelPrice = getBaseFuelPrice(fuel, hybridPlugin);
+        const baseFuelPrice = getBaseFuelPrice(fuel, hybridPlugin).fuelPrice;
 
         const fuelPrice = car.costModel.fuelPrice ? car.costModel.fuelPrice : baseFuelPrice;
         return Number.isFinite(fuelPrice)