@kwtv/components 0.7.2 → 0.9.0

package/src/react/OrderTimeline.tsx

@@ -0,0 +1,112 @@
+import "./OrderTimeline.css";
+
+/**
+ * Order timeline. Where one order is, for the customer: paid, being prepared,
+ * ready for pickup, picked up. One step per row, top to bottom, each with the
+ * date it happened. A React component because account pages are rendered in
+ * the browser from live data.
+ *
+ * A step is done, current or still to come. "stopped" ends the line for an
+ * order that will not go on, such as a cancelled one; the steps after it are
+ * left out by the consumer. Every state is a mark plus words, never colour
+ * alone: the current step carries aria-current="step" and the state is spelled
+ * out for screen readers.
+ */
+
+export type OrderStepState = "done" | "current" | "todo" | "stopped";
+
+export interface OrderStep {
+  label: string;
+  state: OrderStepState;
+  /** When it happened, e.g. "4 januari 2026, 14:32". Empty for steps to come. */
+  date?: string;
+  /** One line under the date, such as where to pick up. */
+  note?: string;
+}
+
+export interface OrderTimelineProps {
+  steps: OrderStep[];
+  /** Names the list, e.g. "Verloop van bestelling #1088". */
+  label: string;
+  /** Words read after each step's label. */
+  stateWords?: Record<OrderStepState, string>;
+  className?: string;
+}
+
+const defaultWords: Record<OrderStepState, string> = {
+  done: "afgerond",
+  current: "nu",
+  todo: "nog niet",
+  stopped: "gestopt",
+};
+
+function Mark({ state }: { state: OrderStepState }) {
+  if (state === "done") {
+    return (
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M5 13l4 4L19 7" />
+      </svg>
+    );
+  }
+  if (state === "stopped") {
+    return (
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+      >
+        <path d="M7 7l10 10M17 7L7 17" />
+      </svg>
+    );
+  }
+  return null;
+}
+
+export function OrderTimeline({
+  steps,
+  label,
+  stateWords = defaultWords,
+  className,
+}: OrderTimelineProps) {
+  return (
+    <ol
+      className={["ui-otime", className].filter(Boolean).join(" ")}
+      aria-label={label}
+    >
+      {steps.map((step, i) => (
+        <li
+          key={i}
+          className={`ui-otime__step is-${step.state}`}
+          aria-current={step.state === "current" ? "step" : undefined}
+        >
+          <span className="ui-otime__dot" aria-hidden="true">
+            <Mark state={step.state} />
+          </span>
+          <span className="ui-otime__text">
+            <b className="ui-otime__label">
+              {step.label}
+              <span className="ui-sr-only">, {stateWords[step.state]}</span>
+            </b>
+            {step.date && <span className="ui-otime__date">{step.date}</span>}
+            {step.note && <span className="ui-otime__note">{step.note}</span>}
+          </span>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+export default OrderTimeline;

package/src/styles/controls.css

@@ -158,6 +158,9 @@
     border: 1px solid transparent;
     border-radius: var(--radius-md);
     color: var(--text);
+    /* IconButton renders a link when it has an href. Keep the count pill
+       free of the link underline. */
+    text-decoration: none;
     cursor: pointer;
     transition:
       background-color var(--duration-fast) var(--ease-standard),

package/src/styles/feedback.css

@@ -0,0 +1,148 @@
+/*
+ * Feedback styles as plain, importable CSS. This is the single copy of the
+ * .ui-alert, .ui-empty and .ui-skel rules. Alert.astro, EmptyState.astro and
+ * Skeleton.astro import it themselves, so a pure-Astro app needs nothing extra.
+ * Bundlers emit it once, however many components and pages pull it in.
+ *
+ * React and Preact islands cannot render Astro components. An island that
+ * shows an alert, an empty state or a loading skeleton writes the same markup
+ * as the Astro component and imports this sheet once:
+ *
+ *   import "@kwtv/components/styles/feedback.css";
+ *
+ * Import `@kwtv/tokens/tokens.css` before this file.
+ */
+
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  /* ---- Alert ---------------------------------------------------------------- */
+  .ui-alert {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2-5, 0.625rem);
+    padding: var(--space-3) var(--space-4);
+    border-left: 3px solid currentColor;
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+  }
+
+  .ui-alert__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-self: flex-start;
+    margin-top: calc((var(--leading-sm, 1.375rem) - 16px) / 2);
+  }
+
+  /* Body keeps full strength; the left rule carries the tone. */
+  .ui-alert__body {
+    color: var(--text);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .ui-alert__title {
+    font-weight: var(--weight-semibold);
+  }
+
+  .ui-alert--info {
+    background: var(--surface-accent);
+    color: var(--surface-accent-fg, var(--primary));
+  }
+
+  .ui-alert--success {
+    background: var(--success-bg);
+    color: var(--success);
+  }
+
+  .ui-alert--warning {
+    background: var(--warning-bg);
+    color: var(--warning);
+  }
+
+  .ui-alert--danger {
+    background: var(--danger-bg);
+    color: var(--danger);
+  }
+
+  /* ---- Empty state ---------------------------------------------------------- */
+  .ui-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2);
+    padding: var(--space-8) var(--space-6);
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+  }
+
+  .ui-empty__title {
+    font-size: var(--text-lg);
+    font-weight: var(--weight-semibold);
+    color: var(--text);
+  }
+
+  .ui-empty__body {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    color: var(--text-muted);
+  }
+
+  /* The flex gap above spaces the action from the body. No extra margin. */
+
+  /* ---- Skeleton ------------------------------------------------------------- */
+  .ui-skel {
+    display: block;
+    background: var(--surface-hover);
+    background-image: linear-gradient(
+      90deg,
+      var(--surface-hover) 0%,
+      var(--border) 50%,
+      var(--surface-hover) 100%
+    );
+    background-size: 200% 100%;
+    border-radius: var(--radius-md);
+    animation: ui-skel-shimmer 1400ms ease-in-out infinite;
+  }
+
+  .ui-skel--img {
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    border-radius: 0;
+  }
+
+  .ui-skel--title {
+    height: 0.875rem;
+    border-radius: var(--radius-sm);
+  }
+
+  .ui-skel--line {
+    height: 0.625rem;
+    border-radius: var(--radius-sm);
+  }
+
+  .ui-skel--block {
+    height: 1rem;
+  }
+
+  @keyframes ui-skel-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  /* The shimmer stops for readers who ask for reduced motion. */
+  @media (prefers-reduced-motion: reduce) {
+    .ui-skel {
+      animation: none;
+      background-image: none;
+    }
+  }
+}