@bygghammar/cms-platform 0.55.0 → 0.56.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.56.0
+
+- Public site chrome is now package-owned: `site/SiteHeader` and
+  `site/SiteFooter`. Structure, dropdown/keyboard behaviour, mobile panel,
+  address block and Organization JSON-LD live in the package; sites pass
+  navigation, brand text, logo artwork, CTA target and company details.
+
 ## 0.55.0
 
 - Public departures list is now package-owned: `blocks/components/TripListBlock`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [
@@ -203,7 +203,9 @@
     "./site/indexing": "./src/site/indexing.ts",
     "./backoffice/IndexingStatusCard": "./src/backoffice/IndexingStatusCard.tsx",
     "./util/use-hash-scroll": "./src/util/use-hash-scroll.ts",
-    "./site/site-url": "./src/site/site-url.ts"
+    "./site/site-url": "./src/site/site-url.ts",
+    "./site/SiteHeader": "./src/site/SiteHeader.tsx",
+    "./site/SiteFooter": "./src/site/SiteFooter.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/site/SiteFooter.tsx

@@ -0,0 +1,134 @@
+/**
+ * Shared public site footer (site-agnostic).
+ *
+ * Layout, address block and Organization JSON-LD live here; brand text,
+ * columns and company details are supplied by the site.
+ */
+import { Link } from "@tanstack/react-router";
+
+import { useT } from "../i18n";
+import type { LocalizedString } from "../i18n/types";
+
+export type SiteFooterCompany = {
+  legalName: string;
+  locationName: string;
+  orgNumber: string;
+  street: string;
+  postCode: string;
+  city: string;
+  country: string;
+  email: string;
+  phone: string;
+};
+
+export type SiteFooterColumn = {
+  title: LocalizedString;
+  links: Array<{ label: LocalizedString; href: string }>;
+};
+
+export type SiteFooterProps = {
+  brandShort: LocalizedString;
+  brandName: LocalizedString;
+  tagline: LocalizedString;
+  legal: LocalizedString;
+  columns: readonly SiteFooterColumn[];
+  company: SiteFooterCompany;
+  /** Label prefixing the organisation number in the address block. */
+  orgNumberLabel?: string;
+};
+
+export function SiteFooter({
+  brandShort,
+  brandName,
+  tagline,
+  legal,
+  columns,
+  company,
+  orgNumberLabel = "Org.nr",
+}: SiteFooterProps) {
+  const { t } = useT();
+
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: company.locationName,
+    legalName: company.legalName,
+    email: company.email,
+    telephone: company.phone,
+    identifier: company.orgNumber,
+    address: {
+      "@type": "PostalAddress",
+      streetAddress: company.street,
+      postalCode: company.postCode,
+      addressLocality: company.city,
+      addressCountry: company.country,
+    },
+  };
+
+  return (
+    <footer className="bg-ink text-paper">
+      <div className="container-editorial py-20 md:py-28">
+        <div className="grid gap-12 md:grid-cols-12">
+          <div className="md:col-span-4">
+            <div className="font-serif text-2xl tracking-[0.24em]">{t(brandShort)}</div>
+            <p className="mt-4 max-w-xs text-sm leading-relaxed text-paper/85 whitespace-pre-line">
+              {t(brandName)} — {t(tagline)}
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
+            {columns.map((col, i) => (
+              <div key={i} className="min-w-0">
+                <div className="eyebrow text-paper/80">{t(col.title)}</div>
+                <ul className="mt-4 space-y-2">
+                  {col.links.map((l, j) => (
+                    <li key={j}>
+                      {l.href.startsWith("/") && !l.href.startsWith("/#") ? (
+                        <Link
+                          to={l.href}
+                          className="text-sm text-paper/85 hover:text-paper transition-colors"
+                        >
+                          {t(l.label)}
+                        </Link>
+                      ) : (
+                        <a
+                          href={l.href}
+                          className="text-sm text-paper/85 hover:text-paper transition-colors"
+                        >
+                          {t(l.label)}
+                        </a>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mt-16 border-t border-paper/15 pt-8 text-center text-xs text-paper/80">
+          <address className="not-italic leading-relaxed">
+            <div>
+              {company.locationName} · {company.street} · {company.postCode} {company.city}
+            </div>
+            <div className="mt-1">
+              {company.legalName} · {orgNumberLabel} {company.orgNumber}
+            </div>
+            <div className="mt-1">
+              <a href={`mailto:${company.email}`} className="hover:text-paper">
+                {company.email}
+              </a>
+              {" · "}
+              <a href={`tel:${company.phone.replace(/[^\d+]/g, "")}`} className="hover:text-paper">
+                {company.phone}
+              </a>
+            </div>
+          </address>
+          <div className="mt-4">{t(legal)}</div>
+        </div>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </div>
+    </footer>
+  );
+}

package/src/site/SiteHeader.tsx

@@ -0,0 +1,355 @@
+/**
+ * Shared public site header (site-agnostic).
+ *
+ * Structure, motion, dropdown/keyboard behaviour and the mobile panel live
+ * here. Everything brand-specific — logo artwork, navigation data, CTA target
+ * and labels — is passed in by the site. All strings are localized maps
+ * resolved through the package `useT()`.
+ */
+import { Link, useRouterState } from "@tanstack/react-router";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown, Menu, X } from "lucide-react";
+
+import { useT } from "../i18n";
+import type { LocalizedString } from "../i18n/types";
+import { navigationPanelId, type NavigationItem } from "../navigation";
+
+export type SiteHeaderProps = {
+  /** Top-level navigation, optionally with one level of children. */
+  nav: readonly NavigationItem[];
+  /** Brand name, used as the logo link's accessible label. */
+  brandName: LocalizedString;
+  /** Logo/wordmark artwork. Light artwork is inverted on light surfaces. */
+  logoSrc: string;
+  /** Set false when the logo artwork is already dark. */
+  invertLogoOnLightSurface?: boolean;
+  /** Primary call to action shown on desktop and at the end of the mobile panel. */
+  primaryCta: { href: string; label: LocalizedString };
+  /** Mobile menu toggle labels. */
+  menuLabels: { open: LocalizedString; close: LocalizedString };
+  /** Optional backoffice shortcut, rendered only when `signedIn` is true. */
+  backoffice?: { href: string; label: string; signedIn: boolean };
+  /**
+   * Routes that render a dark full-bleed hero behind the header. On those the
+   * un-scrolled header uses light text. Defaults to the home route.
+   */
+  lightTextPaths?: readonly string[];
+};
+
+function NavEntry({ item, lightText }: { item: NavigationItem; lightText: boolean }) {
+  const { t } = useT();
+  const children = item.children ?? [];
+  const [open, setOpen] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const pathname = useRouterState({ select: (r) => r.location.pathname });
+
+  useEffect(() => setOpen(false), [pathname]);
+  useEffect(
+    () => () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+    },
+    [],
+  );
+
+  const linkClass = [
+    "inline-flex items-center leading-none text-xs uppercase tracking-[0.18em] transition-colors",
+    !lightText ? "text-foreground/80 hover:text-foreground" : "text-paper/85 hover:text-paper",
+  ].join(" ");
+
+  if (children.length === 0) {
+    return (
+      <Link to={item.href} className={linkClass}>
+        {t(item.label)}
+      </Link>
+    );
+  }
+
+  const cancelClose = () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  };
+  const scheduleClose = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 140);
+  };
+
+  const panelId = navigationPanelId(item.href);
+
+  return (
+    <div
+      ref={wrapRef}
+      className="relative flex items-center"
+      onMouseEnter={() => {
+        cancelClose();
+        setOpen(true);
+      }}
+      onMouseLeave={scheduleClose}
+      onFocus={() => {
+        cancelClose();
+        setOpen(true);
+      }}
+      onBlur={(e) => {
+        if (!wrapRef.current?.contains(e.relatedTarget as Node | null)) setOpen(false);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") {
+          setOpen(false);
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setOpen(true);
+          const links = wrapRef.current?.querySelectorAll<HTMLElement>("[data-sub-link]");
+          links?.[0]?.focus();
+        }
+      }}
+    >
+      <Link
+        to={item.href}
+        aria-haspopup="true"
+        aria-expanded={open}
+        aria-controls={panelId}
+        className={`${linkClass} gap-1.5`}
+      >
+        {t(item.label)}
+        <ChevronDown
+          className={`size-3 transition-transform duration-300 ${open ? "rotate-180" : ""}`}
+          aria-hidden
+        />
+      </Link>
+
+      <div
+        id={panelId}
+        className={[
+          "absolute left-1/2 top-full z-50 -translate-x-1/2 pt-4 transition-all duration-200",
+          open
+            ? "pointer-events-auto opacity-100 translate-y-0"
+            : "pointer-events-none opacity-0 translate-y-1",
+        ].join(" ")}
+      >
+        <ul className="min-w-[15rem] border border-border/60 bg-background/90 backdrop-blur-xl py-2 shadow-[0_20px_60px_-30px_rgba(0,0,0,0.45)]">
+          {children.map((c, i) => (
+            <li key={c.href + i}>
+              <Link
+                to={c.href}
+                data-sub-link
+                onClick={() => setOpen(false)}
+                onKeyDown={(e) => {
+                  const links = Array.from(
+                    wrapRef.current?.querySelectorAll<HTMLElement>("[data-sub-link]") ?? [],
+                  );
+                  if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    links[Math.min(i + 1, links.length - 1)]?.focus();
+                  }
+                  if (e.key === "ArrowUp") {
+                    e.preventDefault();
+                    links[Math.max(i - 1, 0)]?.focus();
+                  }
+                }}
+                className="block px-5 py-3 text-[0.7rem] uppercase tracking-[0.2em] text-foreground/70 hover:bg-foreground/5 hover:text-foreground transition-colors"
+              >
+                {t(c.label)}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export function SiteHeader({
+  nav,
+  brandName,
+  logoSrc,
+  invertLogoOnLightSurface = true,
+  primaryCta,
+  menuLabels,
+  backoffice,
+  lightTextPaths = ["/"],
+}: SiteHeaderProps) {
+  const { t } = useT();
+  const pathname = useRouterState({ select: (r) => r.location.pathname });
+
+  const [scrolled, setScrolled] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [mobileGroup, setMobileGroup] = useState<string | null>(null);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const toggleRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    const on = () => setScrolled(window.scrollY > 24);
+    on();
+    window.addEventListener("scroll", on, { passive: true });
+    return () => window.removeEventListener("scroll", on);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: PointerEvent) => {
+      const target = e.target as Node | null;
+      if (!target) return;
+      if (panelRef.current?.contains(target)) return;
+      if (toggleRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onDown);
+    return () => document.removeEventListener("pointerdown", onDown);
+  }, [open]);
+
+  const lightText = lightTextPaths.includes(pathname) && !scrolled;
+  const name = t(brandName);
+  const showBackoffice = Boolean(backoffice?.signedIn);
+
+  return (
+    <header
+      className={[
+        "fixed inset-x-0 top-0 z-50 transition-all duration-500",
+        scrolled ? "backdrop-blur-md bg-background/70 border-b border-border/50" : "bg-transparent",
+      ].join(" ")}
+    >
+      <div className="container-editorial flex h-16 items-center justify-between gap-4 md:h-20">
+        <Link to="/" className="shrink-0 inline-flex items-center" aria-label={name}>
+          <img
+            src={logoSrc}
+            alt={name}
+            className={[
+              "h-10 w-auto md:h-12 transition-[filter] duration-500",
+              !lightText && invertLogoOnLightSurface ? "brightness-0" : "",
+            ].join(" ")}
+          />
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-10">
+          {nav.map((n) => (
+            <NavEntry key={n.href} item={n} lightText={lightText} />
+          ))}
+        </nav>
+
+        <div className="hidden md:flex items-center gap-5">
+          {showBackoffice && backoffice && (
+            <Link
+              to={backoffice.href}
+              className={[
+                "text-xs uppercase tracking-[0.2em] transition-colors",
+                !lightText
+                  ? "text-foreground/70 hover:text-foreground"
+                  : "text-paper/80 hover:text-paper",
+              ].join(" ")}
+            >
+              {backoffice.label}
+            </Link>
+          )}
+          <Link
+            to={primaryCta.href}
+            className={[
+              "inline-flex items-center border px-5 py-2.5 text-xs uppercase tracking-[0.2em] transition-colors",
+              !lightText
+                ? "border-foreground text-foreground hover:bg-foreground hover:text-background"
+                : "border-paper text-paper hover:bg-paper hover:text-ink",
+            ].join(" ")}
+          >
+            {t(primaryCta.label)}
+          </Link>
+        </div>
+
+        <button
+          ref={toggleRef}
+          type="button"
+          className={[
+            "md:hidden inline-flex h-11 w-11 shrink-0 items-center justify-center",
+            !lightText ? "text-foreground" : "text-paper",
+          ].join(" ")}
+          aria-label={open ? t(menuLabels.close) : t(menuLabels.open)}
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+        >
+          {open ? <X className="size-5" /> : <Menu className="size-5" />}
+        </button>
+      </div>
+
+      {open && (
+        <div ref={panelRef} className="md:hidden bg-background border-t border-border">
+          <nav className="container-editorial flex flex-col py-6">
+            {nav.map((n) => {
+              const kids = n.children ?? [];
+              if (kids.length === 0) {
+                return (
+                  <Link
+                    key={n.href}
+                    to={n.href}
+                    className="py-3 text-sm uppercase tracking-[0.2em] text-foreground/80 hover:text-foreground"
+                    onClick={() => setOpen(false)}
+                  >
+                    {t(n.label)}
+                  </Link>
+                );
+              }
+              const expanded = mobileGroup === n.href;
+              return (
+                <div key={n.href} className="border-b border-border/40 last:border-b-0">
+                  <div className="flex items-center">
+                    <Link
+                      to={n.href}
+                      className="flex-1 py-3 text-sm uppercase tracking-[0.2em] text-foreground/80 hover:text-foreground"
+                      onClick={() => setOpen(false)}
+                    >
+                      {t(n.label)}
+                    </Link>
+                    <button
+                      type="button"
+                      aria-label={t(n.label)}
+                      aria-expanded={expanded}
+                      aria-controls={`m-sub-${n.href}`}
+                      onClick={() => setMobileGroup(expanded ? null : n.href)}
+                      className="inline-flex h-11 w-11 items-center justify-center text-foreground/60 hover:text-foreground"
+                    >
+                      <ChevronDown
+                        className={`size-4 transition-transform duration-300 ${
+                          expanded ? "rotate-180" : ""
+                        }`}
+                      />
+                    </button>
+                  </div>
+                  {expanded && (
+                    <ul id={`m-sub-${n.href}`} className="pb-3 pl-4">
+                      {kids.map((c) => (
+                        <li key={c.href}>
+                          <Link
+                            to={c.href}
+                            className="block py-2.5 text-xs uppercase tracking-[0.2em] text-foreground/65 hover:text-foreground"
+                            onClick={() => setOpen(false)}
+                          >
+                            {t(c.label)}
+                          </Link>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              );
+            })}
+            {showBackoffice && backoffice && (
+              <Link
+                to={backoffice.href}
+                className="py-3 text-sm uppercase tracking-[0.2em] text-foreground/60 hover:text-foreground"
+                onClick={() => setOpen(false)}
+              >
+                {backoffice.label}
+              </Link>
+            )}
+            <Link
+              to={primaryCta.href}
+              className="mt-4 inline-flex items-center justify-center border border-foreground px-5 py-3 text-xs uppercase tracking-[0.2em]"
+              onClick={() => setOpen(false)}
+            >
+              {t(primaryCta.label)}
+            </Link>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}