@sarimarcus/content-sites-ui 0.5.0 → 0.6.0-rc.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.6.0-rc.0 (2026-09-30)
+
+- `./primitives`: `Button` (variants `primary`, `secondary`, `hero`, `ghost`, `secondarySolid`; typed anchor passthrough), `Callout` (`tip`, `warning`, `info`, `success`), `FeatureList` (`color` is a theme role; heading only when titled), `Blockquote`, `SectionHeader`; Button and LinkArrow share one new-tab rule (SLA-2821).
+
 ## 0.5.0 (2026-09-29)
 
 - Stable release of 0.5.0-rc.0, unchanged: adopted on all three sites with every page identical outside class attributes and every class change a declared brand→role pair; screenshots unchanged (SLA-2821).

package/README.md

@@ -11,7 +11,7 @@ text arrives through props and slots.
 ## Primitives
 
 ```ts
-import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, PILL_BASE, isBadgeLength, PRICE_LABEL_MAX } from '@sarimarcus/content-sites-ui/primitives';
+import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, Button, Callout, FeatureList, Blockquote, SectionHeader, PILL_BASE, isBadgeLength, PRICE_LABEL_MAX } from '@sarimarcus/content-sites-ui/primitives';
 ```
 
 - `Icon`: any Lucide icon by kebab-case name.
@@ -29,6 +29,18 @@ import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, PILL_BASE, is
 - `LinkArrow`: a text link with a trailing arrow. `color` is `primary` (default), `secondary`, `accent` or `onImage`;
   `size` is `sm` (default) or `base`. An `http(s)` href opens in a new tab with `rel="noopener noreferrer"`; an
   explicit `target` (`_blank` or `_self`) or `rel` overrides that. Attributes render as `href target rel class`.
+- `Button`: a link styled as a button. `variant` is `primary` (default, solid), `secondary` (an outline in the
+  primary colour), `secondarySolid` (solid in the secondary colour), `hero` (frosted glass over a photo) or `ghost`
+  (for dark themes). Same new-tab rule as LinkArrow: an `http(s)` href gets `target="_blank"`, and a new tab gets
+  `rel="noopener noreferrer"`, unless `target` or `rel` is given. Attributes render as `href rel target class`,
+  then every other anchor attribute (`data-*`, `aria-*`, `slot`) in the order passed.
+- `Callout`: a boxed note with an icon. `type` is `info` (default), `tip`, `warning` or `success`; `title` is optional.
+- `FeatureList`: a checklist or a row of tags from `items` (rendered with `set:html`). `color` is `primary`
+  (default), `secondary` or `accent`; `container` boxes it, `compact` tightens it, `headingLevel` sets the heading
+  (default `h2`), which renders only for a non-empty `title`; `footer` adds a line under a border.
+- `Blockquote`: a centred pull-quote, `quote` plus an optional `source`.
+- `SectionHeader`: an icon tile (slot `icon`), an `h2` `title` and an optional `action` slot. `iconBg` and
+  `iconColor` are raw classes the site supplies.
 - `PILL_BASE`: the shared pill geometry. `isBadgeLength`, `BADGE_MAX_CHARS`, `PRICE_LABEL_MAX`: the label-length
   limits a call site branches on (pill or prose); a price-range schema `.max()` must equal `PRICE_LABEL_MAX`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.5.0",
+  "version": "0.6.0-rc.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -42,6 +42,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.5.0"
+    "@sarimarcus/content-sites-core": "0.6.0-rc.0"
   }
 }

package/src/primitives/Blockquote.astro

@@ -0,0 +1,30 @@
+---
+/**
+ * Blockquote — editorial pull-quote for article/guide pages.
+ *
+ * Bold typographic treatment: large display serif, generous whitespace,
+ * no card/box/border. The size and space ARE the design.
+ *
+ * Usage:
+ *   <Blockquote quote="The market is where you belong." source="Local saying" />
+ */
+
+interface Props {
+  quote: string;
+  source?: string;
+  class?: string;
+}
+
+const { quote, source, class: className = '' } = Astro.props;
+---
+
+<figure class:list={['py-10 sm:py-14 text-center max-w-measure mx-auto', className]}>
+  <blockquote class="text-2xl sm:text-3xl text-foreground/80 leading-snug font-display">
+    &ldquo;{quote}&rdquo;
+  </blockquote>
+  {source && (
+    <figcaption class="mt-4 text-xs tracking-widest uppercase text-primary/60">
+      {source}
+    </figcaption>
+  )}
+</figure>

package/src/primitives/Button.astro

@@ -0,0 +1,38 @@
+---
+import { newTab } from './newTab';
+// A link styled as a button. Extends the anchor attributes so data-* (the GA4 tracking hooks) and aria-*
+// reach the <a>, without an index signature that would swallow a mistyped prop name.
+interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
+  href: string;
+  variant?: 'primary' | 'secondary' | 'secondarySolid' | 'hero' | 'ghost';
+  class?: string;
+  /** Overrides the http(s) detection, which opens off-site links in a new tab. */
+  target?: string;
+  /** Explicit rel, required for affiliate/sponsored links. Defaults to 'noopener noreferrer' on a new tab. */
+  rel?: string;
+}
+const { href, variant = 'primary', rel, target, class: className = '', ...rest } = Astro.props;
+
+const { target: resolvedTarget, rel: resolvedRel } = newTab(href, target, rel);
+
+const base = 'inline-flex items-center justify-center gap-2 px-5 py-3 rounded-lg font-medium transition-[background-color,border-color,color,box-shadow,transform] duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary';
+
+const variants = {
+  primary: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary-strong hover:shadow-md active:translate-y-px',
+  // An outline in the primary colour.
+  secondary: 'border border-primary/40 text-primary hover:bg-primary/8 hover:border-primary/70',
+  secondarySolid: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-strong hover:shadow-md active:translate-y-px',
+  hero: 'text-overlay-foreground bg-overlay-foreground/15 border border-overlay-foreground/30 backdrop-blur-sm shadow-lg hover:bg-overlay-foreground/25 hover:border-overlay-foreground/50 hover:shadow-xl',
+  // For dark themes (dark card, light foreground) over a photo or tinted card; on a light theme it reads as a pale outline.
+  ghost: 'border border-card/45 bg-card/8 text-foreground hover:border-card hover:bg-card/16 hover:text-foreground',
+};
+---
+<a
+  href={href}
+  rel={resolvedRel}
+  target={resolvedTarget}
+  class:list={[base, variants[variant], className]}
+  {...rest}
+>
+  <slot />
+</a>

package/src/primitives/Callout.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * Callout — highlighted info box for tips, warnings, and notices.
+ *
+ * Usage:
+ *   <Callout type="tip" title="Good to know">
+ *     Content here...
+ *   </Callout>
+ */
+
+import Icon from './Icon.astro';
+
+interface Props {
+  type?: 'tip' | 'warning' | 'info' | 'success';
+  title?: string;
+  class?: string;
+}
+
+const { type = 'info', title, class: className = '' } = Astro.props;
+
+const styles: Record<string, { border: string; bg: string; icon: string; iconName: string }> = {
+  tip: {
+    border: 'border-primary/40',
+    bg: 'bg-primary/5',
+    icon: 'text-primary',
+    iconName: 'star',
+  },
+  warning: {
+    border: 'border-accent/40',
+    bg: 'bg-accent/5',
+    icon: 'text-accent-strong',
+    iconName: 'sun',
+  },
+  info: {
+    border: 'border-secondary/40',
+    bg: 'bg-secondary/5',
+    icon: 'text-secondary',
+    iconName: 'info',
+  },
+  // `success` adds no fourth hue: it is the strong end of the secondary role over the muted surface,
+  // distinct from `info`'s tinted box, with `circle-check` carrying the meaning.
+  success: {
+    border: 'border-secondary-strong/50',
+    bg: 'bg-muted',
+    icon: 'text-secondary-strong',
+    iconName: 'circle-check',
+  },
+};
+
+const s = styles[type] || styles.info;
+---
+
+<div class:list={[`p-4 border ${s.border} ${s.bg} rounded-lg`, className]}>
+  <div class="flex gap-3">
+    <Icon name={s.iconName} class={`w-5 h-5 ${s.icon} shrink-0 mt-0.5`} />
+    <div class="min-w-0">
+      {title && <p class="font-medium text-foreground mb-1">{title}</p>}
+      <div class="text-sm text-muted-foreground leading-relaxed">
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>

package/src/primitives/FeatureList.astro

@@ -0,0 +1,124 @@
+---
+/**
+ * FeatureList — reusable list display for specialties, ingredients, features.
+ *
+ * `items[]` and `footer` render with set:html, so callers may pass inline markup
+ * (already-parsed markdown from parseMarkdownInline) or plain text. Plain strings
+ * are unaffected: at the time of the change the 9,923 item strings in content
+ * JSON contained no angle brackets and no entity-like ampersands, and the
+ * rendered list output was byte-identical across all 462 list items on the three
+ * active sites. Callers passing author-written markdown must parse it first —
+ * see the `checklist` branch of the site's interlude dispatcher.
+ *
+ * The heading renders only for a non-empty `title`.
+ *
+ * Usage:
+ *   <FeatureList title="Specialities" items={bar.specialties} icon="star" />
+ *   <FeatureList title="House specialities" items={restaurant.specialties} variant="tags" color="accent" container />
+ *   <FeatureList title="Main ingredients" items={dish.mainIngredients} icon="star" color="accent" container footer="<strong>Allergens:</strong> gluten, dairy" />
+ */
+
+import Icon from './Icon.astro';
+
+interface Props {
+  title?: string;
+  items: string[];
+  variant?: 'checklist' | 'tags';
+  color?: 'primary' | 'accent' | 'secondary';
+  icon?: string;
+  container?: boolean;
+  /** Tighter padding/margin for space-constrained contexts (e.g. article interludes). */
+  compact?: boolean;
+  footer?: string;
+  headingLevel?: 'h2' | 'h3' | 'h4';
+  class?: string;
+}
+
+const {
+  title,
+  items,
+  variant = 'checklist',
+  color = 'primary',
+  icon,
+  container = false,
+  compact = false,
+  footer,
+  headingLevel = 'h2',
+  class: className = '',
+} = Astro.props;
+
+const Heading = headingLevel;
+
+const colorMap = {
+  primary: {
+    heading: 'text-primary',
+    icon: 'text-primary',
+    containerBg: 'bg-primary/5 border border-primary/20',
+    itemBg: 'bg-muted/30',
+    tagBg: 'bg-primary/10',
+    footerBorder: 'border-primary/10',
+  },
+  accent: {
+    heading: 'text-accent',
+    icon: 'text-accent',
+    containerBg: 'bg-accent/5 border border-accent/20',
+    itemBg: 'bg-card border border-border',
+    tagBg: 'bg-accent/10',
+    footerBorder: 'border-accent/10',
+  },
+  secondary: {
+    heading: 'text-secondary',
+    icon: 'text-secondary',
+    containerBg: 'bg-secondary/5 border border-secondary/20',
+    itemBg: 'bg-muted/30',
+    tagBg: 'bg-secondary/10',
+    footerBorder: 'border-secondary/10',
+  },
+};
+
+const colors = colorMap[color];
+
+const titleClass = container
+  ? `text-xl font-display font-semibold text-foreground ${compact ? 'mb-3' : 'mb-5'} flex items-center gap-2`
+  : 'text-xl font-medium mb-5 flex items-center gap-2 font-display';
+---
+
+{items.length > 0 && (
+  <div
+    class:list={[
+      container ? `${compact ? 'p-4 sm:p-5 lg:p-6' : 'p-6 lg:p-8'} ${colors.containerBg} rounded-xl` : '',
+      className,
+    ]}
+    data-pagefind-ignore
+  >
+    {title && (
+      <Heading class={titleClass}>
+        {icon && <Icon name={icon} class={`w-5 h-5 ${colors.icon}`} />}
+        {container ? title : <span class={colors.heading}>{title}</span>}
+      </Heading>
+    )}
+
+    {variant === 'checklist' ? (
+      <ul class:list={['grid grid-cols-1 sm:grid-cols-2', compact ? 'gap-2' : 'gap-2.5']}>
+        {items.map((item) => (
+          <li class:list={['flex items-start gap-3 rounded-lg', compact ? 'px-3 py-2.5' : 'px-4 py-3', colors.itemBg]}>
+            <Icon name="check" class={`w-5 h-5 ${colors.icon} shrink-0 mt-0.5`} />
+            <span class="text-sm text-foreground leading-relaxed" set:html={item} />
+          </li>
+        ))}
+      </ul>
+    ) : (
+      <div class="flex flex-wrap gap-2">
+        {items.map((item) => (
+          <span class:list={['px-4 py-2 rounded-lg text-sm font-medium text-foreground', colors.tagBg]} set:html={item} />
+        ))}
+      </div>
+    )}
+
+    {footer && (
+      <div class={`mt-5 pt-5 border-t ${colors.footerBorder}`}>
+        <p class="text-base text-muted-foreground" set:html={footer} />
+      </div>
+    )}
+  </div>
+)}

package/src/primitives/LinkArrow.astro

@@ -1,4 +1,5 @@
 ---
+import { newTab } from './newTab';
 interface Props {
   href: string;
   size?: 'sm' | 'base';
@@ -11,9 +12,7 @@ interface Props {
 }
 const { href, size = 'sm', color = 'primary', target: targetProp, rel: relProp, class: className = '' } = Astro.props;
 
-const isExternal = href.startsWith('http://') || href.startsWith('https://');
-const target = targetProp ?? (isExternal ? '_blank' : undefined);
-const rel = relProp ?? (target === '_blank' ? 'noopener noreferrer' : undefined);
+const { target, rel } = newTab(href, targetProp, relProp);
 
 const sizeClass = size === 'base' ? 'text-base font-medium' : 'text-sm font-medium';
 const colorClass = {

package/src/primitives/SectionHeader.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+  title: string;
+  /** Background colour class for the icon tile, owned by the site. */
+  iconBg: string;
+  /** Text colour class for the icon, owned by the site. */
+  iconColor: string;
+  class?: string;
+}
+
+const { title, iconBg, iconColor, class: className = '' } = Astro.props;
+---
+
+<div class:list={["flex items-center gap-3 mb-8", className]}>
+  <div class:list={["w-10 h-10 rounded-lg flex items-center justify-center", iconBg]}>
+    <span class:list={["w-5 h-5 [&>svg]:w-full [&>svg]:h-full", iconColor]}>
+      <slot name="icon" />
+    </span>
+  </div>
+  <h2 class="text-2xl sm:text-3xl font-normal font-display">{title}</h2>
+  <slot name="action" />
+</div>

package/src/primitives/index.ts

@@ -5,5 +5,10 @@ export { default as Chip } from './Chip.astro';
 export { default as ArrowLabel } from './ArrowLabel.astro';
 export { default as SectionDivider } from './SectionDivider.astro';
 export { default as LinkArrow } from './LinkArrow.astro';
+export { default as Button } from './Button.astro';
+export { default as Callout } from './Callout.astro';
+export { default as FeatureList } from './FeatureList.astro';
+export { default as Blockquote } from './Blockquote.astro';
+export { default as SectionHeader } from './SectionHeader.astro';
 export { PILL_BASE } from './pillRecipe';
 export { BADGE_MAX_CHARS, PRICE_LABEL_MAX, isBadgeLength } from './badgeText';

package/src/primitives/newTab.ts

@@ -0,0 +1,7 @@
+/** Link target and rel shared by Button and LinkArrow: an http(s) href opens in a new tab unless `target` is given,
+ * and a new tab gets `noopener noreferrer` unless `rel` is given. */
+export function newTab(href: string, target?: string, rel?: string) {
+  const isExternal = href.startsWith('http://') || href.startsWith('https://');
+  const resolvedTarget = target ?? (isExternal ? '_blank' : undefined);
+  return { target: resolvedTarget, rel: rel ?? (resolvedTarget === '_blank' ? 'noopener noreferrer' : undefined) };
+}