@bytebrand/fe-ui-core-autobahn 1.0.59 → 1.0.60

package/cards/CarRow.tsx

@@ -31,6 +31,8 @@ import {
   OfferBadge,
   PriceTabs,
   PriceHero,
+  PricePaths,
+  PriceKauf,
   DropChip,
   PercentChip,
   ZeroDownChip,
@@ -104,7 +106,8 @@ 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>}
             {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-            <ZeroDownChip t={t} show={car.zeroDown} compact />
+            <ZeroDownChip t={t} show={car.zeroDown} compact className="show-mobile" />
+            <ZeroDownChip t={t} show={car.zeroDown} className="hide-mobile" />
             <PercentChip pct={car.dropPct} />
           </div>
           <OfferBadge show={showOfferBadge} t={t} />
@@ -121,6 +124,14 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
         >
           <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
         </div>
+        {/* desktop: heart sits on the photo itself (Figma "mcard"), not next to the title. */}
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="hide-mobile"
+          style={{ position: 'absolute', top: 10, right: 10, zIndex: 3 }}
+        >
+          <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+        </div>
         {/* activity/trust badges — overlaid on the studio-white floor at the bottom of the photo
             itself (PM ref), not a separate divided strip below it. Bottom-right, raised above the
             carousel dots and the photo-count badge (positioning lives in .gallery-badges, md3.css). */}
@@ -128,17 +139,12 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
       </div>
 
       <div className="listcard-info">
-        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
-          <div style={{ minWidth: 0 }}>
-            <div className="md-title" style={{ fontSize: 18, lineHeight: 1.2 }}>
-              {car.make} {car.model}
-            </div>
-            <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-              {car.trim}
-            </div>
+        <div style={{ minWidth: 0 }}>
+          <div className="md-title" style={{ fontSize: 18, lineHeight: 1.2 }}>
+            {car.make} {car.model}
           </div>
-          <div onClick={(e) => e.stopPropagation()} className="hide-mobile">
-            <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+          <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {car.trim}
           </div>
         </div>
         <div className="specstrip">
@@ -160,12 +166,13 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
         <EcoLine t={t} car={car} />
       </div>
 
-      {/* price column: Finanzierung/Leasing/Kaufen tabs pick ONE hero price (same tabbed
-          component the grid CarCard uses), then the fixed Preisbewertung meter and the CTA,
-          anchored to the bottom (margin-top:auto) so the button sits flush at the foot. */}
+      {/* price column — mobile keeps the Finanzierung/Leasing/Kaufen tab switcher (ONE hero price
+          at a time); desktop shows all three payment paths stacked at once (Figma "mcard"), via
+          the previously-unused PricePaths/PriceKauf pair. Both variants share the same
+          Preisbewertung meter + CTA, anchored to the bottom (margin-top:auto on .pp-purchase). */}
       <div className="listcard-price">
-        <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
-        <div className="pp-purchase">
+        <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} className="show-mobile" />
+        <div className="pp-purchase show-mobile">
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
             <PriceHero car={car} mode={mode} t={t} />
             {car.rating && (
@@ -204,6 +211,49 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           )}
           <PpActivity t={t} car={car} />
         </div>
+
+        <PricePaths car={car} t={t} className="hide-mobile" />
+        <div className="pp-purchase hide-mobile">
+          <PriceKauf car={car} t={t} />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            {car.rating && (
+              <StatChip tone={ratingTone(car.rating)} icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}>
+                {t('autobahn:tier.' + car.rating)}
+              </StatChip>
+            )}
+            <div style={{ flex: 1 }}>
+              <PriceMeter t={t} car={car} />
+            </div>
+          </div>
+          <div className="pp-cta">
+            <Button
+              variant="filled"
+              block
+              iconRight="arrow-right"
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen(car);
+              }}
+            >
+              {t('autobahn:card.cta.viewOffer')}
+            </Button>
+          </div>
+          {adminAction && (
+            <div className="pp-cta">
+              <Button
+                variant="outlined"
+                block
+                onClick={(e) => {
+                  e.stopPropagation();
+                  adminAction.onClick();
+                }}
+              >
+                {adminAction.label}
+              </Button>
+            </div>
+          )}
+          <PpActivity t={t} car={car} />
+        </div>
       </div>
     </article>
   );

package/cards/cardParts.tsx

@@ -234,14 +234,18 @@ export const PercentChip: React.FunctionComponent<{ pct?: number }> = ({ pct })
  * there is room (grid cards / wide image) and uses the compact "0 € Anz." on the narrow list-card
  * image, so the badge row always stays on ONE line on both desktop and mobile.
  */
-export const ZeroDownChip: React.FunctionComponent<{ show?: boolean; compact?: boolean; t: TranslationFunction }> = ({
-  show,
-  compact,
-  t,
-}) => {
+export const ZeroDownChip: React.FunctionComponent<{
+  show?: boolean;
+  compact?: boolean;
+  t: TranslationFunction;
+  className?: string;
+}> = ({ show, compact, t, className }) => {
   if (!show) return null;
   return (
-    <span style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}>
+    <span
+      className={className}
+      style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}
+    >
       {compact ? t('autobahn:card.price.zeroDownCompact') : t('autobahn:card.price.zeroDown')}
     </span>
   );
@@ -341,6 +345,8 @@ export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }
 export interface PricePathsProps {
   car: AutobahnCar;
   t: TranslationFunction;
+  /** extra class appended to the root (e.g. the SRP card's desktop-only `hide-mobile` marker). */
+  className?: string;
 }
 
 /** Map the AutobahnCar rating tone → meter segment index (0 best … 4 worst). */
@@ -379,6 +385,8 @@ export interface PriceTabsProps {
   mode: PaymentMode;
   onModeChange: (mode: PaymentMode) => void;
   t: TranslationFunction;
+  /** extra class appended to the root (e.g. the SRP card's mobile-only `show-mobile` marker). */
+  className?: string;
 }
 
 /**
@@ -387,14 +395,14 @@ export interface PriceTabsProps {
  * identical to the VDP's, not a second tab style. Leasing tab omitted when the car isn't
  * leasing-eligible (car.lease undefined) — same rule PricePaths already used.
  */
-export const PriceTabs: React.FunctionComponent<PriceTabsProps> = ({ car, mode, onModeChange, t }) => {
+export const PriceTabs: React.FunctionComponent<PriceTabsProps> = ({ car, mode, onModeChange, t, className }) => {
   const tabs: Array<[PaymentMode, string]> = [
     ['financing', t('autobahn:finance.mode.financing')],
     ...(car.lease != null ? ([['leasing', t('autobahn:finance.mode.leasing')]] as Array<[PaymentMode, string]>) : []),
     ['buy', t('autobahn:card.price.buy')],
   ];
   return (
-    <div className="fin-tabs" role="tablist" onClick={(e) => e.stopPropagation()}>
+    <div className={'fin-tabs' + (className ? ' ' + className : '')} role="tablist" onClick={(e) => e.stopPropagation()}>
       {tabs.map(([m, label]) => (
         <button
           key={m}
@@ -589,7 +597,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 }) => {
+export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, className }) => {
   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
@@ -601,20 +609,34 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t })
   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;
   return (
-    <div className="pricepaths">
+    <div className={'pricepaths' + (className ? ' ' + className : '')}>
       <div className="pp-hero">
         <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
         <div className="pp-hero-rate">
-          <b className="num pp-hero-val">{fmtRate(car.monthly)} €</b>
-          <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>
+          {showOldMonthly && (
+            <span className="pp-hero-old">
+              {(car.oldMonthly as number).toLocaleString('de-DE')} €<sup>2</sup>
+            </span>
+          )}
+          <b className="num pp-hero-val">
+            {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>
       {hasLease && (
@@ -622,7 +644,8 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t })
           <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." />
           {hasLeasTerms && (
             <div className="pp-sub-terms">
-              {t('autobahn:card.price.leaseTerms', { mileage: leasMileageStr, months: leasMonths })}
+              {t('autobahn:card.price.leaseTerms', { mileage: leasMileageStr, months: leasMonths })}{' '}
+              · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
             </div>
           )}
         </div>

package/locales/de/autobahn.json

@@ -22,7 +22,8 @@
       "perMonth": "/mtl.",
       "leasing": "Leasing",
       "leasingFrom": "Leasing ab",
-      "buy": "Kaufen"
+      "buy": "Kaufen",
+      "details": "Details"
     },
     "eco": {
       "phevConsumptionLine": "+ {{consFuel}} (gew., komb.) · {{consDis}} (entl.) · CO₂ {{co2w}} · Klasse {{co2classW}} (gew.) / {{co2classD}} (entl.)*",

package/locales/en/autobahn.json

@@ -22,7 +22,8 @@
       "perMonth": "/mo.",
       "leasing": "Leasing",
       "leasingFrom": "Leasing from",
-      "buy": "Buy"
+      "buy": "Buy",
+      "details": "Details"
     },
     "eco": {
       "phevConsumptionLine": "+ {{consFuel}} (weighted, combined) · {{consDis}} (discharged) · CO₂ {{co2w}} · Class {{co2classW}} (weighted) / {{co2classD}} (discharged)*",

package/package.json

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

@@ -3962,6 +3962,23 @@ line-height: 31px;
   background: var(--md-sc-low);
   border-radius: var(--md-r-md);
 }
+/* desktop only (mobile keeps the flex-wrap flow above, untouched): a clean 2-column grid so
+   pairs line up (km|EZ, Kraftstoff|Getriebe, Leistung|Halter) instead of reflowing by text
+   length (Figma "mcard"). Facts render in DOM order [km, EZ, Getriebe, Kraftstoff, Leistung,
+   Halter, Verfügbarkeit]; only Getriebe/Kraftstoff swap columns via `order` to land as
+   Kraftstoff|Getriebe per the mockup — the array itself stays untouched (mobile relies on it). */
+@media (min-width: 601px) {
+  .md3 .specstrip {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  /* km/EZ/Kraftstoff pulled negative (in that order) so they sort ahead of the untouched,
+     default-order Getriebe/Leistung/Halter/Verfügbarkeit — net effect: km, EZ, Kraftstoff,
+     Getriebe, Leistung, Halter, Verfügbarkeit, i.e. only Kraftstoff hops in front of Getriebe. */
+  .md3 .specstrip > span:nth-child(1) { order: -3; }
+  .md3 .specstrip > span:nth-child(2) { order: -2; }
+  .md3 .specstrip > span:nth-child(4) { order: -1; }
+}
 /* filter rail: collapsible sections */
 .md3 .frail-group {
   border-bottom: 1px solid var(--md-outline-variant);
@@ -4199,6 +4216,9 @@ line-height: 31px;
 .md3 .pp-hero-old { font-size: 15px; color: var(--md-error); text-decoration: line-through; white-space: nowrap; }
 .md3 .pp-hero-val sup, .md3 .pp-hero-old sup, .md3 .pp-hero-unit sup { font-size: .6em; }
 .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. */
+.md3 .pp-details-link { color: var(--md-primary); text-decoration: underline; font-weight: 600; white-space: nowrap; }
 /* separator line between the financing block and the leasing row (legacy-design parity) */
 .md3 .pp-lease-row {
   margin-top: 16px;