@bytebrand/fe-ui-core-autobahn 1.0.151 → 1.0.153

package/chrome/Footer.tsx

@@ -86,6 +86,14 @@ export interface FooterProps {
    * (VehicleDetailedNextPage), never site-wide, since every other page shows only footnotes 1-4.
    */
   showCostFootnotes?: boolean;
+  /**
+   * Hides the brand blurb + "stay in contact"/social + 3 link columns block (the
+   * `.footer-grid`), leaving just the legal disclaimer and copyright/"Nach Oben" bar. Opt-in,
+   * off by default — every other caller keeps the full footer. Only CheckoutThankYouPage.tsx
+   * (checkout step 6 "Danke") uses this today: that page's own Figma reference (64637:37033)
+   * has just the compact legal/copyright strip, not the full site footer.
+   */
+  hideBrandColumns?: boolean;
 }
 
 /**
@@ -93,7 +101,7 @@ export interface FooterProps {
  * disclaimer block, and a copyright + "Nach Oben" bar. Pure/presentational MD3 chrome — renders
  * correctly only inside a `<div className="md3">` subtree (scoped theme at source/theme/autobahn).
  */
-const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes }) => {
+const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes, hideBrandColumns }) => {
   const scrollTop = (): void => window.scroll({ top: 0, left: 0, behavior: 'smooth' });
   const now = new Date();
   const year = now.getFullYear();
@@ -104,6 +112,7 @@ const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes })
 
   return (
     <footer style={{ background: 'var(--md-sc-low)', borderTop: '1px solid var(--md-outline-variant)' }}>
+      {!hideBrandColumns ? (
       <div className="container footer-grid" style={{ padding: '40px 24px 24px' }}>
         <div>
           <img src={logoUrl} height="30" alt="auto.de" />
@@ -169,10 +178,14 @@ const Footer: React.FunctionComponent<FooterProps> = ({ t, showCostFootnotes })
           </div>
         ))}
       </div>
+      ) : null}
 
       {/* Legally required disclaimers (PAngV §17a financing example w/ live APR/nominal rate +
-          term, DAT CO₂-Leitfaden, MwSt, Streichpreis, image notice). Same text as the legacy footer. */}
-      <div style={{ borderTop: '1px solid var(--md-outline-variant)' }}>
+          term, DAT CO₂-Leitfaden, MwSt, Streichpreis, image notice). Same text as the legacy footer.
+          The top border separates this from .footer-grid above — with hideBrandColumns that
+          block is gone, so the border would just double up against whatever's already directly
+          above the footer on the page (CheckoutThankYouPage.tsx's own header border). */}
+      <div style={hideBrandColumns ? undefined : { borderTop: '1px solid var(--md-outline-variant)' }}>
         <div className="container" style={{ padding: '18px 24px' }}>
           <p
             className="md-label-sm"

package/compat/MdField/MdField.tsx

@@ -8,6 +8,7 @@ import * as React from 'react';
 import classnames from 'classnames';
 
 import Icon from '../../ui/Icon';
+import MfieldCheckIcon from '../../ui/MfieldCheckIcon';
 
 export interface MdFieldProps {
   className?: string;
@@ -32,12 +33,21 @@ export interface MdFieldProps {
    *  when empty and unfocused, then floats up to the normal small-label spot on focus
    *  or once a value is typed. Defaults to false — the static above-field label. */
   floatingLabel?: boolean;
+  /** opt-in: show a green check + green border when the field is filled and valid (checkout).
+   *  Same contract/markup as FormField's own showValid (.mfield--valid/.mfield-ok, md3.css). */
+  showValid?: boolean;
   onChange: (value: string, name?: string, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  /** fires after the field's own internal blur handling (floating-label state). Callers use
+   *  this to trigger `field.validate()` (mobx-react-form) on blur — this component only owns
+   *  the `error` prop's display, not when validation actually runs, so without a caller wiring
+   *  this in, `field.error` never populates from blur and a required-but-empty field never
+   *  shows its error text/red border until some other validate() call happens to run. */
+  onBlur?: () => void;
 }
 
 const MdField: React.FunctionComponent<MdFieldProps> = ({
   className, error, sx, required, disabled, multiline, autoComplete,
-  value, type, name, rows, label, placeholder, floatingLabel, maxLength, onChange
+  value, type, name, rows, label, placeholder, floatingLabel, maxLength, showValid, onChange, onBlur
 }) => {
   const [reveal, setReveal] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
@@ -54,6 +64,7 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
   // a value is typed, the real <label> appears in its normal static spot above the
   // field and the native placeholder goes quiet — the two never show at the same time.
   const hasValue = value != null && value !== '';
+  const isValid = !!showValid && !disabled && !isPassword && !hasError && hasValue;
   const resting = !!floatingLabel && !focused && !hasValue;
   const effectivePlaceholder = floatingLabel ? (resting ? (label || placeholder || '') : '') : (placeholder || '');
   // The real <label> is skipped entirely while resting (see above), leaving the input with
@@ -71,7 +82,9 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
 
   return (
     <div className={classnames('mfield-group', className)} style={sx as React.CSSProperties}>
-      {label && !resting ? (
+      {/* Non-floating fields (FormField's own call sites don't set floatingLabel) keep the
+          plain label-above-the-box row — unchanged, still a .mfield-group flex child. */}
+      {label && !resting && !floatingLabel ? (
         <label className='md-label-sm mfield-label' htmlFor={generatedId}>
           {label}{required ? ' *' : ''}
         </label>
@@ -87,8 +100,18 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
           + (hasError ? ' mfield--error' : '')
           + (disabled ? ' mfield--disabled' : '')
           + (floatingLabel ? ' mfield--floating' : '')
+          + (isValid ? ' mfield--valid' : '')
         }
       >
+        {/* floatingLabel + floated (focused or has a value): the Material "notched outline"
+            treatment — label sits ON the border line, not stacked above it in its own row.
+            Lives INSIDE .mfield (not .mfield-group) so it can position against .mfield's own
+            edge (.mfield is position:relative already, md3.css) via .mfield-label--notch. */}
+        {label && !resting && floatingLabel ? (
+          <label className='md-label-sm mfield-label mfield-label--notch' htmlFor={generatedId}>
+            {label}{required ? ' *' : ''}
+          </label>
+        ) : null}
         {multiline ? (
           <textarea
             id={generatedId}
@@ -96,7 +119,7 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
             value={value == null ? '' : value}
             onChange={handleChange}
             onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
+            onBlur={() => { setFocused(false); onBlur?.(); }}
             disabled={disabled}
             rows={rows || 3}
             maxLength={maxLength}
@@ -115,7 +138,7 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
             value={value == null ? '' : value}
             onChange={handleChange}
             onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
+            onBlur={() => { setFocused(false); onBlur?.(); }}
             disabled={disabled}
             maxLength={maxLength}
             placeholder={effectivePlaceholder}
@@ -137,6 +160,7 @@ const MdField: React.FunctionComponent<MdFieldProps> = ({
             <Icon name={reveal ? 'eye-off' : 'eye'} size={18} />
           </button>
         ) : null}
+        {isValid ? <span className="mfield-ok"><MfieldCheckIcon /></span> : null}
       </div>
       {hasError ? (
         // role="alert" announces this to screen readers the moment it enters the DOM (e.g.

package/locales/de/autobahn.json

@@ -67,6 +67,7 @@
   "finance": {
     "termSelection": "Laufzeit",
     "termSelectionMonths": "Laufzeit (Monate)",
+    "change": "Ändern",
     "headerTitle": "Dein Angebot",
     "adjustRate": "Rate anpassen",
     "secureOffer": "Angebot anfragen",
@@ -700,7 +701,7 @@
   },
   "modal": {
     "leasingDetails": "Leasingdetails",
-    "financingDetails": "Finanzierungs-Details",
+    "financingDetails": "Details",
     "close": "Schließen",
     "vehiclePrice": "Fahrzeugpreis ggf. inkl. MwSt.",
     "leasingAmount": "Leasingbetrag",

package/locales/en/autobahn.json

@@ -67,6 +67,7 @@
   "finance": {
     "termSelection": "Term",
     "termSelectionMonths": "Term (months)",
+    "change": "Change",
     "headerTitle": "Your offer",
     "adjustRate": "Adjust rate",
     "secureOffer": "Request offer",

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.151",
-  "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",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.20",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.153",
+  "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",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.20",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}