@bytebrand/fe-ui-core 4.8.110 → 4.8.112

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.tsx

@@ -47,6 +47,10 @@ export interface IVehiclePriceSectionProps {
   onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
   combineRefAlternative?: boolean;
   typeAlternative?: string;
+  // ADV-88: hide the "monatlich z.B."/"monthly e.g." column header for the task's cars
+  // (new plug-in hybrids that get the externalised consumption row) so the price column
+  // moves up. Passed true from VehicleSmallCard only when the consumption row is shown.
+  suppressMonthlyFrom?: boolean;
 }
 
 // interface IPriceData {
@@ -95,7 +99,6 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     routeObj,
     toggleCarToCompare,
     toCompare,
-    priceSubMtl,
     classButton,
     onRemoveClick,
     showCompareCheckboxes,
@@ -114,6 +117,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     } = {},
     common: { isStrikeShown },
     typeAlternative,
+    suppressMonthlyFrom,
     margin
   } = props;
 
@@ -144,24 +148,31 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
                                    vehicleComponentName === 'landing' ||
                                    vehicleComponentName === 'main' ? 'outlined' : 'contained';
 
+  // ADV-70 (design): the monthly label ("mtl."/"mth.") is shown BEFORE every monthly rate on
+  // all card surfaces (SRL desktop+mobile, comparable, home, landing) — derive it from the
+  // localized priceSub key instead of the consumer-passed priceSubMtl (which is null on mobile),
+  // so it renders consistently everywhere. VehiclePriceItem strips the leading "/".
+  const monthlyPrefix = (t && t('vehicleProps:value.priceSub')) || '';
+
   const priceItemsGlobal = [
     {
       perMonthOld: oldMonthlyInstallment,
       perMonthCurrent: monthlyInstallment,
       title: t('vehicleProps:title.financing'),
-      prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
+      // ADV-88 (design): drop the "z.B."/"e.g." prefix on the SRL card — the monthly label carries the meaning.
+      prefixOldPrice: false,
       postfix: '3',
-      priceSub: priceSubMtl,
+      priceSub: monthlyPrefix,
       tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
     },
     {
       perMonthOld: lOldMonthlyInstallment,
       perMonthCurrent: lMonthlyInstallment,
-      prefixOldPrice: vehicleComponentName === 'search' && !isMobileOnly && t('vehicleProps:value.prefixOldPrice'),
+      prefixOldPrice: false,
       postfix: '1,3',
       isPriceDisable: !isLeasingActive,
       title: t('vehicleProps:title.leasing'),
-      priceSub: priceSubMtl,
+      priceSub: monthlyPrefix,
       tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
     }
   ];
@@ -223,10 +234,10 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
           formControlClassName={styles.wrapCheckbox}
         />
       )}
-      {vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && !isMobileOnly && (
+      {!suppressMonthlyFrom && vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && !isMobileOnly && (
         <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
       )}
-      {isMobileOnly && !showCompareCheckboxes && (
+      {!suppressMonthlyFrom && isMobileOnly && !showCompareCheckboxes && (
         <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
       )}
       {priceData.map((props: any) => (

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

@@ -11,7 +11,7 @@
 
 .smallProp
   span
-    font-size: 10px !important
+    font-size: 9px !important
 
 .pluginVal
   span
@@ -26,5 +26,8 @@
   +media-tablet-landscape-up()
     margin-right: 10px
 
+.noIcon
+  padding-left: 5px
+
 [class*='smallText']
   font-size:10px;

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

@@ -19,12 +19,13 @@ class VehicleProperty extends React.Component<IVehicleProperty, {}> {
 
   render(): React.ReactNode {
     const { className, classNameIcon, icon, description, smalltext, hybridPlugin } = this.props;
-    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''}`;
+    const noIcon: boolean = !icon;
+    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''} ${noIcon ? styles.noIcon : ''}`;
     const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
 
     return (
       <div className={propertyClass}>
-        <IconSVG className={propertyClassIcon} name={icon} customDimensions />
+        {!noIcon && <IconSVG className={propertyClassIcon} name={icon} customDimensions />}
         <span>{description}</span>
       </div>
     );

package/source/components/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.tsx

@@ -48,7 +48,7 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
     event.preventDefault();
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
-    onFavoriteClick(event, id);
+    if (onFavoriteClick) onFavoriteClick(event, id);
   };
 
   const renderFavoriteIcon = (): React.ReactNode => {

package/source/components/VehicleSmallCard/VehicleSmallCard.story.js

@@ -0,0 +1,412 @@
+import React from 'react';
+import i18next from 'i18next';
+import { Resizable } from 're-resizable';
+import classnames from 'classnames';
+// import * as CheckboxTree from 'react-checkbox-tree';
+import { withNamespaces } from 'react-i18next';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+// import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import VehicleSmallCard from './VehicleSmallCard.tsx';
+import styles from './VehicleSmallCard.story.styl';
+
+
+i18next.addResourceBundle('de', 'vehicleProps', {
+  value: {
+    mileage: "{{mileage}} km",
+    consumption: "{{consumption}}l/100km",
+    consumptionPower: "{{consumption}}kWh/100km",
+    consumptionPowerCombined: "{{consumption}}kWh/100km (komb)*",
+    consumptionGas: "{{consumption}}kg/100km",
+    consumptionCombined: "{{consumption}}l/100km",
+    power: "{{powerKW}}\u00A0kW ({{powerPS}}\u00A0PS)",
+    powerPS: "{{powerPS}} PS",
+    deliveryPeriodMonths: "{{count}} Monat\nab Bestellung",
+    deliveryPeriodDays: "{{count}} Tag\nab Bestellung",
+    co2Combined: "{{co2}}g CO2/km (komb)*",
+    co2: "{{co2}} g/km ",
+    na: "N/A"
+  },
+  priceRating: {
+    noRating: 'KEINE BEWERTUNG',
+    highPrice: 'HOHER PREIS',
+    increasedPrice: 'ERHÖHTER PREIS',
+    fairPrice: 'FAIRER PREIS',
+    goodPrice: 'GUTER PREIS',
+    topPrice: 'TOP PREIS'
+  },
+  promoSlider: {
+    consumptionCombined: `{{consumptionCombined}} l/100km (komb)*`,
+    co2: `{{co2}} g CO2/km (komb)*`,
+    new: 'neu'
+  },
+  title: {
+    addOfferToMainSlide: 'Zum Schieberegler hinzufügen',
+    toOffer: 'zum Angebot',
+    monthlyFrom: 'monatlich ab',
+    financing: 'Finanzierung',
+    leasing: 'Leasing',
+    abo: 'Abo',
+    buy: 'Kaufen',
+    margeInkl: "inkl. Marge",
+    marge: "Unsere Marge",
+    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.`,
+    aboDescription: `Bei diesem Auto-Abo ist bereits alles an Bord. Teil- und
+    Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen.
+    Sie zahlen also nur Ihre Rate und Kraftstoff.`,
+    buyDescription: `Nach Kaufabschluss haben Sie die sofortigen
+    Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zu
+    eigenen Konditionen weiter verkaufen und Änderungen vornehmen.`
+  }
+});
+
+const resizablePropsSlider = {
+  minWidth: 150,
+  defaultSize: { width: 360, height: 'auto' }
+};
+const resizableProps = {
+  className: styles.resizable,
+  minWidth: 150,
+  defaultSize: { width: 360, height: 'auto' }
+};
+
+const resizablePropsComparable = {
+  className: styles.resizable,
+  minWidth: 150,
+  defaultSize: { width: 230, height: 'auto' }
+};
+
+const resizablePropsSearch = {
+  className: styles.resizable,
+  defaultSize: { width: 803, height: 283 }
+};
+
+const resizablePropsAlternative = {
+  className: styles.resizable,
+  defaultSize: { width: 803 } // height: 265
+};
+
+const IMAGE_URL = 'https://picsum.photos/400/300/?random';
+const images = [];
+for (let i = 0; i <= 10; i++) {
+  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
+}
+
+
+
+
+const VehicleSmallCardStory = withNamespaces('vehicleProps')(({ t }) => {
+
+  const renderCircularProgressbar = (percentage) => {
+    const checkPercentage = percentage < 50 ?
+    '#EE0202' :
+    (percentage >= 50 && percentage < 80) ?
+    '#00B800' :
+    '#005CCB';
+    return (
+      <div className={
+        classnames(
+          styles.progressWrap,
+          { [styles.progressWrapFull]: percentage === 100 },
+          { [styles.progressWrapMin]: percentage < 10 }
+        )
+      }>
+        <CircularProgressbar
+          value={percentage}
+          text={`${percentage}`}
+          styles={buildStyles({
+            textSize: '32px',
+            pathColor: checkPercentage,
+            textColor: checkPercentage,
+            trailColor: '#D5D5D5'
+          })}
+        />
+      </div>
+    );
+  };
+
+  const cardPropsSlider = {
+    t,
+    language: 'de',
+    vehicleComponentName: 'landing',
+    isAlternative: false,
+    showSlider: true,
+    showNewLabel: true,
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      onFirstChange: action('first change')
+    },
+    stats: {
+      imagesCount: 100,
+      isFavoured: true,
+      statsData: {
+        totalCarImpCount: 10,
+        totalFavCount: 20,
+      },
+      statsSize: 'xs'
+    },
+    title: {
+      make: 'Audi',
+      model: 'A4',
+    },
+    info: {
+      mileage: 10464,
+      regDate: 1535760000,
+      gearbox: 'selector_gearbox_automatic'
+    },
+    environmentEmissions: {
+      co2: 8.7
+    },
+    consumption: {
+      consumptionCombined: 9.6,
+      consumptionPowerCombined: 3.6,
+      fuel: 'selector_fuel_electrical'
+    },
+    engineData: {
+      cubicCapacity: 1968,
+      cylinders: 0,
+      particulateFilterDiesel: true,
+      powerKW: 140,
+      powerPS: 190,
+      startStopSystem: true,
+    },
+    offer : {
+      availabilityFrom: null,
+      availabilityMode: "selector_availabilityMode_always",
+      deliveryPeriod: "selector_unknown"
+    },
+    financing: {
+      annualPercentageRate: "",
+      bank: "",
+      closingCosts: null,
+      conditions: null,
+      finalInstallment: null,
+      financingBank: "",
+      firstInstallment: 0,
+      grossLoanAmount: "",
+      monthlyInstallment: 108,
+      netLoanAmount: "",
+      nominalInterestRate: "",
+      paybackPeriod: "24",
+      paymentProtectionInsurance: "",
+      platformFinancingId: null,
+      transportationCosts: "",
+      typeOfNominalInterestRate: null
+    },
+    leasing: {
+      RWG: 10,
+      addServicesCost: 799,
+      annualMileage: null,
+      closingCosts: null,
+      financialInstitution: null,
+      firstInstallment: null,
+      leasingMode: "default",
+      maxAge: null,
+      maxMileage: null,
+      nominalInterestRate: null,
+      paybackPeriod: null,
+      paymentProtectionInsurance: null,
+      purchasePrice: null,
+      santanderPayBackMin: 250,
+      transportationCost: null
+    },
+    price: {
+      common: {
+        isStrikeShown: true
+      },
+      monthlyInstallment: 29,
+      oldMonthlyInstallment: 49,
+      isStrikeShown: true,
+      currency: "EUR",
+      currentSalesPrice: 16160,
+      historyPriceDifference: 5629.6,
+      historyPriceDifferencePerCent: 26,
+      mlCurrentSalesPriceCategory: null,
+      mlCurrentSalesPriceDiffPercent: null,
+      mlCurrentSalesPricePredicted: 100,
+      totalCurrent: 50,
+      originalSalesPrice: 13467,
+      priceDate: null,
+      priceId: null,
+      recomendedRetailPrice: null,
+      retailToCurrentPriceDifference: 0,
+      vatDeductible: null,
+      vatRate: 7,
+      wasPrice: 10000,
+      financing: {
+        monthlyInstallment: 49,
+        oldMonthlyInstallment: 69,
+        isActive: true
+      },
+      leasing: {
+        monthlyInstallment: 49,
+        oldMonthlyInstallment: 69,
+        isActive: true
+      },
+      buy: {
+        currentSalesPriceExtra: 16110,
+        highestPriceExtra: 19349
+      }
+    },
+    seoText: 'Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008,Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008',
+    onFinancingClick: action('financing click'),
+    onContainerClick: action('container click'),
+    onFavoriteClick: action('favorite click'),
+  };
+
+  const cardProps = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'main',
+    seoText: '',
+    slider: {},
+    info: {
+      mileage: 10464,
+      regDate: 1535760000,
+      gearbox: 'selector_gearbox_automatic'
+    },
+    environmentEmissions: {
+      co2: 8.7
+    },
+    consumption: {
+      consumptionCombined: 9.6,
+      consumptionPowerCombined: 3.6,
+      fuel: 'selector_fuel_hybridElectricalPetrol'
+    },
+  };
+
+  const cardPropsComparable = {
+    ...cardPropsSlider,
+    slider: {},
+    vehicleComponentName: 'comparable',
+    seoText: ''
+  };
+
+  const cardPropsSearch = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'search',
+    seoText: '',
+    showSlider: true,
+    title: {
+      ...cardPropsSlider.title,
+      option: '110 kW (150 PS)',
+      isSponsored: true
+    },
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      getCarImagesData: () => new Promise(resolve => resolve(images)),
+      onFirstChange: action('first change')
+    },
+    isDealerSuperAdmin: true
+  };
+
+  const cardPropsAlternative = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'search',
+    seoText: '',
+    showSlider: true,
+    isAlternative: true,
+    title: {
+      ...cardPropsSlider.title,
+      option: '110 kW (150 PS)',
+      isSponsored: true
+    },
+    info: {
+      ...cardPropsSlider.info,
+      location: {
+        city: 'Lviv',
+        countryCode: 'UA',
+        street: 'Stepana Bandery',
+        zipCode: 64380
+      }
+    },
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      onFirstChange: action('first change')
+    },
+    isDealerSuperAdmin: true
+  };
+
+  const cardPropsReference = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'search',
+    seoText: '',
+    showSlider: true,
+    isAlternative: true,
+    isReferenceSearch: true,
+    CircularProgressbar: () => renderCircularProgressbar(8),
+    title: {
+      ...cardPropsSlider.title,
+      option: '110 kW (150 PS)',
+      isSponsored: true
+    },
+    info: {
+      ...cardPropsSlider.info,
+      location: {
+        city: 'Lviv',
+        countryCode: 'UA',
+        street: 'Stepana Bandery',
+        zipCode: 64380
+      }
+    },
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      onFirstChange: action('first change')
+    },
+    isDealerSuperAdmin: false
+  };
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <p>Landing with slider</p>
+        <Resizable {...resizablePropsSlider}>
+          <VehicleSmallCard {...cardPropsSlider} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Main without slider</p>
+        <Resizable {...resizableProps}>
+          <VehicleSmallCard {...cardProps} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <Resizable {...resizablePropsComparable}>
+          <p>Comparable cars</p>
+          <VehicleSmallCard {...cardPropsComparable} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Search cars</p>
+        <Resizable {...resizablePropsSearch}>
+          <VehicleSmallCard {...cardPropsSearch} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Alternative cars</p>
+        <Resizable {...resizablePropsAlternative}>
+          <VehicleSmallCard {...cardPropsAlternative} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Reference search cars</p>
+        <Resizable {...resizablePropsAlternative}>
+          <VehicleSmallCard {...cardPropsReference} />
+        </Resizable>
+      </div>
+    </>
+  );
+
+});
+
+storiesOf('VehicleSmallCard', module).add('VehicleSmallCard', () => <VehicleSmallCardStory />);

package/source/components/VehicleSmallCard/VehicleSmallCard.story.styl

@@ -0,0 +1,56 @@
+@import '../../theme/theme.styl';
+
+.wrapper
+  // position: fixed
+  width: 100%
+  height: 100%
+  left: 0px
+  top: 0px
+  display: flex
+  flex-direction: column;
+  background-color #fff
+  font-family: $font-style-arial
+  padding 0 10px;
+  // &>:first-child
+  //   border-right: 1px solid $grey-e
+  //   margin-right: 10px
+
+.propsContainer
+  overflow-y: auto
+
+.title
+  text-align: center
+  font-size: 22px
+  font-weight: bold
+
+.input
+  display: inline-block !important
+  margin-left: 10px
+  position: absolute
+  right: 0
+
+:global
+  .react-checkbox-tree
+    width: 550px
+    margin-right: 10px
+    padding-right: 10px
+  .rct-node
+    margin: 10px 0
+    position: relative
+
+.progressWrap
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+
+  & [class*='CircularProgressbar-text']
+    transform: translate(-18%, 10px);
+
+  &.progressWrapFull
+    & [class*='CircularProgressbar-text']
+      transform: translate(-27%, 10px);
+  &.progressWrapMin
+    & [class*='CircularProgressbar-text']
+      transform: translate(-10%, 10px);

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -131,7 +131,8 @@
 
   &.vehicleWrapMain
     box-sizing: border-box;
-    grid-template-columns: 55% 45%;
+    // mobile home/comparable: equal info|price columns (was 55/45).
+    grid-template-columns: 50% 50%;
     border: 1px solid #DFDFDF;
     margin-bottom: 5px;
     border-radius: 10px;
@@ -145,7 +146,11 @@
       padding: 0 16px;
 
     +media-tablet-landscape-up()
-      grid-template-columns: 120px 1fr;
+      // narrow 4-up home card (~256px): the price section (rates + "Zum Angebot" button) needs
+      // ~150px or it overflows the frame, so give the price column the larger share and the info
+      // (left) column the smaller one; minmax(0,…) keeps both tracks inside the card so nothing
+      // is clipped and the info spec text wraps instead of spilling out.
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
       border: 1px solid rgba(76, 78, 100, 0.12);
       border-radius: 10px;
       margin-bottom: 0;
@@ -216,6 +221,66 @@
 .gridAreaImage
   grid-area: image;
 
+// ADV-70: plug-in consumption/CO2 line — dedicated full-width row BELOW the specs table /
+// price block ("Zum Angebot") and ABOVE the equipment text, in small grey text. The
+// .vehicleWrapNewPlugin grid inserts a full-width 'consumption' row for every externalised
+// card type (search / landing / main / comparable).
+.vehicle.vehicleWrapNewPlugin
+  grid-template-areas:
+    'title title'\
+    'image image'\
+    'info price'\
+    'consumption consumption'\
+    'seoText seoText'
+
+  // SRL/search 3-column desktop: the consumption line sits in the INFO column only
+  // (starts AND ends under the spec block, not under the image and not into the price
+  // column). image + price span rows 2-3 so the "Zum Angebot" button bottom-aligns
+  // with the consumption line.
+  &.vehicleWrapSearch
+    +media-tablet-landscape-up()
+      grid-template-areas:
+        'title title price'\
+        'image info price'\
+        'image consumption price'
+      // No divider on the DESKTOP search card — the consumption sits inside the info
+      // column (button-aligned) where a top line is unwanted; keep it on mobile only.
+      & > .gridAreaConsumption
+        border-top: 0;
+        margin-top: 0;
+
+  // Favorites desktop: consumption sits in the info column between the image and the
+  // price/buttons column, button-aligned — same as the SRL card.
+  &.vehicleWrapFavorite
+    +media-tablet-landscape-up()
+      grid-template-areas:
+        'title title price'\
+        'image info price'\
+        'image consumption price'
+
+.gridAreaConsumption
+  grid-area: consumption;
+  width: 100%;
+  box-sizing: border-box;
+  // ADV-88: a divider above the externalised consumption/CO2 line on EVERY card surface
+  // it appears on (landing / main = home+CDP-comparable / search / favorite). The element
+  // only renders for new plug-in hybrids, so the line shows exactly for the task's cars;
+  // it spans the full row width where the row is full-width (mobile + main/landing), and
+  // the info-column width on the desktop search/favorite layout. Sets the line apart from
+  // the spec/price/"Zum Angebot" block above it.
+  border-top: 1px solid rgba(76, 78, 100, 0.12);
+  // a few px of space ABOVE the divider so the line doesn't hug the price/"Zum Angebot" block.
+  margin-top: 6px;
+  padding: 6px 10px 2px 10px;
+  font-size: 9px;
+  line-height: 1.4;
+  color: rgba(76, 78, 100, 0.87);
+  word-break: break-word;
+
+  span
+    font-size: 9px !important;
+    line-height: 1.4 !important;
+
 .wrapAlternativeData
   display flex
   font-size: 12px;