@bytebrand/fe-ui-core-autobahn 1.0.67 → 1.0.69

package/cards/cardParts.tsx

@@ -475,6 +475,11 @@ export interface PriceHeroProps {
   car: AutobahnCar;
   mode: PaymentMode;
   t: TranslationFunction;
+  /** opt-in: render the "/mtl." unit next to the rate even without a struck old price to caption
+   *  (default false keeps every existing caller's behavior — the unit only ever showed alongside
+   *  the UVP-Rate/old-price group). The SRP desktop card wants the unit on every financing/leasing
+   *  rate, discounted or not. */
+  alwaysShowUnit?: boolean;
 }
 
 /** footnote badge + click-to-open popover, shared by the Finanzierung/Leasing "UVP-Rate" (³) and
@@ -529,7 +534,7 @@ const UvpBadge: React.FunctionComponent<{
  * superscript footnote markers (¹ price, ² struck reference, ³ "/mtl.") match the Figma card —
  * their legal text lives in the page's own footnote block, not duplicated per-card.
  */
-export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode, t }) => {
+export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode, t, alwaysShowUnit }) => {
   const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
   const isMoney = mode === 'buy';
   const value = mode === 'financing' ? car.monthly : mode === 'leasing' ? (car.lease as number) : car.price;
@@ -578,6 +583,10 @@ export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode,
             <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>
           </span>
         )}
+        {/* opt-in (alwaysShowUnit): no discount to caption, so just the plain unit next to the
+            rate instead of the full UVP-Rate/old-price group — existing callers that don't pass
+            this prop keep showing nothing here, exactly as before. */}
+        {!isMoney && !showOld && alwaysShowUnit && <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>}
         {/* Kaufen: no rate/unit to caption, just the real list price struck through — same
             car.listPrice already used by DropChip/PpRow. */}
         {isMoney && showOld && (
@@ -865,7 +874,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
           struck price / mtl." group beside the rate that .cc-price and mobile's tab switcher
           already use, so the rate + unit never fight for room in one flat row (the earlier
           hand-rolled version here put them side by side and wrapped for any 4+-digit rate). */}
-      <PriceHero car={car} mode="financing" t={t} />
+      <PriceHero car={car} mode="financing" t={t} alwaysShowUnit />
       <div className="pp-hero-terms">
         {t('autobahn:card.price.financeTerms', {
           firstInstallment: finFirstInstallment,

package/package.json

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

@@ -4290,10 +4290,16 @@ line-height: 31px;
   line-height: 58px;
   letter-spacing: -2px;
 }
-.md3 .listcard-price .pricepaths .pp-hero-val--len4 { font-size: 50px; line-height: 53px; }
-.md3 .listcard-price .pricepaths .pp-hero-val--len5 { font-size: 43px; line-height: 45px; }
-.md3 .listcard-price .pricepaths .pp-hero-val--len6 { font-size: 37px; line-height: 40px; }
+.md3 .listcard-price .pricepaths .pp-hero-val--len4 { font-size: 42px; line-height: 45px; }
+.md3 .listcard-price .pricepaths .pp-hero-val--len5 { font-size: 36px; line-height: 39px; }
+.md3 .listcard-price .pricepaths .pp-hero-val--len6 { font-size: 31px; line-height: 34px; }
 .md3 .listcard-price .pricepaths .pp-hero-unit { font-size: 18px; font-weight: 700; color: #5b6b7f; }
+/* the plain "/mtl." unit (alwaysShowUnit, no discount to show it in the narrower stacked
+   UVP-Rate/old-price column instead) sits INLINE right after the rate — unlike that stacked
+   group it doesn't get to be narrow, so at the base 18px a 4+-digit rate pushed it past the
+   240px column edge (reported: "1.612 €/mtl." clipped to "/mt"). Shrunk to fit every rate
+   length within the column instead of only the short ones. */
+.md3 .listcard-price .pricepaths .pp-hero-val + .pp-hero-unit { font-size: 13px; }
 /* diagonal red strike (Figma), replacing the plain text-decoration:line-through above — same
    generic technique .cc-price/.fin-calc-card already use, content-width-independent (the ±2px
    left/right offsets stretch the line across whatever the old price's own width ends up being). */