@sierragridteam/design-system 0.0.0-stage → 0.3.1

package/src/lib/dialog.ts

@@ -0,0 +1,85 @@
+/**
+ * Modal dialogs on the native <dialog> element: focus trapping, Escape and the
+ * top layer come from the browser. Used by the admin editors.
+ */
+import { el, icon } from './dom';
+
+export interface DialogOptions {
+  title: string;
+  /** Shown above the title, e.g. "New resource". */
+  kicker?: string;
+  wide?: boolean;
+  /**
+   * Called when the dialog is about to close by Escape, the close button or
+   * Cancel. Return false to keep it open (e.g. to confirm discarding changes).
+   */
+  beforeClose?: () => boolean;
+}
+
+export interface Dialog {
+  root: HTMLDialogElement;
+  /** Replace the scrolling body. */
+  body: HTMLElement;
+  /** Replace the footer's contents (actions). */
+  footer: HTMLElement;
+  setTitle(title: string): void;
+  /** Close without asking beforeClose. */
+  close(): void;
+  /** Close as if the admin cancelled (asks beforeClose). */
+  requestClose(): void;
+}
+
+let dialogCount = 0;
+
+export function openDialog(opts: DialogOptions): Dialog {
+  const titleId = `dialog-title-${++dialogCount}`;
+  const title = el('h2', { class: 'dialog__title', id: titleId }, opts.title);
+  const body = el('div', { class: 'dialog__body' });
+  const footer = el('div', { class: 'dialog__footer' });
+  const closeBtn = el(
+    'button',
+    { class: 'btn btn--ghost btn--sm btn--icon', type: 'button', 'aria-label': 'Close' },
+    icon('x')
+  );
+  const root = el(
+    'dialog',
+    { class: `dialog${opts.wide ? ' dialog--wide' : ''}`, 'aria-labelledby': titleId },
+    el(
+      'div',
+      { class: 'dialog__header' },
+      el('div', {}, opts.kicker && el('span', { class: 'kicker' }, opts.kicker), title),
+      closeBtn
+    ),
+    body,
+    footer
+  );
+
+  const close = () => {
+    if (root.open) root.close();
+    root.remove();
+  };
+  const requestClose = () => {
+    if (opts.beforeClose && !opts.beforeClose()) return;
+    close();
+  };
+
+  closeBtn.addEventListener('click', requestClose);
+  // The browser may close a modal itself (Chrome does on a second Escape without
+  // a click in between, skipping "cancel"); treat that as discarding.
+  root.addEventListener('close', () => root.remove());
+  root.addEventListener('cancel', (e) => {
+    e.preventDefault();
+    requestClose();
+  });
+
+  document.body.appendChild(root);
+  root.showModal();
+  return {
+    root,
+    body,
+    footer,
+    setTitle: (t) => (title.textContent = t),
+    close,
+    requestClose,
+  };
+}

package/src/lib/dom.ts

@@ -0,0 +1,68 @@
+/** Small DOM helpers for client-rendered UI. No framework, on purpose. */
+
+type Child = Node | string | number | null | undefined | false | Child[];
+
+export function el<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  attrs: Record<string, string | number | boolean | null | undefined | ((e: Event) => void)> = {},
+  ...children: Child[]
+): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value === null || value === undefined || value === false) continue;
+    if (typeof value === 'function') {
+      node.addEventListener(key.replace(/^on/, '').toLowerCase(), value as EventListener);
+    } else if (key === 'class') {
+      node.className = String(value);
+    } else if (value === true) {
+      node.setAttribute(key, '');
+    } else {
+      node.setAttribute(key, String(value));
+    }
+  }
+  append(node, children);
+  return node;
+}
+
+export function append(parent: Node, children: Child[]): void {
+  for (const child of children) {
+    if (child === null || child === undefined || child === false) continue;
+    if (Array.isArray(child)) append(parent, child);
+    else parent.appendChild(child instanceof Node ? child : document.createTextNode(String(child)));
+  }
+}
+
+/** An <svg><use> referencing the page's icon sprite. */
+export function icon(name: string, cls = 'icon'): SVGSVGElement {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('class', cls);
+  svg.setAttribute('aria-hidden', 'true');
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttribute('href', `#i-${name}`);
+  svg.appendChild(use);
+  return svg;
+}
+
+export function qs<T extends Element = HTMLElement>(
+  selector: string,
+  root: ParentNode = document
+): T {
+  const node = root.querySelector<T>(selector);
+  if (!node) throw new Error(`missing element: ${selector}`);
+  return node;
+}
+
+export function replaceChildren(parent: Element, ...children: Child[]): void {
+  parent.replaceChildren();
+  append(parent, children);
+}
+
+export function setBusy(button: HTMLButtonElement, busy: boolean): void {
+  button.classList.toggle('is-busy', busy);
+  button.disabled = busy;
+}
+
+/** Skeleton rows for a list while it loads. */
+export function skeletonRows(count = 3): HTMLElement[] {
+  return Array.from({ length: count }, () => el('div', { class: 'skeleton skeleton--row' }));
+}

package/src/lib/toast.ts

@@ -0,0 +1,22 @@
+import { el, icon } from './dom';
+
+export type ToastTone = 'info' | 'error' | 'warn';
+
+/** Non-blocking notice, bottom right. Errors stay until dismissed. */
+export function toast(message: string, tone: ToastTone = 'info'): void {
+  const host = document.getElementById('toasts');
+  if (!host) return;
+  const node = el('div', {
+    class: `toast${tone === 'info' ? '' : ` toast--${tone}`}`,
+    role: 'status',
+  });
+  const close = el(
+    'button',
+    { class: 'toast__close', type: 'button', 'aria-label': 'Dismiss' },
+    icon('x')
+  );
+  close.addEventListener('click', () => node.remove());
+  node.append(el('span', {}, message), close);
+  host.appendChild(node);
+  if (tone !== 'error') setTimeout(() => node.remove(), 5000);
+}

package/src/styles/base.css

@@ -0,0 +1,165 @@
+/* Element defaults and accessibility primitives. Tokens only. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html {
+  color-scheme: light;
+  scroll-behavior: smooth;
+  scroll-padding-top: calc(var(--topbar-h) + var(--space-4));
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  min-height: 100dvh;
+  font-family: var(--font-ui);
+  font-size: var(--fs-body);
+  font-weight: var(--fw-regular);
+  line-height: var(--lh-body);
+  color: var(--ink-body);
+  background: var(--surface-page);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+}
+
+h1,
+h2 {
+  font-family: var(--font-display);
+  font-weight: var(--fw-medium);
+  line-height: var(--lh-heading);
+  letter-spacing: var(--tracking-tight);
+  color: var(--ink-strong);
+  text-wrap: balance;
+}
+
+h1 {
+  font-size: var(--fs-h1);
+}
+
+h2 {
+  font-size: var(--fs-h2);
+}
+
+h3,
+h4 {
+  font-family: var(--font-ui);
+  font-size: var(--fs-h3);
+  font-weight: var(--fw-semibold);
+  line-height: var(--lh-ui);
+  color: var(--ink-strong);
+}
+
+p {
+  text-wrap: pretty;
+}
+
+a {
+  color: var(--brand-green);
+  text-decoration: none;
+  text-underline-offset: 0.18em;
+}
+
+a:hover {
+  color: var(--brand-green-hover);
+  text-decoration: underline;
+}
+
+p a,
+li a {
+  text-decoration: underline;
+}
+
+strong {
+  font-weight: var(--fw-semibold);
+  color: var(--ink-strong);
+}
+
+code,
+kbd,
+samp {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--brand-green) 18%, transparent);
+}
+
+:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
+  outline: 2px solid var(--brand-green);
+  outline-offset: 2px;
+}
+
+.skip-link {
+  position: absolute;
+  top: var(--space-2);
+  left: var(--space-2);
+  z-index: var(--z-skiplink);
+  padding: var(--space-2) var(--space-4);
+  background: var(--brand-green);
+  color: var(--surface-page);
+  font-size: var(--fs-label-lg);
+  font-weight: var(--fw-semibold);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  border-radius: var(--radius-sm);
+  transform: translateY(-200%);
+  transition: transform var(--transition);
+}
+
+.skip-link:focus {
+  transform: none;
+  text-decoration: none;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}