@contentrain/astro-kit 0.30.0 → 0.32.0

package/components/post-list/meta.json

@@ -0,0 +1,308 @@
+{
+  "id": "post-list",
+  "name": "Post list",
+  "description": "A list of posts as cards: a grid, stacked rows, a featured first post over a grid, or a compact title-and-date list. The posts come from the site's own collection; the switches decide which parts of a card show.",
+  "category": "section",
+  "uses": [
+    "post-card"
+  ],
+  "shared": [
+    "Section.astro",
+    "measured.ts",
+    "types.ts"
+  ],
+  "variants": {
+    "layout": {
+      "options": [
+        "grid",
+        "list",
+        "featured",
+        "compact"
+      ],
+      "default": "grid",
+      "description": "grid: cards in columns. list: stacked horizontal cards. featured: the first post large over a grid. compact: title and date only."
+    },
+    "columns": {
+      "options": [
+        "2",
+        "3",
+        "4"
+      ],
+      "default": "3",
+      "description": "Cards per row on wide screens (grid and featured)."
+    }
+  },
+  "props": {
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Section heading above the posts."
+    },
+    "intro": {
+      "type": "text",
+      "label": "Intro",
+      "description": "A line or two under the heading."
+    },
+    "posts": {
+      "type": "array",
+      "label": "Posts",
+      "required": true,
+      "content": false,
+      "description": "The posts to show, newest first: from the posts collection (the query SDK), never copied from a page.",
+      "items": {
+        "type": "object",
+        "fields": {
+          "title": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "url",
+            "required": true
+          },
+          "excerpt": {
+            "type": "text"
+          },
+          "date": {
+            "type": "datetime"
+          },
+          "image": {
+            "type": "object",
+            "fields": {
+              "src": {
+                "type": "image",
+                "required": true
+              },
+              "alt": {
+                "type": "string",
+                "required": true
+              },
+              "width": {
+                "type": "integer"
+              },
+              "height": {
+                "type": "integer"
+              }
+            }
+          },
+          "category": {
+            "type": "object",
+            "fields": {
+              "label": {
+                "type": "string",
+                "required": true
+              },
+              "href": {
+                "type": "url",
+                "required": true
+              }
+            }
+          },
+          "author": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "showImage": {
+      "type": "boolean",
+      "default": true,
+      "content": false,
+      "description": "Show each post's cover."
+    },
+    "showExcerpt": {
+      "type": "boolean",
+      "default": true,
+      "content": false,
+      "description": "Show each post's excerpt."
+    },
+    "showAuthor": {
+      "type": "boolean",
+      "default": true,
+      "content": false,
+      "description": "Show each post's author."
+    },
+    "showCategory": {
+      "type": "boolean",
+      "default": true,
+      "content": false,
+      "description": "Show each post's category."
+    },
+    "excerptLines": {
+      "type": "integer",
+      "min": 2,
+      "max": 4,
+      "content": false,
+      "description": "Clamp each excerpt to this many lines."
+    },
+    "locale": {
+      "type": "string",
+      "content": false,
+      "description": "BCP 47 locale the dates are written in (site.language)."
+    },
+    "surface": {
+      "type": "string",
+      "content": false,
+      "description": "plain or card: whether each post is a card of its own (post-card surface)."
+    },
+    "moreHref": {
+      "type": "url",
+      "content": false,
+      "description": "Where the full archive lives; with moreLabel a link follows the list."
+    },
+    "moreLabel": {
+      "type": "string",
+      "content": false,
+      "description": "Text of the archive link."
+    },
+    "tone": {
+      "type": "string",
+      "content": false,
+      "description": "Section background: default, muted, inverse or accent."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Anchor id of the section; the heading gets `<id>-title`."
+    },
+    "measured": {
+      "type": "object",
+      "content": false,
+      "description": "The source section's measured style (MeasuredStyle): frame width, padding, fill, image, columns per width, gap, text tone, radius, minimum height — all in pixels. Absent, the site's tokens; present, it wins over tone and columns. Values that are not a number, a colour or a known keyword are dropped.",
+      "fields": {
+        "containerPx": {
+          "type": "integer",
+          "min": 0,
+          "max": 2560,
+          "description": "The frame's content width."
+        },
+        "padY": {
+          "type": "integer",
+          "min": 0,
+          "max": 400,
+          "description": "Top and bottom padding."
+        },
+        "padX": {
+          "type": "integer",
+          "min": 0,
+          "max": 200,
+          "description": "The frame's side padding (gutter)."
+        },
+        "bg": {
+          "type": "object",
+          "description": "The section's background.",
+          "fields": {
+            "color": {
+              "type": "string",
+              "description": "Fill colour: hex, rgb(a) or hsl(a)."
+            },
+            "image": {
+              "type": "string",
+              "description": "Background image address (http(s) or root-relative), drawn behind the content."
+            },
+            "overlay": {
+              "type": "string",
+              "description": "Colour or linear/radial gradient laid over the image or the fill."
+            },
+            "size": {
+              "type": "string",
+              "description": "cover, contain or auto; anything else draws as cover."
+            },
+            "position": {
+              "type": "string",
+              "description": "One or two of center/top/bottom/left/right or percentages."
+            }
+          }
+        },
+        "columns": {
+          "type": "object",
+          "description": "Item columns at 390 (base), 768 (md) and 1280 (lg) px; a missing width follows the narrower one.",
+          "fields": {
+            "390": {
+              "type": "integer",
+              "min": 1,
+              "max": 6,
+              "description": "Phone."
+            },
+            "768": {
+              "type": "integer",
+              "min": 1,
+              "max": 6,
+              "description": "Tablet."
+            },
+            "1280": {
+              "type": "integer",
+              "min": 1,
+              "max": 6,
+              "description": "Desktop."
+            }
+          }
+        },
+        "gap": {
+          "type": "integer",
+          "min": 0,
+          "max": 200,
+          "description": "Gap between items."
+        },
+        "tone": {
+          "type": "select",
+          "options": [
+            "light",
+            "dark"
+          ],
+          "description": "What the text is set for: dark = light text on a dark band. Without it, a fill's own lightness decides."
+        },
+        "align": {
+          "type": "select",
+          "options": [
+            "start",
+            "center",
+            "end"
+          ],
+          "description": "Where the heading and lead sit; read by a component whose own align is not set."
+        },
+        "radius": {
+          "type": "integer",
+          "min": 0,
+          "max": 200,
+          "description": "Card and item corner radius."
+        },
+        "minHeight": {
+          "type": "integer",
+          "min": 0,
+          "max": 2000,
+          "description": "The section's minimum height."
+        }
+      }
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/query",
+      "core/latest-posts"
+    ],
+    "elementor": [
+      "elementor/posts",
+      "elementor/archive-posts"
+    ],
+    "divi": [
+      "divi/et_pb_blog"
+    ],
+    "classic": [
+      "classic/archive-item"
+    ]
+  },
+  "a11y": "A <ul> of cards, each an <article> with one link (the title, stretched over the card) and a <time datetime>. Cards sit one heading level under the section heading, or at h2 when there is none. Images are decorative next to their title; the featured card keeps reading order.",
+  "pattern": {
+    "summary": "a repeated post card: image + title + excerpt + date, as a grid, rows or a featured first post",
+    "signals": [
+      "2-4 columns",
+      "date text",
+      "one link per card",
+      "repeated card structure"
+    ]
+  }
+}

package/components/pricing/Pricing.astro

@@ -2,10 +2,14 @@
 // Price plans side by side: a name, a price and what it includes, with a
 // button each. The featured plan is raised and carries a badge, so it stands
 // out by more than its colour. Each plan's features are a markdown list,
-// rendered at build time.
+// rendered at build time. Variants: `layout="table"` is a comparison table
+// (plan columns, feature rows); `billingToggle="radio"` swaps monthly and yearly
+// prices with two radio inputs and CSS `:has()` — no script.
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
 import Section, { type Tone } from '../_shared/Section.astro'
+import { measuredGrid } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
 import { renderMarkdown } from '../../../lib/markdown'
 
 const pricing = tv({
@@ -14,6 +18,12 @@ const pricing = tv({
     heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
     intro: 'text-lg opacity-80',
     list: 'grid items-stretch gap-6 sm:grid-cols-2',
+    toggle: 'mx-auto mb-8 flex w-fit rounded-full border border-line p-1',
+    toggleOption: 'rounded-full px-4 py-1.5 text-sm font-medium has-[:checked]:bg-accent has-[:checked]:text-accent-ink has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-accent',
+    tableWrap: 'overflow-x-auto',
+    table: 'w-full min-w-[32rem] border-collapse text-start',
+    cell: 'border-b border-line px-4 py-3 text-center align-top',
+    rowHead: 'border-b border-line px-4 py-3 text-start font-normal',
     plan: 'relative flex flex-col gap-5 rounded-card border border-line bg-surface p-6 text-ink md:p-8',
     badge: 'absolute -top-3 start-6 rounded-full bg-accent px-3 py-1 text-xs font-semibold text-accent-ink',
     name: 'text-lg [font-weight:var(--font-weight-heading,600)]',
@@ -30,9 +40,16 @@ const pricing = tv({
       '3': { list: 'lg:grid-cols-3' },
       '4': { list: 'lg:grid-cols-4' },
     },
+    // Which mark leads each feature in the cards: a check, a dot or none (the markdown list's own bullets).
+    featureStyle: {
+      check: { features: '[&_ul]:list-none [&_ul]:ps-0 [&_li]:flex [&_li]:gap-2 [&_li]:before:shrink-0 [&_li]:before:font-semibold [&_li]:before:text-accent-text [&_li]:before:content-["✓"]' },
+      dot: { features: '[&_ul]:list-none [&_ul]:ps-0 [&_li]:flex [&_li]:gap-2 [&_li]:before:mt-2 [&_li]:before:size-1.5 [&_li]:before:shrink-0 [&_li]:before:rounded-full [&_li]:before:bg-accent [&_li]:before:content-[""]' },
+      plain: {},
+    },
+    compact: { true: { list: 'gap-4', plan: 'gap-3 p-4 md:p-5', amount: 'text-3xl' }, false: {} },
     tone: { default: {}, muted: { plan: 'border-transparent' }, inverse: { plan: 'border-transparent' }, accent: { intro: 'opacity-100', plan: 'border-transparent', badge: 'bg-ink text-surface' } },
   },
-  defaultVariants: { columns: '3', tone: 'default' },
+  defaultVariants: { columns: '3', featureStyle: 'plain', compact: false, tone: 'default' },
 })
 
 interface Plan {
@@ -45,6 +62,11 @@ interface Plan {
   ctaLabel?: string | undefined
   ctaHref?: string | undefined
   featured?: boolean | undefined
+  /** A free-text badge ("Best value"); a featured plan without one reads `featuredLabel`. */
+  badge?: string | undefined
+  /** The other billing period's price and period (`billingToggle="radio"`). */
+  priceAlt?: string | undefined
+  periodAlt?: string | undefined
 }
 
 interface Props {
@@ -54,43 +76,125 @@ interface Props {
   /** Badge on the featured plan. */
   featuredLabel?: string | undefined
   columns?: '2' | '3' | '4' | undefined
+  /** `cards` side by side, or one comparison `table` (plans as columns, features as rows). */
+  layout?: 'cards' | 'table' | undefined
+  featureStyle?: 'check' | 'dot' | 'plain' | undefined
+  compact?: boolean | undefined
+  /** `radio`: two labelled radios swap each plan's price for its `priceAlt` — no script. */
+  billingToggle?: 'none' | 'radio' | undefined
+  /** Texts of the toggle: its two options and the legend read to screen readers. */
+  billingMainLabel?: string | undefined
+  billingAltLabel?: string | undefined
+  billingLegend?: string | undefined
+  /** Table cell texts for screen readers. */
+  includedLabel?: string | undefined
+  notIncludedLabel?: string | undefined
   tone?: Tone | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
+  measured?: MeasuredStyle | undefined
   id?: string | undefined
 }
 
-const { heading, intro, plans, featuredLabel = 'Most popular', columns, tone, id } = Astro.props
-const s = pricing({ columns, tone })
+const { heading, intro, plans, featuredLabel = 'Most popular', columns, layout = 'cards', featureStyle, compact, billingToggle = 'none', billingMainLabel = 'Monthly', billingAltLabel = 'Yearly', billingLegend = 'Billing period', includedLabel = 'Included', notIncludedLabel = 'Not included', tone, measured, id } = Astro.props
+const s = pricing({ columns, featureStyle, compact: compact ?? false, tone })
+// The radio group's name must be unique on the page: the section's id, or a hash of its plans when it has none.
+const group = id ?? `pricing-${[...JSON.stringify(plans)].reduce((h, c) => (h * 31 + c.charCodeAt(0)) >>> 0, 7).toString(36)}`
+const toggled = billingToggle === 'radio' && plans.some(plan => plan.priceAlt)
+// The cards' list items, as plain strings, for the table's feature rows (the markdown list's `- ` / `* ` lines).
+const itemsOf = (md?: string) => (md ?? '').split('\n').flatMap((line) => { const m = /^\s*[-*]\s+(.*\S)/.exec(line); return m ? [m[1]!.replace(/[*_`]/g, '')] : [] })
+const rows = layout === 'table' ? [...new Set(plans.flatMap(plan => itemsOf(plan.features)))] : []
+const included = plans.map(plan => new Set(itemsOf(plan.features)))
 const headingId = heading && id ? `${id}-title` : undefined
 // One level under the section heading, or the section's heading when there is none.
 const PlanHeading = heading ? 'h3' : 'h2'
 const features = await Promise.all(plans.map(plan => renderMarkdown(plan.features)))
 ---
 {plans.length > 0 && (
-  <Section tone={tone} id={id} aria-labelledby={headingId}>
+  <Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
     {(heading || intro) && (
       <header class={s.header()}>
         {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
         {intro && <p class={s.intro()} data-kit-text>{intro}</p>}
       </header>
     )}
-    <ul class={s.list()}>
-      {plans.map((plan, i) => (
-        <li class={s.plan({ class: plan.featured ? 'ring-2 ring-accent shadow-lg md:-my-2 md:py-10' : undefined })}>
-          {plan.featured && <p class={s.badge()}>{featuredLabel}</p>}
-          <PlanHeading class={s.name()}>{plan.name}</PlanHeading>
-          <p class={s.price()}>
-            <span class={s.amount()}>{plan.price}</span>
-            {plan.period && <span class={s.period()}>{plan.period}</span>}
-          </p>
-          {plan.description && <p class={s.description()} data-kit-text>{plan.description}</p>}
-          {features[i] && <div class={s.features()} set:html={features[i]} />}
-          {plan.ctaLabel && plan.ctaHref && (
-            <div class={s.action()}>
-              <Button action={{ label: plan.ctaLabel, href: plan.ctaHref, style: plan.featured ? 'primary' : 'ghost' }} class="w-full" />
-            </div>
-          )}
-        </li>
-      ))}
-    </ul>
+    {layout === 'table' ? (
+      <div class={s.tableWrap()} tabindex="0" role="region" aria-labelledby={headingId} aria-label={headingId ? undefined : plans.map(plan => plan.name).join(', ')}>
+        <table class={s.table()}>
+          <caption class="sr-only">{heading ?? plans.map(plan => plan.name).join(', ')}</caption>
+          <thead>
+            <tr>
+              <td class={s.cell()} />
+              {plans.map(plan => (
+                <th scope="col" class={s.cell({ class: plan.featured ? 'bg-surface-muted' : undefined })}>
+                  <span class="block text-lg [font-weight:var(--font-weight-heading,600)]">{plan.name}</span>
+                  <span class="block text-2xl [font-weight:var(--font-weight-heading,700)]">{plan.price}</span>
+                  {plan.period && <span class="block text-sm opacity-75">{plan.period}</span>}
+                  {(plan.badge ?? (plan.featured ? featuredLabel : undefined)) && <span class="mt-1 inline-block rounded-full bg-accent px-3 py-0.5 text-xs font-semibold text-accent-ink">{plan.badge ?? featuredLabel}</span>}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map(row => (
+              <tr>
+                <th scope="row" class={s.rowHead()}>{row}</th>
+                {plans.map((plan, i) => (
+                  <td class={s.cell({ class: plan.featured ? 'bg-surface-muted' : undefined })}>
+                    {included[i]!.has(row)
+                      ? <><span aria-hidden="true">✓</span><span class="sr-only">{includedLabel}</span></>
+                      : <><span aria-hidden="true" class="opacity-50">–</span><span class="sr-only">{notIncludedLabel}</span></>}
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {plans.some(plan => plan.ctaLabel && plan.ctaHref) && (
+              <tr>
+                <td class={s.cell()} />
+                {plans.map(plan => (
+                  <td class={s.cell({ class: plan.featured ? 'bg-surface-muted' : undefined })}>
+                    {plan.ctaLabel && plan.ctaHref && <Button action={{ label: plan.ctaLabel, href: plan.ctaHref, style: plan.featured ? 'primary' : 'ghost' }} />}
+                  </td>
+                ))}
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    ) : (
+      <div class={toggled ? '[&:has(input[value=alt]:checked)_[data-price=main]]:hidden [&:not(:has(input[value=alt]:checked))_[data-price=alt]]:hidden' : undefined}>
+        {toggled && (
+          <fieldset class={s.toggle()}>
+            <legend class="sr-only">{billingLegend}</legend>
+            <label class={s.toggleOption()}><input type="radio" name={`${group}-billing`} value="main" checked class="sr-only" />{billingMainLabel}</label>
+            <label class={s.toggleOption()}><input type="radio" name={`${group}-billing`} value="alt" class="sr-only" />{billingAltLabel}</label>
+          </fieldset>
+        )}
+        <ul class={s.list({ class: measuredGrid(measured) })}>
+          {plans.map((plan, i) => (
+            <li class={s.plan({ class: plan.featured ? 'ring-2 ring-accent shadow-lg md:-my-2 md:py-10' : undefined })}>
+              {(plan.badge ?? (plan.featured ? featuredLabel : undefined)) && <p class={s.badge()}>{plan.badge ?? featuredLabel}</p>}
+              <PlanHeading class={s.name()}>{plan.name}</PlanHeading>
+              <p class={s.price()} data-price="main">
+                <span class={s.amount()}>{plan.price}</span>
+                {plan.period && <span class={s.period()}>{plan.period}</span>}
+              </p>
+              {toggled && plan.priceAlt && (
+                <p class={s.price()} data-price="alt">
+                  <span class={s.amount()}>{plan.priceAlt}</span>
+                  {plan.periodAlt && <span class={s.period()}>{plan.periodAlt}</span>}
+                </p>
+              )}
+              {plan.description && <p class={s.description()} data-kit-text>{plan.description}</p>}
+              {features[i] && <div class={s.features()} set:html={features[i]} />}
+              {plan.ctaLabel && plan.ctaHref && (
+                <div class={s.action()}>
+                  <Button action={{ label: plan.ctaLabel, href: plan.ctaHref, style: plan.featured ? 'primary' : 'ghost' }} class="w-full" />
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    )}
   </Section>
 )}