@conduction/docusaurus-preset 0.1.0

package/src/components/ExternalAppShelf/ExternalAppShelf.module.css

@@ -0,0 +1,90 @@
+/**
+ * <ExternalAppShelf /> styles. Responsive card grid; each card has
+ * a brand-coloured icon tile on the left and a name + meta + desc
+ * on the right.
+ */
+
+.shelf {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-4);
+  margin-top: var(--space-8);
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.card {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4) var(--space-5);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  text-decoration: none;
+  color: inherit;
+  position: relative;
+  transition: transform 160ms, box-shadow 160ms, border-color 160ms;
+}
+.card.linked { cursor: pointer; }
+.card.linked:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-2);
+  border-color: var(--c-cobalt-200);
+}
+
+/* Icon tile — brand colour wash with the project's logo SVG centred.
+   White stroke / fill on the icon for contrast against the brand. */
+.iconTile {
+  width: 48px;
+  height: 55px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-700);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.icon { display: inline-flex; align-items: center; justify-content: center; }
+.icon svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
+
+/* Body */
+.body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.name {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--c-cobalt-900);
+  margin: 0;
+}
+.meta {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+}
+.desc {
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--c-cobalt-700);
+  margin: 4px 0 0;
+}
+
+.arrow {
+  color: var(--c-cobalt-400);
+  font-size: 14px;
+  margin-left: auto;
+  transition: color 160ms, transform 160ms;
+  flex-shrink: 0;
+}
+.card.linked:hover .arrow {
+  color: var(--c-orange-knvb);
+  transform: translate(2px, -2px);
+}

package/src/components/FAQ/FAQ.jsx

@@ -0,0 +1,42 @@
+/**
+ * <FAQ /> + <FAQItem />
+ *
+ * FAQ accordion ported from preview/pages/support.html (.faq, .faq details).
+ * Native <details>/<summary> for keyboard, screen-reader, and no-JS support.
+ * One question expands at a time on click; users can have several open.
+ *
+ * Usage:
+ *
+ *   <FAQ title="FAQ.">
+ *     <FAQItem question="If the apps are free, what does support cost?" defaultOpen>
+ *       Whatever the partner you pick charges. Conduction sets no minimum…
+ *     </FAQItem>
+ *     <FAQItem question="Why doesn't Conduction sell support directly?">
+ *       Two reasons. First…
+ *     </FAQItem>
+ *   </FAQ>
+ */
+
+import React from 'react';
+import styles from './FAQ.module.css';
+
+export function FAQItem({question, defaultOpen, children, className}) {
+  return (
+    <details className={[styles.item, className].filter(Boolean).join(' ')} open={defaultOpen || undefined}>
+      <summary className={styles.summary}>{question}</summary>
+      {/* div not p: MDX wraps inline children in its own <p>, which would
+          be invalid nested inside another <p>. */}
+      <div className={styles.body}>{children}</div>
+    </details>
+  );
+}
+
+export default function FAQ({title = 'FAQ.', children, className}) {
+  const composed = [styles.faq, className].filter(Boolean).join(' ');
+  return (
+    <section className={composed}>
+      {title && <h2 className={styles.heading}>{title}</h2>}
+      {children}
+    </section>
+  );
+}

package/src/components/FAQ/FAQ.module.css

@@ -0,0 +1,74 @@
+.faq {
+  max-width: 880px;
+  margin: 96px auto;
+  padding: 0 64px;
+}
+
+.heading {
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0 0 32px;
+  color: var(--c-cobalt-900);
+}
+
+.item {
+  border-bottom: 1px solid var(--c-cobalt-100);
+  padding: 20px 0;
+}
+
+.summary {
+  font-size: 17px;
+  font-weight: 600;
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--c-cobalt-900);
+  gap: var(--space-4);
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary::after {
+  content: "+";
+  font-size: 22px;
+  color: var(--c-cobalt-400);
+  font-weight: 400;
+  transition: transform 200ms ease;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.item[open] .summary::after {
+  transform: rotate(45deg);
+}
+
+.body {
+  font-size: 15px;
+  color: var(--c-cobalt-700);
+  line-height: 1.6;
+  margin: 12px 0 0;
+  max-width: 64ch;
+}
+
+.body p {
+  margin: 0 0 var(--space-3);
+}
+
+.body p:last-child {
+  margin-bottom: 0;
+}
+
+@media (max-width: 768px) {
+  .faq {
+    padding: 0 var(--space-5);
+    margin: 64px auto;
+  }
+  .heading {
+    font-size: 26px;
+  }
+}

package/src/components/FacetedFilters/FacetedFilters.jsx

@@ -0,0 +1,125 @@
+/**
+ * <FacetedFilters /> + <FilterChip />
+ *
+ * Sidebar facet panel from preview/components/faceted-filters.html.
+ * Each facet is a labelled checkbox list with optional counts; clicking
+ * an item toggles its selection. The companion <FilterChip/> renders
+ * an active-chips strip above the results so users can pop selections
+ * one by one.
+ *
+ * Controlled component: pass `selected` (object keyed by facet) and
+ * `onChange` to manage state externally. For ad-hoc usage without a
+ * parent state, the component falls back to internal state with the
+ * same shape.
+ *
+ * Usage in MDX:
+ *
+ *   const [selected, setSelected] = useState({});
+ *   const filtered = useMemo(() => filterSolutions(solutions, selected), [selected]);
+ *
+ *   <Section background="default">
+ *     <div style={{display: 'grid', gridTemplateColumns: '240px 1fr', gap: 56}}>
+ *       <FacetedFilters
+ *         facets={[
+ *           {key: 'sector', label: 'Sector', items: [
+ *             {value: 'public', label: 'Publieke sector', count: 5},
+ *             {value: 'mkb',    label: 'MKB',             count: 3},
+ *             {value: 'health', label: 'Zorg',            count: 2},
+ *           ]},
+ *           {key: 'goal', label: 'Doel', items: [...]},
+ *         ]}
+ *         selected={selected}
+ *         onChange={setSelected}
+ *       />
+ *       <SolutionGrid>{filtered.map(s => <SolutionCard {...s}/>)}</SolutionGrid>
+ *     </div>
+ *   </Section>
+ */
+
+import React, {useState, useCallback} from 'react';
+import styles from './FacetedFilters.module.css';
+
+export function FilterChip({label, onRemove, className}) {
+  return (
+    <span className={[styles.chip, className].filter(Boolean).join(' ')}>
+      {label}
+      {onRemove && (
+        <button
+          type="button"
+          aria-label={`Remove ${label}`}
+          className={styles.chipRemove}
+          onClick={onRemove}
+        >
+          ×
+        </button>
+      )}
+    </span>
+  );
+}
+
+export default function FacetedFilters({
+  facets = [],
+  selected,
+  onChange,
+  clearLabel = 'Clear all filters',
+  className,
+}) {
+  const isControlled = selected !== undefined && onChange !== undefined;
+  const [internal, setInternal] = useState({});
+  const value = isControlled ? selected : internal;
+  const set = isControlled ? onChange : setInternal;
+
+  const toggle = useCallback((facetKey, itemValue) => {
+    set((prev) => {
+      const current = prev[facetKey] || [];
+      const next = current.includes(itemValue)
+        ? current.filter(v => v !== itemValue)
+        : [...current, itemValue];
+      return {...prev, [facetKey]: next};
+    });
+  }, [set]);
+
+  const clearAll = useCallback(() => set({}), [set]);
+
+  const hasAny = Object.values(value).some(v => Array.isArray(v) && v.length > 0);
+
+  return (
+    <aside className={[styles.filters, className].filter(Boolean).join(' ')}>
+      {facets.map((facet) => {
+        const facetKey = facet.key || facet.label;
+        const sel = value[facetKey] || [];
+        return (
+          <fieldset key={facetKey} className={styles.facet}>
+            <h3 className={styles.facetTitle}>{facet.label}</h3>
+            <ul className={styles.facetList}>
+              {facet.items.map((item) => {
+                const checked = sel.includes(item.value);
+                const id = `f-${facetKey}-${item.value}`;
+                return (
+                  <li key={item.value}>
+                    <input
+                      type="checkbox"
+                      id={id}
+                      checked={checked}
+                      onChange={() => toggle(facetKey, item.value)}
+                    />
+                    <label htmlFor={id}>{item.label}</label>
+                    {typeof item.count === 'number' && (
+                      <span className={styles.count}>{item.count}</span>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </fieldset>
+        );
+      })}
+
+      {hasAny && (
+        <button type="button" className={styles.clearAll} onClick={clearAll}>
+          {clearLabel}
+        </button>
+      )}
+    </aside>
+  );
+}

package/src/components/FacetedFilters/FacetedFilters.module.css

@@ -0,0 +1,133 @@
+/**
+ * <FacetedFilters /> styles. Mirrors the .filters / .facet rules in
+ * preview/components/faceted-filters.html.
+ */
+
+.filters {
+  width: 240px;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.facet {
+  margin-bottom: 28px;
+  border: none;
+  padding: 0;
+}
+
+.facetTitle {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  font-weight: 500;
+  margin: 0 0 10px;
+}
+
+.facetList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.facetList li {
+  display: grid;
+  grid-template-columns: 18px 1fr auto;
+  gap: 10px;
+  align-items: center;
+  font-size: 14px;
+  color: var(--c-cobalt-700);
+  padding: 4px 0;
+}
+.facetList li:hover { color: var(--c-blue-cobalt); }
+
+.facetList input[type="checkbox"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid var(--c-cobalt-300);
+  border-radius: 3px;
+  cursor: pointer;
+  position: relative;
+  background: white;
+  transition: all 120ms;
+}
+.facetList input[type="checkbox"]:hover { border-color: var(--c-blue-cobalt); }
+.facetList input[type="checkbox"]:checked {
+  background: var(--c-blue-cobalt);
+  border-color: var(--c-blue-cobalt);
+}
+.facetList input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 1.6px 1.6px 0;
+  transform: rotate(45deg);
+}
+
+.facetList label {
+  cursor: pointer;
+}
+
+.count {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  color: var(--c-cobalt-400);
+}
+
+.clearAll {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--c-cobalt-400);
+  text-decoration: none;
+  margin-top: 8px;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+}
+.clearAll:hover { color: var(--c-orange-knvb); }
+
+/* Active filter chip (companion strip) */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px 5px 12px;
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-900);
+  font-size: 13px;
+  font-family: var(--conduction-typography-font-family-code);
+  border-radius: var(--radius-pill);
+}
+
+.chipRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: none;
+  background: var(--c-cobalt-100);
+  color: var(--c-cobalt-700);
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  font-family: inherit;
+  transition: all 120ms ease;
+}
+.chipRemove:hover {
+  background: var(--c-orange-knvb);
+  color: white;
+}

package/src/components/FeatureGrid/FeatureGrid.jsx

@@ -0,0 +1,94 @@
+/**
+ * <FeatureGrid /> + <FeatureGridGroup /> + <FeatureItem />
+ *
+ * Compact multi-column list for spec-grade features. Use when an app
+ * has 10 to 60+ features that don't all warrant a full USP block.
+ * Each item shows a status hex + a short label; the full description
+ * reveals on hover and on keyboard focus.
+ *
+ * Mirrors preview/components/feature-grid.html exactly (auto-fill grid
+ * with min 240px columns, bottom-up tooltip with 280px max-width and
+ * a tail).
+ *
+ * Status modifiers on the hex bullet:
+ *   - 'stable'  (default mint)
+ *   - 'beta'    (orange)
+ *   - 'soon'    (cobalt-300, "coming soon")
+ *
+ * Optional <FeatureGridGroup label="..."> headers split the grid into
+ * named sections; sites can also pass an items array with `group: 'X'`
+ * entries that the component will section automatically.
+ *
+ * Usage in MDX:
+ *
+ *   <FeatureGrid
+ *     legend
+ *     items={[
+ *       {group: 'Core capabilities'},
+ *       {label: 'JSON Schema validation', tip: 'Define a register shape...', status: 'stable'},
+ *       {label: 'GraphQL endpoint',       tip: 'Auto-generated...',          status: 'stable'},
+ *       {label: 'Schema versioning',      tip: 'Migrations are version-stable.', status: 'beta'},
+ *       {group: 'Integrations'},
+ *       {label: 'OpenCatalogi indexing',  tip: '...',                        status: 'stable'},
+ *     ]}
+ *   />
+ *
+ * Or compose with children (full MDX flexibility):
+ *
+ *   <FeatureGrid>
+ *     <FeatureGridGroup label="Core capabilities" />
+ *     <FeatureItem label="JSON Schema validation" tip="..." status="stable" />
+ *     ...
+ *   </FeatureGrid>
+ */
+
+import React from 'react';
+import styles from './FeatureGrid.module.css';
+
+const STATUS_CLASSES = {stable: '', beta: styles.beta, soon: styles.soon};
+
+export function FeatureItem({label, tip, status = 'stable', className}) {
+  const hexClass = [styles.h, STATUS_CLASSES[status]].filter(Boolean).join(' ');
+  return (
+    <div
+      className={[styles.item, className].filter(Boolean).join(' ')}
+      tabIndex={0}
+      title={tip || label}
+    >
+      <span className={hexClass} aria-hidden="true" />
+      <span className={styles.label}>{label}</span>
+      {tip && <span className={styles.tip}>{tip}</span>}
+    </div>
+  );
+}
+
+export function FeatureGridGroup({label, className}) {
+  return <h4 className={[styles.group, className].filter(Boolean).join(' ')}>{label}</h4>;
+}
+
+export default function FeatureGrid({items, legend = false, children, className}) {
+  return (
+    <div className={className}>
+      {legend && <Legend />}
+      <div className={styles.grid}>
+        {items
+          ? items.map((it, i) => (
+              it.group
+                ? <FeatureGridGroup key={i} label={it.group} />
+                : <FeatureItem key={i} {...it} />
+            ))
+          : children}
+      </div>
+    </div>
+  );
+}
+
+function Legend() {
+  return (
+    <div className={styles.legend}>
+      <span className={styles.legendItem}><span className={styles.h} aria-hidden="true" />Stable</span>
+      <span className={styles.legendItem}><span className={[styles.h, styles.beta].join(' ')} aria-hidden="true" />Beta</span>
+      <span className={styles.legendItem}><span className={[styles.h, styles.soon].join(' ')} aria-hidden="true" />Coming soon</span>
+    </div>
+  );
+}

package/src/components/FeatureGrid/FeatureGrid.module.css

@@ -0,0 +1,114 @@
+/**
+ * <FeatureGrid /> styles. Mirrors feature-grid.css from the kit.
+ */
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 4px 32px;
+  align-items: start;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.group {
+  grid-column: 1 / -1;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin: 24px 0 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--c-cobalt-100);
+  font-weight: 500;
+}
+.group:first-child { margin-top: 0; }
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  font-size: 14px;
+  color: var(--c-cobalt-800);
+  cursor: help;
+  outline: none;
+  border-radius: var(--radius-sm);
+  transition: background 140ms ease, padding 140ms ease, margin 140ms ease;
+}
+.item:hover,
+.item:focus-visible {
+  background: var(--c-cobalt-50);
+  padding-left: 8px;
+  padding-right: 8px;
+  margin-left: -8px;
+  margin-right: -8px;
+}
+
+.h {
+  width: 10px;
+  height: 12px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-mint-500);
+  flex-shrink: 0;
+}
+.beta { background: var(--c-orange-knvb); }
+.soon { background: var(--c-cobalt-300); }
+
+.label {
+  flex: 1;
+  line-height: 1.3;
+}
+
+/* Tooltip: appears above the item on hover or keyboard focus */
+.tip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  background: var(--c-cobalt-900);
+  color: white;
+  padding: 10px 14px;
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  line-height: 1.5;
+  width: max-content;
+  max-width: 280px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+  transform: translateY(4px);
+  z-index: 20;
+  box-shadow: var(--shadow-2);
+  font-weight: 400;
+}
+.tip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 16px;
+  border: 6px solid transparent;
+  border-top-color: var(--c-cobalt-900);
+}
+.item:hover .tip,
+.item:focus-visible .tip {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Legend row at the top of a FeatureGrid */
+.legend {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 24px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+}
+.legendItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}