@bytebrand/fe-ui-core-autobahn 1.0.150 → 1.0.152

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,15 @@ 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;
 }
 
 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
 }) => {
   const [reveal, setReveal] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
@@ -54,6 +58,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 +76,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 +94,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}
@@ -137,6 +154,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.150",
-  "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.152",
+  "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"
+  }
+}