fix: add action list

js/components/action-links-list.js

@@ -0,0 +1,36 @@
+/**
+ * Action Links List Component
+ * A container for icon link buttons with dividers
+ */
+class ActionLinksList extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .action-links-list {
+          display: flex;
+          flex-direction: column;
+          margin-top: var(--spacing-md, 1rem);
+          gap: var(--spacing-md, 1rem);
+        }
+      </style>
+      <div class="action-links-list">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("action-links-list", ActionLinksList);

js/components/book-details.js

@@ -2,7 +2,6 @@
  * Book Details Component
  * Displays book information with cover, metadata, and purchase buttons
  */
-import { shoppingBagIcon } from "../icons/shopping-bag.js";
 
 class BookDetails extends HTMLElement {
   static get observedAttributes() {
@@ -43,7 +42,7 @@ class BookDetails extends HTMLElement {
     const favoriteBtn = this.shadowRoot?.querySelector(".favorite-btn");
 
     if (addToCartBtn) {
-      addToCartBtn.addEventListener("click", () => {
+      addToCartBtn.addEventListener("button-click", () => {
         this.dispatchEvent(
           new CustomEvent("add-to-cart", {
             bubbles: true,
@@ -59,7 +58,7 @@ class BookDetails extends HTMLElement {
     }
 
     if (ebookBtn) {
-      ebookBtn.addEventListener("click", () => {
+      ebookBtn.addEventListener("button-click", () => {
         this.dispatchEvent(
           new CustomEvent("buy-ebook", {
             bubbles: true,
@@ -325,50 +324,6 @@ class BookDetails extends HTMLElement {
           flex-direction: column;
           gap: var(--spacing-sm, 0.5rem);
         }
-
-        .btn {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: var(--spacing-sm, 0.5rem);
-          padding: 14px var(--spacing-md, 1rem);
-          border: none;
-          border-radius: var(--radius-lg, 0.75rem);
-          font-family: var(--font-family-outfit, "Outfit", sans-serif);
-          font-size: 16px;
-          font-weight: 400;
-          line-height: 24px;
-          cursor: pointer;
-          transition: opacity var(--transition-fast, 150ms ease);
-        }
-
-        .btn:hover {
-          opacity: 0.9;
-        }
-
-        .btn:active {
-          opacity: 0.8;
-        }
-
-        .btn-cart {
-          background-color: var(--color-purple, #951d51);
-          color: var(--color-text-inverse, #ffffff);
-        }
-
-        .btn-cart svg {
-          width: 20px;
-          height: 20px;
-        }
-
-        .btn-ebook {
-          background-color: var(--color-push-box-bg, #EBEEF4);
-          color: var(--color-text, #1e293b);
-        }
-
-        .btn-ebook svg {
-          width: 20px;
-          height: 20px;
-        }
       </style>
 
       <div class="book-details">
@@ -433,19 +388,15 @@ class BookDetails extends HTMLElement {
 
         <!-- Buttons -->
         <div class="buttons">
-          <button class="btn btn-cart">
-            ${shoppingBagIcon({ size: 20, color: "#ffffff" })}
-            <span>In winkelwagen</span>
-          </button>
+          <icon-cta-button class="btn-cart" icon="cart" variant="primary">
+            In winkelwagen
+          </icon-cta-button>
           ${
             this.ebookAvailable
               ? `
-          <button class="btn btn-ebook">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"></path>
-            </svg>
-            <span>Koop eBook</span>
-          </button>
+          <icon-cta-button class="btn-ebook" icon="ebook" variant="secondary">
+            Koop eBook
+          </icon-cta-button>
           `
               : ""
           }

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);

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);