@bytebrand/fe-ui-core 4.2.44 → 4.2.46

package/package.json

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

package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.styl

@@ -16,4 +16,7 @@
   flex-shrink: 0
 
   +media-tablet-landscape-up()
-    margin-right: 10px
+    margin-right: 10px
+
+[class*='smallText']
+  font-size:10px;

package/source/framework/utils/CommonUtils.ts

@@ -414,6 +414,7 @@ export function getChipFilterValue(
     case 'MANUFACTURER':
     case 'MODEL':
     case 'SUB_MODEL':
+    case 'SERIES':
       filterValue = chipFilterValue;
       break;
 

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -48,6 +48,24 @@ export const getPowerLabel = (powerKW: number, powerPS: number): string => {
 
   return powerKWpowerPS;
 };
+const wrapValue = (value:string): React.ReactNode => {
+  const regex = /-?\d+(\,\d+)?/; // match any digit
+  const matches = value.match(regex); // get an array of all digits found
+
+  if (matches && matches.length > 0) { // If at least one number is found in the input string
+    const index = value.indexOf(matches[0]) + matches[0].length;
+    const beforeText = value.slice(0, index);
+    const afterText = value.slice(index);
+
+    return (
+      <>
+        {beforeText}
+        <span className='smallText'>{afterText}</span>
+      </>
+    ); // Return a JSX element with a span wrapper around the text after the number
+  }
+  return <>{value}</>; // If no numbers are found in the input string, return the original string without any modification
+};
 
 const getDecoratedProps = (
   car: ICar, // @TODO should have a proper interface
@@ -750,15 +768,13 @@ const getDecoratedProps = (
         const co2Value = Number.isFinite(co2)
         ? t('vehicleProps:value.co2Combined', { co2: co2.toLocaleString(language) })
         : t('vehicleProps:value.na');
-
         const hybridPlugin = car.engineData.hybridPlugin;
-
         return Number.isFinite(consumptionCombined) && Number.isFinite(consumptionPowerCombined)
           ? <React.Fragment>
-            {consumptionPowerCombined && hybridPlugin ? consumptionPowerCombinedContent : ''}
+            {consumptionPowerCombined && hybridPlugin ? wrapValue(consumptionPowerCombinedContent) : ''}
             {consumptionPowerCombined && hybridPlugin ? <br /> : ''}
-            {consumptionCombinedContent} <br />
-            {co2Value}
+            {wrapValue(consumptionCombinedContent)} <br />
+            {wrapValue(co2Value)}
           </React.Fragment>
           : t('vehicleProps:value.na');
       }