@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.2

package/ui/Pagination.tsx

@@ -1,140 +1,140 @@
-// Autobahn (auto.de redesign) — md3 pager.
-//
-// Drop-in visual replacement for the legacy components/ui/Pagination/Pagination. Same prop
-// surface (t, className?, totalPages, step?, currentPage?, changePage?) and the SAME click
-// behaviour: the target page is clamped into [1, totalPages] before changePage() fires, so the
-// existing Mitarbeiter (DealerEmployeesPage) / MyVehicles (MyVehiclesPage) callers work unchanged.
-//
-// Visual upgrade over the legacy 3-button strip: a real md3 pager with a prev/next pill plus
-// numbered page buttons (current = filled primary) and ellipsis when the range is long.
-//
-// Pure/presentational — no store/API/window. Renders correctly only inside a `<div className="md3">`
-// subtree (scoped theme); all classes use the `mpag-` prefix.
-
-import * as React from 'react';
-
-import Icon from './Icon';
-
-export interface PaginationProps {
-  /** i18n translate — supplies the prev/next labels via common:goBack / common:goForward (legacy keys). */
-  t: (key: string, options?: object) => string;
-  /** total number of pages. */
-  totalPages: number;
-  /** 1-based current page. */
-  currentPage?: number;
-  /** fired with the chosen (clamped) 1-based page. */
-  changePage?: (page: number) => void;
-  /** kept for legacy prop-surface parity (unused by the md3 pager). */
-  step?: number;
-  /** extra class on the wrapper. */
-  className?: string;
-}
-
-// How many numbered buttons to show before collapsing the middle into ellipsis.
-// Window = first, last, current, and one neighbour each side (+ up to two ellipsis slots).
-const SIBLINGS = 1;
-const ELLIPSIS = 'ellipsis';
-
-/**
- * Build the list of page tokens to render: numbers and 'ellipsis' gaps.
- * Always includes page 1 and totalPages; collapses long runs around the current page.
- */
-function buildRange(currentPage: number, totalPages: number): Array<number | typeof ELLIPSIS> {
-  // Small enough to show every page (first + last + 2*siblings + 2 ellipsis-or-page slots).
-  if (totalPages <= SIBLINGS * 2 + 5) {
-    const all: Array<number | typeof ELLIPSIS> = [];
-    for (let p = 1; p <= totalPages; p += 1) all.push(p);
-    return all;
-  }
-
-  const left = Math.max(currentPage - SIBLINGS, 1);
-  const right = Math.min(currentPage + SIBLINGS, totalPages);
-  const showLeftEllipsis = left > 2;
-  const showRightEllipsis = right < totalPages - 1;
-
-  const range: Array<number | typeof ELLIPSIS> = [1];
-  // If there is no left gap, fill pages 2..left so the run stays contiguous.
-  if (showLeftEllipsis) range.push(ELLIPSIS);
-  else for (let p = 2; p < left; p += 1) range.push(p);
-
-  for (let p = left; p <= right; p += 1) if (p !== 1 && p !== totalPages) range.push(p);
-
-  if (showRightEllipsis) range.push(ELLIPSIS);
-  else for (let p = right + 1; p < totalPages; p += 1) range.push(p);
-
-  range.push(totalPages);
-  return range;
-}
-
-const Pagination: React.FunctionComponent<PaginationProps> = ({
-  t,
-  totalPages,
-  currentPage = 1,
-  changePage,
-  className,
-}) => {
-  if (!totalPages || totalPages < 1) return null;
-
-  // Clamp into [1, totalPages] exactly like the legacy onButtonClick, then notify.
-  const go = (value: number) => {
-    if (!changePage) return;
-    let computed = value < 1 ? 1 : value;
-    computed = computed > totalPages ? totalPages : computed;
-    changePage(computed);
-  };
-
-  const backDisabled = currentPage <= 1;
-  const forwardDisabled = currentPage >= totalPages;
-  const wrapCls = ['mpag', className].filter(Boolean).join(' ');
-
-  const tokens = buildRange(currentPage, totalPages);
-
-  return (
-    <nav className={wrapCls} role="navigation" aria-label="Pagination">
-      <button
-        type="button"
-        className="mpag-edge mpag-edge--prev"
-        disabled={backDisabled}
-        aria-label={t('common:goBack')}
-        onClick={() => go(currentPage - 1)}
-      >
-        <Icon name="chevron-left" size={18} />
-        <span className="mpag-edge-label">{t('common:goBack')}</span>
-      </button>
-
-      <ul className="mpag-list">
-        {tokens.map((tok, i) =>
-          tok === ELLIPSIS ? (
-            <li key={`e${i}`} className="mpag-gap" aria-hidden="true">
-              &#8230;
-            </li>
-          ) : (
-            <li key={tok}>
-              <button
-                type="button"
-                className={'mpag-page' + (tok === currentPage ? ' is-current' : '')}
-                aria-current={tok === currentPage ? 'page' : undefined}
-                onClick={() => go(tok)}
-              >
-                <span className="num">{tok}</span>
-              </button>
-            </li>
-          ),
-        )}
-      </ul>
-
-      <button
-        type="button"
-        className="mpag-edge mpag-edge--next"
-        disabled={forwardDisabled}
-        aria-label={t('common:goForward')}
-        onClick={() => go(currentPage + 1)}
-      >
-        <span className="mpag-edge-label">{t('common:goForward')}</span>
-        <Icon name="chevron-right" size={18} />
-      </button>
-    </nav>
-  );
-};
-
-export default Pagination;
+// Autobahn (auto.de redesign) — md3 pager.
+//
+// Drop-in visual replacement for the legacy components/ui/Pagination/Pagination. Same prop
+// surface (t, className?, totalPages, step?, currentPage?, changePage?) and the SAME click
+// behaviour: the target page is clamped into [1, totalPages] before changePage() fires, so the
+// existing Mitarbeiter (DealerEmployeesPage) / MyVehicles (MyVehiclesPage) callers work unchanged.
+//
+// Visual upgrade over the legacy 3-button strip: a real md3 pager with a prev/next pill plus
+// numbered page buttons (current = filled primary) and ellipsis when the range is long.
+//
+// Pure/presentational — no store/API/window. Renders correctly only inside a `<div className="md3">`
+// subtree (scoped theme); all classes use the `mpag-` prefix.
+
+import * as React from 'react';
+
+import Icon from './Icon';
+
+export interface PaginationProps {
+  /** i18n translate — supplies the prev/next labels via common:goBack / common:goForward (legacy keys). */
+  t: (key: string, options?: object) => string;
+  /** total number of pages. */
+  totalPages: number;
+  /** 1-based current page. */
+  currentPage?: number;
+  /** fired with the chosen (clamped) 1-based page. */
+  changePage?: (page: number) => void;
+  /** kept for legacy prop-surface parity (unused by the md3 pager). */
+  step?: number;
+  /** extra class on the wrapper. */
+  className?: string;
+}
+
+// How many numbered buttons to show before collapsing the middle into ellipsis.
+// Window = first, last, current, and one neighbour each side (+ up to two ellipsis slots).
+const SIBLINGS = 1;
+const ELLIPSIS = 'ellipsis';
+
+/**
+ * Build the list of page tokens to render: numbers and 'ellipsis' gaps.
+ * Always includes page 1 and totalPages; collapses long runs around the current page.
+ */
+function buildRange(currentPage: number, totalPages: number): Array<number | typeof ELLIPSIS> {
+  // Small enough to show every page (first + last + 2*siblings + 2 ellipsis-or-page slots).
+  if (totalPages <= SIBLINGS * 2 + 5) {
+    const all: Array<number | typeof ELLIPSIS> = [];
+    for (let p = 1; p <= totalPages; p += 1) all.push(p);
+    return all;
+  }
+
+  const left = Math.max(currentPage - SIBLINGS, 1);
+  const right = Math.min(currentPage + SIBLINGS, totalPages);
+  const showLeftEllipsis = left > 2;
+  const showRightEllipsis = right < totalPages - 1;
+
+  const range: Array<number | typeof ELLIPSIS> = [1];
+  // If there is no left gap, fill pages 2..left so the run stays contiguous.
+  if (showLeftEllipsis) range.push(ELLIPSIS);
+  else for (let p = 2; p < left; p += 1) range.push(p);
+
+  for (let p = left; p <= right; p += 1) if (p !== 1 && p !== totalPages) range.push(p);
+
+  if (showRightEllipsis) range.push(ELLIPSIS);
+  else for (let p = right + 1; p < totalPages; p += 1) range.push(p);
+
+  range.push(totalPages);
+  return range;
+}
+
+const Pagination: React.FunctionComponent<PaginationProps> = ({
+  t,
+  totalPages,
+  currentPage = 1,
+  changePage,
+  className,
+}) => {
+  if (!totalPages || totalPages < 1) return null;
+
+  // Clamp into [1, totalPages] exactly like the legacy onButtonClick, then notify.
+  const go = (value: number) => {
+    if (!changePage) return;
+    let computed = value < 1 ? 1 : value;
+    computed = computed > totalPages ? totalPages : computed;
+    changePage(computed);
+  };
+
+  const backDisabled = currentPage <= 1;
+  const forwardDisabled = currentPage >= totalPages;
+  const wrapCls = ['mpag', className].filter(Boolean).join(' ');
+
+  const tokens = buildRange(currentPage, totalPages);
+
+  return (
+    <nav className={wrapCls} role="navigation" aria-label="Pagination">
+      <button
+        type="button"
+        className="mpag-edge mpag-edge--prev"
+        disabled={backDisabled}
+        aria-label={t('common:goBack')}
+        onClick={() => go(currentPage - 1)}
+      >
+        <Icon name="chevron-left" size={18} />
+        <span className="mpag-edge-label">{t('common:goBack')}</span>
+      </button>
+
+      <ul className="mpag-list">
+        {tokens.map((tok, i) =>
+          tok === ELLIPSIS ? (
+            <li key={`e${i}`} className="mpag-gap" aria-hidden="true">
+              &#8230;
+            </li>
+          ) : (
+            <li key={tok}>
+              <button
+                type="button"
+                className={'mpag-page' + (tok === currentPage ? ' is-current' : '')}
+                aria-current={tok === currentPage ? 'page' : undefined}
+                onClick={() => go(tok)}
+              >
+                <span className="num">{tok}</span>
+              </button>
+            </li>
+          ),
+        )}
+      </ul>
+
+      <button
+        type="button"
+        className="mpag-edge mpag-edge--next"
+        disabled={forwardDisabled}
+        aria-label={t('common:goForward')}
+        onClick={() => go(currentPage + 1)}
+      >
+        <span className="mpag-edge-label">{t('common:goForward')}</span>
+        <Icon name="chevron-right" size={18} />
+      </button>
+    </nav>
+  );
+};
+
+export default Pagination;

package/ui/Price.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-
-export interface PriceProps {
-  /** price in EUR; formatted with the de-DE locale. */
-  value: number;
-  size?: number;
-}
-
-/** Price in strong neutral text (modern) — no green spam. */
-const Price: React.FunctionComponent<PriceProps> = ({ value, size = 26 }) => (
-  <span
-    className="num"
-    style={{
-      fontWeight: 700,
-      fontSize: size,
-      color: 'var(--md-on-surface)',
-      letterSpacing: '-.5px',
-      whiteSpace: 'nowrap',
-    }}
-  >
-    {value.toLocaleString('de-DE')} €
-  </span>
-);
-
-export default Price;
+import React from 'react';
+
+export interface PriceProps {
+  /** price in EUR; formatted with the de-DE locale. */
+  value: number;
+  size?: number;
+}
+
+/** Price in strong neutral text (modern) — no green spam. */
+const Price: React.FunctionComponent<PriceProps> = ({ value, size = 26 }) => (
+  <span
+    className="num"
+    style={{
+      fontWeight: 700,
+      fontSize: size,
+      color: 'var(--md-on-surface)',
+      letterSpacing: '-.5px',
+      whiteSpace: 'nowrap',
+    }}
+  >
+    {value.toLocaleString('de-DE')} €
+  </span>
+);
+
+export default Price;

package/ui/PriceEvalBar.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-
-import { TIER_COLORS, TIER_LABELS, RatingTier } from '../constants';
-
-export interface PriceEvalBarProps {
-  /** price tier 0 (Top) … 4 (Hoch). */
-  tier?: RatingTier;
-  /** thinner bar (6px instead of 8px). */
-  compact?: boolean;
-}
-
-/**
- * Preisbewertung mini bar — the trust signal: green→red gradient with a marker
- * at the car's tier. Colors/labels come from the shared autobahn constants.
- */
-const PriceEvalBar: React.FunctionComponent<PriceEvalBarProps> = ({ tier = 1, compact }) => (
-  <div style={{ width: '100%' }}>
-    <div
-      style={{
-        position: 'relative',
-        display: 'flex',
-        height: compact ? 6 : 8,
-        borderRadius: 'var(--md-r-full)',
-        overflow: 'hidden',
-      }}
-      aria-label={TIER_LABELS[tier]}
-    >
-      {TIER_COLORS.map((c, i) => (
-        <div key={i} style={{ flex: 1, background: c, opacity: i === tier ? 1 : 0.32 }} />
-      ))}
-      <span
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: `calc(${(tier + 0.5) * 20}% - 6px)`,
-          transform: 'translateY(-50%)',
-          width: 12,
-          height: 12,
-          borderRadius: '50%',
-          background: '#fff',
-          boxShadow: '0 0 0 3px ' + TIER_COLORS[tier],
-        }}
-      />
-    </div>
-  </div>
-);
-
-export default PriceEvalBar;
+import React from 'react';
+
+import { TIER_COLORS, TIER_LABELS, RatingTier } from '../constants';
+
+export interface PriceEvalBarProps {
+  /** price tier 0 (Top) … 4 (Hoch). */
+  tier?: RatingTier;
+  /** thinner bar (6px instead of 8px). */
+  compact?: boolean;
+}
+
+/**
+ * Preisbewertung mini bar — the trust signal: green→red gradient with a marker
+ * at the car's tier. Colors/labels come from the shared autobahn constants.
+ */
+const PriceEvalBar: React.FunctionComponent<PriceEvalBarProps> = ({ tier = 1, compact }) => (
+  <div style={{ width: '100%' }}>
+    <div
+      style={{
+        position: 'relative',
+        display: 'flex',
+        height: compact ? 6 : 8,
+        borderRadius: 'var(--md-r-full)',
+        overflow: 'hidden',
+      }}
+      aria-label={TIER_LABELS[tier]}
+    >
+      {TIER_COLORS.map((c, i) => (
+        <div key={i} style={{ flex: 1, background: c, opacity: i === tier ? 1 : 0.32 }} />
+      ))}
+      <span
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: `calc(${(tier + 0.5) * 20}% - 6px)`,
+          transform: 'translateY(-50%)',
+          width: 12,
+          height: 12,
+          borderRadius: '50%',
+          background: '#fff',
+          boxShadow: '0 0 0 3px ' + TIER_COLORS[tier],
+        }}
+      />
+    </div>
+  </div>
+);
+
+export default PriceEvalBar;

package/ui/SaveChip.tsx

@@ -1,34 +1,34 @@
-import React from 'react';
-import { TranslationFunction } from '../types';
-
-import Icon from './Icon';
-
-export interface SaveChipProps {
-  /** amount saved in EUR; formatted with the de-DE locale. */
-  amount: number;
-  t: TranslationFunction;
-}
-
-/** Savings chip (deal accent — used sparingly). */
-const SaveChip: React.FunctionComponent<SaveChipProps> = ({ amount, t }) => (
-  <span
-    style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: 5,
-      height: 26,
-      padding: '0 11px',
-      borderRadius: 'var(--md-r-full)',
-      background: 'var(--md-good)',
-      color: '#fff',
-      fontSize: 12.5,
-      fontWeight: 700,
-      whiteSpace: 'nowrap',
-    }}
-  >
-    <Icon name="trending-down" size={14} stroke={2.4} />
-    {t('autobahn:card.price.savedAmount', { amount: amount.toLocaleString('de-DE') })}
-  </span>
-);
-
-export default SaveChip;
+import React from 'react';
+import { TranslationFunction } from '../types';
+
+import Icon from './Icon';
+
+export interface SaveChipProps {
+  /** amount saved in EUR; formatted with the de-DE locale. */
+  amount: number;
+  t: TranslationFunction;
+}
+
+/** Savings chip (deal accent — used sparingly). */
+const SaveChip: React.FunctionComponent<SaveChipProps> = ({ amount, t }) => (
+  <span
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 5,
+      height: 26,
+      padding: '0 11px',
+      borderRadius: 'var(--md-r-full)',
+      background: 'var(--md-good)',
+      color: '#fff',
+      fontSize: 12.5,
+      fontWeight: 700,
+      whiteSpace: 'nowrap',
+    }}
+  >
+    <Icon name="trending-down" size={14} stroke={2.4} />
+    {t('autobahn:card.price.savedAmount', { amount: amount.toLocaleString('de-DE') })}
+  </span>
+);
+
+export default SaveChip;

package/ui/Segmented.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-
-import Icon from './Icon';
-
-/**
- * [value, label, optional kebab-case lucide icon name, optional explicit aria-label].
- *
- * `label` doubles as the button's visible text AND (when non-empty) its accessible name.
- * Icon-only options (empty `label`, e.g. the SRP list/grid view toggle) render no visible
- * text, so `Segmented` derives an accessible name from `key` (Title-cased) when neither
- * `label` nor an explicit `ariaLabel` is supplied — every rendered `<button>` always ends up
- * with SOME discernible name (WCAG 4.1.2 / axe "button-name"). Pass `ariaLabel` explicitly for
- * a real (ideally translated) name instead of relying on the key-derived fallback.
- */
-export type SegmentedOption = readonly [key: string, label: string, icon?: string, ariaLabel?: string];
-
-export interface SegmentedProps {
-  options: ReadonlyArray<SegmentedOption>;
-  value: string;
-  onChange: (value: string) => void;
-}
-
-/** Title-cases a raw option key ('list' -> 'List') as a last-resort accessible name. */
-const titleCase = (s: string): string => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
-
-const Segmented: React.FunctionComponent<SegmentedProps> = ({ options, value, onChange }) => (
-  <div className="segmented">
-    {options.map(([k, label, icon, ariaLabel]) => {
-      // only set aria-label when there's no visible text label already providing the name —
-      // avoids a redundant/conflicting name on labelled buttons (WCAG 2.5.3 Label in Name).
-      const accessibleName = ariaLabel || (label ? undefined : titleCase(k));
-      return (
-        <button
-          key={k}
-          type="button"
-          className={value === k ? 'on' : ''}
-          aria-label={accessibleName}
-          onClick={() => onChange(k)}
-        >
-          {icon && <Icon name={icon} size={16} />}
-          {label}
-        </button>
-      );
-    })}
-  </div>
-);
-
-export default Segmented;
+import React from 'react';
+
+import Icon from './Icon';
+
+/**
+ * [value, label, optional kebab-case lucide icon name, optional explicit aria-label].
+ *
+ * `label` doubles as the button's visible text AND (when non-empty) its accessible name.
+ * Icon-only options (empty `label`, e.g. the SRP list/grid view toggle) render no visible
+ * text, so `Segmented` derives an accessible name from `key` (Title-cased) when neither
+ * `label` nor an explicit `ariaLabel` is supplied — every rendered `<button>` always ends up
+ * with SOME discernible name (WCAG 4.1.2 / axe "button-name"). Pass `ariaLabel` explicitly for
+ * a real (ideally translated) name instead of relying on the key-derived fallback.
+ */
+export type SegmentedOption = readonly [key: string, label: string, icon?: string, ariaLabel?: string];
+
+export interface SegmentedProps {
+  options: ReadonlyArray<SegmentedOption>;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+/** Title-cases a raw option key ('list' -> 'List') as a last-resort accessible name. */
+const titleCase = (s: string): string => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
+
+const Segmented: React.FunctionComponent<SegmentedProps> = ({ options, value, onChange }) => (
+  <div className="segmented">
+    {options.map(([k, label, icon, ariaLabel]) => {
+      // only set aria-label when there's no visible text label already providing the name —
+      // avoids a redundant/conflicting name on labelled buttons (WCAG 2.5.3 Label in Name).
+      const accessibleName = ariaLabel || (label ? undefined : titleCase(k));
+      return (
+        <button
+          key={k}
+          type="button"
+          className={value === k ? 'on' : ''}
+          aria-label={accessibleName}
+          onClick={() => onChange(k)}
+        >
+          {icon && <Icon name={icon} size={16} />}
+          {label}
+        </button>
+      );
+    })}
+  </div>
+);
+
+export default Segmented;