@contentrain/astro-kit 0.13.0 → 0.14.0

package/catalog.json

@@ -1606,6 +1606,22 @@
           ],
           "default": "inherit",
           "description": "The lead's alignment. inherit: as the layout sets it. start: at the start edge and across the column, under a centred heading (a centred heading widget over a left-aligned text editor in one container)."
+        },
+        "actionsAlign": {
+          "options": [
+            "inherit",
+            "start"
+          ],
+          "default": "inherit",
+          "description": "The buttons' alignment. inherit: as the layout sets it. start: at the start edge, under centred text (a WordPress buttons block with no justification inside a centred cover)."
+        },
+        "width": {
+          "options": [
+            "full",
+            "content"
+          ],
+          "default": "full",
+          "description": "Layout cover only. full: the image runs the full window width. content: the cover sits in the reading column, as a WordPress cover block that is not alignfull does under the page title."
         }
       },
       "props": {

package/components/hero/Hero.astro

@@ -30,13 +30,22 @@ const hero = tv({
     // The lead's own alignment: `start` keeps it at the start edge, across the column, under a centred heading
     // (Hello centres the heading widget and leaves the text editor left in the same container).
     leadAlign: { inherit: {}, start: {} },
+    // The buttons' own alignment: `start` keeps them at the start edge under centred text (a WordPress buttons block
+    // with no justification sits left inside a cover whose heading and paragraph are centred).
+    actionsAlign: { inherit: {}, start: {} },
+    // How wide a cover runs: the full window, or the reading column — a WordPress cover block that is not
+    // alignfull sits in the content column, the page title above it.
+    width: { full: {}, content: {} },
   },
   compoundVariants: [
+    // After the layout's own heights, so a boxed cover keeps WordPress's 430px default.
+    { layout: 'cover', width: 'content', class: { grid: 'min-h-[20rem] md:min-h-[26.875rem]' } },
     { layout: 'cover', align: 'center', class: { grid: 'justify-items-center', copy: 'mx-auto items-center text-center', lead: 'mx-auto', actions: 'justify-center' } },
     // After the centring rules, so the lead leaves them.
     { leadAlign: 'start', class: { lead: 'mx-0 max-w-none self-stretch text-start' } },
+    { actionsAlign: 'start', class: { actions: 'justify-start self-stretch' } },
   ],
-  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit' },
+  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit', actionsAlign: 'inherit', width: 'full' },
 })
 
 interface Props {
@@ -52,17 +61,40 @@ interface Props {
   align?: 'start' | 'center' | undefined
   /** The lead's alignment: as the layout sets it, or at the start edge under a centred heading. */
   leadAlign?: 'inherit' | 'start' | undefined
+  /** The buttons' alignment: as the layout sets it, or at the start edge under centred text. */
+  actionsAlign?: 'inherit' | 'start' | undefined
+  /** A cover's width: the full window (the default) or the reading column; other layouts ignore it. */
+  width?: 'full' | 'content' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   id?: string | undefined
 }
 
-const { heading, level = 1, eyebrow, lead, actions = [], image, layout = 'split', align, leadAlign, tone, id } = Astro.props
-const s = hero({ layout, align, leadAlign, tone })
+const { heading, level = 1, eyebrow, lead, actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id } = Astro.props
+const s = hero({ layout, align, leadAlign, actionsAlign, width, tone })
 const Heading = level === 1 ? 'h1' : 'h2'
 const headingId = id ? `${id}-title` : undefined
 const cover = layout === 'cover' && image
 ---
-{cover
+{cover && width === 'content'
+  ? (
+    <Section tone="none" spacing="sm" width="prose" id={id} aria-labelledby={headingId}>
+      <div class="relative isolate overflow-hidden bg-ink text-surface">
+        <KitImage image={image} priority sizes="(min-width: 768px) 46rem, 100vw" class="absolute inset-0 -z-10 h-full w-full object-cover" />
+        <div class="absolute inset-0 -z-10 bg-ink/60" aria-hidden="true" />
+        <div class="px-6 py-10 md:px-10">
+          <div class={s.grid()}>
+            <div class={s.copy()}>
+              {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
+              <Heading id={headingId} class={s.heading()}>{heading}</Heading>
+              {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
+              {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  )
+  : cover
   ? (
     <Section tone="inverse" spacing="none" width="none" id={id} aria-labelledby={headingId} class="relative isolate overflow-hidden">
       <KitImage image={image} priority sizes="100vw" class="absolute inset-0 -z-10 h-full w-full object-cover" />

package/components/hero/fixtures.json

@@ -122,5 +122,50 @@
       "leadAlign": "start",
       "level": 2
     }
+  },
+  {
+    "name": "cover-content",
+    "props": {
+      "heading": "The long way round",
+      "lead": "A year of trains across Europe, one station at a time.",
+      "layout": "cover",
+      "actions": [
+        {
+          "label": "Read the series",
+          "href": "/series/long-way/"
+        }
+      ],
+      "image": {
+        "src": "/kit-fixtures/photo-3.svg",
+        "alt": "",
+        "width": 1600,
+        "height": 900
+      },
+      "width": "content",
+      "level": 2
+    }
+  },
+  {
+    "name": "cover-content-actions-start",
+    "props": {
+      "heading": "The long way round",
+      "lead": "A year of trains across Europe, one station at a time.",
+      "layout": "cover",
+      "actions": [
+        {
+          "label": "Read the series",
+          "href": "/series/long-way/"
+        }
+      ],
+      "image": {
+        "src": "/kit-fixtures/photo-3.svg",
+        "alt": "",
+        "width": 1600,
+        "height": 900
+      },
+      "width": "content",
+      "level": 2,
+      "actionsAlign": "start"
+    }
   }
 ]

package/components/hero/meta.json

@@ -45,6 +45,22 @@
       ],
       "default": "inherit",
       "description": "The lead's alignment. inherit: as the layout sets it. start: at the start edge and across the column, under a centred heading (a centred heading widget over a left-aligned text editor in one container)."
+    },
+    "actionsAlign": {
+      "options": [
+        "inherit",
+        "start"
+      ],
+      "default": "inherit",
+      "description": "The buttons' alignment. inherit: as the layout sets it. start: at the start edge, under centred text (a WordPress buttons block with no justification inside a centred cover)."
+    },
+    "width": {
+      "options": [
+        "full",
+        "content"
+      ],
+      "default": "full",
+      "description": "Layout cover only. full: the image runs the full window width. content: the cover sits in the reading column, as a WordPress cover block that is not alignfull does under the page title."
     }
   },
   "props": {

package/mapping/gutenberg.json

@@ -218,7 +218,8 @@
       "component": "hero",
       "variant": {
         "layout": "cover",
-        "align": "class:is-position-*-left=start|center"
+        "align": "class:is-position-*-left=start|center",
+        "width": "class:alignfull=full|content"
       },
       "props": {
         "heading": "dom:h1,h2",

package/package.json

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