@contentrain/astro-kit 0.37.0 → 0.38.0

package/catalog.json

@@ -1315,6 +1315,7 @@
         "embed"
       ],
       "shared": [
+        "KitImage.astro",
         "Section.astro",
         "measured.ts",
         "safe-url.ts",
@@ -1416,6 +1417,11 @@
                 "type": "url",
                 "label": "Link",
                 "description": "A tel:, mailto: or map link for it."
+              },
+              "iconImage": {
+                "type": "image",
+                "label": "Icon image",
+                "description": "The detail's own icon as an image file (the old site's map marker or phone, moved as an svg), drawn before it."
               }
             }
           },
@@ -1617,6 +1623,7 @@
         "details[].label": "details[].label",
         "details[].value": "details[].value",
         "details[].href": "details[].href",
+        "details[].iconImage": "details[].icon_image",
         "hours": "hours",
         "socials": "socials",
         "socials[].label": "socials[].label",

package/components/contact-form/ContactForm.astro

@@ -10,6 +10,7 @@
 // that posts to their form service, an address to write to, or a link to the
 // form on WordPress.
 import { tv } from 'tailwind-variants'
+import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
 import type { MeasuredStyle } from '../_shared/types'
 import Embed from '../embed/Embed.astro'
@@ -24,6 +25,8 @@ export interface ContactDetail {
   value: string
   /** `mailto:`, `tel:` or a map link. */
   href?: string | undefined
+  /** The detail's own icon as an image file (the old site's map marker or phone, moved as an svg), drawn before it. */
+  iconImage?: string | undefined
 }
 
 const contact = tv({
@@ -35,6 +38,7 @@ const contact = tv({
     details: 'mt-2 flex flex-col gap-4',
     term: 'text-sm font-semibold opacity-75',
     value: 'text-current',
+    mark: 'mr-2 inline-flex size-5 shrink-0 align-[-0.25em]',
     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',
@@ -128,7 +132,7 @@ const FormHeading = heading ? 'h3' : 'h2'
                 {details.map(detail => (
                   <div class={detailsStyle === 'cards' ? s.card() : undefined}>
                     <dt class={s.term()}>{detail.label}</dt>
-                    <dd class={s.value()}>{detail.href ? <a href={safeHref(detail.href)} class={LINK}>{detail.value}</a> : detail.value}</dd>
+                    <dd class={s.value()}>{detail.iconImage && <span class={s.mark()} aria-hidden="true"><KitImage image={{ src: detail.iconImage, alt: '' }} class="size-5 object-contain" /></span>}{detail.href ? <a href={safeHref(detail.href)} class={LINK}>{detail.value}</a> : detail.value}</dd>
                   </div>
                 ))}
               </dl>
@@ -137,6 +141,7 @@ const FormHeading = heading ? 'h3' : 'h2'
               <ul class={s.details()}>
                 {details.map(detail => (
                   <li class={s.value({ class: detailsStyle === 'cards' ? s.card() : undefined })}>
+                    {detail.iconImage && <span class={s.mark()} aria-hidden="true"><KitImage image={{ src: detail.iconImage, alt: '' }} class="size-5 object-contain" /></span>}
                     {detail.label && <span class={s.term()}>{detail.label}: </span>}
                     {detail.href ? <a href={safeHref(detail.href)} class={LINK}>{detail.value}</a> : detail.value}
                   </li>

package/components/contact-form/fixtures.json

@@ -177,5 +177,30 @@
         "title": "Our studio"
       }
     }
+  },
+  {
+    "name": "detail-icon-images",
+    "props": {
+      "model": "contact-submissions",
+      "heading": "Contact",
+      "intro": "Tell us what you make and when you want to launch.",
+      "layout": "stacked",
+      "align": "start",
+      "details": [
+        {
+          "value": "Studio 4, Harbour Lane",
+          "iconImage": "/kit-fixtures/icon-1.svg"
+        },
+        {
+          "value": "hello@northwind.example",
+          "href": "mailto:hello@northwind.example",
+          "iconImage": "/kit-fixtures/icon-1.svg"
+        },
+        {
+          "value": "+351 21 000 0000",
+          "href": "tel:+351210000000"
+        }
+      ]
+    }
   }
 ]

package/components/contact-form/meta.json

@@ -7,6 +7,7 @@
     "embed"
   ],
   "shared": [
+    "KitImage.astro",
     "Section.astro",
     "measured.ts",
     "safe-url.ts",
@@ -108,6 +109,11 @@
             "type": "url",
             "label": "Link",
             "description": "A tel:, mailto: or map link for it."
+          },
+          "iconImage": {
+            "type": "image",
+            "label": "Icon image",
+            "description": "The detail's own icon as an image file (the old site's map marker or phone, moved as an svg), drawn before it."
           }
         }
       },

package/package.json

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