initial commit

2026-09-11 02:46:56 +02:00
commit 20b384039c
288 changed files with 46557 additions and 0 deletions
@@ -0,0 +1,73 @@
+import { getDirection, type Locale } from "../LanguageSwitcher";
+
+import { cx } from "./styles";
+import type { NavSurface } from "./types";
+
+/* Exported from Figma assets/eu-en (224:11275) and assets/eu-en - darkBg
+   (238:2325). The emblem is drawn at the prescribed 48x32 on both surfaces;
+   the source files are downscaled copies of the Figma exports. */
+const EMBLEM_SRC: Record<NavSurface, string> = {
+  light: "/assets/eu-flag.png",
+  dark: "/assets/eu-flag-dark.png",
+};
+
+const EMBLEM_INTRINSIC_WIDTH = 192;
+const EMBLEM_INTRINSIC_HEIGHT = 128;
+
+export interface EuBadgeProps {
+  /** "Funded by the European Union", already in the reader's language. */
+  statement: string;
+  /** Alt text for the emblem. Empty when the statement is rendered beside it. */
+  emblemAlt?: string;
+  /** Language of `statement` - drives the font switch and the text direction. */
+  locale: Locale;
+  surface: NavSurface;
+  className?: string;
+}
+
+/**
+ * The mandatory EU visibility lockup: emblem + funding statement.
+ *
+ * The lockup itself is pinned to `dir="ltr"` so the emblem always leads, which
+ * is how the Arabic navigation frame (334:526) draws it; only the statement
+ * carries the reader's own direction. The bar's own mirroring still moves the
+ * whole badge from the top right (English) to the top left (Arabic).
+ *
+ * DEVIATION FROM FIGMA: the design sets the statement in EU reflex blue
+ * (hex 0f2a8e). A raw hex is not permitted in a component here, and there is
+ * no semantic token for a third-party brand colour, so the statement uses
+ * --text-primary. It stays legible on both surfaces and the emblem still
+ * carries the EU colours. Add a tier-2 token if the blue has to come back.
+ */
+export function EuBadge({
+  statement,
+  emblemAlt = "",
+  locale,
+  surface,
+  className,
+}: EuBadgeProps) {
+  return (
+    <div
+      dir="ltr"
+      className={cx("flex shrink-0 items-center gap-2xs", className)}
+    >
+      <img
+        src={EMBLEM_SRC[surface]}
+        alt={emblemAlt}
+        width={EMBLEM_INTRINSIC_WIDTH}
+        height={EMBLEM_INTRINSIC_HEIGHT}
+        loading="eager"
+        decoding="async"
+        draggable={false}
+        className="block h-[32px] w-[48px] shrink-0"
+      />
+      <span
+        lang={locale}
+        dir={getDirection(locale)}
+        className="label-md block w-[96px] text-[var(--text-primary)]"
+      >
+        {statement}
+      </span>
+    </div>
+  );
+}