@pokela/components 2.15.0 → 2.16.0

package/Dialog.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+/**
+ * Modaalinen dialogi: otsikko, teksti, sisältö, toiminnot ja sulkeminen.
+ *
+ * Sovelluskomponentti (päätökset 22 ja 31). Ei varjoa eikä tummaa
+ * verhoa: sivu peittyy paperin sävyisellä verholla, ja dialogi on
+ * paperia musteen hiusviivakehyksellä. Uutta väriä ei tarvita, ja
+ * sama ratkaisu toimii molemmissa teemoissa. Mobiilissa dialogi on
+ * alareunan arkki, ja napit ovat täysleveitä.
+ *
+ * Natiivi <dialog> ja showModal(): selain pitää fokuksen dialogissa,
+ * piilottaa muun sivun ruudunlukijalta ja sulkee Escillä. Esc ja
+ * verhon klikkaus kutsuvat `onClose`a, joten tila pysyy kutsujalla.
+ *
+ * Fokus menee avattaessa ensimmäiseen fokusoitavaan: lomakkeessa
+ * ensimmäiseen kenttään, vahvistuksessa Peruuta-nappiin, kun se on
+ * toiminnoissa ensimmäisenä. Sulkunappi on DOM:ssa viimeisenä, jotta
+ * se ei vie alkufokusta. Suljettaessa fokus palaa avanneeseen nappiin.
+ */
+export type DialogProps = {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    /** Selittävä teksti otsikon alla. Ruudunlukija lukee sen avattaessa. */
+    description?: ReactNode;
+    /** Sisältö tekstin alla, esim. lomakkeen kentät. */
+    children?: ReactNode;
+    /** Napit oikeaan alakulmaan: vähiten vahingollinen ensin. */
+    actions?: ReactNode;
+    /** Sulkunapin nimi ruudunlukijalle. */
+    closeLabel?: string;
+    className?: string;
+};
+export default function Dialog({ open, onClose, title, description, children, actions, closeLabel, className, }: DialogProps): import("react/jsx-runtime").JSX.Element;

package/Dialog.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+import Icon from './Icon';
+export default function Dialog({ open, onClose, title, description, children, actions, closeLabel = 'Sulje', className, }) {
+    const ref = useRef(null);
+    const avaaja = useRef(null);
+    const otsikkoId = useId();
+    const tekstiId = useId();
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (open && !el.open) {
+            avaaja.current = document.activeElement;
+            el.showModal();
+        }
+        else if (!open && el.open) {
+            el.close();
+            avaaja.current?.focus();
+        }
+    }, [open]);
+    return (_jsx("dialog", { ref: ref, className: ['dialog', className].filter(Boolean).join(' '), "aria-labelledby": otsikkoId, "aria-describedby": description ? tekstiId : undefined, onCancel: (e) => {
+            /* Esc: selain sulkisi itse, mutta tila on kutsujalla. */
+            e.preventDefault();
+            onClose();
+        }, onClick: (e) => {
+            /* Klikkaus osuu itse dialogiin vain verhon kohdalla: sisältö on
+               .dialog__panelissa, joka täyttää dialogin. */
+            if (e.target === e.currentTarget)
+                onClose();
+        }, children: _jsxs("div", { className: "dialog__panel", children: [_jsxs("div", { className: "dialog__header", children: [_jsx("h2", { id: otsikkoId, className: "dialog__title", children: title }), description ? (_jsx("div", { id: tekstiId, className: "dialog__description", children: description })) : null] }), children ? _jsx("div", { className: "dialog__body", children: children }) : null, actions ? _jsx("div", { className: "dialog__actions", children: actions }) : null, _jsx("button", { type: "button", className: "dialog__close", "aria-label": closeLabel, onClick: onClose, children: _jsx(Icon, { name: "close" }) })] }) }));
+}

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.15.0.
+React-komponentit: **Pokela Design System**, versio 2.16.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -35,6 +35,7 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `Tab`
 - `Alert`
 - `Table`
+- `Dialog`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -76,6 +77,7 @@ import Link from 'next/link';
 - `styles/tabs.css`
 - `styles/alert.css`
 - `styles/table.css`
+- `styles/dialog.css`
 
 Luokat ovat globaaleja, eivät CSS-moduuleja. Se on tarkoituksellista: sama
 luokka on myös Figmassa komponentin nimenä, ja hajautettu nimi katkaisisi

package/guidelines/components.md

@@ -20,6 +20,7 @@ Use these instead of building an equivalent.
 - `Tab`
 - `Alert`
 - `Table`
+- `Dialog`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -184,6 +185,27 @@ row action is a `table__action` link whose name includes the row.
 />
 ```
 
+`Dialog` is a modal for one decision or a short form: confirm a deletion,
+invite a member. Never use it for content people read, and never stack two.
+Control it with `open` and `onClose`; Esc and a click on the veil call
+`onClose`. Give a short `title` (a question for confirmations), the
+consequence as `description`, form fields as children, and buttons in
+`actions` with the least destructive first (`btn--ghost` Cancel, then
+`btn--primary`). Use `btn--s` buttons. On mobile it becomes a bottom sheet.
+
+```jsx
+<Dialog
+  open={open}
+  onClose={() => setOpen(false)}
+  title="Remove Sara from the team?"
+  description="Access ends immediately. You can invite them again later."
+  actions={<>
+    <button className="btn btn--ghost btn--s" onClick={() => setOpen(false)}>Cancel</button>
+    <button className="btn btn--primary btn--s" onClick={remove}>Remove member</button>
+  </>}
+/>
+```
+
 ## Patterns
 
 `PageHeader` and `Section` are patterns: they add no look of their own, only

package/index.d.ts

@@ -32,6 +32,8 @@ export { default as Alert } from './Alert.js';
 export type { AlertTone, AlertProps } from './Alert.js';
 export { default as Table } from './Table.js';
 export type { TableSortDirection, TableSort, TableColumn, TableProps } from './Table.js';
+export { default as Dialog } from './Dialog.js';
+export type { DialogProps } from './Dialog.js';
 export { Grid, Col } from './Grid.js';
 export { default as Reveal } from './Reveal.js';
 export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';

package/index.js

@@ -17,6 +17,7 @@ export { default as Tabs } from './Tabs.js';
 export { default as Tab } from './Tab.js';
 export { default as Alert } from './Alert.js';
 export { default as Table } from './Table.js';
+export { default as Dialog } from './Dialog.js';
 export { Grid, Col } from './Grid.js';
 export { default as Reveal } from './Reveal.js';
 export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pokela/components",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "React-komponentit: Pokela Design System. Generoitu tiedostoista components/, ei käsin ylläpidetty.",
   "license": "MIT",
   "author": "Veli-Matti Pokela",
@@ -27,7 +27,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@pokela/tokens": "^2.15.0"
+    "@pokela/tokens": "^2.16.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/dialog.css

@@ -0,0 +1,125 @@
+/* Dialogi (Dialog). Sovelluskomponentti, sivusto ei käytä tätä.
+   ==================================================================
+   Paperiverho ja hiusviivakehys (päätös 31). Systeemissä ei ole
+   varjoja eikä verhoväriä: sivu peittyy paperin sävyisellä verholla,
+   ja dialogi erottuu siitä musteviivalla. Verho on läpikuultavaa
+   paperia, joten se toimii samoin molemmissa teemoissa.
+
+   Mobiili ensin: alareunan arkki, jonka yläreunassa on viiva. 600 px
+   alkaen keskitetty dialogi, jonka ympärillä on kehys. */
+
+.dialog {
+  inset: auto 0 0;
+  width: 100%;
+  max-width: 100%;
+  max-height: calc(100dvh - var(--space-32));
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: var(--paper);
+  color: var(--ink);
+  border: 0;
+  border-top: var(--hairline) solid var(--ink);
+}
+.dialog::backdrop {
+  background: color-mix(in srgb, var(--paper) 88%, transparent);
+}
+
+/* Sivu ei vierity dialogin alla. */
+html:has(.dialog[open]) { overflow: hidden; }
+
+.dialog__panel {
+  position: relative;
+  display: grid;
+  gap: var(--space-24);
+  padding: var(--space-24) var(--space-16) var(--space-32);
+}
+
+.dialog__header {
+  display: grid;
+  gap: var(--space-8);
+  /* Tila sulkunapille, ettei pitkä otsikko mene sen alle. */
+  padding-right: var(--space-40);
+}
+.dialog__title {
+  margin: 0;
+  font-family: var(--font-ui);
+  font-size: var(--text-body-l);
+  line-height: var(--lh-body-l);
+  font-weight: var(--weight-500);
+}
+.dialog__description {
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+  color: var(--ink-muted);
+}
+.dialog__description > * { margin: 0; }
+
+.dialog__body {
+  display: grid;
+  gap: var(--space-16);
+}
+
+/* Mobiilissa napit täysleveinä allekkain, ensisijainen (viimeinen)
+   ylimpänä peukalon ulottuvilla. */
+.dialog__actions {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--space-12);
+}
+.dialog__actions > .btn { width: 100%; }
+
+/* Sulkunappi: näkyvä 32 px, osuma-alue --tap-min, kuten Alertissa. */
+.dialog__close {
+  position: absolute;
+  top: var(--space-16);
+  right: var(--space-8);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-32);
+  height: var(--space-32);
+  padding: 0;
+  background: none;
+  border: 0;
+  color: var(--ink-muted);
+  cursor: pointer;
+}
+.dialog__close::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--space-32) - var(--tap-min)) / 2);
+}
+.dialog__close:hover { color: var(--ink); }
+
+@media (min-width: 600px) {
+  .dialog {
+    inset: 0;
+    width: calc(100% - var(--space-32));
+    max-width: 480px;
+    margin: auto;
+    border: var(--hairline) solid var(--ink);
+  }
+  .dialog__panel { padding: var(--space-32); }
+  .dialog__close { top: var(--space-24); right: var(--space-24); }
+  .dialog__actions {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+  .dialog__actions > .btn { width: auto; }
+}
+
+/* Liike: dialogi nousee ja verho häivyttää. Ei liikettä, jos käyttäjä
+   on sen kieltänyt. */
+@media (prefers-reduced-motion: no-preference) {
+  .dialog[open] { animation: dialog-esiin var(--dur-base) var(--ease-out); }
+  .dialog[open]::backdrop { animation: dialog-verho var(--dur-base) var(--ease-out); }
+  .dialog__close { transition: color var(--dur-fast) var(--ease-standard); }
+}
+@keyframes dialog-esiin { from { opacity: 0; transform: translateY(var(--space-8)); } }
+@keyframes dialog-verho { from { opacity: 0; } }
+
+@media (forced-colors: active) {
+  .dialog::backdrop { background: Canvas; opacity: 0.88; }
+}

package/styles.css

@@ -14,3 +14,4 @@
 @import './styles/tabs.css';
 @import './styles/alert.css';
 @import './styles/table.css';
+@import './styles/dialog.css';