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-link-button.js
+++ b/js/components/icon-link-button.js
@@ -0,0 +1,130 @@
+/**
+ * Icon Link Button Component
+ * A text link with an icon on the left
+ * Used for actions like "Add to wishlist", "Write a review"
+ */
+import { wishlistIcon } from "../icons/wishlist-icon.js";
+import { reviewIcon } from "../icons/review-icon.js";
+
+class IconLinkButton extends HTMLElement {
+  static get observedAttributes() {
+    return ["href", "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-link-button");
+    if (button && !this.hasAttribute("href")) {
+      button.addEventListener("click", () => {
+        this.dispatchEvent(
+          new CustomEvent("link-click", {
+            bubbles: true,
+            composed: true,
+          })
+        );
+      });
+    }
+  }
+
+  get href() {
+    return this.getAttribute("href") || "";
+  }
+
+  get icon() {
+    return this.getAttribute("icon") || "";
+  }
+
+  getIconHtml() {
+    switch (this.icon) {
+      case "wishlist":
+        return wishlistIcon({ size: 24, color: "currentColor" });
+      case "review":
+        return reviewIcon({ size: 24, color: "currentColor" });
+      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 iconHtml = this.getIconHtml();
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .icon-link-button {
+          display: flex;
+          align-items: center;
+          gap: var(--spacing-md, 1rem);
+          background: none;
+          border: none;
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 24px;
+          color: var(--color-text, #1e293b);
+          text-decoration: none;
+          cursor: pointer;
+          transition: opacity var(--transition-fast, 150ms ease);
+        }
+
+        .icon-link-button:hover {
+          opacity: 0.7;
+        }
+
+        .icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          width: 24px;
+          height: 24px;
+        }
+
+        .icon svg {
+          width: 24px;
+          height: 24px;
+        }
+
+        .button-text {
+          text-decoration: underline;
+          text-underline-offset: 3px;
+        }
+      </style>
+      <${tag} 
+        class="icon-link-button" 
+        ${hrefAttr}
+        ${typeAttr}
+      >
+        ${iconHtml ? `<span class="icon">${iconHtml}</span>` : ""}
+        <span class="button-text">
+          <slot></slot>
+        </span>
+      </${tag}>
+    `;
+  }
+}
+
+customElements.define("icon-link-button", IconLinkButton);