@contentrain/astro-kit 0.30.0 → 0.32.0

package/components/team/meta.json

@@ -8,6 +8,7 @@
     "KitImage.astro",
     "Section.astro",
     "image.ts",
+    "measured.ts",
     "types.ts"
   ],
   "variants": {
@@ -15,10 +16,11 @@
       "options": [
         "2",
         "3",
-        "4"
+        "4",
+        "5"
       ],
       "default": "3",
-      "description": "Columns on wide screens; one on phones, two on tablets."
+      "description": "Members per row on wide screens; one on phones, two on tablets."
     },
     "style": {
       "options": [
@@ -35,6 +37,32 @@
       ],
       "default": "accent",
       "description": "The member's role. accent: a small accent-coloured line. plain: body-size text in the text colour, as a byline."
+    },
+    "layout": {
+      "options": [
+        "grid",
+        "list",
+        "featured"
+      ],
+      "default": "grid",
+      "description": "grid: cards in columns. list: one row each, photo beside text. featured: the first member large over a grid."
+    },
+    "imageShape": {
+      "options": [
+        "square",
+        "rounded",
+        "circle"
+      ],
+      "default": "square",
+      "description": "Shape of the portrait."
+    },
+    "align": {
+      "options": [
+        "start",
+        "center"
+      ],
+      "default": "start",
+      "description": "Text and socials from the start edge, or centred."
     }
   },
   "props": {
@@ -85,6 +113,14 @@
             "type": "url",
             "label": "Link",
             "description": "Their profile page; makes the whole entry a link."
+          },
+          "links": {
+            "type": "array",
+            "label": "Profile links",
+            "description": "Addresses of the member's social profiles, in order; each is labelled by the network its host names (LinkedIn, GitHub, …).",
+            "items": {
+              "type": "url"
+            }
           }
         }
       },
@@ -94,6 +130,135 @@
       "type": "string",
       "content": false,
       "description": "Anchor id of the section; the heading gets `<id>-title`."
+    },
+    "bioClamp": {
+      "type": "integer",
+      "min": 2,
+      "max": 4,
+      "content": false,
+      "description": "Clamp a long bio to this many lines; the full text opens in a native <details> (\"Read more\"), no script."
+    },
+    "readMoreLabel": {
+      "type": "string",
+      "default": "Read more",
+      "content": false,
+      "description": "Text of the bio disclosure."
+    },
+    "socialLabel": {
+      "type": "string",
+      "default": "{name} on {network}",
+      "content": false,
+      "description": "Accessible name of a profile link; {name} and {network} are replaced."
+    },
+    "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": {},
@@ -110,7 +275,7 @@
       "divi/et_pb_team_member"
     ]
   },
-  "a11y": "Members are a <ul>; each name is an <h3> under the section's <h2> (an <h2> when the section has no heading), and a linked member's link text is the name. A portrait's text defaults to the name. The section is labelled by its heading when it has one.",
+  "a11y": "Members are a <ul>; each name is an <h3> under the section's <h2> (an <h2> when the section has no heading), and a linked member's link text is the name. A portrait's text defaults to the name. The section is labelled by its heading when it has one. A member with socials keeps the name link and the social links apart (no nested links); a clamped bio opens in a <details> with the whole text.",
   "pattern": {
     "summary": "repeated person units: portrait + name + role",
     "signals": [

package/components/team/team.ts

@@ -0,0 +1,9 @@
+// The network a profile address belongs to, read from its host (`linkedin.com` → LinkedIn); an unknown host is shown as itself.
+const NETWORKS: Record<string, string> = { 'linkedin.com': 'LinkedIn', 'github.com': 'GitHub', 'x.com': 'X', 'twitter.com': 'X', 'instagram.com': 'Instagram', 'facebook.com': 'Facebook', 'youtube.com': 'YouTube', 'dribbble.com': 'Dribbble', 'behance.net': 'Behance', 'medium.com': 'Medium' }
+
+export const profile = (href: string) => {
+  let host = href
+  try { host = new URL(href).hostname.replace(/^www\./, '') } catch { /* a relative address keeps its own text */ }
+  // `mailto:` and `tel:` addresses have no host: the address itself is the label, never an empty one.
+  return { href, label: NETWORKS[host] ?? (host || href) }
+}

package/components/testimonial/Testimonial.astro

@@ -6,6 +6,8 @@ import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
 import { imageOf, type ImageSource } from '../_shared/image'
+import { measuredGrid } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
 
 export interface TestimonialItem {
   quote: string
@@ -14,6 +16,11 @@ export interface TestimonialItem {
   /** The portrait's address (or, until 0.7, an `ImageInput`). */
   avatar?: ImageSource | undefined
   avatarAlt?: string | undefined
+  /** Stars out of 5 (0 or absent: none shown). */
+  rating?: number | undefined
+  /** A company logo beside the name. */
+  logo?: ImageSource | undefined
+  logoAlt?: string | undefined
 }
 
 const testimonial = tv({
@@ -23,6 +30,10 @@ const testimonial = tv({
     card: 'flex h-full flex-col gap-6',
     quote: 'text-pretty',
     person: 'mt-auto flex items-center gap-3 not-italic',
+    stars: 'flex gap-0.5 text-accent-text',
+    glyph: 'block text-5xl leading-none opacity-40 select-none',
+    avatar: 'size-12 shrink-0 rounded-full object-cover',
+    logo: 'ms-auto h-6 w-auto max-w-24 object-contain opacity-80',
     name: 'font-semibold',
     role: 'text-sm opacity-75',
   },
@@ -30,8 +41,17 @@ const testimonial = tv({
     layout: {
       single: { heading: 'text-center', list: 'mx-auto max-w-3xl', card: 'items-center text-center', quote: 'text-2xl leading-snug font-medium md:text-3xl', person: 'mt-0' },
       grid: { list: 'md:grid-cols-2 lg:grid-cols-3', card: 'rounded-card border border-line p-6', quote: 'text-base' },
+      // Native horizontal scroll with snap points; the next card peeks at the edge. No buttons, no script.
+      row: { list: 'flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-ps-4 pb-4 focus-visible:outline-2 focus-visible:outline-offset-4', card: 'w-[85%] shrink-0 snap-start rounded-card border border-line p-6 sm:w-[45%] lg:w-[30%]', quote: 'text-base' },
+      // CSS columns for four or more quotes of different lengths.
+      masonry: { list: 'block columns-1 gap-6 space-y-0 md:columns-2 lg:columns-3', card: 'mb-6 h-full break-inside-avoid rounded-card border border-line p-6', quote: 'text-base' },
     },
-    tone: { default: {}, muted: { card: 'bg-surface' }, inverse: { card: 'border-surface/20' }, accent: { card: 'border-accent-ink/30', role: 'opacity-100' } },
+    avatarSize: { sm: { avatar: 'size-9' }, md: {}, lg: { avatar: 'size-16' } },
+    // start: the portrait before the name. top: above the quote.
+    avatarPlace: { start: {}, top: {} },
+    // marks: the quotation marks around the text, as the source writes it. glyph: one large decorative mark above.
+    quoteMark: { marks: {}, glyph: {}, none: {} },
+    tone: { default: {}, muted: { card: 'bg-surface' }, inverse: { card: 'border-surface/20' }, accent: { card: 'border-accent-ink/30', role: 'opacity-100', logo: 'opacity-100' } },
     // The quote's size; `auto` is the layout's own (body size in a grid, large for a single quote).
     quoteSize: {
       auto: {},
@@ -44,47 +64,77 @@ const testimonial = tv({
     frame: { card: {}, plain: {} },
   },
   compoundVariants: [
-    { layout: 'grid', tone: 'muted', class: { card: 'border-transparent text-ink' } },
+    { layout: ['grid', 'row', 'masonry'], tone: 'muted', class: { card: 'border-transparent text-ink' } },
     { frame: 'plain', class: { card: 'rounded-none border-0 bg-transparent p-0' } },
   ],
-  defaultVariants: { layout: 'grid', tone: 'default', quoteSize: 'auto', frame: 'card' },
+  defaultVariants: { layout: 'grid', tone: 'default', quoteSize: 'auto', frame: 'card', avatarSize: 'md', avatarPlace: 'start', quoteMark: 'marks' },
 })
 
 interface Props {
   items: TestimonialItem[]
   heading?: string | undefined
-  layout?: 'single' | 'grid' | undefined
+  layout?: 'single' | 'grid' | 'row' | 'masonry' | undefined
   quoteSize?: 'auto' | 'base' | 'lg' | 'xl' | undefined
   frame?: 'card' | 'plain' | undefined
+  avatarSize?: 'sm' | 'md' | 'lg' | undefined
+  avatarPlace?: 'start' | 'top' | undefined
+  quoteMark?: 'marks' | 'glyph' | 'none' | undefined
+  /** The stars' spoken text; `{rating}` stands for the number. */
+  ratingLabel?: string | undefined
+  /** The scrolling row's name for assistive technology, when there is no heading to name it (layout row). */
+  label?: string | 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
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   id?: string | undefined
 }
 
-const { items, heading, layout, quoteSize, frame, tone, id } = Astro.props
-const s = testimonial({ layout, quoteSize, frame, tone })
+const { items, heading, layout, quoteSize, frame, avatarSize, avatarPlace, quoteMark = 'marks', ratingLabel = '{rating} out of 5 stars', label = 'Testimonials', tone, measured, id } = Astro.props
+const s = testimonial({ layout, quoteSize, frame, avatarSize, avatarPlace, quoteMark, tone })
 const headingId = heading && id ? `${id}-title` : undefined
 // Two quotes share the row: a third column would stand empty beside them and narrow both (IP-4 elementor launch G9).
-const list = s.list(items.length === 2 && (layout ?? 'grid') === 'grid' ? { class: 'lg:grid-cols-2' } : {})
+const measuredList = (layout ?? 'grid') === 'grid' ? measuredGrid(measured) : undefined
+const list = s.list({ class: measuredList ?? (items.length === 2 && (layout ?? 'grid') === 'grid' ? 'lg:grid-cols-2' : undefined) })
 // The quotation marks are drawn, not written: the quote's text is the source's words, read once. A quote the source
 // already wrote inside marks keeps its own.
 const quoted = (text: string) => /^\s*["'“‘„«‹「『]/.test(text)
+// The real number is what is said ("4.8 out of 5"); the stars drawn follow it in halves.
+const stars = (item: TestimonialItem) => Math.min(5, Math.max(0, item.rating ?? 0))
+const spoken = (rating: number) => String(Math.round(rating * 10) / 10)
+// A row scrolls: its box is focusable and named, so a keyboard reaches the cards beyond the edge.
+const scrolls = layout === 'row'
 ---
 {items.length > 0 && (
-  <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+  <Section measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
     {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
-    <div class={list}>
-      {items.map(item => (
-        <figure class={s.card()}>
-          <blockquote class={s.quote()}><p class:list={[!quoted(item.quote) && "before:content-[open-quote] after:content-[close-quote]"]}>{item.quote}</p></blockquote>
-          <figcaption class={s.person()}>
-            {imageOf(item.avatar, item.avatarAlt) && <KitImage image={imageOf(item.avatar, item.avatarAlt)!} sizes="48px" class="size-12 shrink-0 rounded-full object-cover" />}
-            <span class="flex flex-col text-start">
-              <span class={s.name()}>{item.name}</span>
-              {item.role && <span class={s.role()}>{item.role}</span>}
-            </span>
-          </figcaption>
-        </figure>
-      ))}
+    <div class={list} tabindex={scrolls ? 0 : undefined} role={scrolls ? 'region' : undefined} aria-labelledby={scrolls && heading ? headingId : undefined} aria-label={scrolls && !heading ? label : undefined}>
+      {items.map((item) => {
+        const avatar = imageOf(item.avatar, item.avatarAlt)
+        const logo = imageOf(item.logo, item.logoAlt)
+        const rating = stars(item)
+        return (
+          <figure class={s.card()}>
+            {avatar && avatarPlace === 'top' && <KitImage image={avatar} sizes="64px" class={s.avatar()} />}
+            {rating > 0 && (
+              <span class={s.stars()} role="img" aria-label={ratingLabel.replace('{rating}', spoken(rating))}>
+                {[1, 2, 3, 4, 5].map(n => (
+                  <svg viewBox="0 0 24 24" class:list={['size-5', rating < n && (rating >= n - 0.5 ? 'opacity-60' : 'opacity-25')]} fill="currentColor" aria-hidden="true"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z" /></svg>
+                ))}
+              </span>
+            )}
+            {quoteMark === 'glyph' && <span class:list={[s.glyph(), "before:content-['“']"]} aria-hidden="true"></span>}
+            <blockquote class={s.quote()}><p class:list={[quoteMark === 'marks' && !quoted(item.quote) && "before:content-[open-quote] after:content-[close-quote]"]}>{item.quote}</p></blockquote>
+            <figcaption class={s.person()}>
+              {avatar && avatarPlace !== 'top' && <KitImage image={avatar} sizes="64px" class={s.avatar()} />}
+              <span class="flex flex-col text-start">
+                <span class={s.name()}>{item.name}</span>
+                {item.role && <span class={s.role()}>{item.role}</span>}
+              </span>
+              {logo && <KitImage image={logo} sizes="96px" class={s.logo()} />}
+            </figcaption>
+          </figure>
+        )
+      })}
     </div>
   </Section>
 )}

package/components/testimonial/fixtures.json

@@ -46,5 +46,78 @@
   {
     "name": "grid-source-quoted",
     "props": { "items": [{ "quote": "“We set it up before lunch.”", "name": "Grace Lin", "role": "Head of Support, Fernhill" }, { "quote": "People just read the page.", "name": "Omar Haddad", "role": "Support lead" }] }
+  },
+  {
+    "name": "row",
+    "props": {
+      "heading": "Kind words",
+      "items": [
+        { "quote": "The only travel site I read to the end. Every guide feels written by someone who stayed.", "name": "Ayşe Demir", "role": "Reader since 2019", "avatar": { "src": "/kit-fixtures/avatar-1.svg", "alt": "", "width": 96, "height": 96 }, "rating": 5 },
+        { "quote": "Their Lisbon guide saved our trip.", "name": "Tom Becker", "avatar": { "src": "/kit-fixtures/avatar-2.svg", "alt": "", "width": 96, "height": 96 }, "rating": 4 },
+        { "quote": "Honest, slow, and beautifully photographed. I recommend it to every friend who asks where to go next.", "name": "Mei Tanaka", "role": "Photographer", "avatar": { "src": "/kit-fixtures/avatar-3.svg", "alt": "", "width": 96, "height": 96 }, "rating": 3 },
+        { "quote": "The only travel site I read to the end. Every guide feels written by someone who stayed.", "name": "Ayşe Demir", "role": "Reader since 2019", "avatar": { "src": "/kit-fixtures/avatar-1.svg", "alt": "", "width": 96, "height": 96 }, "rating": 5 },
+        { "quote": "Their Lisbon guide saved our trip.", "name": "Tom Becker", "avatar": { "src": "/kit-fixtures/avatar-2.svg", "alt": "", "width": 96, "height": 96 }, "rating": 4 },
+        { "quote": "Honest, slow, and beautifully photographed. I recommend it to every friend who asks where to go next.", "name": "Mei Tanaka", "role": "Photographer", "avatar": { "src": "/kit-fixtures/avatar-3.svg", "alt": "", "width": 96, "height": 96 }, "rating": 3 }
+      ],
+      "layout": "row"
+    }
+  },
+  {
+    "name": "masonry-sm-top",
+    "props": {
+      "heading": "Kind words",
+      "items": [
+        { "quote": "The only travel site I read to the end. Every guide feels written by someone who stayed.", "name": "Ayşe Demir", "role": "Reader since 2019", "avatar": { "src": "/kit-fixtures/avatar-1.svg", "alt": "", "width": 96, "height": 96 } },
+        { "quote": "Their Lisbon guide saved our trip.", "name": "Tom Becker", "avatar": { "src": "/kit-fixtures/avatar-2.svg", "alt": "", "width": 96, "height": 96 } },
+        { "quote": "Honest, slow, and beautifully photographed. I recommend it to every friend who asks where to go next.", "name": "Mei Tanaka", "role": "Photographer", "avatar": { "src": "/kit-fixtures/avatar-3.svg", "alt": "", "width": 96, "height": 96 } },
+        { "quote": "The only travel site I read to the end. Every guide feels written by someone who stayed.", "name": "Ayşe Demir", "role": "Reader since 2019", "avatar": { "src": "/kit-fixtures/avatar-1.svg", "alt": "", "width": 96, "height": 96 } },
+        { "quote": "Their Lisbon guide saved our trip.", "name": "Tom Becker", "avatar": { "src": "/kit-fixtures/avatar-2.svg", "alt": "", "width": 96, "height": 96 } },
+        { "quote": "Honest, slow, and beautifully photographed. I recommend it to every friend who asks where to go next.", "name": "Mei Tanaka", "role": "Photographer", "avatar": { "src": "/kit-fixtures/avatar-3.svg", "alt": "", "width": 96, "height": 96 } }
+      ],
+      "layout": "masonry",
+      "avatarSize": "sm",
+      "avatarPlace": "top"
+    }
+  },
+  {
+    "name": "glyph-large-rated",
+    "props": { "heading": "Kind words", "items": [{ "quote": "The only travel site I read to the end. Every guide feels written by someone who stayed.", "name": "Ayşe Demir", "role": "Reader since 2019", "avatar": { "src": "/kit-fixtures/avatar-1.svg", "alt": "", "width": 96, "height": 96 }, "rating": 5 }], "layout": "single", "quoteMark": "glyph", "avatarSize": "lg" }
+  },
+  {
+    "name": "grid-none-logos",
+    "props": {
+      "heading": "Kind words",
+      "items": [
+        { "quote": "The only travel site I read to the end. Every guide feels written by someone who stayed.", "name": "Ayşe Demir", "role": "Reader since 2019", "avatar": { "src": "/kit-fixtures/avatar-1.svg", "alt": "", "width": 96, "height": 96 }, "logo": "/kit-fixtures/logo.svg", "logoAlt": "Acme" },
+        { "quote": "Their Lisbon guide saved our trip.", "name": "Tom Becker", "avatar": { "src": "/kit-fixtures/avatar-2.svg", "alt": "", "width": 96, "height": 96 }, "logo": "/kit-fixtures/logo.svg", "logoAlt": "Acme" },
+        { "quote": "Honest, slow, and beautifully photographed. I recommend it to every friend who asks where to go next.", "name": "Mei Tanaka", "role": "Photographer", "avatar": { "src": "/kit-fixtures/avatar-3.svg", "alt": "", "width": 96, "height": 96 }, "logo": "/kit-fixtures/logo.svg", "logoAlt": "Acme" }
+      ],
+      "quoteMark": "none",
+      "tone": "muted"
+    }
+  },
+  {
+    "name": "measured-columns",
+    "props": {
+      "heading": "What readers say",
+      "id": "readers",
+      "items": [
+        { "quote": "The only travel site I read to the end. Every guide feels written by someone who stayed.", "name": "Ayşe Demir", "role": "Reader since 2019", "avatar": { "src": "/kit-fixtures/avatar-1.svg", "alt": "", "width": 96, "height": 96 } },
+        { "quote": "Their Lisbon guide saved our trip.", "name": "Tom Becker", "avatar": { "src": "/kit-fixtures/avatar-2.svg", "alt": "", "width": 96, "height": 96 } },
+        { "quote": "Honest, slow, and beautifully photographed. I recommend it to every friend who asks where to go next.", "name": "Mei Tanaka", "role": "Photographer", "avatar": { "src": "/kit-fixtures/avatar-3.svg", "alt": "", "width": 96, "height": 96 } }
+      ],
+      "measured": {
+        "columns": {
+          "390": 1,
+          "768": 2,
+          "1280": 3
+        },
+        "gap": 16,
+        "bg": {
+          "color": "#f1f5f9"
+        },
+        "tone": "light"
+      }
+    }
   }
 ]