@atelic-action/ui 2.0.0 → 2.1.0

package/README.md

@@ -20,6 +20,7 @@ Every export, grouped by the entry it is imported from. The gallery column links
 | `Brand`, `BrandLogo`, `CallToAction`, `HoursRow`, `MenuContact`, `NavLink`, `Phone`, `PostalAddress`, `SiteLink`, `SocialLink`, `PageStop` | `@atelic-action/ui/chrome` | The shapes the chrome renders from (types) | none |
 | `NotFound` | `@atelic-action/ui/components` | The body of the page an unknown path renders | [#not-found](https://ui.atelic.me/#not-found) |
 | `Checklist` | `@atelic-action/ui/components` | A short list of checks, each passed or failed | [#checklist](https://ui.atelic.me/#checklist) |
+| `IconList` | `@atelic-action/ui/components` | A list whose bullets are icons, one for the list or one per item, each in a tone | [#icon-list](https://ui.atelic.me/#icon-list) |
 | `DataTable` | `@atelic-action/ui/components` | A table whose first column names each row, sortable, stacking on a phone | [#data-table](https://ui.atelic.me/#data-table) |
 | `StatRow` | `@atelic-action/ui/components` | A row of large figures with periods, deltas, and trends | [#stat-row](https://ui.atelic.me/#stat-row) |
 | `Callout` | `@atelic-action/ui/components` | One finding: an icon in its tone, the title, the explainer | [#callout](https://ui.atelic.me/#callout) |
@@ -694,7 +695,8 @@ The blocks a page composes, each styled in `styles/components.css` inside the `a
 | Component | What it is | Notes |
 |---|---|---|
 | `Checklist` | A short list of checks, each passed or failed | Two columns when there is room, one on a phone. `passLabel` and `failLabel` name the icons for a screen reader |
-| `DataTable` | A table whose first column names each row, sortable by any column marked `sortable` | A click on a heading sorts on a wide screen. On a phone each row stacks, every fact wearing its column's label, and a dropdown sorts. A cell is a node, or `{ display, sort }` when what it shows is not what it sorts by; a formatted number in a string (`"$12,047"`, `"0.24%"`) sorts as a number. It renders in `defaultSort` on the server |
+| `IconList` | A list whose bullets are icons | `icon` and `tone` on the list set every bullet; an item's own override them. The bullet is decoration, so a screen reader hears only the items. A dot when no icon is set; the text's color when no tone is |
+| `DataTable` | A table whose first column names each row, sortable by any column marked `sortable` | A click on a heading sorts on a wide screen. On a phone each row stacks, every fact wearing its column's label, and a dropdown sorts. A cell is a node, or `{ display, sort }` when what it shows is not what it sorts by; a formatted number in a string (`"$12,047"`, `"0.24%"`) sorts as a number. It renders in `defaultSort` on the server. Every other row sits on a tinted ground; `striped={false}` turns that off. A column marked `fit` hugs its content, for a swatch or a mark beside a figure |
 | `StatRow` | A row of large figures, each over what it counts and its `period`. `variant="quiet"` is the glance row for a working page: a light figure in the text color over a small capitalized label, hairlines between; `unit` sets a figure's unit small beside it | `trend` draws an arrow before a figure that is itself a change. `deltas` list comparisons beneath: an arrow, how far, against what (`basis`), and the earlier figure (`was`), each in its own tone, since a spend falling and a cost falling read differently |
 | `Callout` | One finding: an icon in its tone beside the title, the explainer under it | `variant="box"` sets it apart on a tinted ground, for something missing or owed |
 | `Disclosure` | A section the reader opens and closes, in two forms chosen by whether `open` is passed | Controlled (`open` and `onToggle`), it is an app's card: the caller remembers what was folded, a closed body is not rendered, the label is the toggle, `meta` (a count, a flag) sits beside it outside its name, and `headingLevel` makes the label a real heading. Uncontrolled, it is a document's fold: a native `details` with a `summary` line that carries the point and `defaultOpen`, so it works before any script loads, find in page opens it, and it prints open. `Collapsible`, the fold's old name, was folded in at 0.18.0 |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, the component library, the access gate, and the app shell they install",
 	"type": "module",
 	"license": "UNLICENSED",

package/src/components/DataTable.tsx

@@ -13,6 +13,8 @@ export interface DataTableColumn {
 	sortable?: boolean;
 	/** The direction a first click sorts in; numbers usually read best largest first. */
 	firstSort?: SortDirection;
+	/** The column hugs its content (a swatch, a mark) instead of sharing the width. */
+	fit?: boolean;
 }
 
 /** A cell whose display is not what it sorts by, e.g. an icon over a number. */
@@ -37,6 +39,8 @@ export interface DataTableProps {
 	defaultSort?: { column: number; direction: SortDirection };
 	/** The label on the phone's sort control. */
 	sortLabel?: string;
+	/** Every other row on a tinted ground, so a wide table reads across. On by default. */
+	striped?: boolean;
 	className?: string;
 }
 
@@ -71,6 +75,7 @@ export function DataTable({
 	rows,
 	defaultSort,
 	sortLabel = "Sort by",
+	striped = true,
 	className,
 }: DataTableProps) {
 	const [sort, setSort] = useState(defaultSort ?? null);
@@ -102,7 +107,7 @@ export function DataTable({
 	};
 
 	return (
-		<div className={["data-table", className].filter(Boolean).join(" ")}>
+		<div className={["data-table", striped && "is-striped", className].filter(Boolean).join(" ")}>
 			{anySortable && (
 				<div className="data-table-sort">
 					<label htmlFor={selectId}>{sortLabel}</label>
@@ -135,21 +140,20 @@ export function DataTable({
 						{columns.map((column, index) => {
 							const active = sort?.column === index;
 							const Icon = !active ? ArrowUpDown : sort?.direction === "asc" ? ArrowUp : ArrowDown;
+							const head = {
+								"data-align": column.align ?? "left",
+								"data-fit": column.fit || undefined,
+								"aria-sort": column.sortable
+									? active
+										? sort?.direction === "asc"
+											? ("ascending" as const)
+											: ("descending" as const)
+										: ("none" as const)
+									: undefined,
+							};
 							return (
-								<th
-									scope="col"
-									key={column.label}
-									data-align={column.align ?? "left"}
-									aria-sort={
-										column.sortable
-											? active
-												? sort?.direction === "asc"
-													? "ascending"
-													: "descending"
-												: "none"
-											: undefined
-									}
-								>
+								// biome-ignore lint/suspicious/noArrayIndexKey: columns sit in order, and two may share a blank label
+								<th scope="col" key={index} {...head}>
 									{column.sortable ? (
 										<button
 											type="button"
@@ -171,16 +175,19 @@ export function DataTable({
 					{sorted.map(({ row, index }) => (
 						<tr key={index} data-tone={row.tone}>
 							{row.cells.map((cell, c) => {
-								const align = columns[c]?.align ?? "left";
 								const body = isValueCell(cell) ? cell.display : cell;
+								const shape = {
+									"data-align": columns[c]?.align ?? "left",
+									"data-fit": columns[c]?.fit || undefined,
+								};
 								return c === 0 ? (
 									// biome-ignore lint/suspicious/noArrayIndexKey: cells sit in column order
-									<th scope="row" key={c} data-align={align}>
+									<th scope="row" key={c} {...shape}>
 										{body}
 									</th>
 								) : (
 									// biome-ignore lint/suspicious/noArrayIndexKey: cells sit in column order
-									<td key={c} data-align={align} data-label={columns[c]?.label}>
+									<td key={c} {...shape} data-label={columns[c]?.label}>
 										{body}
 									</td>
 								);

package/src/components/IconList.tsx

@@ -0,0 +1,43 @@
+import { Dot } from "lucide-react";
+import type { ReactNode } from "react";
+import type { Tone } from "./tone";
+
+export interface IconListItem {
+	/** The item itself. */
+	body: ReactNode;
+	/** The icon it leads with, e.g. a lucide icon at size 16; the list's when left out. */
+	icon?: ReactNode;
+	/** The tone its bullet reads in; the list's when left out. */
+	tone?: Tone;
+}
+
+export interface IconListProps {
+	items: IconListItem[];
+	/** The bullet every item without its own leads with; a dot when left out. */
+	icon?: ReactNode;
+	/** The tone every bullet without its own reads in; the text's color when left out. */
+	tone?: Tone;
+	className?: string;
+}
+
+/**
+ * A list whose bullets are icons: one for the whole list, or one per item,
+ * each in a tone set the same two ways. The bullets are decoration; the
+ * items carry the meaning, so a screen reader hears the list and not the
+ * icons.
+ */
+export function IconList({ items, icon, tone, className }: IconListProps) {
+	return (
+		<ul className={["icon-list", className].filter(Boolean).join(" ")} data-tone={tone}>
+			{items.map((item, i) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: items are static content in a fixed order
+				<li key={i} data-tone={item.tone}>
+					<span className="icon-list-bullet" aria-hidden="true">
+						{item.icon ?? icon ?? <Dot size={16} strokeWidth={4} />}
+					</span>
+					<span className="icon-list-body">{item.body}</span>
+				</li>
+			))}
+		</ul>
+	);
+}

package/src/components/StackedBar.tsx

@@ -48,8 +48,8 @@ export function StackedBar({ segments, showKey = true, className }: StackedBarPr
 					{segments.map((segment) => (
 						<li key={segment.label} data-tone={segment.tone} style={fill(segment)}>
 							<span className="chart-swatch" aria-hidden="true" />
-							<b>{figure(segment)}</b>
 							<span>{segment.label}</span>
+							<b>{figure(segment)}</b>
 						</li>
 					))}
 				</ul>

package/src/components/index.ts

@@ -23,6 +23,7 @@ export {
 	type DisclosureProps,
 } from "./Disclosure";
 export { GateLogin, type GateLoginProps } from "./GateLogin";
+export { IconList, type IconListItem, type IconListProps } from "./IconList";
 export { NotFound, type NotFoundProps } from "./NotFound";
 export { StackedBar, type StackedBarProps, type StackedBarSegment } from "./StackedBar";
 export { describeStarRating, StarRating, type StarRatingProps } from "./StarRating";

package/src/styles/components.css

@@ -390,7 +390,34 @@
 		color: var(--ink-soft);
 	}
 
-	/* ---- The charts' shared key: a swatch, a figure, a label ---- */
+	/* ---- IconList: a list whose bullets are icons, each in a tone ---- */
+	.atelic-ui .icon-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		gap: 8px;
+	}
+	.atelic-ui .icon-list li {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr);
+		column-gap: 10px;
+		align-items: start;
+		line-height: 1.45;
+		text-wrap: pretty;
+	}
+	/* A list with no tone of its own reads in the text color, whatever tone its ancestor carries; an item's own tone still wins on its row. */
+	.atelic-ui .icon-list:not([data-tone]) {
+		--tone: currentColor;
+	}
+	.atelic-ui .icon-list-bullet {
+		display: inline-flex;
+		margin-top: 0.2em;
+		line-height: 0;
+		color: var(--tone, currentColor);
+	}
+
+	/* ---- The charts' shared key: a swatch, a label, a figure ---- */
 	.atelic-ui .chart-key {
 		list-style: none;
 		margin: 10px 0 0;
@@ -619,6 +646,9 @@
 		border-bottom: 0;
 		padding-bottom: 0;
 	}
+	.atelic-ui .data-table.is-striped tbody tr:nth-child(even) {
+		background: color-mix(in srgb, var(--ink) 3%, transparent);
+	}
 	.atelic-ui .data-table tbody th {
 		width: 100%;
 		text-align: left;
@@ -686,6 +716,10 @@
 		.atelic-ui .data-table [data-align="center"] {
 			text-align: center;
 		}
+		.atelic-ui .data-table [data-fit] {
+			width: 1%;
+			white-space: nowrap;
+		}
 		.atelic-ui .data-table [data-align="right"] {
 			text-align: right;
 		}
@@ -719,11 +753,22 @@
 			color: var(--ui-primary, var(--primary));
 		}
 		.atelic-ui .data-table thead th button svg {
+			flex: none;
 			opacity: 0.55;
 		}
 		.atelic-ui .data-table thead th button[data-active] svg {
 			opacity: 1;
 		}
+		/* Striped, the cells take side padding so the band reads, the last column included. */
+		.atelic-ui .data-table.is-striped th,
+		.atelic-ui .data-table.is-striped td {
+			padding-left: 10px;
+			padding-right: 10px;
+		}
+		.atelic-ui .data-table.is-striped th:last-child,
+		.atelic-ui .data-table.is-striped td:last-child {
+			padding-right: 10px;
+		}
 		.atelic-ui .data-table tbody tr:last-child th,
 		.atelic-ui .data-table tbody tr:last-child td {
 			border-bottom: 0;