@bytebrand/fe-ui-core-autobahn 1.0.82 → 1.0.84

package/cards/CarCard.tsx

@@ -102,6 +102,14 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   const [viewerOpen, setViewerOpen] = useState(false);
   const showSave = car.savings != null && car.savings > 600;
   const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown);
+  // PM call: the badge row only fits 3 pills — when Drop/Save + Percent + ZeroDown are all
+  // active that's already 3, so NEU is dropped rather than causing a 4th to overflow.
+  const activeDealChips = [
+    car.drop != null || showSave,
+    car.dropPct != null && car.dropPct > 0,
+    !!car.zeroDown,
+  ].filter(Boolean).length;
+  const showNeu = car.isNew && activeDealChips < 3;
   return (
     <article
       className="mcard mcard--interactive cc-card"
@@ -148,7 +156,9 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
                 t={t}
                 show={car.zeroDown}
                 style={{
-                  width: 104,
+                  // "€0 down payment" (en) doesn't fit the German pill's 104px — only German's
+                  // "0 € Anzahlung" gets the narrow width, every other locale gets more room.
+                  width: t('autobahn:card.price.zeroDown') === '0 € Anzahlung' ? 104 : 125,
                   height: 30,
                   padding: 0,
                   justifyContent: 'center',
@@ -162,7 +172,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
                   color: '#005CFF',
                 }}
               />
-              {car.isNew && <span className="neu-badge">NEU</span>}
+              {showNeu && <span className="neu-badge">NEU</span>}
             </div>
             <OfferBadge show={showOfferBadge} t={t} />
           </div>

package/cards/CarRow.tsx

@@ -60,13 +60,36 @@ export interface CarRowProps {
    * Rendered as a quiet button under the CTA; the page decides visibility (JWT claim).
    */
   adminAction?: { label: string; onClick: () => void };
+  /**
+   * takes over the desktop price column's "Details" links (financing/leasing terms rows) — e.g.
+   * navigate to this car's own VDP and open its finance modal already expanded, on the tab the
+   * link was under. Optional/page-owned like CarCard's identically-named prop; when omitted the
+   * links render as plain text (see PricePaths' own fallback).
+   */
+  onShowFinancingDetails?: (car: AutobahnCar, mode: PaymentMode) => void;
 }
 
-const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggleFavorite, onOpen, onMediaEnter, t, adminAction }) => {
+const CarRow: React.FunctionComponent<CarRowProps> = ({
+  car,
+  isFavorite,
+  onToggleFavorite,
+  onOpen,
+  onMediaEnter,
+  t,
+  adminAction,
+  onShowFinancingDetails,
+}) => {
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
   const showSave = car.savings != null && car.savings > 600;
   const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown);
+  // same overflow rule as CarCard: the row only fits 3 pills, so NEU drops when the other 3 are all active.
+  const activeDealChips = [
+    car.drop != null || showSave,
+    car.dropPct != null && car.dropPct > 0,
+    !!car.zeroDown,
+  ].filter(Boolean).length;
+  const showNeu = car.isNew && activeDealChips < 3;
   const facts: Array<[icon: string, value: string]> = [
     ['gauge', fmtKm(car.km)],
     ['calendar', t('autobahn:card.specs.firstRegistration', { reg: car.reg })],
@@ -106,7 +129,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           }}
         >
           <div style={{ display: 'flex', flexWrap: 'nowrap', alignItems: 'center', gap: 5 }}>
-            {car.isNew && <span className="neu-badge">NEU</span>}
+            {showNeu && <span className="neu-badge">NEU</span>}
             {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
             <ZeroDownChip t={t} show={car.zeroDown} compact className="show-mobile" />
             <ZeroDownChip
@@ -259,7 +282,12 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           <PpActivity t={t} car={car} />
         </div>
 
-        <PricePaths car={car} t={t} className="hide-mobile" />
+        <PricePaths
+          car={car}
+          t={t}
+          className="hide-mobile"
+          onShowDetails={onShowFinancingDetails ? (mode) => onShowFinancingDetails(car, mode) : undefined}
+        />
         <div className="pp-purchase hide-mobile">
           <PriceKauf car={car} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>

package/cards/cardParts.tsx

@@ -386,6 +386,11 @@ export interface PricePathsProps {
   t: TranslationFunction;
   /** extra class appended to the root (e.g. the SRP card's desktop-only `hide-mobile` marker). */
   className?: string;
+  /** takes over the financing/leasing terms rows' own "Details" links — e.g. navigate to this
+   *  car's VDP and open its finance modal already expanded, on the tab the link was under
+   *  (financing/leasing). Optional/page-owned like CarCard's onShowFinancingDetails; when
+   *  omitted the links render as plain (non-interactive) text, same as before this prop existed. */
+  onShowDetails?: (mode: PaymentMode) => void;
 }
 
 /** Map the AutobahnCar rating tone → meter segment index (0 best … 4 worst). */
@@ -926,7 +931,7 @@ const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, f
  * is omitted entirely when leasing isn't active. The Kaufen row is rendered separately
  * (PriceKauf) below a divider so only the financing rate stands out — no wall of blue prices.
  */
-export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, className }) => {
+export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, className, onShowDetails }) => {
   const hasLease = car.lease != null;
   // Terms of the config the displayed rate was actually computed with (per-car:
   // dealer rate + the user's saved localStorage adjustments) — default config
@@ -938,6 +943,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') : '';
+  const detailsLink = (mode: PaymentMode): React.ReactNode =>
+    onShowDetails ? (
+      <button
+        type="button"
+        className="pp-details-link"
+        onClick={(e) => {
+          e.stopPropagation();
+          onShowDetails(mode);
+        }}
+      >
+        {t('autobahn:card.price.details')}
+      </button>
+    ) : (
+      <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
+    );
   return (
     <div className={'pricepaths' + (className ? ' ' + className : '')}>
       <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
@@ -952,7 +972,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
           months: finMonths,
           count: finMonths,
         })}{' '}
-        · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
+        · {detailsLink('financing')}
       </div>
       {hasLease && (
         <div className="pp-lease-row">
@@ -967,7 +987,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
                 months: leasMonths,
                 mileage: leasMileageStr,
               })}{' '}
-              · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
+              · {detailsLink('leasing')}
             </div>
           )}
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.82",
+  "version": "1.0.84",
   "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

@@ -4447,7 +4447,18 @@ line-height: 31px;
 .md3 .listcard-price .pricepaths .pp-hero-terms { font-size: 10.5px; }
 /* "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. */
-.md3 .pp-details-link { color: var(--md-primary); text-decoration: underline; font-weight: 600; white-space: nowrap; }
+.md3 .pp-details-link {
+  border: 0;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: var(--md-primary);
+  text-decoration: underline;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
 /* z.B./old-rate/unit column beside the CarCard hero figure — mirrors .fin-rate-unit
    (FinanceCalculator.tsx/md3.css) exactly; only used inside .cc-price's PriceHero. */
 .md3 .pp-hero-unit-group {

package/vdp/VdpModules.tsx

@@ -1967,8 +1967,10 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   const [uvpTooltipOpen, setUvpTooltipOpen] = React.useState(false);
   // opened directly via the "Finanzierungsdetails" link (initialShowBreakdown) — on mobile the
   // breakdown is still gated behind its own toggle, so scroll the sheet down to reveal it instead
-  // of leaving the user at the top. Desktop always shows the breakdown inline now (no toggle), so
-  // it's excluded here — scrolling straight past the price/sliders/toggles on open was jarring.
+  // of leaving the user at the top. Desktop always shows the breakdown inline (no toggle), but it
+  // can still sit below the fold inside .fin-modal-body's own scroll area, so it gets the same
+  // treatment — whichever of the two refs is actually visible (show-mobile/hide-mobile via CSS)
+  // is the one scrolled.
   const desktopBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   const mobileBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   React.useEffect(() => {
@@ -1976,8 +1978,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     setShowBreakdown(!!initialShowBreakdown);
     if (!initialShowBreakdown) return;
     const timer = window.setTimeout(() => {
-      const target = mobileBreakdownRef.current;
-      if (target && target.offsetParent !== null) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const target = [mobileBreakdownRef.current, desktopBreakdownRef.current].find((el) => el && el.offsetParent !== null);
+      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, 50);
     return () => window.clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps