@bytebrand/fe-ui-core-autobahn 1.0.126 → 1.0.127

package/compat/Checkbox/Checkbox.tsx

@@ -1,191 +1,191 @@
-import React, { ReactNode } from 'react';
-import styles from './Checkbox.styl';
-import classnames from 'classnames';
-import IconSVG from '../../iconsvg/IconSVG';
-import Tooltip from '../Tooltip/Tooltip';
-import FormattedNumber from '../FormattedNumber/FormattedNumber';
-
-export interface ICheckboxProps {
-  // Native checkbox props
-  name?: string;
-  value?: any;
-  checked?: boolean;
-  disabled?: boolean;
-  reversed?: boolean;
-  isAboAccordionExpanded0?: boolean;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => void;
-  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
-
-  // Custom checkbox props
-  containerClassName?: string;
-  checkboxClassName?: string;
-  labelClassName?: string;
-  labelContentClassName?: string;
-  tooltipDescription?: string;
-  checkboxPriceValue: any;
-  tooltipPosX?: string;
-  error?: boolean;
-  label?: JSX.Element | string | null | ReactNode;
-}
-
-// Unique-per-instance id for the text content span, so the (visually hidden) native
-// <input type="checkbox"> can point aria-labelledby at it — see render() below for why the
-// text moved out of the <label> and needs this to still work as the checkbox's accessible
-// name for screen readers.
-let contentIdCounter = 0;
-
-class Checkbox extends React.Component<ICheckboxProps, {}> {
-  static defaultProps = {
-    name: '',
-    value: '',
-    checked: false,
-    disabled: false,
-    reversed: false,
-
-    onChange: () => { },
-    onBlur: () => { },
-    onFocus: () => { },
-
-    containerClassName: '',
-    checkboxClassName: '',
-    labelClassName: '',
-    labelContentClassName: '',
-    tooltipDescription: '',
-    checkboxPriceValue: '',
-    tooltipPosX: '',
-
-    error: false,
-    label: false
-  };
-
-  input: HTMLInputElement = null;
-  contentId: string;
-
-  constructor(props: ICheckboxProps) {
-    super(props);
-    contentIdCounter += 1;
-    this.contentId = `checkbox-content-${contentIdCounter}`;
-  }
-
-  setInputRef = (ref: HTMLInputElement) => {
-    this.input = ref;
-  };
-
-  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { disabled, value } = this.props;
-    const { checked } = event.target;
-
-    if (disabled) {
-      return false;
-    }
-    if (!!event) {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-    }
-
-    this.props.onChange(event, checked, value);
-  };
-
-  onKeyPress = (event: any) => {
-    const { disabled } = this.props;
-    const checked = !this.input.checked;
-    const value = this.input.value;
-
-    if (disabled) {
-      return false;
-    }
-
-    this.props.onChange(event, checked, value);
-  };
-
-  render() {
-    const {
-      containerClassName, checkboxClassName, labelClassName, labelContentClassName, reversed,
-      checked, disabled, value, error, label, tooltipDescription, checkboxPriceValue, tooltipPosX, isAboAccordionExpanded0 = true
-    } = this.props;
-
-    const containerClasses = classnames(
-      styles.container,
-      containerClassName,
-      { [styles.checked]: checked },
-      { [styles.error]: error },
-      { [styles.disabled]: disabled }
-    );
-
-    const labelClasses = classnames(
-      styles.label,
-      labelClassName
-    );
-
-    const labelContentClasses = classnames(
-      styles.labelContent,
-      labelContentClassName
-    );
-
-    const checkboxClasses = classnames(
-      styles.checkbox,
-      checkboxClassName,
-      { [styles.withLabel]: !!label }
-    );
-
-    const wrapInputClasses = classnames(
-      styles.wrapInput,
-      { [styles.reversed]: reversed }
-    );
-
-    return (
-      // tabIndex: was 1 (a positive value) — a well-known anti-pattern (WCAG 2.4.3):
-      // positive tabindex elements are visited in their own ascending-order pass BEFORE
-      // every tabindex="0"/naturally-focusable element on the page, regardless of where
-      // they sit in the DOM. In BaseModal's new focus trap (which walks the panel's
-      // focusable elements in DOM order to decide where Tab should wrap) that mismatch
-      // made this checkbox unreachable by Tab entirely inside a trapped modal — verified
-      // live: 0 hits in 20 Tab presses cycling the RegistrationForm consent checkbox.
-      // 0 makes it a normal stop in DOM-order tab flow, matching the trap's own model and
-      // putting it where a sighted user would visually expect it (after the fields above,
-      // before the CTA below) instead of unpredictably early.
-      <div className={containerClasses} tabIndex={0} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
-        <div className={labelClasses}>
-          {/* Real <label>, scoped to JUST the checkbox (+ its optional price badge) — was
-              wrapping the text content too, so clicking anywhere in a long paragraph like the
-              checkout modal's terms-agreement text toggled the checkbox as a side effect.
-              Native label-click-forwarding only fires for clicks landing inside THIS element
-              now, and it still works with zero extra JS since the hidden <input> is nested
-              inside it. */}
-          <label className={wrapInputClasses}>
-            {/* Visual representation of the checkbox */}
-            {/* HidePlus class for OrderOverview component */}
-            {checkboxPriceValue && <span className={styles.checkboxPrice}><span className={styles.hidePlus}>+</span><FormattedNumber numbersAfterDot={0} value={checkboxPriceValue} /> €</span>}
-            {/* Hidden input for SEO and HTML semantics */}
-            <input
-              className={styles.hiddenInput}
-              type='checkbox'
-              checked={checked}
-              value={value}
-              disabled={disabled}
-              tabIndex={-1}
-              onChange={this.onChange}
-              ref={this.setInputRef}
-              // The text is no longer a DOM ancestor/descendant of this input (moved out to a
-              // plain sibling <span> below so it stops being a click target) — aria-labelledby
-              // keeps it as the input's accessible name for assistive tech regardless.
-              aria-labelledby={label ? this.contentId : undefined}
-            />
-
-            {isAboAccordionExpanded0 && <span className={checkboxClasses}>{checked ? <IconSVG name='common_CheckBlue' className={styles.checkBlueIcon} /> : false}</span>}
-
-          </label>
-          {!!label ? (
-            <span id={this.contentId} className={labelContentClasses}>
-              {label}
-              {tooltipDescription && <Tooltip description={tooltipDescription} positionY={'top'} positionX={tooltipPosX} tooltipClassName={styles.tooltipCheckbox} iconName='InfoTransparent' />}
-            </span>
-          ) : false}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Checkbox;
+import React, { ReactNode } from 'react';
+import styles from './Checkbox.styl';
+import classnames from 'classnames';
+import IconSVG from '../../iconsvg/IconSVG';
+import Tooltip from '../Tooltip/Tooltip';
+import FormattedNumber from '../FormattedNumber/FormattedNumber';
+
+export interface ICheckboxProps {
+  // Native checkbox props
+  name?: string;
+  value?: any;
+  checked?: boolean;
+  disabled?: boolean;
+  reversed?: boolean;
+  isAboAccordionExpanded0?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => void;
+  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+
+  // Custom checkbox props
+  containerClassName?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  labelContentClassName?: string;
+  tooltipDescription?: string;
+  checkboxPriceValue: any;
+  tooltipPosX?: string;
+  error?: boolean;
+  label?: JSX.Element | string | null | ReactNode;
+}
+
+// Unique-per-instance id for the text content span, so the (visually hidden) native
+// <input type="checkbox"> can point aria-labelledby at it — see render() below for why the
+// text moved out of the <label> and needs this to still work as the checkbox's accessible
+// name for screen readers.
+let contentIdCounter = 0;
+
+class Checkbox extends React.Component<ICheckboxProps, {}> {
+  static defaultProps = {
+    name: '',
+    value: '',
+    checked: false,
+    disabled: false,
+    reversed: false,
+
+    onChange: () => { },
+    onBlur: () => { },
+    onFocus: () => { },
+
+    containerClassName: '',
+    checkboxClassName: '',
+    labelClassName: '',
+    labelContentClassName: '',
+    tooltipDescription: '',
+    checkboxPriceValue: '',
+    tooltipPosX: '',
+
+    error: false,
+    label: false
+  };
+
+  input: HTMLInputElement = null;
+  contentId: string;
+
+  constructor(props: ICheckboxProps) {
+    super(props);
+    contentIdCounter += 1;
+    this.contentId = `checkbox-content-${contentIdCounter}`;
+  }
+
+  setInputRef = (ref: HTMLInputElement) => {
+    this.input = ref;
+  };
+
+  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { disabled, value } = this.props;
+    const { checked } = event.target;
+
+    if (disabled) {
+      return false;
+    }
+    if (!!event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+    }
+
+    this.props.onChange(event, checked, value);
+  };
+
+  onKeyPress = (event: any) => {
+    const { disabled } = this.props;
+    const checked = !this.input.checked;
+    const value = this.input.value;
+
+    if (disabled) {
+      return false;
+    }
+
+    this.props.onChange(event, checked, value);
+  };
+
+  render() {
+    const {
+      containerClassName, checkboxClassName, labelClassName, labelContentClassName, reversed,
+      checked, disabled, value, error, label, tooltipDescription, checkboxPriceValue, tooltipPosX, isAboAccordionExpanded0 = true
+    } = this.props;
+
+    const containerClasses = classnames(
+      styles.container,
+      containerClassName,
+      { [styles.checked]: checked },
+      { [styles.error]: error },
+      { [styles.disabled]: disabled }
+    );
+
+    const labelClasses = classnames(
+      styles.label,
+      labelClassName
+    );
+
+    const labelContentClasses = classnames(
+      styles.labelContent,
+      labelContentClassName
+    );
+
+    const checkboxClasses = classnames(
+      styles.checkbox,
+      checkboxClassName,
+      { [styles.withLabel]: !!label }
+    );
+
+    const wrapInputClasses = classnames(
+      styles.wrapInput,
+      { [styles.reversed]: reversed }
+    );
+
+    return (
+      // tabIndex: was 1 (a positive value) — a well-known anti-pattern (WCAG 2.4.3):
+      // positive tabindex elements are visited in their own ascending-order pass BEFORE
+      // every tabindex="0"/naturally-focusable element on the page, regardless of where
+      // they sit in the DOM. In BaseModal's new focus trap (which walks the panel's
+      // focusable elements in DOM order to decide where Tab should wrap) that mismatch
+      // made this checkbox unreachable by Tab entirely inside a trapped modal — verified
+      // live: 0 hits in 20 Tab presses cycling the RegistrationForm consent checkbox.
+      // 0 makes it a normal stop in DOM-order tab flow, matching the trap's own model and
+      // putting it where a sighted user would visually expect it (after the fields above,
+      // before the CTA below) instead of unpredictably early.
+      <div className={containerClasses} tabIndex={0} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
+        <div className={labelClasses}>
+          {/* Real <label>, scoped to JUST the checkbox (+ its optional price badge) — was
+              wrapping the text content too, so clicking anywhere in a long paragraph like the
+              checkout modal's terms-agreement text toggled the checkbox as a side effect.
+              Native label-click-forwarding only fires for clicks landing inside THIS element
+              now, and it still works with zero extra JS since the hidden <input> is nested
+              inside it. */}
+          <label className={wrapInputClasses}>
+            {/* Visual representation of the checkbox */}
+            {/* HidePlus class for OrderOverview component */}
+            {checkboxPriceValue && <span className={styles.checkboxPrice}><span className={styles.hidePlus}>+</span><FormattedNumber numbersAfterDot={0} value={checkboxPriceValue} /> €</span>}
+            {/* Hidden input for SEO and HTML semantics */}
+            <input
+              className={styles.hiddenInput}
+              type='checkbox'
+              checked={checked}
+              value={value}
+              disabled={disabled}
+              tabIndex={-1}
+              onChange={this.onChange}
+              ref={this.setInputRef}
+              // The text is no longer a DOM ancestor/descendant of this input (moved out to a
+              // plain sibling <span> below so it stops being a click target) — aria-labelledby
+              // keeps it as the input's accessible name for assistive tech regardless.
+              aria-labelledby={label ? this.contentId : undefined}
+            />
+
+            {isAboAccordionExpanded0 && <span className={checkboxClasses}>{checked ? <IconSVG name='common_CheckBlue' className={styles.checkBlueIcon} /> : false}</span>}
+
+          </label>
+          {!!label ? (
+            <span id={this.contentId} className={labelContentClasses}>
+              {label}
+              {tooltipDescription && <Tooltip description={tooltipDescription} positionY={'top'} positionX={tooltipPosX} tooltipClassName={styles.tooltipCheckbox} iconName='InfoTransparent' />}
+            </span>
+          ) : false}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Checkbox;

package/package.json

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

@@ -5695,11 +5695,29 @@ line-height: 31px;
    pill, CTA buttons) shifts when .fin-cond collapses to empty on Buy. */
 .md3 .fin-calc-card .fin-price-grid.fin-price-grid--cash {
   gap: 12px 15px;
+  /* Cross-tab height parity (desktop): with no floor at all, Financing/Leasing's .fin-calc-card
+     naturally measures 372×366.19px (their own real content — .fin-rate-main + the "0 €
+     Anzahlung · 60 Monate · ..." .fin-cond line). Kaufen has no .fin-cond, but its .fin-rate-main
+     is itself taller (the "Festpreis inkl. MwSt." caption, +the struck old list price when the
+     car has a discount) — the two roughly cancel out, landing Kaufen within ~1px of the same
+     366.19px on its own, with nothing reserved here at all. This 1px closes that last gap so all
+     three tabs measure identically. (Earlier passes at 21/27px reserved space Kaufen's .fin-cond
+     row never needed and weren't the actual cause — see .fin-rate-main above.) */
+  grid-template-rows: auto 1px;
 }
 .md3 .fin-rate-main {
   grid-area: rate;
   min-width: 0;
 }
+/* Kaufen desktop: reserves the struck-old-price row's height (FinanceCalculator.tsx now always
+   renders this wrapper on Kaufen, content or not — see its own comment) so .fin-rate-main is the
+   SAME height whether this car has a discount or not. 20px — measured value (devtools, the <s>
+   price line's own rendered height), confirmed. Without this, a no-discount Kaufen car's whole
+   .fin-calc-card lands ~20px shorter than Financing/Leasing, breaking the cross-tab height parity
+   the .fin-price-grid--cash rule above (1px) assumes. */
+.md3 .fin-rate-strike-slot {
+  min-height: 20px;
+}
 /* Kaufen desktop hero price footnote — same small/quiet treatment as the mobile
    .fin-rate-cash-mobile sup, instead of inheriting the 48px blue hero size. */
 .md3 .fin-rate-main .num.hide-mobile sup {
@@ -5736,6 +5754,17 @@ line-height: 31px;
   grid-template-columns: minmax(0, 1fr) 112px;
   grid-template-areas: "rate evalcol" "cond cond";
   column-gap: 15px;
+  /* Same cross-tab jump as mobile (see the ≤600px rule further down this file, "Request/Call row
+     jump"), mirrored for desktop: on Kaufen, .fin-cond isn't rendered at all (isCash — see
+     FinanceCalculator.tsx), collapsing the "cond" row to 0 instead of a text line, which pulls
+     .fin-adjust/the CTA buttons/.fin-info up compared to Financing/Leasing. A min-height on the
+     whole grid was tried first and reverted — align-content defaults to stretch for grid
+     containers, so the reserved space split across BOTH rows instead of just the missing one,
+     opening a big gap under the price on Kaufen. Reserving the row itself (not the container)
+     targets only the row that actually disappears.
+     21px — measured value (devtools: Leasing 166.19px total − Kaufen 145.19px total), confirmed.
+     (A later bump to 27px, chasing a 6px .fin-calc-card-level residual, was wrong and reverted —
+     that 6px comes from outside .fin-price-grid, see the .fin-adjust rule below.) */
 }
 .md3 .fin-calc-card .fin-eval-col {
   display: flex;

package/vdp/FinanceCalculator.tsx

@@ -656,47 +656,55 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             </div>
           )}
           {/* desktop: same struck list price ABOVE the rate, same fin-rate-old-list styling +
-              clickable UVP badge/tooltip as the mobile sheet's own Kaufen block. */}
-          {isCash && showStrike && (
+              clickable UVP badge/tooltip as the mobile sheet's own Kaufen block.
+              Wrapper now renders on EVERY Kaufen car (isCash alone, not isCash && showStrike) —
+              cross-tab height parity (md3.css) reserves this row's height once, assuming it's
+              always there; a car with no discount used to skip it entirely, landing .fin-rate-main
+              (and the whole card) ~20px shorter than a discounted one and breaking that parity.
+              fin-rate-strike-slot (md3.css) gives it a fixed height so the slot itself doesn't
+              move even though the <s> price inside is still conditional on showStrike. */}
+          {isCash && (
             <div
-              className="hide-mobile"
-              style={{ display: 'flex', justifyContent: 'flex-end', lineHeight: 1, marginTop: 0, cursor: 'pointer' }}
+              className="hide-mobile fin-rate-strike-slot"
+              style={{ display: 'flex', justifyContent: 'flex-end', lineHeight: 1, marginTop: 0, cursor: showStrike ? 'pointer' : 'default' }}
               role="button"
               tabIndex={0}
               onClick={() => setUvpTooltipOpen((v) => !v)}
             >
-              <s className="num fin-rate-old fin-rate-old-list">
-                {eur(listPrice as number)} €
-                <span
-                  className="pp-eyebrow-badge"
-                  role="button"
-                  tabIndex={0}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setUvpTooltipOpen((v) => !v);
-                  }}
-                >
-                  2
-                </span>
-                {uvpTooltipOpen && (
-                  <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
-                    <button
-                      type="button"
-                      className="pp-uvp-tooltip-close"
-                      aria-label={t('autobahn:modal.close')}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setUvpTooltipOpen(false);
-                      }}
-                    >
-                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
-                      </svg>
-                    </button>
-                    <div className="pp-uvp-tooltip-body">{t('autobahn:card.price.uvpListTooltipBody')}</div>
-                  </div>
-                )}
-              </s>
+              {showStrike && (
+                <s className="num fin-rate-old fin-rate-old-list">
+                  {eur(listPrice as number)} €
+                  <span
+                    className="pp-eyebrow-badge"
+                    role="button"
+                    tabIndex={0}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setUvpTooltipOpen((v) => !v);
+                    }}
+                  >
+                    2
+                  </span>
+                  {uvpTooltipOpen && (
+                    <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                      <button
+                        type="button"
+                        className="pp-uvp-tooltip-close"
+                        aria-label={t('autobahn:modal.close')}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setUvpTooltipOpen(false);
+                        }}
+                      >
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                        </svg>
+                      </button>
+                      <div className="pp-uvp-tooltip-body">{t('autobahn:card.price.uvpListTooltipBody')}</div>
+                    </div>
+                  )}
+                </s>
+              )}
             </div>
           )}
           <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>