@conduction/docusaurus-preset 3.32.0 → 3.34.0

package/src/components/WidgetShelf/WidgetShelf.module.css

@@ -7,6 +7,17 @@
  * duplicated for a seamless loop, paused on hover/focus) and the
  * static responsive grid (carousel={false}, and what
  * prefers-reduced-motion collapses the carousel to).
+ *
+ * The CSS keyframe marquee is the SSR/no-JS fallback; once the
+ * component mounts, the JSX adds .jsDriven to the track and a rAF
+ * loop drives the same transform so the prev/next/pause controls can
+ * steer it. Controls are cobalt ghost buttons (never orange fill)
+ * and are hidden under reduced motion together with the marquee.
+ *
+ * Auto panels (.auto*): token-built mini mocks for widgets without an
+ * explicit panel. Four archetypes (KPI tile, bar chart, list rows,
+ * donut gauge); the accent comes from --wsa / --wsa-soft, set inline
+ * by the JSX from a hash of the widget title.
  */
 
 .shelf {
@@ -89,6 +100,56 @@
   to   { transform: translateX(-50%); }
 }
 
+/* Once the rAF loop owns the transform, the keyframe animation must
+   let go — otherwise it would overwrite the inline transform. */
+.track.jsDriven { animation: none; }
+
+/* ---- Controls (pause/play + prev/next) ----
+ *
+ * Cobalt ghost buttons per the kit: transparent ground, cobalt ink,
+ * cobalt-200 hairline; hover tints, focus ring is a visible cobalt
+ * outline. Never orange. Hidden under reduced motion because the
+ * static grid has nothing to steer. */
+
+.controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-4);
+}
+
+.ctrl {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--c-blue-cobalt);
+  cursor: pointer;
+}
+.ctrl:hover {
+  background: var(--c-cobalt-50);
+  border-color: var(--c-blue-cobalt);
+}
+.ctrl:focus-visible {
+  outline: 2px solid var(--c-blue-cobalt);
+  outline-offset: 2px;
+}
+.ctrl svg { width: 16px; height: 16px; display: block; }
+.chev {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.glyph { fill: currentColor; }
+
 /* Reduced motion: drop the duplicate copy and render the first group
    as the static wrapping grid — identical to carousel={false}. The
    .cols-2 / .cols-3 class on the group supplies the column template. */
@@ -98,7 +159,8 @@
     -webkit-mask-image: none;
     mask-image: none;
   }
-  .track { animation: none; display: block; width: 100%; }
+  .controls { display: none; }
+  .track { animation: none; display: block; width: 100%; transform: none !important; }
   .group {
     display: grid;
     gap: var(--space-5);
@@ -150,3 +212,133 @@
   margin: 0;
   padding: var(--space-2) var(--space-5) var(--space-5);
 }
+
+/* ---- Auto-generated mini panels ----
+ *
+ * White widget tile on the tinted panel ground, same chrome family as
+ * the hand-built .w mocks. All greeked (bars, dots, one number); the
+ * accent tokens --wsa / --wsa-soft arrive inline from the JSX. */
+
+.auto {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 280px;
+  min-height: 124px;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-1);
+  padding: 16px 18px;
+}
+
+/* KPI number tile */
+.autoKpi {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+.autoHex {
+  display: block;
+  width: 13px;
+  height: 15px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--wsa);
+}
+.autoKpiValue {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 34px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+}
+.autoKpiBar {
+  display: block;
+  height: 5px;
+  border-radius: 1.5px;
+  background: var(--wsa-soft);
+}
+
+/* Mini bar chart */
+.autoBars {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  height: 124px;
+}
+.autoBar {
+  flex: 1;
+  border-radius: 2px 2px 0 0;
+  background: var(--c-cobalt-200);
+}
+.autoBarHi { background: var(--wsa); }
+
+/* List rows */
+.autoList {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+}
+.autoRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.autoDot {
+  flex-shrink: 0;
+  width: 12px;
+  height: 14px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-200);
+}
+.autoDotHi { background: var(--wsa); }
+.autoRowBars {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.autoRowBar {
+  display: block;
+  height: 5px;
+  border-radius: 1.5px;
+  background: var(--c-cobalt-700);
+}
+.autoRowLine {
+  display: block;
+  width: 86%;
+  height: 4px;
+  border-radius: 1px;
+  background: var(--c-cobalt-100);
+}
+
+/* Donut gauge */
+.autoDonut {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+.autoRing {
+  flex-shrink: 0;
+  width: 84px;
+  height: 84px;
+}
+.autoRingTrack {
+  fill: none;
+  stroke: var(--c-cobalt-100);
+  stroke-width: 6;
+}
+.autoRingFill {
+  fill: none;
+  stroke: var(--wsa);
+  stroke-width: 6;
+  stroke-linecap: round;
+}
+.autoDonutBars {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}

package/src/components/WidgetShelf/__tests__/WidgetShelf.render.test.js

@@ -0,0 +1,149 @@
+/**
+ * WidgetShelf.render.test.js — renders the real <WidgetShelf> JSX to
+ * static markup (the SSR path Docusaurus takes at build time) and
+ * asserts on the output: derived carousel speed, auto-generated
+ * panels for widgets without an explicit `panel`, and the carousel
+ * controls with their accessible names.
+ *
+ * Uses the same esbuild-bundle-then-renderToStaticMarkup technique as
+ * AiDisclosure.render.test.js / scripts/build-kit.mjs. CSS modules
+ * are stubbed with an identity proxy (styles.foo → 'foo'), so class
+ * assertions read as the source class names.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'WidgetShelf.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-widget-shelf-test');
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let WidgetShelf;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  WidgetShelf = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(WidgetShelf, props));
+}
+
+function makeWidgets(n) {
+  return Array.from({length: n}, (_, i) => ({
+    title: `Widget number ${i}`,
+    desc: `Description ${i}`,
+  }));
+}
+
+test('SSR smoke: carousel renders every widget twice (live group + aria-hidden dup)', () => {
+  const html = render({title: 'Shelf', widgets: makeWidgets(5)});
+  assert.equal((html.match(/Widget number 3/g) || []).length, 2);
+  assert.match(html, /aria-hidden="true"/);
+});
+
+test('default loop duration derives from widget count at 6s per card', () => {
+  const html = render({widgets: makeWidgets(15)});
+  assert.match(html, /--ws-speed:90s/);
+});
+
+test('default loop duration never drops below the 30s floor', () => {
+  const html = render({widgets: makeWidgets(3)});
+  assert.match(html, /--ws-speed:30s/);
+});
+
+test('an explicit speed prop overrides the derived duration', () => {
+  const html = render({widgets: makeWidgets(15), speed: 45});
+  assert.match(html, /--ws-speed:45s/);
+});
+
+test('a widget without a panel gets an auto-generated mini panel', () => {
+  const html = render({widgets: [{title: 'Werkvoorraad', desc: 'x'}]});
+  assert.match(html, /class="auto auto(Kpi|Bars|List|Donut)"/);
+});
+
+test('an explicit panel always wins over the auto panel', () => {
+  const html = render({
+    widgets: [{title: 'Custom', desc: 'x', panel: React.createElement('div', {className: 'w w-custom'})}],
+  });
+  assert.match(html, /w-custom/);
+  assert.doesNotMatch(html, /class="auto /);
+});
+
+test('auto panels are deterministic: same input, same markup', () => {
+  const props = {widgets: makeWidgets(8)};
+  assert.equal(render(props), render(props));
+});
+
+test('auto panels vary: 8 distinct titles hit at least two archetypes and two accent families', () => {
+  const html = render({widgets: makeWidgets(8)});
+  const kinds = new Set(
+    (html.match(/class="auto auto(Kpi|Bars|List|Donut)"/g) || []).map((m) => m),
+  );
+  assert.ok(kinds.size >= 2, `expected >=2 archetypes, saw ${[...kinds].join(', ')}`);
+  const families = new Set(
+    (html.match(/--wsa:var\(--c-([a-z]+)-500\)/g) || []).map((m) => m),
+  );
+  assert.ok(families.size >= 2, `expected >=2 accent families, saw ${[...families].join(', ')}`);
+});
+
+test('auto panels never use reserved accent families (coral/orange, gold)', () => {
+  // 64 distinct titles sweep the family picker; the hex-family policy
+  // reserves coral (KNVB orange) and gold, so neither may ever appear.
+  const html = render({widgets: makeWidgets(64)});
+  assert.doesNotMatch(html, /--c-coral|--c-gold|--c-orange/);
+});
+
+test('carousel renders pause/play and prev/next controls with accessible names', () => {
+  const html = render({widgets: makeWidgets(4)});
+  assert.match(html, /aria-label="Previous widgets"/);
+  assert.match(html, /aria-label="Next widgets"/);
+  assert.match(html, /aria-label="Pause"/);
+  assert.match(html, /<button type="button"/);
+});
+
+test('the static grid (carousel={false}) has no controls and no duplicate group', () => {
+  const html = render({widgets: makeWidgets(4), carousel: false});
+  assert.doesNotMatch(html, /aria-label="Previous widgets"/);
+  assert.doesNotMatch(html, /aria-label="Pause"/);
+  assert.equal((html.match(/Widget number 3/g) || []).length, 1);
+});