@contentrain/astro-kit 0.49.3 → 0.50.1

package/catalog.json

@@ -3566,7 +3566,7 @@
     {
       "id": "header",
       "name": "Header",
-      "description": "Site header: brand (logo and/or name), navigation and an optional call-to-action button.",
+      "description": "Site header: brand (logo and/or name), navigation, an optional call-to-action button and an optional utility row above the bar (phone, mail, address, hours).",
       "category": "chrome",
       "uses": [
         "nav",
@@ -3739,7 +3739,23 @@
               ]
             }
           },
-          "description": "Header button, shown on wide screens."
+          "description": "Header button, on every screen width."
+        },
+        "strip": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "fields": {
+              "label": {
+                "type": "string",
+                "required": true
+              },
+              "href": {
+                "type": "url"
+              }
+            }
+          },
+          "description": "A row above the bar for what the source's header prints next to its menu: a phone number, a mail address, the address, the opening hours. A line with an href is a link (tel:, mailto:, a page). On a phone it folds into the menu drawer after the menu; with no menu it stays above the bar."
         },
         "search": {
           "type": "object",
@@ -4664,6 +4680,22 @@
         "part": {
           "type": "string",
           "description": "What the navigation is, for checks that find a page's parts (data-cr-part), e.g. \"nav-header\"."
+        },
+        "extra": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "fields": {
+              "label": {
+                "type": "string",
+                "required": true
+              },
+              "href": {
+                "type": "url"
+              }
+            }
+          },
+          "description": "Lines after the menu in the narrow-screen menu (a header's phone, address, hours); a line with an href is a link."
         }
       },
       "slots": {},

package/components/header/Header.astro

@@ -1,6 +1,6 @@
 ---
-// Site header: brand (logo and/or name), navigation and an optional call to
-// action.
+// Site header: brand (logo and/or name), navigation, an optional call to
+// action and an optional utility row above the bar (phone, mail, address, hours).
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
 import KitImage from '../_shared/KitImage.astro'
@@ -63,7 +63,14 @@ interface Props {
   showName?: boolean | undefined
   homeHref?: string | undefined
   items: NavItem[]
+  /** The header's button, on every screen width. */
   action?: ActionInput | undefined
+  /**
+   * A row above the bar for what the source's header prints next to its menu: a phone number, a mail address, the
+   * address, the opening hours. A line with an `href` is a link (`tel:`, `mailto:`, a page). On a phone the row folds
+   * into the menu drawer, after the menu; with no menu it stays above the bar.
+   */
+  strip?: Array<{ label: string, href?: string | undefined }> | undefined
   /** A search field in the bar (a GET form to the site's search page); below the bar until lg. */
   search?: { label?: string | undefined, placeholder?: string | undefined, submitLabel?: string | undefined, action?: string | undefined } | undefined
   navLabel?: string | undefined
@@ -76,7 +83,7 @@ interface Props {
   menu?: 'flyout' | 'mega' | undefined
 }
 
-const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, brandColor, logo, showName = true, homeHref = '/', items, action, search, navLabel, menuLabel, closeLabel, layout, tone, position, menu } = Astro.props
+const { siteName, tagline, brandSize, brandWeight, brandTracking, bordered, offsetTop, padTop, padBottom, linkNav, brandColor, logo, showName = true, homeHref = '/', items, action, strip = [], search, navLabel, menuLabel, closeLabel, layout, tone, position, menu } = Astro.props
 const { root, inner, brand } = header({ layout, tone, position, bordered })
 // The header's search field: `header-search` on a page, a second header's its own (its label points at its own input).
 const searchId = search ? instanceId(Astro.locals, undefined, 'header-search') : undefined
@@ -84,11 +91,22 @@ const rootStyle = offsetTop ? `margin-top: ${offsetTop}` : undefined
 const innerStyle = [padTop && `padding-top: ${padTop}`, padBottom && `padding-bottom: ${padBottom}`].filter(Boolean).join('; ') || undefined
 const brandColour = brandColorValue(brandColor)
 const brandStyle = [brandSize && `font-size: ${brandSize}`, brandWeight && `font-weight: ${brandWeight}`, brandTracking && `letter-spacing: ${brandTracking}`, brandColour && `color: ${brandColour}`].filter(Boolean).join('; ') || undefined
+// The row above the bar folds into the drawer only where there is one: Nav prints nothing without items.
+const stripFolds = items.length > 0
 // A tagline under the name keeps its line on a phone, as themes print it: the navigation wraps below.
 // The search field sits in the bar from lg; at md the bar already holds the navigation, so the field keeps its own row.
 const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-nowrap' : undefined
 ---
 <header class={root()} style={rootStyle}>
+  {strip.length > 0 && (
+    <div class:list={['border-b border-current/10 text-sm', stripFolds && 'hidden md:block']} data-kit-strip>
+      <ul class={`container-page flex flex-wrap items-center justify-end gap-x-6 gap-y-1 py-2 ${muted}`}>
+        {strip.map(line => (
+          <li>{line.href ? <a href={safeHref(line.href)} class="text-current no-underline hover:underline">{line.label}</a> : line.label}</li>
+        ))}
+      </ul>
+    </div>
+  )}
   <div class={inner({ class: wrap })} style={innerStyle}>
     {tagline
       ? (
@@ -112,8 +130,8 @@ const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-
       </div>
     )}
     <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ms-auto']}>
-      <Nav items={items} menu={menu} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
-      {action && <Button action={action} size="sm" class="hidden md:inline-flex" />}
+      <Nav items={items} menu={menu} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" extra={stripFolds ? strip : undefined} color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
+      {action && <Button action={action} size="sm" />}
     </div>
   </div>
 </header>

package/components/header/fixtures.json

@@ -20,7 +20,16 @@
       "action": {
         "label": "Subscribe",
         "href": "/subscribe/"
-      }
+      },
+      "strip": [
+        {
+          "label": "(417) 522-7711",
+          "href": "tel:+14175227711"
+        },
+        {
+          "label": "Mon–Fri 9:00–17:00"
+        }
+      ]
     }
   },
   {

package/components/header/meta.json

@@ -1,7 +1,7 @@
 {
   "id": "header",
   "name": "Header",
-  "description": "Site header: brand (logo and/or name), navigation and an optional call-to-action button.",
+  "description": "Site header: brand (logo and/or name), navigation, an optional call-to-action button and an optional utility row above the bar (phone, mail, address, hours).",
   "category": "chrome",
   "uses": ["nav", "search-box"],
   "shared": ["Button.astro", "KitImage.astro", "image-widths.ts", "instance-id.ts", "muted.ts", "safe-url.ts", "types.ts"],
@@ -27,7 +27,8 @@
     "showName": { "type": "boolean", "default": true, "description": "Show the site name next to the logo." },
     "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." },
+    "action": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "style": { "type": "select", "options": ["primary", "secondary", "ghost"] } }, "description": "Header button, on every screen width." },
+    "strip": { "type": "array", "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url" } } }, "description": "A row above the bar for what the source's header prints next to its menu: a phone number, a mail address, the address, the opening hours. A line with an href is a link (tel:, mailto:, a page). On a phone it folds into the menu drawer after the menu; with no menu it stays above the bar." },
     "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)." },

package/components/nav/Nav.astro

@@ -50,11 +50,13 @@ interface Props {
   color?: 'current' | 'link' | undefined
   /** Unique per page when a page has two navigations. */
   id?: string | undefined
+  /** Lines after the menu in the narrow-screen menu (a header's phone, address, hours); a line with an `href` is a link. */
+  extra?: Array<{ label: string, href?: string | undefined }> | undefined
   /** What the navigation is, for checks that find a page's parts (`data-cr-part`, e.g. "nav-header"). */
   part?: string | undefined
 }
 
-const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', menu, align, density, color, id: givenId, part } = Astro.props
+const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', menu, align, density, color, extra = [], id: givenId, part } = Astro.props
 // Two on one page never share an id: their labels and controls would point into each other.
 const id = instanceId(Astro.locals, givenId, 'site-nav')
 const { list, link, sub, toggle } = nav({ menu, align, density, color })
@@ -117,6 +119,13 @@ const real = (href: string | undefined) => !!href && href !== '#'
                   {item.children && item.children.length > 0 && <NavTree items={item.children} current={current} kind="drawer" />}
                 </li>
               ))}
+              {extra.map((line, index) => (
+                <li class={index === 0 ? 'mt-4 border-t border-line pt-4' : undefined}>
+                  {line.href
+                    ? <a href={safeHref(line.href)} class="block rounded-md px-3 py-2 text-sm text-ink no-underline hover:bg-surface-muted">{line.label}</a>
+                    : <span class="block px-3 py-2 text-sm text-ink">{line.label}</span>}
+                </li>
+              ))}
             </ul>
           </div>
         </>
@@ -136,6 +145,13 @@ const real = (href: string | undefined) => !!href && href !== '#'
                 {item.children && item.children.length > 0 && <NavTree items={item.children} current={current} kind="drawer" />}
               </li>
             ))}
+            {extra.map((line, index) => (
+              <li class={index === 0 ? 'mt-2 border-t border-line pt-2' : undefined}>
+                {line.href
+                  ? <a href={safeHref(line.href)} class="block rounded-md px-3 py-2 text-sm text-ink no-underline hover:bg-surface-muted">{line.label}</a>
+                  : <span class="block px-3 py-2 text-sm text-ink">{line.label}</span>}
+              </li>
+            ))}
           </ul>
         </details>
       )}

package/components/nav/meta.json

@@ -97,6 +97,22 @@
     "part": {
       "type": "string",
       "description": "What the navigation is, for checks that find a page's parts (data-cr-part), e.g. \"nav-header\"."
+    },
+    "extra": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "fields": {
+          "label": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "url"
+          }
+        }
+      },
+      "description": "Lines after the menu in the narrow-screen menu (a header's phone, address, hours); a line with an href is a link."
     }
   },
   "slots": {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.49.3",
+  "version": "0.50.1",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",
@@ -42,7 +42,7 @@
     "mapping"
   ],
   "dependencies": {
-    "@contentrain/types": "1.75.0"
+    "@contentrain/types": "1.77.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",