astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/ecommerce/StoreHeader.astro

@@ -0,0 +1,446 @@
+---
+/**
+ * StoreHeader — Shop navigation bar: brand, menu with category dropdowns, search,
+ * account link and a cart button whose badge follows the cart store live.
+ *
+ * @param {string} brand - Store name. Default 'Nova Store'.
+ * @param {string} brandHref - Brand link. Default '/'.
+ * @param {Array} links - Menu items `{ label, href, children?: { label, href, description? }[] }`.
+ * @param {string} searchAction - Search form action URL. Default '#'.
+ * @param {string} searchPlaceholder - Search placeholder. Default 'Search products'.
+ * @param {string} accountHref - Account link (hidden when empty). Default '#'.
+ * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
+ * @param {string} cartLabel - Accessible label for the cart button. Default 'Cart'.
+ * @param {string} currentHref - Marks the matching menu link with aria-current.
+ * @param {boolean} sticky - Stick to the top on scroll. Default true.
+ * @param {string} variant - Style (glass|solid|transparent). Default 'glass'.
+ * @param {string} size - Height (sm|md|lg). Default 'md'.
+ * @param {boolean} themeToggle - Show a light/dark toggle (sets html[data-theme], remembered in localStorage). Default true.
+ * @param {string} id - Base id for inner elements (unique per page). Default 'store-header'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: dropdowns are disclosure buttons (aria-expanded) closed with Escape or outside click;
+ * the mobile menu is a disclosure too; the cart badge count is part of the button label.
+ * Clicking the cart button dispatches `ack:cart-open`, which CartDrawer listens to.
+ */
+interface ChildLink { label: string; href: string; description?: string }
+interface NavLink { label: string; href: string; children?: ChildLink[] }
+
+interface Props {
+  brand?: string;
+  brandHref?: string;
+  links?: NavLink[];
+  searchAction?: string;
+  searchPlaceholder?: string;
+  accountHref?: string;
+  cartKey?: string;
+  cartLabel?: string;
+  currentHref?: string;
+  sticky?: boolean;
+  variant?: 'glass' | 'solid' | 'transparent';
+  size?: 'sm' | 'md' | 'lg';
+  themeToggle?: boolean;
+  id?: string;
+  className?: string;
+}
+
+const {
+  brand = 'Nova Store',
+  brandHref = '/',
+  links = [
+    {
+      label: 'Shop',
+      href: '#',
+      children: [
+        { label: 'Audio', href: '#', description: 'Headphones & speakers' },
+        { label: 'Wearables', href: '#', description: 'Watches & bands' },
+        { label: 'Bags', href: '#', description: 'Backpacks & totes' },
+        { label: 'Home', href: '#', description: 'Lamps, mugs & plants' },
+      ],
+    },
+    { label: 'New in', href: '#' },
+    { label: 'Sale', href: '#' },
+    { label: 'Journal', href: '#' },
+  ],
+  searchAction = '#',
+  searchPlaceholder = 'Search products',
+  accountHref = '#',
+  cartKey = 'ack-cart',
+  cartLabel = 'Cart',
+  currentHref,
+  sticky = true,
+  variant = 'glass',
+  size = 'md',
+  themeToggle = true,
+  id = 'store-header',
+  className = '',
+} = Astro.props;
+
+const uid = id;
+---
+
+<header class:list={['store-header', `store-header--${variant}`, `store-header--${size}`, { 'store-header--sticky': sticky }, className]} data-store-header>
+  <div class="store-header__inner">
+    {links.length > 0 && (
+    <button class="store-header__toggle" type="button" aria-expanded="false" aria-controls={`${uid}-nav`} aria-label="Menu" data-menu-toggle>
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path class="l1" d="M4 7h16"/><path class="l2" d="M4 12h16"/><path class="l3" d="M4 17h16"/></svg>
+    </button>
+    )}
+
+    <a class="store-header__brand" href={brandHref}>
+      <span class="store-header__logo" aria-hidden="true">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 3 7v10l9 5 9-5V7z"/><path d="m3 7 9 5 9-5M12 12v10"/></svg>
+      </span>
+      <span>{brand}</span>
+    </a>
+
+    {links.length > 0 ? (
+    <nav class="store-header__nav" id={`${uid}-nav`} aria-label="Main" data-menu>
+      <ul class="store-header__links">
+        {links.map((link, i) => (
+          <li class="store-header__item">
+            {link.children?.length ? (
+              <>
+                <button class="store-header__link store-header__link--parent" type="button" aria-expanded="false" aria-controls={`${uid}-dd-${i}`} data-dropdown-toggle>
+                  {link.label}
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
+                </button>
+                <div class="store-header__dropdown" id={`${uid}-dd-${i}`} hidden data-dropdown>
+                  <ul>
+                    {link.children.map((child) => (
+                      <li>
+                        <a href={child.href} aria-current={currentHref === child.href ? 'page' : undefined}>
+                          <strong>{child.label}</strong>
+                          {child.description && <span>{child.description}</span>}
+                        </a>
+                      </li>
+                    ))}
+                    <li class="store-header__dropdown-all"><a href={link.href}>View all →</a></li>
+                  </ul>
+                </div>
+              </>
+            ) : (
+              <a class="store-header__link" href={link.href} aria-current={currentHref === link.href ? 'page' : undefined}>{link.label}</a>
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
+    ) : <div class="store-header__nav" />}
+
+    <div class="store-header__actions">
+      <form class="store-header__search" role="search" action={searchAction}>
+        <label class="sr-only" for={`${uid}-q`}>{searchPlaceholder}</label>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
+        <input id={`${uid}-q`} name="q" type="search" placeholder={searchPlaceholder} autocomplete="off" />
+      </form>
+      {themeToggle && (
+        <button class="store-header__icon store-header__theme" type="button" aria-label="Switch to light theme" data-theme-toggle>
+          <svg class="i-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+          <svg class="i-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
+        </button>
+      )}
+      {accountHref && (
+        <a class="store-header__icon" href={accountHref} aria-label="Account">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
+        </a>
+      )}
+      <button class="store-header__icon store-header__cart" type="button" data-cart-open data-cart-key={cartKey} data-cart-label={cartLabel} aria-label={cartLabel}>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 7h12l-1 13H7z"/><path d="M9 7V6a3 3 0 0 1 6 0v1"/></svg>
+        <span class="store-header__count" data-cart-count hidden aria-hidden="true">0</span>
+      </button>
+    </div>
+  </div>
+</header>
+
+<script>
+  import { createCart } from './cart-store';
+
+  document.querySelectorAll<HTMLElement>('[data-store-header]:not([data-bound])').forEach((header) => {
+    header.dataset.bound = '';
+    const toggle = header.querySelector<HTMLButtonElement>('[data-menu-toggle]');
+    const menu = header.querySelector<HTMLElement>('[data-menu]');
+    const dropdownToggles = Array.from(header.querySelectorAll<HTMLButtonElement>('[data-dropdown-toggle]'));
+
+    const closeDropdowns = (except?: HTMLButtonElement) => {
+      dropdownToggles.forEach((btn) => {
+        if (btn === except) return;
+        btn.setAttribute('aria-expanded', 'false');
+        const panel = document.getElementById(btn.getAttribute('aria-controls') || '');
+        if (panel) panel.hidden = true;
+      });
+    };
+
+    dropdownToggles.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const open = btn.getAttribute('aria-expanded') !== 'true';
+        closeDropdowns(btn);
+        btn.setAttribute('aria-expanded', String(open));
+        const panel = document.getElementById(btn.getAttribute('aria-controls') || '');
+        if (panel) panel.hidden = !open;
+      });
+    });
+
+    toggle?.addEventListener('click', () => {
+      const open = toggle.getAttribute('aria-expanded') !== 'true';
+      toggle.setAttribute('aria-expanded', String(open));
+      menu?.classList.toggle('is-open', open);
+    });
+
+    document.addEventListener('click', (e) => {
+      if (!header.contains(e.target as Node)) closeDropdowns();
+    });
+    document.addEventListener('keydown', (e) => {
+      if (e.key !== 'Escape') return;
+      const openBtn = dropdownToggles.find((b) => b.getAttribute('aria-expanded') === 'true');
+      closeDropdowns();
+      openBtn?.focus();
+      if (toggle?.getAttribute('aria-expanded') === 'true') {
+        toggle.setAttribute('aria-expanded', 'false');
+        menu?.classList.remove('is-open');
+        toggle.focus();
+      }
+    });
+
+    const themeBtn = header.querySelector<HTMLButtonElement>('[data-theme-toggle]');
+    if (themeBtn) {
+      const root = document.documentElement;
+      const current = () => (root.dataset.theme === 'light' ? 'light' : 'dark');
+      const label = () => themeBtn.setAttribute('aria-label', current() === 'light' ? 'Switch to dark theme' : 'Switch to light theme');
+      label();
+      themeBtn.addEventListener('click', () => {
+        const next = current() === 'light' ? 'dark' : 'light';
+        root.dataset.theme = next;
+        try { window.localStorage.setItem('ack-theme', next); } catch { /* ignore */ }
+        label();
+        document.dispatchEvent(new CustomEvent('ack:theme', { detail: { theme: next } }));
+      });
+    }
+
+    const cartBtn = header.querySelector<HTMLButtonElement>('[data-cart-open]');
+    const countEl = header.querySelector<HTMLElement>('[data-cart-count]');
+    if (cartBtn && countEl) {
+      const cart = createCart(cartBtn.dataset.cartKey);
+      const label = cartBtn.dataset.cartLabel || 'Cart';
+      const render = () => {
+        const n = cart.count();
+        countEl.textContent = n > 99 ? '99+' : String(n);
+        countEl.hidden = n === 0;
+        cartBtn.setAttribute('aria-label', n ? `${label} (${n})` : label);
+      };
+      render();
+      cart.subscribe((_items) => {
+        render();
+        countEl.classList.remove('is-bump');
+        void countEl.offsetWidth;
+        countEl.classList.add('is-bump');
+      });
+      cartBtn.addEventListener('click', () => {
+        document.dispatchEvent(new CustomEvent('ack:cart-open', { detail: { key: cart.key, trigger: cartBtn } }));
+      });
+    }
+  });
+</script>
+
+<style>
+  .store-header {
+    container-type: inline-size;
+    --sh-h: 68px;
+    position: relative;
+    z-index: 50;
+    width: 100%;
+    color: var(--c-text-1, #fff);
+    border-bottom: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
+  }
+  .store-header--sm { --sh-h: 56px; }
+  .store-header--lg { --sh-h: 80px; }
+  .store-header--sticky { position: sticky; top: 0; }
+  .store-header--glass { background: rgb(var(--paper-rgb, 5 5 5) / 0.72); backdrop-filter: blur(18px) saturate(1.4); }
+  .store-header--solid { background: var(--c-bg-1, #0a0a0a); }
+  .store-header--transparent { background: transparent; border-bottom-color: transparent; }
+
+  .store-header__inner {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6, 1.5rem);
+    max-width: 1280px;
+    height: var(--sh-h);
+    margin: 0 auto;
+    padding: 0 var(--sp-6, 1.5rem);
+  }
+
+  .store-header__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sp-2, 0.5rem);
+    font-weight: 800;
+    font-size: 1.05rem;
+    letter-spacing: -0.02em;
+    color: var(--c-text-1, #fff);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .store-header__logo {
+    display: grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    background: linear-gradient(135deg, var(--c-primary, #b8860b), var(--c-primary-light, #d4a017));
+    color: var(--c-on-primary, #050505);
+  }
+
+  .store-header__nav { flex: 1; }
+  .store-header__links { display: flex; align-items: center; gap: var(--sp-1, 0.25rem); margin: 0; padding: 0; list-style: none; }
+  .store-header__item { position: relative; }
+  .store-header__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    min-height: 40px;
+    padding: 0 var(--sp-3, 0.75rem);
+    border: 0;
+    border-radius: var(--r-full, 9999px);
+    background: transparent;
+    color: var(--c-text-2, #a3a3a3);
+    font: inherit;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s ease, background 0.2s ease;
+  }
+  .store-header__link:hover,
+  .store-header__link[aria-expanded='true'],
+  .store-header__link[aria-current='page'] { color: var(--c-text-1, #fff); background: rgb(var(--ink-rgb, 255 255 255) / 0.05); }
+  .store-header__link svg { transition: transform 0.2s ease; }
+  .store-header__link[aria-expanded='true'] svg { transform: rotate(180deg); }
+
+  .store-header__dropdown {
+    position: absolute;
+    top: calc(100% + 10px);
+    left: 0;
+    min-width: 280px;
+    padding: var(--sp-2, 0.5rem);
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
+    background: rgb(var(--paper-rgb, 5 5 5) / 0.96);
+    backdrop-filter: blur(18px);
+    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
+    animation: sh-pop 0.18s ease-out;
+  }
+  .store-header__dropdown ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
+  .store-header__dropdown a {
+    display: grid;
+    gap: 2px;
+    padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
+    border-radius: var(--r-sm, 8px);
+    color: var(--c-text-1, #fff);
+    text-decoration: none;
+    font-size: 0.9rem;
+  }
+  .store-header__dropdown a span { font-size: 0.78rem; color: var(--c-text-2, #a3a3a3); }
+  .store-header__dropdown a:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.05); }
+  .store-header__dropdown-all { border-top: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); margin-top: 4px; padding-top: 4px; }
+  .store-header__dropdown-all a { color: var(--c-primary-light, #d4a017); font-weight: 600; }
+  @keyframes sh-pop { from { opacity: 0; transform: translateY(-4px); } }
+
+  .store-header__actions { display: flex; align-items: center; gap: var(--sp-2, 0.5rem); margin-left: auto; }
+  .store-header__search {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-2, 0.5rem);
+    height: 40px;
+    padding: 0 var(--sp-3, 0.75rem);
+    border-radius: var(--r-full, 9999px);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
+    color: var(--c-text-2, #a3a3a3);
+    transition: border-color 0.2s ease;
+  }
+  .store-header__search:focus-within { border-color: var(--c-primary-light, #d4a017); }
+  .store-header__search input {
+    width: 170px;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 0.875rem;
+  }
+  .store-header__search input::placeholder { color: var(--c-text-2, #a3a3a3); }
+
+  .store-header__icon,
+  .store-header__toggle {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    border: 0;
+    border-radius: var(--r-full, 9999px);
+    background: transparent;
+    color: var(--c-text-1, #fff);
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+  .store-header__icon:hover,
+  .store-header__toggle:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.06); color: var(--c-text-1, #fff); }
+  .store-header__toggle { display: none; }
+  .store-header__theme .i-moon { display: none; }
+  :global([data-theme='light']) .store-header__theme .i-sun { display: none; }
+  :global([data-theme='light']) .store-header__theme .i-moon { display: block; }
+  .store-header :is(a, button, input):focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 2px; }
+
+  .store-header__count {
+    position: absolute;
+    top: 4px;
+    right: 2px;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: var(--r-full, 9999px);
+    background: var(--c-primary-light, #d4a017);
+    color: var(--c-on-primary, #050505);
+    font-size: 0.68rem;
+    font-weight: 800;
+    line-height: 18px;
+    text-align: center;
+  }
+  .store-header__count[hidden] { display: none; }
+  .store-header__count.is-bump { animation: sh-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
+  @keyframes sh-bump { 40% { transform: scale(1.35); } }
+
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 960px) {
+    .store-header__inner { gap: var(--sp-2, 0.5rem); padding: 0 var(--sp-3, 0.75rem); }
+    .store-header__toggle { display: grid; }
+    .store-header__search { display: none; }
+    .store-header__nav {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      display: none;
+      padding: var(--sp-3, 0.75rem);
+      background: var(--c-bg-1, #0a0a0a);
+      box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
+      border-bottom: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
+      max-height: calc(100dvh - var(--sh-h));
+      overflow-y: auto;
+    }
+    .store-header__nav.is-open { display: block; }
+    .store-header__links { flex-direction: column; align-items: stretch; }
+    .store-header__link { width: 100%; justify-content: space-between; min-height: 48px; border-radius: var(--r-sm, 8px); }
+    .store-header__dropdown { position: static; min-width: 0; box-shadow: none; background: rgb(var(--ink-rgb, 255 255 255) / 0.02); margin: 4px 0; }
+    .store-header__toggle[aria-expanded='true'] .l1 { transform: translateY(5px) rotate(45deg); transform-origin: center; }
+    .store-header__toggle[aria-expanded='true'] .l2 { opacity: 0; }
+    .store-header__toggle[aria-expanded='true'] .l3 { transform: translateY(-5px) rotate(-45deg); transform-origin: center; }
+    .store-header__toggle path { transition: transform 0.2s ease, opacity 0.2s ease; transform-box: fill-box; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .store-header__dropdown, .store-header__count.is-bump { animation: none; }
+  }
+</style>