@pokela/components 2.13.0 → 2.14.0

package/Alert.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+/**
+ * Inline-ilmoitus: sävy, otsikko, teksti, toiminto ja sulkeminen.
+ *
+ * Sovelluskomponentti (päätökset 22 ja 29). Vasen viiva
+ * --hairline-strong, ei pintaa eikä kehystä: sama paksuus kuin kentän
+ * virheviivassa, ja kevein tapa erottaa ilmoitus sisällöstä.
+ *
+ * Sävyjä on kolme, ja vain virhe on värillinen (--danger). Info ja
+ * onnistui erottuvat ikonilla ja otsikolla. Varoitusta ei ole: ilman
+ * toista tilaväriä se erottuisi virheestä vain sävyllä.
+ *
+ * Ruudunlukija: virhe on role="alert", muut role="status". Rooli
+ * ilmoittaa sisällön, kun ilmoitus lisätään sivulle; jo latautuessa
+ * näkyvä ilmoitus luetaan kuten muukin teksti.
+ */
+export type AlertTone = 'info' | 'success' | 'error';
+export type AlertProps = {
+    tone?: AlertTone;
+    title: string;
+    /** Selittävä teksti otsikon alla. */
+    children?: ReactNode;
+    /** Toiminto tekstin alla, esim. `<a className="btn btn--text">`. */
+    action?: ReactNode;
+    /** Kun annettu, ilmoituksessa on sulkunappi. */
+    onDismiss?: () => void;
+    /** Sulkunapin nimi ruudunlukijalle. */
+    dismissLabel?: string;
+    className?: string;
+};
+export default function Alert({ tone, title, children, action, onDismiss, dismissLabel, className, }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/Alert.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from './Icon';
+const IKONI = { info: 'info', success: 'check', error: 'alert' };
+export default function Alert({ tone = 'info', title, children, action, onDismiss, dismissLabel = 'Sulje', className, }) {
+    return (_jsxs("div", { className: ['alert', `alert--${tone}`, className].filter(Boolean).join(' '), role: tone === 'error' ? 'alert' : 'status', children: [_jsx(Icon, { name: IKONI[tone], className: "alert__icon" }), _jsxs("div", { className: "alert__content", children: [_jsx("p", { className: "alert__title", children: title }), children ? _jsx("div", { className: "alert__body", children: children }) : null, action ? _jsx("div", { className: "alert__actions", children: action }) : null] }), onDismiss ? (_jsx("button", { type: "button", className: "alert__close", "aria-label": dismissLabel, onClick: onDismiss, children: _jsx(Icon, { name: "close" }) })) : null] }));
+}

package/Icon.d.ts

@@ -18,14 +18,15 @@
  * Koot ovat tokeneita: --icon-s (12) tekstin seassa metan kanssa,
  * --icon-m (16) napin sisällä, --icon-l (24) omana painikkeenaan.
  *
- * `alert` kulkee aina virhetekstin rinnalla, ei yksin: merkitys on
- * tekstissä, ikoni ja --danger vain nopeuttavat sen löytämistä.
+ * `alert` ja `info` kulkevat aina tekstin rinnalla, eivät yksin:
+ * merkitys on tekstissä, ikoni (ja virheessä --danger) vain nopeuttaa
+ * sen löytämistä.
  *
  * Nuoli on kahta lajia eikä yhtä: `arrow-right` vie sivustolla eteen-
  * päin, `arrow-up-right` ulos. Ero on lukijalle sama kuin
  * target="_blank" ruudunlukijalle.
  */
-export type IconName = 'arrow-right' | 'arrow-up-right' | 'plus' | 'minus' | 'close' | 'menu' | 'alert' | 'chevron-down' | 'check';
+export type IconName = 'arrow-right' | 'arrow-up-right' | 'plus' | 'minus' | 'close' | 'menu' | 'alert' | 'info' | 'chevron-down' | 'check';
 export type IconSize = 's' | 'm' | 'l';
 export type IconProps = {
     name: IconName;

package/Icon.js

@@ -12,6 +12,9 @@ const PATHS = {
        vinot sivut eivät osu puolikkaan pikselin ruudukolle. Piste on
        lyhyt viiva, koska täyttöä ei ole. */
     alert: ['M2.5 2.5 H14.5 V14.5 H2.5 Z', 'M8.5 5 V10', 'M8.5 11.5 V12.5'],
+    /* Tieto. Alertin neliö ylösalaisin: piste ylhäällä, varsi alla.
+       Erottuu virheestä muodolla eikä vain värillä. */
+    info: ['M2.5 2.5 H14.5 V14.5 H2.5 Z', 'M8.5 4.5 V5.5', 'M8.5 7 V12'],
     /* Selectin nuoli ja valitun vaihtoehdon merkki. 45 asteen viivat
        puolikkaan pikselin ruudukolla, kuten nuolissa. */
     'chevron-down': ['M4.5 6.5 L8.5 10.5 L12.5 6.5'],

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.13.0.
+React-komponentit: **Pokela Design System**, versio 2.14.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -33,6 +33,7 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `Select`
 - `Tabs`
 - `Tab`
+- `Alert`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -72,6 +73,7 @@ import Link from 'next/link';
 - `styles/choice.css`
 - `styles/select.css`
 - `styles/tabs.css`
+- `styles/alert.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

@@ -18,6 +18,7 @@ Use these instead of building an equivalent.
 - `Select`
 - `Tabs`
 - `Tab`
+- `Alert`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -146,6 +147,19 @@ for a step-by-step flow.
 </Tabs>
 ```
 
+`Alert` is an inline message inside the page, next to what it is about: a
+form error summary, a saved confirmation, a billing problem. `tone` is `info`
+(default), `success` or `error`; only `error` is coloured. Give a short
+`title` and the explanation as children; pass `action` for one next step (a
+`btn btn--text` link) and `onDismiss` to show a close button. Use `error` only
+for something that went wrong, never for emphasis. There is no warning tone.
+
+```jsx
+<Alert tone="error" title="Payment failed" action={<a className="btn btn--text" href="/billing">Update card</a>}>
+  The card was declined. Update it to keep the subscription.
+</Alert>
+```
+
 ## Patterns
 
 `PageHeader` and `Section` are patterns: they add no look of their own, only

package/guidelines/styles.md

@@ -30,7 +30,7 @@ else. Never set body text in the display face.
 <!-- generated:make-sarakkeet -->`Grid` is 12 columns: 4 on mobile, 8 from 600px, 12 from 900px.<!-- /generated --> Place
 things in columns, never in pixels. `Col` takes the span per breakpoint.
 
-**No icon libraries and no emoji.** Use `Icon`. <!-- generated:make-ikonit -->It draws its own 9 marks<!-- /generated --> on
+**No icon libraries and no emoji.** Use `Icon`. <!-- generated:make-ikonit -->It draws its own 10 marks<!-- /generated --> on
 a 16×16 grid with the same hairline as every border.
 
 ## Buttons

package/guidelines/tokens.md

@@ -9,7 +9,7 @@ inversion — `--invert-surface` with `--invert-ink` — or the quiet
 coloured button. Colour on the page comes only from photographs.
 
 The one exception is `--danger`, a state colour for errors only. Do not use it
-for emphasis, buttons or decoration. `TextField`, `ChoiceGroup` and `Select` already apply it, always
+for emphasis, buttons or decoration. `TextField`, `ChoiceGroup`, `Select` and `Alert` already apply it, always
 with the `alert` icon and a message, so the meaning never depends on colour.
 
 **No shadows.** There are no shadow tokens. Separation is a 1px line

package/index.d.ts

@@ -28,6 +28,8 @@ export { default as Tabs } from './Tabs.js';
 export type { TabsProps } from './Tabs.js';
 export { default as Tab } from './Tab.js';
 export type { TabProps } from './Tab.js';
+export { default as Alert } from './Alert.js';
+export type { AlertTone, AlertProps } from './Alert.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

@@ -15,6 +15,7 @@ export { default as ChoiceGroup } from './ChoiceGroup.js';
 export { default as Select } from './Select.js';
 export { default as Tabs } from './Tabs.js';
 export { default as Tab } from './Tab.js';
+export { default as Alert } from './Alert.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.13.0",
+  "version": "2.14.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.13.0"
+    "@pokela/tokens": "^2.14.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/alert.css

@@ -0,0 +1,74 @@
+/* Inline-ilmoitus (Alert). Sovelluskomponentti, sivusto ei käytä tätä.
+   ==================================================================
+   Vasen viiva --hairline-strong, ei pintaa eikä kehystä (päätös 29).
+   Ikoni, otsikko (paino 500) ja teksti (--ink-muted) ovat samassa
+   koossa kuin kentän virheteksti. Virheessä viiva, ikoni ja otsikko
+   ovat --danger; teksti pysyy --ink-mutedina, jotta pitkäkin selitys
+   on luettava. */
+
+.alert {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  column-gap: var(--space-12);
+  align-items: start;
+  padding: var(--space-4) 0 var(--space-4) var(--space-16);
+  border-left: var(--hairline-strong) solid var(--ink);
+  color: var(--ink);
+}
+
+/* Ikoni ensimmäisen rivin keskelle, kuten .field__errorissa. */
+.alert__icon { margin-top: calc((var(--lh-body-s) * var(--text-body-s) - var(--icon-m)) / 2); }
+
+.alert__content { min-width: 0; }
+.alert__title,
+.alert__body {
+  margin: 0;
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+}
+.alert__title { font-weight: var(--weight-500); }
+.alert__body { color: var(--ink-muted); }
+.alert__body > * { margin: 0; }
+.alert__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-12) var(--space-24);
+  margin-top: var(--space-12);
+}
+
+.alert--error { border-left-color: var(--danger); }
+.alert--error .alert__icon,
+.alert--error .alert__title { color: var(--danger); }
+
+/* Sulkunappi: näkyvä 32 px, osuma-alue --tap-min kuten .btn--s:ssä
+   (päätös 26). Ensimmäisen rivin keskelle, ja oikea reuna vedetään
+   ikonin reunaan, jotta X on linjassa tekstipalstan oikean reunan
+   kanssa. */
+.alert__close {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-32);
+  height: var(--space-32);
+  margin: calc((var(--lh-body-s) * var(--text-body-s) - var(--space-32)) / 2)
+    calc((var(--space-32) - var(--icon-m)) / -2) 0 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  color: var(--ink-muted);
+  cursor: pointer;
+}
+.alert__close::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--space-32) - var(--tap-min)) / 2);
+}
+.alert__close:hover { color: var(--ink); }
+.alert__close:focus-visible {
+  outline: var(--focus-width) solid var(--ink);
+  outline-offset: calc(var(--focus-width) * -1);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .alert__close { transition: color var(--dur-fast) var(--ease-standard); }
+}

package/styles.css

@@ -12,3 +12,4 @@
 @import './styles/choice.css';
 @import './styles/select.css';
 @import './styles/tabs.css';
+@import './styles/alert.css';