@timmo001/groundwork-ui 0.0.0-stage → 0.3.0

package/src/gw-notification-center.ts

@@ -0,0 +1,155 @@
+/**
+ * `gw-notification-center`: where notifications wait until they're dealt with.
+ * Docs: https://groundwork.timmo.dev/components/feedback/#notifications
+ *
+ * @module
+ */
+import { GwElement, css, h } from "./element.js";
+import "./gw-button.js";
+import "./gw-empty-state.js";
+import "./gw-notification.js";
+import { animateHeight } from "./motion.js";
+import { base } from "./styles.js";
+
+// MDI's bell-check-outline
+const emptyIcon =
+  "M11.5 21.97C10.7 21.85 10 21.22 10 20.38H11.5V21.97M21.5 13.5L20.08 12.09L16 16.17L13.92 14.09L12.5 15.5L16 19L21.5 13.5M6 17H11.08C11.03 17.33 11 17.66 11 18C11 18.34 11.03 18.67 11.08 19H3V18L5 16V10C5 6.9 7.03 4.17 10 3.29V3A2 2 0 0 1 12 1A2 2 0 0 1 14 3V3.29C16.97 4.17 19 6.9 19 10V11.18C18.37 11.07 17.7 11 17 11V10A5 5 0 0 0 12 5A5 5 0 0 0 7 10V17H6Z";
+
+/**
+ * Where notifications wait until they're dealt with: a list of
+ * `gw-notification` cards with Clear all, and an empty state once nothing's
+ * left. Put it in a page, a panel or a popover from a bell button. Each
+ * card folds away when dismissed, and the list closes up smoothly. It fires
+ * `clear` when Clear all is pressed.
+ *
+ * @element gw-notification-center
+ * @summary A list of notifications with Clear all and an empty state.
+ *
+ * @attr {string} heading - The list's heading. Defaults to `Notifications`.
+ *
+ * @slot - The `gw-notification` cards.
+ *
+ * @fires clear - When Clear all is pressed.
+ */
+export class GwNotificationCenter extends GwElement {
+  static override properties = {
+    heading: {},
+  } as const;
+
+  static override styles = [
+    base,
+    css`
+      :host {
+        display: block;
+      }
+
+      header {
+        display: flex;
+        gap: var(--gw-space-2);
+        align-items: center;
+        justify-content: space-between;
+        margin-block-end: var(--gw-space-2);
+      }
+
+      h2 {
+        margin: 0;
+        font-size: var(--gw-font-size-m);
+        font-weight: var(--gw-font-weight-strong);
+        color: var(--gw-color-text-strong);
+      }
+
+      .list {
+        display: grid;
+        gap: var(--gw-space-2);
+      }
+
+      [hidden] {
+        display: none;
+      }
+
+      gw-empty-state::part(empty) {
+        padding-block: var(--gw-space-6);
+      }
+    `,
+  ];
+
+  declare heading: string;
+
+  readonly #heading = h("h2");
+
+  readonly #clear = h(
+    "gw-button",
+    { size: "small", variant: "neutral", appearance: "plain" },
+    "Clear all",
+  );
+
+  readonly #list = h("div", { class: "list", role: "list" }, h("slot"));
+
+  readonly #empty = h(
+    "gw-empty-state",
+    { icon: emptyIcon, heading: "You're all caught up" },
+    h("p", {}, "New notifications show up here."),
+  );
+
+  readonly #body = h("div", {}, this.#list, this.#empty);
+
+  #observer: MutationObserver | undefined;
+
+  constructor() {
+    super();
+    this.heading = "Notifications";
+  }
+
+  /** Dismisses every notification. */
+  clear() {
+    this.dispatchEvent(new Event("clear", { bubbles: true, composed: true }));
+
+    for (const item of this.querySelectorAll("gw-notification")) item.dismiss();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.#observer = new MutationObserver(() => this.#refresh());
+    this.#observer.observe(this, { childList: true });
+    this.#refresh(false);
+  }
+
+  override disconnectedCallback() {
+    this.#observer?.disconnect();
+    super.disconnectedCallback();
+  }
+
+  #refresh(animate = true) {
+    const before = this.#body.offsetHeight;
+    const empty = this.querySelector("gw-notification") === null;
+
+    this.#list.hidden = empty;
+    this.#empty.hidden = !empty;
+    this.#clear.hidden = empty;
+
+    for (const item of this.querySelectorAll("gw-notification")) {
+      item.setAttribute("role", "listitem");
+    }
+
+    if (animate) animateHeight(this.#body, before);
+  }
+
+  protected override create(root: ShadowRoot) {
+    this.#clear.addEventListener("click", () => {
+      this.clear();
+    });
+    root.append(h("header", {}, this.#heading, this.#clear), this.#body);
+  }
+
+  protected override update() {
+    this.#heading.textContent = this.heading;
+  }
+}
+
+GwNotificationCenter.define("gw-notification-center");
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "gw-notification-center": GwNotificationCenter;
+  }
+}

package/src/gw-notification.ts

@@ -0,0 +1,222 @@
+/**
+ * `gw-notification`: one notification card, in the center or by its entry.
+ * Docs: https://groundwork.timmo.dev/components/feedback/#notifications
+ *
+ * @module
+ */
+import { GwElement, css, h } from "./element.js";
+import "./gw-button.js";
+import { fadeEasing, motionDuration, reducedMotion } from "./motion.js";
+import { base, createIcon, setIconPath, type Tone } from "./styles.js";
+
+// MDI's close
+const closeIcon =
+  "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
+
+/**
+ * Something new the person needs to decide or know, kept in a
+ * `gw-notification-center` until it's dealt with. It has an icon, a heading,
+ * a line of text, when it happened and up to two actions. Its close button
+ * dismisses it: it fires `dismiss`, then folds away and removes itself,
+ * unless the event is cancelled.
+ *
+ * @element gw-notification
+ * @summary One notification card, dismissed with its close button.
+ *
+ * @attr {string} heading - The heading.
+ * @attr {string} icon - SVG path data for its icon.
+ * @attr {"neutral"|"accent"|"info"|"success"|"warning"|"danger"|"important"} tone - The icon's color. Defaults to `neutral`.
+ * @attr {string} time - When it happened, as shown, such as `2 min ago`.
+ * @attr {boolean} unread - Marks it with a stripe until it's seen.
+ *
+ * @slot - A line of text.
+ * @slot actions - Up to two buttons.
+ *
+ * @csspart card - The card.
+ *
+ * @fires dismiss - When the close button is pressed. Cancel it to keep the card.
+ */
+export class GwNotification extends GwElement {
+  static override properties = {
+    heading: {},
+    icon: {},
+    tone: { reflect: true },
+    time: {},
+    unread: { type: "boolean", reflect: true },
+  } as const;
+
+  static override styles = [
+    base,
+    css`
+      :host {
+        display: block;
+      }
+
+      .card {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: var(--gw-space-1) var(--gw-space-2);
+        align-items: start;
+        padding: var(--gw-space-3);
+        font-size: var(--gw-font-size-s);
+        color: var(--gw-color-text-primary);
+        background: var(--gw-color-surface-raised);
+        border: var(--gw-border-width) solid var(--gw-color-border-quiet);
+        border-radius: var(--gw-radius-control);
+      }
+
+      /* An inset stripe, so unread and read cards line up */
+      :host([unread]) .card {
+        box-shadow: inset calc(var(--gw-border-width) * 4) 0 0
+          var(--gw-tone, var(--gw-color-accent));
+      }
+
+      :host([unread]:dir(rtl)) .card {
+        box-shadow: inset calc(var(--gw-border-width) * -4) 0 0
+          var(--gw-tone, var(--gw-color-accent));
+      }
+
+      .card > .icon {
+        margin-block-start: 0.1em;
+        color: var(--gw-tone, var(--gw-color-text-secondary));
+      }
+
+      .card > .icon[hidden] {
+        display: none;
+      }
+
+      .body {
+        display: grid;
+        gap: var(--gw-space-1);
+        min-width: 0;
+      }
+
+      strong {
+        font-weight: var(--gw-font-weight-strong);
+        color: var(--gw-color-text-strong);
+      }
+
+      time {
+        font-size: var(--gw-font-size-xs);
+        color: var(--gw-color-text-secondary);
+      }
+
+      time:empty {
+        display: none;
+      }
+
+      ::slotted(p) {
+        margin: 0;
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gw-space-1);
+        margin-block-start: var(--gw-space-1);
+      }
+
+      .close {
+        margin: calc(var(--gw-space-1) * -1);
+      }
+    `,
+  ];
+
+  declare heading: string;
+  declare icon: string;
+  declare tone: Tone;
+  declare time: string;
+  declare unread: boolean;
+
+  readonly #icon = createIcon("");
+
+  readonly #heading = h("strong");
+
+  readonly #time = h("time");
+
+  readonly #close = h(
+    "gw-button",
+    {
+      class: "close",
+      variant: "neutral",
+      appearance: "plain",
+      size: "xs",
+      labels: "hide",
+      icon: closeIcon,
+    },
+    "Dismiss",
+  );
+
+  constructor() {
+    super();
+    this.heading = "";
+    this.icon = "";
+    this.tone = "neutral";
+    this.time = "";
+    this.unread = false;
+  }
+
+  /** Fires `dismiss`, then folds away and removes itself unless that's cancelled. */
+  dismiss() {
+    const event = new Event("dismiss", {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+
+    if (!this.dispatchEvent(event)) return;
+
+    const duration = reducedMotion()
+      ? 0
+      : motionDuration(this, "--gw-motion-normal", 250);
+
+    const leave = this.animate(
+      [
+        { opacity: 1, height: `${this.offsetHeight}px`, overflow: "clip" },
+        { opacity: 0, height: "0px", overflow: "clip" },
+      ],
+      { duration, easing: fadeEasing, fill: "forwards" },
+    );
+
+    leave.addEventListener("finish", () => this.remove());
+    leave.addEventListener("cancel", () => this.remove());
+  }
+
+  protected override create(root: ShadowRoot) {
+    this.#close.addEventListener("click", () => {
+      this.dismiss();
+    });
+    root.append(
+      h(
+        "article",
+        { class: "card", part: "card" },
+        this.#icon,
+        h(
+          "div",
+          { class: "body" },
+          this.#heading,
+          h("slot"),
+          this.#time,
+          h("div", { class: "actions" }, h("slot", { name: "actions" })),
+        ),
+        this.#close,
+      ),
+    );
+  }
+
+  protected override update() {
+    setIconPath(this.#icon, this.icon);
+    this.#icon.toggleAttribute("hidden", !this.icon);
+    this.#heading.textContent = this.heading;
+    this.#heading.hidden = !this.heading;
+    this.#time.textContent = this.time;
+  }
+}
+
+GwNotification.define("gw-notification");
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "gw-notification": GwNotification;
+  }
+}