@fristil/designsystem 0.3.0 → 0.5.0

package/src/components/frittstaende/connection-status/fs-connection-status.ts

@@ -0,0 +1,144 @@
+import {
+  CONNECTION_STATUS_BAR_CLASS,
+  CONNECTION_STATUS_CLASS,
+} from "./connection-status.js"
+
+export const FS_CONNECTION_STATUS_TAG = "fs-connection-status" as const
+
+const STANDARD_OFFLINE = "Ingen forbindelse. Det du skriver blir ikke lagret."
+const STANDARD_ONLINE = "Forbindelsen er tilbake."
+
+/** Hvor lenge «tilbake på nett» blir stående. */
+const KVITTERING_MS = 4000
+
+/**
+ * Sier fra når forbindelsen til serveren er borte.
+ *
+ * Serveren kan per definisjon ikke fortelle deg dette. Er den utilgjengelig,
+ * kommer det ingenting derfra. Derfor er dette en frittstående komponent som
+ * eier alt innholdet sitt.
+ *
+ * Den er ikke pynt i en app som henter innhold fra serveren underveis. En
+ * side som mister strømmen sin ser helt normal ut, men er frosset, og en
+ * bruker som fyller ut et skjema inn i en død forbindelse mister alt.
+ *
+ * `navigator.onLine` sier bare om maskinen har et nettverk, ikke om serveren
+ * svarer. Derfor finnes `reportFailure()` og `reportSuccess()`, som appen
+ * kaller når et kall feiler eller lykkes.
+ *
+ * ```ts
+ * const status = document.querySelector("fs-connection-status")
+ * try {
+ *   await fetch("/api/lagre", { method: "POST", body })
+ *   status.reportSuccess()
+ * } catch {
+ *   status.reportFailure()
+ * }
+ * ```
+ */
+export class FsConnectionStatus extends HTMLElement {
+  static observedAttributes = ["offline-text", "online-text"]
+
+  private bar?: HTMLElement
+  private timer?: number
+  /** Sant når appen har meldt at et kall feilet, uavhengig av navigator. */
+  private failing = false
+
+  get offlineText(): string {
+    return this.getAttribute("offline-text") ?? STANDARD_OFFLINE
+  }
+
+  get onlineText(): string {
+    return this.getAttribute("online-text") ?? STANDARD_ONLINE
+  }
+
+  connectedCallback(): void {
+    this.classList.add(CONNECTION_STATUS_CLASS)
+    window.addEventListener("offline", this.handleOffline)
+    window.addEventListener("online", this.handleOnline)
+    if (!navigator.onLine) this.showOffline()
+  }
+
+  disconnectedCallback(): void {
+    window.removeEventListener("offline", this.handleOffline)
+    window.removeEventListener("online", this.handleOnline)
+    if (this.timer) window.clearTimeout(this.timer)
+    this.timer = undefined
+  }
+
+  private ensureBar(): HTMLElement {
+    if (this.bar) return this.bar
+
+    const bar = document.createElement("div")
+    bar.className = CONNECTION_STATUS_BAR_CLASS
+    // polite og ikke assertive: beskjeden er viktig, men skal ikke avbryte
+    // midt i et ord. Den blir stående til forbindelsen er tilbake.
+    bar.setAttribute("role", "status")
+    bar.setAttribute("aria-live", "polite")
+    this.append(bar)
+    this.bar = bar
+    return bar
+  }
+
+  private showOffline(): void {
+    if (this.timer) window.clearTimeout(this.timer)
+    const bar = this.ensureBar()
+    bar.dataset.state = "offline"
+    bar.textContent = this.offlineText
+    this.emit("connection-lost")
+  }
+
+  private showOnline(): void {
+    if (!this.bar) return
+    const bar = this.bar
+    bar.dataset.state = "online"
+    bar.textContent = this.onlineText
+    this.emit("connection-restored")
+
+    this.timer = window.setTimeout(() => {
+      bar.remove()
+      this.bar = undefined
+    }, KVITTERING_MS)
+  }
+
+  private handleOffline = (): void => {
+    this.showOffline()
+  }
+
+  private handleOnline = (): void => {
+    if (this.failing) return
+    this.showOnline()
+  }
+
+  private emit(navn: string): void {
+    this.dispatchEvent(new CustomEvent(navn, { bubbles: true, composed: true }))
+  }
+
+  /** Meld fra at et kall til serveren feilet. */
+  reportFailure(): void {
+    if (this.failing) return
+    this.failing = true
+    this.showOffline()
+  }
+
+  /** Meld fra at et kall til serveren lyktes igjen. */
+  reportSuccess(): void {
+    if (!this.failing) return
+    this.failing = false
+    this.showOnline()
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-connection-status": FsConnectionStatus
+  }
+}
+
+export function defineFsConnectionStatus(
+  tagName = FS_CONNECTION_STATUS_TAG,
+): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsConnectionStatus)
+  }
+}

package/src/components/frittstaende/session-timeout/fs-session-timeout.ts

@@ -0,0 +1,212 @@
+import {
+  SESSION_TIMEOUT_CLASS,
+  SESSION_TIMEOUT_DIALOG_CLASS,
+} from "./session-timeout.js"
+
+export const FS_SESSION_TIMEOUT_TAG = "fs-session-timeout" as const
+
+/** Sekundene som skal leses opp. Hvert sekund ville vært uutholdelig. */
+const ANNONSER_VED = new Set([120, 60, 30, 10])
+
+function klokke(sekunder: number): string {
+  const m = Math.floor(sekunder / 60)
+  const s = sekunder % 60
+  return `${m}:${String(s).padStart(2, "0")}`
+}
+
+function ord(sekunder: number): string {
+  if (sekunder >= 60) {
+    const m = Math.round(sekunder / 60)
+    return m === 1 ? "ett minutt" : `${m} minutter`
+  }
+  return sekunder === 1 ? "ett sekund" : `${sekunder} sekunder`
+}
+
+/**
+ * Varsler før en innlogget økt går ut.
+ *
+ * Dette er tingen hver store organisasjon bygger selv og gjør feil. Enten
+ * kommer det ingen advarsel, og brukeren mister et halvutfylt søknadsskjema,
+ * eller så stjeler dialogen fokus midt i en setning, eller så leser
+ * skjermleseren nedtellingen hvert sekund.
+ *
+ * Komponenten er frittstående fordi nedtellingen er klientens klokke. Tallet
+ * endrer seg ut fra når brukeren sist rørte tastaturet, og det er ingenting
+ * en server kan sende. Den bærer heller ingen verdi inn i en innsending.
+ *
+ * Dialogen er en ekte `<dialog>` med `showModal()`, så fokusfellen, Escape og
+ * topplaget kommer fra nettleseren. Fokus går tilbake dit brukeren var.
+ *
+ * ```html
+ * <fs-session-timeout class="fs-session-timeout" warn-at="1500" expires-at="1800"
+ *                     data-ignore-morph></fs-session-timeout>
+ * ```
+ *
+ * ```ts
+ * document.querySelector("fs-session-timeout")
+ *   .addEventListener("session-extend", () => fetch("/forleng", { method: "POST" }))
+ * ```
+ */
+export class FsSessionTimeout extends HTMLElement {
+  static observedAttributes = ["warn-at", "expires-at"]
+
+  private dialog?: HTMLDialogElement
+  private countElement?: HTMLElement
+  private liveElement?: HTMLElement
+  private ticker?: number
+  private lastActivity = Date.now()
+  private forrigeFokus: HTMLElement | null = null
+
+  /** Sekunder uten aktivitet før varselet kommer. */
+  get warnAt(): number {
+    return Number(this.getAttribute("warn-at")) || 25 * 60
+  }
+
+  /** Sekunder uten aktivitet før økten er ute. */
+  get expiresAt(): number {
+    return Number(this.getAttribute("expires-at")) || 30 * 60
+  }
+
+  connectedCallback(): void {
+    this.classList.add(SESSION_TIMEOUT_CLASS)
+    this.build()
+
+    for (const navn of ["pointerdown", "keydown", "scroll"] as const) {
+      document.addEventListener(navn, this.registerActivity, { passive: true })
+    }
+    this.ticker = window.setInterval(() => this.tick(), 1000)
+  }
+
+  disconnectedCallback(): void {
+    for (const navn of ["pointerdown", "keydown", "scroll"] as const) {
+      document.removeEventListener(navn, this.registerActivity)
+    }
+    if (this.ticker) window.clearInterval(this.ticker)
+    this.ticker = undefined
+  }
+
+  private build(): void {
+    if (this.dialog) return
+
+    const dialog = document.createElement("dialog")
+    dialog.className = SESSION_TIMEOUT_DIALOG_CLASS
+    // alertdialog og ikke dialog: dette er en avbrytelse brukeren ikke ba om,
+    // og da skal skjermleseren lese hele innholdet når den åpnes.
+    dialog.setAttribute("aria-labelledby", "fs-session-timeout-title")
+    dialog.setAttribute("role", "alertdialog")
+
+    const tittel = document.createElement("h2")
+    tittel.className = "fs-session-timeout__title"
+    tittel.id = "fs-session-timeout-title"
+    tittel.textContent = "Du blir snart logget ut"
+
+    const tekst = document.createElement("p")
+    tekst.className = "fs-session-timeout__text"
+    tekst.append("Vi logger deg ut om ")
+
+    const count = document.createElement("span")
+    count.className = "fs-session-timeout__count"
+    // Tallet oppdateres hvert sekund. Leses det opp hver gang, blir dialogen
+    // ubrukelig med skjermleser, så opplesningen skjer i live-området under.
+    count.setAttribute("aria-hidden", "true")
+    tekst.append(count, " for å beskytte opplysningene dine.")
+
+    const live = document.createElement("span")
+    live.className = "fs-sr-only"
+    live.setAttribute("role", "status")
+    live.setAttribute("aria-live", "polite")
+
+    const knapper = document.createElement("div")
+    knapper.className = "fs-session-timeout__actions"
+
+    const fortsett = document.createElement("button")
+    fortsett.type = "button"
+    fortsett.className = "fs-button"
+    fortsett.textContent = "Fortsett å være innlogget"
+    fortsett.addEventListener("click", () => this.extend())
+
+    const loggUt = document.createElement("button")
+    loggUt.type = "button"
+    loggUt.className = "fs-button"
+    loggUt.dataset.variant = "secondary"
+    loggUt.textContent = "Logg ut nå"
+    loggUt.addEventListener("click", () => {
+      this.close()
+      this.emit("session-logout")
+    })
+
+    knapper.append(fortsett, loggUt)
+    dialog.append(tittel, tekst, live, knapper)
+    this.append(dialog)
+
+    this.dialog = dialog
+    this.countElement = count
+    this.liveElement = live
+  }
+
+  private registerActivity = (): void => {
+    if (this.dialog?.open) return
+    this.lastActivity = Date.now()
+  }
+
+  private tick(): void {
+    const gått = Math.floor((Date.now() - this.lastActivity) / 1000)
+    const igjen = this.expiresAt - gått
+
+    if (igjen <= 0) {
+      this.close()
+      this.emit("session-expired")
+      this.lastActivity = Date.now()
+      return
+    }
+
+    if (gått < this.warnAt) return
+
+    if (!this.dialog?.open) this.open()
+
+    if (this.countElement) this.countElement.textContent = klokke(igjen)
+    if (this.liveElement && ANNONSER_VED.has(igjen)) {
+      this.liveElement.textContent = `Du blir logget ut om ${ord(igjen)}.`
+    }
+  }
+
+  private open(): void {
+    if (!this.dialog || this.dialog.open) return
+    // Fokus skal tilbake dit brukeren var. Uten dette starter neste
+    // tastetrykk på toppen av siden, midt i et skjema.
+    this.forrigeFokus = document.activeElement as HTMLElement | null
+    this.dialog.showModal()
+    this.emit("session-warn")
+  }
+
+  private close(): void {
+    if (!this.dialog?.open) return
+    this.dialog.close()
+    if (this.liveElement) this.liveElement.textContent = ""
+    this.forrigeFokus?.focus()
+    this.forrigeFokus = null
+  }
+
+  private emit(navn: string): void {
+    this.dispatchEvent(new CustomEvent(navn, { bubbles: true, composed: true }))
+  }
+
+  /** Forlenger økten og lukker varselet. Kall den når serveren har svart. */
+  extend(): void {
+    this.lastActivity = Date.now()
+    this.close()
+    this.emit("session-extend")
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fs-session-timeout": FsSessionTimeout
+  }
+}
+
+export function defineFsSessionTimeout(tagName = FS_SESSION_TIMEOUT_TAG): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FsSessionTimeout)
+  }
+}

package/src/components/frittstaende/session-timeout/session-timeout.css

@@ -0,0 +1,43 @@
+@import "../../css/button/button.css";
+
+@layer fristil {
+  fs-session-timeout {
+    display: contents;
+  }
+
+  .fs-session-timeout__dialog {
+    max-inline-size: var(--fs-session-timeout-width, 26rem);
+    padding: var(--fs-session-timeout-padding, var(--size-5));
+    color: var(--semantic-page-foreground);
+    background: var(--semantic-page-background);
+    border: 1px solid var(--semantic-divider-30);
+    border-radius: var(--fs-session-timeout-radius, var(--size-1));
+    box-shadow: var(--semantic-shadow-overlay);
+  }
+
+  .fs-session-timeout__dialog::backdrop {
+    background: var(--semantic-overlay-backdrop);
+  }
+
+  .fs-session-timeout__title {
+    margin: 0 0 var(--size-2);
+    font-size: var(--font-size-l);
+    line-height: 1.3;
+  }
+
+  .fs-session-timeout__text {
+    margin: 0 0 var(--size-4);
+    line-height: 1.5;
+  }
+
+  .fs-session-timeout__count {
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+  }
+
+  .fs-session-timeout__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-2);
+  }
+}

package/src/components/frittstaende/session-timeout/session-timeout.ts

@@ -0,0 +1,42 @@
+import { attributes } from "../../css/shared.js"
+
+export const SESSION_TIMEOUT_CLASS = "fs-session-timeout" as const
+export const SESSION_TIMEOUT_DIALOG_CLASS =
+  "fs-session-timeout__dialog" as const
+
+export type SessionTimeoutOptions = {
+  /** Sekunder uten aktivitet før varselet kommer. Standard: 25 minutter. */
+  warnAt?: number
+  /** Sekunder uten aktivitet før økten er ute. Standard: 30 minutter. */
+  expiresAt?: number
+}
+
+export type SessionTimeoutAttributes = {
+  class: typeof SESSION_TIMEOUT_CLASS
+  "warn-at"?: string
+  "expires-at"?: string
+  "data-ignore-morph": ""
+}
+
+/**
+ * Attributtene for varselet om at innlogget økt går ut.
+ *
+ * Nedtellingen er klientens klokke, og endrer seg hvert sekund ut fra når
+ * brukeren sist rørte tastaturet. Det er en tilstand ingen server kan sende,
+ * og derfor eier komponenten alt inni seg. `data-ignore-morph` er ikke
+ * valgfri: uten den river Datastars morfing dialogen bort mens den står åpen.
+ *
+ * ```ts
+ * <fs-session-timeout {...fs.sessionTimeout({ warnAt: 1500, expiresAt: 1800 })} />
+ * ```
+ */
+export const sessionTimeout = ({
+  warnAt = 25 * 60,
+  expiresAt = 30 * 60,
+}: SessionTimeoutOptions = {}): SessionTimeoutAttributes =>
+  attributes({
+    class: SESSION_TIMEOUT_CLASS,
+    "warn-at": warnAt === 25 * 60 ? undefined : String(warnAt),
+    "expires-at": expiresAt === 30 * 60 ? undefined : String(expiresAt),
+    "data-ignore-morph": "" as const,
+  })

package/src/components/frittstaende/toast/fs-toast.ts

@@ -1,14 +1,11 @@
-import { html, LitElement } from "lit"
+import { TOAST_CLASS, TOAST_CLOSE_CLASS } from "./toast.js"
 
 export const FS_TOAST_TAG = "fs-toast" as const
 
-export const TOAST_CLASS = "fs-toast" as const
-export const TOAST_CLOSE_CLASS = "fs-toast__close" as const
-
 export const toastColors = ["neutral", "success", "warning", "danger"] as const
 export type ToastColor = (typeof toastColors)[number]
 
-export type ToastOptions = {
+export type ShowOptions = {
   /** Hva meldingen betyr. Standard: `neutral`. */
   color?: ToastColor
   /** Millisekunder før meldingen forsvinner. `0` lar den bli stående. */
@@ -20,8 +17,15 @@ export type ToastOptions = {
 /**
  * Køen av korte meldinger i hjørnet av skjermen.
  *
- * Elementet er beholderen, ikke meldingen. Du legger det inn én gang i
- * appen og kaller `show()` når noe skal meldes.
+ * Dette er den eneste frittstående komponenten, og den eneste delen av pakken
+ * du kaller i stedet for å skrive. Elementet er beholderen, ikke meldingen:
+ * du legger det inn én gang i appen og kaller `show()` når noe skal meldes.
+ * Meldingene finnes ikke før en hendelse på klienten skaper dem, så det er
+ * ingenting for serveren å rendre.
+ *
+ * Serveren skriver beholderen med `fs.toast()`, og den setter
+ * `data-ignore-morph`. Uten det river Datastars morfing meldingene bort ved
+ * neste patch, fordi serverens utgave av regionen er tom.
  *
  * Beholderen er en `role="status"`-region, ikke `role="alert"`. En melding
  * som dukker opp i hjørnet skal ikke avbryte det skjermleseren holder på med;
@@ -39,40 +43,45 @@ export type ToastOptions = {
  * })
  * ```
  */
-export class FsToast extends LitElement {
-  static properties = {
-    duration: { type: Number },
-    label: { type: String },
-  }
+export class FsToast extends HTMLElement {
+  static observedAttributes = ["duration", "label"]
 
   /** Standard levetid i millisekunder. `0` lar meldingene bli stående. */
-  duration = 6000
-  /** Tekst som sier hva regionen er. Blir `aria-label`. */
-  label = "Meldinger"
-
-  createRenderRoot() {
-    return this
+  get duration(): number {
+    // `0` er en gyldig verdi og betyr at meldingene blir stående. Uten
+    // sjekken mot null her forsvant de likevel etter seks sekunder, og bare
+    // `show(..., { duration: 0 })` virket.
+    const rå = this.getAttribute("duration")
+    if (rå === null) return 6000
+    const value = Number(rå)
+    return Number.isFinite(value) && value >= 0 ? value : 6000
   }
 
-  render() {
-    return html`<slot></slot>`
+  set duration(value: number) {
+    this.setAttribute("duration", String(value))
   }
 
-  connectedCallback() {
-    super.connectedCallback()
-    this.setAttribute("role", "status")
-    this.setAttribute("aria-live", "polite")
-    this.setAttribute("aria-label", this.label)
+  connectedCallback(): void {
+    // Skrev serveren regionen med fs.toast(), står alt dette allerede. Her
+    // settes det bare når det mangler, så en ren HTML-side uten bygger også
+    // får en region skjermleseren forstår.
+    if (!this.hasAttribute("role")) this.setAttribute("role", "status")
+    if (!this.hasAttribute("aria-live")) {
+      this.setAttribute("aria-live", "polite")
+    }
+    if (!this.hasAttribute("aria-label")) {
+      this.setAttribute("aria-label", this.getAttribute("label") ?? "Meldinger")
+    }
   }
 
-  updated() {
+  attributeChangedCallback(navn: string, _gammel: string, ny: string): void {
     // `label` kan settes etter at elementet står i DOM-en, for eksempel av et
     // rammeverk som fyller inn attributtene i et senere steg.
-    this.setAttribute("aria-label", this.label)
+    if (navn === "label" && ny) this.setAttribute("aria-label", ny)
   }
 
   /** Viser en melding, og returnerer elementet den ble lagt i. */
-  show(message: string, options: ToastOptions = {}): HTMLElement {
+  show(message: string, options: ShowOptions = {}): HTMLElement {
     const {
       color = "neutral",
       duration = this.duration,
@@ -116,7 +125,7 @@ export class FsToast extends LitElement {
   }
 
   /** Fjerner en melding. */
-  dismiss(toast: HTMLElement) {
+  dismiss(toast: HTMLElement): void {
     if (!this.contains(toast)) return
     toast.remove()
 
@@ -126,7 +135,7 @@ export class FsToast extends LitElement {
   }
 
   /** Fjerner alle meldingene. */
-  clear() {
+  clear(): void {
     for (const toast of this.querySelectorAll(`.${TOAST_CLASS}`)) {
       toast.remove()
     }

package/src/components/frittstaende/toast/toast.ts

@@ -0,0 +1,45 @@
+import { attributes } from "../../css/shared.js"
+
+export const TOAST_CLASS = "fs-toast" as const
+export const TOAST_CLOSE_CLASS = "fs-toast__close" as const
+
+export type ToastOptions = {
+  /** Tekst som sier hva regionen er. Blir `aria-label`. */
+  label?: string
+}
+
+export type ToastAttributes = {
+  region: {
+    role: "status"
+    "aria-live": "polite"
+    "aria-label": string
+    "data-ignore-morph": ""
+  }
+  toast: { class: typeof TOAST_CLASS }
+  close: { class: typeof TOAST_CLOSE_CLASS }
+}
+
+/**
+ * Attributtene for varselregionen.
+ *
+ * Regionen er `role="status"` og ikke `role="alert"`. En melding som kommer
+ * fordi noe gikk bra skal ikke avbryte det skjermleseren holder på med.
+ *
+ * `data-ignore-morph` er ikke valgfri. `<fs-toast>` lager og fjerner sine egne
+ * elementer inni regionen, og uten attributtet river Datastars morfing dem bort
+ * ved neste patch, fordi serverens utgave av regionen er tom. Attributtet må
+ * stå i HTML-en serveren sender: komponenten kan ikke sette det på seg selv,
+ * siden morfingen leser det fra serverens node.
+ */
+export const toast = ({
+  label = "Varsler",
+}: ToastOptions = {}): ToastAttributes => ({
+  region: attributes({
+    role: "status" as const,
+    "aria-live": "polite" as const,
+    "aria-label": label,
+    "data-ignore-morph": "" as const,
+  }),
+  toast: { class: TOAST_CLASS },
+  close: { class: TOAST_CLOSE_CLASS },
+})

package/src/components/ramme/error-summary/error-summary.ts

@@ -0,0 +1,55 @@
+import { attributes } from "../../css/shared.js"
+
+export const ERROR_SUMMARY_CLASS = "fs-error-summary" as const
+export const ERROR_SUMMARY_TITLE_CLASS = "fs-error-summary__title" as const
+
+export type ErrorSummaryOptions = {
+  /** Antall feil serveren fant. Er det null, skjules boksen. */
+  count?: number
+  /** Id på boksen, slik at skjemaet kan flytte fokus hit etter innsending. */
+  id?: string
+}
+
+export type ErrorSummaryAttributes = {
+  container: {
+    class: typeof ERROR_SUMMARY_CLASS
+    role: "alert"
+    tabindex: "-1"
+    id?: string
+    hidden?: true
+  }
+  title: {
+    class: typeof ERROR_SUMMARY_TITLE_CLASS
+  }
+}
+
+/**
+ * Attributtene for en feiloppsummering.
+ *
+ * Serveren skriver hele boksen, også overskriften og lista. `<fs-error-summary>`
+ * flytter bare fokus og håndterer klikk på lenkene. Tidligere lagde komponenten
+ * overskriften selv, og da forsvant den ved hver morfing i Datastar.
+ *
+ * ```ts
+ * const feil = fs.errorSummary({ count: errors.length, id: "feil" })
+ * ```
+ * ```html
+ * <fs-error-summary {...feil.container}>
+ *   <h2 {...feil.title}>Du må rette 2 feil</h2>
+ *   <ul><li><a href="#epost">E-posten mangler @</a></li></ul>
+ * </fs-error-summary>
+ * ```
+ */
+export const errorSummary = ({
+  count = 0,
+  id,
+}: ErrorSummaryOptions = {}): ErrorSummaryAttributes => ({
+  container: attributes({
+    class: ERROR_SUMMARY_CLASS,
+    role: "alert" as const,
+    tabindex: "-1" as const,
+    id,
+    hidden: count === 0 ? (true as const) : undefined,
+  }),
+  title: { class: ERROR_SUMMARY_TITLE_CLASS },
+})