@contentrain/astro-kit 0.26.1 → 0.27.0

package/catalog.json

@@ -539,6 +539,14 @@
           ],
           "default": "default",
           "description": "Section background; the form always sits on a surface card."
+        },
+        "headingPlace": {
+          "options": [
+            "top",
+            "after"
+          ],
+          "default": "top",
+          "description": "Where the heading sits. top: above the introduction and details. after: after them, as a source that writes its lead line and contact buttons first has it; beside a form it titles the form, without one it follows the details."
         }
       },
       "props": {

package/components/contact-form/ContactForm.astro

@@ -43,6 +43,10 @@ const contact = tv({
     // The stacked column: centred in a reading width, or the section's whole column from its start edge (a page
     // builder's container whose text has no alignment of its own sits left, full width).
     align: { center: {}, start: {} },
+    // Where the section's heading sits: above everything (the default), or after the introduction and the details,
+    // where a source that writes its lead line and contact buttons first puts it (G-text: output order = source order).
+    // Beside a form it then titles the form; without one it follows the details.
+    headingPlace: { top: {}, after: {} },
     // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
     tone: { default: { form: 'border border-line bg-surface p-6 md:p-8' }, muted: { form: 'bg-surface p-6 text-ink md:p-8' }, inverse: { form: 'bg-surface p-6 text-ink md:p-8' }, accent: { form: 'bg-surface p-6 text-ink md:p-8', intro: 'opacity-100', term: 'opacity-100' } },
   },
@@ -63,16 +67,22 @@ interface Props {
   layout?: 'split' | 'stacked' | undefined
   /** Stacked only (and the details alone, before a Studio form): a centred column, or the whole column from the start edge. */
   align?: 'center' | 'start' | undefined
+  /** `after`: the heading follows the introduction and the details (as the source wrote them), titling the form when there is one. */
+  headingPlace?: 'top' | 'after' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   id?: string | undefined
 }
 
-const { model, heading, intro, formHeading, details = [], layout, align, tone, id = 'contact' } = Astro.props
+const { model, heading, intro, formHeading, details = [], layout, align, tone, headingPlace = 'top', id = 'contact' } = Astro.props
 // Nothing to render (Studio not bound yet): a split would leave an empty column — the details stand alone.
 const formShown = formHome(model) !== null
 const bare = contactSectionBare({ formShown, heading, intro, details })
 const s = contact({ layout: formShown ? layout : 'stacked', align, tone })
 const headingId = heading ? `${id}-title` : undefined
+// `after`: the heading goes with the form when there is one, else it follows the details in the copy column.
+const headingTop = headingPlace !== 'after'
+const headingInCopy = Boolean(heading) && (headingTop || !formShown)
+const headingInForm = Boolean(heading) && !headingTop && formShown
 // A description list needs a term for every detail; an icon list carried from the source has values only.
 const labelled = details.every(detail => detail.label)
 const LINK = 'underline decoration-line underline-offset-4 hover:decoration-current'
@@ -82,9 +92,9 @@ const FormHeading = heading ? 'h3' : 'h2'
 {!bare && (
 <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
   <div class={s.grid()}>
-    {(heading || intro || details.length > 0) && (
+    {(heading || intro || details.length > 0) && !(headingInForm && !intro && details.length === 0) && (
       <div class={s.copy()}>
-        {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+        {headingTop && heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
         {intro && <p class={s.intro()}>{intro}</p>}
         {details.length > 0 && (labelled
           ? (
@@ -107,12 +117,14 @@ const FormHeading = heading ? 'h3' : 'h2'
                 ))}
               </ul>
             ))}
+        {!headingTop && headingInCopy && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
       </div>
     )}
-    {formShown && (formHeading
+    {formShown && (formHeading || headingInForm
       ? (
           <div class={s.formColumn()}>
-            <FormHeading class={s.formHeading()}>{formHeading}</FormHeading>
+            {headingInForm && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+            {formHeading && <FormHeading class={s.formHeading()}>{formHeading}</FormHeading>}
             <StudioForm model={model} class={s.form()} />
           </div>
         )

package/components/contact-form/fixtures.json

@@ -16,5 +16,6 @@
   { "name": "stacked-start", "props": { "model": "contact-submissions", "intro": "Tell us what you make and when you want to launch.", "details": [{ "value": "Studio 4, Harbour Lane" }], "layout": "stacked", "align": "start", "id": "start" } },
   { "name": "split-inverse", "props": { "model": "contact-submissions", "heading": "Press", "tone": "inverse", "id": "press", "details": [{ "label": "Press office", "value": "press@northwind.example", "href": "mailto:press@northwind.example" }] } },
   { "name": "stacked-accent", "props": { "model": "newsletter-requests", "heading": "Request a print copy", "intro": "Print copies ship in the first week of each quarter.", "layout": "stacked", "tone": "accent", "id": "print" } },
-  { "name": "form-heading", "props": { "model": "contact-submissions", "heading": "Contact", "intro": "Tell us where you are and what you need.", "formHeading": "Tell us about your project", "details": [{ "label": "Address", "value": "12 Harbour Street, Leith" }] } }
+  { "name": "form-heading", "props": { "model": "contact-submissions", "heading": "Contact", "intro": "Tell us where you are and what you need.", "formHeading": "Tell us about your project", "details": [{ "label": "Address", "value": "12 Harbour Street, Leith" }] } },
+  { "name": "heading-after", "props": { "model": "contact-submissions", "heading": "Tell us about your project", "intro": "Write to us and we answer within two working days.", "details": [{"value": "Email the studio", "href": "mailto:hello@northwind.example"}], "headingPlace": "after"} }
 ]

package/components/contact-form/meta.json

@@ -8,7 +8,8 @@
   "variants": {
     "layout": { "options": ["split", "stacked"], "default": "split", "description": "split: details beside the form on wide screens. stacked: one column (see align)." },
     "align": { "options": ["center", "start"], "default": "center", "description": "Stacked only, and the details alone before a Studio form. center: one centred column at a reading width. start: the section's whole column from the start edge, as a page builder's container whose text sets no alignment." },
-    "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background; the form always sits on a surface card." }
+    "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background; the form always sits on a surface card." },
+    "headingPlace": { "options": ["top", "after"], "default": "top", "description": "Where the heading sits. top: above the introduction and details. after: after them, as a source that writes its lead line and contact buttons first has it; beside a form it titles the form, without one it follows the details." }
   },
   "props": {
     "model": { "type": "string", "required": true, "content": false, "description": "The Studio model submissions are saved to — the form's fields are that model's form settings (from the plugin form's fields at migration)." },

package/mapping/gutenberg.json

@@ -1110,6 +1110,62 @@
         "name": "dom:cite"
       }
     },
+    {
+      "id": "contact-form.intro-first",
+      "component": "contact-form",
+      "variant": {
+        "headingPlace": "after"
+      },
+      "when": {
+        "order": [
+          "intro",
+          "title"
+        ]
+      },
+      "slots": {
+        "title": {
+          "match": "core/heading",
+          "max": 1,
+          "min": 1
+        },
+        "formTitle": {
+          "match": "core/heading",
+          "max": 1
+        },
+        "intro": {
+          "match": "core/paragraph",
+          "max": 1,
+          "min": 1
+        },
+        "details": {
+          "match": "core/button",
+          "max": 3
+        },
+        "form": {
+          "match": [
+            "contact-form-7/contact-form-selector",
+            "jetpack/contact-form",
+            "wpforms/form-selector",
+            "gravityforms/form",
+            "ninja-forms/form"
+          ],
+          "min": 1,
+          "max": 1
+        }
+      },
+      "props": {
+        "model": "const:contact",
+        "heading": "@title dom:",
+        "intro": "@intro dom:",
+        "formHeading": "@formTitle dom:"
+      },
+      "into": "details",
+      "each": "@details",
+      "item": {
+        "value": "dom:a",
+        "href": "dom:a@href"
+      }
+    },
     {
       "id": "contact-form.form",
       "component": "contact-form",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.26.1",
+  "version": "0.27.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",