@cogenta/theme-association 0.3.2 → 0.5.3

package/src/render/blocks/logo-strip.ts

@@ -1,31 +1,33 @@
-import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
+import type { LogoStripBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `blocks@2.0` (RFC 0001). "Our partners" — the lighter-weight social-proof
- * row next to `logos`: no per-logo name or link, so no accessible-name field
- * to require — each image's own alt text (set once, in the media library)
- * names it.
+ * The lighter row of marks: the caption at the caption size above a rule,
+ * and the marks spread along one line under it, small and evenly spaced, in
+ * one ink. No links, by contract B; each mark is named by its own alt text
+ * from the media library.
  */
-function renderItem(item: LogoStripItem, ctx: RenderContext): HtmlElement {
-  return h(
-    'li',
-    { class: 'cg-logo-band__item' },
-    image(ctx, item.media, { className: 'cg-logo-band__image', variant: { fit: 'contain' } }),
-  )
-}
-
 export function renderLogoStrip(block: LogoStripBlock, ctx: RenderContext): HtmlElement {
-  return h(
-    'figure',
-    { class: 'cg-block cg-logo-band', 'data-block': 'logoStrip' },
+  return section(
+    'div',
+    'logoStrip',
+    'ca-strip',
+    { 'data-captioned': String(block.caption !== undefined) },
+    'div',
+    block.caption === undefined
+      ? null
+      : h('p', { class: 'ca-strip__caption', 'data-field': 'caption' }, block.caption),
     h(
       'ul',
-      { class: 'cg-logo-band__items' },
-      block.logos.map((item) => renderItem(item, ctx)),
+      { class: 'ca-strip__items' },
+      block.logos.map((logo) =>
+        h(
+          'li',
+          { class: 'ca-strip__item' },
+          image(ctx, logo.media, { className: 'ca-mark', sizes: '12rem' }),
+        ),
+      ),
     ),
-    block.caption === undefined
-      ? null
-      : h('figcaption', { class: 'cg-logo-band__caption', 'data-field': 'caption' }, block.caption),
   )
 }

package/src/render/blocks/logos.ts

@@ -1,52 +1,57 @@
-import type { LogoItem, LogosBlock } from '@cogenta/blocks'
-import {
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  image,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import type { LogosBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * Contract B says the organisation's name **is** the accessible name of the
- * link. So the logo image carries it as alt text when the media entity has
- * none, and no visually hidden duplicate is added.
+ * The organisations that work alongside this one: the title on the first
+ * four columns, and their marks on the last eight in a grid of cells divided
+ * by hairlines, each mark set small and in one ink so no partner shouts
+ * louder than another. A mark drawn in ink is inverted in the dark scheme.
+ *
+ * The organisation's name is the mark's accessible name when the media
+ * library has no alt text for it, and the link's own name when it links out.
  */
-function renderItem(item: LogoItem, ctx: RenderContext): HtmlElement {
-  const logo = image(ctx, item.media, {
-    className: 'cg-logo__image',
-    altFrom: item.name,
-    variant: { fit: 'contain' },
-  })
-  return h(
-    'li',
-    { class: 'cg-logo' },
-    item.url === undefined
-      ? logo
-      : h(
-          'a',
-          { class: 'cg-logo__link', href: ctx.link(item.url), rel: 'noopener noreferrer' },
-          logo,
-        ),
-  )
+/**
+ * Columns on a wide screen that leave no empty cell in the grid: three when
+ * the count divides by three, two when it divides by two, otherwise three.
+ */
+export function logoColumnsFor(count: number): number {
+  if (count % 3 === 0) return 3
+  return count % 2 === 0 ? 2 : 3
 }
 
 export function renderLogos(block: LogosBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'section',
-    { class: 'cg-block cg-logos', 'data-block': 'logos' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('logos') ?? 'h2',
-          { class: 'cg-logos__title', 'data-field': 'title' },
-          block.title,
-        ),
+    'logos',
+    'ca-partners',
+    {
+      'data-titled': String(block.title !== undefined),
+      'data-columns': String(logoColumnsFor(block.items.length)),
+    },
+    'div',
+    sectionHead('logos', block.title),
     h(
       'ul',
-      { class: 'cg-logos__items' },
-      block.items.map((item) => renderItem(item, ctx)),
+      { class: 'ca-partners__items' },
+      block.items.map((item) => {
+        const mark = image(ctx, item.media, {
+          className: 'ca-mark',
+          altFrom: item.name,
+          sizes: '12rem',
+        })
+        return h(
+          'li',
+          { class: 'ca-partners__item' },
+          item.url === undefined
+            ? h('span', { class: 'ca-partners__cell' }, mark)
+            : h(
+                'a',
+                { class: 'ca-partners__cell', href: item.url, rel: 'noopener noreferrer' },
+                mark,
+              ),
+        )
+      }),
     ),
   )
 }

package/src/render/blocks/media-figure.ts

@@ -1,38 +1,63 @@
 import type { MediaFigureBlock } from '@cogenta/blocks'
 import { aspectRatio, type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `<figure>`/`<figcaption>` rather than a div and a paragraph: the
- * association between the picture and its caption is then in the markup.
+ * A photograph and its caption, the caption always under the picture's own
+ * left edge, in the text face, with the credit after it.
  *
- * The media sits in a big rounded card (`cg-figure__media`, `--cg-radius-lg`)
- * with a soft shadow, matching the hero's own frame treatment rather than a
- * hard-edged photo.
+ * `align` is an editorial intent, read as a layout:
+ *
+ * - `start` / `end`: seven columns on that side, the caption beside it on the
+ *   other four, set against the bottom of the picture.
+ * - `center`: eight columns, set in from the second.
+ * - `wide` (and no value): the whole container.
+ * - `full`: the whole window, edge to edge.
+ *
+ * The ratio crops from the middle, or from the media's own focal point; the
+ * corners stay square and the picture casts no shadow.
  */
 export function renderMediaFigure(block: MediaFigureBlock, ctx: RenderContext): HtmlElement {
+  const align = block.align ?? 'wide'
+  const split = align === 'start' || align === 'end'
   const ratio = aspectRatio(block.ratio)
-  const hasCaption = block.caption !== undefined || block.credit !== undefined
-  return h(
-    'figure',
-    {
-      class: 'cg-block cg-figure',
-      'data-block': 'mediaFigure',
-      'data-align': block.align ?? 'center',
-      style: ratio === undefined ? undefined : `--cg-ratio:${ratio}`,
-    },
-    image(ctx, block.media, {
-      className: 'cg-figure__media',
-      sizes: '(min-width: 45rem) 40rem, 100vw',
-    }),
-    hasCaption
-      ? h(
+
+  const caption =
+    block.caption === undefined && block.credit === undefined
+      ? null
+      : h(
           'figcaption',
-          { class: 'cg-figure__caption' },
-          block.caption,
+          { class: 'ca-figure__caption' },
+          block.caption === undefined
+            ? null
+            : h('span', { class: 'ca-figure__text', 'data-field': 'caption' }, block.caption),
           block.credit === undefined
             ? null
-            : h('span', { class: 'cg-figure__credit', 'data-field': 'credit' }, block.credit),
+            : h('span', { class: 'ca-figure__credit', 'data-field': 'credit' }, block.credit),
         )
-      : null,
+
+  return section(
+    'div',
+    'mediaFigure',
+    'ca-figure',
+    { 'data-align': align, 'data-layout': split ? 'split' : 'single' },
+    'figure',
+    h(
+      'div',
+      {
+        class: 'ca-figure__frame',
+        style: ratio === undefined ? undefined : `aspect-ratio:${ratio}`,
+      },
+      image(ctx, block.media, {
+        className: 'ca-figure__image',
+        sizes:
+          align === 'full'
+            ? '100vw'
+            : split
+              ? '(min-width: 64rem) 55vw, 100vw'
+              : '(min-width: 82rem) 78rem, 100vw',
+      }),
+    ),
+    caption,
   )
 }

package/src/render/blocks/pricing-table.ts

@@ -1,73 +1,64 @@
 import type { PricingTableBlock, PricingTier } from '@cogenta/blocks'
 import {
   actionLink,
-  blockHeadingTag,
-  type HeadingTag,
   type HtmlElement,
   h,
   heading,
   nestedHeadingTag,
   type RenderContext,
 } from '@cogenta/theme-kit'
+import { section, sectionHead } from '../layout.js'
 
 /**
- * `blocks@2.0` (RFC 0001). Rarely a nonprofit's own price list, but not never
- * (a membership fee, a course fee) — kept in the shared, rounded-card
- * register the rest of this theme uses. `highlighted` becomes
- * `data-highlighted` for the skin to style, and `aria-current` so it is
- * announced, not only shown.
+ * Levels side by side: a membership, a regular gift, a sponsored place.
+ * Ruled columns rather than cards: the name of the level, the amount large in
+ * the display face with tabular figures and what it covers ("a month") beside
+ * it, then what it includes one line at a time between hairlines, and the
+ * action at the foot.
+ *
+ * `highlighted` is an editorial emphasis, drawn as the column's top rule in
+ * the organisation's green, thicker, and its name in the same green. No
+ * ribbon, no raised card, no fill.
  */
-function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+function tier(item: PricingTier, ctx: RenderContext, titled: boolean): HtmlElement {
   return h(
     'li',
-    {
-      class: 'cg-pricing__tier',
-      'data-highlighted': tier.highlighted === true ? 'true' : undefined,
-      'aria-current': tier.highlighted === true ? 'true' : undefined,
-    },
-    heading(tag, { class: 'cg-pricing__name' }, tier.name),
+    { class: 'ca-levels__tier', 'data-highlighted': item.highlighted === true ? 'true' : 'false' },
+    heading(nestedHeadingTag('pricingTable', titled), { class: 'ca-levels__name' }, item.name),
     h(
       'p',
-      { class: 'cg-pricing__price' },
-      h('span', { class: 'cg-pricing__amount' }, tier.price),
-      tier.interval === undefined
+      { class: 'ca-levels__price' },
+      h('span', { class: 'ca-levels__amount' }, item.price),
+      item.interval === undefined
         ? null
-        : h('span', { class: 'cg-pricing__interval' }, tier.interval),
+        : h('span', { class: 'ca-levels__interval' }, item.interval),
     ),
-    tier.features.length === 0
+    item.features.length === 0
       ? null
       : h(
           'ul',
-          { class: 'cg-pricing__features' },
-          tier.features.map((feature) => h('li', {}, feature)),
+          { class: 'ca-levels__lines' },
+          item.features.map((feature) => h('li', { class: 'ca-levels__line' }, feature)),
         ),
-    tier.action === undefined
+    item.action === undefined
       ? null
-      : h(
-          'div',
-          { class: 'cg-pricing__action' },
-          actionLink(ctx, { ...tier.action, emphasis: tier.action.emphasis ?? 'primary' }),
-        ),
+      : h('div', { class: 'ca-levels__action' }, actionLink(ctx, item.action)),
   )
 }
 
 export function renderPricingTable(block: PricingTableBlock, ctx: RenderContext): HtmlElement {
-  const hasTitle = block.title !== undefined
-  const tierTag = nestedHeadingTag('pricingTable', hasTitle)
-  return h(
+  const titled = block.title !== undefined
+  return section(
     'section',
-    { class: 'cg-block cg-pricing', 'data-block': 'pricingTable' },
-    hasTitle
-      ? heading(
-          blockHeadingTag('pricingTable') ?? 'h2',
-          { class: 'cg-pricing__title', 'data-field': 'title' },
-          block.title ?? '',
-        )
-      : null,
+    'pricingTable',
+    'ca-levels',
+    { 'data-count': String(Math.min(block.tiers.length, 4)) },
+    'div',
+    sectionHead('pricingTable', block.title),
     h(
       'ul',
-      { class: 'cg-pricing__tiers' },
-      block.tiers.map((tier) => renderTier(tier, ctx, tierTag)),
+      { class: 'ca-levels__tiers' },
+      block.tiers.map((item) => tier(item, ctx, titled)),
     ),
   )
 }

package/src/render/blocks/prose.ts

@@ -1,15 +1,25 @@
 import type { ProseBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, type RenderContext, renderRichText } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `prose` declares `headingLevel: 'none'`: it contributes no heading of its
- * own. Whatever headings appear come from the rich text document, whose
- * vocabulary starts at `h2`.
+ * Running text: the organisation's history, how to give, how volunteering
+ * works, a privacy notice.
+ *
+ * `prose` declares `headingLevel: 'none'`, so it adds no heading of its own;
+ * the rich text's own headings start at `h2`. The column starts on the first
+ * of twelve columns, on the same edge as the page title above it, and holds a
+ * reading measure of about sixty-six characters. The first paragraph of the
+ * first text under a page title is set a step larger, the way a report opens
+ * with its summary.
  */
 export function renderProse(block: ProseBlock, ctx: RenderContext): HtmlElement {
-  return h(
+  return section(
     'div',
-    { class: 'cg-block cg-prose', 'data-block': 'prose' },
-    renderRichText(ctx, block.body),
+    'prose',
+    'ca-prose',
+    {},
+    'div',
+    h('div', { class: 'ca-prose__body' }, renderRichText(ctx, block.body)),
   )
 }

package/src/render/blocks/quote.ts

@@ -1,39 +1,46 @@
 import type { QuoteBlock } from '@cogenta/blocks'
 import { type HtmlElement, h, image, type RenderContext } from '@cogenta/theme-kit'
+import { section } from '../layout.js'
 
 /**
- * `<figure><blockquote>…</blockquote><figcaption>` is the attribution
- * pattern the HTML spec prescribes: putting the author inside the
- * `<blockquote>` would claim the author's name is part of what was said.
- *
- * The avatar is decorative here — the name is right beside it in text — so
- * its media entity's alt text is expected to be empty. `image` still writes
- * the attribute either way.
+ * A few words someone said, set large: the text in the display face across
+ * nine columns, with a real opening quotation mark hung in the margin by the
+ * stylesheet, and the speaker's name and role small beneath it. A portrait,
+ * when there is one, is a small square crop beside the name.
  */
 export function renderQuote(block: QuoteBlock, ctx: RenderContext): HtmlElement {
-  const hasAttribution =
-    block.author !== undefined || block.role !== undefined || block.avatar !== undefined
-  return h(
-    'figure',
-    { class: 'cg-block cg-quote', 'data-block': 'quote' },
-    h('blockquote', { class: 'cg-quote__text' }, h('p', { 'data-field': 'text' }, block.text)),
-    hasAttribution
-      ? h(
+  const who =
+    block.author === undefined && block.role === undefined
+      ? null
+      : h(
           'figcaption',
-          { class: 'cg-quote__attribution' },
+          { class: 'ca-quote__attribution' },
           block.avatar === undefined
             ? null
-            : image(ctx, block.avatar, {
-                className: 'cg-quote__avatar',
-                variant: { width: 96, height: 96, fit: 'cover' },
-              }),
-          block.author === undefined
-            ? null
-            : h('span', { class: 'cg-quote__author', 'data-field': 'author' }, block.author),
-          block.role === undefined
-            ? null
-            : h('span', { class: 'cg-quote__role', 'data-field': 'role' }, block.role),
+            : image(ctx, block.avatar, { className: 'ca-quote__avatar', sizes: '3.5rem' }),
+          h(
+            'span',
+            { class: 'ca-quote__who' },
+            block.author === undefined
+              ? null
+              : h('span', { class: 'ca-quote__author', 'data-field': 'author' }, block.author),
+            block.role === undefined
+              ? null
+              : h('span', { class: 'ca-quote__role', 'data-field': 'role' }, block.role),
+          ),
         )
-      : null,
+
+  return section(
+    'div',
+    'quote',
+    'ca-quote',
+    {},
+    'figure',
+    h(
+      'blockquote',
+      { class: 'ca-quote__quote' },
+      h('p', { class: 'ca-quote__text', 'data-field': 'text' }, block.text),
+    ),
+    who,
   )
 }

package/src/render/blocks/stat-counter.ts

@@ -1,36 +1,42 @@
-import type { StatCounterBlock, StatCounterItem } from '@cogenta/blocks'
-import {
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import type { StatCounterBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+import { isBreakdown } from '../figures.js'
+import { section, sectionHead } from '../layout.js'
+import { renderBreakdown } from './breakdown.js'
 
 /**
- * `blocks@2.0` (RFC 0001). A `<dl>`, exactly like `stats` — narrower on
- * purpose (no `unit`), for one big figure and its label.
+ * The narrower sibling of `stats` (a value and a short label, no unit): a
+ * single row of figures across the container, divided by vertical hairlines,
+ * each number in the display face over its label. Percentages of one whole
+ * are drawn as a breakdown, the same as `stats`. Nothing counts up; a number
+ * that animates into place is a number a visitor has to wait for.
  */
-function renderItem(item: StatCounterItem): HtmlElement {
-  return h(
-    'div',
-    { class: 'cg-stat-counter' },
-    h('dt', { class: 'cg-stat-counter__label' }, item.label),
-    h('dd', { class: 'cg-stat-counter__value' }, item.value),
-  )
-}
-
-export function renderStatCounter(block: StatCounterBlock, _ctx: RenderContext): HtmlElement {
-  return h(
+export function renderStatCounter(block: StatCounterBlock, ctx: RenderContext): HtmlElement {
+  const breakdown = isBreakdown(block.stats)
+  return section(
     'section',
-    { class: 'cg-block cg-stat-counters', 'data-block': 'statCounter' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('statCounter') ?? 'h2',
-          { class: 'cg-stat-counters__title', 'data-field': 'title' },
-          block.title,
+    'statCounter',
+    'ca-counter',
+    {
+      'data-shape': breakdown ? 'breakdown' : 'row',
+      'data-count': String(Math.min(block.stats.length, 4)),
+      'data-titled': String(block.title !== undefined),
+    },
+    'div',
+    sectionHead('statCounter', block.title),
+    breakdown
+      ? renderBreakdown(block.stats, ctx)
+      : h(
+          'dl',
+          { class: 'ca-counter__items' },
+          block.stats.map((stat) =>
+            h(
+              'div',
+              { class: 'ca-counter__item' },
+              h('dt', { class: 'ca-counter__label' }, stat.label),
+              h('dd', { class: 'ca-counter__value' }, stat.value),
+            ),
+          ),
         ),
-    h('dl', { class: 'cg-stat-counters__items' }, block.stats.map(renderItem)),
   )
 }

package/src/render/blocks/stats.ts

@@ -1,45 +1,53 @@
-import type { StatItem, StatsBlock } from '@cogenta/blocks'
-import {
-  blockHeadingTag,
-  type HtmlElement,
-  h,
-  heading,
-  type RenderContext,
-} from '@cogenta/theme-kit'
+import type { StatsBlock } from '@cogenta/blocks'
+import { type HtmlElement, h, type RenderContext } from '@cogenta/theme-kit'
+import { isBreakdown } from '../figures.js'
+import { section, sectionHead } from '../layout.js'
+import { renderBreakdown } from './breakdown.js'
 
 /**
- * The impact band — "12,400 meals served", "380 volunteers" — rendered as a
- * description list so each big figure stays the description of its label
- * (WCAG 1.3.2). Reading order is label then figure, exactly as the markup
- * says; the stylesheet paints the figure first with `column-reverse` (see
- * `blocks.css`'s own comment on `.cg-impact-stat`) — the paint order changes,
- * the DOM order a screen reader follows does not.
+ * What a year of work added up to, with the sentence that makes each number
+ * mean something: the title on the first four columns, and the figures on the
+ * last eight in two columns, each under a rule. The number in the display
+ * face, narrow and large, in the organisation's green with lining tabular
+ * figures and its unit a step smaller; under it the sentence of context in
+ * the text face. No box, no tint, nothing counts up.
+ *
+ * Figures that are all percentages of one whole are drawn as a breakdown
+ * instead (`renderBreakdown`).
  */
-function renderItem(item: StatItem): HtmlElement {
-  return h(
-    'div',
-    { class: 'cg-impact-stat' },
-    h('dt', { class: 'cg-impact-stat__label' }, item.label),
-    h(
-      'dd',
-      { class: 'cg-impact-stat__value' },
-      item.value,
-      item.unit === undefined ? null : h('span', { class: 'cg-impact-stat__unit' }, item.unit),
-    ),
-  )
-}
-
-export function renderStats(block: StatsBlock, _ctx: RenderContext): HtmlElement {
-  return h(
+export function renderStats(block: StatsBlock, ctx: RenderContext): HtmlElement {
+  const breakdown = isBreakdown(block.items)
+  return section(
     'section',
-    { class: 'cg-block cg-impact', 'data-block': 'stats' },
-    block.title === undefined
-      ? null
-      : heading(
-          blockHeadingTag('stats') ?? 'h2',
-          { class: 'cg-impact__title', 'data-field': 'title' },
-          block.title,
+    'stats',
+    'ca-figures',
+    {
+      'data-shape': breakdown ? 'breakdown' : 'figures',
+      'data-count': String(Math.min(block.items.length, 4)),
+      'data-titled': String(block.title !== undefined),
+    },
+    'div',
+    sectionHead('stats', block.title),
+    breakdown
+      ? renderBreakdown(block.items, ctx)
+      : h(
+          'dl',
+          { class: 'ca-figures__items' },
+          block.items.map((item) =>
+            h(
+              'div',
+              { class: 'ca-figures__item' },
+              h('dt', { class: 'ca-figures__label' }, item.label),
+              h(
+                'dd',
+                { class: 'ca-figures__value' },
+                item.value,
+                item.unit === undefined
+                  ? null
+                  : h('span', { class: 'ca-figures__unit' }, item.unit),
+              ),
+            ),
+          ),
         ),
-    h('dl', { class: 'cg-impact__items' }, block.items.map(renderItem)),
   )
 }