@pokela/components 2.4.2 → 2.5.0

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.4.2.
+React-komponentit: **Pokela Design System**, versio 2.5.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -21,6 +21,7 @@ tarvita.
 - `Icon`
 - `ListRow`
 - `Accordion`
+- `Timeline`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -52,6 +53,7 @@ import Link from 'next/link';
 - `styles/icon.css`
 - `styles/list-row.css`
 - `styles/accordion.css`
+- `styles/timeline.css`
 
 Luokat ovat globaaleja, eivät CSS-moduuleja. Se on tarkoituksellista: sama
 luokka on myös Figmassa komponentin nimenä, ja hajautettu nimi katkaisisi

package/Timeline.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+/**
+ * Aikajana.
+ * ---------------------------------------------------------------
+ * Pystysuora jana: vasemmalla merkintä (aika, päivä, numero), keskellä
+ * kisko ja piste, oikealla otsikko, sivutieto ja kuvaus. Merkintä,
+ * kisko ja sisältö ovat listan ruudukon sarakkeita, jotta merkinnät
+ * asettuvat samaan linjaan; siksi `TimelineItem` piirretään aina
+ * `Timeline`-listan sisällä.
+ *
+ * `variant`:
+ *   default   ohut kisko, ontto piste
+ *   emphasis  paksu kisko ja täytetty piste: nostettu kohta
+ *   end       kisko päättyy pisteeseen: viimeinen kohta
+ *
+ * `weight` (0–1) venyttää kohdan kiskoa. Sillä pitkä vaihe näkyy jo
+ * pituudestaan, esimerkiksi keston osuutena koko ajasta.
+ */
+export default function Timeline({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export type TimelineVariant = 'default' | 'emphasis' | 'end';
+export declare function TimelineItem({ label, title, meta, description, group, variant, weight, }: {
+    label: string;
+    title: string;
+    meta?: string | null;
+    description?: string | null;
+    group?: string | null;
+    variant?: TimelineVariant;
+    weight?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/Timeline.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Aikajana.
+ * ---------------------------------------------------------------
+ * Pystysuora jana: vasemmalla merkintä (aika, päivä, numero), keskellä
+ * kisko ja piste, oikealla otsikko, sivutieto ja kuvaus. Merkintä,
+ * kisko ja sisältö ovat listan ruudukon sarakkeita, jotta merkinnät
+ * asettuvat samaan linjaan; siksi `TimelineItem` piirretään aina
+ * `Timeline`-listan sisällä.
+ *
+ * `variant`:
+ *   default   ohut kisko, ontto piste
+ *   emphasis  paksu kisko ja täytetty piste: nostettu kohta
+ *   end       kisko päättyy pisteeseen: viimeinen kohta
+ *
+ * `weight` (0–1) venyttää kohdan kiskoa. Sillä pitkä vaihe näkyy jo
+ * pituudestaan, esimerkiksi keston osuutena koko ajasta.
+ */
+export default function Timeline({ children, className }) {
+    return _jsx("ol", { className: ['timeline', className].filter(Boolean).join(' '), children: children });
+}
+export function TimelineItem({ label, title, meta, description, group, variant = 'default', weight = 0, }) {
+    return (_jsxs("li", { className: ['timeline__item', variant === 'default' ? '' : `timeline__item--${variant}`].join(' '), style: { '--weight': weight.toFixed(3) }, children: [_jsx("span", { className: "meta faint timeline__label", children: label }), _jsx("span", { className: "timeline__rail", "aria-hidden": "true" }), _jsxs("span", { className: "timeline__body", children: [group ? _jsx("span", { className: "meta faint", children: group }) : null, _jsxs("span", { className: "timeline__head", children: [_jsx("span", { className: "body-l", children: title }), meta ? _jsx("span", { className: "meta faint", children: meta }) : null] }), description ? _jsx("span", { className: "body-s muted", children: description }) : null] })] }));
+}

package/index.d.ts

@@ -4,6 +4,8 @@ export { default as ListRow } from './ListRow.js';
 export type { ListRowProps } from './ListRow.js';
 export { Accordion, useAccordionGroup } from './Accordion.js';
 export type { AccordionProps } from './Accordion.js';
+export { default as Timeline, TimelineItem } from './Timeline.js';
+export type { TimelineVariant } from './Timeline.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

@@ -2,6 +2,7 @@
 export { default as Icon, ICON_NAMES } from './Icon.js';
 export { default as ListRow } from './ListRow.js';
 export { Accordion, useAccordionGroup } from './Accordion.js';
+export { default as Timeline, TimelineItem } from './Timeline.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.4.2",
+  "version": "2.5.0",
   "description": "React-komponentit: Pokela Design System. Generoitu tiedostoista components/, ei käsin ylläpidetty.",
   "license": "MIT",
   "author": "Veli-Matti Pokela",
@@ -25,7 +25,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@pokela/tokens": "^2.4.2"
+    "@pokela/tokens": "^2.5.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/timeline.css

@@ -0,0 +1,39 @@
+/* Aikajana (components/Timeline.tsx). Merkintä, kisko ja sisältö ovat
+   listan ruudukon sarakkeita, jotta merkinnät asettuvat samaan
+   linjaan; kohta itse on display: contents. Kisko venyy kohdan
+   painon mukaan (--weight): pitkä vaihe näkyy jo pituudestaan. */
+.timeline {
+  display: grid;
+  grid-template-columns: max-content var(--space-16) minmax(0, 1fr);
+  column-gap: var(--space-16);
+  margin: 0; padding: 0; list-style: none;
+}
+.timeline__item { display: contents; }
+.timeline__label { text-align: right; font-variant-numeric: tabular-nums; }
+.timeline__rail { position: relative; }
+.timeline__rail::before {
+  content: ''; position: absolute; top: 0; bottom: 0;
+  left: calc(50% - var(--hairline) / 2);
+  border-left: var(--hairline) solid var(--line);
+}
+.timeline__rail::after {
+  content: ''; position: absolute; top: var(--space-4);
+  left: calc(50% - var(--space-4));
+  width: var(--space-8); height: var(--space-8);
+  border-radius: 50%;
+  border: var(--hairline) solid var(--ink);
+  background: var(--paper);
+}
+.timeline__body {
+  display: flex; flex-direction: column; gap: var(--space-4);
+  padding-bottom: calc(var(--space-24) + var(--space-56) * 4 * var(--weight, 0));
+}
+.timeline__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
+.timeline__item--emphasis .timeline__rail::before {
+  left: calc(50% - var(--hairline-strong) / 2);
+  border-left: var(--hairline-strong) solid var(--ink);
+}
+.timeline__item--emphasis .timeline__rail::after { background: var(--ink); }
+.timeline__item--end .timeline__rail::before { bottom: auto; height: var(--space-4); }
+.timeline__item--end .timeline__rail::after { background: var(--ink); }
+.timeline__item--end .timeline__body { padding-bottom: 0; }

package/styles.css

@@ -4,3 +4,4 @@
 @import './styles/icon.css';
 @import './styles/list-row.css';
 @import './styles/accordion.css';
+@import './styles/timeline.css';