@kwtv/components 0.7.2 → 0.9.0

package/src/react/Drawer.css

@@ -1,4 +1,4 @@
-/* Mobile menu drawer. All values from the design-system tokens. */
+/* Menu drawer. All values from the design-system tokens. */
 
 @layer reset, tokens, base, components, motion, utilities;
 
@@ -68,4 +68,74 @@
   .ui-drawer__cta {
     margin-top: var(--space-2);
   }
+
+  .ui-drawer__close {
+    align-self: flex-end;
+    flex-shrink: 0;
+  }
+
+  /* Placement. The panel is fixed to one edge, over a scrim that stays dark
+     in both themes, like the modal scrim. */
+  .ui-drawer-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    display: flex;
+    background: color-mix(in srgb, var(--charcoal-xdark) 52%, transparent);
+    animation: ui-drawer-fade var(--duration-base) var(--ease-standard);
+  }
+
+  .ui-drawer-scrim--end {
+    justify-content: flex-end;
+  }
+
+  .ui-drawer-scrim--bottom {
+    align-items: flex-end;
+  }
+
+  .ui-drawer--start,
+  .ui-drawer--end,
+  .ui-drawer--bottom {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    box-shadow: var(--shadow-xl);
+    animation: ui-drawer-in var(--duration-slow) var(--ease-enter);
+  }
+
+  .ui-drawer--start,
+  .ui-drawer--end {
+    --_from: translateX(-100%);
+    width: min(360px, 100% - var(--space-8));
+    height: 100%;
+  }
+
+  .ui-drawer--end {
+    --_from: translateX(100%);
+  }
+
+  .ui-drawer--bottom {
+    --_from: translateY(100%);
+    width: 100%;
+    max-height: 85dvh;
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  }
+
+  @keyframes ui-drawer-fade {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ui-drawer-in {
+    from {
+      transform: var(--_from);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-drawer-scrim,
+    .ui-drawer {
+      animation: none;
+    }
+  }
 }

package/src/react/Drawer.tsx

@@ -1,15 +1,27 @@
 import { useEffect, useRef, type ReactNode } from "react";
+import "../styles/controls.css";
 import "./Drawer.css";
 
 /**
- * Mobile menu drawer. A full-width panel under the header, opened from the menu
- * button. Rows sit on whitespace with no separators.
+ * Menu drawer. Without `placement` it is the mobile menu: a full-width panel
+ * under the header, opened from the menu button. With `placement` it is a
+ * panel fixed to the start, end or bottom edge, over a scrim. Rows sit on
+ * whitespace with no separators.
  *
- * Focus moves to the first row on open and returns to the trigger on close; the
- * page behind does not scroll while the drawer is open. The trigger is the
- * consumer's IconButton: flip its aria-expanded and swap its label between
- * "Menu openen" and "Menu sluiten". Pass that trigger element through
- * `triggerRef` so focus returns to it on close.
+ * While open, Tab and Shift+Tab stay inside the drawer, Escape closes it, and
+ * the rest of the page is inert and does not scroll. Focus moves to the first
+ * row on open. On close it returns to `triggerRef`, or else to whatever had
+ * focus before the drawer opened.
+ *
+ * Without `placement` the trigger sits outside the drawer and stays usable, so
+ * the menu button can close it again. It is part of the Tab cycle. The trigger
+ * is the consumer's IconButton: flip its aria-expanded and swap its label
+ * between "Menu openen" and "Menu sluiten".
+ *
+ * Pass `closeLabel` to show a close button at the top of the drawer. A drawer
+ * with a `placement` covers its trigger, so give it one.
+ *
+ * Uses only hooks and DOM calls that preact/compat supports.
  */
 
 export interface DrawerLink {
@@ -37,6 +49,32 @@ export interface DrawerProps {
   /** Sticky call to action at the bottom, usually the cart button. */
   cta?: ReactNode;
   label?: string;
+  /**
+   * Leave unset for the panel under the header. "start", "end" or "bottom"
+   * fix the drawer to that edge of the viewport, over a scrim.
+   */
+  placement?: "start" | "end" | "bottom";
+  /** Shows a close button with this accessible name, like "Menu sluiten". */
+  closeLabel?: string;
+}
+
+const FOCUSABLE =
+  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+/** Sets `inert` on everything outside `root`, except branches holding `keep`. */
+function inertOutside(root: HTMLElement, keep: HTMLElement | null) {
+  const changed: Element[] = [];
+  let node: HTMLElement = root;
+  while (node !== document.body && node.parentElement) {
+    for (const sibling of Array.from(node.parentElement.children)) {
+      if (sibling === node || sibling.hasAttribute("inert")) continue;
+      if (keep && sibling.contains(keep)) continue;
+      sibling.setAttribute("inert", "");
+      changed.push(sibling);
+    }
+    node = node.parentElement;
+  }
+  return () => changed.forEach((el) => el.removeAttribute("inert"));
 }
 
 export default function Drawer({
@@ -47,19 +85,34 @@ export default function Drawer({
   children,
   cta,
   label = "Menu",
+  placement,
+  closeLabel,
 }: DrawerProps) {
-  const navRef = useRef<HTMLElement>(null);
+  const rootRef = useRef<HTMLElement>(null);
+  const scrimRef = useRef<HTMLDivElement>(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
 
-  // Focus the first row on open, return to the trigger on close.
+  // Make the page inert, move focus in on open, and send it back on close.
   useEffect(() => {
     if (!open) return;
-    const first = navRef.current?.querySelector<HTMLElement>(".ui-drawerlink");
-    const raf = requestAnimationFrame(() => first?.focus());
+    const root = rootRef.current;
+    if (!root) return;
+    const previous = document.activeElement as HTMLElement | null;
+    const trigger = triggerRef?.current ?? null;
+    const outer = placement ? (scrimRef.current ?? root) : root;
+    const restore = inertOutside(outer, placement ? null : trigger);
+    const first =
+      root.querySelector<HTMLElement>(".ui-drawerlink") ??
+      root.querySelector<HTMLElement>(FOCUSABLE) ??
+      root;
+    const raf = requestAnimationFrame(() => first.focus());
     return () => {
       cancelAnimationFrame(raf);
-      triggerRef?.current?.focus?.();
+      restore();
+      (trigger ?? previous)?.focus?.();
     };
-  }, [open, triggerRef]);
+  }, [open, placement, triggerRef]);
 
   // Lock the page behind the drawer.
   useEffect(() => {
@@ -71,20 +124,78 @@ export default function Drawer({
     };
   }, [open]);
 
-  // Escape closes.
+  // Escape closes. Tab and Shift+Tab cycle through the drawer, plus the
+  // trigger when the drawer sits under the header.
   useEffect(() => {
     if (!open) return;
     const onKey = (e: globalThis.KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const root = rootRef.current;
+      if (!root) return;
+      const items = Array.from(
+        root.querySelectorAll<HTMLElement>(FOCUSABLE),
+      ).filter((el) => el.getClientRects().length > 0);
+      const trigger = placement ? null : triggerRef?.current;
+      if (trigger && trigger.isConnected) {
+        const triggerFirst =
+          trigger.compareDocumentPosition(root) &
+          Node.DOCUMENT_POSITION_FOLLOWING;
+        if (triggerFirst) items.unshift(trigger);
+        else items.push(trigger);
+      }
+      e.preventDefault();
+      if (items.length === 0) {
+        root.focus();
+        return;
+      }
+      const index = items.indexOf(document.activeElement as HTMLElement);
+      const next =
+        index === -1
+          ? e.shiftKey
+            ? items.length - 1
+            : 0
+          : (index + (e.shiftKey ? -1 : 1) + items.length) % items.length;
+      items[next].focus();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
+  }, [open, placement, triggerRef]);
 
   if (!open) return null;
 
-  return (
-    <nav className="ui-drawer" aria-label={label} ref={navRef}>
+  const panel = (
+    <nav
+      className={`ui-drawer${placement ? ` ui-drawer--${placement}` : ""}`}
+      aria-label={label}
+      ref={rootRef}
+      tabIndex={-1}
+    >
+      {closeLabel && (
+        <button
+          className="ui-iconbtn ui-drawer__close"
+          type="button"
+          aria-label={closeLabel}
+          onClick={onClose}
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            aria-hidden="true"
+          >
+            <path d="M7 7l10 10M17 7L7 17" />
+          </svg>
+        </button>
+      )}
       {groups
         ? groups.map((group, gi) => (
             <div className="ui-drawer__group" key={gi}>
@@ -108,4 +219,21 @@ export default function Drawer({
       {cta && <div className="ui-drawer__cta">{cta}</div>}
     </nav>
   );
+
+  if (!placement) return panel;
+
+  return (
+    <div
+      ref={scrimRef}
+      className={`ui-drawer-scrim ui-drawer-scrim--${placement}`}
+      onMouseDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        // Keep the press from moving focus, so focus can go back on close.
+        e.preventDefault();
+        onClose();
+      }}
+    >
+      {panel}
+    </div>
+  );
 }

package/src/react/OrderStatus.css

@@ -0,0 +1,110 @@
+/* Order status. All values from the design-system tokens. */
+
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ui-ostatus {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    width: 100%;
+    max-width: 560px;
+    padding: var(--space-10) var(--space-8);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    color: var(--text);
+    font-family: var(--font-sans);
+    text-align: center;
+  }
+
+  .ui-ostatus__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    margin-bottom: var(--space-2);
+    border-radius: var(--radius-full);
+  }
+
+  .ui-ostatus--neutral .ui-ostatus__icon {
+    background: var(--surface-accent);
+    color: var(--surface-accent-fg);
+  }
+  .ui-ostatus--success .ui-ostatus__icon {
+    background: var(--success-bg);
+    color: var(--success);
+  }
+  .ui-ostatus--warning .ui-ostatus__icon {
+    background: var(--warning-bg);
+    color: var(--warning);
+  }
+  .ui-ostatus--danger .ui-ostatus__icon {
+    background: var(--danger-bg);
+    color: var(--danger);
+  }
+
+  .ui-ostatus__icon--spin svg {
+    animation: ui-ostatus-spin 900ms linear infinite;
+  }
+
+  @keyframes ui-ostatus-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .ui-ostatus__title {
+    margin: 0;
+    font-size: var(--text-2xl);
+    line-height: var(--leading-2xl);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-tight);
+  }
+
+  .ui-ostatus__ref {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+  }
+
+  .ui-ostatus__ref b {
+    font-weight: var(--weight-semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--text);
+  }
+
+  .ui-ostatus__body {
+    max-width: 44ch;
+    font-size: var(--text-base);
+    line-height: var(--leading-base);
+    color: var(--text-muted);
+  }
+
+  .ui-ostatus__body p {
+    margin: 0;
+  }
+
+  .ui-ostatus__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-3);
+    margin-top: var(--space-3);
+  }
+
+  @media (max-width: 700px) {
+    .ui-ostatus {
+      padding: var(--space-8) var(--space-5);
+    }
+  }
+
+  /* The ring stops. The icon and the title still say it is checking. */
+  @media (prefers-reduced-motion: reduce) {
+    .ui-ostatus__icon--spin svg {
+      animation: none !important;
+    }
+  }
+}

package/src/react/OrderStatus.tsx

@@ -0,0 +1,144 @@
+import type { ReactNode } from "react";
+import "./OrderStatus.css";
+
+/**
+ * Order status. The page Mollie sends the customer back to. The redirect says
+ * nothing about the payment, so the page starts at "checking" and the island
+ * around it asks the shop for the real status, then passes the new state in.
+ * It never shows success from the redirect alone.
+ *
+ * The block is one polite live region. Its role stays the same for every
+ * state, because a role that changes after load is not reliably announced. A
+ * failed payment is still read out, just without interrupting.
+ *
+ * Every state pairs an icon with a worded title. The body and the actions are
+ * the consumer's: what to do next, a retry button, a link to the order.
+ */
+
+export type OrderStatusState =
+  "checking" | "paid" | "open" | "failed" | "expired" | "cancelled";
+
+export interface OrderStatusProps {
+  state: OrderStatusState;
+  /** Overrides the default title for the state. */
+  title?: string;
+  /** Shown as "Bestelling #1088" under the title. */
+  orderNumber?: string;
+  orderLabel?: string;
+  /** h1 on the return page, h2 inside an account page. */
+  headingLevel?: 1 | 2;
+  children?: ReactNode;
+  /** Buttons or links, such as "Opnieuw betalen" or "Bekijk je bestelling". */
+  actions?: ReactNode;
+  className?: string;
+}
+
+const details: Record<
+  OrderStatusState,
+  { tone: string; icon: string; title: string }
+> = {
+  checking: {
+    tone: "neutral",
+    icon: "busy",
+    title: "We controleren je betaling",
+  },
+  paid: {
+    tone: "success",
+    icon: "check",
+    title: "Bedankt, je betaling is gelukt",
+  },
+  open: { tone: "neutral", icon: "clock", title: "We wachten op je betaling" },
+  failed: {
+    tone: "danger",
+    icon: "alert-circle",
+    title: "Je betaling is niet gelukt",
+  },
+  expired: {
+    tone: "warning",
+    icon: "alert-triangle",
+    title: "Je betaling is verlopen",
+  },
+  cancelled: {
+    tone: "warning",
+    icon: "close",
+    title: "Je hebt de betaling geannuleerd",
+  },
+};
+
+// The same strokes as the Astro Icon component, so both read as one set.
+const paths: Record<string, ReactNode> = {
+  busy: <path d="M12 3a9 9 0 1 0 9 9" />,
+  check: <path d="M5 13l4 4L19 7" />,
+  clock: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5l3 2" />
+    </>
+  ),
+  "alert-circle": (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 8v4.5M12 16v.5" />
+    </>
+  ),
+  "alert-triangle": <path d="M12 4l8.5 15h-17L12 4zM12 10v4M12 16.5v.5" />,
+  close: <path d="M7 7l10 10M17 7L7 17" />,
+};
+
+export function OrderStatus({
+  state,
+  title,
+  orderNumber,
+  orderLabel = "Bestelling",
+  headingLevel = 1,
+  children,
+  actions,
+  className,
+}: OrderStatusProps) {
+  const detail = details[state];
+  const Heading = headingLevel === 1 ? "h1" : "h2";
+
+  return (
+    <div
+      className={["ui-ostatus", `ui-ostatus--${detail.tone}`, className]
+        .filter(Boolean)
+        .join(" ")}
+      role="status"
+      aria-busy={state === "checking" ? "true" : undefined}
+      data-state={state}
+    >
+      <span
+        className={[
+          "ui-ostatus__icon",
+          state === "checking" && "ui-ostatus__icon--spin",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        aria-hidden="true"
+      >
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          {paths[detail.icon]}
+        </svg>
+      </span>
+      <Heading className="ui-ostatus__title">{title ?? detail.title}</Heading>
+      {orderNumber && (
+        <p className="ui-ostatus__ref">
+          {orderLabel} <b>{orderNumber}</b>
+        </p>
+      )}
+      {children && <div className="ui-ostatus__body">{children}</div>}
+      {actions && <div className="ui-ostatus__actions">{actions}</div>}
+    </div>
+  );
+}
+
+export default OrderStatus;

package/src/react/OrderTimeline.css

@@ -0,0 +1,104 @@
+/* Order timeline. All values from the design-system tokens. */
+
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ui-otime {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: var(--font-sans);
+    color: var(--text);
+  }
+
+  .ui-otime__step {
+    position: relative;
+    display: flex;
+    gap: var(--space-3);
+    padding-bottom: var(--space-5);
+  }
+
+  .ui-otime__step:last-child {
+    padding-bottom: 0;
+  }
+
+  /* The line runs from under one dot to the next. */
+  .ui-otime__step:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    top: 26px;
+    bottom: 2px;
+    left: 10px;
+    width: 2px;
+    border-radius: var(--radius-full);
+    background: var(--border);
+  }
+
+  .ui-otime__step.is-done:not(:last-child)::before {
+    background: var(--primary);
+  }
+
+  .ui-otime__dot {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border: 2px solid var(--border-strong);
+    border-radius: var(--radius-full);
+    background: var(--surface);
+    color: var(--primary-fg);
+  }
+
+  .is-done .ui-otime__dot {
+    border-color: var(--primary);
+    background: var(--primary);
+  }
+
+  /* Current: a ring with a filled centre, so it reads apart from done. */
+  .is-current .ui-otime__dot {
+    border-color: var(--primary);
+    box-shadow: inset 0 0 0 4px var(--surface);
+    background: var(--primary);
+  }
+
+  .is-stopped .ui-otime__dot {
+    border-color: var(--danger);
+    background: var(--danger-bg);
+    color: var(--danger);
+  }
+
+  .ui-otime__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0-5);
+    padding-top: 1px;
+    min-width: 0;
+  }
+
+  .ui-otime__label {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    font-weight: var(--weight-medium);
+  }
+
+  .is-current .ui-otime__label {
+    font-weight: var(--weight-semibold);
+  }
+
+  .is-todo .ui-otime__label {
+    color: var(--text-muted);
+    font-weight: var(--weight-regular);
+  }
+
+  .ui-otime__date,
+  .ui-otime__note {
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+}