@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/cards/CarRow.tsx

@@ -1,182 +1,186 @@
-// Autobahn (auto.de redesign) — horizontal listing car card (SRP).
-//
-// Typed React 18 + TS port of `CarRow` from the design kit
-// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Image | info | price
-// layout (AutoScout24 / mobile.de). The whole card is clickable; inner heart and
-// CTA stop propagation so they don't also trigger the card open.
-//
-// Pure / presentational: all data via the `AutobahnCar` prop, all behaviour via
-// injected callbacks. No store / API / `window` access. Renders correctly only
-// inside a `<div className="md3">` subtree.
-//
-// Differs from the design kit on purpose:
-//  - favorite state is INJECTED (isFavorite + onToggleFavorite) instead of the
-//    design's internal useState; the same state drives both the mobile and the
-//    desktop heart.
-//  - deal signals (DropChip / SaveChip) only render when real data is present.
-//  - the CTA is wrapped in `<div className="pp-cta">` (the Button primitive has
-//    no className prop) so the scoped `.pp-cta` margin / responsive rules and the
-//    `.pp-cta + .pp-activity` adjacency in md3.css still apply.
-
-import React from 'react';
-import { TranslationFunction } from '../types';
-
-import { CardCarousel, IconButton, SaveChip, Button, Icon } from '../ui';
-import { EcoLine, PricePaths, PriceKauf, PriceMeter, PpActivity, DropChip, PercentChip, ZeroDownChip, fmtKm } from './cardParts';
-import { AutobahnCar } from './types';
-
-export interface CarRowProps {
-  /** fully-resolved car view-model. */
-  car: AutobahnCar;
-  /** whether this car is on the user's merkliste (drives both hearts). */
-  isFavorite: boolean;
-  /** toggle the favorite; the hearts call this (click is kept off the card). */
-  onToggleFavorite: () => void;
-  /** fired when the card (or the CTA) is clicked (opens the detail page). */
-  onOpen: (car: AutobahnCar) => void;
-  /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
-  onMediaEnter?: () => void;
-  /** i18n translate fn (drilled from the page). */
-  t: TranslationFunction;
-  /**
-   * Optional admin-only action (e.g. dealer super admins' "Zum Schieberegler hinzufügen").
-   * Rendered as a quiet button under the CTA; the page decides visibility (JWT claim).
-   */
-  adminAction?: { label: string; onClick: () => void };
-}
-
-const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggleFavorite, onOpen, onMediaEnter, t, adminAction }) => {
-  const showSave = car.savings != null && car.savings > 600;
-  const facts: Array<[icon: string, value: string]> = [
-    ['gauge', fmtKm(car.km)],
-    ['calendar', t('autobahn:card.specs.firstRegistration', { reg: car.reg })],
-    ['cog', car.gear],
-    ['fuel', car.fuel.replace(/\s*\(.*\)/, '')],
-    // keep full power incl. PS (e.g. "110 kW (150 PS)") — parity with the legacy listing card.
-    ['zap', car.power],
-  ];
-  // owners is 0 when the payload had no value ('N/A' → 0); don't render a fabricated "0. Hand".
-  if (car.owners > 0) facts.push(['user', t('autobahn:card.specs.owners', { owners: car.owners, count: car.owners })]);
-  // availability (e.g. 'Sofort verfügbar') — only when the payload provides it.
-  if (car.availability) facts.push(['circle-check', car.availability]);
-  return (
-    <article
-      className="mcard mcard--interactive listcard"
-      onClick={() => onOpen(car)}
-      style={{ background: 'var(--md-sc-lowest)' }}
-    >
-      <div className="listcard-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
-        <CardCarousel images={car.gallery} height="100%" fit="contain" />
-        {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%. The price RATING
-            ('Guter Preis') is NOT here — it lives in the price column (PricePaths meter). */}
-        <div
-          style={{
-            position: 'absolute',
-            top: 10,
-            left: 10,
-            right: 10,
-            zIndex: 3,
-            display: 'flex',
-            flexDirection: 'row',
-            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 />
-          <PercentChip pct={car.dropPct} />
-        </div>
-        <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
-          <span className="imglabel">
-            <Icon name="image" size={13} />
-            {car.photos}
-          </span>
-        </div>
-        <div
-          onClick={(e) => e.stopPropagation()}
-          className="show-mobile"
-          style={{ position: 'absolute', top: 8, right: 8, zIndex: 3 }}
-        >
-          <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
-        </div>
-      </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>
-          <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">
-          {facts.map(([ic, v]) => (
-            <span key={ic} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, whiteSpace: 'nowrap' }}>
-              <Icon name={ic} size={15} color="var(--md-primary)" stroke={1.8} style={{ flex: 'none' }} />
-              <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--md-on-surface)' }}>{v}</span>
-            </span>
-          ))}
-        </div>
-        <div className="listcard-chips" style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
-          {car.features.slice(0, 4).map((f) => (
-            <span key={f} className="chip" style={{ cursor: 'default' }}>
-              {f}
-            </span>
-          ))}
-        </div>
-        <div style={{ flex: 1 }} />
-        <EcoLine t={t} car={car} />
-      </div>
-
-      {/* price column, two groups: monthly rates on top (Finanzierung is the big-blue focus,
-          Leasing quiet), then a divider and the purchase group (Kaufen + meter + CTA) anchored to
-          the bottom (margin-top:auto) — so only ONE price stands out and the CTA sits flush at the
-          foot with no trailing gap. */}
-      <div className="listcard-price">
-        <PricePaths t={t} car={car} />
-        <div className="pp-purchase">
-          <PriceKauf t={t} car={car} />
-          <PriceMeter t={t} car={car} />
-          <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>
-  );
-};
-
-export default CarRow;
+// Autobahn (auto.de redesign) — horizontal listing car card (SRP).
+//
+// Typed React 18 + TS port of `CarRow` from the design kit
+// (docs/redesign/design-source/ui_kits/website/CarCard.jsx). Image | info | price
+// layout (AutoScout24 / mobile.de). The whole card is clickable; inner heart and
+// CTA stop propagation so they don't also trigger the card open.
+//
+// Pure / presentational: all data via the `AutobahnCar` prop, all behaviour via
+// injected callbacks. No store / API / `window` access. Renders correctly only
+// inside a `<div className="md3">` subtree.
+//
+// Differs from the design kit on purpose:
+//  - favorite state is INJECTED (isFavorite + onToggleFavorite) instead of the
+//    design's internal useState; the same state drives both the mobile and the
+//    desktop heart.
+//  - deal signals (DropChip / SaveChip) only render when real data is present.
+//  - the CTA is wrapped in `<div className="pp-cta">` (the Button primitive has
+//    no className prop) so the scoped `.pp-cta` margin / responsive rules and the
+//    `.pp-cta + .pp-activity` adjacency in md3.css still apply.
+
+import React from 'react';
+import { TranslationFunction } from '../types';
+
+import { CardCarousel, IconButton, SaveChip, Button, Icon } from '../ui';
+import { EcoLine, PricePaths, PriceKauf, PriceMeter, PpActivity, GalleryBadges, DropChip, PercentChip, ZeroDownChip, fmtKm } from './cardParts';
+import { AutobahnCar } from './types';
+
+export interface CarRowProps {
+  /** fully-resolved car view-model. */
+  car: AutobahnCar;
+  /** whether this car is on the user's merkliste (drives both hearts). */
+  isFavorite: boolean;
+  /** toggle the favorite; the hearts call this (click is kept off the card). */
+  onToggleFavorite: () => void;
+  /** fired when the card (or the CTA) is clicked (opens the detail page). */
+  onOpen: (car: AutobahnCar) => void;
+  /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
+  onMediaEnter?: () => void;
+  /** i18n translate fn (drilled from the page). */
+  t: TranslationFunction;
+  /**
+   * Optional admin-only action (e.g. dealer super admins' "Zum Schieberegler hinzufügen").
+   * Rendered as a quiet button under the CTA; the page decides visibility (JWT claim).
+   */
+  adminAction?: { label: string; onClick: () => void };
+}
+
+const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggleFavorite, onOpen, onMediaEnter, t, adminAction }) => {
+  const showSave = car.savings != null && car.savings > 600;
+  const facts: Array<[icon: string, value: string]> = [
+    ['gauge', fmtKm(car.km)],
+    ['calendar', t('autobahn:card.specs.firstRegistration', { reg: car.reg })],
+    ['cog', car.gear],
+    ['fuel', car.fuel.replace(/\s*\(.*\)/, '')],
+    // keep full power incl. PS (e.g. "110 kW (150 PS)") — parity with the legacy listing card.
+    ['zap', car.power],
+  ];
+  // owners is 0 when the payload had no value ('N/A' → 0); don't render a fabricated "0. Hand".
+  if (car.owners > 0) facts.push(['user', t('autobahn:card.specs.owners', { owners: car.owners, count: car.owners })]);
+  // availability (e.g. 'Sofort verfügbar') — only when the payload provides it.
+  if (car.availability) facts.push(['circle-check', car.availability]);
+  return (
+    <article
+      className="mcard mcard--interactive listcard"
+      onClick={() => onOpen(car)}
+      style={{ background: 'var(--md-sc-lowest)' }}
+    >
+      <div className="listcard-media" onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
+        <div className="listcard-media-img">
+          <CardCarousel images={car.gallery} height="100%" fit="contain" />
+          {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%. The price RATING
+              ('Guter Preis') is NOT here — it lives in the price column (PricePaths meter). */}
+          <div
+            style={{
+              position: 'absolute',
+              top: 10,
+              left: 10,
+              right: 10,
+              zIndex: 3,
+              display: 'flex',
+              flexDirection: 'row',
+              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 />
+            <PercentChip pct={car.dropPct} />
+          </div>
+          <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
+            <span className="imglabel">
+              <Icon name="image" size={13} />
+              {car.photos}
+            </span>
+          </div>
+          <div
+            onClick={(e) => e.stopPropagation()}
+            className="show-mobile"
+            style={{ position: 'absolute', top: 8, right: 8, zIndex: 3 }}
+          >
+            <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+          </div>
+        </div>
+        {/* activity/trust pill row — always under the image, never overlaid on it. */}
+        <GalleryBadges car={car} t={t} />
+      </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>
+          <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">
+          {facts.map(([ic, v]) => (
+            <span key={ic} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, whiteSpace: 'nowrap' }}>
+              <Icon name={ic} size={15} color="var(--md-primary)" stroke={1.8} style={{ flex: 'none' }} />
+              <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--md-on-surface)' }}>{v}</span>
+            </span>
+          ))}
+        </div>
+        <div className="listcard-chips" style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+          {car.features.slice(0, 4).map((f) => (
+            <span key={f} className="chip" style={{ cursor: 'default' }}>
+              {f}
+            </span>
+          ))}
+        </div>
+        <div style={{ flex: 1 }} />
+        <EcoLine t={t} car={car} />
+      </div>
+
+      {/* price column, two groups: monthly rates on top (Finanzierung is the big-blue focus,
+          Leasing quiet), then a divider and the purchase group (Kaufen + meter + CTA) anchored to
+          the bottom (margin-top:auto) — so only ONE price stands out and the CTA sits flush at the
+          foot with no trailing gap. */}
+      <div className="listcard-price">
+        <PricePaths t={t} car={car} />
+        <div className="pp-purchase">
+          <PriceKauf t={t} car={car} />
+          <PriceMeter t={t} car={car} />
+          <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>
+  );
+};
+
+export default CarRow;