@progressive-development/pd-page 1.0.4 → 1.0.5

package/dist/pd-footer/PdFooter.js

@@ -1,6 +1,10 @@
-import { css, LitElement, nothing, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { css, LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { localized, msg } from '@lit/localize';
+import { SOCIAL_PROVIDERS } from '../pd-socialmedia/pd-socialmedia-model.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-icon/pd-icon';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,39 +19,187 @@ var __decorateClass = (decorators, target, key, kind) => {
 let PdFooter = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.sections = [];
+    this.socialLinks = [];
+    this.legalLinks = [];
     this.copyright = "";
     this.version = "";
-    this.footerLinks = [];
+    this.showVersion = false;
+    this._isMobile = false;
+    this._openSections = /* @__PURE__ */ new Set();
+    this._boundMediaQueryHandler = this._handleMediaQuery.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._mediaQueryList = window.matchMedia("(max-width: 767px)");
+    this._mediaQueryList.addEventListener(
+      "change",
+      this._boundMediaQueryHandler
+    );
+    this._isMobile = this._mediaQueryList.matches;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._mediaQueryList?.removeEventListener(
+      "change",
+      this._boundMediaQueryHandler
+    );
   }
   render() {
+    const hasBrand = this.querySelector("[slot=logo]") || this.querySelector("[slot=extra]");
+    return html`
+      <footer>
+        <div class="footer-main ${classMap({ "no-brand": !hasBrand })}">
+          <div class="footer-brand">
+            <slot name="logo"></slot>
+            <slot name="extra"></slot>
+          </div>
+
+          ${this._renderSections()} ${this._renderSocialLinks()}
+        </div>
+
+        <hr class="footer-divider" aria-hidden="true" />
+
+        ${this._renderBottomBar()}
+      </footer>
+    `;
+  }
+  /* ── Section rendering ── */
+  _renderSections() {
+    if (this.sections.length === 0) return nothing;
     return html`
       <nav
-        class="footer-links"
+        class="footer-sections ${classMap({ mobile: this._isMobile })}"
         aria-label="${msg("Footer Navigation", { id: "pd.footer.nav.aria" })}"
       >
-        <ul role="list">
-          ${this.footerLinks?.map(
-      (link) => html`
-              <li
-                role="button"
-                tabindex="0"
-                data-link="${link.key}"
-                @click="${this._footerLinkClicked}"
-                @keydown="${this._handleLinkKeydown}"
-              >
-                ${link.name}
-              </li>
-            `
+        ${this._isMobile ? this.sections.map((section, i) => this._renderAccordion(section, i)) : this.sections.map(
+      (section) => html`
+                <div class="footer-section">
+                  <h3 class="section-heading">${section.heading}</h3>
+                  <ul class="section-links" role="list">
+                    ${section.links.map(
+        (link) => html`
+                        <li
+                          role="button"
+                          tabindex="0"
+                          data-link="${link.key}"
+                          @click="${this._footerLinkClicked}"
+                          @keydown="${this._handleLinkKeydown}"
+                        >
+                          ${link.name}
+                        </li>
+                      `
+      )}
+                  </ul>
+                </div>
+              `
     )}
-        </ul>
       </nav>
-
-      <div class="bottom-line">
-        <div>
-          ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : nothing}
-          ${this.version ? html`<span class="version">${this.version}</span>` : nothing}
+    `;
+  }
+  _renderAccordion(section, index) {
+    const isOpen = this._openSections.has(index);
+    return html`
+      <div class="footer-section-mobile">
+        <div
+          class="section-trigger"
+          role="button"
+          tabindex="0"
+          aria-expanded="${isOpen}"
+          @click="${() => this._toggleSection(index)}"
+          @keydown="${(e) => this._handleSectionKeydown(e, index)}"
+        >
+          <span class="section-heading">${section.heading}</span>
+          <pd-icon
+            icon="${pdIcons.ICON_TOGGLE_COLLAPSE}"
+            ?activeIcon="${isOpen}"
+            aria-hidden="true"
+          ></pd-icon>
+        </div>
+        <div class="section-content ${classMap({ open: isOpen })}">
+          <div class="section-content-inner">
+            <ul class="section-links" role="list">
+              ${section.links.map(
+      (link) => html`
+                  <li
+                    role="button"
+                    tabindex="${isOpen ? "0" : "-1"}"
+                    data-link="${link.key}"
+                    @click="${this._footerLinkClicked}"
+                    @keydown="${this._handleLinkKeydown}"
+                  >
+                    ${link.name}
+                  </li>
+                `
+    )}
+            </ul>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  /* ── Social links ── */
+  _renderSocialLinks() {
+    if (this.socialLinks.length === 0) return nothing;
+    return html`
+      <div
+        class="footer-social"
+        role="list"
+        aria-label="${msg("Social Media", { id: "pd.footer.social.aria" })}"
+      >
+        ${this.socialLinks.map((entry) => {
+      const provider = this._findProvider(entry.providerId);
+      const url = this._toSocialUrl(provider, entry.value);
+      const label = entry.label || provider?.label || entry.providerId;
+      return html`
+            <a
+              role="listitem"
+              href="${url || "#"}"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="${label}"
+              class="social-link"
+              title="${label}"
+              >${provider?.icon ?? "🔗"}</a
+            >
+          `;
+    })}
+      </div>
+    `;
+  }
+  /* ── Bottom bar ── */
+  _renderBottomBar() {
+    return html`
+      <div class="bottom-bar">
+        <div class="bottom-bar-left">
+          ${this.copyright ? html`<span class="copyright">&copy; ${this.copyright}</span>` : nothing}
+          ${this.showVersion && this.version ? html`<span class="version">${this.version}</span>` : nothing}
         </div>
 
+        ${this.legalLinks.length > 0 ? html`
+              <nav
+                class="bottom-bar-links"
+                aria-label="${msg("Legal Navigation", {
+      id: "pd.footer.legal.aria"
+    })}"
+              >
+                <ul role="list">
+                  ${this.legalLinks.map(
+      (link) => html`
+                      <li
+                        role="button"
+                        tabindex="0"
+                        data-link="${link.key}"
+                        @click="${this._footerLinkClicked}"
+                        @keydown="${this._handleLinkKeydown}"
+                      >
+                        ${link.name}
+                      </li>
+                    `
+    )}
+                </ul>
+              </nav>
+            ` : nothing}
         ${this.madeBy ? html`<span
               class="made-by"
               role="button"
@@ -59,24 +211,44 @@ let PdFooter = class extends LitElement {
       </div>
     `;
   }
-  /**
-   * Handles keyboard events on footer links.
-   * Activates on Enter or Space key.
-   */
+  /* ── Event handlers ── */
+  _footerLinkClicked(e) {
+    const target = e.currentTarget;
+    const linkKey = target.dataset.link;
+    const allLinks = [
+      ...this.sections.flatMap((s) => s.links),
+      ...this.legalLinks
+    ];
+    const linkObj = allLinks.find((fl) => fl.key === linkKey);
+    if (linkObj) {
+      this.dispatchEvent(
+        new CustomEvent("footer-link", {
+          detail: { linkObj },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
   _handleLinkKeydown(e) {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       this._footerLinkClicked(e);
     }
   }
-  /**
-   * Handles keyboard events on madeBy element.
-   * Activates on Enter or Space key.
-   */
-  _handleMadeByKeydown(e) {
+  _toggleSection(index) {
+    const next = new Set(this._openSections);
+    if (next.has(index)) {
+      next.delete(index);
+    } else {
+      next.add(index);
+    }
+    this._openSections = next;
+  }
+  _handleSectionKeydown(e, index) {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      this._clickMadeBy();
+      this._toggleSection(index);
     }
   }
   _clickMadeBy() {
@@ -89,76 +261,229 @@ let PdFooter = class extends LitElement {
       }
     }
   }
-  _footerLinkClicked(e) {
-    const target = e.currentTarget;
-    const linkKey = target.dataset.link;
-    const linkObj = this.footerLinks?.find((fl) => fl.key === linkKey);
-    if (linkObj) {
-      this.dispatchEvent(
-        new CustomEvent("footer-link", {
-          detail: { linkObj },
-          bubbles: true,
-          composed: true
-        })
-      );
+  _handleMadeByKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._clickMadeBy();
     }
   }
+  /* ── Helpers ── */
+  _handleMediaQuery(e) {
+    this._isMobile = e.matches;
+  }
+  _findProvider(id) {
+    return SOCIAL_PROVIDERS.find((p) => p.id === id);
+  }
+  _toSocialUrl(provider, raw) {
+    const v = raw?.trim();
+    if (!v) return null;
+    if (provider?.toUrl) return provider.toUrl(v);
+    if (/^https?:\/\//i.test(v)) return v;
+    return null;
+  }
 };
 PdFooter.styles = [
   css`
       :host {
         display: flex;
-        flex-flow: column;
-        justify-content: end;
+        flex-direction: column;
         background-color: var(--pd-footer-bg-col, var(--pd-default-col));
-        width: 100%;
-        white-space: nowrap;
-      }
-
-      .footer-links {
-        display: flex;
-        align-items: center;
-        justify-content: right;
-        height: 100%;
         color: var(--pd-footer-font-col, var(--pd-on-primary-col));
         font-family: var(
           --pd-footer-font-family,
           var(--pd-default-font-link-family)
         );
-        font-size: var(--pd-footer-font-size, 1.1em);
+        font-size: var(--pd-footer-font-size, 1em);
+        width: 100%;
       }
 
-      .footer-links ul {
+      /* ── Main content area ── */
+
+      .footer-main {
+        display: grid;
+        grid-template-areas:
+          "brand sections"
+          "social social";
+        grid-template-columns: auto 1fr;
+        row-gap: var(--pd-spacing-sm);
+        column-gap: var(--pd-footer-section-gap, var(--pd-spacing-lg));
+        max-width: var(
+          --pd-footer-max-width,
+          var(--pd-content-max-width, 1170px)
+        );
+        width: 100%;
+        margin: 0 auto;
+        padding: var(--pd-spacing-lg) var(--pd-spacing-md) var(--pd-spacing-sm);
+        box-sizing: border-box;
+      }
+
+      .footer-main.no-brand {
+        grid-template-areas:
+          "sections"
+          "social";
+        grid-template-columns: 1fr;
+      }
+
+      .footer-brand {
+        grid-area: brand;
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
+        gap: var(--pd-spacing-md);
+      }
+
+      /* ── Sections (desktop grid) ── */
+
+      .footer-sections {
+        grid-area: sections;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: var(--pd-footer-section-gap, var(--pd-spacing-lg));
+      }
+
+      .section-heading {
+        font-size: var(--pd-footer-heading-font-size, 1.1em);
+        font-weight: var(--pd-footer-heading-font-weight, bold);
+        margin: 0 0 var(--pd-spacing-sm) 0;
+        color: var(
+          --pd-footer-heading-font-col,
+          var(--pd-footer-font-col, var(--pd-on-primary-col))
+        );
+      }
+
+      .section-links {
         list-style: none;
-        gap: var(--pd-spacing-lg);
         margin: 0;
-        padding: var(--pd-spacing-lg);
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-xs);
       }
 
-      .footer-links li {
+      .section-links li {
         cursor: pointer;
+        font-size: var(--pd-footer-link-font-size, 0.95em);
+        padding: var(--pd-spacing-xs) 0;
+        opacity: 0.85;
+        transition:
+          opacity 0.15s ease,
+          color 0.15s ease;
+      }
+
+      .section-links li:hover {
+        color: var(--pd-footer-link-hover-col, var(--pd-default-hover-col));
+        opacity: 1;
+      }
+
+      .section-links li:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm);
       }
 
-      .footer-links li:hover {
-        color: var(--pd-default-hover-col);
+      /* ── Mobile accordion ── */
+
+      .footer-sections.mobile {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
       }
 
-      .footer-links li:focus-visible {
+      .section-trigger {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--pd-spacing-sm) 0;
+        cursor: pointer;
+        border-bottom: 1px solid
+          var(--pd-footer-divider-col, rgba(255, 255, 255, 0.15));
+        user-select: none;
+      }
+
+      .section-trigger:focus-visible {
         outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
         outline-offset: 2px;
         border-radius: var(--pd-radius-sm);
       }
 
-      .bottom-line {
+      .section-trigger pd-icon {
+        --pd-icon-size: 1.2rem;
+        --pd-icon-col: var(--pd-footer-font-col, var(--pd-on-primary-col));
+        transition: transform 0.25s ease;
+      }
+
+      .section-content {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 0.25s ease;
+      }
+
+      .section-content.open {
+        grid-template-rows: 1fr;
+      }
+
+      .section-content-inner {
+        overflow: hidden;
+      }
+
+      .section-content.open .section-content-inner {
+        padding-bottom: var(--pd-spacing-sm);
+      }
+
+      /* ── Social icons ── */
+
+      .footer-social {
+        grid-area: social;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--pd-footer-social-gap, var(--pd-spacing-sm));
+        align-items: center;
+      }
+
+      .social-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--pd-footer-social-icon-size, 2.5rem);
+        height: var(--pd-footer-social-icon-size, 2.5rem);
+        font-size: calc(var(--pd-footer-social-icon-size, 2.5rem) * 0.65);
+        text-decoration: none;
+        border-radius: var(--pd-radius-md);
+        transition:
+          transform 0.2s ease,
+          opacity 0.2s ease;
+        min-width: 44px;
+        min-height: 44px;
+      }
+
+      .social-link:hover {
+        transform: scale(1.15);
+        opacity: 0.8;
+      }
+
+      .social-link:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
+        outline-offset: 2px;
+      }
+
+      /* ── Divider ── */
+
+      .footer-divider {
+        border: none;
+        border-top: 1px solid
+          var(--pd-footer-divider-col, rgba(255, 255, 255, 0.15));
+        margin: 0;
+      }
+
+      /* ── Bottom bar ── */
+
+      .bottom-bar {
         background-color: var(
           --pd-footer-bottom-col,
           var(--pd-default-light-col)
         );
         font-size: var(--pd-footer-bottom-font-size, 0.9em);
         color: var(--pd-footer-bottom-font-col, var(--pd-default-dark-col));
-        padding: var(--pd-spacing-sm);
+        padding: var(--pd-spacing-sm) var(--pd-spacing-md);
         display: flex;
         gap: var(--pd-spacing-md);
         flex-wrap: wrap;
@@ -166,22 +491,56 @@ PdFooter.styles = [
         align-items: center;
       }
 
+      .bottom-bar-left {
+        display: flex;
+        gap: var(--pd-spacing-sm);
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
       .copyright {
         font-weight: bold;
       }
 
       .version {
         font-weight: normal;
+        opacity: 0.7;
+      }
+
+      .bottom-bar-links ul {
+        display: flex;
+        list-style: none;
+        gap: var(--pd-spacing-md);
+        margin: 0;
+        padding: 0;
+        flex-wrap: wrap;
+      }
+
+      .bottom-bar-links li {
+        cursor: pointer;
+        opacity: 0.85;
+      }
+
+      .bottom-bar-links li:hover {
+        opacity: 1;
+        text-decoration: underline;
+      }
+
+      .bottom-bar-links li:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm);
       }
 
       .made-by {
         cursor: pointer;
         font-style: italic;
-        white-space: normal;
+        font-size: 0.85em;
+        opacity: 0.7;
       }
 
       .made-by:hover {
-        color: var(--pd-default-col);
+        opacity: 1;
       }
 
       .made-by:focus-visible {
@@ -189,20 +548,63 @@ PdFooter.styles = [
         outline-offset: 2px;
         border-radius: var(--pd-radius-sm);
       }
+
+      /* ── Mobile adjustments ── */
+
+      @media (max-width: 767px) {
+        .footer-main {
+          grid-template-areas:
+            "brand"
+            "sections"
+            "social";
+          grid-template-columns: 1fr;
+          padding: var(--pd-spacing-md) var(--pd-spacing-sm);
+        }
+
+        .bottom-bar {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: var(--pd-spacing-xs);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .section-content {
+          transition: none;
+        }
+        .social-link {
+          transition: none;
+        }
+      }
     `
 ];
+__decorateClass([
+  property({ type: Array })
+], PdFooter.prototype, "sections", 2);
+__decorateClass([
+  property({ type: Array })
+], PdFooter.prototype, "socialLinks", 2);
+__decorateClass([
+  property({ type: Array })
+], PdFooter.prototype, "legalLinks", 2);
 __decorateClass([
   property({ type: String })
 ], PdFooter.prototype, "copyright", 2);
 __decorateClass([
   property({ type: String })
 ], PdFooter.prototype, "version", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-version" })
+], PdFooter.prototype, "showVersion", 2);
 __decorateClass([
   property({ type: Object })
 ], PdFooter.prototype, "madeBy", 2);
 __decorateClass([
-  property({ type: Array })
-], PdFooter.prototype, "footerLinks", 2);
+  state()
+], PdFooter.prototype, "_isMobile", 2);
+__decorateClass([
+  state()
+], PdFooter.prototype, "_openSections", 2);
 PdFooter = __decorateClass([
   localized()
 ], PdFooter);