@conduction/docusaurus-preset 1.2.1 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/ContactCta/ContactCta.jsx

@@ -2,11 +2,9 @@
  * <ContactCta />
  *
  * Soft tinted call-to-action panel for the bottom of academy
- * tutorials, docs pages, or any long-form content. Two-column
- * layout: title + body on the left, single primary action on the
- * right. A subtle pointy-top hex motif decorates the right edge
- * so the panel reads as a Conduction surface, not a generic blue
- * box.
+ * tutorials, docs pages, or any long-form content. Composed from
+ * <HexCard decoration> with a mail icon in the top-left badge and
+ * the primary CTA in the right-side actions slot.
  *
  * Tone: cobalt-50 ground, cobalt-900 type, cobalt-700 body, KNVB
  * orange reserved for the trailing arrow inside the CTA. One
@@ -34,41 +32,39 @@
  */
 
 import React from 'react';
+import HexCard from '../HexCard/HexCard';
 import styles from './ContactCta.module.css';
 
-export default function ContactCta({
-  title,
-  body,
-  cta,
-  className,
-}) {
-  const composed = [styles.panel, className].filter(Boolean).join(' ');
+function CtaButton({cta}) {
+  if (!cta) return null;
+  const isExternal = cta.href && /^https?:/.test(cta.href);
   return (
-    <aside className={composed}>
-      <span className={styles.hex1} aria-hidden="true" />
-      <span className={styles.hex2} aria-hidden="true" />
-      <span className={styles.hex3} aria-hidden="true" />
-
-      <div className={styles.copy}>
-        {title && <h3 className={styles.title}>{title}</h3>}
-        {body && <p className={styles.body}>{body}</p>}
-      </div>
+    <a
+      className={styles.button}
+      href={cta.href || '#'}
+      target={isExternal ? '_blank' : undefined}
+      rel={isExternal ? 'noreferrer noopener' : undefined}
+    >
+      <span>{cta.label}</span>
+      <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14"
+           fill="none" stroke="currentColor" strokeWidth="2"
+           strokeLinecap="round" strokeLinejoin="round">
+        <path d="M5 12h14M12 5l7 7-7 7"/>
+      </svg>
+    </a>
+  );
+}
 
-      {cta && (
-        <a
-          className={styles.button}
-          href={cta.href || '#'}
-          target={cta.href && /^https?:/.test(cta.href) ? '_blank' : undefined}
-          rel={cta.href && /^https?:/.test(cta.href) ? 'noreferrer noopener' : undefined}
-        >
-          <span>{cta.label}</span>
-          <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14"
-               fill="none" stroke="currentColor" strokeWidth="2"
-               strokeLinecap="round" strokeLinejoin="round">
-            <path d="M5 12h14M12 5l7 7-7 7"/>
-          </svg>
-        </a>
-      )}
-    </aside>
+export default function ContactCta({title, body, cta, className}) {
+  return (
+    <HexCard
+      title={title}
+      icon="mail"
+      decoration
+      actions={<CtaButton cta={cta} />}
+      className={className}
+    >
+      {body && <p>{body}</p>}
+    </HexCard>
   );
 }

package/src/components/ContactCta/ContactCta.module.css

@@ -1,97 +1,9 @@
-.panel {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--space-6);
-  align-items: center;
-  background: var(--c-cobalt-50);
-  border: 1px solid var(--c-cobalt-100);
-  border-radius: var(--radius-lg);
-  padding: var(--space-7) var(--space-8);
-  margin: var(--space-12) 0 var(--space-8);
-  overflow: hidden;
-  font-family: var(--conduction-typography-font-family-body);
-}
-
-@media (max-width: 720px) {
-  .panel {
-    grid-template-columns: 1fr;
-    padding: var(--space-6);
-    gap: var(--space-4);
-  }
-}
-
-/* Decorative pointy-top hexes layered on the right edge. They sit
-   behind the copy via z-index 0 with the copy and button on z-index 1.
-   Pointy-top point-up only — never rotated, never flat-top. */
-.hex1,
-.hex2,
-.hex3 {
-  position: absolute;
-  background: var(--c-cobalt-100);
-  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.hex1 {
-  width: 220px;
-  height: 254px;
-  right: -60px;
-  top: -40px;
-  opacity: 0.7;
-}
-
-.hex2 {
-  width: 110px;
-  height: 127px;
-  right: 80px;
-  bottom: -30px;
-  opacity: 0.5;
-  background: var(--c-cobalt-200);
-}
-
-.hex3 {
-  width: 56px;
-  height: 65px;
-  right: 220px;
-  top: 18px;
-  opacity: 0.5;
-  background: var(--c-cobalt-200);
-}
-
-@media (max-width: 720px) {
-  .hex1 { right: -100px; top: -80px; }
-  .hex2, .hex3 { display: none; }
-}
-
-.copy {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  gap: var(--space-2);
-  max-width: 60ch;
-}
-
-.title {
-  font-size: 24px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
-  margin: 0;
-  line-height: 1.25;
-}
-
-.body {
-  font-size: 16px;
-  color: var(--c-cobalt-700);
-  line-height: 1.6;
-  margin: 0;
-}
+/**
+ * <ContactCta /> styles. The shell is now <HexCard decoration>; only
+ * the action button keeps its own rules here.
+ */
 
 .button {
-  position: relative;
-  z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 8px;

package/src/components/HexCard/HexCard.jsx

@@ -0,0 +1,115 @@
+/**
+ * <HexCard />
+ *
+ * Tinted academy/tutorial panel with a top-left hex badge holding an
+ * icon. The shared shell behind <ContactCta />, <Outcomes />, and
+ * <Prerequisites /> — all three were rebuilt in isolation around the
+ * same cobalt-50 surface, so this primitive consolidates the surface,
+ * border, padding, and badge slot in one place.
+ *
+ * Anatomy:
+ *   ┌──────────────────────────────────────────┐
+ *   │ ⬢  Title                       [actions] │
+ *   │    body / list / paragraph               │
+ *   └──────────────────────────────────────────┘
+ *
+ * The badge is a <HexThumbnail size="sm" tone="cobalt-deep"> with a
+ * white glyph. Cobalt + white keeps the orange accent budget free for
+ * the orange checkmark/bullet glyphs inside <Outcomes /> and
+ * <Prerequisites />, and for the orange CTA arrow in <ContactCta />.
+ *
+ * Usage:
+ *
+ *   <HexCard title="Wat je leert" icon="lightbulb">
+ *     <ul>...</ul>
+ *   </HexCard>
+ *
+ *   <HexCard
+ *     title="Wil je meer weten?"
+ *     icon="mail"
+ *     decoration
+ *     actions={<a className="…">Mail ons →</a>}
+ *   >
+ *     <p>Mail ons. We helpen je…</p>
+ *   </HexCard>
+ *
+ * Mirrors preview/components/hex-card.html.
+ */
+
+import React from 'react';
+import HexThumbnail from '../primitives/HexThumbnail';
+import styles from './HexCard.module.css';
+
+const ICONS = {
+  mail: (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <rect x="3" y="5" width="18" height="14" rx="2"/>
+      <path d="M3 7l9 7 9-7"/>
+    </svg>
+  ),
+  lightbulb: (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M9 18h6"/>
+      <path d="M10 21h4"/>
+      <path d="M12 3a6 6 0 0 0-4 10.5c.7.8 1 1.6 1 2.5v1h6v-1c0-.9.3-1.7 1-2.5A6 6 0 0 0 12 3z"/>
+    </svg>
+  ),
+  clipboard: (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <rect x="6" y="4" width="12" height="17" rx="2"/>
+      <rect x="9" y="2" width="6" height="4" rx="1"/>
+      <path d="M9 11h6"/>
+      <path d="M9 15h6"/>
+    </svg>
+  ),
+};
+
+export default function HexCard({
+  title,
+  icon,
+  iconNode,
+  decoration = false,
+  actions,
+  children,
+  className,
+  as: Tag = 'aside',
+}) {
+  const composed = [
+    styles.card,
+    decoration && styles.hasDecoration,
+    actions && styles.hasActions,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const glyph = iconNode || (icon && ICONS[icon]) || null;
+
+  return (
+    <Tag className={composed}>
+      {decoration && (
+        <span className={styles.decoFrame} aria-hidden="true">
+          <span className={`${styles.deco} ${styles.deco1}`} />
+          <span className={`${styles.deco} ${styles.deco2}`} />
+          <span className={`${styles.deco} ${styles.deco3}`} />
+        </span>
+      )}
+
+      {glyph && (
+        <span className={styles.badge} aria-hidden="true">
+          <HexThumbnail size="sm" tone="cobalt-deep">{glyph}</HexThumbnail>
+        </span>
+      )}
+
+      <div className={styles.head}>
+        {title && <h3 className={styles.title}>{title}</h3>}
+      </div>
+
+      <div className={styles.body}>
+        {children}
+      </div>
+
+      {actions && (
+        <div className={styles.actions}>{actions}</div>
+      )}
+    </Tag>
+  );
+}

package/src/components/HexCard/HexCard.module.css

@@ -0,0 +1,160 @@
+/**
+ * <HexCard /> styles. Tinted academy panel with a corner hex badge
+ * and an optional right-edge decorative hex motif.
+ *
+ * Layout: the badge is absolute-positioned and centered on the
+ * top-left corner of the card (half outside, half inside). Card
+ * padding has extra inset on the left and bottom so the title and
+ * the last list item never collide with the protruding hex.
+ *
+ *   ┌── ⬢ ────────────────────────┐
+ *   │ ⬢      Title       [actions]│
+ *   │   body / list / paragraph   │
+ *   │                             │
+ *   └─────────────────────────────┘
+ */
+
+.card {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "head"
+    "body";
+  row-gap: var(--space-3);
+  align-items: start;
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6) var(--space-8) var(--space-10) var(--space-12);
+  margin: var(--space-8) 0;
+  overflow: visible;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.hasActions {
+  grid-template-columns: 1fr auto;
+  grid-template-areas:
+    "head    actions"
+    "body    actions";
+  align-items: center;
+  column-gap: var(--space-5);
+}
+
+@media (max-width: 720px) {
+  .hasActions {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "head"
+      "body"
+      "actions";
+  }
+  .card { padding: var(--space-6) var(--space-5) var(--space-8) var(--space-10); }
+}
+
+/* Hex badge centered on the top-left corner. Half overflows the
+   card to the upper-left so the badge reads as a corner mark, not
+   an inset glyph. z-index lifts it above the deco frame. */
+.badge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  display: inline-flex;
+  pointer-events: none;
+}
+
+.head {
+  grid-area: head;
+  position: relative;
+  z-index: 1;
+  align-self: center;
+}
+
+.title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0;
+  line-height: 1.25;
+}
+
+.body {
+  grid-area: body;
+  position: relative;
+  z-index: 1;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--c-cobalt-700);
+}
+
+.body > p { margin: 0; }
+.body > p + p { margin-top: var(--space-3); }
+.body > ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-3);
+}
+
+.actions {
+  grid-area: actions;
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+/* Wraps the decorative right-edge hexes. Absolute, fills the card,
+   inherits border-radius, and clips its own children so the deco
+   stays inside the rounded panel even though the card itself has
+   overflow: visible (needed for the corner badge). */
+.decoFrame {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.deco {
+  position: absolute;
+  background: var(--c-cobalt-100);
+  clip-path: var(--hex-pointy-top);
+}
+
+.deco1 {
+  width: 220px;
+  height: 254px;
+  right: -60px;
+  top: -40px;
+  opacity: 0.7;
+}
+
+.deco2 {
+  width: 110px;
+  height: 127px;
+  right: 80px;
+  bottom: -30px;
+  opacity: 0.5;
+  background: var(--c-cobalt-200);
+}
+
+.deco3 {
+  width: 56px;
+  height: 65px;
+  right: 220px;
+  top: 18px;
+  opacity: 0.5;
+  background: var(--c-cobalt-200);
+}
+
+@media (max-width: 720px) {
+  .deco1 { right: -100px; top: -80px; }
+  .deco2, .deco3 { display: none; }
+}

package/src/components/Outcomes/Outcomes.jsx

@@ -10,9 +10,10 @@
  *   - "What do I need before I start?"     (Prerequisites)
  *   - the actual tutorial body
  *
- * Visual: tinted card identical to <Prerequisites />, but each item
- * uses an orange checkmark glyph (achievement) instead of the orange
- * hex bullet (need). Same tone, distinct semantics.
+ * Visual: shared <HexCard> shell with a lightbulb icon in the
+ * top-left badge. Each item uses an orange checkmark glyph
+ * (achievement) instead of the orange hex bullet (need) used in
+ * <Prerequisites />. Same surface, distinct semantics.
  *
  * Usage:
  *
@@ -27,6 +28,7 @@
  */
 
 import React from 'react';
+import HexCard from '../HexCard/HexCard';
 import styles from './Outcomes.module.css';
 
 export function Outcome({children, className}) {
@@ -44,11 +46,9 @@ export function Outcome({children, className}) {
 }
 
 export default function Outcomes({title = "What you'll learn", children, className}) {
-  const composed = [styles.card, className].filter(Boolean).join(' ');
   return (
-    <aside className={composed}>
-      {title && <h2 className={styles.title}>{title}</h2>}
-      <ul className={styles.list}>{children}</ul>
-    </aside>
+    <HexCard title={title} icon="lightbulb" className={className}>
+      <ul>{children}</ul>
+    </HexCard>
   );
 }

package/src/components/Outcomes/Outcomes.module.css

@@ -1,29 +1,7 @@
-.card {
-  background: var(--c-cobalt-50);
-  border: 1px solid var(--c-cobalt-100);
-  border-radius: var(--radius-lg);
-  padding: var(--space-6) var(--space-7);
-  margin: var(--space-8) 0;
-  font-family: var(--conduction-typography-font-family-body);
-}
-
-.title {
-  font-size: 22px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
-  margin: 0 0 var(--space-4);
-  line-height: 1.25;
-}
-
-.list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: grid;
-  gap: var(--space-3);
-  max-width: none;
-}
+/**
+ * <Outcomes /> styles. The shell is provided by <HexCard>; only the
+ * orange-checkmark item layout lives here.
+ */
 
 .item {
   display: grid;

package/src/components/Prerequisites/Prerequisites.jsx

@@ -5,10 +5,10 @@
  * starting an academy tutorial. Replaces the ad-hoc "What you need"
  * h2 + bullet list pattern that was duplicated across tutorials.
  *
- * Each item renders with a small hex-bullet on the left so the list
- * reads as a checklist instead of generic prose. The card uses the
- * cobalt-50 tinted-surface tone, matching <FeatureList/> and
- * <FAQ/> on academy pages.
+ * Visual: shared <HexCard> shell with a clipboard icon in the
+ * top-left badge. Each item renders with a small orange hex-bullet
+ * on the left so the list reads as a checklist instead of generic
+ * prose.
  *
  * Usage:
  *
@@ -25,6 +25,7 @@
  */
 
 import React from 'react';
+import HexCard from '../HexCard/HexCard';
 import styles from './Prerequisites.module.css';
 
 export function PrerequisiteItem({children, className}) {
@@ -38,11 +39,9 @@ export function PrerequisiteItem({children, className}) {
 }
 
 export default function Prerequisites({title = 'What you need', children, className}) {
-  const composed = [styles.card, className].filter(Boolean).join(' ');
   return (
-    <aside className={composed}>
-      {title && <h2 className={styles.title}>{title}</h2>}
-      <ul className={styles.list}>{children}</ul>
-    </aside>
+    <HexCard title={title} icon="clipboard" className={className}>
+      <ul>{children}</ul>
+    </HexCard>
   );
 }

package/src/components/Prerequisites/Prerequisites.module.css

@@ -1,28 +1,7 @@
-.card {
-  background: var(--c-cobalt-50);
-  border: 1px solid var(--c-cobalt-100);
-  border-radius: var(--radius-lg);
-  padding: var(--space-6) var(--space-7);
-  margin: var(--space-10) 0;
-  font-family: var(--conduction-typography-font-family-body);
-}
-
-.title {
-  font-size: 18px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
-  margin: 0 0 var(--space-3);
-  line-height: 1.3;
-}
-
-.list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: grid;
-  gap: var(--space-2);
-}
+/**
+ * <Prerequisites /> styles. The shell is provided by <HexCard>; only
+ * the orange hex-bullet item layout lives here.
+ */
 
 .item {
   display: grid;
@@ -39,7 +18,7 @@
   height: 14px;
   margin-top: 6px;
   background: var(--c-orange-knvb);
-  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  clip-path: var(--hex-pointy-top);
   flex-shrink: 0;
 }
 

package/src/components/index.js

@@ -99,6 +99,7 @@ export {default as ContentDetailHero} from './ContentDetailHero/ContentDetailHer
    "What you need", "Troubleshooting", and "Next steps" h2 + bullet
    patterns that academy tutorials kept duplicating. Designed for use
    inside an MDX academy post body. */
+export {default as HexCard} from './HexCard/HexCard.jsx';
 export {default as Outcomes, Outcome} from './Outcomes/Outcomes.jsx';
 export {default as Prerequisites, PrerequisiteItem} from './Prerequisites/Prerequisites.jsx';
 export {default as Troubleshooting, TroubleshootingItem} from './Troubleshooting/Troubleshooting.jsx';