@bytebrand/fe-ui-core 4.2.43 → 4.2.45

package/package.json

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

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.styl

@@ -73,9 +73,9 @@
 .labelContent
   flex: 1 1 auto
   color: $grey-3;
-  @media (min-width: 1040px) and (max-width: 1112px)
+  @media (min-width: 990px) and (max-width: 1112px)
     max-width: 230px
-    padding:0px!important
+    padding-right: 10px !important;
     
 .icon
   display: block

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/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');
       }