@ciderpress/ui 1.0.0-rc.1 → 1.0.0-rc.11

package/dist/theme/components/home/tabs.tsx

@@ -0,0 +1,351 @@
+import type { HomeVisual } from '@ciderpress/config'
+import { match, P } from 'massaman/match'
+import type React from 'react'
+import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
+
+import { renderRichText, toPlainText } from '../../lib/rich-text.tsx'
+import { RouteLink } from '../../lib/route-link.tsx'
+import { safeUrl } from '../../lib/safe-url.ts'
+import { CardIcon } from '../shared/card-icon'
+import type { CardIconInput } from '../shared/resolve-card-icon'
+import { resolveCardIcon } from '../shared/resolve-card-icon'
+import { HomeVisualView } from './home-visual'
+
+import './tabs.css'
+
+/**
+ * CTA rendered at the bottom of a tab panel's copy. Mirrors
+ * `SplitAction` — the `ButtonConfig` from config is mapped into this
+ * shape by the home layout.
+ */
+export interface TabsAction {
+  /**
+   * Visible label.
+   */
+  readonly text: string
+  /**
+   * Destination URL.
+   */
+  readonly link: string
+  /**
+   * Visual style — `brand` is the filled primary, `alt` is the outline.
+   */
+  readonly theme?: 'brand' | 'alt'
+}
+
+/**
+ * One tab in the strip plus the copy and visual its panel shows while
+ * selected. Frontmatter-shaped: icons arrive pre-serialized from the
+ * sync engine.
+ */
+export interface HomeTabEntry {
+  /**
+   * Tab label rendered in the strip.
+   */
+  readonly label: string
+  /**
+   * Icon rendered before the label.
+   */
+  readonly icon?: CardIconInput
+  /**
+   * Panel headline. Falls back to {@link HomeTabEntry.label}.
+   */
+  readonly title?: string
+  /**
+   * Panel body copy.
+   */
+  readonly body?: string
+  /**
+   * Checkmark bullets rendered under the body.
+   */
+  readonly bullets?: readonly string[]
+  /**
+   * CTA rendered at the bottom of the panel copy.
+   */
+  readonly cta?: TabsAction
+  /**
+   * Visual rendered in the panel while the tab is selected.
+   */
+  readonly visual?: HomeVisual
+}
+
+/**
+ * Props for {@link HomeTabs} — the section heading trio, the tab
+ * entries, and how the strip is laid out against the panel.
+ */
+export interface HomeTabsProps {
+  /**
+   * Eyebrow label rendered above the section title.
+   */
+  readonly eyebrow?: string
+  /**
+   * Section title rendered above the strip.
+   */
+  readonly title?: string
+  /**
+   * Supporting sentence rendered under the section title.
+   */
+  readonly body?: string
+  /**
+   * Tabs rendered in the strip, in order.
+   */
+  readonly items: readonly HomeTabEntry[]
+  /**
+   * Strip placement. `vertical` (default) stacks the tabs beside the
+   * panel; `horizontal` runs them in a row above it.
+   */
+  readonly orientation?: 'vertical' | 'horizontal'
+  /**
+   * Flip a vertical band's columns — panel left, strip right. Ignored
+   * when horizontal.
+   */
+  readonly reverse?: boolean
+}
+
+/**
+ * HomeTabs — a strip of selectable tabs driving one panel. Clicking a tab
+ * swaps the panel's copy and visual; the first tab is selected on load.
+ *
+ * Built on react-aria-components `Tabs`, so roving focus, arrow-key
+ * navigation, and the tab/tabpanel ARIA wiring come from the library
+ * rather than being hand-rolled.
+ *
+ * @param props - Heading trio, tab entries, orientation, and column order.
+ * @returns React element with the tab band, or null when there are no tabs.
+ */
+export function HomeTabs(props: HomeTabsProps): React.ReactElement | null {
+  const { eyebrow, title, body, items, orientation, reverse } = props
+  // Frontmatter is unvalidated user content on hand-authored home pages —
+  // treat anything that is not a populated array as "no band".
+  const list = match(items)
+    .with(
+      P.when((i): i is readonly HomeTabEntry[] => Array.isArray(i) && i.length > 0),
+      (i) => i
+    )
+    .otherwise(() => null)
+  if (list === null) {
+    return null
+  }
+
+  const axis = match(orientation)
+    .with('horizontal', () => 'horizontal' as const)
+    .otherwise(() => 'vertical' as const)
+  const sectionClass = match(reverse ?? false)
+    .with(true, () => `cp-tabs cp-tabs--${axis} cp-tabs--reverse`)
+    .otherwise(() => `cp-tabs cp-tabs--${axis}`)
+  // aria-label takes a bare string — strip any markup the title carries.
+  const listLabel = match(title)
+    .with(P.string, (t) => toPlainText(t))
+    .otherwise(() => 'Highlights')
+
+  return (
+    <section className={sectionClass}>
+      {renderHead({ eyebrow, title, body })}
+      <Tabs className="cp-tabs__inner" orientation={axis}>
+        <TabList className="cp-tabs__list" aria-label={listLabel}>
+          {list.map((item, index) => (
+            <Tab key={`${item.label}-${index}`} id={String(index)} className="cp-tabs__tab">
+              {renderTabIcon(item.icon)}
+              {/* Plain text, not rich: the tab is already an interactive
+                  `role="tab"`, and a markdown link in a label would nest an
+                  anchor inside it — invalid DOM that breaks keyboard
+                  traversal and screen-reader announcement. */}
+              <span className="cp-tabs__tab-label">{toPlainText(item.label)}</span>
+            </Tab>
+          ))}
+        </TabList>
+        {list.map((item, index) => (
+          <TabPanel
+            key={`${item.label}-${index}`}
+            id={String(index)}
+            className={panelClass(item.visual)}
+          >
+            {renderPanelCopy(item, axis)}
+            {renderPanelVisual(item.visual)}
+            {match(axis)
+              .with('vertical', () => renderPanelCta(item.cta))
+              .otherwise(() => null)}
+          </TabPanel>
+        ))}
+      </Tabs>
+    </section>
+  )
+}
+
+/**
+ * Heading trio rendered above the strip.
+ *
+ * @private
+ */
+interface TabsHead {
+  readonly eyebrow?: string
+  readonly title?: string
+  readonly body?: string
+}
+
+/**
+ * Render the section heading, or nothing when every field is absent.
+ * Reuses the shared feature-section head so the typography matches the
+ * other home blocks.
+ *
+ * @private
+ * @param head - Heading trio from the block
+ * @returns Heading element, or null
+ */
+function renderHead(head: TabsHead): React.ReactElement | null {
+  const { eyebrow, title, body } = head
+  const hasContent = [eyebrow, title, body].some((value) => typeof value === 'string')
+  if (!hasContent) {
+    return null
+  }
+  return (
+    <div className="cp-feature-section-head">
+      {match(eyebrow)
+        .with(P.string, (e) => (
+          <div className="cp-feature-section-head__eyebrow">{renderRichText(e)}</div>
+        ))
+        .otherwise(() => null)}
+      {match(title)
+        .with(P.string, (t) => (
+          <h2 className="cp-feature-section-head__title">{renderRichText(t)}</h2>
+        ))
+        .otherwise(() => null)}
+      {match(body)
+        .with(P.string, (s) => <p className="cp-feature-section-head__sub">{renderRichText(s)}</p>)
+        .otherwise(() => null)}
+    </div>
+  )
+}
+
+/**
+ * Render a tab's leading icon. Keeps the shared `cp-card__icon` chip so
+ * the colour variants come from the card stylesheet; tabs.css only
+ * shrinks it to fit the strip.
+ *
+ * @private
+ * @param icon - Serialized icon from frontmatter
+ * @returns Icon element, or null when the tab has no icon
+ */
+function renderTabIcon(icon: CardIconInput | undefined): React.ReactElement | null {
+  const resolved = resolveCardIcon(icon)
+  return match(resolved)
+    .with(P.nonNullable, (r) => <CardIcon resolved={r} />)
+    .otherwise(() => null)
+}
+
+/**
+ * Class for a panel, collapsing it to a single column when the selected
+ * tab carries no visual — otherwise a horizontal band would leave half
+ * the row empty.
+ *
+ * @private
+ * @param visual - The selected tab's optional visual
+ * @returns Panel class name
+ */
+function panelClass(visual: HomeVisual | undefined): string {
+  return match(visual)
+    .with(P.nullish, () => 'cp-tabs__panel cp-tabs__panel--full')
+    .otherwise(() => 'cp-tabs__panel')
+}
+
+/**
+ * Which way the tab strip runs relative to its panel.
+ *
+ * @private
+ */
+type TabsAxis = 'horizontal' | 'vertical'
+
+/**
+ * Render a panel's copy column: headline, body, bullets, and, on the
+ * horizontal axis, the CTA. The headline falls back to the tab label so
+ * a minimal entry still reads as a titled panel.
+ *
+ * The CTA's home depends on the axis. Horizontal lays copy and visual out
+ * as side-by-side columns, so the CTA closes the copy column. Vertical
+ * stacks them, where that same placement would wedge the button between
+ * the body text and the visual, so the panel renders it last instead.
+ *
+ * @private
+ * @param item - The selected tab entry
+ * @param axis - Orientation the band is rendering on
+ * @returns Copy column element
+ */
+function renderPanelCopy(item: HomeTabEntry, axis: TabsAxis): React.ReactElement {
+  const heading = match(item.title)
+    .with(P.string, (t) => t)
+    .otherwise(() => item.label)
+  const bullets = item.bullets ?? []
+
+  return (
+    <div className="cp-tabs__copy">
+      <h3 className="cp-tabs__title">{renderRichText(heading)}</h3>
+      {match(item.body)
+        .with(P.string, (b) => <p className="cp-tabs__body">{renderRichText(b)}</p>)
+        .otherwise(() => null)}
+      {match(bullets.length === 0)
+        .with(true, () => null)
+        .otherwise(() => (
+          <ul className="cp-tabs__bullets">
+            {bullets.map((bullet) => (
+              <li key={bullet}>
+                <span className="cp-tabs__check">✓</span>
+                <span>{renderRichText(bullet)}</span>
+              </li>
+            ))}
+          </ul>
+        ))}
+      {match(axis)
+        .with('horizontal', () => renderPanelCta(item.cta))
+        .otherwise(() => null)}
+    </div>
+  )
+}
+
+/**
+ * Render a panel CTA, dropping links that fail URL validation.
+ *
+ * @private
+ * @param cta - Optional CTA action
+ * @returns Link element, or null
+ */
+function renderPanelCta(cta: TabsAction | undefined): React.ReactElement | null {
+  return match(cta)
+    .with(P.nonNullable, (a) => {
+      const href = safeUrl(a.link)
+      if (href === null) {
+        return null
+      }
+      const className = match(a.theme ?? 'brand')
+        .with('brand', () => 'cp-tabs__btn cp-tabs__btn--primary')
+        .otherwise(() => 'cp-tabs__btn')
+      // Wrapped rather than returned bare: the CTA is a direct child of
+      // the panel so it lands under the visual, and an unwrapped link
+      // would stretch as a flex item and break out of the grid columns.
+      return (
+        <div className="cp-tabs__actions">
+          <RouteLink className={className} href={href}>
+            {a.text}
+          </RouteLink>
+        </div>
+      )
+    })
+    .otherwise(() => null)
+}
+
+/**
+ * Render a panel's visual frame. Omitted entirely when the entry carries
+ * no visual, so a copy-only tab does not paint an empty frame.
+ *
+ * @private
+ * @param visual - Optional visual for the selected tab
+ * @returns Framed visual element, or null
+ */
+function renderPanelVisual(visual: HomeVisual | undefined): React.ReactElement | null {
+  return match(visual)
+    .with(P.nonNullable, (v) => (
+      <div className="cp-tabs__visual">
+        <HomeVisualView visual={v} context="tabs" />
+      </div>
+    ))
+    .otherwise(() => null)
+}

package/dist/theme/components/home/trust-strip.css

@@ -31,3 +31,44 @@
 .cp-trust__sep {
   color: var(--cp-c-text-3);
 }
+
+.cp-trust__logo {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+}
+
+/*
+ * Mono variant: paint a solid block of the current text color, clipped
+ * to the asset's alpha channel. One file then tracks every theme and
+ * both variants, which is the escape hatch for marks whose baked
+ * palette only reads against one background.
+ */
+.cp-trust__logo--mono {
+  background-color: currentcolor;
+  color: var(--cp-c-text-2);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  transition: color 0.15s ease;
+}
+
+/* Lays out at the asset's intrinsic ratio to give the mask a width. */
+.cp-trust__logo--mono img {
+  display: block;
+  height: 100%;
+  width: auto;
+  visibility: hidden;
+}
+
+.cp-trust__link {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cp-trust__link:hover .cp-trust__logo--mono {
+  color: var(--cp-c-text-1);
+}

package/dist/theme/components/home/trust-strip.tsx

@@ -1,25 +1,68 @@
-import { match } from 'massaman/match'
+import { match, P } from 'massaman/match'
 import type React from 'react'
 
+import { renderRichText } from '../../lib/rich-text.tsx'
+import { safeUrl } from '../../lib/safe-url.ts'
+import { withMountBase } from '../../lib/with-mount-base.ts'
+
 import './trust-strip.css'
 
+/**
+ * Default rendered height, in pixels, for a proof logo.
+ */
+const DEFAULT_LOGO_HEIGHT = 20
+
+/**
+ * A logo entry in the trust strip. Drawn as a mask filled with the
+ * current text color, so one asset covers every theme and both variants.
+ */
+export interface TrustLogo {
+  /**
+   * Public URL of the logo asset.
+   */
+  readonly src: string
+  /**
+   * Accessible name for the logo.
+   */
+  readonly alt: string
+  /**
+   * Optional link target. When set, the logo becomes a link.
+   */
+  readonly href?: string
+  /**
+   * Rendered height in pixels. Defaults to {@link DEFAULT_LOGO_HEIGHT}.
+   */
+  readonly height?: number
+  /**
+   * Draw the logo as a silhouette in the current text color instead of
+   * its own colors. Defaults to `false`.
+   */
+  readonly mono?: boolean
+}
+
+/**
+ * One trust strip entry — a plain name or a {@link TrustLogo}.
+ */
+export type TrustItem = string | TrustLogo
+
 export interface TrustStripProps {
   /**
    * Lead text shown before the names. Defaults to "used by".
    */
   readonly lead?: string
   /**
-   * Names to render, separated by mono dots.
+   * Entries to render, separated by mono dots.
    */
-  readonly names: readonly string[]
+  readonly names: readonly TrustItem[]
 }
 
 /**
- * TrustStrip — a single-row "used by …" band with mono dots between names.
- * Renders only when at least one name is supplied.
+ * TrustStrip — a single-row "used by …" band with mono dots between
+ * entries. Entries are either text or logos. Renders only when at least
+ * one entry is supplied.
  *
  * @param props - Trust strip configuration.
- * @returns React element, or null when no names are provided.
+ * @returns React element, or null when no entries are provided.
  */
 export function TrustStrip(props: TrustStripProps): React.ReactElement | null {
   const { lead = 'used by', names } = props
@@ -28,12 +71,16 @@ export function TrustStrip(props: TrustStripProps): React.ReactElement | null {
     .otherwise(() => (
       <section className="cp-trust">
         <div className="cp-trust__row">
-          <span className="cp-trust__lead">{lead}</span>
-          {names.map((name, i) => (
-            <span key={`${name}:${i}`} className="cp-trust__item">
-              <span className="cp-trust__name">{name}</span>
+          <span className="cp-trust__lead">{renderRichText(lead)}</span>
+          {names.map((item, i) => (
+            <span key={`${itemKey(item)}:${i}`} className="cp-trust__item">
+              {renderItem(item)}
               {match(i < names.length - 1)
-                .with(true, () => <span className="cp-trust__sep">·</span>)
+                .with(true, () => (
+                  <span aria-hidden="true" className="cp-trust__sep">
+                    ·
+                  </span>
+                ))
                 .otherwise(() => null)}
             </span>
           ))}
@@ -41,3 +88,113 @@ export function TrustStrip(props: TrustStripProps): React.ReactElement | null {
       </section>
     ))
 }
+
+/**
+ * Stable key fragment for an entry.
+ *
+ * @private
+ * @param item - Entry to derive a key from
+ * @returns Key fragment
+ */
+function itemKey(item: TrustItem): string {
+  return match(item)
+    .with(P.string, (name) => name)
+    .otherwise((logo) => logo.src)
+}
+
+/**
+ * Render a single entry as either text or a themed logo.
+ *
+ * @private
+ * @param item - Entry to render
+ * @returns React node for the entry
+ */
+function renderItem(item: TrustItem): React.ReactNode {
+  return match(item)
+    .with(P.string, (name) => <span className="cp-trust__name">{renderRichText(name)}</span>)
+    .otherwise((logo) => renderLogo(logo))
+}
+
+/**
+ * Render a logo in its own colors, or as a silhouette when `mono` is set.
+ *
+ * A destination that fails {@link safeUrl} degrades to the bare mark
+ * rather than a dead anchor, matching how `<Card />` handles the same
+ * case — the logo stays visible without becoming a script-execution sink.
+ *
+ * @private
+ * @param logo - Logo entry to render
+ * @returns React node for the logo
+ */
+function renderLogo(logo: TrustLogo): React.ReactNode {
+  const mark = match(logo.mono === true)
+    .with(true, () => renderMonoMark(logo))
+    .otherwise(() => renderColorMark(logo))
+
+  return match(logo.href)
+    .with(P.string, (raw) =>
+      match(safeUrl(raw))
+        .with(P.string, (href) => (
+          <a className="cp-trust__link" href={href} rel="noreferrer" target="_blank">
+            {mark}
+          </a>
+        ))
+        .otherwise(() => mark)
+    )
+    .otherwise(() => mark)
+}
+
+/**
+ * Render a logo as an image, preserving the asset's own colors.
+ *
+ * @private
+ * @param logo - Logo entry to render
+ * @returns React node for the logo
+ */
+function renderColorMark(logo: TrustLogo): React.ReactNode {
+  const { src, alt, height = DEFAULT_LOGO_HEIGHT } = logo
+  return (
+    <img
+      alt={alt}
+      className="cp-trust__logo"
+      src={withMountBase(src)}
+      style={{ height: `${height}px` }}
+    />
+  )
+}
+
+/**
+ * Render a logo as a mask filled with the current text color.
+ *
+ * The mask reads only the asset's alpha channel, so one file works on
+ * every theme and in both light and dark without a second variant.
+ *
+ * @private
+ * @param logo - Logo entry to render
+ * @returns React node for the logo
+ */
+function renderMonoMark(logo: TrustLogo): React.ReactNode {
+  const { src, alt, height = DEFAULT_LOGO_HEIGHT } = logo
+  // `encodeURI` so a `"` or `)` in the filename cannot terminate the
+  // `url()` token — the CSSOM would reject the whole declaration, and a
+  // mask that fails to load leaves the fill unclipped, painting a solid
+  // text-coloured rectangle where the logo should be.
+  const mask = `url("${encodeURI(withMountBase(src))}")`
+  // The inner image is hidden but still laid out, so the masked wrapper
+  // inherits the asset's intrinsic aspect ratio. A mask alone has no
+  // intrinsic size, so without it every logo would collapse to zero width.
+  return (
+    <span
+      aria-label={alt}
+      className="cp-trust__logo cp-trust__logo--mono"
+      role="img"
+      style={{
+        height: `${height}px`,
+        maskImage: mask,
+        WebkitMaskImage: mask,
+      }}
+    >
+      <img alt="" aria-hidden="true" src={withMountBase(src)} />
+    </span>
+  )
+}