fix: add action list

2026-01-16 09:23:37 +01:00
parent 337f5dbf5b
commit 5755d43cfc
12 changed files with 761 additions and 75 deletions
--- a/js/components/icon-cta-button.js
+++ b/js/components/icon-cta-button.js
@@ -0,0 +1,152 @@
+/**
+ * Icon CTA Button Component
+ * Full-width button with icon and text, supports primary (purple) and secondary (gray) variants
+ * Extends the CTA button pattern with icon support
+ */
+import { cartIcon } from "../icons/cart-icon.js";
+import { ebookIcon } from "../icons/ebook-icon.js";
+
+class IconCtaButton extends HTMLElement {
+  static get observedAttributes() {
+    return ["href", "variant", "icon"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot) {
+      this.render();
+      this.setupEventListeners();
+    }
+  }
+
+  setupEventListeners() {
+    const button = this.shadowRoot?.querySelector(".icon-cta-button");
+    if (button && !this.hasAttribute("href")) {
+      button.addEventListener("click", () => {
+        this.dispatchEvent(
+          new CustomEvent("button-click", {
+            bubbles: true,
+            composed: true,
+          })
+        );
+      });
+    }
+  }
+
+  get href() {
+    return this.getAttribute("href") || "";
+  }
+
+  get variant() {
+    return this.getAttribute("variant") || "primary"; // 'primary' or 'secondary'
+  }
+
+  get icon() {
+    return this.getAttribute("icon") || ""; // 'cart', 'ebook', or empty
+  }
+
+  getIconHtml() {
+    const isPrimary = this.variant === "primary";
+    const iconColor = isPrimary ? "#ffffff" : "currentColor";
+
+    switch (this.icon) {
+      case "cart":
+        return cartIcon({ size: 20, color: iconColor });
+      case "ebook":
+        return ebookIcon({ size: 20, color: iconColor });
+      default:
+        return "";
+    }
+  }
+
+  render() {
+    const isLink = this.hasAttribute("href") && this.href;
+    const tag = isLink ? "a" : "button";
+    const hrefAttr = isLink ? `href="${this.href}"` : "";
+    const typeAttr = isLink ? "" : 'type="button"';
+    const isPrimary = this.variant === "primary";
+    const iconHtml = this.getIconHtml();
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+
+        .icon-cta-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: var(--spacing-sm, 0.5rem);
+          width: 100%;
+          padding: 14px var(--spacing-md, 1rem);
+          border: none;
+          border-radius: var(--radius-sm, 0.25rem);
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 24px;
+          text-decoration: none;
+          cursor: pointer;
+          transition: opacity var(--transition-fast, 150ms ease);
+        }
+
+        .icon-cta-button:hover {
+          opacity: 0.9;
+        }
+
+        .icon-cta-button:active {
+          opacity: 0.8;
+        }
+
+        .icon-cta-button.primary {
+          background-color: var(--color-purple, #951d51);
+          color: var(--color-text-inverse, #ffffff);
+        }
+
+        .icon-cta-button.secondary {
+          background-color: var(--color-push-box-bg, #EBEEF4);
+          color: var(--color-text, #1e293b);
+        }
+
+        .icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+
+        .icon svg {
+          width: 20px;
+          height: 20px;
+        }
+
+        .button-text {
+          text-decoration: none;
+        }
+      </style>
+      <${tag} 
+        class="icon-cta-button ${isPrimary ? "primary" : "secondary"}" 
+        ${hrefAttr}
+        ${typeAttr}
+      >
+        ${iconHtml ? `<span class="icon">${iconHtml}</span>` : ""}
+        <span class="button-text">
+          <slot></slot>
+        </span>
+      </${tag}>
+    `;
+  }
+}
+
+customElements.define("icon-cta-button", IconCtaButton);