astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/sections/ShopCategoryHero.astro

@@ -0,0 +1,103 @@
+---
+/**
+ * ShopCategoryHero — Catalogue page header: breadcrumb, oversized category title with item
+ * count, intro text, sub-category links and a strip of three visuals.
+ *
+ * @param {Array<{label: string, href?: string}>} breadcrumb - Trail; the last item is the current page.
+ * @param {string} title - Category name. Default 'Clothing'.
+ * @param {number} count - Number of products (superscript). Optional.
+ * @param {string} text - Intro paragraph.
+ * @param {Array<{label: string, href: string, active?: boolean}>} links - Sub-category links.
+ * @param {Array<{icon?: string, hue?: number, image?: string}>} visuals - Up to three images (empty hides the strip).
+ * @param {string} variant - Layout (split|centered). Default 'split'.
+ * @param {string} size - Vertical rhythm (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: breadcrumb nav with aria-current; one h1; visuals are decorative.
+ */
+import ProductMedia from '../ecommerce/ProductMedia.astro';
+
+interface Props {
+  breadcrumb?: Array<{ label: string; href?: string }>;
+  title?: string;
+  count?: number;
+  text?: string;
+  links?: Array<{ label: string; href: string; active?: boolean }>;
+  visuals?: Array<{ icon?: string; hue?: number; image?: string }>;
+  variant?: 'split' | 'centered';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  breadcrumb = [{ label: 'Home', href: '#' }, { label: 'Shop', href: '#' }, { label: 'Clothing' }],
+  title = 'Clothing',
+  count = 24,
+  text = 'Overshirts, knitwear and outerwear cut from linen, merino and organic cotton. Designed to be layered, washed and worn for a decade.',
+  links = [
+    { label: 'All', href: '#', active: true },
+    { label: 'Overshirts', href: '#' },
+    { label: 'Knitwear', href: '#' },
+    { label: 'Outerwear', href: '#' },
+  ],
+  visuals = [{ icon: 'shirt', hue: 30 }, { icon: 'jacket', hue: 22 }, { icon: 'sneaker', hue: 12 }],
+  variant = 'split',
+  size = 'md',
+  className = '',
+} = Astro.props;
+---
+
+<header class:list={['sch', `sch--${variant}`, `sch--${size}`, className]}>
+  <nav class="sch__crumbs" aria-label="Breadcrumb">
+    <ol>
+      {breadcrumb.map((b, i) => (
+        <li>{b.href && i < breadcrumb.length - 1 ? <a href={b.href}>{b.label}</a> : <span aria-current="page">{b.label}</span>}</li>
+      ))}
+    </ol>
+  </nav>
+  <div class="sch__main">
+    <h1 class="sch__title">{title}{count !== undefined && <sup>{count}</sup>}</h1>
+    <div class="sch__side">
+      {text && <p class="sch__text">{text}</p>}
+      {links.length > 0 && (
+        <ul class="sch__links">
+          {links.map((l) => <li><a href={l.href} aria-current={l.active ? 'page' : undefined}>{l.label}</a></li>)}
+        </ul>
+      )}
+    </div>
+  </div>
+  {visuals.length > 0 && (
+    <div class="sch__strip" aria-hidden="true">
+      {visuals.slice(0, 3).map((v) => <ProductMedia image={v.image} icon={v.icon} hue={v.hue} ratio="16 / 9" variant="soft" size="md" />)}
+    </div>
+  )}
+</header>
+
+<style>
+  .sch { container-type: inline-size; --py: clamp(1.5rem, 4vw, 3rem); padding-block: var(--py); color: var(--c-text-1, #fff); }
+  .sch--sm { --py: 1rem; }
+  .sch--lg { --py: clamp(2.5rem, 6vw, 5rem); }
+  .sch__crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--sp-6, 1.5rem); padding: 0; list-style: none; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .sch__crumbs li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
+  .sch__crumbs a { color: inherit; text-decoration: none; }
+  .sch__crumbs a:hover { color: var(--c-text-1, #fff); }
+  .sch__crumbs [aria-current] { color: var(--c-text-1, #fff); }
+  .sch__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: clamp(1rem, 4vw, 4rem); align-items: end; }
+  .sch--centered .sch__main { grid-template-columns: 1fr; text-align: center; justify-items: center; }
+  .sch__title { margin: 0; font-family: var(--font-display, Georgia, 'Times New Roman', serif); font-size: clamp(3.5rem, 12vw, 10rem); font-weight: 400; letter-spacing: -0.055em; line-height: 0.85; }
+  .sch__title sup { margin-left: 0.15em; font-family: var(--font-sans, system-ui); font-size: 0.14em; font-weight: 600; letter-spacing: 0; vertical-align: super; color: var(--shop-accent, var(--c-primary-light, #d4a017)); }
+  .sch__text { margin: 0 0 var(--sp-4, 1rem); max-width: 30rem; line-height: 1.65; color: var(--c-text-2, #a3a3a3); }
+  .sch__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5, 1.25rem); margin: 0; padding: 0; list-style: none; }
+  .sch--centered .sch__links { justify-content: center; }
+  .sch__links a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); text-decoration: none; border-bottom: 1px solid transparent; }
+  .sch__links a:hover, .sch__links a[aria-current] { color: var(--c-text-1, #fff); border-bottom-color: currentColor; }
+  .sch a:focus-visible { outline: 2px solid var(--shop-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+  .sch__strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-3, 0.75rem); margin-top: clamp(1.5rem, 4vw, 3rem); }
+  .sch__strip :global(.p-media) { height: 100%; border-radius: var(--r-sm, 2px); }
+
+  @container (max-width: 760px) {
+    .sch__main { grid-template-columns: 1fr; }
+    .sch__strip { grid-template-columns: 1fr 1fr; }
+    .sch__strip > :global(:first-child) { grid-column: 1 / -1; }
+  }
+</style>

package/src/components/lib/sections/ShopCollectionMosaic.astro

@@ -0,0 +1,131 @@
+---
+/**
+ * ShopCollectionMosaic — Asymmetric collection grid: one tall feature tile and smaller tiles,
+ * each with an index number, title, item count and an underline link.
+ *
+ * @param {string} eyebrow - Small label. Default 'Collections'.
+ * @param {string} title - Section heading. Default 'Shop by *intention*'.
+ * @param {Array<{title: string, text?: string, href: string, count?: number, icon?: string, hue?: number, image?: string}>} items - 2–5 tiles; the first one is featured.
+ * @param {string} linkLabel - Tile link text. Default 'Explore'.
+ * @param {string} countLabel - Suffix after counts. Default 'pieces'.
+ * @param {string} variant - Layout (feature-left|feature-right). Default 'feature-left'.
+ * @param {string} size - Tile height (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: each tile is one link with a heading inside; art is decorative.
+ */
+import ProductMedia from '../ecommerce/ProductMedia.astro';
+
+interface Tile { title: string; text?: string; href: string; count?: number; icon?: string; hue?: number; image?: string }
+interface Props {
+  eyebrow?: string;
+  title?: string;
+  items?: Tile[];
+  linkLabel?: string;
+  countLabel?: string;
+  variant?: 'feature-left' | 'feature-right';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  eyebrow = 'Collections',
+  title = 'Shop by *intention*',
+  items = [
+    { title: 'The wardrobe', text: 'Overshirts, knitwear and coats in natural fibres.', href: '#', count: 24, icon: 'jacket', hue: 22 },
+    { title: 'At the table', text: 'Stoneware made by hand.', href: '#', count: 12, icon: 'mug', hue: 14 },
+    { title: 'Light & air', text: 'Lamps and living things.', href: '#', count: 9, icon: 'plant', hue: 110 },
+    { title: 'To carry', text: 'Bags that soften with age.', href: '#', count: 8, icon: 'bag', hue: 34 },
+  ],
+  linkLabel = 'Explore',
+  countLabel = 'pieces',
+  variant = 'feature-left',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const parts = title.split(/\*(.+?)\*/g);
+---
+
+<section class:list={['scm', `scm--${variant}`, `scm--${size}`, className]}>
+  <header class="scm__head">
+    {eyebrow && <p class="scm__eyebrow">{eyebrow}</p>}
+    <h2 class="scm__title">{parts.map((p, i) => (i % 2 ? <em>{p}</em> : p))}</h2>
+  </header>
+  <ul class="scm__grid">
+    {items.slice(0, 5).map((t, i) => (
+      <li class:list={['scm__item', { 'scm__item--feature': i === 0 }]}>
+        <a class="scm__tile" href={t.href}>
+          <span class="scm__art"><ProductMedia image={t.image} alt="" icon={t.icon} hue={t.hue} ratio="auto" variant="soft" size={i === 0 ? 'lg' : 'md'} /></span>
+          <span class="scm__num" aria-hidden="true">{String(i + 1).padStart(2, '0')}</span>
+          <span class="scm__body">
+            <h3 class="scm__name">{t.title}</h3>
+            {t.text && <span class="scm__text">{t.text}</span>}
+            <span class="scm__link">{t.count !== undefined ? `${linkLabel} · ${t.count} ${countLabel}` : linkLabel}</span>
+          </span>
+        </a>
+      </li>
+    ))}
+  </ul>
+</section>
+
+<style>
+  .scm { container-type: inline-size; --scm-h: 300px; color: var(--c-text-1, #fff); }
+  .scm--sm { --scm-h: 230px; }
+  .scm--lg { --scm-h: 380px; }
+  .scm__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4, 1rem); margin-bottom: var(--sp-6, 1.5rem); padding-bottom: var(--sp-3, 0.75rem); border-bottom: 1px solid currentColor; }
+  .scm__eyebrow { order: 2; margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .scm__title { margin: 0; font-family: var(--font-display, Georgia, 'Times New Roman', serif); font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1; }
+  .scm__title em { font-style: italic; color: var(--shop-accent, var(--c-primary-light, #d4a017)); }
+
+  .scm__grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-auto-rows: var(--scm-h);
+    gap: var(--sp-3, 0.75rem);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .scm__item--feature { grid-column: span 2; grid-row: span 2; }
+  .scm--feature-right .scm__item--feature { grid-column: 3 / span 2; grid-row: 1 / span 2; }
+  .scm__item:nth-child(4):last-child { grid-column: span 2; }
+
+  .scm__tile {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 100%;
+    padding: var(--sp-5, 1.25rem);
+    color: inherit;
+    text-decoration: none;
+    overflow: hidden;
+    isolation: isolate;
+    border-radius: var(--r-sm, 2px);
+  }
+  .scm__art { position: absolute; inset: 0; z-index: -1; }
+  .scm__art :global(.p-media) { height: 100%; aspect-ratio: auto; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
+  .scm__art :global(.p-media__art) { width: auto; height: 42%; margin-bottom: 22%; }
+  .scm__tile:hover .scm__art :global(.p-media) { transform: scale(1.04); }
+  .scm__tile::after { content: ''; position: absolute; inset: 35% 0 0; z-index: -1; background: linear-gradient(transparent, rgb(var(--paper-rgb, 5 5 5) / 0.9)); }
+  .scm__num { position: absolute; top: var(--sp-4, 1rem); left: var(--sp-5, 1.25rem); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
+  .scm__body { display: grid; gap: 4px; }
+  .scm__name { margin: 0; font-family: var(--font-display, Georgia, serif); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
+  .scm__item--feature .scm__name { font-size: clamp(2rem, 3.5vw, 3rem); }
+  .scm__text { max-width: 24rem; font-size: 0.88rem; color: var(--c-text-2, #a3a3a3); }
+  .scm__link { width: fit-content; margin-top: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
+  .scm__tile:hover .scm__link { color: var(--shop-accent, var(--c-primary-light, #d4a017)); }
+  .scm__tile:focus-visible { outline: 2px solid var(--shop-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+
+  @container (max-width: 900px) {
+    .scm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
+    .scm__item--feature, .scm--feature-right .scm__item--feature { grid-column: 1 / -1; grid-row: span 2; }
+    .scm__item:nth-child(4):last-child { grid-column: auto; }
+  }
+  @container (max-width: 480px) {
+    .scm__grid { grid-template-columns: 1fr; }
+    .scm__item--feature, .scm--feature-right .scm__item--feature { grid-row: span 1; }
+  }
+  @media (prefers-reduced-motion: reduce) { .scm__art :global(.p-media) { transition: none; } }
+</style>

package/src/components/lib/sections/ShopFooterWordmark.astro

@@ -0,0 +1,100 @@
+---
+/**
+ * ShopFooterWordmark — Store footer with link columns, contact block, payment labels and a
+ * giant edge-to-edge wordmark at the bottom.
+ *
+ * @param {string} brand - Wordmark. Default 'Forma'.
+ * @param {string} brandHref - Wordmark link. Default '/'.
+ * @param {Array<{title: string, links: {label: string, href: string}[]}>} columns - Link columns.
+ * @param {{title: string, lines: string[]}} contact - Contact block (optional).
+ * @param {string[]} payments - Payment method labels. Default Visa · Mastercard · PayPal · Apple Pay.
+ * @param {string} copyright - Bottom-left text.
+ * @param {string} variant - Style (plain|inverted). Default 'plain'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: footer landmark with a visually hidden heading; columns are nav lists; the
+ * wordmark is decorative (aria-hidden) and duplicated by the visible brand link.
+ */
+interface Props {
+  brand?: string;
+  brandHref?: string;
+  columns?: Array<{ title: string; links: Array<{ label: string; href: string }> }>;
+  contact?: { title: string; lines: string[] };
+  payments?: string[];
+  copyright?: string;
+  variant?: 'plain' | 'inverted';
+  className?: string;
+}
+
+const {
+  brand = 'Forma',
+  brandHref = '/',
+  columns = [
+    { title: 'Shop', links: [{ label: 'Clothing', href: '#' }, { label: 'Shoes', href: '#' }, { label: 'Bags', href: '#' }, { label: 'Objects', href: '#' }] },
+    { title: 'Care', links: [{ label: 'Shipping', href: '#' }, { label: 'Returns', href: '#' }, { label: 'Repairs', href: '#' }, { label: 'Size guide', href: '#' }] },
+    { title: 'Studio', links: [{ label: 'About', href: '#' }, { label: 'Journal', href: '#' }, { label: 'Stockists', href: '#' }] },
+  ],
+  contact = { title: 'Visit', lines: ['Calle del Pez 14, Madrid', 'Tue–Sat · 11:00–20:00', 'hello@forma.studio'] },
+  payments = ['Visa', 'Mastercard', 'PayPal', 'Apple Pay'],
+  copyright = `© ${new Date().getFullYear()} Forma Studio`,
+  variant = 'plain',
+  className = '',
+} = Astro.props;
+---
+
+<footer class:list={['sfw', `sfw--${variant}`, className]} aria-labelledby="sfw-title">
+  <h2 id="sfw-title" class="sr-only">Site footer</h2>
+  <div class="sfw__top">
+    <a class="sfw__brand" href={brandHref}>{brand}</a>
+    {columns.map((c) => (
+      <nav class="sfw__col" aria-label={c.title}>
+        <p class="sfw__col-title">{c.title}</p>
+        <ul>{c.links.map((l) => <li><a href={l.href}>{l.label}</a></li>)}</ul>
+      </nav>
+    ))}
+    {contact && (
+      <div class="sfw__col">
+        <p class="sfw__col-title">{contact.title}</p>
+        <address>{contact.lines.map((l) => <span>{l}</span>)}</address>
+      </div>
+    )}
+  </div>
+  <div class="sfw__bottom">
+    <p>{copyright}</p>
+    {payments.length > 0 && <ul class="sfw__pay" aria-label="Payment methods">{payments.map((p) => <li>{p}</li>)}</ul>}
+  </div>
+  <p class="sfw__wordmark" aria-hidden="true">{brand}<span>°</span></p>
+</footer>
+
+<style>
+  .sfw { container-type: inline-size; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--c-text-1, #fff); color: var(--c-text-1, #fff); overflow: hidden; }
+  .sfw--inverted { background: var(--c-text-1, #fff); color: var(--c-bg, #050505); border-top: 0; }
+  .sfw__top { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--sp-8, 2rem); max-width: 1440px; margin: 0 auto; }
+  .sfw__brand { font-family: var(--font-display, Georgia, 'Times New Roman', serif); font-size: 1.8rem; letter-spacing: -0.03em; color: inherit; text-decoration: none; }
+  .sfw__col-title { margin: 0 0 var(--sp-3, 0.75rem); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
+  .sfw__col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
+  .sfw__col a { display: inline-flex; align-items: center; min-height: 34px; color: inherit; text-decoration: none; font-size: 0.95rem; }
+  .sfw__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
+  .sfw__col address { display: grid; gap: 6px; font-style: normal; font-size: 0.95rem; line-height: 1.5; }
+  .sfw a:focus-visible { outline: 2px solid var(--shop-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+  .sfw__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4, 1rem); max-width: 1440px; margin: clamp(2rem, 5vw, 3.5rem) auto 0; padding-top: var(--sp-4, 1rem); border-top: 1px solid var(--c-border, rgba(255, 255, 255, 0.12)); font-size: 0.8rem; opacity: 0.75; }
+  .sfw__bottom p { margin: 0; }
+  .sfw__pay { display: flex; flex-wrap: wrap; gap: var(--sp-2, 0.5rem); margin: 0; padding: 0; list-style: none; }
+  .sfw__pay li { padding: 0.15rem 0.55rem; border: 1px solid currentColor; border-radius: var(--r-sm, 2px); font-size: 0.7rem; letter-spacing: 0.04em; }
+  .sfw__wordmark {
+    margin: clamp(1rem, 3vw, 2rem) 0 -0.18em;
+    font-family: var(--font-display, Georgia, 'Times New Roman', serif);
+    font-size: clamp(5rem, 24vw, 22rem);
+    line-height: 0.8;
+    letter-spacing: -0.06em;
+    text-align: center;
+    white-space: nowrap;
+  }
+  .sfw__wordmark span { color: var(--shop-accent, var(--c-primary-light, #d4a017)); }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+  @container (max-width: 900px) {
+    .sfw__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .sfw__brand { grid-column: 1 / -1; }
+  }
+</style>