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

package/chrome/Footer.tsx

@@ -1,189 +1,189 @@
-import React from 'react';
-import { TranslationFunction } from '../types';
-import { defaultConfig } from '@bytebrand/fe-financing';
-
-import logoUrl from '../assets/autode-logo.svg';
-
-/** One footer link. `external` → new tab; relative hrefs are full navigations (WP pages / SPA).
- *  `labelKey` is an autobahn i18n key resolved at render. */
-interface FooterLink {
-  labelKey: string;
-  href: string;
-  external?: boolean;
-}
-
-/**
- * Footer link columns (design's four-column layout) populated with REAL targets verified against
- * the legacy footer (FooterLinksData.ts) + the live routes. Car-browse entries go to the search
- * pilot (/search); content/legal entries hit the real WP routes. No dead/no-op links.
- */
-const COLUMNS: ReadonlyArray<{ headingKey: string; items: FooterLink[] }> = [
-  {
-    headingKey: 'autobahn:chrome.buy',
-    items: [
-      { labelKey: 'autobahn:chrome.usedCars', href: '/search' },
-      { labelKey: 'autobahn:chrome.newCars', href: '/search' },
-      { labelKey: 'autobahn:chrome.electricCars', href: '/search' },
-      { labelKey: 'autobahn:chrome.vans', href: '/search' },
-    ],
-  },
-  {
-    headingKey: 'autobahn:chrome.services',
-    items: [
-      { labelKey: 'autobahn:chrome.financing', href: '/finanzieren/' },
-      { labelKey: 'autobahn:chrome.helpContact', href: '/service/kontakt/' },
-      { labelKey: 'autobahn:chrome.newsletter', href: '/service/kontakt/' },
-      { labelKey: 'autobahn:chrome.forms', href: '/ratgeber/autokauf/' },
-    ],
-  },
-  {
-    headingKey: 'autobahn:chrome.company',
-    items: [
-      { labelKey: 'autobahn:chrome.about', href: '/das-neue-auto-de/' },
-      { labelKey: 'autobahn:chrome.careers', href: 'https://jobs.auto.de/', external: true },
-      { labelKey: 'autobahn:chrome.press', href: '/presse/' },
-      { labelKey: 'autobahn:chrome.magazine', href: '/magazin/' },
-    ],
-  },
-  {
-    headingKey: 'autobahn:chrome.legal',
-    items: [
-      { labelKey: 'autobahn:chrome.imprint', href: '/impressum/' },
-      { labelKey: 'autobahn:chrome.privacy', href: '/datenschutz/' },
-      { labelKey: 'autobahn:chrome.terms', href: '/agb/' },
-      { labelKey: 'autobahn:chrome.codex', href: '/kodex/' },
-    ],
-  },
-];
-
-/** Social links (real auto.de profiles — same set as the legacy footer). */
-const SOCIALS: ReadonlyArray<{ name: string; label: string; href: string }> = [
-  { name: 'facebook', label: 'Facebook', href: 'https://facebook.com/auto.de' },
-  { name: 'twitter', label: 'X / Twitter', href: 'https://twitter.com/auto_de' },
-  { name: 'instagram', label: 'Instagram', href: 'https://instagram.com/auto.de_official/' },
-];
-
-/** financing defaults for the §17a PAngV representative example (same source the legacy footer uses). */
-const FIN = defaultConfig.financing;
-const fmt2 = (n: number): string => Number(n).toFixed(2);
-
-export interface FooterProps {
-  /**
-   * i18n function. The footer: namespace holds the LEGALLY REQUIRED disclaimer text (PAngV
-   * financing example, DAT CO₂-Leitfaden, MwSt, image notice) — rendered verbatim from the same
-   * strings as the legacy footer so /search stays compliant where prices/rates are shown.
-   */
-  t: TranslationFunction;
-}
-
-/**
- * Global site footer: brand blurb + social links, four real link columns, the mandatory legal
- * 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 }) => {
-  const scrollTop = (): void => window.scroll({ top: 0, left: 0, behavior: 'smooth' });
-  const year = new Date().getFullYear();
-
-  return (
-    <footer style={{ background: 'var(--md-sc-low)', borderTop: '1px solid var(--md-outline-variant)' }}>
-      <div className="container footer-grid" style={{ padding: '40px 24px 24px' }}>
-        <div>
-          <img src={logoUrl} height="30" alt="auto.de" />
-          <p className="md-body-sm" style={{ marginTop: 14, maxWidth: 240 }}>
-            {t('autobahn:chrome.brandBlurb')}
-          </p>
-          <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
-            {SOCIALS.map((s) => (
-              <a
-                key={s.name}
-                href={s.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label={s.label}
-                className="icon-btn"
-                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--md-on-surface-variant)' }}
-              >
-                <SocialIcon name={s.name} />
-              </a>
-            ))}
-          </div>
-        </div>
-
-        {COLUMNS.map(({ headingKey, items }) => (
-          <div key={headingKey}>
-            <div className="md-title-sm" style={{ marginBottom: 14 }}>{t(headingKey)}</div>
-            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
-              {items.map((item) => (
-                <li key={item.labelKey}>
-                  <a
-                    href={item.href}
-                    target={item.external ? '_blank' : undefined}
-                    rel={item.external ? 'noopener noreferrer' : undefined}
-                    className="md-body-sm"
-                    style={{ color: 'var(--md-on-surface-variant)', textDecoration: 'none' }}
-                  >
-                    {t(item.labelKey)}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-
-      {/* 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)' }}>
-        <div className="container" style={{ padding: '18px 24px' }}>
-          <p className="md-label-sm" style={{ lineHeight: 1.55, color: 'var(--md-on-surface-variant)', margin: 0 }}>
-            {t('footer:vatReportable')}<br />
-            {t('footer:strikePrice')}<br />
-            {t('footer:financingInfo', {
-              rawPaybackPeriod: FIN.rawPaybackPeriod,
-              nominalInterestRate: fmt2(FIN.nominalInterestRate),
-              annualPercentageRate: fmt2(FIN.annualPercentageRate),
-            })}<br />
-            * {t('footer:co2Info')}<br />
-            {t('footer:EnvPremium')}<br />
-            {t('footer:images')}
-          </p>
-        </div>
-      </div>
-
-      <div style={{ borderTop: '1px solid var(--md-outline-variant)' }}>
-        <div
-          className="container"
-          style={{ padding: '16px 24px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}
-        >
-          <span className="md-label-sm">{t('footer:copyright', { year })}</span>
-          <button
-            type="button"
-            className="mbtn mbtn--text mbtn--sm"
-            onClick={scrollTop}
-            style={{ padding: '0 4px' }}
-          >
-            {t('footer:up')} ↑
-          </button>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-/**
- * Inline brand-correct social glyphs. lucide-react dropped the brand marks (facebook/twitter/
- * instagram) from its `icons` map, so the shared Icon would render nothing — use small inline SVGs.
- */
-const SocialIcon: React.FunctionComponent<{ name: string }> = ({ name }) => {
-  const common = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'currentColor' as const, 'aria-hidden': true };
-  if (name === 'facebook') {
-    return (<svg {...common}><path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.49-3.91 3.78-3.91 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94Z" /></svg>);
-  }
-  if (name === 'twitter') {
-    return (<svg {...common}><path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.65l-5.21-6.81-5.96 6.81H1.69l7.73-8.84L1.25 2.25h6.82l4.71 6.23 5.46-6.23Zm-1.16 17.52h1.83L7.01 4.13H5.05l12.03 15.64Z" /></svg>);
-  }
-  return (<svg {...common}><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 1.62c-3.15 0-3.5.01-4.74.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71-.06 1.24-.07 1.59-.07 4.74s.01 3.5.07 4.74c.04.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.24.06 1.59.07 4.74.07s3.5-.01 4.74-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.24.07-1.59.07-4.74s-.01-3.5-.07-4.74c-.04-.9-.19-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.24-.06-1.59-.07-4.74-.07Zm0 2.76a5.46 5.46 0 1 1 0 10.92 5.46 5.46 0 0 1 0-10.92Zm0 9a3.54 3.54 0 1 0 0-7.08 3.54 3.54 0 0 0 0 7.08Zm6.95-9.22a1.28 1.28 0 1 1-2.55 0 1.28 1.28 0 0 1 2.55 0Z" /></svg>);
-};
-
-export default Footer;
+import React from 'react';
+import { TranslationFunction } from '../types';
+import { defaultConfig } from '@bytebrand/fe-financing';
+
+import logoUrl from '../assets/autode-logo.svg';
+
+/** One footer link. `external` → new tab; relative hrefs are full navigations (WP pages / SPA).
+ *  `labelKey` is an autobahn i18n key resolved at render. */
+interface FooterLink {
+  labelKey: string;
+  href: string;
+  external?: boolean;
+}
+
+/**
+ * Footer link columns (design's four-column layout) populated with REAL targets verified against
+ * the legacy footer (FooterLinksData.ts) + the live routes. Car-browse entries go to the search
+ * pilot (/search); content/legal entries hit the real WP routes. No dead/no-op links.
+ */
+const COLUMNS: ReadonlyArray<{ headingKey: string; items: FooterLink[] }> = [
+  {
+    headingKey: 'autobahn:chrome.buy',
+    items: [
+      { labelKey: 'autobahn:chrome.usedCars', href: '/search' },
+      { labelKey: 'autobahn:chrome.newCars', href: '/search' },
+      { labelKey: 'autobahn:chrome.electricCars', href: '/search' },
+      { labelKey: 'autobahn:chrome.vans', href: '/search' },
+    ],
+  },
+  {
+    headingKey: 'autobahn:chrome.services',
+    items: [
+      { labelKey: 'autobahn:chrome.financing', href: '/finanzieren/' },
+      { labelKey: 'autobahn:chrome.helpContact', href: '/service/kontakt/' },
+      { labelKey: 'autobahn:chrome.newsletter', href: '/service/kontakt/' },
+      { labelKey: 'autobahn:chrome.forms', href: '/ratgeber/autokauf/' },
+    ],
+  },
+  {
+    headingKey: 'autobahn:chrome.company',
+    items: [
+      { labelKey: 'autobahn:chrome.about', href: '/das-neue-auto-de/' },
+      { labelKey: 'autobahn:chrome.careers', href: 'https://jobs.auto.de/', external: true },
+      { labelKey: 'autobahn:chrome.press', href: '/presse/' },
+      { labelKey: 'autobahn:chrome.magazine', href: '/magazin/' },
+    ],
+  },
+  {
+    headingKey: 'autobahn:chrome.legal',
+    items: [
+      { labelKey: 'autobahn:chrome.imprint', href: '/impressum/' },
+      { labelKey: 'autobahn:chrome.privacy', href: '/datenschutz/' },
+      { labelKey: 'autobahn:chrome.terms', href: '/agb/' },
+      { labelKey: 'autobahn:chrome.codex', href: '/kodex/' },
+    ],
+  },
+];
+
+/** Social links (real auto.de profiles — same set as the legacy footer). */
+const SOCIALS: ReadonlyArray<{ name: string; label: string; href: string }> = [
+  { name: 'facebook', label: 'Facebook', href: 'https://facebook.com/auto.de' },
+  { name: 'twitter', label: 'X / Twitter', href: 'https://twitter.com/auto_de' },
+  { name: 'instagram', label: 'Instagram', href: 'https://instagram.com/auto.de_official/' },
+];
+
+/** financing defaults for the §17a PAngV representative example (same source the legacy footer uses). */
+const FIN = defaultConfig.financing;
+const fmt2 = (n: number): string => Number(n).toFixed(2);
+
+export interface FooterProps {
+  /**
+   * i18n function. The footer: namespace holds the LEGALLY REQUIRED disclaimer text (PAngV
+   * financing example, DAT CO₂-Leitfaden, MwSt, image notice) — rendered verbatim from the same
+   * strings as the legacy footer so /search stays compliant where prices/rates are shown.
+   */
+  t: TranslationFunction;
+}
+
+/**
+ * Global site footer: brand blurb + social links, four real link columns, the mandatory legal
+ * 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 }) => {
+  const scrollTop = (): void => window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+  const year = new Date().getFullYear();
+
+  return (
+    <footer style={{ background: 'var(--md-sc-low)', borderTop: '1px solid var(--md-outline-variant)' }}>
+      <div className="container footer-grid" style={{ padding: '40px 24px 24px' }}>
+        <div>
+          <img src={logoUrl} height="30" alt="auto.de" />
+          <p className="md-body-sm" style={{ marginTop: 14, maxWidth: 240 }}>
+            {t('autobahn:chrome.brandBlurb')}
+          </p>
+          <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
+            {SOCIALS.map((s) => (
+              <a
+                key={s.name}
+                href={s.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={s.label}
+                className="icon-btn"
+                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--md-on-surface-variant)' }}
+              >
+                <SocialIcon name={s.name} />
+              </a>
+            ))}
+          </div>
+        </div>
+
+        {COLUMNS.map(({ headingKey, items }) => (
+          <div key={headingKey}>
+            <div className="md-title-sm" style={{ marginBottom: 14 }}>{t(headingKey)}</div>
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
+              {items.map((item) => (
+                <li key={item.labelKey}>
+                  <a
+                    href={item.href}
+                    target={item.external ? '_blank' : undefined}
+                    rel={item.external ? 'noopener noreferrer' : undefined}
+                    className="md-body-sm"
+                    style={{ color: 'var(--md-on-surface-variant)', textDecoration: 'none' }}
+                  >
+                    {t(item.labelKey)}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      {/* 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)' }}>
+        <div className="container" style={{ padding: '18px 24px' }}>
+          <p className="md-label-sm" style={{ lineHeight: 1.55, color: 'var(--md-on-surface-variant)', margin: 0 }}>
+            {t('footer:vatReportable')}<br />
+            {t('footer:strikePrice')}<br />
+            {t('footer:financingInfo', {
+              rawPaybackPeriod: FIN.rawPaybackPeriod,
+              nominalInterestRate: fmt2(FIN.nominalInterestRate),
+              annualPercentageRate: fmt2(FIN.annualPercentageRate),
+            })}<br />
+            * {t('footer:co2Info')}<br />
+            {t('footer:EnvPremium')}<br />
+            {t('footer:images')}
+          </p>
+        </div>
+      </div>
+
+      <div style={{ borderTop: '1px solid var(--md-outline-variant)' }}>
+        <div
+          className="container"
+          style={{ padding: '16px 24px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}
+        >
+          <span className="md-label-sm">{t('footer:copyright', { year })}</span>
+          <button
+            type="button"
+            className="mbtn mbtn--text mbtn--sm"
+            onClick={scrollTop}
+            style={{ padding: '0 4px' }}
+          >
+            {t('footer:up')} ↑
+          </button>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+/**
+ * Inline brand-correct social glyphs. lucide-react dropped the brand marks (facebook/twitter/
+ * instagram) from its `icons` map, so the shared Icon would render nothing — use small inline SVGs.
+ */
+const SocialIcon: React.FunctionComponent<{ name: string }> = ({ name }) => {
+  const common = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'currentColor' as const, 'aria-hidden': true };
+  if (name === 'facebook') {
+    return (<svg {...common}><path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.49-3.91 3.78-3.91 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94Z" /></svg>);
+  }
+  if (name === 'twitter') {
+    return (<svg {...common}><path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.65l-5.21-6.81-5.96 6.81H1.69l7.73-8.84L1.25 2.25h6.82l4.71 6.23 5.46-6.23Zm-1.16 17.52h1.83L7.01 4.13H5.05l12.03 15.64Z" /></svg>);
+  }
+  return (<svg {...common}><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 1.62c-3.15 0-3.5.01-4.74.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71-.06 1.24-.07 1.59-.07 4.74s.01 3.5.07 4.74c.04.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.24.06 1.59.07 4.74.07s3.5-.01 4.74-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.24.07-1.59.07-4.74s-.01-3.5-.07-4.74c-.04-.9-.19-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.24-.06-1.59-.07-4.74-.07Zm0 2.76a5.46 5.46 0 1 1 0 10.92 5.46 5.46 0 0 1 0-10.92Zm0 9a3.54 3.54 0 1 0 0-7.08 3.54 3.54 0 0 0 0 7.08Zm6.95-9.22a1.28 1.28 0 1 1-2.55 0 1.28 1.28 0 0 1 2.55 0Z" /></svg>);
+};
+
+export default Footer;