Illusion/sharper.ly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebuild the site to the Claude Design drafts

Browse Source 
Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the
project's own design system: tier-2 tokens, the published type roles, logical
properties throughout, and both locales.

Surfaces
- The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts
  do; the body previously painted the band colour, so every band was a step
  too light.
- A card is drawn one step off whatever it stands on (#1D1D1B on the ground,
  #141413 inside a band). Components paint --surface-card and a band re-points
  it for its subtree, so a card can never come out the same colour as its band.

Shell
- Nav: translucent ground with a blur, chevrons on group triggers, an accent
  rule under the current section, the drafts' compact dropdown card, and an
  EN | AR toggle in place of the globe menu.
- Footer: the drafts' four-column grid, one-line brand text, Facebook as a
  bordered button, the EU lockup, the implemented-by row and the funding
  disclaimer.

Pages
- Home: hero with counting figures, launch band, three areas of change,
  newsroom, FAQ accordion and the consortium band.
- The nine interior pages rebuilt and then audited section by section against
  their drafts.
- Applications: the three-step application form now posts real submissions to
  the Strapi `application` type, validated server-side and working without
  JavaScript.

Motion
- Every animation in the drafts, as classes in _page-kit/motion.css: staggered
  entrances, scroll-driven reveals, the drifting washes (each page carries its
  own geometry), the sheen, the counting figures and the accordion. The
  drafts' coloured hover glow is deliberately not shipped.

CMS
- New `faq` collection type behind the home page's accordion.
- `role` added to the consortium member component so an editor can supply the
  chip and the deliverable separately.

Content
- No invented figure, date, name or commitment ships: the five-working-day
  reply, the placeholder email and Facebook handle, the sample news, events,
  publications and FAQs, the invented application rules and the TBD counters
  are all withheld pending real content. Figures that survived (3 consortium
  partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec
  2027) are verified against docs/ and the bundled draft copy.

Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20
page/locale URLs render 200 through the built SSR handler, including with the
CMS unreachable; no raw hex or physical-direction utility in components or
routes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Illusion
2026-09-16 20:32:56 +02:00
co-authored by Claude Opus 5
parent 8464c24fb1
commit aedef6daeb
63 changed files with 7276 additions and 1768 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/components/ui/Button/Button.css
+20 -1
View File
@@ -57,7 +57,26 @@
transition:
background-color var(--motion-duration-fast) var(--motion-ease-standard),
border-color var(--motion-duration-fast) var(--motion-ease-standard),
color var(--motion-duration-fast) var(--motion-ease-standard);
color var(--motion-duration-fast) var(--motion-ease-standard),
transform var(--motion-duration-base) var(--motion-ease-entrance);
}
/* The Claude Design drafts lift a button 3px under the pointer and set it
back down on press. Pointer devices only - a touch "hover" would leave the
control raised after the tap - and never while disabled or busy, where the
control must not look live. app.css collapses the transition under
prefers-reduced-motion, so the lift becomes an instant, harmless offset.
The drafts also put a coloured glow behind the lifted button; that is
deliberately not shipped (client decision). */
@media (hover: hover) {
.sh-btn:hover:not(:disabled):not([aria-disabled="true"]):not([data-loading]) {
transform: translateY(-3px);
}
}
.sh-btn:active:not(:disabled):not([aria-disabled="true"]):not([data-loading]) {
transform: none;
}
.sh-btn--block {
apps/web/app/components/ui/Card/CardShell.tsx
+1 -1
View File
@@ -159,7 +159,7 @@ export function CardShell({
className={cx(
"sh-card",
linked && "sh-card--linked",
"relative flex bg-surface-raised text-text-primary",
"relative flex bg-[var(--surface-card)] text-text-primary",
"rounded-surface border border-border-subtle shadow-[var(--elevation-card)]",
className,
)}
apps/web/app/components/ui/EuBadge/EuBadge.tsx
+112
View File
@@ -0,0 +1,112 @@
import { getDirection, type Locale } from "../LanguageSwitcher";
/* Exported from Figma assets/eu-en (224:11275) and assets/eu-en - darkBg
(238:2325). The source files are downscaled copies of the Figma exports. */
const EMBLEM_SRC = {
light: "/assets/eu-flag.png",
dark: "/assets/eu-flag-dark.png",
} as const;
const EMBLEM_INTRINSIC_WIDTH = 192;
const EMBLEM_INTRINSIC_HEIGHT = 128;
/**
* Drawn emblem box per size. "md" is the 48x32 the navigation and the drawer
* use; "sm" is the 36x24 the home hero draws above the wordmark (478:15951).
* Only the emblem changes - see the note on the statement below.
*/
const EMBLEM_BOX = {
md: "h-[32px] w-[48px]",
sm: "h-[24px] w-[36px]",
} as const;
export type EuBadgeSize = keyof typeof EMBLEM_BOX;
/** Which tier-2 surface the badge is sitting on. `:root` is the dark one. */
export type EuBadgeSurface = keyof typeof EMBLEM_SRC;
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: EuBadgeSurface;
/** "md" (48x32) by default; "sm" (36x24) for the hero lockup. */
size?: EuBadgeSize;
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. A mirroring ancestor still moves the
* whole badge from the inline start to the inline end in Arabic.
*
* DEVIATION FROM FIGMA (colour): 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.
*
* DEVIATION FROM FIGMA (type): the hero badge sets the statement at 10px. The
* type scale has no 10px role and a raw font-size is not permitted, so both
* sizes render the statement at `label-md` (12px). The lockup is then a little
* taller than the 24px emblem at "sm"; it is also more legible, which EU
* visibility guidance asks for. Add a tier-2 role if 10px is required.
*/
export function EuBadge({
statement,
emblemAlt = "",
locale,
surface,
size = "md",
className,
}: EuBadgeProps) {
return (
<div
dir="ltr"
className={["flex shrink-0 items-center gap-2xs", className]
.filter(Boolean)
.join(" ")}
>
<img
src={EMBLEM_SRC[surface]}
alt={emblemAlt}
width={EMBLEM_INTRINSIC_WIDTH}
height={EMBLEM_INTRINSIC_HEIGHT}
loading="eager"
decoding="async"
draggable={false}
className={`block shrink-0 ${EMBLEM_BOX[size]}`}
/>
<span
lang={locale}
dir={getDirection(locale)}
className="label-md block w-[96px] text-[var(--text-primary)]"
>
{statement}
</span>
</div>
);
}
export default EuBadge;
/* ---------------------------------------------------------------------------
USAGE
---------------------------------------------------------------------------
// In the mobile drawer, on the dark surface:
<EuBadge statement={t("site.euStatement")} locale="en" surface="dark" />
// Above the home hero wordmark, at the smaller emblem size:
<EuBadge
size="sm"
statement={t("site.euStatement")}
locale={locale}
surface="dark"
/>
------------------------------------------------------------------------ */
apps/web/app/components/ui/EuBadge/index.ts
+2
View File
@@ -0,0 +1,2 @@
export { EuBadge, default } from "./EuBadge";
export type { EuBadgeProps, EuBadgeSize, EuBadgeSurface } from "./EuBadge";
apps/web/app/components/ui/Footer/Footer.css
+40
View File
@@ -0,0 +1,40 @@
/* ============================================================================
FOOTER - the sitemap link's hover
----------------------------------------------------------------------------
The design draft moves a hovered footer link along ONE axis and eases it:
transition: color .2s ease, transform .25s ease;
:hover { color: #4DAA93; transform: translateX(4px); }
Two reasons this is CSS rather than Tailwind utilities:
1. `translate-x-*` compiles to the two-value form
`translate: var(--tw-translate-x) var(--tw-translate-y)`, so whatever Y
translate happens to be in scope rides along and the link drifts
diagonally. `translate: 4px 0` pins the second axis at zero.
2. The movement has to be in the transition list. A `transition-[color]`
utility animates the colour and snaps the offset.
The direction is physical because `translate` has no logical form, so the
RTL rule mirrors it - the link always moves toward the reading edge.
========================================================================= */
@layer theme, base, components, utilities;
@layer components {
.sh-footer-link {
transition:
color var(--motion-duration-fast) var(--motion-ease-standard),
translate var(--motion-duration-base) var(--motion-ease-standard);
}
@media (hover: hover) {
.sh-footer-link:hover {
translate: 4px 0;
}
[dir="rtl"] .sh-footer-link:hover {
translate: -4px 0;
}
}
}
apps/web/app/components/ui/Footer/Footer.tsx
+83 -102
View File
@@ -36,12 +36,14 @@ import type {
import {
DEFAULT_FOOTER_COPY,
DEFAULT_FOOTER_PARTNERS,
DEFAULT_FOOTER_SOCIAL_LINKS,
defaultFooterSocialLinks,
FOOTER_ASSETS,
FOOTER_EU_EMBLEM_SIZE,
FOOTER_WORDMARK_SIZE,
defaultFooterLinkGroups,
} from "./content";
import "./Footer.css";
import { EuBadge } from "../EuBadge";
import { FooterSocialIcon } from "./FooterSocialIcon";
const cx = (...parts: readonly (string | false | undefined)[]): string =>
@@ -69,18 +71,20 @@ const TRANSITION =
/** Body/Large Bold links - 18/28, as the footer frame sets them. */
const LINK_CLASS = cx(
FOCUS_RING,
TRANSITION,
"body-lg-bold inline-block text-[var(--text-primary)]",
"hover:text-[var(--text-link)] hover:underline underline-offset-4",
/* Colour AND the 4px nudge, both eased, both in ./Footer.css - see the note
there on why this is not a `translate-x` utility. */
"sh-footer-link",
"body-md-bold inline-block no-underline text-[var(--text-primary)]",
"hover:text-[var(--text-accent)]",
);
/** Label/Medium - the "implemented by" label (figma 228:3035). */
const LABEL_CLASS = "label-md uppercase";
/** Body/Small Bold - the sitemap column headings (figma 140:7823 / 140:7834).
/** The drafts set the column headings as a small uppercase label.
`--text-tertiary` is already remapped to a readable step on the light
surface, so the same token is correct on both. */
const GROUP_HEADING_CLASS = "body-sm-bold uppercase text-[var(--text-tertiary)]";
const GROUP_HEADING_CLASS = "label-md uppercase text-[var(--text-tertiary)]";
/**
* Internal links go through the router so the footer navigates client-side;
@@ -106,7 +110,7 @@ export function Footer({
locale = "en",
dir,
linkGroups,
socialLinks = DEFAULT_FOOTER_SOCIAL_LINKS,
socialLinks,
partners = DEFAULT_FOOTER_PARTNERS,
copy: copyOverrides,
homeHref,
@@ -118,6 +122,9 @@ export function Footer({
// would blank the default, so only defined overrides are applied.
const copy: FooterCopy = { ...DEFAULT_FOOTER_COPY[locale], ...definedOnly(copyOverrides) };
const groups = linkGroups ?? defaultFooterLinkGroups(locale);
/* `[]` from a caller hides the row deliberately; `undefined` means "nobody
said", so the project's own confirmed channels stand in. */
const social = socialLinks ?? defaultFooterSocialLinks(locale);
const home = homeHref ?? `/${locale}`;
return (
@@ -126,26 +133,17 @@ export function Footer({
dir={dir}
data-surface={surface}
className={cx(
// data-surface sets the palette, but the frame puts the footer on its
// own ground (base/black on dark) with a rule separating it from the
// page, so those two are stated here rather than inherited.
"w-full border-t border-[var(--border-default)] bg-[var(--surface-footer)]",
/* The drafts stand the footer on its own ground (#141413) under a
hairline, rather than letting it inherit the page surface. */
"w-full border-t border-[var(--border-subtle)] bg-[var(--surface-footer)]",
"px-lg pb-2xl pt-[var(--layout-section-gap)] md:px-xl",
className,
)}
>
<div className="mx-auto flex w-full max-w-[var(--layout-content-max)] flex-col gap-2xl">
{/* ---- brand + sitemap (figma 140:7684 / 140:8686) ---------------- */}
<div className="flex flex-col gap-2xl lg:flex-row lg:gap-3xl">
{/* --- brand column (figma 140:7685 / 140:8687) ----------------- */}
<div
className={cx(
"flex flex-col gap-md",
// the divider sits on the inline-end of the brand block, which is
// the left edge once <html dir="rtl"> mirrors the row.
"lg:w-[345px] lg:shrink-0 lg:border-e lg:border-[var(--border-subtle)] lg:pe-2xl",
)}
>
{/* ---- brand column + sitemap --------------------------------- */}
<div className="grid gap-xl lg:grid-cols-[minmax(11.875rem,1fr)_2fr]">
<div className="flex flex-col items-start gap-md">
<Link to={home} aria-label={copy.homeLabel} className={cx(FOCUS_RING, "w-fit")}>
<img
src={isDark ? FOOTER_ASSETS.wordmarkInverse : FOOTER_ASSETS.wordmark}
@@ -158,46 +156,43 @@ export function Footer({
/>
</Link>
<p className="body-sm text-[var(--text-secondary)]">{copy.tagline}</p>
<p className="body-sm max-w-[46ch] text-[var(--text-primary)]">
{copy.description}
{/* One line: the full name and the dates the project runs. */}
<p className="body-sm max-w-[13.75rem] text-[var(--text-secondary)]">
{copy.brandLine}
</p>
{/* --- EU visibility (figma 140:7688 / 238:2325) -------------- */}
<div className="flex items-center gap-2xs pt-2xs">
<img
src={isDark ? FOOTER_ASSETS.euEmblemInverse : FOOTER_ASSETS.euEmblem}
alt={copy.euEmblemAlt}
width={FOOTER_EU_EMBLEM_SIZE.width}
height={FOOTER_EU_EMBLEM_SIZE.height}
className="block h-[32px] w-[48px] shrink-0"
loading="lazy"
decoding="async"
/>
<p className="body-sm-bold max-w-[24ch] text-[var(--text-primary)]">
{copy.euStatement}
</p>
</div>
{/* The draft draws each channel as a bordered button with its
glyph and a written label, not as a bare icon. */}
{social.length > 0 && (
<>
<h2 className="sr-only">{copy.socialHeading}</h2>
<ul className="flex flex-wrap gap-xs">
{social.map((link) => (
<li key={link.platform}>
<SocialButton link={link} />
</li>
))}
</ul>
</>
)}
{socialLinks.length > 0 && <SocialRow copy={copy} links={socialLinks} />}
{/* EU visibility, through the shared lockup the hero uses. */}
<EuBadge
statement={copy.euStatement}
locale={locale}
surface={surface}
size="sm"
/>
</div>
{/* --- sitemap columns (figma 380:12402) ------------------------ */}
<nav aria-label={copy.navLabel} className="flex flex-1 flex-col gap-2xl sm:flex-row sm:gap-0">
{groups.map((group, index) => (
<div
key={group.id}
className={cx(
"flex min-w-0 flex-col gap-md sm:flex-1",
// the rule sits on the inline-start of every column but the
// first, so it mirrors with the row under dir="rtl".
index > 0 && "sm:border-s sm:border-[var(--border-subtle)] sm:ps-xl",
index < groups.length - 1 && "sm:pe-xl",
)}
>
<nav
aria-label={copy.navLabel}
className="grid gap-xl sm:grid-cols-2 lg:grid-cols-3"
>
{groups.map((group) => (
<div key={group.id} className="flex min-w-0 flex-col gap-sm">
<h2 className={GROUP_HEADING_CLASS}>{group.heading}</h2>
<ul className="flex flex-col gap-lg">
<ul className="flex flex-col gap-sm">
{group.links.map((link: FooterLink, linkIndex: number) => (
<li key={`${link.href}-${linkIndex}`}>
<FooterNavLink link={link} className={LINK_CLASS} />
@@ -209,19 +204,15 @@ export function Footer({
</nav>
</div>
{/* ---- implemented-by bar (figma 228:3062 / 140:8710) ------------- */}
{/* ---- implemented by ------------------------------------------ */}
{partners.length > 0 && (
<div className="flex flex-col gap-lg border-t border-[var(--border-default)] pt-lg sm:flex-row sm:items-center sm:justify-between">
{/* Figma paints this label background/accent on dark and
text/secondary on light; --text-accent is the readable green. */}
<p
className={cx(
LABEL_CLASS,
"text-[var(--text-secondary)] surface-dark:text-[var(--text-accent)]",
)}
>
<div className="flex flex-wrap items-center justify-between gap-lg border-t border-[var(--border-subtle)] pt-lg">
<p className={cx(LABEL_CLASS, "text-[var(--text-secondary)]")}>
{copy.implementedByLabel}
</p>
{/* The draft prints the three names in bordered chips because it
cannot embed artwork. The real marks are shown instead - they
are contractual visibility and must not be substituted. */}
<ul className="flex flex-wrap items-center gap-lg">
{partners.map((partner) => (
<li key={partner.id} className="flex items-center">
@@ -231,6 +222,11 @@ export function Footer({
</ul>
</div>
)}
{/* ---- the funding disclaimer closes the footer ----------------- */}
<p className="body-sm max-w-[48.75rem] text-[var(--text-tertiary)]">
{copy.disclaimer}
</p>
</div>
</footer>
);
@@ -270,44 +266,29 @@ function PartnerMark({ isDark, partner }: { isDark: boolean; partner: FooterPart
}
/* ---------------------------------------------------------------------------
Social row. Not in the published frames - the draft copy asks for it, so it
closes the brand column. The negative inline-start margin cancels the icon
padding so the glyphs optically align with the text above them.
One social channel, drawn as the draft's bordered button: the glyph, then
the written label ("Follow us on Facebook"), so the control names itself
instead of relying on an icon alone.
------------------------------------------------------------------------ */
function SocialRow({
copy,
links,
}: {
copy: FooterCopy;
links: readonly FooterSocialLink[];
}) {
function SocialButton({ link }: { link: FooterSocialLink }) {
return (
<div className="pt-2xs">
<h2 className="sr-only">{copy.socialHeading}</h2>
<ul className="-ms-2xs flex flex-wrap items-center gap-2xs">
{links.map((link) => (
<li key={link.platform}>
<a
href={link.href}
aria-label={link.label}
target="_blank"
rel="noopener noreferrer"
className={cx(
FOCUS_RING,
TRANSITION,
"inline-flex items-center justify-center p-2xs",
"text-[var(--text-secondary)] hover:text-[var(--text-link)]",
)}
>
<FooterSocialIcon
platform={link.platform}
className="h-[var(--control-icon-size)] w-[var(--control-icon-size)]"
/>
</a>
</li>
))}
</ul>
</div>
<a
href={link.href}
target="_blank"
rel="noopener noreferrer"
className={cx(
FOCUS_RING,
TRANSITION,
"inline-flex items-center gap-xs rounded-control no-underline",
"border border-[var(--border-subtle)] py-xs ps-sm pe-md",
"text-[var(--text-primary)]",
"hover:border-[var(--border-accent)] hover:bg-[var(--surface-page)]",
"hover:text-[var(--text-accent)]",
)}
>
<FooterSocialIcon platform={link.platform} className="h-[17px] w-[17px]" />
<span className="body-sm-bold">{link.label}</span>
</a>
);
}
apps/web/app/components/ui/Footer/content.ts
+37 -7
View File
@@ -8,6 +8,7 @@
========================================================================= */
import { ROUTE_SLUGS } from "~/lib/route-slugs";
import { SITE_FACEBOOK_URL } from "~/lib/site-links";
import type {
FooterCopy,
@@ -53,23 +54,25 @@ const path = (locale: FooterLocale, slug: string): string => `/${locale}/${slug}
------------------------------------------------------------------------ */
export const DEFAULT_FOOTER_COPY: Readonly<Record<FooterLocale, FooterCopy>> = {
en: {
tagline: "Shared Action on Rule of Law Progress – Exit Route",
description:
"A nationwide initiative supporting Libya’s civil society, local institutions and communities in advancing justice, accountability and good governance. Running from December 2025 to December 2027.",
brandLine:
"Shared Action on Rule of Law Progress — Exit Route. December 2025 – December 2027.",
euStatement: "This project is funded by the European Union",
euEmblemAlt: "Emblem of the European Union",
implementedByLabel: "Implemented by",
disclaimer:
"This website was produced with the financial support of the European Union. Its contents are the sole responsibility of the SHARP-ER consortium and do not necessarily reflect the views of the European Union.",
socialHeading: "Follow SHARP-ER",
homeLabel: "SHARP-ER — home",
navLabel: "Site sections",
},
ar: {
tagline: "العمل المشترك لتعزيز سيادة القانون – مسار الخروج",
description:
"مبادرة وطنية تدعم المجتمع المدني والمؤسسات المحلية والمجتمعات الليبية في تعزيز العدالة والمساءلة والحوكمة الرشيدة. يمتد المشروع من ديسمبر 2025 إلى ديسمبر 2027.",
brandLine:
"العمل المشترك لتعزيز سيادة القانون – مسار الخروج. ديسمبر 2025 – ديسمبر 2027.",
euStatement: "هذا المشروع ممول من الاتحاد الأوروبي",
euEmblemAlt: "شعار الاتحاد الأوروبي",
implementedByLabel: "الجهات المنفّذة",
disclaimer:
"أُنتج هذا الموقع الإلكتروني بدعم مالي من الاتحاد الأوروبي. ومحتوياته هي مسؤولية ائتلاف SHARP-ER وحده، ولا تعكس بالضرورة وجهات نظر الاتحاد الأوروبي.",
socialHeading: "تابعوا SHARP-ER",
homeLabel: "SHARP-ER — الصفحة الرئيسية",
navLabel: "أقسام الموقع",
@@ -199,4 +202,31 @@ export const DEFAULT_FOOTER_PARTNERS: readonly FooterPartner[] = [
Real profiles arrive through the `socialLinks` prop (Strapi); the footer's
`links.length > 0` guard drops the whole row until they do.
------------------------------------------------------------------------ */
export const DEFAULT_FOOTER_SOCIAL_LINKS: readonly FooterSocialLink[] = [];
export const DEFAULT_FOOTER_SOCIAL_LINKS_BY_LOCALE: Readonly<
Record<FooterLocale, readonly FooterSocialLink[]>
> = {
en: [
{
platform: "facebook",
label: "Follow us on Facebook",
href: SITE_FACEBOOK_URL,
},
],
ar: [
{
platform: "facebook",
label: "تابعونا على فيسبوك",
href: SITE_FACEBOOK_URL,
},
],
};
/** The English row, kept as the old name so the barrel's surface is unchanged. */
export const DEFAULT_FOOTER_SOCIAL_LINKS: readonly FooterSocialLink[] =
DEFAULT_FOOTER_SOCIAL_LINKS_BY_LOCALE.en;
export function defaultFooterSocialLinks(
locale: FooterLocale,
): readonly FooterSocialLink[] {
return DEFAULT_FOOTER_SOCIAL_LINKS_BY_LOCALE[locale];
}
apps/web/app/components/ui/Footer/types.ts
+10 -4
View File
@@ -67,16 +67,22 @@ export interface FooterPartner {
/** Every string the footer renders that is not a link label. */
export interface FooterCopy {
/** "Shared Action on Rule of Law Progress - Exit Route" */
readonly tagline: string;
/** Short programme description under the wordmark. */
readonly description: string;
/**
* The single line under the wordmark: the full project name and the dates
* it runs, exactly as the design draft sets it.
*/
readonly brandLine: string;
/** EU funding statement rendered next to the emblem. */
readonly euStatement: string;
/** Alt text for the EU emblem image. */
readonly euEmblemAlt: string;
/** Label above the consortium logos. */
readonly implementedByLabel: string;
/**
* The EU funding disclaimer that closes the footer. Contractual visibility
* wording, carried verbatim from the approved design draft.
*/
readonly disclaimer: string;
/** Visually hidden heading for the social row. */
readonly socialHeading: string;
/** Accessible name of the wordmark link. */
apps/web/app/components/ui/LanguageSwitcher/LanguageMenu.tsx
+273
View File
@@ -0,0 +1,273 @@
import {
useCallback,
useEffect,
useId,
useRef,
useState,
type FocusEvent as ReactFocusEvent,
type KeyboardEvent as ReactKeyboardEvent,
} from "react";
import { Link } from "react-router";
import "./LanguageSwitcher.css";
import {
buildLocalizedHref,
getDirection,
LOCALE_ENDONYM,
LOCALES,
type Locale,
} from "./locale-path";
/* Reinforces the global :focus-visible rule in app.css with the same tier-2
focus tokens, so the ring is visible even if a caller overrides `outline`. */
const FOCUS_RING =
"focus-visible:outline-[color:var(--focus-ring-color)] " +
"focus-visible:outline-[length:var(--focus-ring-width)] " +
"focus-visible:outline-offset-[var(--focus-ring-offset)]";
const TRANSITION =
"transition-colors duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]";
type OptionPosition = "first" | "last";
export interface LanguageMenuProps {
/** The locale the reader is currently on. */
locale: Locale;
/** Current pathname, e.g. "/en/news-and-updates". */
pathname: string;
/** Query string to carry across the switch. Usually `location.search`. */
search?: string;
/** Fragment to carry across the switch. Usually `location.hash`. */
hash?: string;
/**
* Accessible name of the globe, in the reader's language ("Language"). It is
* required because the globe carries no text of its own.
*/
label: string;
/** Navigate with a full document request instead of a client transition. */
reloadDocument?: boolean;
className?: string;
}
/**
* The navigation's language control: the globe (figma 478:16381) as a button
* that opens a short list of the site's languages, each linking to the page the
* reader is on under that locale, with the query string and fragment kept.
*
* Not drawn in Figma - the design shows the globe alone - so the list is built
* from the tier-2 surface, border and elevation tokens a popover uses, and
* hangs from the globe's inline-end edge so it opens inward in both directions.
*
* A disclosure rather than an ARIA menu: the entries are ordinary links and are
* announced and followed as links. Each carries its own lang/hrefLang and its
* label its own dir, so a screen reader switches voice for "العربية". The
* current language is marked with aria-current and set in bold, so the state is
* not carried by colour alone. ArrowDown/ArrowUp open the list and move through it, Escape closes it
* and returns focus to the globe, and an outside press or focus leaving closes
* it. Focus is never trapped.
*/
export function LanguageMenu({
locale,
pathname,
search,
hash,
label,
reloadDocument = false,
className,
}: LanguageMenuProps) {
const [open, setOpen] = useState(false);
const rootRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
const pendingFocus = useRef<OptionPosition | null>(null);
const rawId = useId();
const listId = `sharper-language-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
const options = useCallback(
(): HTMLElement[] =>
Array.from(
rootRef.current?.querySelectorAll<HTMLElement>("[data-language-option]") ??
[],
),
[],
);
const focusOption = useCallback(
(position: OptionPosition) => {
const all = options();
(position === "first" ? all[0] : all[all.length - 1])?.focus();
},
[options],
);
const close = useCallback(() => {
pendingFocus.current = null;
setOpen(false);
}, []);
/* Outside press. pointerdown rather than click so the list is already gone
by the time the click lands on whatever is underneath. */
useEffect(() => {
if (!open) return;
const handlePointerDown = (event: PointerEvent) => {
if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
};
document.addEventListener("pointerdown", handlePointerDown);
return () => document.removeEventListener("pointerdown", handlePointerDown);
}, [open]);
/* A keyboard request to open and step into the list can only be honoured
once the list has rendered. */
useEffect(() => {
const position = pendingFocus.current;
if (!open || position === null) return;
pendingFocus.current = null;
focusOption(position);
}, [open, focusOption]);
const openAndFocus = (position: OptionPosition) => {
if (open) {
focusOption(position);
return;
}
pendingFocus.current = position;
setOpen(true);
};
const handleButtonKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
if (event.key === "ArrowDown") {
event.preventDefault();
openAndFocus("first");
} else if (event.key === "ArrowUp") {
event.preventDefault();
openAndFocus("last");
}
};
const handleOptionKeyDown = (event: ReactKeyboardEvent<HTMLAnchorElement>) => {
const all = options();
const index = all.indexOf(event.currentTarget);
const moveTo = (to: number) => all[(to + all.length) % all.length]?.focus();
switch (event.key) {
case "ArrowDown":
event.preventDefault();
moveTo(index + 1);
break;
case "ArrowUp":
event.preventDefault();
moveTo(index - 1);
break;
case "Home":
event.preventDefault();
moveTo(0);
break;
case "End":
event.preventDefault();
moveTo(all.length - 1);
break;
default:
break;
}
};
const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
if (event.key !== "Escape" || !open) return;
event.preventDefault();
close();
buttonRef.current?.focus();
};
/* React's onBlur is focusout, so it fires for descendants too. */
const handleBlur = (event: ReactFocusEvent<HTMLDivElement>) => {
const next = event.relatedTarget as Node | null;
if (!next || !rootRef.current?.contains(next)) close();
};
return (
<div
ref={rootRef}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
className={["relative", className].filter(Boolean).join(" ")}
>
<button
ref={buttonRef}
type="button"
aria-expanded={open}
aria-controls={listId}
aria-label={label}
title={label}
onClick={() => (open ? close() : setOpen(true))}
onKeyDown={handleButtonKeyDown}
className={[
"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-control",
"text-[var(--text-primary)] hover:text-[var(--text-accent)]",
"aria-expanded:text-[var(--text-accent)]",
TRANSITION,
FOCUS_RING,
].join(" ")}
>
<span aria-hidden="true" className="sh-language-globe" />
</button>
<ul
id={listId}
hidden={!open}
className={[
"absolute end-0 top-full z-[var(--layer-dropdown)] mt-sm",
"flex min-w-[10rem] flex-col gap-2xs p-2xs",
"rounded-control border border-[var(--border-subtle)]",
"bg-[var(--surface-raised)] shadow-[var(--elevation-popover)]",
].join(" ")}
>
{LOCALES.map((option) => {
const current = option === locale;
return (
<li key={option}>
<Link
to={buildLocalizedHref(pathname, option, { search, hash })}
reloadDocument={reloadDocument}
hrefLang={option}
lang={option}
aria-current={current ? "true" : undefined}
data-language-option={option}
onClick={close}
onKeyDown={handleOptionKeyDown}
className={[
current ? "body-md-bold" : "body-md",
"block rounded-control px-sm py-xs text-start no-underline",
"text-[var(--text-primary)] hover:bg-[var(--surface-muted)]",
"aria-[current=true]:text-[var(--text-accent)]",
TRANSITION,
FOCUS_RING,
].join(" ")}
>
{/* The label carries its own direction; the row does not, so
both names line up on the page's inline-start edge instead
of each hugging the side its own script reads from. */}
<span dir={getDirection(option)}>{LOCALE_ENDONYM[option]}</span>
</Link>
</li>
);
})}
</ul>
</div>
);
}
export default LanguageMenu;
/* ---------------------------------------------------------------------------
USAGE
---------------------------------------------------------------------------
// In the navigation bar, wired from the router's location:
const { pathname, search, hash } = useLocation();
<LanguageMenu
label={strings.languageMenuLabel}
locale={locale}
pathname={pathname}
search={search}
hash={hash}
/>
------------------------------------------------------------------------ */
apps/web/app/components/ui/LanguageSwitcher/LanguageSwitcher.css
+35
View File
@@ -0,0 +1,35 @@
/* ============================================================================
LANGUAGE SWITCHER - figma `globe` 478:16381 (navigation 20:236)
----------------------------------------------------------------------------
The navigation now carries the language control as a bare 24x24 globe in the
Actions slot, replacing the "AR" / "EN" pill that used to sit next to the EU
badge. The exported asset fills its path with a hard-coded #1D1D1B, which
would be invisible on the dark surface, so it is applied as a mask over
`currentColor` - the same technique as `.sh-arrow-icon` and `.sh-card-icon`.
That keeps the exact exported geometry while the colour comes from whichever
semantic token the bar has in force.
GEOMETRY, straight from Figma: a 24x24 box (`--control-icon-size`) with the
glyph filling it edge to edge. The globe is radially symmetric, so unlike the
arrow it needs no RTL mirroring.
========================================================================= */
@layer theme, base, components, utilities;
@layer components {
.sh-language-globe {
display: block;
flex: none;
inline-size: var(--control-icon-size);
block-size: var(--control-icon-size);
background-color: currentColor;
-webkit-mask-image: url("/assets/icons/globe-solid.svg");
mask-image: url("/assets/icons/globe-solid.svg");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
}
apps/web/app/components/ui/LanguageSwitcher/LanguageSwitcher.tsx
+3 -8
View File
@@ -42,7 +42,7 @@ export interface LanguageSwitcherProps {
* document. Turn it on if a page needs the server to re-render first.
*/
reloadDocument?: boolean;
/** "sm" for the desktop bar, "md" for a 44px touch target in the drawer. */
/** "sm" for a compact pill, "md" for a 44px touch target in the drawer. */
size?: LanguageSwitcherSize;
className?: string;
}
@@ -52,9 +52,8 @@ export interface LanguageSwitcherProps {
* ("AR" while reading English, "EN" while reading Arabic) and links to the
* same page under that locale, preserving the rest of the path.
*
* The Figma navigation has no language switcher - a gap recorded in
* docs/SHARP-ER_Website Recommendations.docx - so this is designed to sit in
* the existing bar: label-md on a pill outline, matching the EU badge height.
* The mobile drawer uses this, where a spelled-out target is clearer than an
* icon. The desktop bar uses <LanguageMenu />, the globe with a dropdown.
*/
export function LanguageSwitcher({
locale,
@@ -114,8 +113,4 @@ export default LanguageSwitcher;
// Force a document navigation (server re-renders <html lang>/<html dir>):
<LanguageSwitcher locale={locale} pathname={pathname} reloadDocument />
// Wired from a route, using the router's own location:
const { pathname, search, hash } = useLocation();
<LanguageSwitcher locale={locale} pathname={pathname} search={search} hash={hash} />
------------------------------------------------------------------------ */
apps/web/app/components/ui/LanguageSwitcher/LanguageToggle.tsx
+119
View File
@@ -0,0 +1,119 @@
import { Link } from "react-router";
import "./LanguageSwitcher.css";
import {
getCounterpartLocale,
getCounterpartPath,
getDirection,
LOCALE_ENDONYM,
LOCALE_SHORT_LABEL,
type Locale,
} from "./locale-path";
/* Reinforces the global :focus-visible rule in app.css with the same tier-2
focus tokens, so the ring is visible even if a caller overrides `outline`. */
const FOCUS_RING =
"focus-visible:outline-[color:var(--focus-ring-color)] " +
"focus-visible:outline-[length:var(--focus-ring-width)] " +
"focus-visible:outline-offset-[var(--focus-ring-offset)]";
export interface LanguageToggleProps {
/** The locale the reader is currently on. */
locale: Locale;
/** Current pathname, e.g. "/en/news-and-updates". */
pathname: string;
/** Query string to carry across the switch. Usually `location.search`. */
search?: string;
/** Fragment to carry across the switch. Usually `location.hash`. */
hash?: string;
/** Accessible name of the pair ("Language"), in the reader's language. */
label: string;
/** Navigate with a full document request instead of a client transition. */
reloadDocument?: boolean;
className?: string;
}
/**
* Both languages, side by side: the globe, the current locale in an accent
* chip, and the other locale as a link to the same page under that locale -
* the redesign's nav control, replacing the globe-plus-dropdown on the desktop
* bar.
*
* One tap to switch and no state to open, which is why the draft prefers it;
* the drawer still uses <LanguageSwitcher /> and <LanguageMenu /> remains for
* anywhere a list of more than two languages is needed.
*
* The current language is marked with `aria-current`, not by colour alone. The
* link carries its own lang/hrefLang/dir and is named with the target
* language's endonym ("العربية"), so a screen reader switches voice for it
* while the visible "AR" stays a two-letter code.
*/
export function LanguageToggle({
locale,
pathname,
search,
hash,
label,
reloadDocument = false,
className,
}: LanguageToggleProps) {
const target = getCounterpartLocale(locale);
const href = getCounterpartPath(pathname, locale, { search, hash });
return (
<div
role="group"
aria-label={label}
className={[
"flex shrink-0 items-center gap-xs text-[var(--text-secondary)]",
className,
]
.filter(Boolean)
.join(" ")}
>
<span aria-hidden="true" className="sh-language-globe" />
<span className="flex items-center">
<span
aria-current="true"
lang={locale}
dir={getDirection(locale)}
className="label-md rounded-control bg-[var(--surface-accent)] px-xs py-2xs text-[var(--text-on-accent)]"
>
{LOCALE_SHORT_LABEL[locale]}
</span>
<Link
to={href}
reloadDocument={reloadDocument}
hrefLang={target}
lang={target}
dir={getDirection(target)}
aria-label={LOCALE_ENDONYM[target]}
title={LOCALE_ENDONYM[target]}
data-language-switcher={target}
className={[
"label-md rounded-control px-xs py-2xs no-underline",
"text-[var(--text-secondary)]",
"transition-colors duration-[var(--motion-duration-fast)]",
"ease-[var(--motion-ease-standard)]",
"hover:text-[var(--text-primary)]",
FOCUS_RING,
].join(" ")}
>
<span aria-hidden="true">{LOCALE_SHORT_LABEL[target]}</span>
</Link>
</span>
</div>
);
}
export default LanguageToggle;
/* ---------------------------------------------------------------------------
USAGE
---------------------------------------------------------------------------
// Reading English at /en/news-and-updates -> "EN" chipped, "AR" links to
// /ar/news-and-updates.
<LanguageToggle locale="en" pathname="/en/news-and-updates" label="Language" />
------------------------------------------------------------------------ */
apps/web/app/components/ui/LanguageSwitcher/index.ts
+4
View File
@@ -3,6 +3,10 @@ export type {
LanguageSwitcherProps,
LanguageSwitcherSize,
} from "./LanguageSwitcher";
export { LanguageMenu } from "./LanguageMenu";
export type { LanguageMenuProps } from "./LanguageMenu";
export { LanguageToggle } from "./LanguageToggle";
export type { LanguageToggleProps } from "./LanguageToggle";
export {
buildLocalizedHref,
apps/web/app/components/ui/Navigation/DesktopNav.tsx
+264 -165
View File
@@ -18,9 +18,50 @@ import { isNavGroup, type NavItem, type NavigationStrings } from "./types";
/* The trigger row and the column row MUST use the same gap: the columns are
width-matched to their triggers, so an identical gap is what makes every
column line up under its own heading in both directions. */
/* The draft marks a group trigger with a chevron and each menu entry with a
forward arrow. Both are decorative: the label beside them carries the name. */
function Chevron() {
return (
<svg
width="11"
height="11"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
className="shrink-0"
>
<path d="M5 9l7 7 7-7" />
</svg>
);
}
function MenuArrow() {
return (
<svg
width="15"
height="15"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
/* Mirrors with the page: the arrow points at the reading edge. */
className="shrink-0 rtl:-scale-x-100"
>
<path d="M5 12h13M12.5 6.5L18 12l-5.5 5.5" />
</svg>
);
}
const ROW_GAP = "gap-2xl";
/** Grace period before a pointer leaving the bar closes the mega menu. */
/** Grace period before a pointer leaving the bar closes the open group. */
const CLOSE_DELAY_MS = 160;
export interface DesktopNavProps {
@@ -36,12 +77,22 @@ export interface DesktopNavProps {
type ColumnPosition = "first" | "last";
/**
* Desktop navigation with the Figma mega menu (317:6063): opening reveals every
* group's children at once, each column sitting directly under its own trigger.
* Desktop navigation. Every group is a disclosure: hovering its trigger, or
* opening it from the keyboard, reveals that group's links - and only that
* group's - in a column directly under its own trigger.
*
* Opens on hover and on keyboard focus, closes on Escape, on outside click and
* when focus leaves the bar. Tab is deliberately untouched, so focus is never
* trapped; the arrow keys add direct movement on top of it.
* DEVIATION FROM FIGMA: the mega menu (317:6063) reveals every group's column
* at once. The designer has since asked for only the hovered group to open, so
* the panel keeps the Figma column geometry - each column under its trigger, on
* the bar's own surface - but shows one column at a time, on a backdrop as wide
* as the row of items rather than the whole window.
*
* Keyboard follows the disclosure-navigation pattern: a trigger does not open
* on focus; Enter, Space and ArrowDown open it. The columns share one backdrop,
* so they come after the whole trigger row in the DOM; Tab is bridged to match
* what the reader sees - from an open trigger it steps into that column, and
* from the column's last link it moves on to the next trigger. Escape, an
* outside press and focus leaving the bar all close it. Focus is never trapped.
*/
export function DesktopNav({
items,
@@ -50,12 +101,16 @@ export function DesktopNav({
direction,
className,
}: DesktopNavProps) {
const [open, setOpen] = useState(false);
/** The one group whose column is showing, or null when nothing is open. */
const [openGroup, setOpenGroup] = useState<string | null>(null);
const navRef = useRef<HTMLElement>(null);
const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
const pendingFocus = useRef<{ groupId: string; position: ColumnPosition } | null>(
null,
);
/* How the last press on a trigger began, so a mouse click does not close the
column that hovering the same trigger has just opened. */
const lastPointerType = useRef<string | null>(null);
const rawId = useId();
const baseId = `sharper-nav-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
@@ -71,44 +126,27 @@ export function DesktopNav({
}
}, []);
const openMega = useCallback(() => {
clearCloseTimer();
setOpen(true);
}, [clearCloseTimer]);
const showGroup = useCallback(
(groupId: string) => {
clearCloseTimer();
setOpenGroup(groupId);
},
[clearCloseTimer],
);
const closeMega = useCallback(() => {
const closeGroup = useCallback(() => {
clearCloseTimer();
pendingFocus.current = null;
setOpen(false);
setOpenGroup(null);
}, [clearCloseTimer]);
const scheduleClose = useCallback(() => {
clearCloseTimer();
closeTimer.current = setTimeout(() => setOpen(false), CLOSE_DELAY_MS);
closeTimer.current = setTimeout(() => setOpenGroup(null), CLOSE_DELAY_MS);
}, [clearCloseTimer]);
useEffect(() => clearCloseTimer, [clearCloseTimer]);
/* Outside click. pointerdown rather than click so the menu is already gone
by the time the click lands on whatever is underneath. */
useEffect(() => {
if (!open) return;
const handlePointerDown = (event: PointerEvent) => {
if (!navRef.current?.contains(event.target as Node)) setOpen(false);
};
document.addEventListener("pointerdown", handlePointerDown);
return () => document.removeEventListener("pointerdown", handlePointerDown);
}, [open]);
/* A keyboard request to open and step into a column can only be honoured
once the column has actually rendered. */
useEffect(() => {
if (!open) return;
const target = pendingFocus.current;
pendingFocus.current = null;
if (target) focusInColumn(target.groupId, target.position);
}, [open]);
const columnLinks = useCallback((groupId: string): HTMLElement[] => {
const nav = navRef.current;
if (!nav) return [];
@@ -143,17 +181,37 @@ export function DesktopNav({
[columnLinks],
);
/** Open (if needed) and put focus on the first/last link of `groupId`. */
/* Outside press. pointerdown rather than click so the column is already gone
by the time the click lands on whatever is underneath. */
useEffect(() => {
if (openGroup === null) return;
const handlePointerDown = (event: PointerEvent) => {
if (!navRef.current?.contains(event.target as Node)) setOpenGroup(null);
};
document.addEventListener("pointerdown", handlePointerDown);
return () => document.removeEventListener("pointerdown", handlePointerDown);
}, [openGroup]);
/* A keyboard request to open a group and step into its column can only be
honoured once that column has actually rendered. */
useEffect(() => {
const target = pendingFocus.current;
if (openGroup === null || !target || target.groupId !== openGroup) return;
pendingFocus.current = null;
focusInColumn(target.groupId, target.position);
}, [openGroup, focusInColumn]);
/** Open `groupId` (if needed) and put focus on its first/last link. */
const enterColumn = useCallback(
(groupId: string, position: ColumnPosition) => {
if (open) {
if (openGroup === groupId) {
focusInColumn(groupId, position);
return;
}
pendingFocus.current = { groupId, position };
openMega();
showGroup(groupId);
},
[focusInColumn, open, openMega],
[focusInColumn, openGroup, showGroup],
);
const forwardKey = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
@@ -167,6 +225,15 @@ export function DesktopNav({
next?.focus();
};
const handleTriggerClick = (groupId: string) => {
const pointer = lastPointerType.current;
lastPointerType.current = null;
/* A mouse has already opened the column by hovering; a click keeps it
open. Touch and pen have no hover, so for them a press toggles. */
if (pointer === "mouse" || openGroup !== groupId) showGroup(groupId);
else closeGroup();
};
const handleTriggerKeyDown = (
event: ReactKeyboardEvent<HTMLButtonElement>,
groupId: string,
@@ -176,7 +243,7 @@ export function DesktopNav({
case " ":
case "Spacebar":
event.preventDefault();
if (open) closeMega();
if (openGroup === groupId) closeGroup();
else enterColumn(groupId, "first");
break;
case "ArrowDown":
@@ -205,6 +272,16 @@ export function DesktopNav({
controls[controls.length - 1]?.focus();
break;
}
case "Tab": {
/* Into the open column, which the DOM places after the trigger row. */
if (event.shiftKey || openGroup !== groupId) break;
const first = columnLinks(groupId)[0];
if (first) {
event.preventDefault();
first.focus();
}
break;
}
default:
break;
}
@@ -227,7 +304,7 @@ export function DesktopNav({
if (groupIds.length === 0) return;
const nextId =
groupIds[(groupIndex + delta + groupIds.length) % groupIds.length];
if (nextId) focusInColumn(nextId, "first");
if (nextId) enterColumn(nextId, "first");
};
switch (event.key) {
@@ -256,6 +333,27 @@ export function DesktopNav({
event.preventDefault();
links[links.length - 1]?.focus();
break;
case "Tab": {
if (event.shiftKey) {
/* Back out of the column to the trigger that owns it. */
if (index === 0) {
event.preventDefault();
triggerFor(groupId)?.focus();
}
break;
}
/* On from the end of the column to the next top-level item, which
closes this group. With no next item, Tab leaves the bar as usual. */
if (index !== links.length - 1) break;
const controls = topLevelControls();
const trigger = triggerFor(groupId);
const next = trigger ? controls[controls.indexOf(trigger) + 1] : undefined;
if (next) {
event.preventDefault();
next.focus();
}
break;
}
default:
break;
}
@@ -264,29 +362,26 @@ export function DesktopNav({
/* Escape is handled once, on the bar, so it works from a trigger and from
inside a column. Focus goes back to the trigger that owns the column. */
const handleNavKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {
if (event.key !== "Escape" || !open) return;
if (event.key !== "Escape" || openGroup === null) return;
event.preventDefault();
const active = document.activeElement as HTMLElement | null;
const groupId =
active?.closest<HTMLElement>("[data-nav-column]")?.dataset.navColumn ??
active?.dataset.navTrigger;
closeMega();
if (groupId) triggerFor(groupId)?.focus();
const groupId = openGroup;
closeGroup();
triggerFor(groupId)?.focus();
};
/* React's onBlur is focusout, so it fires for descendants too. */
const handleNavBlur = (event: ReactFocusEvent<HTMLElement>) => {
const next = event.relatedTarget as Node | null;
if (!next || !navRef.current?.contains(next)) closeMega();
if (!next || !navRef.current?.contains(next)) closeGroup();
};
const handleItemPointerEnter = (
event: ReactPointerEvent<HTMLLIElement>,
isGroup: boolean,
groupId: string | null,
) => {
if (event.pointerType !== "mouse") return;
if (isGroup) openMega();
else closeMega();
if (groupId) showGroup(groupId);
else closeGroup();
};
const handleNavPointerLeave = (event: ReactPointerEvent<HTMLElement>) => {
@@ -298,7 +393,7 @@ export function DesktopNav({
<nav
ref={navRef}
aria-label={strings.primaryNavLabel}
data-mega-open={open ? "true" : "false"}
data-mega-open={openGroup !== null ? "true" : "false"}
className={cx("relative", className)}
onPointerEnter={clearCloseTimer}
onPointerLeave={handleNavPointerLeave}
@@ -314,128 +409,132 @@ export function DesktopNav({
return (
<li
key={item.id}
className="flex"
onPointerEnter={(event) => handleItemPointerEnter(event, group)}
className="relative flex"
onPointerEnter={(event) =>
handleItemPointerEnter(event, group ? item.id : null)
}
>
{group ? (
<button
type="button"
id={triggerId(item.id)}
data-nav-top=""
data-nav-trigger={item.id}
data-current={hasCurrentChild ? "true" : undefined}
aria-expanded={open}
aria-controls={panelId(item.id)}
onFocus={openMega}
onClick={() => (open ? closeMega() : openMega())}
onKeyDown={(event) => handleTriggerKeyDown(event, item.id)}
className={cx(
"body-md-bold cursor-pointer whitespace-nowrap pb-[2px]",
"text-start text-[var(--text-primary)]",
"hover:text-[var(--text-accent)]",
"data-[current=true]:text-[var(--text-accent)]",
HOVER_TRANSITION,
FOCUS_RING,
)}
>
{item.label}
</button>
<>
<button
type="button"
id={triggerId(item.id)}
data-nav-top=""
data-nav-trigger={item.id}
data-current={hasCurrentChild ? "true" : undefined}
aria-expanded={openGroup === item.id}
aria-controls={panelId(item.id)}
onFocus={() => {
/* Moving to another trigger closes the one left behind. */
if (openGroup !== null && openGroup !== item.id) closeGroup();
}}
onPointerDown={(event) => {
lastPointerType.current = event.pointerType;
}}
onClick={() => handleTriggerClick(item.id)}
onKeyDown={(event) => handleTriggerKeyDown(event, item.id)}
className={cx(
"body-sm-bold flex cursor-pointer items-center gap-2xs",
"whitespace-nowrap pb-[2px] text-start",
"text-[var(--text-primary)]",
"hover:text-[var(--text-accent)]",
"aria-expanded:text-[var(--text-accent)]",
"data-[current=true]:text-[var(--text-accent)]",
HOVER_TRANSITION,
FOCUS_RING,
)}
>
<span>{item.label}</span>
<Chevron />
</button>
{/* The section the reader is inside keeps a 2px accent rule
under its trigger, as the draft draws it. Decorative -
`data-current` on the trigger carries the state. */}
{hasCurrentChild ? (
<span
aria-hidden="true"
className="absolute inset-x-0 bottom-0 h-[2px] bg-[var(--surface-accent)]"
/>
) : null}
{/* The draft's dropdown is a compact card hanging from its
own trigger, not a full-width mega bar. `start-[-1rem]`
pulls the card back by its own padding so a child label
lines up with the trigger label above it; being a logical
inset, it mirrors in Arabic on its own. */}
<ul
id={panelId(item.id)}
aria-labelledby={triggerId(item.id)}
hidden={openGroup !== item.id}
className={cx(
"sh-nav-menu absolute top-full start-[-1rem] z-[var(--layer-dropdown)]",
"mt-sm flex min-w-[17.875rem] flex-col",
"rounded-control border border-[var(--border-subtle)]",
"bg-[var(--surface-raised)] p-xs",
"shadow-[var(--elevation-popover)]",
)}
>
{item.children.map((child) => (
<li key={child.id}>
<Link
to={child.href}
data-nav-sublink=""
aria-current={
isCurrentPath(child.href, pathname) ? "page" : undefined
}
onKeyDown={(event) => handleSubLinkKeyDown(event, item.id)}
className={cx(
"body-sm-bold flex items-center justify-between gap-md",
"rounded-control px-sm py-xs no-underline",
"text-[var(--text-primary)]",
"hover:bg-[var(--surface-page)] hover:text-[var(--text-accent)]",
"aria-[current=page]:text-[var(--text-accent)]",
HOVER_TRANSITION,
FOCUS_RING,
)}
>
<span>{child.label}</span>
<MenuArrow />
</Link>
</li>
))}
</ul>
</>
) : (
<Link
to={item.href}
data-nav-top=""
aria-current={
isCurrentPath(item.href, pathname) ? "page" : undefined
}
onFocus={closeMega}
className={cx(
"body-md-bold whitespace-nowrap pb-[2px] no-underline",
"text-[var(--text-primary)]",
"hover:text-[var(--text-accent)]",
"aria-[current=page]:text-[var(--text-accent)]",
"aria-[current=page]:underline aria-[current=page]:decoration-2",
"aria-[current=page]:underline-offset-4",
HOVER_TRANSITION,
FOCUS_RING,
)}
>
{item.label}
</Link>
<>
<Link
to={item.href}
data-nav-top=""
aria-current={
isCurrentPath(item.href, pathname) ? "page" : undefined
}
onFocus={closeGroup}
className={cx(
"body-sm-bold whitespace-nowrap pb-[2px] no-underline",
"text-[var(--text-primary)]",
"hover:text-[var(--text-accent)]",
"aria-[current=page]:text-[var(--text-accent)]",
HOVER_TRANSITION,
FOCUS_RING,
)}
>
{item.label}
</Link>
{isCurrentPath(item.href, pathname) ? (
<span
aria-hidden="true"
className="absolute inset-x-0 bottom-0 h-[2px] bg-[var(--surface-accent)]"
/>
) : null}
</>
)}
</li>
);
})}
</ul>
{/* Mega panel. Anchored to the bar's inline start so the columns share the
trigger row's origin and gap; `start-0` mirrors on its own in Arabic. */}
<div hidden={!open} className="absolute start-0 top-full w-full">
{/* One full-bleed backdrop for all columns, so the surface and its
bottom edge are a single unbroken rectangle. The header clips the
horizontal bleed with overflow-x-clip, which leaves the vertical
overflow visible. */}
<div
aria-hidden="true"
className={cx(
"absolute inset-y-0 start-[-50vw] end-[-50vw]",
"border-b border-[var(--border-subtle)] bg-[var(--surface-page)]",
)}
/>
<div className={cx("relative flex pb-lg", ROW_GAP)}>
{items.map((item) => (
<div
key={item.id}
data-nav-column={item.id}
className="flex flex-col"
>
{/* Width setter: an invisible copy of the trigger label in the
same type role, so this column is exactly as wide as its
trigger. It is h-0, so it adds no height. */}
<span
aria-hidden="true"
className="body-md-bold invisible block h-0 overflow-hidden whitespace-nowrap"
>
{item.label}
</span>
{isNavGroup(item) && (
/* w-0 keeps the list out of the column's max-content width;
min-w-full then stretches it back, so long child labels wrap
inside the trigger's width exactly as they do in Figma. */
<ul
id={panelId(item.id)}
aria-labelledby={triggerId(item.id)}
className="flex w-0 min-w-full flex-col gap-sm pt-md"
>
{item.children.map((child) => (
<li key={child.id}>
<Link
to={child.href}
data-nav-sublink=""
aria-current={
isCurrentPath(child.href, pathname) ? "page" : undefined
}
onKeyDown={(event) => handleSubLinkKeyDown(event, item.id)}
className={cx(
"body-md block no-underline",
"text-[var(--text-secondary)]",
"hover:text-[var(--text-primary)]",
"aria-[current=page]:text-[var(--text-accent)]",
HOVER_TRANSITION,
FOCUS_RING,
)}
>
{child.label}
</Link>
</li>
))}
</ul>
)}
</div>
))}
</div>
</div>
</nav>
);
}
apps/web/app/components/ui/Navigation/EuBadge.tsx
-73
View File
@@ -1,73 +0,0 @@
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>
);
}
apps/web/app/components/ui/Navigation/MobileNav.tsx
+4 -2
View File
@@ -8,10 +8,10 @@ import {
} from "react";
import { Link } from "react-router";
import { EuBadge } from "../EuBadge";
import { LanguageSwitcher, isCurrentPath, type Locale } from "../LanguageSwitcher";
import { Brand } from "./Brand";
import { EuBadge } from "./EuBadge";
import { MenuBars } from "./MenuBars";
import { cx, FOCUS_RING, HOVER_TRANSITION } from "./styles";
import { isNavGroup, type NavItem, type NavigationStrings, type NavSurface } from "./types";
@@ -247,7 +247,9 @@ export function MobileNav({
"bg-[var(--surface-page)] xl:hidden",
)}
>
<div className="flex min-h-[64px] shrink-0 items-center justify-between gap-md px-[var(--layout-gutter)]">
{/* Mirrors the compact bar it replaces (20:220): the same 64px row and
the same gutter, so the wordmark does not shift when it opens. */}
<div className="flex h-[64px] shrink-0 items-center justify-between gap-md px-[var(--layout-gutter)]">
<Brand href={homeHref} label={strings.homeLinkLabel} surface={surface} />
<button
ref={closeRef}
apps/web/app/components/ui/Navigation/Navigation.css
+33
View File
@@ -0,0 +1,33 @@
/* ============================================================================
NAVIGATION - the dropdown's opening motion
----------------------------------------------------------------------------
The redesign opens each group's menu with a short fade and an 8px settle
("menuIn" in the draft). It lives here rather than in the page kit because
the navigation is a design-system component and must not depend on a route
module's stylesheet.
`:not([hidden])` is what replays it: the panel is hidden with the `hidden`
attribute, so the animation runs each time the group opens instead of once
per mount. app.css collapses it to 0.01ms under prefers-reduced-motion.
========================================================================= */
@layer theme, base, components, utilities;
@layer components {
.sh-nav-menu:not([hidden]) {
animation: sh-nav-menu-in var(--motion-duration-base)
var(--motion-ease-entrance) both;
}
}
@keyframes sh-nav-menu-in {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: none;
}
}
apps/web/app/components/ui/Navigation/Navigation.tsx
+45 -61
View File
@@ -3,13 +3,12 @@ import { useMemo } from "react";
import {
buildLocalizedHref,
getDirection,
LanguageSwitcher,
LanguageToggle,
type Locale,
} from "../LanguageSwitcher";
import { Brand } from "./Brand";
import { DesktopNav } from "./DesktopNav";
import { EuBadge } from "./EuBadge";
import { MobileNav } from "./MobileNav";
import { getDefaultNavItems, getNavigationStrings } from "./nav-items";
import { cx } from "./styles";
@@ -36,15 +35,6 @@ export interface NavigationProps {
/** Where the logo links. Defaults to the locale home, "/en" or "/ar". */
homeHref?: string;
showLanguageSwitcher?: boolean;
/**
* Show the EU badge in the compact bar below xl as well. ON by default:
* donor visibility is non-negotiable, and the Figma mobile frame (20:220),
* which is logo + hamburger only, would leave the badge out of the header on
* every phone, tablet and 1280px-narrow laptop. Below xl the lockup renders
* at a reduced size rather than being dropped. Pass `false` only for a
* surface where the funding statement is guaranteed elsewhere on screen.
*/
showEuBadgeOnMobileBar?: boolean;
/** Stick the bar to the top of the viewport. */
sticky?: boolean;
className?: string;
@@ -53,13 +43,19 @@ export interface NavigationProps {
/**
* The SHARP-ER site navigation - Figma frame 20:236.
*
* Logo at the inline start, the mandatory "Funded by the European Union" badge
* at the inline end, and the mega-menu groups between them. Everything is laid
* out with logical properties, so the Arabic bar mirrors (logo right, EU badge
* left) from `<html dir="rtl">` alone - there is no separate Arabic component.
* Three slots, spread across the bar: the wordmark at the inline start, the
* mega-menu groups in the middle, and the language globe at the inline end.
* Everything is laid out with logical properties, so the Arabic bar mirrors
* (logo right, globe left) from `<html dir="rtl">` alone - there is no separate
* Arabic component, which is what variants 334:526 and 334:764 show.
*
* Below the xl breakpoint the bar collapses to logo + hamburger and the whole
* tree moves into a full-screen drawer.
* Below the xl breakpoint the bar collapses to wordmark + hamburger (20:220)
* and the whole tree moves into a full-screen drawer.
*
* EU VISIBILITY: the updated design has no funding badge in the bar - the
* Actions slot holds the language globe alone. The mandatory "Funded by the
* European Union" lockup is carried by <Footer />, which renders on every page,
* and by the mobile drawer; it is not dropped from the site.
*/
export function Navigation({
locale = "en",
@@ -71,7 +67,6 @@ export function Navigation({
strings: stringOverrides,
homeHref,
showLanguageSwitcher = true,
showEuBadgeOnMobileBar = true,
sticky = true,
className,
}: NavigationProps) {
@@ -90,10 +85,10 @@ export function Navigation({
return (
<header
data-surface={surface}
/* overflow-x-clip contains the mega panel's full-bleed backdrop without
clipping the panel itself, which overflows vertically. */
className={cx(
"w-full overflow-x-clip border-b border-[var(--border-subtle)]",
"w-full border-b border-[var(--border-subtle)]",
/* Translucent ground + blur, as the drafts draw the bar. */
"bg-[var(--surface-nav)] backdrop-blur-[14px]",
sticky && "sticky top-0 z-[var(--layer-header)]",
className,
)}
@@ -101,10 +96,13 @@ export function Navigation({
<div
className={cx(
"mx-auto flex w-full max-w-[var(--layout-content-max)] items-center justify-between",
/* The compact bar carries wordmark + EU lockup + hamburger on a
320px screen, so it runs a tighter gap than the desktop bar. */
"min-h-[64px] gap-xs px-[var(--layout-gutter)]",
"xl:min-h-[72px] xl:gap-lg xl:px-2xl",
/* Mobile 20:220 is a fixed 64px bar; the gutter is the site's own
rather than the frame's 20px, so the wordmark lines up with the
page content underneath it. */
"h-[64px] gap-md px-[var(--layout-gutter)]",
/* The drafts pad the bar with the same gutter every section uses, so
the wordmark sits directly above the page's content edge. */
"xl:h-auto xl:gap-lg xl:px-[var(--layout-gutter-lg)] xl:py-sm",
)}
>
<Brand
@@ -121,43 +119,33 @@ export function Navigation({
className="hidden xl:block"
/>
<div className="flex items-center gap-xs xl:gap-md">
{/* Desktop-only cluster. Visibility lives on this wrapper rather than
on the children: two display utilities on one element are resolved
by the order Tailwind emits them, not by class-attribute order. */}
<div className="hidden items-center gap-md xl:flex">
{showLanguageSwitcher && (
<LanguageSwitcher
<div className="flex items-center gap-md">
{/* The globe is desktop-only: the mobile bar (20:220) is wordmark +
hamburger, and the drawer carries the switcher instead. Visibility
lives on this wrapper rather than on the child, because two
display utilities on one element are resolved by the order
Tailwind emits them, not by class-attribute order. */}
{showLanguageSwitcher && (
/* Figma 555:3848 sets a 20px rule between the links and the
actions, then 24px to the globe. It is decorative, so it is
hidden from assistive technology and drawn with a border token
rather than a rule element. */
<div className="hidden items-center gap-lg xl:flex">
<span
aria-hidden="true"
className="h-5 w-px bg-[var(--border-default)]"
/>
{/* Both languages side by side, per the redesign's nav: the
current one chipped, the other one link. */}
<LanguageToggle
label={strings.languageMenuLabel}
locale={locale}
pathname={pathname}
search={search}
hash={hash}
/>
)}
{!showEuBadgeOnMobileBar && (
<EuBadge
statement={strings.euStatement}
emblemAlt={strings.euEmblemAlt}
locale={locale}
surface={surface}
/>
)}
</div>
{showEuBadgeOnMobileBar && (
<EuBadge
statement={strings.euStatement}
emblemAlt={strings.euEmblemAlt}
locale={locale}
surface={surface}
/* Below xl the lockup is scaled down - emblem 36x24 instead of
48x32, statement wrapped in a narrower box - so it still fits
beside the wordmark and the hamburger at 320px. It is scaled,
never hidden: the statement stays at Label/Medium, i.e. the
same size it is everywhere else, so it remains legible. */
className="max-xl:[&>img]:h-[24px] max-xl:[&>img]:w-[36px] max-xl:[&>span]:w-[80px]"
/>
</div>
)}
<MobileNav
@@ -204,8 +192,4 @@ export default Navigation;
// keeps the query string and fragment:
const { pathname, search, hash } = useLocation();
<Navigation locale={locale} pathname={pathname} search={search} hash={hash} />
// The EU badge is in the compact bar by default. Opt out only where the
// funding statement is guaranteed to be visible elsewhere on the screen:
<Navigation locale="en" pathname="/en" showEuBadgeOnMobileBar={false} />
------------------------------------------------------------------------ */
apps/web/app/components/ui/Navigation/index.ts
-2
View File
@@ -5,8 +5,6 @@ export { Brand } from "./Brand";
export type { BrandProps } from "./Brand";
export { DesktopNav } from "./DesktopNav";
export type { DesktopNavProps } from "./DesktopNav";
export { EuBadge } from "./EuBadge";
export type { EuBadgeProps } from "./EuBadge";
export { MenuBars } from "./MenuBars";
export type { MenuBarsProps } from "./MenuBars";
export { MobileNav } from "./MobileNav";
apps/web/app/components/ui/Navigation/nav-items.ts
+2
View File
@@ -132,6 +132,7 @@ export const NAVIGATION_STRINGS: NavigationStringsByLocale = {
openMenu: "Open menu",
closeMenu: "Close menu",
homeLinkLabel: "SHARP-ER home",
languageMenuLabel: "Language",
euStatement: "Funded by the European Union",
euEmblemAlt: "",
},
@@ -140,6 +141,7 @@ export const NAVIGATION_STRINGS: NavigationStringsByLocale = {
openMenu: "فتح القائمة",
closeMenu: "إغلاق القائمة",
homeLinkLabel: "الصفحة الرئيسية لمشروع SHARP-ER",
languageMenuLabel: "اللغة",
euStatement: "بتمويل من الاتحاد الأوروبي",
euEmblemAlt: "",
},
apps/web/app/components/ui/Navigation/types.ts
+2
View File
@@ -41,6 +41,8 @@ export interface NavigationStrings {
closeMenu: string;
/** Accessible name of the logo link. */
homeLinkLabel: string;
/** Accessible name of the language globe, which carries no text of its own. */
languageMenuLabel: string;
/** The mandatory EU funding statement. */
euStatement: string;
/**