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

package/cards/cardParts.tsx

@@ -475,6 +475,11 @@ export interface PriceHeroProps {
   car: AutobahnCar;
   mode: PaymentMode;
   t: TranslationFunction;
+  /** opt-in: render the "/mtl." unit next to the rate even without a struck old price to caption
+   *  (default false keeps every existing caller's behavior — the unit only ever showed alongside
+   *  the UVP-Rate/old-price group). The SRP desktop card wants the unit on every financing/leasing
+   *  rate, discounted or not. */
+  alwaysShowUnit?: boolean;
 }
 
 /** footnote badge + click-to-open popover, shared by the Finanzierung/Leasing "UVP-Rate" (³) and
@@ -529,7 +534,7 @@ const UvpBadge: React.FunctionComponent<{
  * superscript footnote markers (¹ price, ² struck reference, ³ "/mtl.") match the Figma card —
  * their legal text lives in the page's own footnote block, not duplicated per-card.
  */
-export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode, t }) => {
+export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode, t, alwaysShowUnit }) => {
   const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
   const isMoney = mode === 'buy';
   const value = mode === 'financing' ? car.monthly : mode === 'leasing' ? (car.lease as number) : car.price;
@@ -578,6 +583,10 @@ export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode,
             <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>
           </span>
         )}
+        {/* opt-in (alwaysShowUnit): no discount to caption, so just the plain unit next to the
+            rate instead of the full UVP-Rate/old-price group — existing callers that don't pass
+            this prop keep showing nothing here, exactly as before. */}
+        {!isMoney && !showOld && alwaysShowUnit && <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>}
         {/* Kaufen: no rate/unit to caption, just the real list price struck through — same
             car.listPrice already used by DropChip/PpRow. */}
         {isMoney && showOld && (
@@ -858,40 +867,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} alwaysShowUnit />
+      <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.68",
   "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. */