@contentrain/astro-kit 0.31.0 → 0.33.0

package/components/header/fixtures.json

@@ -122,5 +122,94 @@
       ]
     }
   },
-  { "name": "tagline", "props": { "siteName": "Golden Agency", "tagline": "Websites that sell what you make", "items": [{ "label": "Home", "href": "/" }, { "label": "Services", "href": "/services/" }, { "label": "Contact", "href": "/contact/" }], "menuLabel": "Menu", "closeLabel": "Close" } }
+  { "name": "tagline", "props": { "siteName": "Golden Agency", "tagline": "Websites that sell what you make", "items": [{ "label": "Home", "href": "/" }, { "label": "Services", "href": "/services/" }, { "label": "Contact", "href": "/contact/" }], "menuLabel": "Menu", "closeLabel": "Close" } },
+  {
+    "name": "mega-menu",
+    "props": {
+      "siteName": "Northwind",
+      "menu": "mega",
+      "items": [
+        {
+          "label": "Hakkımızda",
+          "href": "/hakkimizda/"
+        },
+        {
+          "label": "Ürünlerimiz",
+          "href": "#",
+          "children": [
+            {
+              "label": "Aracım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Trafik Sigortası",
+                  "href": "/urunlerimiz/trafik-sigortasi/"
+                },
+                {
+                  "label": "Kasko",
+                  "href": "/urunlerimiz/kasko/"
+                }
+              ]
+            },
+            {
+              "label": "Evim İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Dask",
+                  "href": "/urunlerimiz/dask/"
+                },
+                {
+                  "label": "Konut Sigortası",
+                  "href": "/urunlerimiz/konut-sigortasi/"
+                }
+              ]
+            },
+            {
+              "label": "Sağlığım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Sağlık Sigortası",
+                  "href": "/urunlerimiz/saglik-sigortasi/"
+                },
+                {
+                  "label": "Tamamlayıcı Sağlık",
+                  "href": "/urunlerimiz/tamamlayici-saglik/"
+                }
+              ]
+            },
+            {
+              "label": "Diğer",
+              "href": "#",
+              "children": [
+                {
+                  "label": "İş Yeri Sigortası",
+                  "href": "/urunlerimiz/is-yeri-sigortasi/"
+                },
+                {
+                  "label": "Seyahat Sigortası",
+                  "href": "/urunlerimiz/seyahat-sigortasi/"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "label": "Anlaşmalı Sigorta Şirketleri",
+          "href": "/anlasmali-sigorta-sirketleri/"
+        },
+        {
+          "label": "İletişim",
+          "href": "/iletisim/"
+        }
+      ],
+      "action": {
+        "label": "Get a quote",
+        "href": "/contact/"
+      }
+    }
+  },
+  { "name": "search", "props": { "siteName": "Northwind Journal", "items": [{ "label": "Journal", "href": "/" }, { "label": "About", "href": "/about/" }], "search": { "label": "Search", "placeholder": "Search this site", "submitLabel": "Search" } } },
+  {"name": "mega-menu-search", "props": {"siteName": "Northwind", "menu": "mega", "items": [{"label": "Hakkımızda", "href": "/hakkimizda/"}, {"label": "Ürünlerimiz", "href": "#", "children": [{"label": "Aracım İçin", "href": "#", "children": [{"label": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/"}, {"label": "Kasko", "href": "/urunlerimiz/kasko/"}]}, {"label": "Evim İçin", "href": "#", "children": [{"label": "Dask", "href": "/urunlerimiz/dask/"}, {"label": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/"}]}, {"label": "Sağlığım İçin", "href": "#", "children": [{"label": "Sağlık Sigortası", "href": "/urunlerimiz/saglik-sigortasi/"}, {"label": "Tamamlayıcı Sağlık", "href": "/urunlerimiz/tamamlayici-saglik/"}]}, {"label": "Diğer", "href": "#", "children": [{"label": "İş Yeri Sigortası", "href": "/urunlerimiz/is-yeri-sigortasi/"}, {"label": "Seyahat Sigortası", "href": "/urunlerimiz/seyahat-sigortasi/"}]}]}, {"label": "Anlaşmalı Sigorta Şirketleri", "href": "/anlasmali-sigorta-sirketleri/"}, {"label": "İletişim", "href": "/iletisim/"}], "action": {"label": "Get a quote", "href": "/contact/"}, "search": {"label": "Search", "placeholder": "Ara", "submitLabel": "Ara"}}}
 ]

package/components/header/meta.json

@@ -3,12 +3,13 @@
   "name": "Header",
   "description": "Site header: brand (logo and/or name), navigation and an optional call-to-action button.",
   "category": "chrome",
-  "uses": ["nav"],
-  "shared": ["Button.astro", "KitImage.astro", "types.ts"],
+  "uses": ["nav", "search-box"],
+  "shared": ["Button.astro", "KitImage.astro", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["split", "centered", "brand-left"], "default": "split", "description": "split: brand left, navigation right. centered: brand above centred navigation. brand-left: navigation right after the brand." },
     "tone": { "options": ["default", "inverse", "transparent"], "default": "default", "description": "Surface with a bottom border, dark (ink) background, or transparent over the hero that follows." },
-    "position": { "options": ["static", "sticky"], "default": "static", "description": "Sticky keeps the header at the top while scrolling." }
+    "position": { "options": ["static", "sticky"], "default": "static", "description": "Sticky keeps the header at the top while scrolling." },
+    "menu": { "options": ["flyout", "mega"], "default": "flyout", "description": "How submenus open on wide screens: a list under the item (flyout) or a wide panel of columns (mega). Submenus nest to any depth." }
   },
   "props": {
     "siteName": { "type": "string", "required": true, "description": "Site title (site.title)." },
@@ -26,6 +27,7 @@
     "homeHref": { "type": "url", "default": "/", "description": "Where the brand links." },
     "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "newTab": { "type": "boolean" }, "children": { "type": "array" } } }, "description": "Primary menu (menus → menu-items)." },
     "action": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "style": { "type": "select", "options": ["primary", "secondary", "ghost"] } }, "description": "Header button, shown on wide screens." },
+    "search": { "type": "object", "fields": { "label": { "type": "string" }, "placeholder": { "type": "string" }, "submitLabel": { "type": "string" }, "action": { "type": "url" } }, "description": "A search field in the bar: a GET form to the site's search page (default /search); below the bar on a phone." },
     "navLabel": { "type": "string", "description": "Accessible name of the navigation (ui-strings nav.label)." },
     "menuLabel": { "type": "string", "description": "Narrow-screen toggle text (ui-strings nav.menu)." },
     "closeLabel": { "type": "string", "description": "Drawer close text (ui-strings nav.close)." }

package/components/hero/meta.json

@@ -9,6 +9,7 @@
     "KitImage.astro",
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/language-switcher/LanguageSwitcher.astro

@@ -0,0 +1,68 @@
+---
+// Links to the same page in the site's other languages. Each link carries `hreflang` and its own `lang`, so the
+// language's name is read in that language; the current one is marked `aria-current`. A plain list, or a native
+// `<details>` menu that shows the current language: no JavaScript. The addresses come from the caller (the page's
+// equivalent in each language); a link without one is not drawn.
+import { tv } from 'tailwind-variants'
+import { safeHref } from '../_shared/safe-url'
+
+const switcher = tv({
+  slots: {
+    list: 'flex flex-wrap items-center gap-x-4 gap-y-1',
+    link: 'text-current no-underline opacity-80 hover:opacity-100 hover:underline aria-[current=true]:font-semibold aria-[current=true]:opacity-100',
+    summary: 'inline-flex cursor-pointer list-none items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-current/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent [&::-webkit-details-marker]:hidden',
+    panel: 'absolute z-30 mt-1 flex min-w-40 flex-col gap-1 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg',
+  },
+  variants: {
+    layout: { list: {}, menu: {} },
+    align: { start: { panel: 'start-0' }, end: { panel: 'end-0' } },
+    // `name`: "Deutsch"; `code`: "DE".
+    labelStyle: { name: {}, code: { link: 'uppercase' } },
+  },
+  defaultVariants: { layout: 'list', align: 'start', labelStyle: 'name' },
+})
+
+interface Props {
+  /** The languages (none: nothing is drawn), `lang` a BCP 47 code ("de", "pt-BR"); `label` the language's own name ("Deutsch"). */
+  languages?: Array<{ lang: string, label: string, href: string, current?: boolean | undefined }> | undefined
+  /** Accessible name ("Language"). */
+  label?: string | undefined
+  layout?: 'list' | 'menu' | undefined
+  align?: 'start' | 'end' | undefined
+  labelStyle?: 'name' | 'code' | undefined
+}
+
+const { languages = [], label = 'Language', layout, align, labelStyle } = Astro.props
+const s = switcher({ layout, align, labelStyle })
+const shown = languages.filter(language => language.href)
+const current = shown.find(language => language.current)
+const text = (language: { lang: string, label: string }) => (labelStyle === 'code' ? language.lang.split('-')[0]! : language.label)
+---
+{shown.length > 1 && (layout === 'menu'
+  ? (
+    <details class="relative" data-cr-part="language-switcher">
+      <summary class={s.summary()}>
+        <span class="sr-only">{label}: </span>
+        <span lang={current?.lang}>{current ? text(current) : label}</span>
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" /></svg>
+      </summary>
+      <ul class={s.panel()}>
+      {shown.map(language => (
+        <li>
+          <a href={safeHref(language.href)} lang={language.lang} hreflang={language.lang} aria-current={language.current ? 'true' : undefined} class={s.link()}>{text(language)}</a>
+        </li>
+      ))}
+      </ul>
+    </details>
+  )
+  : (
+    <nav aria-label={label} data-cr-part="language-switcher">
+      <ul class={s.list()}>
+      {shown.map(language => (
+        <li>
+          <a href={safeHref(language.href)} lang={language.lang} hreflang={language.lang} aria-current={language.current ? 'true' : undefined} class={s.link()}>{text(language)}</a>
+        </li>
+      ))}
+      </ul>
+    </nav>
+  ))}

package/components/language-switcher/fixtures.json

@@ -0,0 +1,51 @@
+[
+  {
+    "name": "list",
+    "props": {
+      "languages": [
+        {
+          "lang": "en",
+          "label": "English",
+          "href": "/about/",
+          "current": true
+        },
+        {
+          "lang": "de",
+          "label": "Deutsch",
+          "href": "/de/ueber-uns/"
+        },
+        {
+          "lang": "tr",
+          "label": "Türkçe",
+          "href": "/tr/hakkimizda/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "menu-end-code",
+    "props": {
+      "layout": "menu",
+      "align": "end",
+      "labelStyle": "code",
+      "languages": [
+        {
+          "lang": "en",
+          "label": "English",
+          "href": "/",
+          "current": true
+        },
+        {
+          "lang": "pt-BR",
+          "label": "Português",
+          "href": "/pt/"
+        },
+        {
+          "lang": "ar",
+          "label": "العربية",
+          "href": "/ar/"
+        }
+      ]
+    }
+  }
+]

package/components/language-switcher/meta.json

@@ -0,0 +1,73 @@
+{
+  "id": "language-switcher",
+  "name": "LanguageSwitcher",
+  "description": "Links to the same page in the site's other languages, each with hreflang and its own lang; the current one is marked aria-current. A plain list or a native <details> menu; no JavaScript. The addresses are the page's equivalents in each language, supplied by the caller.",
+  "category": "chrome",
+  "uses": [],
+  "shared": ["safe-url.ts"],
+  "variants": {
+    "layout": {
+      "options": [
+        "list",
+        "menu"
+      ],
+      "default": "list",
+      "description": "A row of links, or a menu that shows the current language and opens on click."
+    },
+    "align": {
+      "options": [
+        "start",
+        "end"
+      ],
+      "default": "start",
+      "description": "Which edge the menu panel lines up with."
+    },
+    "labelStyle": {
+      "options": [
+        "name",
+        "code"
+      ],
+      "default": "name",
+      "description": "The language's own name (\"Deutsch\") or its code (\"DE\")."
+    }
+  },
+  "props": {
+    "languages": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "fields": {
+          "lang": {
+            "type": "string",
+            "required": true
+          },
+          "label": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "url",
+            "required": true
+          },
+          "current": {
+            "type": "boolean"
+          }
+        }
+      },
+      "description": "The languages: BCP 47 code, the language's own name, the page's address in it, and whether it is the page being read."
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible name (ui-strings language.label)."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "polylang/language-switcher"
+    ]
+  },
+  "a11y": "List layout: a labelled <nav>; menu layout: a native <details> whose summary carries the label for assistive technology and the current language visibly. Every link has lang and hreflang, so screen readers pronounce each name in its language; the current one is aria-current=true. Fewer than two languages draw nothing."
+}

package/components/logo-cloud/LogoCloud.astro

@@ -1,32 +1,59 @@
 ---
-// A grid of client or partner logos, each optionally linked, under an
-// optional heading.
+// A grid, a row or an endless strip of client or partner logos, each
+// optionally linked, under an optional heading. The strip is CSS only and
+// stands still for visitors who ask for reduced motion.
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section, { type Tone } from '../_shared/Section.astro'
 import { imageOf, type ImageSource } from '../_shared/image'
+import { measuredGrid } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
+import { safeHref } from '../_shared/safe-url'
 
 const cloud = tv({
   slots: {
-    heading: 'mb-8 text-center text-sm font-semibold tracking-wide uppercase opacity-80',
+    heading: 'mb-8 text-sm font-semibold tracking-wide uppercase opacity-80',
     list: 'grid grid-cols-2 items-center gap-x-8 gap-y-10 sm:grid-cols-3',
     item: 'flex items-center justify-center',
     logo: 'h-10 w-auto max-w-full object-contain transition duration-200',
   },
   variants: {
+    layout: {
+      grid: {},
+      // One line of logos that wraps on a narrow screen; the logos keep their own widths.
+      row: { list: 'flex flex-wrap items-center gap-x-10 gap-y-6', item: 'shrink-0' },
+      // Two copies of the list side by side, moved by one keyframe; see the style block below.
+      marquee: { list: 'kit-marquee-track flex w-max items-center gap-x-12', item: 'shrink-0' },
+    },
     columns: {
       '2': { list: 'sm:grid-cols-2' },
       '3': { list: 'md:grid-cols-3' },
       '4': { list: 'md:grid-cols-4' },
+      '5': { list: 'md:grid-cols-3 lg:grid-cols-5' },
+      '6': { list: 'md:grid-cols-3 lg:grid-cols-6' },
+    },
+    // A fixed height, the width follows: logos come in every aspect ratio.
+    logoHeight: {
+      sm: { logo: 'h-8' },
+      md: {},
+      lg: { logo: 'h-14' },
     },
     style: {
       plain: {},
       // Colour comes back on hover and on keyboard focus of the logo's link.
       grayscale: { logo: 'opacity-70 grayscale group-hover:opacity-100 group-hover:grayscale-0 group-focus-visible:opacity-100 group-focus-visible:grayscale-0' },
+      // Dark logos on a dark band: drawn white, full strength.
+      'mono-light': { logo: 'brightness-0 invert' },
     },
+    align: { center: { heading: 'text-center' }, start: { heading: 'text-start' } },
     tone: { default: {}, muted: {}, inverse: {}, accent: { heading: 'opacity-100' } },
   },
-  defaultVariants: { columns: '4', style: 'plain', tone: 'default' },
+  compoundVariants: [
+    { layout: 'row', align: 'center', class: { list: 'justify-center' } },
+    { layout: 'row', align: 'start', class: { list: 'justify-start' } },
+    { layout: 'grid', align: 'start', class: { item: 'justify-start' } },
+  ],
+  defaultVariants: { layout: 'grid', columns: '4', logoHeight: 'md', style: 'plain', align: 'center', tone: 'default' },
 })
 
 interface Item {
@@ -40,30 +67,68 @@ interface Item {
 interface Props {
   heading?: string | undefined
   items: Item[]
-  columns?: '2' | '3' | '4' | undefined
-  style?: 'plain' | 'grayscale' | undefined
+  layout?: 'grid' | 'row' | 'marquee' | undefined
+  columns?: '2' | '3' | '4' | '5' | '6' | undefined
+  logoHeight?: 'sm' | 'md' | 'lg' | undefined
+  style?: 'plain' | 'grayscale' | 'mono-light' | undefined
+  align?: 'center' | 'start' | undefined
   tone?: Tone | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
+  measured?: MeasuredStyle | undefined
   id?: string | undefined
 }
 
-const { heading, items, columns, style, tone, id } = Astro.props
-const s = cloud({ columns, style, tone })
+const { heading, items, layout, columns, logoHeight, style, align, tone, measured, id } = Astro.props
+const s = cloud({ layout, columns, logoHeight, style, align, tone })
+// Measured columns and gap shape the grid layout only; a row or a strip keeps its own flow.
+const grid = (layout ?? 'grid') === 'grid' ? measuredGrid(measured) : undefined
 const headingId = heading && id ? `${id}-title` : undefined
+const marquee = layout === 'marquee'
+// A linked logo with no name is read as the site it goes to, never as a made-up word.
+const hostOf = (href: string) => {
+  try { return new URL(href, 'https://x.invalid').host.replace(/^www\./, '').replace(/^x\.invalid$/, '') } catch { return '' }
+}
+const shown = items.flatMap((item) => {
+  const image = imageOf(item.image, item.imageAlt || (item.href ? hostOf(item.href) : ''))
+  return image ? [{ image, href: item.href }] : []
+})
+// About four seconds a logo: the strip reads at a pace, whatever its length.
+const duration = `${Math.max(20, shown.length * 4)}s`
 ---
-<Section tone={tone} id={id} aria-labelledby={headingId}>
+<Section measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
   {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
-  <ul class={s.list()}>
-    {items.map(item => {
-      const image = imageOf(item.image, item.imageAlt)
-      if (!image) return null
-      const logo = <KitImage image={image} sizes="160px" class={s.logo()} />
-      return (
+  <div class:list={[marquee && 'kit-marquee overflow-hidden']} style={marquee ? `--kit-marquee-duration:${duration}` : undefined}>
+    <ul class={s.list({ class: grid })}>
+      {shown.map(({ image, href }) => (
         <li class={s.item()}>
-          {item.href
-            ? <a href={item.href} class="group rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4">{logo}</a>
-            : <span class="group">{logo}</span>}
+          {href
+            ? <a href={safeHref(href)} class="group rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4"><KitImage image={image} sizes="160px" class={s.logo()} /></a>
+            : <span class="group"><KitImage image={image} sizes="160px" class={s.logo()} /></span>}
         </li>
-      )
-    })}
-  </ul>
+      ))}
+    </ul>
+    {marquee && (
+      // The second copy exists only to close the loop: hidden from assistive technology and from the tab order.
+      <ul class={`${s.list()} kit-marquee-copy`} aria-hidden="true" inert>
+        {shown.map(({ image }) => (
+          <li class={s.item()}><span class="group"><KitImage image={image} sizes="160px" class={s.logo()} /></span></li>
+        ))}
+      </ul>
+    )}
+  </div>
 </Section>
+<style>
+  /* Reduced motion (the default here): one wrapped row, no copy. */
+  .kit-marquee .kit-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; }
+  .kit-marquee .kit-marquee-copy { display: none; }
+  @media (prefers-reduced-motion: no-preference) {
+    .kit-marquee { display: flex; width: 100%; mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
+    .kit-marquee .kit-marquee-track,
+    .kit-marquee .kit-marquee-copy { display: flex; flex-wrap: nowrap; width: max-content; flex-shrink: 0; justify-content: flex-start; padding-inline-end: 3rem; animation: kit-marquee var(--kit-marquee-duration, 40s) linear infinite; }
+    .kit-marquee:hover .kit-marquee-track,
+    .kit-marquee:hover .kit-marquee-copy,
+    .kit-marquee:focus-within .kit-marquee-track,
+    .kit-marquee:focus-within .kit-marquee-copy { animation-play-state: paused; }
+  }
+  @keyframes kit-marquee { to { transform: translateX(-100%); } }
+</style>