@tonycodes-ui/mortar 0.11.0 → 0.12.0

package/src/internal.tsx

@@ -5,8 +5,11 @@ import {
   createContext,
   createElement,
   useContext,
+  useEffect,
   useId,
+  useState,
   type HTMLAttributes,
+  type RefObject,
   type ReactNode,
   cloneElement,
   isValidElement,
@@ -71,6 +74,8 @@ export interface IntroProps {
   eyebrow?: string;
   /** Omit to render no heading. */
   title?: string;
+  /** A phrase in `title` to emphasise; its first occurrence renders as `<em>`. */
+  emphasis?: string;
   description?: string;
   /** Id for the heading, e.g. the target of the section's aria-labelledby. */
   id?: string;
@@ -87,6 +92,7 @@ export interface IntroProps {
 export function introSlots({
   eyebrow,
   title,
+  emphasis,
   description,
   id,
   headingLevel = 2,
@@ -95,12 +101,26 @@ export function introSlots({
   const Heading = headingTag(headingLevel);
   return [
     eyebrow && <p className="m-eyebrow">{eyebrow}</p>,
-    title !== undefined && <Heading id={id}>{title}</Heading>,
+    title !== undefined && (
+      <Heading id={id}>{emphasise(title, emphasis)}</Heading>
+    ),
     description && (
       <p className={descriptionClassName ?? undefined}>{description}</p>
     ),
   ];
 }
+/** `title` with the first occurrence of `phrase` in `<em>`; unchanged when absent. */
+function emphasise(title: string, phrase?: string): ReactNode {
+  const at = phrase ? title.indexOf(phrase) : -1;
+  if (!phrase || at < 0) return title;
+  return (
+    <>
+      {title.slice(0, at)}
+      <em className="m-emphasis">{phrase}</em>
+      {title.slice(at + phrase.length)}
+    </>
+  );
+}
 /** The section intro as one element, for parents where nothing user-supplied follows it. */
 export function SectionIntro(props: IntroProps) {
   return <>{...introSlots(props)}</>;
@@ -210,6 +230,72 @@ export function useDomId(prefix: string) {
   return prefix + useId().replace(/[^a-zA-Z0-9-]/g, "");
 }
 
+/** Why an animation is not running; null while it plays. */
+export type PauseReason = "user" | "motion" | "hidden" | "offscreen" | null;
+/**
+ * Shared pause and resume for decorative motion. It plays only while the
+ * user has not paused it, reduced motion is not requested, the document is
+ * visible and `ref` is on screen. The user's pause is kept apart from the
+ * automatic reasons, so returning to the page never overrides it. `paused`
+ * and `onPausedChange` make the user's choice controlled, for example one
+ * state shared by several animations. Every listener is removed on unmount.
+ */
+export function usePlayback(
+  ref: RefObject<Element | null>,
+  {
+    paused,
+    onPausedChange,
+    enabled = true,
+  }: {
+    paused?: boolean;
+    onPausedChange?: (paused: boolean) => void;
+    enabled?: boolean;
+  },
+) {
+  const [ownPaused, setOwnPaused] = useState(false);
+  const [reduced, setReduced] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const [offscreen, setOffscreen] = useState(false);
+  const userPaused = paused ?? ownPaused;
+  useEffect(() => {
+    if (!enabled) return;
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onMedia = () => setReduced(media.matches);
+    const onVisibility = () => setHidden(document.visibilityState === "hidden");
+    onMedia();
+    onVisibility();
+    media.addEventListener("change", onMedia);
+    document.addEventListener("visibilitychange", onVisibility);
+    const observer =
+      ref.current && typeof IntersectionObserver !== "undefined"
+        ? new IntersectionObserver(([entry]) =>
+            setOffscreen(!entry.isIntersecting),
+          )
+        : null;
+    if (observer && ref.current) observer.observe(ref.current);
+    return () => {
+      media.removeEventListener("change", onMedia);
+      document.removeEventListener("visibilitychange", onVisibility);
+      observer?.disconnect();
+    };
+  }, [enabled, ref]);
+  const reason: PauseReason = userPaused
+    ? "user"
+    : reduced
+      ? "motion"
+      : hidden
+        ? "hidden"
+        : offscreen
+          ? "offscreen"
+          : null;
+  const toggle = () => {
+    const next = !userPaused;
+    if (paused === undefined) setOwnPaused(next);
+    onPausedChange?.(next);
+  };
+  return { reason, reduced, userPaused, toggle };
+}
+
 /**
  * Next index for arrow, Home and End keys in a horizontal set (wrapping), or
  * null for any other key.

package/src/marketing.css

@@ -24,6 +24,21 @@
     font-weight: var(--m-weight-bold);
     letter-spacing: var(--m-tracking-heading);
   }
+  /* A short descriptor beside the wordmark, outside the home link. */
+  .m-brand-lockup {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+  .m-brand-tagline {
+    max-width: 28ch;
+    padding-left: 12px;
+    border-left: 1px solid var(--m-line);
+    color: var(--m-muted);
+    font-size: 13px;
+    line-height: 1.3;
+  }
   .m-marketing-header nav {
     display: flex;
     gap: 22px;
@@ -192,7 +207,8 @@
     grid-column: 1;
     grid-row: 1;
   }
-  .m-marketing-header[data-layout="center"] > .m-brand {
+  .m-marketing-header[data-layout="center"] > .m-brand,
+  .m-marketing-header[data-layout="center"] > .m-brand-lockup {
     grid-column: 2;
     grid-row: 1;
   }
@@ -253,7 +269,8 @@
     .m-marketing-header[data-layout="center"] {
       grid-template-columns: auto minmax(0, 1fr) auto;
     }
-    .m-marketing-header[data-layout="center"] > .m-brand {
+    .m-marketing-header[data-layout="center"] > .m-brand,
+    .m-marketing-header[data-layout="center"] > .m-brand-lockup {
       justify-self: center;
     }
     .m-marketing-header[data-layout="center"] > .m-actions .m-button {
@@ -274,6 +291,32 @@
     .m-flyout-panel[data-layout="columns"] ul {
       grid-template-columns: minmax(0, 1fr);
     }
+    .m-brand-tagline {
+      display: none;
+    }
+  }
+
+  /* == MarketingPage == */
+  /* Header, main and footer fill the viewport; main grows, nothing is clipped. */
+  .m-marketing-page {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    min-height: 100dvh;
+  }
+  /* Header, sections and footer centre themselves with auto margins, which in a
+     flex column would shrink them to their content; keep them full width. */
+  .m-marketing-page > *,
+  .m-marketing-page[data-align="center"] > .m-marketing-main > * {
+    width: 100%;
+  }
+  .m-marketing-main {
+    flex: 1 0 auto;
+  }
+  .m-marketing-page[data-align="center"] > .m-marketing-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 
   /* == Banner == */
@@ -591,6 +634,30 @@
   .m-hero-split .m-section-title {
     font-size: clamp(40px, 5vw, 64px);
   }
+  /* Beside a preview the copy is start-aligned: no auto margins, which would
+     centre the description inside a copy column wider than its max width. */
+  .m-hero-split .m-hero-description {
+    margin-inline: 0;
+  }
+  .m-hero-split[data-wide="copy"] {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  }
+  .m-hero-split[data-wide="preview"] {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  }
+  /* An emphasised phrase in the title: the brand's text-safe link colour. */
+  .m-hero .m-emphasis {
+    font-style: normal;
+    color: var(--m-link);
+  }
+  .m-hero:is([data-background], [data-tone="accent"]) .m-emphasis {
+    color: inherit;
+  }
+  .m-hero-note {
+    margin-top: 20px;
+    color: var(--m-muted);
+    font-size: 14px;
+  }
   .m-hero-preview {
     margin-top: 48px;
     text-align: left;
@@ -694,6 +761,7 @@
   }
   @media (max-width: 900px) {
     .m-hero-split,
+    .m-hero-split[data-wide],
     .m-feature-section,
     .m-faq {
       grid-template-columns: minmax(0, 1fr);
@@ -1893,6 +1961,41 @@
     text-align: center;
     margin-top: 40px;
   }
+  /* Footer: one compact row that wraps in reading order. */
+  .m-footer[data-layout="inline"] {
+    padding-block: 24px;
+    border-top: 1px solid var(--m-line);
+  }
+  .m-footer-inline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 24px;
+    color: var(--m-muted);
+    font-size: 13px;
+  }
+  .m-footer-inline .m-brand {
+    font-size: 14px;
+    color: var(--m-ink);
+  }
+  .m-footer-inline p {
+    margin: 0;
+  }
+  .m-footer-inline > :is(nav, div) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 20px;
+  }
+  .m-footer-inline a {
+    color: var(--m-muted);
+    text-decoration: none;
+  }
+  .m-footer-inline a:hover {
+    color: var(--m-ink);
+  }
+  .m-footer-inline > .m-icon-links {
+    margin: 0;
+  }
   @media (max-width: 900px) {
     .m-footer-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2385,6 +2488,82 @@
     background: var(--m-primary);
     color: var(--m-on-primary);
   }
+
+  /* == NetworkIllustration == */
+  /* Nodes and connections from data; signals travel along connections. Every
+     colour is a token, so the drawing follows the brand and appearance. */
+  .m-network {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .m-network svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+  }
+  .m-network-link {
+    stroke: var(--m-line-strong);
+    stroke-width: 1.5;
+    /* Lines keep their width however large the drawing is shown. */
+    vector-effect: non-scaling-stroke;
+  }
+  /* The outline is the strong line (3:1) whatever the fill, so nodes stay visible. */
+  .m-network-node {
+    fill: var(--m-surface);
+    stroke: var(--m-line-strong);
+    stroke-width: 1.5;
+    vector-effect: non-scaling-stroke;
+  }
+  .m-network-node[data-tone="accent"] {
+    fill: var(--m-accent);
+  }
+  .m-network-label {
+    fill: var(--m-secondary);
+    font-size: 12px;
+  }
+  .m-network-signal {
+    fill: var(--m-accent);
+    translate: var(--m-signal-from);
+    animation: m-network-signal 3s linear infinite;
+  }
+  .m-network[data-paused] .m-network-signal {
+    animation-play-state: paused;
+  }
+  /* Below the drawing, never over it, so no node is covered at any size. */
+  .m-network-toggle {
+    align-self: flex-end;
+    padding: 4px 10px;
+    border: 1px solid var(--m-line);
+    border-radius: var(--m-radius-sm);
+    background: var(--m-surface);
+    color: var(--m-secondary);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .m-network-toggle:hover {
+    color: var(--m-ink);
+  }
+  /* Before scripts run, and whenever reduced motion is requested, show the
+     static drawing; the script then stops rendering the signals. */
+  @media (prefers-reduced-motion: reduce) {
+    .m-network-signal {
+      display: none;
+    }
+    .m-network-toggle {
+      display: none;
+    }
+  }
+}
+@keyframes m-network-signal {
+  from {
+    translate: var(--m-signal-from);
+  }
+  to {
+    translate: var(--m-signal-to);
+  }
 }
 @keyframes m-chat-dot {
   0%,

package/src/marketing.tsx

@@ -108,6 +108,7 @@ function Flyout({
 }
 export function MarketingHeader({
   brand,
+  tagline,
   homeHref = "/",
   logo,
   links,
@@ -119,6 +120,8 @@ export function MarketingHeader({
   id,
 }: {
   brand: string;
+  /** A short descriptor beside the wordmark, outside the home link. Hidden on narrow screens. */
+  tagline?: string;
   logo?: ReactNode;
   homeHref?: string;
   /** Links, or groups of items that open a flyout panel. */
@@ -137,12 +140,21 @@ export function MarketingHeader({
   const navId = useDomId("m-marketing-nav");
   const panel = mobileMenu === "panel";
   const close = () => setOpen(false);
-  const brandLink = (
+  const homeLink = (
     <KitLink className="m-brand" href={homeHref}>
       <BrandMark logo={logo} />
       {brand}
     </KitLink>
   );
+  // The tagline sits outside the link so the link's name stays the brand.
+  const brandLink = tagline ? (
+    <div className="m-brand-lockup">
+      {homeLink}
+      <span className="m-brand-tagline">{tagline}</span>
+    </div>
+  ) : (
+    homeLink
+  );
   const menuButton = (
     <Button
       variant="ghost"
@@ -272,15 +284,53 @@ function PanelLinks({
     </nav>
   );
 }
+/**
+ * A public page: the header, a main region that grows to fill the viewport, and
+ * the footer. Content is never clipped; a longer page simply scrolls.
+ */
+export function MarketingPage({
+  header,
+  footer,
+  children,
+  align = "start",
+  id,
+  className,
+}: {
+  /** Usually a MarketingHeader. */
+  header?: ReactNode;
+  /** Usually a Footer. */
+  footer?: ReactNode;
+  children: ReactNode;
+  /** start: content from the top. center: content centred in the space between header and footer, for a single hero. */
+  align?: "start" | "center";
+  id?: string;
+  className?: string;
+}) {
+  return (
+    <div
+      id={id}
+      className={cx("m-marketing-page", className)}
+      {...componentRoot("MarketingPage")}
+      data-align={align === "center" ? "center" : undefined}
+    >
+      {header}
+      <main className="m-marketing-main">{children}</main>
+      {footer}
+    </div>
+  );
+}
 export function Hero({
   id,
   className,
   eyebrow,
   title,
+  emphasis,
   description,
   actions = [],
+  note,
   children,
   layout = "center",
+  wide,
   headingLevel = 1,
   background,
   images = [],
@@ -290,11 +340,17 @@ export function Hero({
   className?: string;
   eyebrow?: string;
   title: string;
+  /** A phrase in the title to emphasise. Its first occurrence renders as `<em>` inside the one heading; a phrase not in the title is ignored. */
+  emphasis?: string;
   description: string;
   actions?: LinkAction[];
+  /** Short supporting content below the actions, such as a note or a Notice. */
+  note?: ReactNode;
   children?: ReactNode;
   /** center: copy above the preview. split: copy beside the preview. angled: copy beside an image that fills the end half to the edge, cut on a slant (pass one img or video as children). */
   layout?: "center" | "split" | "angled";
+  /** Split only: the column that takes more of the width. Omitted, the columns are even. */
+  wide?: "copy" | "preview";
   headingLevel?: HeadingLevel;
   /** Decorative full-cover image or video behind the copy. The hero switches to the inverse tone with a scrim so text keeps its contrast. */
   background?: ReactNode;
@@ -308,6 +364,7 @@ export function Hero({
       id={id}
       className={cx("m-hero", `m-hero-${layout}`, className)}
       {...componentRoot("Hero")}
+      data-wide={layout === "split" ? wide : undefined}
       data-background={background ? true : undefined}
       data-tone={background ? "inverse" : sectionTone(tone)}
     >
@@ -320,10 +377,12 @@ export function Hero({
         <TitledIntro
           eyebrow={eyebrow}
           title={title}
+          emphasis={emphasis}
           headingLevel={headingLevel}
         />
         <p className="m-hero-description">{description}</p>
         <ActionLinks actions={actions} />
+        {note && <div className="m-hero-note">{note}</div>}
       </div>
       {images.length > 0 && (
         <div className="m-hero-tiles">
@@ -928,7 +987,7 @@ export function Footer({
   logo,
   description,
   note,
-  columns,
+  columns = [],
   copyright,
   legal = [],
   itemHeadingLevel = 2,
@@ -940,30 +999,31 @@ export function Footer({
   className?: string;
   brand: string;
   logo?: ReactNode;
-  description: string;
+  description?: string;
   note?: ReactNode;
-  /** Link columns; each label is the column's visible heading and its navigation name. Centred, the label only names the navigation. */
-  columns: ItemGroup<LinkAction>[];
+  /** Link columns; each label is the column's visible heading and its navigation name. Centred or inline, the label only names the navigation. */
+  columns?: ItemGroup<LinkAction>[];
   copyright: string;
   legal?: LinkAction[];
   /** Level of the column headings. */
   itemHeadingLevel?: HeadingLevel;
   /** Social profiles, usually icon-only; each label names its link. */
   social?: IconLink[];
-  /** columns: the brand beside headed link columns. center: brand, a row of links and social links, all centred. */
-  layout?: "columns" | "center";
+  /** columns: the brand beside headed link columns. center: brand, a row of links and social links, all centred. inline: one compact row of brand, notes, links and copyright that wraps in reading order. */
+  layout?: "columns" | "center" | "inline";
   /** A signup row above the copyright, usually a Newsletter; the footer removes its section padding. */
   newsletter?: ReactNode;
 }) {
   const Heading = headingTag(itemHeadingLevel);
   const center = layout === "center";
+  const inline = layout === "inline";
   const identity = (
     <>
       <strong className="m-brand">
         <BrandMark logo={logo} />
         {brand}
       </strong>
-      <p>{description}</p>
+      {description && <p>{description}</p>}
       {note && <p>{note}</p>}
     </>
   );
@@ -972,8 +1032,8 @@ export function Footer({
   );
   const navs = columns.map((column) => (
     <nav key={column.label} aria-label={column.label}>
-      {/* Centred, the links sit in one row and the label only names the navigation. */}
-      {!center && <Heading>{column.label}</Heading>}
+      {/* Centred or inline, the links sit in one row and the label only names the navigation. */}
+      {!center && !inline && <Heading>{column.label}</Heading>}
       {column.items.map((link, index) => (
         <KitLink href={link.href} key={`${link.label}:${link.href}:${index}`}>
           {link.label}
@@ -981,6 +1041,34 @@ export function Footer({
       ))}
     </nav>
   ));
+  const legalLinks = (
+    <div>
+      {legal.map((link, index) => (
+        <KitLink key={`${link.label}:${link.href}:${index}`} href={link.href}>
+          {link.label}
+        </KitLink>
+      ))}
+    </div>
+  );
+  if (inline)
+    return (
+      <footer
+        id={id}
+        className={cx("m-footer", className)}
+        {...componentRoot("Footer")}
+        data-layout="inline"
+      >
+        {/* One wrapping row; the DOM order is the reading order at every width. */}
+        <div className="m-footer-inline">
+          {identity}
+          {navs}
+          {socialLinks}
+          <span>{copyright}</span>
+          {legal.length > 0 && legalLinks}
+        </div>
+        {newsletter && <div className="m-footer-newsletter">{newsletter}</div>}
+      </footer>
+    );
   return (
     <footer
       id={id}
@@ -1006,16 +1094,7 @@ export function Footer({
       {newsletter && <div className="m-footer-newsletter">{newsletter}</div>}
       <div className="m-footer-bottom">
         <span>{copyright}</span>
-        <div>
-          {legal.map((link, index) => (
-            <KitLink
-              key={`${link.label}:${link.href}:${index}`}
-              href={link.href}
-            >
-              {link.label}
-            </KitLink>
-          ))}
-        </div>
+        {legalLinks}
       </div>
     </footer>
   );