@dloizides/marketing-astro-kit 1.3.3 → 1.4.0

package/src/DemoFrame.astro

@@ -1,264 +1,268 @@
----
-// Reusable interactive "try it" demo shell for product marketing sites — a
-// themeable chrome around client-side, curated example data. The marketing
-// sites are static (nginx, no backend), so the demo runs ENTIRELY in the
-// browser over honest, clearly-labelled sample data. This component owns the
-// shared parts:
-//
-//   • eyebrow / title / intro
-//   • a row of clickable example "chips"
-//   • a result-panel area — the host supplies one bespoke, product-owned panel
-//     per example in the default slot, each tagged `data-demo-result="<id>"`
-//     (matching an example id) and the FIRST one also `data-active`
-//   • a clearly-visible "sample data" disclaimer line
-//   • a primary CTA (reuses PrimaryCta) driving to signup
-//
-//   <DemoFrame data={demo}>
-//     <div data-demo-result="flagged" data-active
-//          id="demo-panel-flagged" role="tabpanel" aria-labelledby="demo-chip-flagged">
-//       …your bespoke high-risk result markup…
-//     </div>
-//     <div data-demo-result="clean"
-//          id="demo-panel-clean" role="tabpanel" aria-labelledby="demo-chip-clean">…</div>
-//   </DemoFrame>
-//
-// The per-example RESULT markup is inherently product-specific (it mirrors the
-// product's real output), so it comes in via the default slot (Astro forbids a
-// dynamic `slot[name]`, so panels are keyed by a `data-demo-result` attribute
-// instead) while the frame stays shared. The frame's chip ids are
-// `<id>-chip-<exampleId>` and it wires `aria-controls` to `<id>-panel-<exampleId>`,
-// so a host panel should use `id="<id>-panel-<exampleId>"` +
-// `aria-labelledby="<id>-chip-<exampleId>"`. Minimal inline vanilla JS toggles
-// which panel shows on chip click — no framework. Progressive enhancement: the
-// FIRST panel (`data-active`) is visible without JS; the script just moves it.
-import type { DemoFrameData } from './schema';
-import PrimaryCta from './PrimaryCta.astro';
-
-interface Props {
-  data: DemoFrameData;
-  id?: string;
-}
-
-const { data, id = 'demo' } = Astro.props as Props;
-const { examples } = data;
----
-
-<section class="dmk-demo" id={id} aria-labelledby={`${id}-title`} data-demo-frame>
-  <div class="dmk-container">
-    <p class="dmk-eyebrow" data-reveal>{data.eyebrow}</p>
-    <h2 class="dmk-title" id={`${id}-title`} data-reveal>{data.title}</h2>
-    {data.intro && <p class="dmk-intro" data-reveal>{data.intro}</p>}
-
-    <div class="dmk-panel" data-reveal>
-      <div class="dmk-chips" role="tablist" aria-label="Example inputs">
-        {examples.map((ex, i) => (
-          <button
-            type="button"
-            class="dmk-chip"
-            role="tab"
-            id={`${id}-chip-${ex.id}`}
-            aria-controls={`${id}-panel-${ex.id}`}
-            aria-selected={i === 0 ? 'true' : 'false'}
-            tabindex={i === 0 ? '0' : '-1'}
-            data-demo-chip={ex.id}
-            data-active={i === 0 ? '' : undefined}
-            data-umami-event={ex.analyticsEvent}
-          >
-            <span class="dmk-chip__label">{ex.label}</span>
-            {ex.sublabel && <span class="dmk-chip__sub">{ex.sublabel}</span>}
-          </button>
-        ))}
-      </div>
-
-      <div class="dmk-results">
-        <slot />
-      </div>
-
-      <p class="dmk-disclaimer" data-reveal>
-        <span class="dmk-disclaimer__dot" aria-hidden="true"></span>
-        {data.disclaimer}
-      </p>
-
-      <div class="dmk-cta" data-reveal>
-        <PrimaryCta cta={data.cta} secondary={data.secondaryCta} size="md" />
-      </div>
-    </div>
-  </div>
-</section>
-
-<script>
-  // Chip → result toggle for every DemoFrame on the page. Progressive
-  // enhancement: without JS the CSS already shows the first ([data-active])
-  // result; this just moves `data-active` on click (and arrow-key roving so the
-  // tablist is keyboard-navigable).
-  document.querySelectorAll('[data-demo-frame]').forEach((frame) => {
-    const chips = Array.from(frame.querySelectorAll('[data-demo-chip]'));
-    const results = Array.from(frame.querySelectorAll('[data-demo-result]'));
-
-    const activate = (key) => {
-      chips.forEach((chip) => {
-        const on = chip.getAttribute('data-demo-chip') === key;
-        chip.toggleAttribute('data-active', on);
-        chip.setAttribute('aria-selected', on ? 'true' : 'false');
-        chip.setAttribute('tabindex', on ? '0' : '-1');
-      });
-      results.forEach((result) => {
-        result.toggleAttribute('data-active', result.getAttribute('data-demo-result') === key);
-      });
-    };
-
-    chips.forEach((chip, index) => {
-      chip.addEventListener('click', () => activate(chip.getAttribute('data-demo-chip')));
-      chip.addEventListener('keydown', (event) => {
-        const delta = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
-        if (!delta) return;
-        event.preventDefault();
-        const next = chips[(index + delta + chips.length) % chips.length];
-        activate(next.getAttribute('data-demo-chip'));
-        next.focus();
-      });
-    });
-  });
-</script>
-
-<style>
-  .dmk-demo {
-    --_brand: var(--brand, #d8332a);
-    --_brand-deep: var(--brand-deep, #a8231c);
-    --_accent: var(--accent, #f5a300);
-    --_ink: var(--ink, #0a0a1f);
-    --_paper: var(--paper, #fff);
-    --_bg: var(--bg, #fbf9f4);
-    --_bg-tint: var(--bg-tint, #f1ede1);
-    --_muted: var(--muted, rgba(10, 10, 31, 0.62));
-    --_hairline: var(--hairline, rgba(10, 10, 31, 0.1));
-    --_r-md: var(--radius-md, 14px);
-    --_r-lg: var(--radius-lg, 24px);
-    --_shadow: var(--shadow, 0 30px 60px -30px rgba(10, 10, 31, 0.4));
-    padding: 96px 0;
-    background: var(--_paper);
-    border-top: 1px solid var(--_hairline);
-    border-bottom: 1px solid var(--_hairline);
-  }
-  .dmk-container {
-    width: min(1200px, 100% - 48px);
-    margin-inline: auto;
-  }
-  .dmk-eyebrow {
-    font-family: 'Oswald', sans-serif;
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 0.22em;
-    text-transform: uppercase;
-    color: var(--_brand);
-    margin: 0;
-  }
-  .dmk-title {
-    font-family: 'Oswald', 'Inter', sans-serif;
-    font-size: clamp(30px, 3.8vw, 46px);
-    font-weight: 700;
-    line-height: 1.08;
-    letter-spacing: -0.01em;
-    margin: 12px 0 14px;
-    max-width: 24ch;
-    color: var(--_ink);
-  }
-  .dmk-intro {
-    color: var(--_muted);
-    max-width: 62ch;
-    margin: 0 0 36px;
-  }
-
-  /* Panel --------------------------------------------------------------- */
-  .dmk-panel {
-    padding: 26px;
-    border-radius: var(--_r-lg);
-    background: var(--_bg);
-    border: 1px solid var(--_hairline);
-  }
-  @media (max-width: 560px) {
-    .dmk-panel { padding: 18px; }
-    .dmk-demo { padding: 64px 0; }
-  }
-
-  /* Chips (tablist) ----------------------------------------------------- */
-  .dmk-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 22px;
-  }
-  .dmk-chip {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 2px;
-    padding: 11px 16px;
-    border-radius: var(--_r-md);
-    background: var(--_paper);
-    border: 1px solid var(--_hairline);
-    cursor: pointer;
-    text-align: left;
-    font-family: inherit;
-    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease,
-      background 0.14s ease;
-  }
-  .dmk-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--_brand) 40%, var(--_hairline)); }
-  .dmk-chip:focus-visible { outline: 2px solid var(--_brand); outline-offset: 2px; }
-  .dmk-chip[data-active] {
-    border-color: var(--_brand);
-    background: color-mix(in srgb, var(--_brand) 8%, var(--_paper));
-    box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--_brand) 80%, transparent);
-  }
-  .dmk-chip__label {
-    font-family: 'Oswald', 'Inter', sans-serif;
-    font-weight: 600;
-    font-size: 14px;
-    letter-spacing: 0.01em;
-    color: var(--_ink);
-  }
-  .dmk-chip__sub {
-    font-size: 11.5px;
-    color: var(--_muted);
-  }
-
-  /* Results ------------------------------------------------------------- */
-  /* The panels are host-supplied slot content, so the show/hide toggle is
-     :global (keyed by data attributes) to reach across the slot boundary; it
-     stays scoped under .dmk-results so it can't leak to the wider page. */
-  .dmk-results { min-height: 10px; }
-  .dmk-results :global([data-demo-result]) { display: none; }
-  .dmk-results :global([data-demo-result][data-active]) {
-    display: block;
-    animation: dmk-fade 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
-  }
-  @keyframes dmk-fade {
-    from { opacity: 0; transform: translateY(6px); }
-    to { opacity: 1; transform: none; }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .dmk-results :global([data-demo-result][data-active]) { animation: none; }
-  }
-
-  /* Disclaimer ---------------------------------------------------------- */
-  .dmk-disclaimer {
-    display: flex;
-    align-items: baseline;
-    gap: 9px;
-    margin: 22px 0 0;
-    font-size: 12.5px;
-    line-height: 1.5;
-    color: var(--_muted);
-    font-style: italic;
-  }
-  .dmk-disclaimer__dot {
-    flex-shrink: 0;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--_accent);
-    transform: translateY(1px);
-  }
-
-  .dmk-cta { margin-top: 22px; }
-</style>
+---
+// Reusable interactive "try it" demo shell for product marketing sites — a
+// themeable chrome around client-side, curated example data. The marketing
+// sites are static (nginx, no backend), so the demo runs ENTIRELY in the
+// browser over honest, clearly-labelled sample data. This component owns the
+// shared parts:
+//
+//   • eyebrow / title / intro
+//   • a row of clickable example "chips"
+//   • a result-panel area — the host supplies one bespoke, product-owned panel
+//     per example in the default slot, each tagged `data-demo-result="<id>"`
+//     (matching an example id) and the FIRST one also `data-active`
+//   • a clearly-visible "sample data" disclaimer line
+//   • a primary CTA (reuses PrimaryCta) driving to signup
+//
+//   <DemoFrame data={demo}>
+//     <div data-demo-result="flagged" data-active
+//          id="demo-panel-flagged" role="tabpanel" aria-labelledby="demo-chip-flagged">
+//       …your bespoke high-risk result markup…
+//     </div>
+//     <div data-demo-result="clean"
+//          id="demo-panel-clean" role="tabpanel" aria-labelledby="demo-chip-clean">…</div>
+//   </DemoFrame>
+//
+// The per-example RESULT markup is inherently product-specific (it mirrors the
+// product's real output), so it comes in via the default slot (Astro forbids a
+// dynamic `slot[name]`, so panels are keyed by a `data-demo-result` attribute
+// instead) while the frame stays shared. The frame's chip ids are
+// `<id>-chip-<exampleId>` and it wires `aria-controls` to `<id>-panel-<exampleId>`,
+// so a host panel should use `id="<id>-panel-<exampleId>"` +
+// `aria-labelledby="<id>-chip-<exampleId>"`. Minimal inline vanilla JS toggles
+// which panel shows on chip click — no framework. Progressive enhancement: the
+// FIRST panel (`data-active`) is visible without JS; the script just moves it.
+import type { DemoFrameData } from './schema';
+import './a11y.css';
+import PrimaryCta from './PrimaryCta.astro';
+
+interface Props {
+  data: DemoFrameData;
+  id?: string;
+}
+
+const { data, id = 'demo' } = Astro.props as Props;
+const { examples } = data;
+---
+
+<section class="dmk-demo" id={id} aria-labelledby={`${id}-title`} data-demo-frame>
+  <div class="dmk-container">
+    <p class="dmk-eyebrow" data-reveal>{data.eyebrow}</p>
+    <h2 class="dmk-title" id={`${id}-title`} data-reveal>{data.title}</h2>
+    {data.intro && <p class="dmk-intro" data-reveal>{data.intro}</p>}
+
+    <div class="dmk-panel" data-reveal>
+      <div class="dmk-chips" role="tablist" aria-label="Example inputs">
+        {examples.map((ex, i) => (
+          <button
+            type="button"
+            class="dmk-chip"
+            role="tab"
+            id={`${id}-chip-${ex.id}`}
+            aria-controls={`${id}-panel-${ex.id}`}
+            aria-selected={i === 0 ? 'true' : 'false'}
+            tabindex={i === 0 ? '0' : '-1'}
+            data-demo-chip={ex.id}
+            data-active={i === 0 ? '' : undefined}
+            data-umami-event={ex.analyticsEvent}
+          >
+            <span class="dmk-chip__label">{ex.label}</span>
+            {ex.sublabel && <span class="dmk-chip__sub">{ex.sublabel}</span>}
+          </button>
+        ))}
+      </div>
+
+      <div class="dmk-results">
+        <slot />
+      </div>
+
+      <p class="dmk-disclaimer" data-reveal>
+        <span class="dmk-disclaimer__dot" aria-hidden="true"></span>
+        {data.disclaimer}
+      </p>
+
+      <div class="dmk-cta" data-reveal>
+        <PrimaryCta cta={data.cta} secondary={data.secondaryCta} size="md" />
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  // Chip → result toggle for every DemoFrame on the page. Progressive
+  // enhancement: without JS the CSS already shows the first ([data-active])
+  // result; this just moves `data-active` on click (and arrow-key roving so the
+  // tablist is keyboard-navigable).
+  document.querySelectorAll('[data-demo-frame]').forEach((frame) => {
+    const chips = Array.from(frame.querySelectorAll('[data-demo-chip]'));
+    const results = Array.from(frame.querySelectorAll('[data-demo-result]'));
+
+    const activate = (key) => {
+      chips.forEach((chip) => {
+        const on = chip.getAttribute('data-demo-chip') === key;
+        chip.toggleAttribute('data-active', on);
+        chip.setAttribute('aria-selected', on ? 'true' : 'false');
+        chip.setAttribute('tabindex', on ? '0' : '-1');
+      });
+      results.forEach((result) => {
+        result.toggleAttribute('data-active', result.getAttribute('data-demo-result') === key);
+      });
+    };
+
+    chips.forEach((chip, index) => {
+      chip.addEventListener('click', () => activate(chip.getAttribute('data-demo-chip')));
+      chip.addEventListener('keydown', (event) => {
+        const delta = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+        if (!delta) return;
+        event.preventDefault();
+        const next = chips[(index + delta + chips.length) % chips.length];
+        activate(next.getAttribute('data-demo-chip'));
+        next.focus();
+      });
+    });
+  });
+</script>
+
+<style>
+  .dmk-demo {
+    --_brand: var(--brand, #d8332a);
+    --_brand-deep: var(--brand-deep, #a8231c);
+    --_accent: var(--accent, #f5a300);
+    --_ink: var(--ink, #0a0a1f);
+    --_paper: var(--paper, #fff);
+    --_bg: var(--bg, #fbf9f4);
+    --_bg-tint: var(--bg-tint, #f1ede1);
+    --_muted: var(--muted, rgba(10, 10, 31, 0.62));
+    --_hairline: var(--hairline, rgba(10, 10, 31, 0.1));
+    --_r-md: var(--radius-md, 14px);
+    --_r-lg: var(--radius-lg, 24px);
+    --_shadow: var(--shadow, 0 30px 60px -30px rgba(10, 10, 31, 0.4));
+    padding: 96px 0;
+    background: var(--_paper);
+    border-top: 1px solid var(--_hairline);
+    border-bottom: 1px solid var(--_hairline);
+  }
+  .dmk-container {
+    width: min(1200px, 100% - 48px);
+    margin-inline: auto;
+  }
+  .dmk-eyebrow {
+    font-family: 'Oswald', sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--_brand);
+    margin: 0;
+  }
+  .dmk-title {
+    font-family: 'Oswald', 'Inter', sans-serif;
+    font-size: clamp(30px, 3.8vw, 46px);
+    font-weight: 700;
+    line-height: 1.08;
+    letter-spacing: -0.01em;
+    margin: 12px 0 14px;
+    max-width: 24ch;
+    color: var(--_ink);
+  }
+  .dmk-intro {
+    color: var(--_muted);
+    max-width: 62ch;
+    margin: 0 0 36px;
+  }
+
+  /* Panel --------------------------------------------------------------- */
+  .dmk-panel {
+    padding: 26px;
+    border-radius: var(--_r-lg);
+    background: var(--_bg);
+    border: 1px solid var(--_hairline);
+  }
+  @media (max-width: 560px) {
+    .dmk-panel { padding: 18px; }
+    .dmk-demo { padding: 64px 0; }
+  }
+
+  /* Chips (tablist) ----------------------------------------------------- */
+  .dmk-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 22px;
+  }
+  .dmk-chip {
+    box-sizing: border-box;
+    min-height: var(--tmk-min-target);
+    min-width: var(--tmk-min-target);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    padding: 11px 16px;
+    border-radius: var(--_r-md);
+    background: var(--_paper);
+    border: 1px solid var(--_hairline);
+    cursor: pointer;
+    text-align: left;
+    font-family: inherit;
+    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease,
+      background 0.14s ease;
+  }
+  .dmk-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--_brand) 40%, var(--_hairline)); }
+  .dmk-chip:focus-visible { outline: 2px solid var(--_brand); outline-offset: 2px; }
+  .dmk-chip[data-active] {
+    border-color: var(--_brand);
+    background: color-mix(in srgb, var(--_brand) 8%, var(--_paper));
+    box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--_brand) 80%, transparent);
+  }
+  .dmk-chip__label {
+    font-family: 'Oswald', 'Inter', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 0.01em;
+    color: var(--_ink);
+  }
+  .dmk-chip__sub {
+    font-size: 11.5px;
+    color: var(--_muted);
+  }
+
+  /* Results ------------------------------------------------------------- */
+  /* The panels are host-supplied slot content, so the show/hide toggle is
+     :global (keyed by data attributes) to reach across the slot boundary; it
+     stays scoped under .dmk-results so it can't leak to the wider page. */
+  .dmk-results { min-height: 10px; }
+  .dmk-results :global([data-demo-result]) { display: none; }
+  .dmk-results :global([data-demo-result][data-active]) {
+    display: block;
+    animation: dmk-fade 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
+  }
+  @keyframes dmk-fade {
+    from { opacity: 0; transform: translateY(6px); }
+    to { opacity: 1; transform: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .dmk-results :global([data-demo-result][data-active]) { animation: none; }
+  }
+
+  /* Disclaimer ---------------------------------------------------------- */
+  .dmk-disclaimer {
+    display: flex;
+    align-items: baseline;
+    gap: 9px;
+    margin: 22px 0 0;
+    font-size: 12.5px;
+    line-height: 1.5;
+    color: var(--_muted);
+    font-style: italic;
+  }
+  .dmk-disclaimer__dot {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--_accent);
+    transform: translateY(1px);
+  }
+
+  .dmk-cta { margin-top: 22px; }
+</style>