@kwtv/components 0.1.0

package/src/react/Modal.tsx

@@ -0,0 +1,152 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import "./Modal.css";
+
+/**
+ * Modal and sheet. Only for a decision that cannot wait.
+ *
+ * role="dialog" with aria-modal="true" and aria-labelledby pointing at the
+ * title. Focus moves into the dialog on open, stays trapped, and returns to the
+ * trigger on close. Escape closes. The destructive action is never the
+ * auto-focused one: focus lands on the panel, and the first Tab reaches the
+ * safe action first when actions are ordered safe-then-destructive.
+ *
+ * On mobile (<= 700px) the same component becomes a bottom sheet. Pass
+ * variant="sheet" to force the sheet presentation at any width, as the filter
+ * panel does.
+ */
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  /** Footer actions. Order them safe first, destructive last. */
+  actions?: ReactNode;
+  /** "dialog" is a centred dialog on desktop, sheet on mobile. "sheet" is always a bottom sheet. */
+  variant?: "dialog" | "sheet";
+  /** Hide the visible title (still used as the accessible name). */
+  hideTitle?: boolean;
+  className?: string;
+}
+
+const FOCUSABLE =
+  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+export default function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  actions,
+  variant = "dialog",
+  hideTitle = false,
+  className,
+}: ModalProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const previouslyFocused = useRef<HTMLElement | null>(null);
+  const titleId = useId();
+
+  // Move focus in on open, return it on close.
+  useEffect(() => {
+    if (!open) return;
+    previouslyFocused.current = document.activeElement as HTMLElement | null;
+    // Focus the panel itself, not the first action, so a destructive button is
+    // never the auto-focused target.
+    const panel = panelRef.current;
+    const raf = requestAnimationFrame(() => panel?.focus());
+    return () => {
+      cancelAnimationFrame(raf);
+      previouslyFocused.current?.focus?.();
+    };
+  }, [open]);
+
+  // Lock body scroll while open.
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const items = Array.from(
+        panel.querySelectorAll<HTMLElement>(FOCUSABLE),
+      ).filter((el) => el.offsetParent !== null || el === document.activeElement);
+      if (items.length === 0) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey) {
+        if (active === first || active === panel) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    },
+    [onClose],
+  );
+
+  if (!open) return null;
+
+  const isSheet = variant === "sheet";
+
+  return (
+    <div
+      className={`ui-scrim${isSheet ? " ui-scrim--bottom" : ""}`}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={panelRef}
+        className={[
+          "ui-modal",
+          isSheet && "ui-sheet",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+        onKeyDown={onKeyDown}
+      >
+        {isSheet && <span className="ui-sheet__grip" aria-hidden="true" />}
+        <b
+          className={`ui-modal__title${hideTitle ? " ui-sr-only" : ""}`}
+          id={titleId}
+        >
+          {title}
+        </b>
+        <div className="ui-modal__body">{children}</div>
+        {actions && <div className="ui-modal__actions">{actions}</div>}
+      </div>
+    </div>
+  );
+}

package/src/react/NewsCarousel.css

@@ -0,0 +1,86 @@
+/* News carousel. Playful layer, prefix pl-. All values from the tokens. */
+
+.pl-news {
+  position: relative;
+  display: grid;
+}
+
+/* Items stack; the active one fades in. Off-screen items cannot be reached. */
+.pl-news-item {
+  grid-area: 1 / 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  text-decoration: none;
+  color: var(--text);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 420ms var(--ease-standard);
+}
+
+.pl-news-item[data-on] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.pl-news-item:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.ui-eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.ui-newsrow__title {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text);
+}
+
+.pl-news-dots {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  margin-top: var(--space-2);
+}
+
+.pl-news-dot {
+  width: 7px;
+  height: 7px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--border);
+  cursor: pointer;
+  transition:
+    width var(--duration-base) var(--ease-enter),
+    background-color var(--duration-base) var(--ease-standard);
+  outline-offset: 4px;
+}
+
+.pl-news-dot[data-on] {
+  width: 22px;
+  background: var(--sage-xdark);
+}
+
+.pl-news-dot:focus-visible {
+  outline: 2px solid var(--focus);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pl-news-item,
+  .pl-news-dot {
+    transition: none;
+  }
+}

package/src/react/NewsCarousel.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState } from "react";
+import "./NewsCarousel.css";
+
+/**
+ * News carousel. Cross-fades between items on a timer. Dots are real buttons
+ * with a label per item. The off-screen item is pointer-events:none and cannot
+ * be tabbed into. The loop pauses on hover, on focus, and when the tab is
+ * hidden, and stops entirely under prefers-reduced-motion.
+ */
+
+export interface NewsItem {
+  eyebrow: string;
+  title: string;
+  href: string;
+}
+
+export interface NewsCarouselProps {
+  items: NewsItem[];
+  /** Advance interval in ms. */
+  interval?: number;
+  /** Accessible label builder for each dot. */
+  dotLabel?: (index: number, item: NewsItem) => string;
+}
+
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+export default function NewsCarousel({
+  items,
+  interval = 5000,
+  dotLabel = (i) => `Nieuwsbericht ${i + 1}`,
+}: NewsCarouselProps) {
+  const [active, setActive] = useState(0);
+  const paused = useRef(false);
+
+  useEffect(() => {
+    if (items.length <= 1 || prefersReducedMotion()) return;
+
+    const tick = () => {
+      // document.hidden pauses the loop while the tab is in the background.
+      if (!paused.current && !document.hidden) {
+        setActive((a) => (a + 1) % items.length);
+      }
+    };
+    const timer = setInterval(tick, interval);
+    return () => clearInterval(timer);
+  }, [items.length, interval]);
+
+  const pause = () => {
+    paused.current = true;
+  };
+  const resume = () => {
+    paused.current = false;
+  };
+
+  return (
+    <div>
+      <div
+        className="pl-news"
+        onMouseEnter={pause}
+        onMouseLeave={resume}
+        onFocusCapture={pause}
+        onBlurCapture={resume}
+      >
+        {items.map((item, i) => (
+          <a
+            key={item.href + item.title}
+            className="pl-news-item"
+            href={item.href}
+            data-on={i === active ? "1" : undefined}
+            aria-hidden={i === active ? undefined : "true"}
+            tabIndex={i === active ? undefined : -1}
+          >
+            <span className="ui-eyebrow">{item.eyebrow}</span>
+            <span className="ui-newsrow__title">{item.title}</span>
+          </a>
+        ))}
+      </div>
+      {items.length > 1 && (
+        <div className="pl-news-dots">
+          {items.map((item, i) => (
+            <button
+              key={i}
+              type="button"
+              className="pl-news-dot"
+              data-on={i === active ? "1" : undefined}
+              aria-label={dotLabel(i, item)}
+              aria-current={i === active ? "true" : undefined}
+              onClick={() => setActive(i)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/QuantityStepper.css

@@ -0,0 +1,93 @@
+/* Quantity stepper. All values from the design-system tokens. */
+
+.ui-qty {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.ui-qty button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: 0;
+  color: var(--text);
+  font-size: var(--text-lg);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-qty button:hover:not(:disabled) {
+  background: var(--surface-hover);
+}
+
+.ui-qty button:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: -2px;
+}
+
+.ui-qty button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* The bin, shown instead of minus when the last one would be removed.
+   --danger, because it destroys the line rather than decrementing it. The
+   icon is not the only signal: the button carries an aria-label, and hover
+   fills it so the intent is obvious before the click. */
+/* `.ui-qty button` is (0,1,1) and would otherwise win over a lone class, so
+   these are scoped the same way rather than reaching for !important. */
+.ui-qty button.ui-qty__remove {
+  color: var(--danger);
+}
+.ui-qty button.ui-qty__remove:hover:not(:disabled) {
+  background: var(--danger-bg);
+}
+.ui-qty__remove svg {
+  display: block;
+}
+
+.ui-qty__val {
+  min-width: 40px;
+  text-align: center;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+  font-variant-numeric: tabular-nums;
+  color: var(--text);
+}
+
+/* Large, 48 px, for the product page. */
+.ui-qty--lg button {
+  width: 48px;
+  height: 48px;
+  font-size: var(--text-xl);
+}
+.ui-qty--lg .ui-qty__val {
+  min-width: 48px;
+  font-size: var(--text-base);
+}
+
+.ui-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-qty button {
+    transition: none;
+  }
+}

package/src/react/QuantityStepper.tsx

@@ -0,0 +1,143 @@
+import { useRef, useState, useEffect } from "react";
+import "./QuantityStepper.css";
+
+/**
+ * Quantity stepper. Minus, value, plus. The value is text, not an input, so it
+ * is read as part of the row; the buttons carry "Minder" / "Meer" labels. When
+ * plus is disabled at the stock limit, the consumer states the reason next to
+ * it, never implied by the grey button alone.
+ *
+ * 40 px default for the cart, 48 px (size="lg") next to the add-to-cart button
+ * on a product page.
+ *
+ * At the minimum there is nothing sensible for minus to do, so `atMinAction`
+ * picks between the two honest answers:
+ *
+ *   "disable"  the default. Minus greys out. Correct anywhere the quantity is
+ *              just a number, such as a product page, where removing is not a
+ *              thing the control can do.
+ *   "remove"   minus becomes a bin that removes the line. For the cart, where
+ *              stepping below one really does mean "take this out". Needs
+ *              onRemove; without it the prop falls back to "disable" rather
+ *              than rendering a button that does nothing.
+ *
+ * The bin is not a second confirmation step. If removal is hard to undo, the
+ * consumer follows it with an undo affordance, which is what the Toast is for.
+ */
+
+export interface QuantityStepperProps {
+  value: number;
+  min?: number;
+  max?: number;
+  onChange?: (value: number) => void;
+  size?: "md" | "lg";
+  decrementLabel?: string;
+  incrementLabel?: string;
+  /** Template for the polite announcement. Receives the new value. */
+  announce?: (value: number) => string;
+  /**
+   * What the minus button does once `value` is at `min`.
+   * "remove" requires `onRemove`.
+   */
+  atMinAction?: "disable" | "remove";
+  /** Called instead of onChange when the bin is pressed. */
+  onRemove?: () => void;
+  removeLabel?: string;
+  /** Announced after a remove. The row usually disappears, so the message is
+   *  the only thing left to say what happened. */
+  announceRemove?: string;
+}
+
+export default function QuantityStepper({
+  value,
+  min = 1,
+  max = Infinity,
+  onChange,
+  size = "md",
+  decrementLabel = "Minder",
+  incrementLabel = "Meer",
+  announce = (v) => `Aantal: ${v}`,
+  atMinAction = "disable",
+  onRemove,
+  removeLabel = "Verwijderen",
+  announceRemove = "Artikel verwijderd",
+}: QuantityStepperProps) {
+  const [message, setMessage] = useState("");
+  const firstRender = useRef(true);
+
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    setMessage(announce(value));
+  }, [value, announce]);
+
+  const atMin = value <= min;
+  const atMax = value >= max;
+
+  // "remove" without a handler would render a bin that does nothing, which is
+  // worse than a disabled minus: it looks like the row can be removed and then
+  // silently fails. Fall back instead.
+  const removes = atMin && atMinAction === "remove" && Boolean(onRemove);
+
+  const step = (delta: number) => {
+    const next = Math.min(max, Math.max(min, value + delta));
+    if (next !== value) onChange?.(next);
+  };
+
+  const handleRemove = () => {
+    // Say it before the row goes. Once the node is gone the live region goes
+    // with it and the announcement is lost.
+    setMessage(announceRemove);
+    onRemove?.();
+  };
+
+  return (
+    <div className={`ui-qty${size === "lg" ? " ui-qty--lg" : ""}`}>
+      {removes ? (
+        <button
+          type="button"
+          className="ui-qty__remove"
+          aria-label={removeLabel}
+          onClick={handleRemove}
+        >
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M4 7h16M10 4h4M9 7v12M15 7v12M6 7l1 13h10l1-13" />
+          </svg>
+        </button>
+      ) : (
+        <button
+          type="button"
+          aria-label={decrementLabel}
+          disabled={atMin}
+          onClick={() => step(-1)}
+        >
+          −
+        </button>
+      )}
+      <span className="ui-qty__val">{value}</span>
+      <button
+        type="button"
+        aria-label={incrementLabel}
+        disabled={atMax}
+        onClick={() => step(1)}
+      >
+        +
+      </button>
+      <span className="ui-sr-only" role="status" aria-live="polite">
+        {message}
+      </span>
+    </div>
+  );
+}