@bytebrand/fe-ui-core-autobahn 1.0.124 → 1.0.125

package/compat/Checkbox/Checkbox.tsx

@@ -1,161 +1,168 @@
-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;
-  tooltipDescription?: string;
-  checkboxPriceValue: any;
-  tooltipPosX?: string;
-  error?: boolean;
-  label?: JSX.Element | string | null | ReactNode;
-}
-
-class Checkbox extends React.Component<ICheckboxProps, {}> {
-  static defaultProps = {
-    name: '',
-    value: '',
-    checked: false,
-    disabled: false,
-    reversed: false,
-
-    onChange: () => { },
-    onBlur: () => { },
-    onFocus: () => { },
-
-    containerClassName: '',
-    checkboxClassName: '',
-    labelClassName: '',
-    tooltipDescription: '',
-    checkboxPriceValue: '',
-    tooltipPosX: '',
-
-    error: false,
-    label: false
-  };
-
-  input: HTMLInputElement = null;
-
-  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, 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 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}>
-        <label className={labelClasses}>
-          <div 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}
-            />
-
-            {isAboAccordionExpanded0 && <span className={checkboxClasses}>{checked ? <IconSVG name='common_CheckBlue' className={styles.checkBlueIcon} /> : false}</span>}
-
-          </div>
-          {!!label ? (
-            <span className={styles.labelContent}>
-              {label}
-              {tooltipDescription && <Tooltip description={tooltipDescription} positionY={'top'} positionX={tooltipPosX} tooltipClassName={styles.tooltipCheckbox} iconName='InfoTransparent' />}
-            </span>
-          ) : false}
-        </label>
-      </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;
+}
+
+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;
+
+  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}>
+        <label className={labelClasses}>
+          <div 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}
+            />
+
+            {isAboAccordionExpanded0 && <span className={checkboxClasses}>{checked ? <IconSVG name='common_CheckBlue' className={styles.checkBlueIcon} /> : false}</span>}
+
+          </div>
+          {!!label ? (
+            <span className={labelContentClasses}>
+              {label}
+              {tooltipDescription && <Tooltip description={tooltipDescription} positionY={'top'} positionX={tooltipPosX} tooltipClassName={styles.tooltipCheckbox} iconName='InfoTransparent' />}
+            </span>
+          ) : false}
+        </label>
+      </div>
+    );
+  }
+}
+
+export default Checkbox;

package/compat/Checkbox/FormCheckbox.tsx

@@ -1,86 +1,88 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Checkbox from './Checkbox';
-import styles from './FormCheckbox.styl';
-
-interface IFormCheckboxProps {
-  className?: string;
-  errorClassName?: string;
-  label?: JSX.Element | string | null;
-  field: any;
-  checkboxClassName?: string;
-  labelClassName?: string;
-  customError?: boolean;
-  helperText?: string;
-}
-
-interface IFormCheckboxState {
-  field: {
-    name?: string;
-    value?: boolean;
-    checked?: boolean;
-    error?: boolean;
-    disabled?: boolean
-  };
-}
-
-class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxState> {
-  constructor(props: IFormCheckboxProps) {
-    super(props);
-
-    this.state = {
-      field: {
-        value: this.props.field.value,
-        error: this.props.field.error,
-        checked: this.props.field.checked,
-        disabled: this.props.field.disabled,
-        name: this.props.field.name
-      }
-    };
-  }
-  static defaultProps = {
-    className: '',
-    label: false
-  };
-
-  handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => {
-    const { name, disabled, onChange, rules } = this.props.field;
-    const customError = (rules.includes('accepted') && !checked);
-    this.setState(() => ({
-      field: {
-        value,
-        name,
-        disabled,
-        checked,
-        error: customError
-      }
-    }));
-    onChange(event, checked, value);
-  }
-
-  render() {
-    const { label, className, checkboxClassName, labelClassName } = this.props;
-    const { name, value, checked, disabled, error } = this.state.field;
-    const customError = error || (this.props.field.error && !checked);
-
-    const _props = {
-      value,
-      checked,
-      name,
-      disabled,
-      label,
-      checkboxClassName,
-      labelClassName,
-      onChange: this.handleChange,
-      error: customError
-    };
-
-    return (
-      <div className={classnames(styles.field, className)}>
-        <Checkbox {..._props} />
-      </div>
-    );
-  }
-}
-
-export default FormCheckbox;
+import * as React from 'react';
+import classnames from 'classnames';
+import Checkbox from './Checkbox';
+import styles from './FormCheckbox.styl';
+
+interface IFormCheckboxProps {
+  className?: string;
+  errorClassName?: string;
+  label?: JSX.Element | string | null;
+  field: any;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  labelContentClassName?: string;
+  customError?: boolean;
+  helperText?: string;
+}
+
+interface IFormCheckboxState {
+  field: {
+    name?: string;
+    value?: boolean;
+    checked?: boolean;
+    error?: boolean;
+    disabled?: boolean
+  };
+}
+
+class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxState> {
+  constructor(props: IFormCheckboxProps) {
+    super(props);
+
+    this.state = {
+      field: {
+        value: this.props.field.value,
+        error: this.props.field.error,
+        checked: this.props.field.checked,
+        disabled: this.props.field.disabled,
+        name: this.props.field.name
+      }
+    };
+  }
+  static defaultProps = {
+    className: '',
+    label: false
+  };
+
+  handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => {
+    const { name, disabled, onChange, rules } = this.props.field;
+    const customError = (rules.includes('accepted') && !checked);
+    this.setState(() => ({
+      field: {
+        value,
+        name,
+        disabled,
+        checked,
+        error: customError
+      }
+    }));
+    onChange(event, checked, value);
+  }
+
+  render() {
+    const { label, className, checkboxClassName, labelClassName, labelContentClassName } = this.props;
+    const { name, value, checked, disabled, error } = this.state.field;
+    const customError = error || (this.props.field.error && !checked);
+
+    const _props = {
+      value,
+      checked,
+      name,
+      disabled,
+      label,
+      checkboxClassName,
+      labelClassName,
+      labelContentClassName,
+      onChange: this.handleChange,
+      error: customError
+    };
+
+    return (
+      <div className={classnames(styles.field, className)}>
+        <Checkbox {..._props} />
+      </div>
+    );
+  }
+}
+
+export default FormCheckbox;

package/package.json

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