@bytebrand/fe-ui-core-autobahn 1.0.61 → 1.0.62

package/cards/CarRow.tsx

@@ -107,14 +107,28 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
             {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 className="show-mobile" />
-            <ZeroDownChip t={t} show={car.zeroDown} className="hide-mobile" />
+            <ZeroDownChip
+              t={t}
+              show={car.zeroDown}
+              className="hide-mobile"
+              style={{
+                height: 30,
+                padding: '0 10px',
+                borderRadius: 15,
+                background: 'rgba(0, 92, 255, 0.2)',
+                border: '1px solid rgba(0, 92, 255, 0.05)',
+                color: '#005CFF',
+                fontSize: 13,
+                fontWeight: 700,
+              }}
+            />
             <PercentChip pct={car.dropPct} />
           </div>
           <OfferBadge show={showOfferBadge} t={t} />
         </div>
-        {/* bottom-left: expand icon + "current|total" (Figma) — replaces the old plain photo-count
-            pill; GalleryBadges (eye/heart/trust) keeps its own spot bottom-right, unchanged. */}
-        <div style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
+        {/* mobile: expand icon + "current|total" pill, bottom-left; desktop uses its own lighter
+            counter chip further down (combined with the eye/heart chip). */}
+        <div className="show-mobile" style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
           <GalleryCounter current={photoIndex + 1} total={car.photos} />
         </div>
         <div
@@ -124,27 +138,58 @@ 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. */}
+        {/* activity/trust badges — mobile only (dark photo-count pill + eye/heart/trust pills);
+            desktop replaces this whole row with the combined light chips below (Figma "mcard" —
+            the heart itself lives in the info column's title row on desktop, per the Figma export,
+            not on the photo). */}
+        <div className="show-mobile">
+          <GalleryBadges car={car} t={t} />
+        </div>
+        {/* desktop: single row — light "1|N" photo counter + a combined eye/heart chip, no
+            availability/Geprüft pill (not present in the Figma "mcard" export). */}
         <div
-          onClick={(e) => e.stopPropagation()}
           className="hide-mobile"
-          style={{ position: 'absolute', top: 10, right: 10, zIndex: 3 }}
+          style={{ position: 'absolute', bottom: 12, left: 12, zIndex: 3, display: 'flex', alignItems: 'center', gap: 6 }}
         >
-          <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+          {car.photos > 1 && (
+            <span className="mcard-photo-chip">
+              <Icon name="maximize" size={16} stroke={1.7} />
+              {photoIndex + 1}|{car.photos}
+            </span>
+          )}
+          {(!!car.viewsCount || !!car.favoritesCount) && (
+            <span className="mcard-photo-chip">
+              {!!car.viewsCount && (
+                <>
+                  <Icon name="eye" size={16} stroke={1.7} />
+                  {car.viewsCount}
+                </>
+              )}
+              {!!car.favoritesCount && (
+                <>
+                  <Icon name="heart" size={16} stroke={1.7} />
+                  {car.favoritesCount}
+                </>
+              )}
+            </span>
+          )}
         </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). */}
-        <GalleryBadges car={car} t={t} />
       </div>
 
       <div className="listcard-info">
-        <div style={{ minWidth: 0 }}>
-          <div className="md-title" style={{ fontSize: 18, lineHeight: 1.2 }}>
-            {car.make} {car.model}
+        <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>
-          <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            {car.trim}
+          {/* desktop only — the Figma export places the heart here (title row), not on the photo;
+              mobile keeps its own heart on the photo (show-mobile, above), untouched. */}
+          <div onClick={(e) => e.stopPropagation()} className="hide-mobile">
+            <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
           </div>
         </div>
         <div className="specstrip">

package/cards/cardParts.tsx

@@ -246,12 +246,15 @@ export const ZeroDownChip: React.FunctionComponent<{
   compact?: boolean;
   t: TranslationFunction;
   className?: string;
-}> = ({ show, compact, t, className }) => {
+  /** overrides the default pill look (e.g. the desktop "mcard" full-text badge's own blue tint/size
+   *  from the Figma export) — merged last so it wins over the shared dealPill defaults below. */
+  style?: React.CSSProperties;
+}> = ({ show, compact, t, className, style }) => {
   if (!show) return null;
   return (
     <span
       className={className}
-      style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)' }}
+      style={{ ...dealPill, background: 'var(--md-accent-container)', color: 'var(--md-on-accent-container)', ...style }}
     >
       {compact ? t('autobahn:card.price.zeroDownCompact') : t('autobahn:card.price.zeroDown')}
     </span>
@@ -894,7 +897,8 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
                 firstInstallment: leasFirstInstallment,
                 months: leasMonths,
                 mileage: leasMileageStr,
-              })}
+              })}{' '}
+              · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
             </div>
           )}
         </div>

package/constants.ts

@@ -1,31 +1,31 @@
-// Autobahn (auto.de redesign) — shared lookup constants barrel.
-// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
-// see that file's header) plus the legacy fe-ui-core shim re-exports below.
-export * from './constants/autobahn';
-
-// ---------------------------------------------------------------------------
-// Legacy shared constants (moved here from fe-ui-core).
-//
-// This block mirrors the public symbol set of the old
-// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
-// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
-// implementations live under ./constants/ (core.ts, app.ts, price.ts,
-// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
-// ---------------------------------------------------------------------------
-
-export {
-  offers,
-  checkoutOffers,
-  checkoutWarranties,
-  checkoutSteps,
-  checkoutSubStep,
-  DELIVERY_PERIODS_EXTRA,
-  THREE,
-  WLTP_ENERGY_EFFICIENCY_CLASS
-} from './constants/core';
-
-export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
-
-export { priceRatings } from './constants/price';
-
-export { THROTTLE_DELAY } from './constants/Search';
+// Autobahn (auto.de redesign) — shared lookup constants barrel.
+// Pure data re-exported from ./constants/autobahn (kept import-safe for plain Node consumers,
+// see that file's header) plus the legacy fe-ui-core shim re-exports below.
+export * from './constants/autobahn';
+
+// ---------------------------------------------------------------------------
+// Legacy shared constants (moved here from fe-ui-core).
+//
+// This block mirrors the public symbol set of the old
+// `@bytebrand/fe-ui-core/constants` barrel so consumers can swap that
+// specifier for `@bytebrand/fe-ui-core-autobahn/constants` 1:1. The
+// implementations live under ./constants/ (core.ts, app.ts, price.ts,
+// Search.ts, …); fe-ui-core re-exports them via shims until it is deleted.
+// ---------------------------------------------------------------------------
+
+export {
+  offers,
+  checkoutOffers,
+  checkoutWarranties,
+  checkoutSteps,
+  checkoutSubStep,
+  DELIVERY_PERIODS_EXTRA,
+  THREE,
+  WLTP_ENERGY_EFFICIENCY_CLASS
+} from './constants/core';
+
+export { CUSTOM_ERROR_MESSAGES, supportPhone, supportPhoneLink } from './constants/app';
+
+export { priceRatings } from './constants/price';
+
+export { THROTTLE_DELAY } from './constants/Search';

package/package.json

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

@@ -3932,8 +3932,25 @@ line-height: 31px;
   font-weight: 600;
   white-space: nowrap;
 }
-/* Car Card gallery overlay pills (Figma "Vehicle Gallery / Photos Button" node 281:1016 and
-   "Push Chips / Likes" node 297:1037) — light glass pill, distinct from the dark `.imglabel`
+/* desktop-only "mcard" (CarRow/SRP) photo-count / eye+heart chip (Figma "Vehicle Gallery / Photos
+   Button" and "Push Chips / Likes") — lighter/more translucent than .gallery-pill (which stays
+   mobile-only, used by .gallery-badges above), and can hold two icon+count pairs in one pill. */
+.md3 .mcard-photo-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 16px;
+  border: 1px solid #e5eaf0;
+  background: rgba(245, 247, 250, 0.5);
+  color: #111820;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+/* Car Card (grid) gallery overlay pills (Figma "Vehicle Gallery / Photos Button" node 281:1016
+   and "Push Chips / Likes" node 297:1037) — light glass pill, distinct from the dark `.imglabel`
    used elsewhere (VDP main gallery) and from the older `.gallery-pill` iteration above. */
 .md3 .cc-photo-pill {
   display: inline-flex;

package/utils/financeFormat.ts

@@ -1,62 +1,62 @@
-// Autobahn (auto.de redesign) — shared financing-number formatting.
-//
-// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
-// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
-// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
-// Node service.
-//
-// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
-// financing means monthly×term is NOT the total) and lives here once, not per-caller.
-
-/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
- *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
-export function formatEur(n: number): string {
-  return n.toLocaleString('de-DE');
-}
-
-/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
-export function formatPct(n: number): string {
-  return `${n.toFixed(2).replace('.', ',')} %`;
-}
-
-export interface FinanceExampleFields {
-  price: number;
-  apr: number;
-  down: number;
-  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
-  netLoanAmount?: number;
-  nominalRate?: number;
-  finalInstallment?: number;
-  grossAmount?: number;
-}
-
-export interface FinanceExampleLabels {
-  vehiclePrice: string;
-  priceSuffix: string;
-  apr: string;
-  nominal: string;
-  net: string;
-  down: string;
-  final: string;
-  gross: string;
-}
-
-/**
- * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
- * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
- * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
- * `exampleLine`, byte-for-byte).
- */
-export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
-  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
-  const parts: string[] = [
-    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
-    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
-    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
-    `${labels.net}: ${formatEur(netto)} €`,
-    `${labels.down}: ${formatEur(fields.down)} €`,
-    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
-    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
-  ];
-  return `${footnoteMarker} ${parts.join('; ')};`;
-}
+// Autobahn (auto.de redesign) — shared financing-number formatting.
+//
+// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
+// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
+// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
+// Node service.
+//
+// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
+// financing means monthly×term is NOT the total) and lives here once, not per-caller.
+
+/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
+ *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
+export function formatEur(n: number): string {
+  return n.toLocaleString('de-DE');
+}
+
+/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
+export function formatPct(n: number): string {
+  return `${n.toFixed(2).replace('.', ',')} %`;
+}
+
+export interface FinanceExampleFields {
+  price: number;
+  apr: number;
+  down: number;
+  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
+  netLoanAmount?: number;
+  nominalRate?: number;
+  finalInstallment?: number;
+  grossAmount?: number;
+}
+
+export interface FinanceExampleLabels {
+  vehiclePrice: string;
+  priceSuffix: string;
+  apr: string;
+  nominal: string;
+  net: string;
+  down: string;
+  final: string;
+  gross: string;
+}
+
+/**
+ * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
+ * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
+ * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
+ * `exampleLine`, byte-for-byte).
+ */
+export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
+  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
+  const parts: string[] = [
+    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
+    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
+    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
+    `${labels.net}: ${formatEur(netto)} €`,
+    `${labels.down}: ${formatEur(fields.down)} €`,
+    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
+    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
+  ];
+  return `${footnoteMarker} ${parts.join('; ')};`;
+}

package/utils/priceRating.ts

@@ -1,58 +1,58 @@
-// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
-//
-// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
-// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
-// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
-// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
-// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
-// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
-// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
-import { priceRatings, priceRatingConfig } from '../constants/price';
-import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
-
-export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
-  const round = (value: number) => {
-    return Number.isFinite(pricePredicted)
-      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
-      : '???';
-  };
-
-  if (currentPrice === 0) {
-    console.log('Empty current price');
-  }
-
-  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
-    const { min, max } = priceRatingConfig[key];
-    return { ...acc, [key]: { min: round(min), max: round(max) } };
-  }, {}); // tslint:disable-line
-};
-
-export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
-  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
-    return predictablePrice;
-  }
-
-  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
-}
-
-export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
-  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
-  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
-
-  if (!isCorrectCurrentSalesPrice) return 0;
-
-
-  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
-
-  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
-
-  for (const key of Object.keys(ratingConfig)) {
-    const { min, max } = ratingConfig[key];
-    const TOP_PRICE = 5;
-    if (key === 'highPrice' && currentSalesPrice === max) return 1;
-    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
-    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
-  }
-
-  return 0;
-};
+// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
+//
+// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
+// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
+// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
+// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
+// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
+// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
+// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
+import { priceRatings, priceRatingConfig } from '../constants/price';
+import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
+
+export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
+  const round = (value: number) => {
+    return Number.isFinite(pricePredicted)
+      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
+      : '???';
+  };
+
+  if (currentPrice === 0) {
+    console.log('Empty current price');
+  }
+
+  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
+    const { min, max } = priceRatingConfig[key];
+    return { ...acc, [key]: { min: round(min), max: round(max) } };
+  }, {}); // tslint:disable-line
+};
+
+export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
+  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
+    return predictablePrice;
+  }
+
+  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
+}
+
+export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
+  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
+  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
+
+  if (!isCorrectCurrentSalesPrice) return 0;
+
+
+  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
+
+  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
+
+  for (const key of Object.keys(ratingConfig)) {
+    const { min, max } = ratingConfig[key];
+    const TOP_PRICE = 5;
+    if (key === 'highPrice' && currentSalesPrice === max) return 1;
+    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
+    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
+  }
+
+  return 0;
+};