@contentrain/astro-kit 0.31.0 → 0.32.0

package/components/steps/fixtures.json

@@ -1,7 +1,219 @@
 [
-  {"name": "list-numbered", "props": {"id": "how", "heading": "How it works", "intro": "Three steps from WordPress to a static site.", "items": [{"title": "Connect", "text": "Point us at your site; we read everything it publishes."}, {"title": "Review", "text": "Check the plan: every page, model and redirect."}, {"title": "Launch", "text": "Deploy the new site; every old address still works."}]}},
-  {"name": "row-plain-images", "props": {"layout": "row", "style": "plain", "heading": "Our process", "items": [{"title": "Discover", "text": "We learn the site and its readers.", "image": "/kit-fixtures/photo-1.svg"}, {"title": "Design", "text": "We draw the pages and the system.", "image": "/kit-fixtures/photo-2.svg"}, {"title": "Build", "text": "We ship it, fast and accessible.", "image": "/kit-fixtures/photo-3.svg", "imageAlt": "A laptop showing the finished site"}]}},
-  {"name": "row-numbered", "props": {"layout": "row", "items": [{"title": "Sign up", "text": "One minute, no card."}, {"title": "Import", "text": "Bring your content."}, {"title": "Edit", "text": "Change it in Studio."}, {"title": "Publish", "text": "Push and it is live."}]}},
-  {"name": "source-numbers", "props": {"heading": "Getting started", "items": [{"number": "01", "title": "Connect", "text": "Point Calm Status at the services you already monitor."}, {"number": "02", "title": "Write", "text": "Pick the words customers see for each kind of problem."}, {"number": "03", "title": "Publish", "text": "Put the page live on your own domain."}]}},
-  {"name": "row-plain-source-numbers", "props": {"layout": "row", "style": "plain", "items": [{"number": "Step 1", "title": "Call", "text": "We learn what you make and who buys it."}, {"number": "Step 2", "title": "Design and build", "text": "Four weeks of weekly previews."}, {"number": "Step 3", "title": "Launch", "text": "We switch it on together."}]}}
+  {
+    "name": "list-numbered",
+    "props": {
+      "id": "how",
+      "heading": "How it works",
+      "intro": "Three steps from WordPress to a static site.",
+      "items": [
+        {
+          "title": "Connect",
+          "text": "Point us at your site; we read everything it publishes."
+        },
+        {
+          "title": "Review",
+          "text": "Check the plan: every page, model and redirect."
+        },
+        {
+          "title": "Launch",
+          "text": "Deploy the new site; every old address still works."
+        }
+      ]
+    }
+  },
+  {
+    "name": "row-plain-images",
+    "props": {
+      "layout": "row",
+      "style": "plain",
+      "heading": "Our process",
+      "items": [
+        {
+          "title": "Discover",
+          "text": "We learn the site and its readers.",
+          "image": "/kit-fixtures/photo-1.svg"
+        },
+        {
+          "title": "Design",
+          "text": "We draw the pages and the system.",
+          "image": "/kit-fixtures/photo-2.svg"
+        },
+        {
+          "title": "Build",
+          "text": "We ship it, fast and accessible.",
+          "image": "/kit-fixtures/photo-3.svg",
+          "imageAlt": "A laptop showing the finished site"
+        }
+      ]
+    }
+  },
+  {
+    "name": "row-numbered",
+    "props": {
+      "layout": "row",
+      "items": [
+        {
+          "title": "Sign up",
+          "text": "One minute, no card."
+        },
+        {
+          "title": "Import",
+          "text": "Bring your content."
+        },
+        {
+          "title": "Edit",
+          "text": "Change it in Studio."
+        },
+        {
+          "title": "Publish",
+          "text": "Push and it is live."
+        }
+      ]
+    }
+  },
+  {
+    "name": "source-numbers",
+    "props": {
+      "heading": "Getting started",
+      "items": [
+        {
+          "number": "01",
+          "title": "Connect",
+          "text": "Point Calm Status at the services you already monitor."
+        },
+        {
+          "number": "02",
+          "title": "Write",
+          "text": "Pick the words customers see for each kind of problem."
+        },
+        {
+          "number": "03",
+          "title": "Publish",
+          "text": "Put the page live on your own domain."
+        }
+      ]
+    }
+  },
+  {
+    "name": "row-plain-source-numbers",
+    "props": {
+      "layout": "row",
+      "style": "plain",
+      "items": [
+        {
+          "number": "Step 1",
+          "title": "Call",
+          "text": "We learn what you make and who buys it."
+        },
+        {
+          "number": "Step 2",
+          "title": "Design and build",
+          "text": "Four weeks of weekly previews."
+        },
+        {
+          "number": "Step 3",
+          "title": "Launch",
+          "text": "We switch it on together."
+        }
+      ]
+    }
+  },
+  {
+    "name": "timeline-rail",
+    "props": {
+      "id": "history",
+      "heading": "Our story",
+      "kind": "timeline",
+      "marker": "dot",
+      "items": [
+        {
+          "date": "2019",
+          "title": "Founded",
+          "text": "Two people and a shared desk."
+        },
+        {
+          "date": "Mar 2021",
+          "title": "First customers",
+          "text": "The first twenty sites moved over."
+        },
+        {
+          "date": "2024",
+          "title": "Open source",
+          "text": "The toolkit went public.",
+          "current": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "timeline-alternate-dashed",
+    "props": {
+      "kind": "timeline",
+      "layout": "alternate",
+      "connector": "dashed",
+      "items": [
+        {
+          "date": "2019",
+          "title": "Founded",
+          "text": "Two people and a shared desk."
+        },
+        {
+          "date": "Mar 2021",
+          "title": "First customers",
+          "text": "The first twenty sites moved over."
+        },
+        {
+          "date": "2024",
+          "title": "Open source",
+          "text": "The toolkit went public.",
+          "current": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "timeline-no-connector",
+    "props": {
+      "kind": "timeline",
+      "layout": "rail",
+      "connector": "none",
+      "items": [
+        {
+          "date": "2019",
+          "title": "Founded",
+          "text": "Two people and a shared desk."
+        },
+        {
+          "date": "Mar 2021",
+          "title": "First customers",
+          "text": "The first twenty sites moved over."
+        },
+        {
+          "title": "No date here",
+          "text": "An item with no date reads as a step."
+        }
+      ]
+    }
+  },
+  {
+    "name": "rail-numbered",
+    "props": {
+      "layout": "rail",
+      "marker": "number",
+      "items": [
+        {
+          "title": "Connect",
+          "text": "Point us at your site; we read everything it publishes."
+        },
+        {
+          "title": "Review",
+          "text": "Check the plan: every page, model and redirect."
+        },
+        {
+          "title": "Launch",
+          "text": "Deploy the new site; every old address still works."
+        }
+      ]
+    }
+  }
 ]

package/components/steps/meta.json

@@ -15,10 +15,12 @@
     "layout": {
       "options": [
         "list",
-        "row"
+        "row",
+        "rail",
+        "alternate"
       ],
       "default": "list",
-      "description": "A vertical list, or one row across the page on wide screens."
+      "description": "list: a vertical list. row: across the page. rail: one rail on the start side. alternate: items alternate either side of a centre rail from md (one rail on phones); DOM order stays chronological."
     },
     "style": {
       "options": [
@@ -27,6 +29,31 @@
       ],
       "default": "numbered",
       "description": "A number badge before each step, or an accent rule beside it."
+    },
+    "kind": {
+      "options": [
+        "steps",
+        "timeline"
+      ],
+      "default": "steps",
+      "description": "steps: a numbered sequence. timeline: a date per item on a vertical rail (the rail layouts below; without a layout it uses rail)."
+    },
+    "marker": {
+      "options": [
+        "number",
+        "dot"
+      ],
+      "default": "number",
+      "description": "What sits on the rail: the style's number badge, or a plain dot (the timeline default). Not yet: icon and date markers, and a visual emphasis for the current item (it has aria-current and a hidden label only)."
+    },
+    "connector": {
+      "options": [
+        "none",
+        "line",
+        "dashed"
+      ],
+      "default": "line",
+      "description": "The rail between items on the rail layouts."
     }
   },
   "props": {
@@ -73,6 +100,16 @@
             "type": "string",
             "label": "Image description",
             "description": "What the image shows; empty if decorative."
+          },
+          "date": {
+            "type": "string",
+            "label": "Date",
+            "description": "A timeline's date as written (\"2019\", \"Mar 2021\"); marked up as a <time> only when it is an ISO date or a year."
+          },
+          "current": {
+            "type": "boolean",
+            "label": "Current",
+            "description": "Marks the latest item (aria-current=\"step\" and a hidden \"Current\")."
           }
         }
       },
@@ -82,6 +119,122 @@
       "type": "string",
       "content": false,
       "description": "Anchor id of the section; the heading gets `<id>-title`."
+    },
+    "currentLabel": {
+      "type": "string",
+      "default": "Current",
+      "content": false,
+      "description": "Visually hidden text on the current item, so it is not shown by colour alone."
+    },
+    "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": {},
@@ -98,7 +251,7 @@
       "divi/et_pb_blurb"
     ]
   },
-  "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading. The section is labelled by its heading when it has one.",
+  "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading. The section is labelled by its heading when it has one. A timeline is the same <ol>; a date is a <time datetime> only when machine-readable; the rail and dots are CSS and not in the accessibility tree.",
   "pattern": {
     "summary": "ordered sequence: numbered title + short text units",
     "signals": [

package/components/team/Team.astro

@@ -4,7 +4,10 @@
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
+import { measuredGrid } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
 import { imageOf, type ImageSource } from '../_shared/image'
+import { profile } from './team'
 
 const team = tv({
   slots: {
@@ -12,6 +15,9 @@ const team = 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 gap-6 sm:grid-cols-2 md:gap-8',
+    socials: 'relative z-10 mt-1 flex flex-wrap gap-3 text-sm',
+    social: 'rounded text-accent-text underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    more: 'text-pretty opacity-80 [&>summary]:text-sm [&>summary]:font-medium [&>summary]:text-accent-text',
     member: 'group relative flex flex-col gap-3',
     portrait: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
     name: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)]',
@@ -23,7 +29,16 @@ const team = tv({
       '2': {},
       '3': { list: 'md:grid-cols-3' },
       '4': { list: 'lg:grid-cols-4' },
+      '5': { list: 'md:grid-cols-3 lg:grid-cols-5' },
     },
+    // How the members are laid out: a grid, one stacked row each (photo beside text), or the first member large over a grid.
+    layout: {
+      grid: {},
+      list: { list: 'grid-cols-1 sm:grid-cols-1', member: 'sm:flex-row sm:items-start sm:gap-6', portrait: 'sm:w-48 sm:shrink-0' },
+      featured: { list: '[&>li:first-child]:col-span-full [&>li:first-child]:sm:flex-row [&>li:first-child]:sm:gap-8 [&>li:first-child_.kit-portrait]:sm:w-1/2' },
+    },
+    imageShape: { square: {}, rounded: { portrait: 'rounded-[var(--radius-image,1rem)]' }, circle: { portrait: 'rounded-full' } },
+    align: { start: {}, center: { member: 'items-center text-center', socials: 'justify-center' } },
     style: {
       card: { member: 'rounded-card border border-line p-6', portrait: '-mx-6 -mt-6 mb-2 rounded-b-none' },
       plain: {},
@@ -31,7 +46,7 @@ const team = tv({
     // accent: a small accent line. plain: body-size text in the text colour, as a byline.
     roleStyle: { accent: {}, plain: { role: 'text-[length:var(--text-body,1rem)] font-normal text-current' } },
   },
-  defaultVariants: { columns: '3', style: 'card', roleStyle: 'accent' },
+  defaultVariants: { columns: '3', layout: 'grid', imageShape: 'square', align: 'start', style: 'card', roleStyle: 'accent' },
 })
 
 interface Member {
@@ -42,44 +57,73 @@ interface Member {
   image?: ImageSource | undefined
   imageAlt?: string | undefined
   href?: string | undefined
+  /** Profile addresses (the contract's `links[]`); each is labelled by the network its host names, never an invented one. */
+  links?: string[] | undefined
 }
 
 interface Props {
   heading?: string | undefined
   intro?: string | undefined
   items: Member[]
-  columns?: '2' | '3' | '4' | undefined
+  columns?: '2' | '3' | '4' | '5' | undefined
+  layout?: 'grid' | 'list' | 'featured' | undefined
+  imageShape?: 'square' | 'rounded' | 'circle' | undefined
+  align?: 'start' | 'center' | undefined
+  /** Clamp a long bio to this many lines with the rest in a native `<details>` ("Read more"). */
+  bioClamp?: 2 | 3 | 4 | undefined
+  readMoreLabel?: string | undefined
+  /** The accessible name of a profile link; `{name}` and `{network}` are replaced ("{name} on {network}"). */
+  socialLabel?: string | undefined
   style?: 'card' | 'plain' | undefined
   roleStyle?: 'accent' | 'plain' | 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, items, columns, style, roleStyle, id } = Astro.props
-const s = team({ columns, style, roleStyle })
+const { heading, intro, items, columns, layout, imageShape, align, bioClamp, readMoreLabel = 'Read more', socialLabel = '{name} on {network}', style, roleStyle, measured, id } = Astro.props
+const s = team({ columns, layout, imageShape, align, style, roleStyle })
+const clamp = { 2: 'line-clamp-2', 3: 'line-clamp-3', 4: 'line-clamp-4' } as const
+// A bio that fits the clamp needs no disclosure: short means about 160 characters per two lines, a rough, build-time guess.
+const longBio = (bio: string) => bioClamp !== undefined && bio.length > bioClamp * 80
 const headingId = heading && id ? `${id}-title` : undefined
 // One level under the section heading, or the section's heading when there is none.
 const NameHeading = heading ? 'h3' : 'h2'
 ---
 {items.length > 0 && (
-  <Section id={id} aria-labelledby={headingId}>
+  <Section measured={measured} 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()}>
+    <ul class={s.list({ class: measuredGrid(measured) })}>
       {items.map(member => (
         <li class={s.member()}>
           {/* The portrait's text defaults to the name: a photo of a named person is not decoration. */}
-          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={s.portrait()}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
+          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={`${s.portrait()} kit-portrait`}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
           <NameHeading class={s.name()}>
             {member.href
               ? <a href={member.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{member.name}</a>
               : member.name}
           </NameHeading>
           {member.role && <p class={s.role()}>{member.role}</p>}
-          {member.bio && <p class={s.bio()} data-kit-text>{member.bio}</p>}
+          {member.bio && (longBio(member.bio)
+            ? (
+                <div class="[&:has(details[open])>p]:hidden">
+                  <p class={`${s.bio()} ${clamp[bioClamp!]}`} data-kit-text>{member.bio}</p>
+                  <details class={s.more()}><summary>{readMoreLabel}</summary><p class={s.bio()} data-kit-text>{member.bio}</p></details>
+                </div>
+              )
+            : <p class={s.bio()} data-kit-text>{member.bio}</p>)}
+          {member.links && member.links.length > 0 && (
+            <ul class={s.socials()}>
+              {member.links.map(profile).map(link => (
+                <li><a href={link.href} class={s.social()} aria-label={socialLabel.replace('{name}', member.name).replace('{network}', link.label)}>{link.label}</a></li>
+              ))}
+            </ul>
+          )}
         </li>
       ))}
     </ul>