kantarciandClaude Opus 5.5
88737a95a9
Schema v25: a button takes an optional icon (any name from the shared set or "none") and an icon position (start or end). Without a choice it keeps the diagonal arrow behind the text, still with the button-arrow class, so stored pages and their own CSS look exactly as before. Thirteen everyday icons join the set (arrow down, chevron, calendar, message, send, download, document, play, search, heart, info, plus, person). Button, icon and icon card choose from a tile picker with a drawing per icon, grouped, keyboard navigable, instead of a select with English keys. icons.js holds the paths for the editor; a test keeps them equal to the Twig drawings and the validator list. ADR 108. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
30 lines
1.9 KiB
JavaScript
30 lines
1.9 KiB
JavaScript
import { test } from 'node:test';
|
|
import assert from 'node:assert/strict';
|
|
import { readFileSync } from 'node:fs';
|
|
import { ICON_PATHS, ICON_LABELS, BUTTON_ICON_GROUPS, ALL_ICON_GROUPS } from '../public/assets/icons.js';
|
|
|
|
const read = path => readFileSync(new URL(path, import.meta.url), 'utf8');
|
|
|
|
test('the editor draws the same icons the website renders and the server allows', () => {
|
|
// Drei Listen, ein Satz: die Zeichnungen der Website (Twig), die Vorschau im Editor und die
|
|
// erlaubten Namen im Validator. Weicht eine ab, zeigt die Auswahl ein anderes Symbol als die
|
|
// Seite - oder bietet eins an, das der Server beim Speichern ablehnt.
|
|
const twig = read('../templates/blocks/icon.html.twig');
|
|
const website = Object.fromEntries([...twig.matchAll(/^\s{4}'?([a-z-]+)'?: '([^']+)',?$/gm)].map(([, name, path]) => [name, path]));
|
|
assert.deepEqual(ICON_PATHS, website);
|
|
const validator = read('../src/Content/DocumentValidator.php');
|
|
const allowed = [...validator.match(/public const ICONS = \[([^\]]+)\]/)[1].matchAll(/'([a-z-]+)'/g)].map(([, name]) => name);
|
|
assert.deepEqual(Object.keys(ICON_PATHS).sort(), [...allowed].sort());
|
|
});
|
|
|
|
test('every icon has a German name and the pickers offer each icon exactly once', () => {
|
|
assert.deepEqual(Object.keys(ICON_LABELS).sort(), Object.keys(ICON_PATHS).sort());
|
|
const button = BUTTON_ICON_GROUPS.flatMap(([, names]) => names);
|
|
assert.equal(new Set(button).size, button.length, 'Ein Symbol steht doppelt in der Button-Auswahl.');
|
|
for (const name of button) assert.ok(ICON_PATHS[name], `${name} hat keine Zeichnung.`);
|
|
// Der bisherige Pfeil steht vorn: er ist das, was ein Button ohne eigene Wahl trägt.
|
|
assert.equal(button[0], 'arrow-up-right');
|
|
const all = ALL_ICON_GROUPS.flatMap(([, names]) => names);
|
|
assert.deepEqual([...all].sort(), Object.keys(ICON_PATHS).sort(), 'Symbol und Symbolkarte bieten jedes Symbol genau einmal an.');
|
|
});
|