74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|