@tonycodes-ui/mortar 0.11.0 → 0.13.0

package/src/marketing.tsx

@@ -3,17 +3,9 @@ import {
   KitLink,
   type IconLink,
   type ItemGroup,
-  type LinkItem,
 } from "./navigation.js";
 import { useId, useState, type CSSProperties, type ReactNode } from "react";
-import {
-  CloseButton,
-  DialogPanel,
-  DialogTitle,
-  Popover,
-  PopoverButton,
-  PopoverPanel,
-} from "@headlessui/react";
+import { DialogPanel, DialogTitle } from "@headlessui/react";
 import { ActionLink, Button, type LinkAction } from "./primitives.js";
 import { BrandMark, Prose, type SectionTone } from "./layout.js";
 import { SegmentedControl } from "./inspection.js";
@@ -23,6 +15,8 @@ import { childLevel, headingTag, type HeadingLevel } from "./heading.js";
 import {
   ActionLinks,
   DialogFrame,
+  Flyout,
+  type FlyoutItem,
   TermList,
   TitledIntro,
   cx,
@@ -32,10 +26,7 @@ import {
   useDomId,
 } from "./internal.js";
 
-export type FlyoutItem = Pick<
-  LinkItem,
-  "label" | "href" | "description" | "icon"
->;
+export type { FlyoutItem } from "./internal.js";
 /** A header link, or a labelled group that opens a flyout panel. */
 export type HeaderLink =
   | LinkAction
@@ -45,69 +36,9 @@ export type HeaderLink =
       layout?: "list" | "columns" | "full";
     });
 
-function Flyout({
-  label,
-  items,
-  footer = [],
-  layout = "list",
-  onNavigate,
-}: {
-  label: string;
-  items: FlyoutItem[];
-  footer?: LinkAction[];
-  layout?: "list" | "columns" | "full";
-  onNavigate: () => void;
-}) {
-  const dataLayout = layout === "list" ? undefined : layout;
-  return (
-    <Popover className="m-flyout" data-layout={dataLayout}>
-      <PopoverButton className="m-flyout-trigger">
-        {label}
-        <ChevronDown />
-      </PopoverButton>
-      {/* Anchored panels render in a portal, so headers inside clipped containers never cut them off. */}
-      <PopoverPanel
-        anchor="bottom"
-        className="m-flyout-panel"
-        data-layout={dataLayout}
-      >
-        <ul>
-          {items.map((item, index) => (
-            <li key={`${item.label}:${item.href}:${index}`}>
-              <CloseButton as={KitLink} href={item.href} onClick={onNavigate}>
-                {item.icon && (
-                  <span className="m-flyout-icon" aria-hidden="true">
-                    {item.icon}
-                  </span>
-                )}
-                <span className="m-flyout-text">
-                  <strong>{item.label}</strong>
-                  {item.description && <span>{item.description}</span>}
-                </span>
-              </CloseButton>
-            </li>
-          ))}
-        </ul>
-        {footer.length > 0 && (
-          <div className="m-flyout-footer">
-            {footer.map((link, index) => (
-              <CloseButton
-                as={KitLink}
-                key={`${link.label}:${link.href}:${index}`}
-                href={link.href}
-                onClick={onNavigate}
-              >
-                {link.label}
-              </CloseButton>
-            ))}
-          </div>
-        )}
-      </PopoverPanel>
-    </Popover>
-  );
-}
 export function MarketingHeader({
   brand,
+  tagline,
   homeHref = "/",
   logo,
   links,
@@ -119,6 +50,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 +70,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 +214,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 +270,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 +294,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 +307,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 +917,7 @@ export function Footer({
   logo,
   description,
   note,
-  columns,
+  columns = [],
   copyright,
   legal = [],
   itemHeadingLevel = 2,
@@ -940,30 +929,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 +962,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 +971,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 +1024,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>
   );

package/src/primitives.tsx

@@ -444,6 +444,31 @@ function DescribedChoice({
     </div>
   );
 }
+/**
+ * Keeps a choice in the described layout once it has had a description or
+ * error. Switching back to the plain label would remount the input and drop
+ * focus mid-interaction (for example a description that changes with the
+ * value). If the layout changes while the input has focus, focus follows it.
+ */
+function useDescribedLayout(
+  active: boolean,
+  input: { current: HTMLInputElement | null },
+) {
+  const [described, setDescribed] = useState(false);
+  const refocus = useRef(false);
+  if (active && !described) {
+    refocus.current =
+      typeof document !== "undefined" &&
+      !!input.current &&
+      input.current === document.activeElement;
+    setDescribed(true);
+  }
+  useLayoutEffect(() => {
+    if (refocus.current) input.current?.focus();
+    refocus.current = false;
+  }, [described, input]);
+  return described;
+}
 export function Checkbox({
   label,
   description,
@@ -458,23 +483,8 @@ export function Checkbox({
   error?: string;
 }) {
   const input = useRef<HTMLInputElement>(null);
-  // Once an error has shown, keep the described layout: switching back to the
-  // plain label would remount the input and drop focus while the person fixes
-  // it. If the layout changes while the input has focus, focus follows it.
-  const [described, setDescribed] = useState(false);
-  const refocus = useRef(false);
-  if (error && !described) {
-    refocus.current =
-      typeof document !== "undefined" &&
-      !!input.current &&
-      input.current === document.activeElement;
-    setDescribed(true);
-  }
-  useLayoutEffect(() => {
-    if (refocus.current) input.current?.focus();
-    refocus.current = false;
-  }, [described]);
-  if (description || error || described)
+  const described = useDescribedLayout(!!(description || error), input);
+  if (described)
     return (
       <DescribedChoice
         component="Checkbox"
@@ -514,7 +524,9 @@ export function Switch({
   /** Secondary line under the label, announced as the description. */
   description?: ReactNode;
 }) {
-  if (description)
+  const input = useRef<HTMLInputElement>(null);
+  const described = useDescribedLayout(!!description, input);
+  if (described)
     return (
       <DescribedChoice
         component="Switch"
@@ -526,6 +538,7 @@ export function Switch({
           <input
             {...props}
             {...attrs}
+            ref={input}
             type="checkbox"
             role="switch"
             className="m-switch"
@@ -535,7 +548,13 @@ export function Switch({
     );
   return (
     <label {...componentRoot("Switch")} className={cx("m-choice", className)}>
-      <input {...props} type="checkbox" role="switch" className="m-switch" />
+      <input
+        {...props}
+        ref={input}
+        type="checkbox"
+        role="switch"
+        className="m-switch"
+      />
       {label}
     </label>
   );