@contentrain/astro-kit 0.30.0 → 0.32.0

package/components/contact-form/ContactForm.astro

@@ -11,6 +11,8 @@
 // form on WordPress.
 import { tv } from 'tailwind-variants'
 import Section from '../_shared/Section.astro'
+import type { MeasuredStyle } from '../_shared/types'
+import Embed from '../embed/Embed.astro'
 import StudioForm from '../../studio/StudioForm.astro'
 import { formHome } from '../../../lib/features'
 import { contactSectionBare } from './contact-form'
@@ -35,12 +37,21 @@ const contact = tv({
     formColumn: 'flex flex-col gap-4',
     formHeading: 'text-xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-2xl',
     form: 'rounded-card',
+    card: 'flex flex-col gap-1 rounded-card border border-line p-4',
+    hours: 'mt-2 whitespace-pre-line text-sm opacity-85',
+    socials: 'mt-2 flex flex-wrap gap-4 text-sm',
   },
   variants: {
     layout: {
       split: { grid: 'md:grid-cols-[2fr_3fr] md:items-start' },
       stacked: {},
+      // Only the form (under its heading): the details, hours and map are left to other sections.
+      'form-only': { grid: 'mx-auto max-w-2xl' },
     },
+    // How the ways to reach you are drawn: a plain list, or a card each (label over value).
+    detailsStyle: { list: {}, cards: { details: 'mt-2 grid gap-3 sm:grid-cols-2' } },
+    // The form on its own surface (the default), or flush on the section's background.
+    panel: { card: {}, none: {} },
     // 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: {} },
@@ -54,7 +65,7 @@ const contact = tv({
   compoundVariants: [
     { layout: 'stacked', align: 'center', class: { grid: 'mx-auto max-w-2xl' } },
   ],
-  defaultVariants: { layout: 'split', tone: 'default', align: 'center' },
+  defaultVariants: { layout: 'split', tone: 'default', align: 'center', detailsStyle: 'list', panel: 'card' },
 })
 
 interface Props {
@@ -65,25 +76,38 @@ interface Props {
   /** The form's own heading, above the form ("Tell us about your project"). */
   formHeading?: string | undefined
   details?: ContactDetail[] | undefined
-  layout?: 'split' | 'stacked' | undefined
+  layout?: 'split' | 'stacked' | 'form-only' | undefined
+  detailsStyle?: 'list' | 'cards' | undefined
+  panel?: 'card' | 'none' | undefined
+  /** Opening hours, as written (line breaks kept). */
+  hours?: string | undefined
+  /** Profile links shown as a row under the details. */
+  socials?: Array<{ label: string, href: string }> | undefined
+  /** A map of the address, loaded only on a click (`Embed`); `address` is also printed so it is never the only way to find you. */
+  map?: { address?: string | undefined, url?: string | undefined, title: string } | 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
+  /** 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 { model, heading, intro, formHeading, details = [], layout, align, tone, headingPlace = 'top', id = 'contact' } = Astro.props
+const { model, heading, intro, formHeading, details = [], layout, detailsStyle, panel, hours, socials = [], map, align, tone, headingPlace = 'top', measured, id = 'contact' } = Astro.props
 // Nothing to render (Studio not bound and no fallback): 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 })
+// Without a form there is nothing for `form-only` to show: the section falls back to its stacked copy.
+const formOnly = layout === 'form-only' && formShown
+const s = contact({ layout: formShown ? layout : 'stacked', align, tone, detailsStyle, panel })
+const formClass = s.form({ class: panel === 'none' ? 'border-0 bg-transparent p-0 text-current' : undefined })
 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
+const headingInCopy = Boolean(heading) && !formOnly && (headingTop || !formShown)
+const headingInForm = Boolean(heading) && (formOnly || (!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'
@@ -91,9 +115,9 @@ const LINK = 'underline decoration-line underline-offset-4 hover:decoration-curr
 const FormHeading = heading ? 'h3' : 'h2'
 ---
 {!bare && (
-<Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+<Section measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
   <div class={s.grid()}>
-    {(heading || intro || details.length > 0) && !(headingInForm && !intro && details.length === 0) && (
+    {!formOnly && (heading || intro || details.length > 0 || hours || socials.length > 0 || map) && !(headingInForm && !hours && socials.length === 0 && !map && !intro && details.length === 0) && (
       <div class={s.copy()}>
         {headingTop && heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
         {intro && <p class={s.intro()}>{intro}</p>}
@@ -101,7 +125,7 @@ const FormHeading = heading ? 'h3' : 'h2'
           ? (
               <dl class={s.details()}>
                 {details.map(detail => (
-                  <div>
+                  <div class={detailsStyle === 'cards' ? s.card() : undefined}>
                     <dt class={s.term()}>{detail.label}</dt>
                     <dd class={s.value()}>{detail.href ? <a href={detail.href} class={LINK}>{detail.value}</a> : detail.value}</dd>
                   </div>
@@ -111,13 +135,25 @@ const FormHeading = heading ? 'h3' : 'h2'
           : (
               <ul class={s.details()}>
                 {details.map(detail => (
-                  <li class={s.value()}>
+                  <li class={s.value({ class: detailsStyle === 'cards' ? s.card() : undefined })}>
                     {detail.label && <span class={s.term()}>{detail.label}: </span>}
                     {detail.href ? <a href={detail.href} class={LINK}>{detail.value}</a> : detail.value}
                   </li>
                 ))}
               </ul>
             ))}
+        {hours && <p class={s.hours()}>{hours}</p>}
+        {socials.length > 0 && (
+          <ul class={s.socials()}>
+            {socials.map(link => <li><a href={link.href} class={LINK}>{link.label}</a></li>)}
+          </ul>
+        )}
+        {map && (
+          <div>
+            <Embed address={map.address} url={map.url} title={map.title} aspect="map" width="page" />
+            {map.address && <p class="text-sm opacity-85">{map.address}</p>}
+          </div>
+        )}
         {!headingTop && headingInCopy && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
       </div>
     )}
@@ -126,10 +162,10 @@ const FormHeading = heading ? 'h3' : 'h2'
           <div class={s.formColumn()}>
             {headingInForm && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
             {formHeading && <FormHeading class={s.formHeading()}>{formHeading}</FormHeading>}
-            <StudioForm model={model} class={s.form()} />
+            <StudioForm model={model} class={formClass} />
           </div>
         )
-      : <StudioForm model={model} class={s.form()} />)}
+      : <StudioForm model={model} class={formClass} />)}
   </div>
 </Section>
 )}

package/components/contact-form/fixtures.json

@@ -6,16 +6,176 @@
       "heading": "Get in touch",
       "intro": "Questions, corrections and invitations are all welcome. We answer within two working days.",
       "details": [
-        { "label": "Email", "value": "hello@northwind.example", "href": "mailto:hello@northwind.example" },
-        { "label": "Phone", "value": "+351 21 000 0000", "href": "tel:+351210000000" },
-        { "label": "Studio", "value": "Rua das Flores 12, Lisbon" }
+        {
+          "label": "Email",
+          "value": "hello@northwind.example",
+          "href": "mailto:hello@northwind.example"
+        },
+        {
+          "label": "Phone",
+          "value": "+351 21 000 0000",
+          "href": "tel:+351210000000"
+        },
+        {
+          "label": "Studio",
+          "value": "Rua das Flores 12, Lisbon"
+        }
       ]
     }
   },
-  { "name": "stacked-muted", "props": { "model": "contact-submissions", "heading": "Write to us", "intro": "We read every message and answer within two working days.", "layout": "stacked", "tone": "muted", "id": "write" } },
-  { "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": "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"} }
+  {
+    "name": "stacked-muted",
+    "props": {
+      "model": "contact-submissions",
+      "heading": "Write to us",
+      "intro": "We read every message and answer within two working days.",
+      "layout": "stacked",
+      "tone": "muted",
+      "id": "write"
+    }
+  },
+  {
+    "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": "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"
+    }
+  },
+  {
+    "name": "form-only",
+    "props": {
+      "model": "contact-submissions",
+      "heading": "Write to us",
+      "layout": "form-only",
+      "panel": "none"
+    }
+  },
+  {
+    "name": "cards-hours-socials",
+    "props": {
+      "model": "contact-submissions",
+      "heading": "Find us",
+      "detailsStyle": "cards",
+      "details": [
+        {
+          "label": "Email",
+          "value": "hello@northwind.example",
+          "href": "mailto:hello@northwind.example"
+        },
+        {
+          "label": "Phone",
+          "value": "+351 21 000 0000",
+          "href": "tel:+351210000000"
+        },
+        {
+          "label": "Studio",
+          "value": "Rua das Flores 12, Lisbon"
+        }
+      ],
+      "hours": "Mon–Fri 9:00–18:00\nSat 10:00–14:00",
+      "socials": [
+        {
+          "label": "Instagram",
+          "href": "https://instagram.com/northwind"
+        },
+        {
+          "label": "LinkedIn",
+          "href": "https://linkedin.com/company/northwind"
+        }
+      ]
+    }
+  },
+  {
+    "name": "map-click-to-load",
+    "props": {
+      "model": "contact-submissions",
+      "heading": "Visit",
+      "layout": "stacked",
+      "details": [
+        {
+          "label": "Email",
+          "value": "hello@northwind.example",
+          "href": "mailto:hello@northwind.example"
+        },
+        {
+          "label": "Phone",
+          "value": "+351 21 000 0000",
+          "href": "tel:+351210000000"
+        },
+        {
+          "label": "Studio",
+          "value": "Rua das Flores 12, Lisbon"
+        }
+      ],
+      "map": {
+        "address": "Rua das Flores 12, Lisbon",
+        "title": "Our studio"
+      }
+    }
+  }
 ]

package/components/contact-form/meta.json

@@ -3,29 +3,297 @@
   "name": "Contact form",
   "description": "The contact section: heading, introduction, contact details (email, phone, address) and a Contentrain Studio form — fields, spam protection and notifications set in Studio, submissions reviewed there. Replaces form plugins; renders the details alone until the site is bound to a Studio project (a section left with only its heading is not drawn: the heading would title a form that is not there). When the owner chose another home at migration (site.config.ts `features.forms`) the form posts to their form service, or the section shows an address to write to or a link to the form on WordPress.",
   "category": "section",
-  "uses": [],
-  "shared": ["Section.astro"],
+  "uses": [
+    "embed"
+  ],
+  "shared": [
+    "Section.astro",
+    "measured.ts",
+    "types.ts"
+  ],
   "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." },
-    "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." }
+    "layout": {
+      "options": [
+        "split",
+        "stacked",
+        "form-only"
+      ],
+      "default": "split",
+      "description": "split: details beside the form on wide screens. stacked: one column (see align). form-only: only the form under its heading; details, hours and map are left out."
+    },
+    "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."
+    },
+    "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."
+    },
+    "detailsStyle": {
+      "options": [
+        "list",
+        "cards"
+      ],
+      "default": "list",
+      "description": "The ways to reach you: a plain list, or a card each (label over value)."
+    },
+    "panel": {
+      "options": [
+        "card",
+        "none"
+      ],
+      "default": "card",
+      "description": "card: the form on its own surface. none: flush on the section's background."
+    }
   },
   "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)." },
-    "heading": { "type": "string", "label": "Heading", "description": "Section heading." },
-    "intro": { "type": "text", "label": "Introduction", "description": "A line or two above the details." },
-    "formHeading": { "type": "string", "label": "Form heading", "description": "The form's own heading, shown above the form." },
-    "details": { "type": "array", "label": "Contact details", "items": { "type": "object", "fields": { "label": { "type": "string", "label": "Label", "description": "What the detail is (Phone, Email, Address). Without labels the details are a plain list." }, "value": { "type": "string", "label": "Value", "required": true, "description": "The detail as shown." }, "href": { "type": "url", "label": "Link", "description": "A tel:, mailto: or map link for it." } } }, "description": "Ways to reach you, in order (Email → mailto:, Phone → tel:, Address → map link)." },
-    "id": { "type": "string", "content": false, "description": "Section id; the heading gets `<id>-title`." }
+    "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)."
+    },
+    "heading": {
+      "type": "string",
+      "label": "Heading",
+      "description": "Section heading."
+    },
+    "intro": {
+      "type": "text",
+      "label": "Introduction",
+      "description": "A line or two above the details."
+    },
+    "formHeading": {
+      "type": "string",
+      "label": "Form heading",
+      "description": "The form's own heading, shown above the form."
+    },
+    "details": {
+      "type": "array",
+      "label": "Contact details",
+      "items": {
+        "type": "object",
+        "fields": {
+          "label": {
+            "type": "string",
+            "label": "Label",
+            "description": "What the detail is (Phone, Email, Address). Without labels the details are a plain list."
+          },
+          "value": {
+            "type": "string",
+            "label": "Value",
+            "required": true,
+            "description": "The detail as shown."
+          },
+          "href": {
+            "type": "url",
+            "label": "Link",
+            "description": "A tel:, mailto: or map link for it."
+          }
+        }
+      },
+      "description": "Ways to reach you, in order (Email → mailto:, Phone → tel:, Address → map link)."
+    },
+    "id": {
+      "type": "string",
+      "content": false,
+      "description": "Section id; the heading gets `<id>-title`."
+    },
+    "hours": {
+      "type": "text",
+      "label": "Opening hours",
+      "description": "Opening hours as written; line breaks are kept."
+    },
+    "socials": {
+      "type": "array",
+      "label": "Profile links",
+      "description": "Social or profile links, shown as a row under the details.",
+      "items": {
+        "type": "object",
+        "fields": {
+          "label": {
+            "type": "string",
+            "label": "Label",
+            "required": true,
+            "description": "Visible text of the link."
+          },
+          "href": {
+            "type": "url",
+            "label": "Link",
+            "required": true,
+            "description": "The profile address."
+          }
+        }
+      }
+    },
+    "map": {
+      "type": "object",
+      "label": "Map",
+      "description": "A map of the address, loaded only when the reader asks (no iframe on load); the address is printed under it.",
+      "fields": {
+        "address": {
+          "type": "string",
+          "label": "Address",
+          "description": "The place shown on the map."
+        },
+        "url": {
+          "type": "url",
+          "label": "Map address",
+          "description": "A Google Maps embed address, when the source has one."
+        },
+        "title": {
+          "type": "string",
+          "label": "Map title",
+          "required": true,
+          "description": "What the map is (\"Our studio\"): its accessible name."
+        }
+      }
+    },
+    "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": "studio",
   "dependencies": {},
   "sources": {
-    "elementor": ["elementor/form"],
-    "divi": ["divi/et_pb_contact_form"],
-    "classic": ["classic/contact-form-7", "classic/wpforms", "classic/gravityforms", "classic/ninja-forms"]
+    "elementor": [
+      "elementor/form"
+    ],
+    "divi": [
+      "divi/et_pb_contact_form"
+    ],
+    "classic": [
+      "classic/contact-form-7",
+      "classic/wpforms",
+      "classic/gravityforms",
+      "classic/ninja-forms"
+    ]
   },
   "a11y": "Contact details are a description list when every one has a label, a plain list otherwise; links say what they open. The form's labels, errors and focus handling are Studio's form runtime (FormMount). The section is labelled by its heading. Without a form to show and with no introduction or details, the section is not drawn at all."
 }