@bettercms-ai/astro 0.16.0 → 0.18.0

package/components/BcmsBlocks.astro

@@ -26,7 +26,7 @@
  * actually contains that block (mirrors render-page.ts's `ctx.flags` gating).
  */
 import type { ContentBlock } from "@bettercms-ai/types";
-import { blockStyleToCss, componentInstanceAddresses } from "@bettercms-ai/types";
+import { blockStyleToCss, buttonIconOf, buttonIconSvg, buttonVariantOf, componentInstanceAddresses, withButtonLookProps } from "@bettercms-ai/types";
 import { bind, bindProps } from "../dist/bindings.js";
 import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
 import { applyOverrides } from "@bettercms-ai/ui/resolve";
@@ -123,7 +123,8 @@ function resolveComponent(
   if (depth >= MAX_COMPONENT_DEPTH || seen.includes(def.id)) return null;
   const resolved = applyOverrides<ContentBlock>(
     def.blockJson,
-    def.props ?? [],
+    // A Button's instance may override its look too.
+    withButtonLookProps(def),
     (p.overrides as Record<string, unknown>) ?? {},
   );
   // `props` comes back too: the caller needs the DECLARATION (which block each prop drives) to
@@ -313,13 +314,16 @@ const pass = { forms, components, turnstileSiteKey, nested: true, fieldAddresses
       case "button":
         return (
           <a
-            class={`bcms-btn bcms-btn-${p.variant === "secondary" ? "secondary" : "primary"}${p.size === "sm" || p.size === "lg" ? ` bcms-btn-${p.size}` : ""}${p.fullWidth === true ? " bcms-btn-full" : ""}`}
+            class={`bcms-btn bcms-btn-${buttonVariantOf(p.variant)}${p.size === "sm" || p.size === "lg" ? ` bcms-btn-${p.size}` : ""}${p.fullWidth === true ? " bcms-btn-full" : ""}`}
             href={p.href ?? "#"}
+            {...(p.newTab === true ? { target: "_blank", rel: "noopener noreferrer" } : {})}
             {...bind(block.id, "text", "text", bctx)}
             {...bindProps(block.id, [{ prop: "href", kind: "url", attr: "href", present: p.href != null }], bctx)}
             {...blockAttrs}
           >
+            {buttonIconOf(p.icon) && <Fragment set:html={buttonIconSvg(buttonIconOf(p.icon)!, "bcms-btn-icon")} />}
             {p.text}
+            {p.arrow === true && <Fragment set:html={buttonIconSvg("arrow-right", "bcms-btn-arrow")} />}
           </a>
         );
       case "spacer":

package/components/BcmsButton.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * <BcmsButton> — render a `button` field ({ label, href, variant?, size?, arrow?, icon?,
+ * newTab? }) as one editable button, the way the BetterCMS visual editor and in-place publishing
+ * expect to find it:
+ *
+ *   <a data-bcms-button="<path>" data-variant data-size href [target rel] data-bcms-props="<path>.href|url|href">
+ *     [<svg class="bcms-btn-icon">]<span data-bcms-field="<path>.label">Label</span>[<svg class="bcms-btn-arrow">]
+ *   </a>
+ *
+ * Style it by `data-variant` (primary · secondary · tertiary · brand · dark · light · outline ·
+ * link) and `data-size` (sm · md · lg) in your own CSS: the editor repaints those attributes as the
+ * author picks, and publishing writes them into the live page, so your stylesheet decides what a
+ * look looks like. `class` is passed through untouched.
+ *
+ *   <BcmsButton path="hero.cta" value={page.hero.cta} class="btn" />
+ */
+import { formatPropsAttribute, readButtonValue, buttonIconSvg } from "@bettercms-ai/types";
+
+interface Props {
+  /** The field path in the editor grammar, e.g. `cta` or `hero.cta`. */
+  path: string;
+  /** The stored value. Missing keys render as the defaults (Primary, medium, no arrow, no icon). */
+  value: unknown;
+  class?: string;
+}
+const { path, value, class: className } = Astro.props;
+const b = readButtonValue(value);
+---
+{b.label && (
+  <a
+    class={className}
+    href={b.href || "#"}
+    data-bcms-button={path}
+    data-variant={b.variant}
+    data-size={b.size}
+    data-bcms-props={formatPropsAttribute([{ address: `${path}.href`, kind: "url", attr: "href" }])}
+    {...(b.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+  >
+    {b.icon && <Fragment set:html={buttonIconSvg(b.icon, "bcms-btn-icon")} />}
+    <span data-bcms-field={`${path}.label`} data-bcms-kind="text">{b.label}</span>
+    {b.arrow && <Fragment set:html={buttonIconSvg("arrow-right", "bcms-btn-arrow")} />}
+  </a>
+)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "type": "module",
   "description": "The BetterCMS adapter for Astro — a `bettercms()` integration, a `bettercms:client` virtual module, typed content loaders, draft preview, and native .astro rendering components.",
   "main": "./dist/index.js",
@@ -33,6 +33,7 @@
     "./components/BcmsBlocks.astro": "./components/BcmsBlocks.astro",
     "./components/BcmsLiveBlocks.astro": "./components/BcmsLiveBlocks.astro",
     "./components/BcmsField.astro": "./components/BcmsField.astro",
+    "./components/BcmsButton.astro": "./components/BcmsButton.astro",
     "./components/BcmsForm.astro": "./components/BcmsForm.astro",
     "./components/BcmsSearch.astro": "./components/BcmsSearch.astro",
     "./components/BcmsImage.astro": "./components/BcmsImage.astro",
@@ -54,11 +55,11 @@
   },
   "dependencies": {
     "@bettercms-ai/image-url": "^0.3.0",
-    "@bettercms-ai/next": "^0.15.0",
+    "@bettercms-ai/next": "^0.17.0",
     "@bettercms-ai/richtext": "^0.7.0",
     "@bettercms-ai/sdk": "^1.24.0",
-    "@bettercms-ai/types": "^1.25.0",
-    "@bettercms-ai/ui": "^0.10.0",
+    "@bettercms-ai/types": "^1.27.0",
+    "@bettercms-ai/ui": "^0.12.0",
     "libphonenumber-js": "^1.13.13"
   },
   "peerDependencies": {