@contentrain/astro-kit 0.31.0 → 0.32.0

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"
+      }
+    }
   }
 ]

package/components/testimonial/meta.json

@@ -15,10 +15,12 @@
     "layout": {
       "options": [
         "single",
-        "grid"
+        "grid",
+        "row",
+        "masonry"
       ],
       "default": "grid",
-      "description": "single: one large centred quote (the first item stands alone; more items stack). grid: cards, up to three per row."
+      "description": "single: one large centred quote (the first item stands alone; more items stack). grid: cards, up to three per row. row: a horizontal strip that scrolls and snaps, no script. masonry: columns of quotes of different lengths."
     },
     "tone": {
       "options": [
@@ -47,6 +49,32 @@
       ],
       "default": "card",
       "description": "card: each quote in its box (a bordered, padded card in the grid; the surface colour in a muted section). plain: the quote and who said it straight on the section, across the column, with no box, as Elementor's testimonial widget draws them."
+    },
+    "avatarSize": {
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md",
+      "description": "The portrait's size: small, medium or large."
+    },
+    "avatarPlace": {
+      "options": [
+        "start",
+        "top"
+      ],
+      "default": "start",
+      "description": "start: the portrait beside the name. top: above the quote."
+    },
+    "quoteMark": {
+      "options": [
+        "marks",
+        "glyph",
+        "none"
+      ],
+      "default": "marks",
+      "description": "marks: quotation marks around the text. glyph: one large decorative mark above. none: no marks."
     }
   },
   "props": {
@@ -83,6 +111,21 @@
             "type": "string",
             "label": "Photo description",
             "description": "Who the photo shows; usually their name."
+          },
+          "rating": {
+            "type": "number",
+            "label": "Rating",
+            "description": "Stars out of 5; leave empty for none."
+          },
+          "logo": {
+            "type": "image",
+            "label": "Company logo",
+            "description": "The company's logo beside the name."
+          },
+          "logoAlt": {
+            "type": "string",
+            "label": "Company name",
+            "description": "The company the logo stands for."
           }
         }
       },
@@ -93,10 +136,130 @@
       "label": "Heading",
       "description": "Section heading above the quotes."
     },
+    "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."
+        }
+      }
+    },
     "id": {
       "type": "string",
       "content": false,
       "description": "Anchor id of the section; the heading gets `<id>-title`."
+    },
+    "ratingLabel": {
+      "type": "string",
+      "content": false,
+      "description": "The stars' spoken text; `{rating}` stands for the number (\"{rating} out of 5 stars\")."
+    },
+    "label": {
+      "type": "string",
+      "content": false,
+      "description": "The scrolling row's name for assistive technology when there is no heading (\"Testimonials\")."
     }
   },
   "slots": {},
@@ -113,5 +276,5 @@
       "classic/testimonial"
     ]
   },
-  "a11y": "Each quote is a <figure> whose <figcaption> names the speaker; the text is in a <blockquote>. Avatars are decorative when their alt is empty. The section is labelled by its heading when it has one."
+  "a11y": "Each quote is a <figure> whose <figcaption> names the speaker; the text is in a <blockquote>. Avatars are decorative when their alt is empty. The section is labelled by its heading when it has one. Stars are one image named by the real rating (\"4.8 out of 5 stars\"); the row layout is a focusable named region."
 }

package/mapping/classic.json

@@ -200,6 +200,10 @@
     {
       "match": "classic/testimonial",
       "component": "testimonial",
+      "props": {
+        "ratingLabel": "ui:testimonial.rating",
+        "label": "ui:testimonial.label"
+      },
       "group": "siblings",
       "into": "items",
       "item": {
@@ -213,7 +217,9 @@
       "match": "classic/gallery",
       "component": "gallery",
       "props": {
-        "closeLabel": "ui:gallery.close"
+        "closeLabel": "ui:gallery.close",
+        "enlargeLabel": "ui:gallery.enlarge",
+        "regionLabel": "ui:gallery.images"
       },
       "into": "items",
       "each": ".gallery-item",

package/mapping/divi.json

@@ -253,6 +253,10 @@
     {
       "match": "divi/et_pb_testimonial",
       "component": "testimonial",
+      "props": {
+        "ratingLabel": "ui:testimonial.rating",
+        "label": "ui:testimonial.label"
+      },
       "group": "siblings",
       "into": "items",
       "item": {
@@ -267,7 +271,9 @@
       "match": "divi/et_pb_gallery",
       "component": "gallery",
       "props": {
-        "closeLabel": "ui:gallery.close"
+        "closeLabel": "ui:gallery.close",
+        "enlargeLabel": "ui:gallery.enlarge",
+        "regionLabel": "ui:gallery.images"
       },
       "into": "items",
       "each": ".et_pb_gallery_item",
@@ -457,7 +463,10 @@
       },
       "props": {
         "heading": "@intro dom:h1,h2,h3,h4",
-        "intro": "@intro dom:p"
+        "intro": "@intro dom:p",
+        "featuredLabel": "ui:pricing.featured",
+        "includedLabel": "ui:pricing.included",
+        "notIncludedLabel": "ui:pricing.not_included"
       },
       "into": "plans",
       "each": "@tables .et_pb_pricing_table",
@@ -486,7 +495,9 @@
       },
       "props": {
         "heading": "@intro dom:h1,h2,h3,h4",
-        "intro": "@intro dom:p"
+        "intro": "@intro dom:p",
+        "readMoreLabel": "ui:team.read_more",
+        "socialLabel": "ui:team.social"
       },
       "into": "items",
       "each": "@member",
@@ -501,6 +512,10 @@
     {
       "id": "testimonial.quotes",
       "component": "testimonial",
+      "props": {
+        "ratingLabel": "ui:testimonial.rating",
+        "label": "ui:testimonial.label"
+      },
       "slots": {
         "intro": {
           "match": "divi/et_pb_text",
@@ -588,7 +603,9 @@
       },
       "props": {
         "heading": "@intro dom:h1,h2,h3,h4",
-        "closeLabel": "ui:gallery.close"
+        "closeLabel": "ui:gallery.close",
+        "enlargeLabel": "ui:gallery.enlarge",
+        "regionLabel": "ui:gallery.images"
       },
       "into": "items",
       "each": "@images .et_pb_gallery_item",

package/mapping/elementor.json

@@ -276,6 +276,10 @@
     {
       "match": "elementor/testimonial",
       "component": "testimonial",
+      "props": {
+        "ratingLabel": "ui:testimonial.rating",
+        "label": "ui:testimonial.label"
+      },
       "variant": {
         "frame": "plain"
       },
@@ -293,7 +297,9 @@
       "match": "elementor/image-gallery",
       "component": "gallery",
       "props": {
-        "closeLabel": "ui:gallery.close"
+        "closeLabel": "ui:gallery.close",
+        "enlargeLabel": "ui:gallery.enlarge",
+        "regionLabel": "ui:gallery.images"
       },
       "into": "items",
       "each": ".gallery-item",
@@ -307,7 +313,9 @@
       "match": "elementor/gallery",
       "component": "gallery",
       "props": {
-        "closeLabel": "ui:gallery.close"
+        "closeLabel": "ui:gallery.close",
+        "enlargeLabel": "ui:gallery.enlarge",
+        "regionLabel": "ui:gallery.images"
       },
       "into": "items",
       "each": ".e-gallery-item",
@@ -531,7 +539,8 @@
       },
       "props": {
         "heading": "@heading attr:title || @heading dom:",
-        "intro": "@lead dom:"
+        "intro": "@lead dom:",
+        "currentLabel": "ui:steps.current"
       },
       "into": "items",
       "each": "column",
@@ -592,7 +601,10 @@
       },
       "props": {
         "heading": "@heading attr:title || @heading dom:",
-        "intro": "@lead dom:"
+        "intro": "@lead dom:",
+        "featuredLabel": "ui:pricing.featured",
+        "includedLabel": "ui:pricing.included",
+        "notIncludedLabel": "ui:pricing.not_included"
       },
       "into": "plans",
       "each": "column",
@@ -652,7 +664,9 @@
       },
       "props": {
         "heading": "@heading attr:title || @heading dom:",
-        "intro": "@lead dom:"
+        "intro": "@lead dom:",
+        "readMoreLabel": "ui:team.read_more",
+        "socialLabel": "ui:team.social"
       },
       "into": "items",
       "each": "column",
@@ -816,7 +830,10 @@
       },
       "props": {
         "heading": "@title attr:title || @title dom:",
-        "intro": "@intro dom:"
+        "intro": "@intro dom:",
+        "featuredLabel": "ui:pricing.featured",
+        "includedLabel": "ui:pricing.included",
+        "notIncludedLabel": "ui:pricing.not_included"
       },
       "into": "plans",
       "each": "@plan",
@@ -857,6 +874,10 @@
     {
       "id": "testimonial.quotes",
       "component": "testimonial",
+      "props": {
+        "ratingLabel": "ui:testimonial.rating",
+        "label": "ui:testimonial.label"
+      },
       "variant": {
         "quoteSize": "xl",
         "frame": "plain"
@@ -979,7 +1000,9 @@
       },
       "props": {
         "heading": "@title attr:title || @title dom:",
-        "closeLabel": "ui:gallery.close"
+        "closeLabel": "ui:gallery.close",
+        "enlargeLabel": "ui:gallery.enlarge",
+        "regionLabel": "ui:gallery.images"
       },
       "into": "items",
       "each": "@images .gallery-item",
@@ -1005,7 +1028,9 @@
       },
       "props": {
         "heading": "@title attr:title || @title dom:",
-        "closeLabel": "ui:gallery.close"
+        "closeLabel": "ui:gallery.close",
+        "enlargeLabel": "ui:gallery.enlarge",
+        "regionLabel": "ui:gallery.images"
       },
       "into": "items",
       "each": "@images .e-gallery-item",

package/mapping/gutenberg.json

@@ -251,7 +251,9 @@
       "match": "core/gallery",
       "component": "gallery",
       "props": {
-        "closeLabel": "ui:gallery.close"
+        "closeLabel": "ui:gallery.close",
+        "enlargeLabel": "ui:gallery.enlarge",
+        "regionLabel": "ui:gallery.images"
       },
       "into": "items",
       "each": "figure.wp-block-image",
@@ -834,7 +836,10 @@
       },
       "props": {
         "heading": "@heading dom:",
-        "intro": "@lead dom:"
+        "intro": "@lead dom:",
+        "featuredLabel": "ui:pricing.featured",
+        "includedLabel": "ui:pricing.included",
+        "notIncludedLabel": "ui:pricing.not_included"
       },
       "into": "plans",
       "each": "column",
@@ -895,7 +900,8 @@
       },
       "props": {
         "heading": "@heading dom:",
-        "intro": "@lead dom:"
+        "intro": "@lead dom:",
+        "currentLabel": "ui:steps.current"
       },
       "into": "items",
       "each": "column",
@@ -908,6 +914,10 @@
     {
       "id": "testimonial.columns",
       "component": "testimonial",
+      "props": {
+        "ratingLabel": "ui:testimonial.rating",
+        "label": "ui:testimonial.label"
+      },
       "when": {
         "columns": [
           2,
@@ -1051,7 +1061,9 @@
       },
       "props": {
         "heading": "@title dom:",
-        "closeLabel": "ui:gallery.close"
+        "closeLabel": "ui:gallery.close",
+        "enlargeLabel": "ui:gallery.enlarge",
+        "regionLabel": "ui:gallery.images"
       },
       "into": "items",
       "each": "@images figure.wp-block-image",
@@ -1087,6 +1099,10 @@
     {
       "id": "testimonial.quotes",
       "component": "testimonial",
+      "props": {
+        "ratingLabel": "ui:testimonial.rating",
+        "label": "ui:testimonial.label"
+      },
       "slots": {
         "title": {
           "match": "core/heading",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",