@bytebrand/fe-ui-core-autobahn 1.0.109 → 1.0.110

package/locales/de/autobahn.json

@@ -280,7 +280,7 @@
   "srp": {
     "trust": {
       "topQuality": "Top Qualität",
-      "warranty": "1 Jahr Garantie",
+      "warranty": "12 Monate Garantie",
       "financing": "Günstige Finanzierung",
       "testDrive": "14 Tage Probefahrt"
     },
@@ -497,7 +497,7 @@
     "seo": {
       "title": "{{name}} gebraucht kaufen | auto.de",
       "regPrefix": "EZ",
-      "descriptionSuffix": " – online kaufen oder finanzieren bei auto.de. Inkl. 1 Jahr Garantie & 14 Tage Rückgaberecht."
+      "descriptionSuffix": " – online kaufen oder finanzieren bei auto.de. Inkl. 12 Monate Garantie & 14 Tage Rückgaberecht."
     }
   },
   "fuel": {
@@ -582,14 +582,14 @@
     "heading": "Fahrzeugbeschreibung",
     "showMore": "Mehr anzeigen",
     "showLess": "Weniger anzeigen",
-    "defaultBody": "Dieser {{make}} {{model}} ({{trim}}) überzeugt mit {{power}} und {{gear}}. Das Fahrzeug ist scheckheftgepflegt, unfallfrei und stammt aus {{owners}}. Hand. Erstzulassung {{reg}}, Laufleistung {{km}} km, Außenfarbe {{color}}. Jedes auto.de-Fahrzeug durchläuft einen 130-Punkte-Check und kommt mit 1 Jahr Garantie sowie 14 Tagen Rückgaberecht. Lieferung deutschlandweit bis vor die Tür oder Abholung nach Vereinbarung. Finanzierung und Leasing zu fairen Konditionen direkt online — die monatliche Rate berechnest du oben im Rechner."
+    "defaultBody": "Dieser {{make}} {{model}} ({{trim}}) überzeugt mit {{power}} und {{gear}}. Das Fahrzeug ist scheckheftgepflegt, unfallfrei und stammt aus {{owners}}. Hand. Erstzulassung {{reg}}, Laufleistung {{km}} km, Außenfarbe {{color}}. Jedes auto.de-Fahrzeug durchläuft einen 130-Punkte-Check und kommt mit 12 Monate Garantie sowie 14 Tagen Rückgaberecht. Lieferung deutschlandweit bis vor die Tür oder Abholung nach Vereinbarung. Finanzierung und Leasing zu fairen Konditionen direkt online — die monatliche Rate berechnest du oben im Rechner."
   },
   "trust": {
-    "warranty": "1 Jahr Garantie",
+    "warranty": "12 Monate Garantie",
     "return": "14 Tage Rückgabe",
     "delivery": "Lieferung o. Abholung",
     "inspection": "130-Punkte-Check",
-    "warrantySub": "Sicher fahren - ein ganzes Jahr",
+    "warrantySub": "Sicher fahren - 12 Monate lang",
     "returnSub": "Ohne Angabe von Gründen",
     "deliverySub": "Deutschlandweit flexibel wählen",
     "inspectionSub": "Geprüfte Qualität für mehr Sicherheit"

package/locales/en/autobahn.json

@@ -280,7 +280,7 @@
   "srp": {
     "trust": {
       "topQuality": "Top Quality",
-      "warranty": "1 year warranty",
+      "warranty": "12 months warranty",
       "financing": "Affordable financing",
       "testDrive": "14 days test drive"
     },
@@ -497,7 +497,7 @@
     "seo": {
       "title": "{{name}} used car for sale | auto.de",
       "regPrefix": "Reg.",
-      "descriptionSuffix": " – buy or finance online at auto.de. Incl. 1-year warranty & 14-day return policy."
+      "descriptionSuffix": " – buy or finance online at auto.de. Incl. 12-month warranty & 14-day return policy."
     }
   },
   "fuel": {
@@ -582,14 +582,14 @@
     "heading": "Vehicle description",
     "showMore": "Show more",
     "showLess": "Show less",
-    "defaultBody": "This {{make}} {{model}} ({{trim}}) impresses with {{power}} and {{gear}}. The vehicle has a full service history, is accident-free and comes from owner no. {{owners}}. First registration {{reg}}, mileage {{km}} km, exterior colour {{color}}. Every auto.de vehicle passes a 130-point check and comes with a 1-year warranty as well as a 14-day right of return. Delivery throughout Germany to your door, or collection by appointment. Financing and leasing at fair terms directly online — calculate your monthly rate in the calculator above."
+    "defaultBody": "This {{make}} {{model}} ({{trim}}) impresses with {{power}} and {{gear}}. The vehicle has a full service history, is accident-free and comes from owner no. {{owners}}. First registration {{reg}}, mileage {{km}} km, exterior colour {{color}}. Every auto.de vehicle passes a 130-point check and comes with a 12-month warranty as well as a 14-day right of return. Delivery throughout Germany to your door, or collection by appointment. Financing and leasing at fair terms directly online — calculate your monthly rate in the calculator above."
   },
   "trust": {
-    "warranty": "1-year warranty",
+    "warranty": "12-month warranty",
     "return": "14-day returns",
     "delivery": "Delivery or collection",
     "inspection": "130-point check",
-    "warrantySub": "Drive safe — a full year",
+    "warrantySub": "Drive safe — for 12 months",
     "returnSub": "No questions asked",
     "deliverySub": "Flexible across Germany",
     "inspectionSub": "Inspected quality for extra peace of mind"

package/package.json

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

@@ -6718,6 +6718,12 @@ line-height: 31px;
   .md3 .gitem {
     padding: 20px 18px;
   }
+  /* title font-size 16→14 on mobile only — desktop keeps the inline style={{ fontSize: 16 }}
+     set in NewMainPage.tsx's GuaranteeBand unchanged; !important is required here to beat
+     that inline style (icon sizes are untouched, only the title text shrinks). */
+  .md3 .gitem .md-title-sm {
+    font-size: 14px !important;
+  }
   /* steps/hiw: the ≤980 Figma vertical-list card already applies here */
   /* --- VDP header card: structured phone layout (desktop-composed VdpHeaderCard,
      hidden on phone via hide-mobile — kept for tablet widths 600-980px where the
@@ -6821,6 +6827,13 @@ line-height: 31px;
   .md3 .zustand-tile:nth-child(n + 3) {
     border-top: 1px solid #d4dde7;
   }
+  /* Garantie label's "more info" link icon — 15x15 on mobile only (desktop keeps the
+     Icon component's own size={14} prop, untouched); higher specificity than any
+     .zustand-tile .lucide sizing rule beats it regardless of source order. */
+  .md3 .zustand-tile a .lucide {
+    width: 15px;
+    height: 15px;
+  }
   .md3 .curated-grid {
     grid-template-columns: 1fr;
     gap: 12px;
@@ -7029,6 +7042,14 @@ line-height: 31px;
     height: 22px;
     margin-top: 1px;
   }
+  /* "12 Monate Garantie" label's "more info" link icon — 15x15 on mobile only (desktop
+     keeps the Icon component's own size={14} prop) — higher specificity than the 22px
+     rule above beats it regardless of source order. */
+  .md3 .trust-strip a .lucide {
+    width: 15px;
+    height: 15px;
+    margin-top: 0;
+  }
   .md3 .trust-strip > div > span {
     display: block;
     font-family: Arial, Helvetica, sans-serif;

package/vdp/VdpModules.tsx

@@ -197,24 +197,43 @@ export const VdpHeaderHighlights: React.FunctionComponent<VdpHeaderCardProps> =
 export const VdpHeaderCondition: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => {
   const { condition } = vehicle;
   // condition.hu === 'Neu' compares the RAW backend data value, not a display string — left as-is.
-  const tiles: ReadonlyArray<readonly [string, string, string]> = [
+  // 4th (optional) tuple element: label opens this URL in a new tab via a small info icon —
+  // only the Garantie tile has one, linking out to auto.de's warranty policy page.
+  const tiles: ReadonlyArray<readonly [string, string, string, string?]> = [
     ['wrench', t('autobahn:header.huLabel'), condition.hu === 'Neu' ? t('autobahn:header.huNew') : t('autobahn:header.huUntil', { date: condition.hu })],
     ['shield-check', t('autobahn:header.accidentFree'), condition.unfallfrei ? t('autobahn:header.yes') : t('autobahn:header.no')],
     ['clipboard-check', t('autobahn:header.serviceHistory'), condition.scheckheft ? t('autobahn:header.yes') : t('autobahn:header.no')],
-    ['award', t('autobahn:header.warranty'), condition.garantie],
+    ['award', t('autobahn:header.warranty'), condition.garantie, 'https://www.auto.de/garantie/'],
   ];
   return (
     <div className="zustand-grid">
-      {tiles.map(([ic, l, v]) => (
+      {tiles.map(([ic, l, v, labelLinkUrl]) => (
         <div key={l} className="zustand-tile">
           <Icon name={ic} size={19} color="var(--md-primary)" stroke={1.9} style={{ flex: 'none' }} />
           <span style={{ minWidth: 0 }}>
-            <span
-              className="md-label-sm"
-              style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-            >
-              {l}
-            </span>
+            {labelLinkUrl ? (
+              <span className="md-label-sm" style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+                <span style={{ minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  {l}
+                </span>
+                <a
+                  href={labelLinkUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={l}
+                  style={{ display: 'inline-flex', flex: 'none', cursor: 'pointer' }}
+                >
+                  <Icon name="info" size={14} color="var(--md-primary)" />
+                </a>
+              </span>
+            ) : (
+              <span
+                className="md-label-sm"
+                style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+              >
+                {l}
+              </span>
+            )}
             <span className="md-title-sm" style={{ display: 'block' }}>
               {v}
             </span>
@@ -550,8 +569,8 @@ export const VehicleDescription: React.FunctionComponent<VehicleDescriptionProps
 // Trust strip
 // ---------------------------------------------------------------------------
 
-/** [kebab-case lucide icon, label, optional subline (mobile Figma tiles)]. */
-export type TrustItem = readonly [icon: string, label: string, sub?: string];
+/** [kebab-case lucide icon, label, optional subline (mobile Figma tiles), optional label link URL]. */
+export type TrustItem = readonly [icon: string, label: string, sub?: string, linkUrl?: string];
 
 export interface TrustStripProps {
   /** trust badges; defaults to auto.de's four standard promises. */
@@ -560,9 +579,9 @@ export interface TrustStripProps {
   t: TranslationFunction;
 }
 
-/** auto.de's four standard promises — [icon, i18n label key, i18n subline key]. */
-const DEFAULT_TRUST: ReadonlyArray<readonly [string, string, string]> = [
-  ['shield-check', 'autobahn:trust.warranty', 'autobahn:trust.warrantySub'],
+/** auto.de's four standard promises — [icon, i18n label key, i18n subline key, optional label link URL]. */
+const DEFAULT_TRUST: ReadonlyArray<readonly [string, string, string, string?]> = [
+  ['shield-check', 'autobahn:trust.warranty', 'autobahn:trust.warrantySub', 'https://www.auto.de/garantie/'],
   ['undo-2', 'autobahn:trust.return', 'autobahn:trust.returnSub'],
   ['truck', 'autobahn:trust.delivery', 'autobahn:trust.deliverySub'],
   ['badge-check', 'autobahn:trust.inspection', 'autobahn:trust.inspectionSub'],
@@ -572,11 +591,26 @@ const DEFAULT_TRUST: ReadonlyArray<readonly [string, string, string]> = [
  *  (the .trust-sub sublines only surface in the mobile tile layout via CSS). */
 export const TrustStrip: React.FunctionComponent<TrustStripProps> = ({ items, t }) => (
   <div className="trust-strip">
-    {(items ?? DEFAULT_TRUST.map(([ic, key, subKey]) => [ic, t(key), t(subKey)] as TrustItem)).map(([ic, label, sub]) => (
+    {(items ?? DEFAULT_TRUST.map(([ic, key, subKey, linkUrl]) => [ic, t(key), t(subKey), linkUrl] as TrustItem)).map(([ic, label, sub, linkUrl]) => (
       <div key={label}>
         <Icon name={ic} size={17} color="var(--md-primary)" stroke={2} style={{ flex: 'none' }} />
         <span style={{ minWidth: 0 }}>
-          {label}
+          {linkUrl ? (
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+              {label}
+              <a
+                href={linkUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={label}
+                style={{ display: 'inline-flex', flex: 'none', cursor: 'pointer' }}
+              >
+                <Icon name="info" size={14} color="var(--md-primary)" />
+              </a>
+            </span>
+          ) : (
+            label
+          )}
           {sub && <span className="trust-sub">{sub}</span>}
         </span>
       </div>
@@ -2420,7 +2454,9 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
               <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 18 }}>
                 <div>
                   <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
-                    <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabelSheet')}</span>
+                    <span className="md-title-sm">
+                      {t(isLease ? 'autobahn:finance.downPaymentSliderLabelSheet' : 'autobahn:finance.downPaymentSliderLabel')}
+                    </span>
                     <span className="num" style={{ fontWeight: 700 }}>
                       {eur(down)} €
                     </span>
@@ -3028,7 +3064,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     <div>
                       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
-                          {t('autobahn:finance.downPaymentSliderLabelSheet')}
+                          {t(isLease ? 'autobahn:finance.downPaymentSliderLabelSheet' : 'autobahn:finance.downPaymentSliderLabel')}
                         </span>
                         <span className="num fin-down-value" style={{ fontWeight: 700, color: 'var(--md-primary)' }}>
                           {eur(down)} €

package/vdp/types.ts

@@ -35,7 +35,7 @@ export interface VehicleCondition {
   unfallfrei: boolean;
   /** full service history (Scheckheftgepflegt). */
   scheckheft: boolean;
-  /** warranty label, e.g. '1 Jahr inkl.'. */
+  /** warranty label, e.g. '12 Monate inkl.'. */
   garantie: string;
 }