@hraness/design-kit 0.40.3 → 0.41.1

package/src/react/product-marketing.tsx

@@ -133,16 +133,22 @@ function MarketingActions({
  * gutter for every direct child role. Products set `--hraness-site-accent`
  * on this element or on a parent.
  */
+/** Where a product landscape draws (see LANDSCAPE.md): behind the whole page, behind one element, or nowhere. */
+export type ProductLandscapeHost = "page" | "contained" | "off";
+
 export function MarketingPage({
   children,
   className,
   id,
+  landscape,
   preset,
   pattern,
 }: Readonly<{
   children: ReactNode;
   className?: string;
   id?: string;
+  /** Draw the product landscape from product-landscape.css behind this page. */
+  landscape?: ProductLandscapeHost;
   /** Opt in to the separately imported product-marketing-preset.css contract. */
   preset?: MarketingPreset;
   /**
@@ -153,9 +159,10 @@ export function MarketingPage({
   pattern?: MarketingPattern;
 }>) {
   if (preset !== undefined && preset !== "editorial" && preset !== "minimal") throw new RangeError("Unknown marketing preset.");
+  if (landscape !== undefined && landscape !== "page" && landscape !== "contained" && landscape !== "off") throw new RangeError("Unknown landscape host.");
   assertMarketingPattern(pattern);
   return (
-    <div className={classNames("hraness-marketing-page", className)} data-hraness-marketing="page" data-hraness-marketing-preset={preset} data-hraness-pattern={pattern} id={id}>
+    <div className={classNames("hraness-marketing-page", className)} data-hraness-landscape={landscape} data-hraness-marketing="page" data-hraness-marketing-preset={preset} data-hraness-pattern={pattern} id={id}>
       {children}
     </div>
   );
@@ -738,7 +745,8 @@ export function marketingProofFrameAddress(url: string): string {
  * A captioned frame around a screenshot, recording, or code-built mockup.
  * `chrome` draws a window title bar, a browser address bar, or a terminal
  * title bar above the content. A `title` without `chrome` keeps the window
- * bar. The browser bar shows `url` as host and path.
+ * bar. The browser bar shows `url` as host and path. A window or terminal
+ * bar without a title draws only the window lights.
  */
 export function MarketingProofFrame({
   caption,
@@ -766,8 +774,8 @@ export function MarketingProofFrame({
   if (url !== undefined && chrome !== "browser") throw new RangeError("Proof frame url needs chrome=\"browser\".");
   const bar = chrome ?? (title === undefined ? undefined : "window");
   const label = bar === "browser" ? (url === undefined ? title : marketingProofFrameAddress(url)) : title;
-  if (bar !== undefined && (label === undefined || label.trim() === "")) {
-    throw new RangeError(`Proof frame chrome=${bar} needs ${bar === "browser" ? "a url or title" : "a title"}.`);
+  if (bar === "browser" && (label === undefined || label.trim() === "")) {
+    throw new RangeError("Proof frame chrome=browser needs a url or title.");
   }
   return (
     <figure
@@ -786,7 +794,9 @@ export function MarketingProofFrame({
             </span>
             {bar === "browser"
               ? <span className={classNames("hraness-marketing-proof-frame__address")}>{label}</span>
-              : <span className={classNames("hraness-marketing-proof-frame__title", undefined, bar === "terminal" ? "terminal" : "default")}>{label}</span>}
+              : label === undefined || label.trim() === ""
+                ? null
+                : <span className={classNames("hraness-marketing-proof-frame__title", undefined, bar === "terminal" ? "terminal" : "default")}>{label}</span>}
           </div>
         )}
       <div className={classNames("hraness-marketing-proof-frame__content")}>{children}</div>
@@ -1161,6 +1171,8 @@ export function MarketingStatStrip({
 export interface MarketingInterface {
   readonly example?: ReactNode;
   readonly label: string;
+  /** A reference link pinned to the foot of the card, aligned to the end. */
+  readonly link?: MarketingLink;
   readonly summary: string;
 }
 
@@ -1205,6 +1217,13 @@ export function MarketingInterfaceGrid({
             </Heading>
             <p className={classNames("hraness-marketing-interface__summary")}>{entry.summary}</p>
             {entry.example}
+            {entry.link === undefined
+              ? null
+              : (
+                <p className={classNames("hraness-marketing-interface__action")}>
+                  <a className={classNames("hraness-marketing-interface__link")} data-hraness-marketing="interfaces" href={entry.link.href}>{entry.link.label}</a>
+                </p>
+              )}
           </article>
         ))}
       </div>

package/src/styles.css

@@ -19,6 +19,7 @@
 @import "./status-page.css";
 @import "./product-marketing.css";
 @import "./product-marketing-foundation.css";
+@import "./product-landscape.css";
 @import "./design-gallery.css";
 @import "./mockups.css";
 @import "./palette-bridge.css";