@conduction/docusaurus-preset 3.31.0 → 3.33.0

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

@@ -1,7 +1,23 @@
 /**
- * <WidgetShelf /> styles. Header + responsive grid of widget-preview
- * cards. Each card has a tinted panel containing the widget mock,
- * with title + description below.
+ * <WidgetShelf /> styles. Header + widget-preview cards. Each card
+ * has a tinted panel containing the widget mock, with title +
+ * description below.
+ *
+ * Two layouts: the default single-row carousel (slow marquee, track
+ * 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 {
@@ -11,7 +27,11 @@
   font-family: var(--conduction-typography-font-family-body);
 }
 
-.head { max-width: 70ch; margin: 0 0 var(--space-8); }
+/* The head runs full width so the title can fill the line; only the
+   lede (body text) keeps the 70ch reading measure. Capping the whole
+   head at 70ch forced titles into an early wrap, which the base
+   h1-h6 `text-wrap: balance` then split into two even lines. */
+.head { margin: 0 0 var(--space-8); }
 .eyebrow {
   display: inline-flex; align-items: center; gap: var(--space-2);
   font-family: var(--conduction-typography-font-family-code);
@@ -23,8 +43,9 @@
 .title {
   font-size: 36px; font-weight: 700; letter-spacing: -0.02em;
   line-height: 1.1; color: var(--c-cobalt-900); margin: 0 0 var(--space-3);
+  text-wrap: pretty; /* run full width; no artificial two-line balance */
 }
-.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; }
+.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; max-width: 70ch; }
 
 .grid {
   display: grid;
@@ -34,6 +55,126 @@
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
 @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
 
+/* ---- Carousel (default) ----
+ *
+ * Marquee mechanics: the track holds two identical groups of cards
+ * and translates from 0 to -50% on a slow linear loop; because each
+ * group carries a trailing padding equal to the card gap, -50% of
+ * the track lands exactly one group later and the loop is seamless.
+ * The duplicate group is aria-hidden in the JSX so screen readers
+ * hear each widget once. Hover or keyboard focus anywhere in the
+ * viewport pauses the animation. */
+
+.viewport {
+  overflow: hidden;
+  /* Soft fade at both edges so cards enter/exit gently. */
+  -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
+  mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
+}
+
+.track {
+  display: flex;
+  width: max-content;
+  animation: wsMarquee var(--ws-speed, 45s) linear infinite;
+}
+
+.viewport:hover .track,
+.viewport:focus-within .track {
+  animation-play-state: paused;
+}
+
+.group {
+  display: flex;
+  gap: var(--space-5);
+  padding-right: var(--space-5);
+}
+
+.carousel .card {
+  width: 340px;
+  flex: 0 0 auto;
+}
+@media (max-width: 700px) { .carousel .card { width: 280px; } }
+
+@keyframes wsMarquee {
+  from { transform: translateX(0); }
+  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. */
+@media (prefers-reduced-motion: reduce) {
+  .viewport {
+    overflow: visible;
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+  .controls { display: none; }
+  .track { animation: none; display: block; width: 100%; transform: none !important; }
+  .group {
+    display: grid;
+    gap: var(--space-5);
+    padding-right: 0;
+    width: 100%;
+  }
+  /* After .group so its display wins the equal-specificity contest. */
+  .group.dup { display: none; }
+  .carousel .card { width: auto; }
+}
+@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
+  .group { grid-template-columns: 1fr; }
+}
+
 .card {
   background: white;
   border: 1px solid var(--c-cobalt-100);
@@ -71,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);
+});

package/src/components/index.js

@@ -77,6 +77,10 @@ export {default as ComposeBlock} from './ComposeBlock/ComposeBlock.jsx';
 export {default as AppsGrid} from './AppsGrid/AppsGrid.jsx';
 export {default as AppMock} from './AppMock/AppMock.jsx';
 export {default as WidgetMock} from './WidgetMock/WidgetMock.jsx';
+export {default as FlowMock} from './FlowMock/FlowMock.jsx';
+export {default as LeafMock} from './LeafMock/LeafMock.jsx';
+export {default as BuildMock} from './BuildMock/BuildMock.jsx';
+export {default as KanbanMock} from './KanbanMock/KanbanMock.jsx';
 export {default as SidebarMock} from './SidebarMock/SidebarMock.jsx';
 export {default as MockScene} from './MockScene/MockScene.jsx';
 export {default as IntegrationIcon} from './IntegrationIcon/IntegrationIcon.jsx';

package/src/components/primitives/SectionHead.module.css

@@ -27,6 +27,12 @@
   letter-spacing: -0.02em;
   color: var(--c-cobalt-900);
   margin: 0;
+  /* Section titles run the full line before wrapping. The kit's base
+     h1-h6 rule sets `text-wrap: balance`, which splits a title into
+     two near-equal lines even when it fits comfortably on one; the
+     PO decision is that section titles fill the available width.
+     `pretty` keeps orphan control without the artificial balance. */
+  text-wrap: pretty;
 }
 @media (max-width: 700px) { .title { font-size: 32px; } }