feature/book-page (#4)

Co-authored-by: Tim Rijkse <trijkse@gmail.com>
Reviewed-on: #4

js/components/book-description.js

@@ -0,0 +1,53 @@
+/**
+ * Book Description Component
+ * Displays formatted book description text
+ */
+class BookDescription extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .description {
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 28px;
+          color: var(--color-text, #1e293b);
+        }
+
+        ::slotted(p) {
+          margin: 0 0 var(--spacing-md, 1rem) 0;
+        }
+
+        ::slotted(p:last-child) {
+          margin-bottom: 0;
+        }
+
+        ::slotted(.quote) {
+          font-style: italic;
+        }
+
+        ::slotted(.author) {
+          font-weight: 400;
+        }
+      </style>
+      <div class="description">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("book-description", BookDescription);