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

package/vdp/VdpViewer.tsx

@@ -1,209 +1,209 @@
-// Autobahn (auto.de redesign) — fullscreen gallery viewer ("full image view").
-//
-// Typed React 18 + TS port of `VdpViewer` from the design kit
-// (docs/redesign/design-source/ui_kits/website/ScreenVDP.jsx). Light stage for the
-// white studio photos: keyboard (←/→/Esc) + swipe nav, a thumbnail strip, and it
-// locks page scroll while open.
-//
-// Pure / presentational: images arrive ALREADY RESOLVED (the design kit's
-// `assetUrl(...)` lookup is the caller's job, matching CardCarousel) and the only
-// inputs are props + callbacks. The keyboard / scroll-lock effect touches the
-// document the way any focus-trapping modal must — there is no store / API /
-// data access. Renders correctly only inside a `<div className="md3">` subtree.
-//
-// PORTAL: rendered into document.body (re-wrapped in its own `.md3` scope for the
-// --md-* custom properties, which are only defined under `.md3`) instead of in
-// place. The app root (`App.styl` `.app`) sets `overflow: clip`, which on several
-// mobile browsers (notably iOS Safari) clips `position: fixed` descendants to the
-// ancestor's box instead of the true viewport — the TopBar stayed visible above
-// this "fullscreen" overlay and the header row (counter + actions) was pushed out
-// of the clipped area. A portal to `document.body` escapes that ancestor entirely.
-
-import React, { useEffect, useRef, useState } from 'react';
-import * as ReactDOM from 'react-dom';
-import { TranslationFunction } from '../types';
-
-import { Icon, IconButton } from '../ui';
-
-const ZOOM_MIN = 1;
-const ZOOM_MAX = 3;
-const ZOOM_STEP = 0.5;
-
-export interface VdpViewerProps {
-  /** ready-to-use image URLs (already resolved by the caller). */
-  images: string[];
-  /** index to open on. */
-  start?: number;
-  /** fired when the viewer should close (Esc / close button). */
-  onClose: () => void;
-  /** i18n function (drilled from the page). */
-  t: TranslationFunction;
-  /** sales phone number shown/dialled by the call action — omit to hide it. */
-  phone?: string;
-  /** call action (tel: link owned by the caller) — omit to hide the call button. */
-  onCall?: () => void;
-  /** "request this car" action (mirrors the legacy slider's envelope button) — omit to hide. */
-  onEmail?: () => void;
-}
-
-const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t, phone, onCall, onEmail }) => {
-  const [i, setI] = useState(start);
-  const [zoom, setZoom] = useState(ZOOM_MIN);
-  const n = images.length;
-  const go = (d: number) => setI((p) => (p + d + n) % n);
-
-  // Reset zoom on every slide change — a lingering zoom level from the previous photo reads as
-  // a stuck/broken control on the new one.
-  useEffect(() => setZoom(ZOOM_MIN), [i]);
-
-  // Keyboard nav + scroll lock while the overlay is mounted. `go`/`onClose` are
-  // read from refs so the listener stays stable for the lifetime of the viewer.
-  const goRef = useRef(go);
-  goRef.current = go;
-  const closeRef = useRef(onClose);
-  closeRef.current = onClose;
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') closeRef.current();
-      if (e.key === 'ArrowRight') goRef.current(1);
-      if (e.key === 'ArrowLeft') goRef.current(-1);
-    };
-    window.addEventListener('keydown', onKey);
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => {
-      window.removeEventListener('keydown', onKey);
-      document.body.style.overflow = prev;
-    };
-  }, []);
-
-  const tx = useRef<number | null>(null);
-  const zoomOut = () => setZoom((z) => Math.max(ZOOM_MIN, +(z - ZOOM_STEP).toFixed(2)));
-  const zoomIn = () => setZoom((z) => Math.min(ZOOM_MAX, +(z + ZOOM_STEP).toFixed(2)));
-
-  const iconBtnStyle: React.CSSProperties = { background: 'var(--md-sc-lowest, #fff)', boxShadow: 'var(--md-e1)' };
-  const contactBtnStyle: React.CSSProperties = { background: 'var(--md-primary)', boxShadow: 'var(--md-e1)' };
-
-  const overlay = (
-    <div className="md3">
-      <div
-        style={{
-          position: 'fixed',
-          inset: 0,
-          zIndex: 200,
-          background: 'var(--md-surface)',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-        onTouchStart={(e) => {
-          tx.current = e.touches[0].clientX;
-        }}
-        onTouchEnd={(e) => {
-          if (tx.current == null) return;
-          const dx = e.changedTouches[0].clientX - tx.current;
-          tx.current = null;
-          if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 8,
-            padding: '12px 16px',
-            borderBottom: '1px solid var(--md-outline-variant)',
-            flexWrap: 'wrap',
-          }}
-        >
-          <span className="num md-title-sm">
-            {i + 1} / {n}
-          </span>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <IconButton
-              name="minus"
-              label={t('autobahn:viewer.zoomOutLabel')}
-              onClick={zoomOut}
-              style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MIN ? 0.4 : 1 }}
-            />
-            <IconButton
-              name="plus"
-              label={t('autobahn:viewer.zoomInLabel')}
-              onClick={zoomIn}
-              style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MAX ? 0.4 : 1 }}
-            />
-            {onEmail && (
-              <IconButton name="mail" label={t('autobahn:viewer.emailLabel')} onClick={onEmail} style={contactBtnStyle} color="#fff" />
-            )}
-            {onCall && (
-              <IconButton
-                name="phone"
-                label={t('autobahn:viewer.callLabel', { phone })}
-                onClick={onCall}
-                style={contactBtnStyle}
-                color="#fff"
-              />
-            )}
-            <IconButton name="x" filled label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
-          </div>
-        </div>
-        <div style={{ flex: 1, position: 'relative', minHeight: 0, background: '#fff', overflow: 'hidden' }}>
-          <img
-            src={images[i]}
-            alt=""
-            style={{
-              position: 'absolute',
-              inset: 0,
-              width: '100%',
-              height: '100%',
-              objectFit: 'contain',
-              transform: `scale(${zoom})`,
-              transition: 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
-            }}
-          />
-          <button
-            className="car-arrow car-arrow--l hide-mobile"
-            style={{ opacity: 1 }}
-            aria-label={t('autobahn:viewer.previousLabel')}
-            onClick={() => go(-1)}
-          >
-            <Icon name="chevron-left" size={22} />
-          </button>
-          <button
-            className="car-arrow car-arrow--r hide-mobile"
-            style={{ opacity: 1 }}
-            aria-label={t('autobahn:viewer.nextLabel')}
-            onClick={() => go(1)}
-          >
-            <Icon name="chevron-right" size={22} />
-          </button>
-        </div>
-        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, padding: '12px 16px', flexWrap: 'wrap' }}>
-          {images.map((src, k) => (
-            <button
-              key={k}
-              onClick={() => setI(k)}
-              aria-label={t('autobahn:viewer.thumbnailLabel', { number: k + 1 })}
-              style={{
-                width: 64,
-                height: 44,
-                padding: 0,
-                borderRadius: 'var(--md-r-sm)',
-                overflow: 'hidden',
-                cursor: 'pointer',
-                border: k === i ? '2px solid var(--md-primary)' : '1px solid var(--md-outline-variant)',
-                background: '#fff',
-              }}
-            >
-              <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-
-  return typeof document !== 'undefined' ? ReactDOM.createPortal(overlay, document.body) : overlay;
-};
-
-export default VdpViewer;
+// Autobahn (auto.de redesign) — fullscreen gallery viewer ("full image view").
+//
+// Typed React 18 + TS port of `VdpViewer` from the design kit
+// (docs/redesign/design-source/ui_kits/website/ScreenVDP.jsx). Light stage for the
+// white studio photos: keyboard (←/→/Esc) + swipe nav, a thumbnail strip, and it
+// locks page scroll while open.
+//
+// Pure / presentational: images arrive ALREADY RESOLVED (the design kit's
+// `assetUrl(...)` lookup is the caller's job, matching CardCarousel) and the only
+// inputs are props + callbacks. The keyboard / scroll-lock effect touches the
+// document the way any focus-trapping modal must — there is no store / API /
+// data access. Renders correctly only inside a `<div className="md3">` subtree.
+//
+// PORTAL: rendered into document.body (re-wrapped in its own `.md3` scope for the
+// --md-* custom properties, which are only defined under `.md3`) instead of in
+// place. The app root (`App.styl` `.app`) sets `overflow: clip`, which on several
+// mobile browsers (notably iOS Safari) clips `position: fixed` descendants to the
+// ancestor's box instead of the true viewport — the TopBar stayed visible above
+// this "fullscreen" overlay and the header row (counter + actions) was pushed out
+// of the clipped area. A portal to `document.body` escapes that ancestor entirely.
+
+import React, { useEffect, useRef, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { TranslationFunction } from '../types';
+
+import { Icon, IconButton } from '../ui';
+
+const ZOOM_MIN = 1;
+const ZOOM_MAX = 3;
+const ZOOM_STEP = 0.5;
+
+export interface VdpViewerProps {
+  /** ready-to-use image URLs (already resolved by the caller). */
+  images: string[];
+  /** index to open on. */
+  start?: number;
+  /** fired when the viewer should close (Esc / close button). */
+  onClose: () => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+  /** sales phone number shown/dialled by the call action — omit to hide it. */
+  phone?: string;
+  /** call action (tel: link owned by the caller) — omit to hide the call button. */
+  onCall?: () => void;
+  /** "request this car" action (mirrors the legacy slider's envelope button) — omit to hide. */
+  onEmail?: () => void;
+}
+
+const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t, phone, onCall, onEmail }) => {
+  const [i, setI] = useState(start);
+  const [zoom, setZoom] = useState(ZOOM_MIN);
+  const n = images.length;
+  const go = (d: number) => setI((p) => (p + d + n) % n);
+
+  // Reset zoom on every slide change — a lingering zoom level from the previous photo reads as
+  // a stuck/broken control on the new one.
+  useEffect(() => setZoom(ZOOM_MIN), [i]);
+
+  // Keyboard nav + scroll lock while the overlay is mounted. `go`/`onClose` are
+  // read from refs so the listener stays stable for the lifetime of the viewer.
+  const goRef = useRef(go);
+  goRef.current = go;
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeRef.current();
+      if (e.key === 'ArrowRight') goRef.current(1);
+      if (e.key === 'ArrowLeft') goRef.current(-1);
+    };
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
+  const tx = useRef<number | null>(null);
+  const zoomOut = () => setZoom((z) => Math.max(ZOOM_MIN, +(z - ZOOM_STEP).toFixed(2)));
+  const zoomIn = () => setZoom((z) => Math.min(ZOOM_MAX, +(z + ZOOM_STEP).toFixed(2)));
+
+  const iconBtnStyle: React.CSSProperties = { background: 'var(--md-sc-lowest, #fff)', boxShadow: 'var(--md-e1)' };
+  const contactBtnStyle: React.CSSProperties = { background: 'var(--md-primary)', boxShadow: 'var(--md-e1)' };
+
+  const overlay = (
+    <div className="md3">
+      <div
+        style={{
+          position: 'fixed',
+          inset: 0,
+          zIndex: 200,
+          background: 'var(--md-surface)',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onTouchStart={(e) => {
+          tx.current = e.touches[0].clientX;
+        }}
+        onTouchEnd={(e) => {
+          if (tx.current == null) return;
+          const dx = e.changedTouches[0].clientX - tx.current;
+          tx.current = null;
+          if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 8,
+            padding: '12px 16px',
+            borderBottom: '1px solid var(--md-outline-variant)',
+            flexWrap: 'wrap',
+          }}
+        >
+          <span className="num md-title-sm">
+            {i + 1} / {n}
+          </span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <IconButton
+              name="minus"
+              label={t('autobahn:viewer.zoomOutLabel')}
+              onClick={zoomOut}
+              style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MIN ? 0.4 : 1 }}
+            />
+            <IconButton
+              name="plus"
+              label={t('autobahn:viewer.zoomInLabel')}
+              onClick={zoomIn}
+              style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MAX ? 0.4 : 1 }}
+            />
+            {onEmail && (
+              <IconButton name="mail" label={t('autobahn:viewer.emailLabel')} onClick={onEmail} style={contactBtnStyle} color="#fff" />
+            )}
+            {onCall && (
+              <IconButton
+                name="phone"
+                label={t('autobahn:viewer.callLabel', { phone })}
+                onClick={onCall}
+                style={contactBtnStyle}
+                color="#fff"
+              />
+            )}
+            <IconButton name="x" filled label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
+          </div>
+        </div>
+        <div style={{ flex: 1, position: 'relative', minHeight: 0, background: '#fff', overflow: 'hidden' }}>
+          <img
+            src={images[i]}
+            alt=""
+            style={{
+              position: 'absolute',
+              inset: 0,
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+              transform: `scale(${zoom})`,
+              transition: 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
+            }}
+          />
+          <button
+            className="car-arrow car-arrow--l hide-mobile"
+            style={{ opacity: 1 }}
+            aria-label={t('autobahn:viewer.previousLabel')}
+            onClick={() => go(-1)}
+          >
+            <Icon name="chevron-left" size={22} />
+          </button>
+          <button
+            className="car-arrow car-arrow--r hide-mobile"
+            style={{ opacity: 1 }}
+            aria-label={t('autobahn:viewer.nextLabel')}
+            onClick={() => go(1)}
+          >
+            <Icon name="chevron-right" size={22} />
+          </button>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, padding: '12px 16px', flexWrap: 'wrap' }}>
+          {images.map((src, k) => (
+            <button
+              key={k}
+              onClick={() => setI(k)}
+              aria-label={t('autobahn:viewer.thumbnailLabel', { number: k + 1 })}
+              style={{
+                width: 64,
+                height: 44,
+                padding: 0,
+                borderRadius: 'var(--md-r-sm)',
+                overflow: 'hidden',
+                cursor: 'pointer',
+                border: k === i ? '2px solid var(--md-primary)' : '1px solid var(--md-outline-variant)',
+                background: '#fff',
+              }}
+            >
+              <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  return typeof document !== 'undefined' ? ReactDOM.createPortal(overlay, document.body) : overlay;
+};
+
+export default VdpViewer;

package/vdp/index.ts

@@ -1,75 +1,75 @@
-// Autobahn (auto.de redesign) — Vehicle-Detail (VDP) modules barrel.
-//
-// ES named exports replacing the design kit's `Object.assign(window, {...})`
-// (docs/redesign/design-source/ui_kits/website/CdpModules.jsx + ScreenVDP.jsx).
-// These are the PRESENTATIONAL VDP modules (W3a); the page wiring that feeds them
-// from the real stores is a separate later step (W3b). Consumers import everything
-// from '../vdp'.
-
-// Fullscreen gallery viewer.
-export { default as VdpViewer } from './VdpViewer';
-export type { VdpViewerProps } from './VdpViewer';
-
-// Finance calculator (controlled / presentational — no annuity) + its helpers.
-export { default as FinanceCalculator, Slider, CalcRow, TermChips } from './FinanceCalculator';
-export type {
-  FinanceCalculatorProps,
-  FinanceMode,
-  SliderProps,
-  CalcRowProps,
-  TermChipsProps,
-} from './FinanceCalculator';
-
-// Remaining presentational modules.
-export {
-  VdpHeaderCard,
-  VdpSpecTable,
-  EquipmentList,
-  Co2Label,
-  VehicleDescription,
-  TrustStrip,
-  PriceHistory,
-  ProtectionProducts,
-  VdpAnchors,
-  VdpStickyBar,
-  VdpBottomBar,
-  InspectionBlock,
-  HowItWorks,
-  CustomerRatings,
-  VdpEnquiry,
-  FinanceDetailsModal,
-} from './VdpModules';
-export type {
-  VdpHeaderCardProps,
-  VdpSpecTableProps,
-  EquipmentListProps,
-  Co2LabelProps,
-  VehicleDescriptionProps,
-  TrustStripProps,
-  TrustItem,
-  PriceHistoryProps,
-  ProtectionProductsProps,
-  ProtectionProduct,
-  VdpAnchorsProps,
-  VdpAnchor,
-  VdpStickyBarProps,
-  VdpBottomBarProps,
-  InspectionBlockProps,
-  HowItWorksProps,
-  HowItWorksStep,
-  CustomerRatingsProps,
-  VdpEnquiryProps,
-  FinanceDetailsModalProps,
-} from './VdpModules';
-
-// View-model types + the spec-table helper.
-export { defaultVdpSpecs } from './types';
-export type {
-  VehicleDetail,
-  VehicleCondition,
-  VdpSpec,
-  EquipmentGroups,
-  PriceHistoryPoint,
-  VdpReview,
-  AutobahnPhev,
-} from './types';
+// Autobahn (auto.de redesign) — Vehicle-Detail (VDP) modules barrel.
+//
+// ES named exports replacing the design kit's `Object.assign(window, {...})`
+// (docs/redesign/design-source/ui_kits/website/CdpModules.jsx + ScreenVDP.jsx).
+// These are the PRESENTATIONAL VDP modules (W3a); the page wiring that feeds them
+// from the real stores is a separate later step (W3b). Consumers import everything
+// from '../vdp'.
+
+// Fullscreen gallery viewer.
+export { default as VdpViewer } from './VdpViewer';
+export type { VdpViewerProps } from './VdpViewer';
+
+// Finance calculator (controlled / presentational — no annuity) + its helpers.
+export { default as FinanceCalculator, Slider, CalcRow, TermChips } from './FinanceCalculator';
+export type {
+  FinanceCalculatorProps,
+  FinanceMode,
+  SliderProps,
+  CalcRowProps,
+  TermChipsProps,
+} from './FinanceCalculator';
+
+// Remaining presentational modules.
+export {
+  VdpHeaderCard,
+  VdpSpecTable,
+  EquipmentList,
+  Co2Label,
+  VehicleDescription,
+  TrustStrip,
+  PriceHistory,
+  ProtectionProducts,
+  VdpAnchors,
+  VdpStickyBar,
+  VdpBottomBar,
+  InspectionBlock,
+  HowItWorks,
+  CustomerRatings,
+  VdpEnquiry,
+  FinanceDetailsModal,
+} from './VdpModules';
+export type {
+  VdpHeaderCardProps,
+  VdpSpecTableProps,
+  EquipmentListProps,
+  Co2LabelProps,
+  VehicleDescriptionProps,
+  TrustStripProps,
+  TrustItem,
+  PriceHistoryProps,
+  ProtectionProductsProps,
+  ProtectionProduct,
+  VdpAnchorsProps,
+  VdpAnchor,
+  VdpStickyBarProps,
+  VdpBottomBarProps,
+  InspectionBlockProps,
+  HowItWorksProps,
+  HowItWorksStep,
+  CustomerRatingsProps,
+  VdpEnquiryProps,
+  FinanceDetailsModalProps,
+} from './VdpModules';
+
+// View-model types + the spec-table helper.
+export { defaultVdpSpecs } from './types';
+export type {
+  VehicleDetail,
+  VehicleCondition,
+  VdpSpec,
+  EquipmentGroups,
+  PriceHistoryPoint,
+  VdpReview,
+  AutobahnPhev,
+} from './types';