@bytebrand/fe-ui-core-autobahn 1.0.76 → 1.0.77

package/cards/CarCard.tsx

@@ -22,6 +22,7 @@ import { CardCarousel, IconButton, SaveChip, Button } from '../ui';
 import {
   SpecLine,
   EcoLine,
+  SeoLine,
   DropChip,
   PercentChip,
   ZeroDownChip,
@@ -207,21 +208,6 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             t={t}
           />
         </div>
-        {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
-            rendered, with real fallbacks the page can override once it wires its own
-            handlers (e.g. the "Rate anpassen" FinanceDetailsModal sheet). Never hidden. */}
-        <CardCtaRow
-          car={car}
-          mode={mode}
-          onRequestOffer={onRequestOffer || (() => onOpen(car))}
-          onCall={onCall || callDealerSalesPhone}
-          onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
-          t={t}
-        />
-        {/* EcoLine after the CTA row (not before): on mobile — where CardCtaRow actually
-            renders — the Figma card puts the Pkw-EnVKV legal line last, below the buttons.
-            On desktop CardCtaRow is display:none (.show-mobile), so this reorder is a no-op
-            there — EcoLine was already the last visible element on desktop either way. */}
         <EcoLine
           t={t}
           car={car}
@@ -236,6 +222,20 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             color: '#0e2238',
           }}
         />
+        {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
+            rendered, with real fallbacks the page can override once it wires its own
+            handlers (e.g. the "Rate anpassen" FinanceDetailsModal sheet). Never hidden. */}
+        <CardCtaRow
+          car={car}
+          mode={mode}
+          onRequestOffer={onRequestOffer || (() => onOpen(car))}
+          onCall={onCall || callDealerSalesPhone}
+          onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+          t={t}
+        />
+        {/* legacy VehicleSmallCard's "SeoText" footer line (full spec + equipment list) —
+            renders nothing when the caller hasn't populated car.seoText. */}
+        <SeoLine car={car} style={{ marginTop: 6 }} />
         {adminAction && (
           <div style={{ marginTop: 8 }}>
             <Button

package/cards/cardParts.tsx

@@ -352,6 +352,35 @@ export const EcoLine: React.FunctionComponent<EcoLineProps> = ({ car, style, t }
   );
 };
 
+export interface SeoLineProps {
+  car: AutobahnCar;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Full spec + equipment footer line (fuel, category, gearbox, colour, condition, drive
+ * type, then every equipment highlight) — the small gray text under the card's CTA row,
+ * same field/format as the legacy VehicleSmallCard's SeoText. Renders nothing without
+ * `car.seoText` (needs-data: only fe-landing currently populates it).
+ */
+export const SeoLine: React.FunctionComponent<SeoLineProps> = ({ car, style }) => {
+  if (!car.seoText) return null;
+  return (
+    <div
+      style={{
+        fontSize: 10,
+        lineHeight: '14px',
+        color: 'var(--md-on-surface-variant)',
+        maxHeight: 42,
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      {car.seoText}
+    </div>
+  );
+};
+
 export interface PricePathsProps {
   car: AutobahnCar;
   t: TranslationFunction;

package/cards/index.ts

@@ -18,6 +18,7 @@ export {
   PriceBlock,
   DropChip,
   EcoLine,
+  SeoLine,
   PricePaths,
   PriceKauf,
   PriceMeter,
@@ -40,6 +41,7 @@ export type {
   PriceBlockProps,
   DropChipProps,
   EcoLineProps,
+  SeoLineProps,
   PricePathsProps,
   PpActivityProps,
   GalleryBadgesProps,

package/cards/types.ts

@@ -92,6 +92,12 @@ export interface AutobahnCar {
   // --- trust / features (always real) ---
   /** equipment highlight chips (first few are shown on the row card). */
   features: string[];
+  /** full comma-joined spec + equipment line (fuel, category, gearbox, color, condition,
+   *  drive type, then every highlight) — the small gray footer line under the card's CTA
+   *  row, same field/format as the legacy VehicleSmallCard's SeoText. Optional: only
+   *  callers that already build this string (fe-landing's transformSearchResultItem)
+   *  populate it; others simply don't render the line. */
+  seoText?: string;
   /** price rating tone: 'fair' → warn pill, anything else → good pill. */
   rating: string;
   /** price rating label shown in the pill, e.g. 'Guter Preis'. */

package/data/toAutobahnCar.ts

@@ -476,6 +476,10 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
     ratingLabel,
 
     // optional (only when real)
+    // full spec+equipment footer line — pass through as-is when the caller already built it
+    // (fe-landing's transformSearchResultItem); no fallback assembly here, since the exact
+    // seoFields/highlights order is caller-specific (see AutobahnCar.seoText's own comment).
+    ...(typeof (storeCar as any).seoText === 'string' && (storeCar as any).seoText ? { seoText: (storeCar as any).seoText } : {}),
     ...(listPrice != null ? { listPrice } : {}),
     ...(savings != null ? { savings } : {}),
     ...(oldMonthly != null && oldMonthly > monthly ? { oldMonthly } : {}),

package/package.json

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