@getvitops/emdash 1.0.0 → 2.0.0-alpha.1

package/src/astro/WidgetArea.astro

@@ -0,0 +1,91 @@
+---
+/**
+ * A widget area rendered in the framework's vocabulary, in place of `emdash/ui`'s
+ * `<WidgetArea>`: titles at a chosen heading level (the stock one is always `h3`), a menu as a
+ * labelled `<nav>` of `.link`s, content through `<PortableText>` so every `vitops.*` block
+ * works inside it. Renders nothing when the area is missing or empty.
+ *
+ * Two limits, both deliberate:
+ * - **No widget area inside a widget area.** A content widget that held a `vitops.widgetArea`
+ *   block could name its own area and recurse, and a request-scoped depth counter cannot be kept
+ *   honest while Astro streams children, so the block is simply not rendered in here.
+ * - **`component` widgets** (`core:recent-posts`, …) are EmDash's closed map and its renderer is
+ *   not exported, so an area that holds one is handed whole to the stock `<WidgetArea>`.
+ *
+ * Prerendered pages bake the area at build time: an edit in the admin shows after the next deploy.
+ */
+import { getMenu, getWidgetArea } from 'emdash';
+import { PortableText, WidgetArea as StockWidgetArea } from 'emdash/ui';
+import Nothing from './Nothing.astro';
+import { headingTag, safeHref, text } from './blocks/value.ts';
+
+interface Props {
+  /** The area's `name` as set under Widgets. */
+  name: string;
+  /** Level of each widget's title; default `3`. */
+  level?: number | string;
+  class?: string;
+  id?: string;
+  style?: string;
+}
+
+const { name, level, class: className, id, style } = Astro.props;
+const area = name ? await getWidgetArea(name) : null;
+const widgets = area?.widgets ?? [];
+const delegated = widgets.some((w) => w.type === 'component');
+const Heading = headingTag(level, 3);
+const menus = Object.fromEntries(
+  await Promise.all(
+    widgets
+      .filter((w) => w.type === 'menu' && w.menuName)
+      .map(async (w) => [w.id, await getMenu(w.menuName!)] as const),
+  ),
+);
+const inner = { type: { 'vitops.widgetArea': Nothing } };
+---
+
+{
+  widgets.length > 0 && (
+    <div id={id} class:list={['widget-area', className]} style={style} data-widget-area={area?.name}>
+      {delegated ? (
+        <StockWidgetArea name={name} />
+      ) : (
+        <>
+        {widgets.map((widget) => (
+          <section class="widget" data-widget-type={widget.type}>
+            {text(widget.title) && widget.type !== 'menu' && (
+              <Heading class="widget__title font-heading">{widget.title}</Heading>
+            )}
+            {widget.type === 'content' && widget.content && (
+              <div class="widget__content rhythm">
+                <PortableText value={widget.content} components={inner} />
+              </div>
+            )}
+            {widget.type === 'menu' && menus[widget.id] && (
+              <>
+                {text(widget.title) && <Heading class="widget__title font-heading">{widget.title}</Heading>}
+                <nav class="widget__menu" aria-label={text(widget.title) || area?.label}>
+                  <ul role="list">
+                    {menus[widget.id]!.items.map((item) => {
+                      const href = safeHref(item.url);
+                      return (
+                        href && (
+                          <li>
+                            <a class="link" href={href} title={item.titleAttr || undefined}>
+                              {item.label}
+                            </a>
+                          </li>
+                        )
+                      );
+                    })}
+                  </ul>
+                </nav>
+              </>
+            )}
+          </section>
+        ))}
+        </>
+      )}
+    </div>
+  )
+}

package/src/astro/blocks/Accordion.astro

@@ -21,11 +21,12 @@ const items = rows<Record<string, unknown>>(value.items)
   }))
   .filter((item) => item.summary);
 const group = value.exclusive ? `accordion-${value._key ?? 'group'}` : undefined;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   items.length > 0 && (
-    <div class="accordion">
+    <div {...rootAttrs(value, ['accordion'])}>
       {items.map((item) => (
         <details name={group} open={item.open}>
           <summary>{item.summary}</summary>

package/src/astro/blocks/ActionLink.astro

@@ -51,12 +51,13 @@ const classes = [variant, role ? `${variant}-${role}` : null, newTab ? 'link--ex
 // Only render when there is somewhere to go and something to read — a bare icon
 // with no label would be an unlabelled link.
 const renderable = Boolean(label && href);
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   renderable && (
     <a
-      class={classes}
+      {...rootAttrs(value, [classes])}
       href={href}
       {...(newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
       {startIcon && (

package/src/astro/blocks/Badges.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * `vitops.badges` — a row of short labels on the framework's `.badge` (static) or `.tag`
+ * pattern. Each row may carry its own tone, falling back to the block's, which is what lets
+ * one block show a pine label beside an amber one. An icon is child order, not a modifier, and
+ * a row with a `href` becomes a link.
+ */
+import { resolveTone } from './tone.ts';
+import { resolveBlockValue, rows, safeHref, text } from './value.ts';
+import { rootAttrs } from './attrs.ts';
+
+interface Props {
+  /** Base URL of the sprite. Matches VitopsEmdashOptions.wcBase. */
+  spriteBase?: string;
+}
+
+interface Value {
+  items?: unknown;
+  variant?: string;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const { spriteBase = '/vitops' } = Astro.props as Props;
+const kind = text(value.variant) === 'tag' ? 'tag' : 'badge';
+const items = rows<Record<string, unknown>>(value.items)
+  .map((row) => {
+    const own = text(row.tone) || text(row.color);
+    const tone = own ? resolveTone(row.tone, row.color) : resolveTone(value.tone, value.color);
+    return {
+      label: text(row.label),
+      icon: /^[a-z0-9-]+$/.test(text(row.icon)) ? text(row.icon) : '',
+      href: safeHref(row.href),
+      tone,
+    };
+  })
+  .filter((item) => item.label);
+---
+
+  {
+    items.length > 0 && (
+      <ul {...rootAttrs(value, ['cluster'])} role="list">
+        {items.map((item) => {
+          const Tag = item.href ? 'a' : 'span';
+          return (
+            <li>
+              <Tag
+                class:list={[kind, item.tone.style && item.tone.className, item.href && 'link']}
+                href={item.href || undefined}
+                style={item.tone.style || undefined}
+              >
+                {item.icon && (
+                  <span class="icon" aria-hidden="true">
+                    <svg>
+                      <use href={`${spriteBase}/icons.svg#icon-${item.icon}`} />
+                    </svg>
+                  </span>
+                )}
+                {item.label}
+              </Tag>
+            </li>
+          );
+        })}
+      </ul>
+    )
+  }

package/src/astro/blocks/Banner.astro

@@ -10,10 +10,11 @@ interface Value {
 const value = resolveBlockValue<Value>(Astro.props);
 const { message, tone = 'info', dismissible = true } = value;
 const bannerClass = `banner bg-${tone}${dismissible ? ' banner--dismissible' : ''}`;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {message && dismissible && (
-  <wc-dismissable>
+  <wc-dismissable {...rootAttrs(value)}>
     <div class={bannerClass}>
       <div class="banner__content">{message}</div>
       <button class="banner__close" data-dismiss aria-label="Dismiss">✕</button>
@@ -21,7 +22,7 @@ const bannerClass = `banner bg-${tone}${dismissible ? ' banner--dismissible' : '
   </wc-dismissable>
 )}
 {message && !dismissible && (
-  <div class={bannerClass}>
+  <div {...rootAttrs(value, [bannerClass])}>
     <div class="banner__content">{message}</div>
   </div>
 )}

package/src/astro/blocks/Callout.astro

@@ -0,0 +1,68 @@
+---
+/**
+ * A call-to-action band on the framework's `.callout` pattern. Not `vitops.banner`: that is
+ * a dismissible announcement, this is content that stays. The heading is a real heading at
+ * the editor's `level`; colour is the shared tone convention, tinted by default and filled
+ * with the role's solid when `solid` is on.
+ */
+import RichText from './RichText.astro';
+import { resolveTone, joinStyle } from './tone.ts';
+import { headingTag, resolveBlockValue, safeHref, text } from './value.ts';
+
+interface Value {
+  heading?: string;
+  level?: string | number;
+  body?: string;
+  primaryLabel?: string;
+  primaryHref?: string;
+  secondaryLabel?: string;
+  secondaryHref?: string;
+  align?: string;
+  solid?: boolean;
+  tone?: string;
+  color?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const heading = text(value.heading);
+const body = text(value.body);
+const primaryLabel = text(value.primaryLabel);
+const primaryHref = safeHref(value.primaryHref);
+const secondaryLabel = text(value.secondaryLabel);
+const secondaryHref = safeHref(value.secondaryHref);
+const hasActions = Boolean((primaryLabel && primaryHref) || (secondaryLabel && secondaryHref));
+const Heading = headingTag(value.level, 2);
+const tone = resolveTone(value.tone, value.color);
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  (heading || body) && (
+    <div
+      {...rootAttrs(value, ['callout', tone.className, value.solid && 'tone--solid', value.align === 'center' && 'callout--center'], joinStyle(tone.style))}
+    >
+      <div class="callout__body">
+        {heading && <Heading class="callout__title font-title">{heading}</Heading>}
+        {body && (
+          <p class="callout__text">
+            <RichText text={body} />
+          </p>
+        )}
+      </div>
+      {hasActions && (
+        <p class="callout__actions cluster">
+          {primaryLabel && primaryHref && (
+            <a class="cta" href={primaryHref}>
+              {primaryLabel}
+            </a>
+          )}
+          {secondaryLabel && secondaryHref && (
+            <a class="link" href={secondaryHref}>
+              {secondaryLabel}
+            </a>
+          )}
+        </p>
+      )}
+    </div>
+  )
+}

package/src/astro/blocks/Cards.astro

@@ -5,15 +5,30 @@
  * as a whole while its text stays selectable; without JS the stretched link does the
  * same job. The card CSS is the framework's `.card` pattern.
  *
- * The title is a styled paragraph rather than a fixed heading element: the block can
- * sit at any depth in a document, and a hard-coded `<h3>` would skip or repeat levels.
+ * **The title is a real heading** at the editor's `level` (default `h3`), in the `heading`
+ * type role. It used to be `<p class="font-heading">`: the wrong size for a card in most
+ * type scales AND no heading in the outline (UPSTREAM 19). The level is a field because the
+ * block can sit at any depth, and a hard-coded one would skip or repeat levels.
+ *
+ * `variant: panel` is the tinted service-panel card — a tone, a checklist and a button.
+ * A panel's whole-card link is dropped (it holds its own button), so it renders as
+ * `<Subgrid>` markup rather than a `<Cards>` that would try to forward clicks.
+ *
+ * The body may carry `[text](url)` inline links; see `linkRuns()`.
  */
 import Cards from '@getvitops/astro/components/Cards.astro';
-import { resolveBlockValue, rows, safeHref, text } from './value.ts';
+import Subgrid from '@getvitops/astro/components/Subgrid.astro';
+import RichText from './RichText.astro';
+import { joinStyle, resolveTone } from './tone.ts';
+import { headingTag, lines, resolveBlockValue, rows, safeHref, text } from './value.ts';
 
 interface Value {
   cards?: unknown;
   columns?: string | number;
+  variant?: string;
+  level?: string | number;
+  tone?: string;
+  color?: string;
 }
 
 const value = resolveBlockValue<Value>(Astro.props);
@@ -25,20 +40,50 @@ const cards = rows<Record<string, unknown>>(value.cards)
     imageAlt: text(row.imageAlt),
     href: safeHref(row.href),
     linkLabel: text(row.linkLabel) || 'Read more',
+    checklist: lines(row.checklist),
+    ctaLabel: text(row.ctaLabel),
+    ctaHref: safeHref(row.ctaHref),
   }))
   .filter((card) => card.title || card.body || card.image);
 const columns = Math.min(4, Math.max(1, Math.round(Number(value.columns) || 3)));
+const panel = value.variant === 'panel';
+const Heading = headingTag(value.level, 3);
+const tone = resolveTone(value.tone, value.color);
+const Grid = panel ? Subgrid : Cards;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
   cards.length > 0 && (
-    <Cards style={`--subgrid-cols: ${columns}`}>
+    <Grid {...rootAttrs(value, [], `--subgrid-cols: ${columns}`)}>
       {cards.map((card) => (
-        <li class="card subgrid-card">
+        <li
+          class:list={['card', 'subgrid-card', panel && tone.className]}
+          style={panel ? joinStyle(tone.style) : undefined}
+        >
           {card.image && <img src={card.image} alt={card.imageAlt} loading="lazy" />}
-          {card.title && <p class="font-heading">{card.title}</p>}
-          {card.body && <p>{card.body}</p>}
-          {card.href && (
+          {card.title && <Heading class="font-heading">{card.title}</Heading>}
+          {card.body && (
+            <p>
+              <RichText text={card.body} />
+            </p>
+          )}
+          {panel && card.checklist.length > 0 && (
+            <ul class="rhythm" role="list">
+              {card.checklist.map((item) => (
+                <li>{item}</li>
+              ))}
+            </ul>
+          )}
+          {panel && card.ctaLabel && card.ctaHref && (
+            <p class="subgrid-card__footer">
+              <a class="cta" href={card.ctaHref}>
+                {card.ctaLabel}
+                <span class="sr-only">: {card.title}</span>
+              </a>
+            </p>
+          )}
+          {!panel && card.href && (
             <a class="link stretched-link" href={card.href}>
               {card.linkLabel}
               {/* "Read more" alone is meaningless in a list of links; name the card for AT. */}
@@ -47,6 +92,6 @@ const columns = Math.min(4, Math.max(1, Math.round(Number(value.columns) || 3)))
           )}
         </li>
       ))}
-    </Cards>
+    </Grid>
   )
 }

package/src/astro/blocks/Carousel.astro

@@ -39,6 +39,7 @@ const slides = fromRepeater.length > 0 ? fromRepeater : fromLegacy;
 // Two blocks with the same label would derive the same id; `_key` is unique per block.
 const id = value._key ? `carousel-${value._key.replace(/[^a-z0-9_-]/gi, '')}` : undefined;
 const autoplay = Number(value.autoplay) || 0;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {
@@ -50,6 +51,7 @@ const autoplay = Number(value.autoplay) || 0;
       aspect={value.aspect || '16 / 9'}
       slides={slides}
       id={id}
+      {...rootAttrs(value)}
     />
   )
 }

package/src/astro/blocks/CopyButton.astro

@@ -9,14 +9,15 @@ interface Value {
 
 const value = resolveBlockValue<Value>(Astro.props);
 const { text, label = 'Copy', display = 'code-block' } = value;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {text && display === 'code-block' && (
-  <div class="copy">
+  <div {...rootAttrs(value, ['copy'])}>
     <pre><code>{text}</code></pre>
     <wc-copy value={text} label={label}>{label}</wc-copy>
   </div>
 )}
 {text && display === 'inline' && (
-  <wc-copy value={text} label={label}><code>{text}</code></wc-copy>
+  <wc-copy {...rootAttrs(value)} value={text} label={label}><code>{text}</code></wc-copy>
 )}

package/src/astro/blocks/Details.astro

@@ -9,10 +9,11 @@ interface Value {
 
 const value = resolveBlockValue<Value>(Astro.props);
 const { summary, body, open = false } = value;
+import { rootAttrs } from './attrs.ts';
 ---
 
 {summary && (
-  <details open={open}>
+  <details open={open} {...rootAttrs(value)}>
     <summary>{summary}</summary>
     <p>{body}</p>
   </details>

package/src/astro/blocks/Embed.astro

@@ -0,0 +1,68 @@
+---
+/**
+ * A video or map that loads only after the visitor allows it.
+ *
+ * The consent gate's rule (AGENTS.md, "The consent gate"): never give a gated element a
+ * live address. The iframe is emitted with NO `src`; the address rides on
+ * `data-consent-src`, which the consent runtime (`@getvitops/core/consent`) assigns once the
+ * category is granted — and, because the element reaches its loading strategy, raises the
+ * banner for that category rather than waiting for something else to ask. Until then the
+ * page issues no request to the provider. With no JS the gate never runs, so the
+ * placeholder's plain link to the same content is what the visitor gets.
+ *
+ * A `title` is required (WCAG 4.1.2 names the frame); without one, or with an address the
+ * provider rules in `embed.ts` refuse, the block renders nothing rather than an unnamed or
+ * unsafe frame. Only categories the consent store defines are accepted.
+ */
+import { resolveEmbed } from './embed.ts';
+import { resolveBlockValue, text } from './value.ts';
+
+interface Value {
+  provider?: string;
+  url?: string;
+  title?: string;
+  category?: string;
+  ratio?: string;
+}
+
+const CATEGORIES = new Set(['marketing', 'preferences', 'analytics']);
+
+const value = resolveBlockValue<Value>(Astro.props);
+const title = text(value.title);
+const embed = resolveEmbed(value.provider, value.url);
+const category = CATEGORIES.has(text(value.category)) ? text(value.category) : 'marketing';
+// A ratio lands in a style attribute: digits, slash and spaces only.
+const ratio = /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(text(value.ratio)) ? text(value.ratio) : null;
+import { rootAttrs } from './attrs.ts';
+---
+
+{
+  title && embed && (
+    <div {...rootAttrs(value, ['embed'], ratio ? `--embed-ratio: ${ratio}` : undefined)}>
+      <iframe
+        class="embed__frame"
+        title={title}
+        data-consent={category}
+        data-consent-src={embed.src}
+        loading="lazy"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allow="fullscreen; picture-in-picture"
+      />
+      <div class="embed__placeholder">
+        <p class="font-heading">{title}</p>
+        <p>
+          This content is provided by {embed.provider}. It loads once you allow {category} cookies.
+        </p>
+        <p class="cluster">
+          <button type="button" class="btn" data-consent-open>
+            Cookie settings
+          </button>
+          <a class="link" href={embed.openUrl} rel="noopener noreferrer">
+            Open on {embed.provider}
+            <span class="sr-only">: {title}</span>
+          </a>
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/astro/blocks/Entries.astro

@@ -0,0 +1,31 @@
+---
+/**
+ * Thin adapter over `@getvitops/astro`'s `<Entries />`, which emits `<wc-entries>` itself —
+ * so this must not add its own wrapper. Stacked heading + `<dl>` pairs with no JS, a table
+ * with it. The editor writes each row's details as `Term | Value` lines.
+ */
+import Entries from '@getvitops/astro/components/Entries.astro';
+import { headingTag, pairs, resolveBlockValue, rows, text } from './value.ts';
+
+interface Value {
+  entries?: unknown;
+  level?: string | number;
+  breakpoint?: string;
+}
+
+const value = resolveBlockValue<Value>(Astro.props);
+const entries = rows<Record<string, unknown>>(value.entries)
+  .map((row) => ({
+    heading: text(row.heading),
+    pairs: pairs(row.pairs).filter((pair) => pair.term),
+  }))
+  .filter((entry) => entry.heading && entry.pairs.length > 0);
+const level = Number(headingTag(value.level, 3).slice(1)) as 2 | 3 | 4 | 5 | 6;
+// A breakpoint lands in an attribute the element parses as a CSS length; keep it to one.
+const breakpoint = /^\d+(\.\d+)?(rem|em|px|ch)$/.test(text(value.breakpoint))
+  ? text(value.breakpoint)
+  : undefined;
+import { rootAttrs } from './attrs.ts';
+---
+
+{entries.length > 0 && <Entries entries={entries} level={level} breakpoint={breakpoint} {...rootAttrs(value)} />}