@bytebrand/fe-ui-core-autobahn 1.0.66 → 1.0.67

package/cards/cardParts.tsx

@@ -858,40 +858,21 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
   const leasMonths = car.leaseMonths ?? _leasPeriod;
   const hasLeasTerms = Boolean(leasMileage && leasMonths);
   const leasMileageStr = leasMileage ? Number(leasMileage).toLocaleString('de-DE') : '';
-  // same real struck-through reference rate PriceHero shows for the financing tab (oldMonthly) —
-  // shown here too now that both rows render at once instead of behind a tab.
-  const showOldMonthly = car.oldMonthly != null && car.oldMonthly > car.monthly;
-  // same digit-length shrink technique as PriceHero's own rateLenClass, so a long rate (e.g.
-  // 1.612 €) doesn't overflow the desktop hero's much larger 65px base size.
-  const rateDigits = String(Math.round(car.monthly)).length;
-  const rateLenClass =
-    rateDigits >= 6 ? ' pp-hero-val--len6' : rateDigits === 5 ? ' pp-hero-val--len5' : rateDigits === 4 ? ' pp-hero-val--len4' : '';
   return (
     <div className={'pricepaths' + (className ? ' ' + className : '')}>
-      <div className="pp-hero">
-        <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
-        <div className="pp-hero-rate">
-          {showOldMonthly && (
-            <span className="pp-hero-old">
-              {(car.oldMonthly as number).toLocaleString('de-DE')} €<sup>2</sup>
-            </span>
-          )}
-          <b className={'num pp-hero-val' + rateLenClass}>
-            {fmtRate(car.monthly)} €<sup>1</sup>
-          </b>
-          <span className="pp-hero-unit">
-            {t('autobahn:card.price.perMonth')}
-            <sup>3</sup>
-          </span>
-        </div>
-        <div className="pp-hero-terms">
-          {t('autobahn:card.price.financeTerms', {
-            firstInstallment: finFirstInstallment,
-            months: finMonths,
-            count: finMonths,
-          })}{' '}
-          · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
-        </div>
+      <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
+      {/* reuses PriceHero's own financing rendering — the exact same stacked "UVP-Rate ⓘ /
+          struck price / mtl." group beside the rate that .cc-price and mobile's tab switcher
+          already use, so the rate + unit never fight for room in one flat row (the earlier
+          hand-rolled version here put them side by side and wrapped for any 4+-digit rate). */}
+      <PriceHero car={car} mode="financing" t={t} />
+      <div className="pp-hero-terms">
+        {t('autobahn:card.price.financeTerms', {
+          firstInstallment: finFirstInstallment,
+          months: finMonths,
+          count: finMonths,
+        })}{' '}
+        · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
       </div>
       {hasLease && (
         <div className="pp-lease-row">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.66",
+  "version": "1.0.67",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/theme/md3.css

@@ -4040,6 +4040,11 @@ line-height: 31px;
   .md3 .specstrip > span:nth-child(1) { order: -3; }
   .md3 .specstrip > span:nth-child(2) { order: -2; }
   .md3 .specstrip > span:nth-child(4) { order: -1; }
+  /* a little extra room on the right for the 65px hero rate + its stacked UVP/old-price/unit
+     group — mobile keeps the symmetric 18px (its own hero is 32px, never this tight). */
+  .md3 .listcard-price {
+    padding-right: 6px;
+  }
 }
 /* filter rail: collapsible sections */
 .md3 .frail-group {
@@ -4310,6 +4315,89 @@ line-height: 31px;
   transform: rotate(12.53deg);
   transform-origin: center;
 }
+/* keep the rate + its UVP/old-price/unit group on ONE line (matches .cc-price's own override) —
+   without this the group wraps below the rate the moment the column runs a few px short. */
+.md3 .listcard-price .pricepaths .pp-hero-rate {
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+}
+/* nowrap on the row alone still lets the flex algorithm SHRINK the rate itself to make room,
+   which wrapped "310 €" into "310" / "€" on two lines — pin both items to their natural size so
+   the row overflows visibly (a signal to trim further) instead of mangling the price digits. */
+.md3 .listcard-price .pricepaths .pp-hero-val {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.md3 .listcard-price .pricepaths .pp-hero-unit-group {
+  flex-shrink: 0;
+}
+/* the UVP-Rate caption nested inside the hero's own unit-group (PriceHero) — NOT the outer
+   "Finanzierung ab" eyebrow this card renders itself (that one stays at its own 11px above);
+   shrunk to the same 8px .cc-price uses so the 3-line stack stays narrow enough to fit beside
+   the rate without wrapping. The badge has NO base (unscoped) style at all otherwise — it would
+   render as bare, unstyled "3" text without this. */
+.md3 .listcard-price .pricepaths .pp-hero-unit-group .pp-eyebrow {
+  position: relative;
+  font-size: 8px;
+  font-weight: 400;
+  line-height: 9px;
+  letter-spacing: normal;
+  text-transform: none;
+  color: #0e2238;
+  margin-bottom: 2px;
+}
+.md3 .listcard-price .pricepaths .pp-eyebrow-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: -5px;
+  right: -8px;
+  border-radius: 50%;
+  width: 12px;
+  height: 11px;
+  background: rgba(255, 255, 255, 0.96);
+  border: 0.5px solid #005cff;
+  font-size: 8px;
+  line-height: 9px;
+  color: #0e2238;
+  cursor: pointer;
+}
+.md3 .listcard-price .pricepaths .pp-hero-old .pp-eyebrow-badge {
+  top: -7px;
+  right: -12px;
+}
+.md3 .listcard-price .pricepaths .pp-uvp-tooltip {
+  position: absolute;
+  top: 6px;
+  right: -18px;
+  left: -18px;
+  z-index: 20;
+  padding: 10px 12px;
+  border-radius: 15px;
+  background: #c5c6d2;
+  box-shadow: var(--md-e2, 0 4px 12px rgba(0, 0, 0, 0.15));
+  white-space: normal;
+  cursor: default;
+}
+.md3 .listcard-price .pricepaths .pp-uvp-tooltip-close {
+  position: absolute;
+  top: -38px;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(11, 19, 32, 0.35);
+  border: 1.5px solid rgba(255, 255, 255, 0.25);
+  padding: 0;
+  cursor: pointer;
+}
+.md3 .listcard-price .pricepaths .pp-uvp-tooltip-close svg { width: 14px; height: 14px; }
+.md3 .listcard-price .pricepaths .pp-uvp-tooltip-body { font-size: 11px; line-height: 13px; color: #0e2238; }
 .md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
 /* "Details" link at the end of the financing/leasing terms lines (Figma "mcard") — quiet, same
    color as the rest of the terms line but underlined so it still reads as tappable. */