@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 5.7.0 to 5.8.0

lib/components/data/Scroll.d.ts

@@ -10,3 +10,3 @@ export default ScrollNext;
      */
-    variant?: "flat" | "raised" | undefined;
+    variant?: "raised" | "flat" | undefined;
 };
@@ -13,0 +13,0 @@ /**

lib/components/Dialog.d.ts

@@ -38,2 +38,3 @@ /**
  * @param {DialogProps} props
+ * @deprecated
  */
@@ -40,0 +41,0 @@ export function Dialog({ buttons, cancelLabel, children, contentClass, icon, initialFocus, onCancel, role, title, withCancelButton, withCloseButton, }: DialogProps): import("preact").JSX.Element;

lib/components/Dialog.js

@@ -69,2 +69,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Dialog.js";
  * @param {DialogProps} props
+ * @deprecated
  */
@@ -140,3 +141,3 @@ export function Dialog({
           fileName: _jsxFileName,
-          lineNumber: 139,
+          lineNumber: 140,
           columnNumber: 13
@@ -146,3 +147,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 138,
+        lineNumber: 139,
         columnNumber: 11
@@ -155,3 +156,3 @@ }, this), _jsxDEV("h2", {
         fileName: _jsxFileName,
-        lineNumber: 142,
+        lineNumber: 143,
         columnNumber: 9
@@ -167,3 +168,3 @@ }, this), onCancel && withCloseButton && _jsxDEV("div", {
           fileName: _jsxFileName,
-          lineNumber: 147,
+          lineNumber: 148,
           columnNumber: 13
@@ -173,3 +174,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 146,
+        lineNumber: 147,
         columnNumber: 11
@@ -179,3 +180,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 136,
+      lineNumber: 137,
       columnNumber: 7
@@ -190,3 +191,3 @@ }, this), children, hasButtons && _jsxDEV("div", {
         fileName: _jsxFileName,
-        lineNumber: 160,
+        lineNumber: 161,
         columnNumber: 13
@@ -196,3 +197,3 @@ }, this), buttons]
       fileName: _jsxFileName,
-      lineNumber: 158,
+      lineNumber: 159,
       columnNumber: 9
@@ -202,3 +203,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 125,
+    lineNumber: 126,
     columnNumber: 5
@@ -205,0 +206,0 @@ }, this);

lib/components/feedback/index.d.ts

@@ -0,2 +1,3 @@
+export { default as Modal } from "./Modal";
 export { default as Spinner } from "./Spinner";
 export { default as SpinnerOverlay } from "./SpinnerOverlay";

lib/components/feedback/index.js

@@ -0,3 +1,4 @@
+export { default as Modal } from './Modal';
 export { default as Spinner } from './Spinner';
 export { default as SpinnerOverlay } from './SpinnerOverlay';
 //# sourceMappingURL=index.js.map

lib/components/input/Checkbox.js

@@ -60,2 +60,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/Checkbox.js";
   }
+  const Icon = isChecked ? CheckedIcon : UncheckedIcon;
   return _jsxDEV("label", {
@@ -73,2 +74,5 @@ className: classnames('relative flex items-center gap-x-1.5', {
       className: classnames(
+      // Set the special Tailwind peer class to allow sibling elements
+      // to style themselves based on the state of this element
+      'peer',
       // Position this atop the icon and size it to the same dimensions
@@ -87,20 +91,18 @@ 'absolute w-em h-em',
       fileName: _jsxFileName,
-      lineNumber: 75,
+      lineNumber: 77,
       columnNumber: 7
-    }, this), isChecked ? _jsxDEV(CheckedIcon, {
-      className: "w-em h-em"
+    }, this), _jsxDEV(Icon, {
+      className: classnames(
+      // Add an outline ring to the icon when the input is focus-visible.
+      // The ring needs to be applied here because the `input` has an
+      // effectively-0 opacity.
+      'peer-focus-visible:ring', 'w-em h-em')
     }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 95,
-      columnNumber: 9
-    }, this) : _jsxDEV(UncheckedIcon, {
-      className: "w-em h-em"
-    }, void 0, false, {
-      fileName: _jsxFileName,
-      lineNumber: 97,
-      columnNumber: 9
+      lineNumber: 99,
+      columnNumber: 7
     }, this), children]
   }, void 0, true, {
     fileName: _jsxFileName,
-    lineNumber: 67,
+    lineNumber: 69,
     columnNumber: 5
@@ -107,0 +109,0 @@ }, this);

lib/components/layout/Card.d.ts

@@ -15,3 +15,3 @@ export default CardNext;
      */
-    variant?: "flat" | "raised" | undefined;
+    variant?: "raised" | "flat" | undefined;
     /**
@@ -18,0 +18,0 @@ * - When `custom`, user should

lib/components/layout/Panel.d.ts

@@ -1,41 +0,24 @@
-export default PanelNext;
-export type CompositeProps = import('../../types').CompositeProps;
-export type HTMLAttributes = import('preact').JSX.HTMLAttributes<HTMLElement>;
-export type IconComponent = import('../../types').IconComponent;
-export type PanelProps = {
+import type { ComponentChildren, JSX } from 'preact';
+import type { IconComponent, CompositeProps } from '../../types';
+type ComponentProps = {
+    /** Buttons are rendered at the bottom right of the Panel. */
+    buttons?: ComponentChildren;
+    /** Optional icon to render in the header */
+    icon?: IconComponent;
     /**
-     * - content to render as
-     * actions for the panel
+     * When present, a close button will be rendered in the header, and will use
+     * this function as an onClick handler
      */
-    buttons?: import('preact').ComponentChildren;
-    /**
-     * - Name of optional icon to render in header
-     */
-    icon?: import("preact").FunctionComponent<import("preact").JSX.SVGAttributes<SVGSVGElement>> | undefined;
-    /**
-     * - handler for closing the panel; if provided,
-     * will render a close button that invokes this onClick
-     */
-    onClose?: (() => void) | undefined;
+    onClose?: () => void;
     title: string;
 };
+export type PanelProps = CompositeProps & ComponentProps & Omit<JSX.HTMLAttributes<HTMLElement>, 'icon' | 'size' | 'width'>;
 /**
- * @typedef {import('../../types').CompositeProps} CompositeProps
- * @typedef {import('preact').JSX.HTMLAttributes<HTMLElement>} HTMLAttributes
- * @typedef {import('../../types').IconComponent} IconComponent
+ * Render a composed set of Card components in a panel-like interface.
  *
- * @typedef PanelProps
- * @prop {import('preact').ComponentChildren} [buttons] - content to render as
- *   actions for the panel
- * @prop {IconComponent} [icon] - Name of optional icon to render in header
- * @prop {() => void} [onClose] - handler for closing the panel; if provided,
- *   will render a close button that invokes this onClick
- * @prop {string} title
-
+ * If the total height of the Panel exceeds any height constraints set on the
+ * Panel's immediate parent element, content (`children`) will scroll. The
+ * header and any buttons will not scroll.
  */
-/**
- * Render a composed set of Card components in a panel-like interface
- *
- * @param {CompositeProps & PanelProps & Omit<HTMLAttributes, 'icon'|'size'|'width'>} props
- */
-declare function PanelNext({ children, elementRef, buttons, icon: Icon, onClose, title, ...htmlAttributes }: CompositeProps & PanelProps & Omit<HTMLAttributes, 'icon' | 'size' | 'width'>): import("preact").JSX.Element;
+declare const PanelNext: ({ children, elementRef, buttons, icon: Icon, onClose, title, ...htmlAttributes }: PanelProps) => JSX.Element;
+export default PanelNext;

lib/components/layout/Panel.js

@@ -1,3 +0,4 @@
-var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/layout/Panel.js";
+var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/layout/Panel.tsx";
 import { downcastRef } from '../../util/typing';
+import Scroll from '../data/Scroll';
 import Card from './Card';
@@ -8,24 +9,10 @@ import CardContent from './CardContent';
 import CardActions from './CardActions';
-
+import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
 /**
- * @typedef {import('../../types').CompositeProps} CompositeProps
- * @typedef {import('preact').JSX.HTMLAttributes<HTMLElement>} HTMLAttributes
- * @typedef {import('../../types').IconComponent} IconComponent
+ * Render a composed set of Card components in a panel-like interface.
  *
- * @typedef PanelProps
- * @prop {import('preact').ComponentChildren} [buttons] - content to render as
- *   actions for the panel
- * @prop {IconComponent} [icon] - Name of optional icon to render in header
- * @prop {() => void} [onClose] - handler for closing the panel; if provided,
- *   will render a close button that invokes this onClick
- * @prop {string} title
-
+ * If the total height of the Panel exceeds any height constraints set on the
+ * Panel's immediate parent element, content (`children`) will scroll. The
+ * header and any buttons will not scroll.
  */
-
-/**
- * Render a composed set of Card components in a panel-like interface
- *
- * @param {CompositeProps & PanelProps & Omit<HTMLAttributes, 'icon'|'size'|'width'>} props
- */
-import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
 const PanelNext = function Panel({
@@ -42,2 +29,3 @@ children,
     ...htmlAttributes,
+    classes: 'flex flex-col min-h-0 h-full',
     elementRef: downcastRef(elementRef),
@@ -51,3 +39,3 @@ "data-composite-component": "Panel",
         fileName: _jsxFileName,
-        lineNumber: 47,
+        lineNumber: 57,
         columnNumber: 18
@@ -58,3 +46,3 @@ }, this), _jsxDEV(CardTitle, {
         fileName: _jsxFileName,
-        lineNumber: 48,
+        lineNumber: 58,
         columnNumber: 9
@@ -64,15 +52,27 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 46,
+      lineNumber: 56,
       columnNumber: 7
+    }, this), _jsxDEV(Scroll, {
+      children: _jsxDEV(CardContent, {
+        children: children
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 61,
+        columnNumber: 9
+      }, this)
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 60,
+      columnNumber: 7
     }, this), _jsxDEV(CardContent, {
-      children: [children, buttons && _jsxDEV(CardActions, {
+      children: buttons && _jsxDEV(CardActions, {
         children: buttons
       }, void 0, false, {
         fileName: _jsxFileName,
-        lineNumber: 52,
+        lineNumber: 64,
         columnNumber: 21
-      }, this)]
-    }, void 0, true, {
+      }, this)
+    }, void 0, false, {
       fileName: _jsxFileName,
-      lineNumber: 50,
+      lineNumber: 63,
       columnNumber: 7
@@ -82,3 +82,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 41,
+    lineNumber: 50,
     columnNumber: 5
@@ -85,0 +85,0 @@ }, this);

lib/components/Modal.d.ts

@@ -16,2 +16,3 @@ /**
  * @param {ModalProps} props
+ * @deprecated
  */
@@ -33,2 +34,3 @@ export function Modal({ children, onCancel, ...restProps }: ModalProps): import("preact").JSX.Element;
  * @param {ConfirmModalProps} props
+ * @deprecated
  */
@@ -35,0 +37,0 @@ export function ConfirmModal({ message, confirmAction, onConfirm, onCancel, ...restProps }: ConfirmModalProps): import("preact").JSX.Element;

lib/components/Modal.js

@@ -25,2 +25,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Modal.js";
  * @param {ModalProps} props
+ * @deprecated
  */
@@ -46,3 +47,3 @@ import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
       fileName: _jsxFileName,
-      lineNumber: 39,
+      lineNumber: 40,
       columnNumber: 7
@@ -58,3 +59,3 @@ }, this), _jsxDEV("div", {
         fileName: _jsxFileName,
-        lineNumber: 41,
+        lineNumber: 42,
         columnNumber: 9
@@ -64,3 +65,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 40,
+      lineNumber: 41,
       columnNumber: 7
@@ -86,2 +87,3 @@ }, this)]
  * @param {ConfirmModalProps} props
+ * @deprecated
  */
@@ -104,3 +106,3 @@ export function ConfirmModal({
       fileName: _jsxFileName,
-      lineNumber: 76,
+      lineNumber: 78,
       columnNumber: 9
@@ -113,3 +115,3 @@ }, this)],
       fileName: _jsxFileName,
-      lineNumber: 87,
+      lineNumber: 89,
       columnNumber: 7
@@ -119,3 +121,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 73,
+    lineNumber: 75,
     columnNumber: 5
@@ -122,0 +124,0 @@ }, this);

lib/components/navigation/index.d.ts

@@ -5,1 +5,3 @@ export { default as PointerButton } from "./PointerButton";
 export { default as LinkButton } from "./LinkButton";
+export { default as Tab } from "./Tab";
+export { default as TabList } from "./TabList";

lib/components/navigation/index.js

@@ -5,2 +5,4 @@ export { default as PointerButton } from './PointerButton';
 export { default as LinkButton } from './LinkButton';
+export { default as Tab } from './Tab';
+export { default as TabList } from './TabList';
 //# sourceMappingURL=index.js.map

lib/components/Spinner.d.ts

@@ -22,2 +22,3 @@ /**
  *
+ * @deprecated - Use `SpinnerOverlay` in the feedback group
  * @param {FullScreenSpinnerProps} props
@@ -24,0 +25,0 @@ */

lib/components/Spinner.js

@@ -50,2 +50,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Spinner.js";
  *
+ * @deprecated - Use `SpinnerOverlay` in the feedback group
  * @param {FullScreenSpinnerProps} props
@@ -64,3 +65,3 @@ */
       fileName: _jsxFileName,
-      lineNumber: 48,
+      lineNumber: 49,
       columnNumber: 7
@@ -70,3 +71,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 47,
+    lineNumber: 48,
     columnNumber: 5
@@ -73,0 +74,0 @@ }, this);

lib/next.d.ts

@@ -5,5 +5,5 @@ export { useArrowKeyNavigation } from "./hooks/use-arrow-key-navigation";
 export { AspectRatio, DataTable, Scroll, ScrollContent, ScrollContainer, ScrollBox, Table, TableBody, TableCell, TableHead, TableRow, Thumbnail } from "./components/data";
-export { Spinner, SpinnerOverlay } from "./components/feedback";
+export { Modal, Spinner, SpinnerOverlay } from "./components/feedback";
 export { Button, ButtonBase, Checkbox, IconButton, Input, InputGroup } from "./components/input";
 export { Card, CardContent, CardHeader, CardTitle, CardActions, Overlay, Panel } from "./components/layout";
-export { PointerButton, Link, LinkBase, LinkButton } from "./components/navigation/";
+export { PointerButton, Link, LinkBase, LinkButton, Tab, TabList } from "./components/navigation/";

lib/next.js

@@ -8,6 +8,6 @@ // Hooks
 export { AspectRatio, DataTable, Scroll, ScrollContent, ScrollContainer, ScrollBox, Table, TableBody, TableCell, TableHead, TableRow, Thumbnail } from './components/data';
-export { Spinner, SpinnerOverlay } from './components/feedback';
+export { Modal, Spinner, SpinnerOverlay } from './components/feedback';
 export { Button, ButtonBase, Checkbox, IconButton, Input, InputGroup } from './components/input';
 export { Card, CardContent, CardHeader, CardTitle, CardActions, Overlay, Panel } from './components/layout';
-export { PointerButton, Link, LinkBase, LinkButton } from './components/navigation/';
+export { PointerButton, Link, LinkBase, LinkButton, Tab, TabList } from './components/navigation/';
 //# sourceMappingURL=next.js.map

lib/pattern-library/components/patterns/ColorsPage.d.ts

 export default function ColorsPage(): import("preact").JSX.Element;
-export type ColorSwatchProps = {
-    colorClass: string;
-    colorName: string;
-};

lib/pattern-library/components/patterns/ColorsPage.js

@@ -1,12 +0,4 @@
-var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ColorsPage.js";
+var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ColorsPage.tsx";
 import classnames from 'classnames';
 import Library from '../Library';
-
-/**
- * @typedef ColorSwatchProps
- * @prop {string} colorClass
- * @prop {string} colorName
- */
-
-/** @param {ColorSwatchProps} props */
 import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
@@ -23,3 +15,3 @@ import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
       fileName: _jsxFileName,
-      lineNumber: 14,
+      lineNumber: 12,
       columnNumber: 7
@@ -31,3 +23,3 @@ }, this), _jsxDEV("p", {
         fileName: _jsxFileName,
-        lineNumber: 16,
+        lineNumber: 14,
         columnNumber: 9
@@ -37,3 +29,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 15,
+      lineNumber: 13,
       columnNumber: 7
@@ -43,3 +35,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 13,
+    lineNumber: 11,
     columnNumber: 5
@@ -54,3 +46,3 @@ }, this);
     fileName: _jsxFileName,
-    lineNumber: 24,
+    lineNumber: 22,
     columnNumber: 5
@@ -62,3 +54,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 25,
+    lineNumber: 23,
     columnNumber: 5
@@ -73,3 +65,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 31,
+    lineNumber: 29,
     columnNumber: 5
@@ -81,3 +73,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 32,
+    lineNumber: 30,
     columnNumber: 5
@@ -89,3 +81,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 33,
+    lineNumber: 31,
     columnNumber: 5
@@ -97,3 +89,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 34,
+    lineNumber: 32,
     columnNumber: 5
@@ -105,3 +97,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 35,
+    lineNumber: 33,
     columnNumber: 5
@@ -113,3 +105,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 36,
+    lineNumber: 34,
     columnNumber: 5
@@ -121,3 +113,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 37,
+    lineNumber: 35,
     columnNumber: 5
@@ -129,3 +121,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 38,
+    lineNumber: 36,
     columnNumber: 5
@@ -137,3 +129,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 39,
+    lineNumber: 37,
     columnNumber: 5
@@ -145,3 +137,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 40,
+    lineNumber: 38,
     columnNumber: 5
@@ -153,3 +145,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 41,
+    lineNumber: 39,
     columnNumber: 5
@@ -161,3 +153,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 42,
+    lineNumber: 40,
     columnNumber: 5
@@ -172,3 +164,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 48,
+    lineNumber: 46,
     columnNumber: 5
@@ -180,3 +172,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 49,
+    lineNumber: 47,
     columnNumber: 5
@@ -188,3 +180,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 50,
+    lineNumber: 48,
     columnNumber: 5
@@ -196,3 +188,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 51,
+    lineNumber: 49,
     columnNumber: 5
@@ -204,3 +196,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 52,
+    lineNumber: 50,
     columnNumber: 5
@@ -212,3 +204,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 53,
+    lineNumber: 51,
     columnNumber: 5
@@ -223,3 +215,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 59,
+    lineNumber: 57,
     columnNumber: 5
@@ -231,3 +223,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 60,
+    lineNumber: 58,
     columnNumber: 5
@@ -239,3 +231,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 61,
+    lineNumber: 59,
     columnNumber: 5
@@ -250,3 +242,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 67,
+    lineNumber: 65,
     columnNumber: 5
@@ -265,3 +257,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 75,
+        lineNumber: 73,
         columnNumber: 9
@@ -271,3 +263,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 74,
+      lineNumber: 72,
       columnNumber: 7
@@ -281,3 +273,3 @@ }, this), _jsxDEV(Library.Pattern, {
         fileName: _jsxFileName,
-        lineNumber: 79,
+        lineNumber: 77,
         columnNumber: 9
@@ -287,3 +279,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 78,
+      lineNumber: 76,
       columnNumber: 7
@@ -296,3 +288,3 @@ }, this), _jsxDEV(Library.Pattern, {
         fileName: _jsxFileName,
-        lineNumber: 83,
+        lineNumber: 81,
         columnNumber: 9
@@ -304,3 +296,3 @@ }, this), _jsxDEV("div", {
         fileName: _jsxFileName,
-        lineNumber: 87,
+        lineNumber: 85,
         columnNumber: 9
@@ -310,3 +302,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 82,
+      lineNumber: 80,
       columnNumber: 7
@@ -320,3 +312,3 @@ }, this), _jsxDEV(Library.Pattern, {
         fileName: _jsxFileName,
-        lineNumber: 91,
+        lineNumber: 89,
         columnNumber: 9
@@ -326,3 +318,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 90,
+      lineNumber: 88,
       columnNumber: 7
@@ -336,3 +328,3 @@ }, this), _jsxDEV(Library.Pattern, {
         fileName: _jsxFileName,
-        lineNumber: 95,
+        lineNumber: 93,
         columnNumber: 9
@@ -342,3 +334,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 94,
+      lineNumber: 92,
       columnNumber: 7
@@ -348,3 +340,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 73,
+    lineNumber: 71,
     columnNumber: 5
@@ -351,0 +343,0 @@ }, this);

lib/pattern-library/components/patterns/DialogComponents.js

@@ -6,2 +6,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/DialogComponents.js";
 import Library from '../Library';
+import Next from '../LibraryNext';
 import { ConfirmModal, Dialog, IconButton, LabeledButton, Modal, TextInput, TextInputWithButton } from '../../../';
@@ -18,3 +19,3 @@ import { LoremIpsum } from './samples';
     fileName: _jsxFileName,
-    lineNumber: 24,
+    lineNumber: 25,
     columnNumber: 5
@@ -27,3 +28,3 @@ }, this), _jsxDEV(LabeledButton, {
     fileName: _jsxFileName,
-    lineNumber: 27,
+    lineNumber: 28,
     columnNumber: 5
@@ -38,3 +39,3 @@ }, this)];
       fileName: _jsxFileName,
-      lineNumber: 38,
+      lineNumber: 39,
       columnNumber: 7
@@ -54,3 +55,3 @@ }, this);
           fileName: _jsxFileName,
-          lineNumber: 55,
+          lineNumber: 56,
           columnNumber: 21
@@ -61,3 +62,3 @@ }, this), ", with initial focus on a", ' ', _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 56,
+          lineNumber: 57,
           columnNumber: 11
@@ -67,3 +68,3 @@ }, this), " component input."]
         fileName: _jsxFileName,
-        lineNumber: 54,
+        lineNumber: 55,
         columnNumber: 9
@@ -76,3 +77,3 @@ }, this), _jsxDEV(TextInputWithButton, {
           fileName: _jsxFileName,
-          lineNumber: 59,
+          lineNumber: 60,
           columnNumber: 11
@@ -85,3 +86,3 @@ }, this), _jsxDEV(IconButton, {
           fileName: _jsxFileName,
-          lineNumber: 60,
+          lineNumber: 61,
           columnNumber: 11
@@ -91,3 +92,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 58,
+        lineNumber: 59,
         columnNumber: 9
@@ -97,3 +98,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 47,
+      lineNumber: 48,
       columnNumber: 7
@@ -112,3 +113,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 72,
+      lineNumber: 73,
       columnNumber: 7
@@ -126,3 +127,3 @@ }, this);
         fileName: _jsxFileName,
-        lineNumber: 87,
+        lineNumber: 88,
         columnNumber: 9
@@ -132,3 +133,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 81,
+      lineNumber: 82,
       columnNumber: 7
@@ -147,3 +148,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 98,
+      lineNumber: 99,
       columnNumber: 7
@@ -161,3 +162,3 @@ }, this);
         fileName: _jsxFileName,
-        lineNumber: 113,
+        lineNumber: 114,
         columnNumber: 9
@@ -167,3 +168,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 107,
+      lineNumber: 108,
       columnNumber: 7
@@ -182,3 +183,3 @@ }, this);
     fileName: _jsxFileName,
-    lineNumber: 124,
+    lineNumber: 125,
     columnNumber: 5
@@ -193,3 +194,3 @@ }, this)];
       fileName: _jsxFileName,
-      lineNumber: 135,
+      lineNumber: 136,
       columnNumber: 7
@@ -208,3 +209,3 @@ }, this);
           fileName: _jsxFileName,
-          lineNumber: 151,
+          lineNumber: 152,
           columnNumber: 21
@@ -215,3 +216,3 @@ }, this), ", with initial focus on a", ' ', _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 152,
+          lineNumber: 153,
           columnNumber: 11
@@ -221,3 +222,3 @@ }, this), " component input."]
         fileName: _jsxFileName,
-        lineNumber: 150,
+        lineNumber: 151,
         columnNumber: 9
@@ -230,3 +231,3 @@ }, this), _jsxDEV(TextInputWithButton, {
           fileName: _jsxFileName,
-          lineNumber: 155,
+          lineNumber: 156,
           columnNumber: 11
@@ -239,3 +240,3 @@ }, this), _jsxDEV(IconButton, {
           fileName: _jsxFileName,
-          lineNumber: 156,
+          lineNumber: 157,
           columnNumber: 11
@@ -245,3 +246,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 154,
+        lineNumber: 155,
         columnNumber: 9
@@ -251,3 +252,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 144,
+      lineNumber: 145,
       columnNumber: 7
@@ -265,3 +266,3 @@ }, this);
     fileName: _jsxFileName,
-    lineNumber: 167,
+    lineNumber: 168,
     columnNumber: 5
@@ -276,3 +277,3 @@ }, this)];
       fileName: _jsxFileName,
-      lineNumber: 178,
+      lineNumber: 179,
       columnNumber: 7
@@ -289,3 +290,3 @@ }, this);
           fileName: _jsxFileName,
-          lineNumber: 193,
+          lineNumber: 194,
           columnNumber: 11
@@ -295,3 +296,3 @@ }, this)
         fileName: _jsxFileName,
-        lineNumber: 192,
+        lineNumber: 193,
         columnNumber: 9
@@ -301,3 +302,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 187,
+      lineNumber: 188,
       columnNumber: 7
@@ -316,3 +317,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 205,
+      lineNumber: 206,
       columnNumber: 7
@@ -329,3 +330,3 @@ }, this);
       fileName: _jsxFileName,
-      lineNumber: 214,
+      lineNumber: 215,
       columnNumber: 7
@@ -339,2 +340,89 @@ }, this);
     children: [_jsxDEV(Library.Pattern, {
+      title: "Status",
+      children: _jsxDEV(Next.Changelog, {
+        children: [_jsxDEV(Next.ChangelogItem, {
+          status: "deprecated",
+          children: ["The legacy implementation of", _jsxDEV("s", {
+            children: _jsxDEV("code", {
+              children: "Modal"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 234,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 233,
+            columnNumber: 13
+          }, this), ' ', "is deprecated and slated for removal in v6 of", ' ', _jsxDEV("code", {
+            children: "frontend-shared"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 237,
+            columnNumber: 13
+          }, this), ". Use re-implemented", _jsxDEV("code", {
+            children: "Modal"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 238,
+            columnNumber: 13
+          }, this), " component in the feedback group instead."]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 231,
+          columnNumber: 11
+        }, this), _jsxDEV(Next.ChangelogItem, {
+          status: "deprecated",
+          children: ["The legacy implementation of", _jsxDEV("s", {
+            children: _jsxDEV("code", {
+              children: "Dialog"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 243,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 242,
+            columnNumber: 13
+          }, this), ' ', "is deprecated and slated for removal in v6 of", ' ', _jsxDEV("code", {
+            children: "frontend-shared"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 246,
+            columnNumber: 13
+          }, this), ". Use re-implemented", _jsxDEV("code", {
+            children: "Modal"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 247,
+            columnNumber: 13
+          }, this), " component in the feedback group instead: it combines the functionality of ", _jsxDEV("code", {
+            children: "Dialog"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 248,
+            columnNumber: 43
+          }, this), " and", ' ', _jsxDEV("code", {
+            children: "Modal"
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 249,
+            columnNumber: 13
+          }, this), "."]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 240,
+          columnNumber: 11
+        }, this)]
+      }, void 0, true, {
+        fileName: _jsxFileName,
+        lineNumber: 230,
+        columnNumber: 9
+      }, this)
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 229,
+      columnNumber: 7
+    }, this), _jsxDEV(Library.Pattern, {
       title: "Dialog",
@@ -346,3 +434,3 @@ children: [_jsxDEV("p", {
           fileName: _jsxFileName,
-          lineNumber: 230,
+          lineNumber: 255,
           columnNumber: 13
@@ -352,3 +440,3 @@ }, this), " prompts for user interaction and will take focus when opened."]
         fileName: _jsxFileName,
-        lineNumber: 229,
+        lineNumber: 254,
         columnNumber: 9
@@ -360,3 +448,3 @@ }, this), _jsxDEV("p", {
           fileName: _jsxFileName,
-          lineNumber: 234,
+          lineNumber: 259,
           columnNumber: 17
@@ -367,3 +455,3 @@ }, this), " when you want to route focus. Consider using a ", _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 235,
+          lineNumber: 260,
           columnNumber: 13
@@ -373,3 +461,3 @@ }, this), " for presenting panel-styled content that does not require grabbing focus."]
         fileName: _jsxFileName,
-        lineNumber: 233,
+        lineNumber: 258,
         columnNumber: 9
@@ -381,3 +469,3 @@ }, this), _jsxDEV("p", {
           fileName: _jsxFileName,
-          lineNumber: 239,
+          lineNumber: 264,
           columnNumber: 11
@@ -388,3 +476,3 @@ }, this), " are styled using the ", _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 239,
+          lineNumber: 264,
           columnNumber: 53
@@ -394,3 +482,3 @@ }, this), " pattern."]
         fileName: _jsxFileName,
-        lineNumber: 238,
+        lineNumber: 263,
         columnNumber: 9
@@ -404,3 +492,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 243,
+            lineNumber: 268,
             columnNumber: 47
@@ -411,3 +499,3 @@ }, this), " with an explicitly-provided element (", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 244,
+            lineNumber: 269,
             columnNumber: 42
@@ -418,3 +506,3 @@ }, this), ") that should take initial focus: a text ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 245,
+            lineNumber: 270,
             columnNumber: 35
@@ -424,3 +512,3 @@ }, this), "."]
           fileName: _jsxFileName,
-          lineNumber: 242,
+          lineNumber: 267,
           columnNumber: 11
@@ -432,3 +520,3 @@ }, this), _jsxDEV("p", {
             fileName: _jsxFileName,
-            lineNumber: 249,
+            lineNumber: 274,
             columnNumber: 30
@@ -439,3 +527,3 @@ }, this), " or ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 249,
+            lineNumber: 274,
             columnNumber: 53
@@ -446,3 +534,3 @@ }, this), " is opened. This might arise if you have nested components within a", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 251,
+            lineNumber: 276,
             columnNumber: 13
@@ -453,3 +541,3 @@ }, this), " or ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 251,
+            lineNumber: 276,
             columnNumber: 35
@@ -460,3 +548,3 @@ }, this), ", or there is complex logic about focus. Setting the ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 252,
+            lineNumber: 277,
             columnNumber: 38
@@ -467,3 +555,3 @@ }, this), " prop to", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 253,
+            lineNumber: 278,
             columnNumber: 13
@@ -473,3 +561,3 @@ }, this), " will opt out of automatic focus handling."]
           fileName: _jsxFileName,
-          lineNumber: 247,
+          lineNumber: 272,
           columnNumber: 11
@@ -479,3 +567,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 257,
+            lineNumber: 282,
             columnNumber: 13
@@ -485,3 +573,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 256,
+          lineNumber: 281,
           columnNumber: 11
@@ -491,3 +579,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 241,
+        lineNumber: 266,
         columnNumber: 9
@@ -501,3 +589,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 263,
+            lineNumber: 288,
             columnNumber: 27
@@ -508,3 +596,3 @@ }, this), " will render both a close button (x) and a Cancel button if an ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 264,
+            lineNumber: 289,
             columnNumber: 43
@@ -515,3 +603,3 @@ }, this), " callback is provided, but this can be overridden with the", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 266,
+            lineNumber: 291,
             columnNumber: 13
@@ -522,3 +610,3 @@ }, this), " and ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 266,
+            lineNumber: 291,
             columnNumber: 47
@@ -528,3 +616,3 @@ }, this), ' ', "boolean props for the cancel button and close button, respectively."]
           fileName: _jsxFileName,
-          lineNumber: 262,
+          lineNumber: 287,
           columnNumber: 11
@@ -535,3 +623,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 270,
+            lineNumber: 295,
             columnNumber: 13
@@ -541,3 +629,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 269,
+          lineNumber: 294,
           columnNumber: 11
@@ -548,3 +636,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 274,
+            lineNumber: 299,
             columnNumber: 13
@@ -554,3 +642,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 273,
+          lineNumber: 298,
           columnNumber: 11
@@ -560,3 +648,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 261,
+        lineNumber: 286,
         columnNumber: 9
@@ -566,3 +654,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 228,
+      lineNumber: 253,
       columnNumber: 7
@@ -576,3 +664,3 @@ }, this), _jsxDEV(Library.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 281,
+          lineNumber: 306,
           columnNumber: 13
@@ -583,3 +671,3 @@ }, this), " is a type of ", _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 281,
+          lineNumber: 306,
           columnNumber: 45
@@ -589,3 +677,3 @@ }, this), " that centers on the screen and obscures the background with an overlay."]
         fileName: _jsxFileName,
-        lineNumber: 280,
+        lineNumber: 305,
         columnNumber: 9
@@ -598,3 +686,3 @@ }, this), _jsxDEV(Library.Example, {
           fileName: _jsxFileName,
-          lineNumber: 285,
+          lineNumber: 310,
           columnNumber: 11
@@ -604,3 +692,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 290,
+            lineNumber: 315,
             columnNumber: 13
@@ -610,3 +698,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 289,
+          lineNumber: 314,
           columnNumber: 11
@@ -616,3 +704,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 284,
+        lineNumber: 309,
         columnNumber: 9
@@ -625,3 +713,3 @@ }, this), _jsxDEV(Library.Example, {
           fileName: _jsxFileName,
-          lineNumber: 295,
+          lineNumber: 320,
           columnNumber: 11
@@ -633,3 +721,3 @@ }, this), _jsxDEV("p", {
             fileName: _jsxFileName,
-            lineNumber: 302,
+            lineNumber: 327,
             columnNumber: 13
@@ -640,3 +728,3 @@ }, this), " to the element you wish to contain. This element needs to be an immediate-child element of the", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 304,
+            lineNumber: 329,
             columnNumber: 13
@@ -646,3 +734,3 @@ }, this), "."]
           fileName: _jsxFileName,
-          lineNumber: 300,
+          lineNumber: 325,
           columnNumber: 11
@@ -652,3 +740,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 307,
+            lineNumber: 332,
             columnNumber: 13
@@ -658,3 +746,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 306,
+          lineNumber: 331,
           columnNumber: 11
@@ -664,3 +752,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 294,
+        lineNumber: 319,
         columnNumber: 9
@@ -670,3 +758,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 279,
+      lineNumber: 304,
       columnNumber: 7
@@ -680,3 +768,3 @@ }, this), _jsxDEV(Library.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 314,
+          lineNumber: 339,
           columnNumber: 11
@@ -687,3 +775,3 @@ }, this), " is intended to mirror the functionality of", ' ', _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 315,
+          lineNumber: 340,
           columnNumber: 11
@@ -693,3 +781,3 @@ }, this), "."]
         fileName: _jsxFileName,
-        lineNumber: 313,
+        lineNumber: 338,
         columnNumber: 9
@@ -702,3 +790,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 319,
+            lineNumber: 344,
             columnNumber: 13
@@ -708,3 +796,3 @@ }, this), " prompts the user for a boolean yes/no input. Close and cancel are considered no."]
           fileName: _jsxFileName,
-          lineNumber: 318,
+          lineNumber: 343,
           columnNumber: 11
@@ -716,3 +804,3 @@ }, this), _jsxDEV("p", {
             fileName: _jsxFileName,
-            lineNumber: 324,
+            lineNumber: 349,
             columnNumber: 13
@@ -723,3 +811,3 @@ }, this), ") and no/cancel (", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 324,
+            lineNumber: 349,
             columnNumber: 52
@@ -730,3 +818,3 @@ }, this), "). Typically, both would (also) close the modal, though in this example, the ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 326,
+            lineNumber: 351,
             columnNumber: 26
@@ -736,3 +824,3 @@ }, this), " handler does not close the modal."]
           fileName: _jsxFileName,
-          lineNumber: 322,
+          lineNumber: 347,
           columnNumber: 11
@@ -742,3 +830,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 330,
+            lineNumber: 355,
             columnNumber: 13
@@ -748,3 +836,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 329,
+          lineNumber: 354,
           columnNumber: 11
@@ -754,3 +842,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 317,
+        lineNumber: 342,
         columnNumber: 9
@@ -760,3 +848,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 312,
+      lineNumber: 337,
       columnNumber: 7
@@ -766,3 +854,3 @@ }, this)]
     fileName: _jsxFileName,
-    lineNumber: 227,
+    lineNumber: 228,
     columnNumber: 5
@@ -769,0 +857,0 @@ }, this);

lib/pattern-library/components/patterns/layout/PanelPage.js

@@ -6,2 +6,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/layout/PanelPage.js";
 import Next from '../../LibraryNext';
+import { LoremIpsum } from '../samples';
 import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
@@ -17,3 +18,3 @@ import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
         fileName: _jsxFileName,
-        lineNumber: 12,
+        lineNumber: 14,
         columnNumber: 11
@@ -24,3 +25,3 @@ }, this), " can be used to create panel-like interfaces. For more nuanced control, use ", _jsxDEV("code", {
         fileName: _jsxFileName,
-        lineNumber: 13,
+        lineNumber: 15,
         columnNumber: 37
@@ -30,3 +31,3 @@ }, this), " and its allies."]
       fileName: _jsxFileName,
-      lineNumber: 11,
+      lineNumber: 13,
       columnNumber: 9
@@ -41,3 +42,3 @@ }, this),
           fileName: _jsxFileName,
-          lineNumber: 21,
+          lineNumber: 23,
           columnNumber: 13
@@ -47,3 +48,3 @@ }, this), " is a composite component for standardized panel layouts."]
         fileName: _jsxFileName,
-        lineNumber: 20,
+        lineNumber: 22,
         columnNumber: 11
@@ -58,3 +59,3 @@ }, this),
             fileName: _jsxFileName,
-            lineNumber: 28,
+            lineNumber: 30,
             columnNumber: 13
@@ -64,3 +65,3 @@ }, this), " is a re-implementation of a legacy component with the same name."]
           fileName: _jsxFileName,
-          lineNumber: 27,
+          lineNumber: 29,
           columnNumber: 11
@@ -76,3 +77,3 @@ }, this), _jsxDEV(Library.Example, {
                 fileName: _jsxFileName,
-                lineNumber: 35,
+                lineNumber: 37,
                 columnNumber: 22
@@ -84,3 +85,3 @@ }, this), ":", ' ', _jsxDEV("s", {
                   fileName: _jsxFileName,
-                  lineNumber: 37,
+                  lineNumber: 39,
                   columnNumber: 19
@@ -90,3 +91,3 @@ }, this)
                 fileName: _jsxFileName,
-                lineNumber: 36,
+                lineNumber: 38,
                 columnNumber: 17
@@ -97,3 +98,3 @@ }, this), ' ', "\u279C now takes ", _jsxDEV("code", {
                 fileName: _jsxFileName,
-                lineNumber: 39,
+                lineNumber: 41,
                 columnNumber: 29
@@ -103,3 +104,3 @@ }, this)]
               fileName: _jsxFileName,
-              lineNumber: 34,
+              lineNumber: 36,
               columnNumber: 15
@@ -112,3 +113,3 @@ }, this), _jsxDEV(Next.ChangelogItem, {
                 fileName: _jsxFileName,
-                lineNumber: 42,
+                lineNumber: 44,
                 columnNumber: 22
@@ -118,3 +119,3 @@ }, this)]
               fileName: _jsxFileName,
-              lineNumber: 41,
+              lineNumber: 43,
               columnNumber: 15
@@ -124,3 +125,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 33,
+            lineNumber: 35,
             columnNumber: 13
@@ -130,3 +131,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 32,
+          lineNumber: 34,
           columnNumber: 11
@@ -136,3 +137,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 26,
+        lineNumber: 28,
         columnNumber: 9
@@ -145,3 +146,3 @@ }, this), _jsxDEV(Library.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 49,
+          lineNumber: 51,
           columnNumber: 11
@@ -154,3 +155,3 @@ }, this), _jsxDEV(Library.Example, {
               fileName: _jsxFileName,
-              lineNumber: 52,
+              lineNumber: 54,
               columnNumber: 19
@@ -161,3 +162,3 @@ }, this), "s have a ", _jsxDEV("code", {
               fileName: _jsxFileName,
-              lineNumber: 52,
+              lineNumber: 54,
               columnNumber: 46
@@ -167,3 +168,3 @@ }, this), "."]
             fileName: _jsxFileName,
-            lineNumber: 51,
+            lineNumber: 53,
             columnNumber: 13
@@ -178,3 +179,3 @@ }, this), _jsxDEV(Library.Demo, {
               fileName: _jsxFileName,
-              lineNumber: 55,
+              lineNumber: 57,
               columnNumber: 15
@@ -184,3 +185,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 54,
+            lineNumber: 56,
             columnNumber: 13
@@ -190,8 +191,80 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 50,
+          lineNumber: 52,
           columnNumber: 11
+        }, this), _jsxDEV(Library.Example, {
+          title: "Scrolling long content",
+          children: [_jsxDEV("p", {
+            children: ["If a ", _jsxDEV("code", {
+              children: "Panel"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 66,
+              columnNumber: 20
+            }, this), " is a direct child of an element with a height constraint, content will scroll as needed, but not the heading or buttons. This can be useful if a ", _jsxDEV("code", {
+              children: "Panel"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 68,
+              columnNumber: 59
+            }, this), " is needed in a constrained interface, like a modal."]
+          }, void 0, true, {
+            fileName: _jsxFileName,
+            lineNumber: 65,
+            columnNumber: 13
+          }, this), _jsxDEV(Library.Demo, {
+            withSource: true,
+            children: _jsxDEV("div", {
+              className: "h-[350px]",
+              children: _jsxDEV(Panel, {
+                title: "Scrolling content",
+                buttons: _jsxDEV(_Fragment, {
+                  children: [_jsxDEV(Button, {
+                    children: "Buttons"
+                  }, void 0, false, {
+                    fileName: _jsxFileName,
+                    lineNumber: 78,
+                    columnNumber: 23
+                  }, this), _jsxDEV(Button, {
+                    children: "do not"
+                  }, void 0, false, {
+                    fileName: _jsxFileName,
+                    lineNumber: 79,
+                    columnNumber: 23
+                  }, this), _jsxDEV(Button, {
+                    variant: "primary",
+                    children: "Scroll"
+                  }, void 0, false, {
+                    fileName: _jsxFileName,
+                    lineNumber: 80,
+                    columnNumber: 23
+                  }, this)]
+                }, void 0, true),
+                children: _jsxDEV(LoremIpsum, {}, void 0, false, {
+                  fileName: _jsxFileName,
+                  lineNumber: 84,
+                  columnNumber: 19
+                }, this)
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 74,
+                columnNumber: 17
+              }, this)
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 73,
+              columnNumber: 15
+            }, this)
+          }, void 0, false, {
+            fileName: _jsxFileName,
+            lineNumber: 72,
+            columnNumber: 13
+          }, this)]
+        }, void 0, true, {
+          fileName: _jsxFileName,
+          lineNumber: 64,
+          columnNumber: 11
         }, this)]
       }, void 0, true, {
         fileName: _jsxFileName,
-        lineNumber: 48,
+        lineNumber: 50,
         columnNumber: 9
@@ -207,3 +280,3 @@ }, this), _jsxDEV(Library.Pattern, {
               fileName: _jsxFileName,
-              lineNumber: 66,
+              lineNumber: 94,
               columnNumber: 37
@@ -213,3 +286,3 @@ }, this), " to render a close button."]
             fileName: _jsxFileName,
-            lineNumber: 65,
+            lineNumber: 93,
             columnNumber: 13
@@ -225,3 +298,3 @@ }, this), _jsxDEV(Library.Demo, {
               fileName: _jsxFileName,
-              lineNumber: 70,
+              lineNumber: 98,
               columnNumber: 15
@@ -231,3 +304,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 69,
+            lineNumber: 97,
             columnNumber: 13
@@ -237,3 +310,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 64,
+          lineNumber: 92,
           columnNumber: 11
@@ -247,3 +320,3 @@ }, this), _jsxDEV(Library.Example, {
               fileName: _jsxFileName,
-              lineNumber: 82,
+              lineNumber: 110,
               columnNumber: 18
@@ -254,3 +327,3 @@ }, this), " provided to the ", _jsxDEV("code", {
               fileName: _jsxFileName,
-              lineNumber: 82,
+              lineNumber: 110,
               columnNumber: 61
@@ -260,3 +333,3 @@ }, this), ' ', "prop will be rendered to the left of the title."]
             fileName: _jsxFileName,
-            lineNumber: 81,
+            lineNumber: 109,
             columnNumber: 13
@@ -271,3 +344,3 @@ }, this), _jsxDEV(Library.Demo, {
               fileName: _jsxFileName,
-              lineNumber: 86,
+              lineNumber: 114,
               columnNumber: 15
@@ -277,3 +350,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 85,
+            lineNumber: 113,
             columnNumber: 13
@@ -283,3 +356,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 80,
+          lineNumber: 108,
           columnNumber: 11
@@ -293,3 +366,3 @@ }, this), _jsxDEV(Library.Example, {
               fileName: _jsxFileName,
-              lineNumber: 95,
+              lineNumber: 123,
               columnNumber: 15
@@ -300,3 +373,3 @@ }, this), " passed to the ", _jsxDEV("code", {
               fileName: _jsxFileName,
-              lineNumber: 95,
+              lineNumber: 123,
               columnNumber: 60
@@ -306,3 +379,3 @@ }, this), ' ', "prop will be rendered as actions in the panel."]
             fileName: _jsxFileName,
-            lineNumber: 94,
+            lineNumber: 122,
             columnNumber: 13
@@ -318,3 +391,3 @@ }, this), _jsxDEV(Library.Demo, {
                   fileName: _jsxFileName,
-                  lineNumber: 103,
+                  lineNumber: 131,
                   columnNumber: 21
@@ -326,3 +399,3 @@ }, this), _jsxDEV(Button, {
                   fileName: _jsxFileName,
-                  lineNumber: 104,
+                  lineNumber: 132,
                   columnNumber: 21
@@ -334,3 +407,3 @@ }, this)]
               fileName: _jsxFileName,
-              lineNumber: 99,
+              lineNumber: 127,
               columnNumber: 15
@@ -340,3 +413,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 98,
+            lineNumber: 126,
             columnNumber: 13
@@ -346,3 +419,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 93,
+          lineNumber: 121,
           columnNumber: 11
@@ -352,3 +425,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 63,
+        lineNumber: 91,
         columnNumber: 9
@@ -358,3 +431,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 17,
+      lineNumber: 19,
       columnNumber: 7
@@ -364,3 +437,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 8,
+    lineNumber: 10,
     columnNumber: 5
@@ -367,0 +440,0 @@ }, this);

lib/pattern-library/components/patterns/samples.d.ts

@@ -12,6 +12,10 @@ /**
  * Provide Lorem Ipsum text.
- *
- * TODO: This can be extended to return different lengths of lorem.
  */
-export function LoremIpsum(): import("preact").JSX.Element;
+/**
+ * @param {object} props
+ *   @param {'sm'|'md'|'lg'} [props.size]
+ */
+export function LoremIpsum({ size }: {
+    size?: "sm" | "md" | "lg" | undefined;
+}): import("preact").JSX.Element;
 export function sampleTableContent(): {
@@ -18,0 +22,0 @@ tableHeaders: {

lib/pattern-library/components/patterns/samples.js

@@ -348,13 +348,50 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/samples.js";
  * Provide Lorem Ipsum text.
- *
- * TODO: This can be extended to return different lengths of lorem.
  */
-export function LoremIpsum() {
-  return _jsxDEV("p", {
-    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien cursus, fringilla diam posuere, varius urna. Phasellus dictum sodales dui, sed scelerisque mauris auctor et. Integer suscipit justo in erat tristique, nec feugiat augue ultrices. Sed accumsan pretium commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lobortis tortor metus, sed rutrum risus ultricies non. Maecenas ultricies rutrum diam non feugiat. Nam ut ex ac enim efficitur semper. Integer sed rhoncus eros. Nulla pharetra vulputate faucibus. Vestibulum vestibulum orci non maximus aliquet. Donec id dui ac ipsum pellentesque gravida sit amet non sem. Suspendisse malesuada turpis id erat porta, nec luctus odio mollis. Sed a arcu sed sem venenatis porta. In dictum sapien ut congue facilisis. Curabitur consequat vestibulum ultricies. Vivamus rhoncus vitae sapien id volutpat. Fusce ac nisi dolor. Suspendisse ut venenatis ex. Quisque elementum libero quam, non consectetur lorem faucibus a. Sed eu orci vitae nibh sodales sodales ut at neque. Ut lobortis arcu eu lorem porttitor scelerisque. Aenean euismod est ac enim fermentum, sit amet tristique dui consequat. Phasellus vitae sapien dolor. Nulla iaculis nibh at magna convallis finibus ut vitae ipsum. Maecenas ultricies ultrices diam laoreet lacinia. Nunc commodo eu lorem a bibendum. Sed eu magna rutrum, consectetur orci sit amet, venenatis ex. Aliquam sodales nec odio ac ultricies. In sit amet congue ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus accumsan justo nec maximus sollicitudin. Aenean eu urna egestas justo dignissim venenatis quis quis massa. Pellentesque convallis posuere elit, eu interdum diam placerat et. Aenean cursus vehicula nibh, in scelerisque nunc feugiat eu. Praesent eleifend ipsum eget urna dictum semper. Nullam dapibus nisl sit amet ultricies lobortis. Vestibulum a velit neque. Suspendisse tincidunt aliquet lorem et consectetur. Phasellus at libero fringilla nulla egestas aliquam. Nullam ut magna risus. Etiam consequat neque sapien, vel ultrices justo vehicula sit amet. Donec semper facilisis odio vel faucibus. Integer eget sagittis justo. Integer sed tincidunt neque. In vulputate fermentum lacus, eget sollicitudin nisi vestibulum vel. Etiam porttitor varius justo, id efficitur tellus congue a. Cras condimentum congue lectus sit amet commodo. Etiam lacus ex, efficitur volutpat enim id, malesuada posuere metus. Mauris convallis convallis arcu, sit amet placerat felis sodales ut. Duis semper a risus ac consequat. Nulla id nibh sem. Aliquam et nulla nec lectus viverra lobortis. Vivamus eros enim, lobortis nec efficitur nec, rhoncus at tortor. Aliquam aliquet bibendum ipsum eu feugiat. Duis iaculis bibendum ligula non ultricies. Curabitur cursus nulla in nisl tincidunt, eget eleifend tellus ultricies. Pellentesque eget mauris nec magna ultrices fringilla id sit amet nulla. Ut nec velit sed augue eleifend pharetra. Aliquam a posuere massa. Nunc vitae tortor ut est cursus vestibulum. In hac habitasse platea dictumst. Nulla eget orci eleifend, elementum turpis vitae, consectetur magna. In in nulla in tellus vestibulum pharetra. Curabitur at rhoncus enim, tempus congue est. Nullam consectetur lobortis nunc, vel feugiat lorem semper a. Ut tellus nulla, tempus id posuere vel, luctus et sem. Nulla nec rhoncus mi. Aenean sit amet mollis nibh. Nam ullamcorper tellus quis arcu aliquam, dignissim ultricies justo efficitur. Cras non ipsum tempor, elementum dui id, pellentesque turpis. Praesent commodo dolor in elit aliquet, sit amet pellentesque sem molestie. In pharetra nisl nec orci pellentesque, ut posuere quam faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas mollis purus non erat tempor euismod. Vestibulum non leo eget magna vestibulum mattis. Aenean vitae tortor vel mauris pretium tempor. Sed viverra eros tristique, dapibus tellus a, feugiat ipsum. Pellentesque non tellus scelerisque, molestie massa vitae, fermentum ex. Quisque molestie interdum nibh a luctus. Sed aliquet risus ac varius suscipit. Proin eget leo vel lacus finibus posuere vel non nisl. In tristique ligula leo, sed molestie sem sodales nec. Phasellus sed consectetur lectus. In pretium hendrerit eros, a sagittis est faucibus ac. Etiam faucibus felis et eros commodo fringilla. Duis volutpat lobortis suscipit. Maecenas facilisis metus in lorem aliquet efficitur. Duis scelerisque eros scelerisque, rhoncus massa eget, tempor ipsum. Donec id feugiat purus, non condimentum turpis. Sed consequat lorem a odio pharetra pretium. Proin sed turpis ac sapien convallis iaculis a sit amet est. Proin lorem risus, rhoncus non metus at, fringilla commodo erat. Sed quis elit vitae leo ullamcorper interdum non nec ipsum. Etiam ullamcorper lorem ac velit condimentum, eget porttitor odio mollis. Maecenas semper, urna eu cursus placerat, enim neque aliquam orci, ut elementum justo ex id justo. Nunc malesuada egestas dui at vestibulum."
-  }, void 0, false, {
-    fileName: _jsxFileName,
-    lineNumber: 92,
-    columnNumber: 5
-  }, this);
+
+/**
+ * @param {object} props
+ *   @param {'sm'|'md'|'lg'} [props.size]
+ */
+export function LoremIpsum({
+  size = 'lg'
+}) {
+  if (size === 'sm') {
+    return _jsxDEV("p", {
+      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien cursus, fringilla diam posuere, varius urna. Phasellus dictum sodales dui, sed scelerisque mauris auctor et. Integer suscipit justo in erat tristique, nec feugiat augue ultrices. Sed accumsan pretium commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lobortis tortor metus, sed rutrum risus ultricies non. Maecenas ultricies rutrum diam non feugiat. Nam ut ex ac enim efficitur semper."
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 96,
+      columnNumber: 7
+    }, this);
+  } else if (size === 'md') {
+    return _jsxDEV(_Fragment, {
+      children: [_jsxDEV("p", {
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien cursus, fringilla diam posuere, varius urna. Phasellus dictum sodales dui, sed scelerisque mauris auctor et. Integer suscipit justo in erat tristique, nec feugiat augue ultrices. Sed accumsan pretium commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lobortis tortor metus, sed rutrum risus ultricies non. Maecenas ultricies rutrum diam non feugiat. Nam ut ex ac enim efficitur semper."
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 110,
+        columnNumber: 9
+      }, this), _jsxDEV("p", {
+        children: "Integer sed rhoncus eros. Nulla pharetra vulputate faucibus. Vestibulum vestibulum orci non maximus aliquet. Donec id dui ac ipsum pellentesque gravida sit amet non sem. Suspendisse malesuada turpis id erat porta, nec luctus odio mollis. Sed a arcu sed sem venenatis porta. In dictum sapien ut congue facilisis. Curabitur consequat vestibulum ultricies."
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 120,
+        columnNumber: 9
+      }, this), _jsxDEV("p", {
+        children: "Vivamus rhoncus vitae sapien id volutpat. Fusce ac nisi dolor. Suspendisse ut venenatis ex. Quisque elementum libero quam, non consectetur lorem faucibus a. Sed eu orci vitae nibh sodales sodales ut at neque. Ut lobortis arcu eu lorem porttitor scelerisque. Aenean euismod est ac enim fermentum, sit amet tristique dui consequat. Phasellus vitae sapien dolor. Nulla iaculis nibh at magna convallis finibus ut vitae ipsum."
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 128,
+        columnNumber: 9
+      }, this)]
+    }, void 0, true);
+  } else {
+    return _jsxDEV("p", {
+      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sapien cursus, fringilla diam posuere, varius urna. Phasellus dictum sodales dui, sed scelerisque mauris auctor et. Integer suscipit justo in erat tristique, nec feugiat augue ultrices. Sed accumsan pretium commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lobortis tortor metus, sed rutrum risus ultricies non. Maecenas ultricies rutrum diam non feugiat. Nam ut ex ac enim efficitur semper. Integer sed rhoncus eros. Nulla pharetra vulputate faucibus. Vestibulum vestibulum orci non maximus aliquet. Donec id dui ac ipsum pellentesque gravida sit amet non sem. Suspendisse malesuada turpis id erat porta, nec luctus odio mollis. Sed a arcu sed sem venenatis porta. In dictum sapien ut congue facilisis. Curabitur consequat vestibulum ultricies. Vivamus rhoncus vitae sapien id volutpat. Fusce ac nisi dolor. Suspendisse ut venenatis ex. Quisque elementum libero quam, non consectetur lorem faucibus a. Sed eu orci vitae nibh sodales sodales ut at neque. Ut lobortis arcu eu lorem porttitor scelerisque. Aenean euismod est ac enim fermentum, sit amet tristique dui consequat. Phasellus vitae sapien dolor. Nulla iaculis nibh at magna convallis finibus ut vitae ipsum. Maecenas ultricies ultrices diam laoreet lacinia. Nunc commodo eu lorem a bibendum. Sed eu magna rutrum, consectetur orci sit amet, venenatis ex. Aliquam sodales nec odio ac ultricies. In sit amet congue ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus accumsan justo nec maximus sollicitudin. Aenean eu urna egestas justo dignissim venenatis quis quis massa. Pellentesque convallis posuere elit, eu interdum diam placerat et. Aenean cursus vehicula nibh, in scelerisque nunc feugiat eu. Praesent eleifend ipsum eget urna dictum semper. Nullam dapibus nisl sit amet ultricies lobortis. Vestibulum a velit neque. Suspendisse tincidunt aliquet lorem et consectetur. Phasellus at libero fringilla nulla egestas aliquam. Nullam ut magna risus. Etiam consequat neque sapien, vel ultrices justo vehicula sit amet. Donec semper facilisis odio vel faucibus. Integer eget sagittis justo. Integer sed tincidunt neque. In vulputate fermentum lacus, eget sollicitudin nisi vestibulum vel. Etiam porttitor varius justo, id efficitur tellus congue a. Cras condimentum congue lectus sit amet commodo. Etiam lacus ex, efficitur volutpat enim id, malesuada posuere metus. Mauris convallis convallis arcu, sit amet placerat felis sodales ut. Duis semper a risus ac consequat. Nulla id nibh sem. Aliquam et nulla nec lectus viverra lobortis. Vivamus eros enim, lobortis nec efficitur nec, rhoncus at tortor. Aliquam aliquet bibendum ipsum eu feugiat. Duis iaculis bibendum ligula non ultricies. Curabitur cursus nulla in nisl tincidunt, eget eleifend tellus ultricies. Pellentesque eget mauris nec magna ultrices fringilla id sit amet nulla. Ut nec velit sed augue eleifend pharetra. Aliquam a posuere massa. Nunc vitae tortor ut est cursus vestibulum. In hac habitasse platea dictumst. Nulla eget orci eleifend, elementum turpis vitae, consectetur magna. In in nulla in tellus vestibulum pharetra. Curabitur at rhoncus enim, tempus congue est. Nullam consectetur lobortis nunc, vel feugiat lorem semper a. Ut tellus nulla, tempus id posuere vel, luctus et sem. Nulla nec rhoncus mi. Aenean sit amet mollis nibh. Nam ullamcorper tellus quis arcu aliquam, dignissim ultricies justo efficitur. Cras non ipsum tempor, elementum dui id, pellentesque turpis. Praesent commodo dolor in elit aliquet, sit amet pellentesque sem molestie. In pharetra nisl nec orci pellentesque, ut posuere quam faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas mollis purus non erat tempor euismod. Vestibulum non leo eget magna vestibulum mattis. Aenean vitae tortor vel mauris pretium tempor. Sed viverra eros tristique, dapibus tellus a, feugiat ipsum. Pellentesque non tellus scelerisque, molestie massa vitae, fermentum ex. Quisque molestie interdum nibh a luctus. Sed aliquet risus ac varius suscipit. Proin eget leo vel lacus finibus posuere vel non nisl. In tristique ligula leo, sed molestie sem sodales nec. Phasellus sed consectetur lectus. In pretium hendrerit eros, a sagittis est faucibus ac. Etiam faucibus felis et eros commodo fringilla. Duis volutpat lobortis suscipit. Maecenas facilisis metus in lorem aliquet efficitur. Duis scelerisque eros scelerisque, rhoncus massa eget, tempor ipsum. Donec id feugiat purus, non condimentum turpis. Sed consequat lorem a odio pharetra pretium. Proin sed turpis ac sapien convallis iaculis a sit amet est. Proin lorem risus, rhoncus non metus at, fringilla commodo erat. Sed quis elit vitae leo ullamcorper interdum non nec ipsum. Etiam ullamcorper lorem ac velit condimentum, eget porttitor odio mollis. Maecenas semper, urna eu cursus placerat, enim neque aliquam orci, ut elementum justo ex id justo. Nunc malesuada egestas dui at vestibulum."
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 141,
+      columnNumber: 7
+    }, this);
+  }
 }
@@ -361,0 +398,0 @@ export function sampleTableContent() {

lib/pattern-library/components/patterns/SpinnerComponents.js

@@ -207,3 +207,47 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerComponents.js";
       title: "Full-Screen Spinner",
-      children: _jsxDEV(Library.Example, {
+      children: [_jsxDEV(Library.Example, {
+        title: "Status",
+        children: _jsxDEV(Next.Changelog, {
+          children: _jsxDEV(Next.ChangelogItem, {
+            status: "deprecated",
+            children: ["This legacy implementation of", _jsxDEV("s", {
+              children: _jsxDEV("code", {
+                children: "FullScreenSpinner"
+              }, void 0, false, {
+                fileName: _jsxFileName,
+                lineNumber: 82,
+                columnNumber: 17
+              }, this)
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 81,
+              columnNumber: 15
+            }, this), ' ', "is deprecated and slated for removal in v6 of", ' ', _jsxDEV("code", {
+              children: "frontend-shared"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 85,
+              columnNumber: 15
+            }, this), ". Use re-implemented", _jsxDEV("code", {
+              children: "SpinnerOverlay"
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 86,
+              columnNumber: 15
+            }, this), " component in the feedback group instead."]
+          }, void 0, true, {
+            fileName: _jsxFileName,
+            lineNumber: 79,
+            columnNumber: 13
+          }, this)
+        }, void 0, false, {
+          fileName: _jsxFileName,
+          lineNumber: 78,
+          columnNumber: 11
+        }, this)
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 77,
+        columnNumber: 9
+      }, this), _jsxDEV(Library.Example, {
         children: [_jsxDEV("p", {
@@ -214,3 +258,3 @@ children: ["A component that renders a full-screen spinner over an overlay. Press ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 80,
+            lineNumber: 94,
             columnNumber: 19
@@ -220,3 +264,3 @@ }, this), " to hide the spinner."]
           fileName: _jsxFileName,
-          lineNumber: 78,
+          lineNumber: 92,
           columnNumber: 11
@@ -229,3 +273,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 83,
+            lineNumber: 97,
             columnNumber: 13
@@ -236,3 +280,3 @@ }, this), fullScreenSpinnerVisible && _jsxDEV("div", {
               fileName: _jsxFileName,
-              lineNumber: 88,
+              lineNumber: 102,
               columnNumber: 17
@@ -242,3 +286,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 87,
+            lineNumber: 101,
             columnNumber: 15
@@ -248,3 +292,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 82,
+          lineNumber: 96,
           columnNumber: 11
@@ -254,6 +298,6 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 77,
+        lineNumber: 91,
         columnNumber: 9
-      }, this)
-    }, void 0, false, {
+      }, this)]
+    }, void 0, true, {
       fileName: _jsxFileName,
@@ -260,0 +304,0 @@ lineNumber: 76,

lib/pattern-library/components/PlaygroundApp.d.ts

@@ -0,30 +1,7 @@
+import type { PlaygroundAppProps } from '../';
 /**
- * @typedef {import("../routes").PlaygroundRoute} PlaygroundRoute
- * @typedef {import("../routes").PlaygroundRouteGroup} PlaygroundRouteGroup
- * @typedef {import('preact').ComponentChildren} Children
- */
-/**
- * @typedef PlaygroundAppProps
- * @prop {string} [baseURL]
- * @prop {PlaygroundRoute[]} [extraRoutes] - Local-/application-specific routes
- *   to add to this pattern library in addition to the shared/common routes
- */
-/**
  * Render web content for the playground application. This includes the "frame"
  * around the page and a navigation channel, as well as the content rendered
  * by the component handling the current route.
- *
- * @param {PlaygroundAppProps} props
  */
-export default function PlaygroundApp({ baseURL, extraRoutes, }: PlaygroundAppProps): import("preact").JSX.Element;
-export type PlaygroundRoute = import("../routes").PlaygroundRoute;
-export type PlaygroundRouteGroup = import("../routes").PlaygroundRouteGroup;
-export type Children = import('preact').ComponentChildren;
-export type PlaygroundAppProps = {
-    baseURL?: string | undefined;
-    /**
-     * - Local-/application-specific routes
-     * to add to this pattern library in addition to the shared/common routes
-     */
-    extraRoutes?: import("../routes").PlaygroundRoute[] | undefined;
-};
+export default function PlaygroundApp({ baseURL, extraRoutes, extraRoutesTitle, }: PlaygroundAppProps): import("preact").JSX.Element;

lib/pattern-library/components/PlaygroundApp.js

@@ -1,2 +0,2 @@
-var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/PlaygroundApp.js";
+var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/PlaygroundApp.tsx";
 import classnames from 'classnames';
@@ -7,35 +7,28 @@ import { Link, LogoIcon } from '../../next';
 import { useRoute } from '../router';
-
+import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
+import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
 /**
- * @typedef {import("../routes").PlaygroundRoute} PlaygroundRoute
- * @typedef {import("../routes").PlaygroundRouteGroup} PlaygroundRouteGroup
- * @typedef {import('preact').ComponentChildren} Children
- */
-
-/**
- * @typedef PlaygroundAppProps
- * @prop {string} [baseURL]
- * @prop {PlaygroundRoute[]} [extraRoutes] - Local-/application-specific routes
- *   to add to this pattern library in addition to the shared/common routes
- */
-
-/**
  * Render web content for the playground application. This includes the "frame"
  * around the page and a navigation channel, as well as the content rendered
  * by the component handling the current route.
- *
- * @param {PlaygroundAppProps} props
  */
-import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
-import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
 export default function PlaygroundApp({
-  baseURL = '/ui-playground',
-  extraRoutes = []
+  baseURL = '',
+  extraRoutes = [],
+  extraRoutesTitle = 'Playground'
 }) {
   const routes = getRoutes();
-  const allRoutes = routes.concat(extraRoutes);
+
+  // Put all of the custom routes into the "custom" group
+  const customRoutes = extraRoutes.map(route => {
+    return {
+      ...route,
+      group: 'custom'
+    };
+  });
+  const allRoutes = routes.concat(customRoutes);
   const [activeRoute] = useRoute(baseURL, allRoutes);
   const content = activeRoute && activeRoute.component ? _jsxDEV(activeRoute.component, {}, void 0, false, {
     fileName: _jsxFileName,
-    lineNumber: 38,
+    lineNumber: 33,
     columnNumber: 7
@@ -49,3 +42,3 @@ }, this) : _jsxDEV(Library.Page, {
       fileName: _jsxFileName,
-      lineNumber: 41,
+      lineNumber: 36,
       columnNumber: 9
@@ -55,3 +48,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 40,
+    lineNumber: 35,
     columnNumber: 7
@@ -62,5 +55,2 @@ }, this);
    * Header for a primary section of nav
-   *
-   * @param {object} props
-   *   @param {Children} props.children
    */
@@ -75,3 +65,3 @@ function NavHeader({
       fileName: _jsxFileName,
-      lineNumber: 53,
+      lineNumber: 45,
       columnNumber: 7
@@ -83,5 +73,2 @@ }, this);
    * A single navigation link
-   *
-   * @param {object} props
-   *   @param {PlaygroundRoute} props.route
    */
@@ -102,3 +89,3 @@ function NavLink({
         fileName: _jsxFileName,
-        lineNumber: 67,
+        lineNumber: 56,
         columnNumber: 11
@@ -110,3 +97,3 @@ }, this), !route.route && _jsxDEV("div", {
         fileName: _jsxFileName,
-        lineNumber: 79,
+        lineNumber: 68,
         columnNumber: 11
@@ -116,3 +103,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 65,
+      lineNumber: 54,
       columnNumber: 7
@@ -124,5 +111,2 @@ }, this);
    * Render a list of navigation items
-   *
-   * @param {object} props
-   *   @param {PlaygroundRoute[]} props.routes
    */
@@ -138,3 +122,3 @@ function NavList({
         fileName: _jsxFileName,
-        lineNumber: 97,
+        lineNumber: 83,
         columnNumber: 11
@@ -144,3 +128,3 @@ }, this))
       fileName: _jsxFileName,
-      lineNumber: 95,
+      lineNumber: 81,
       columnNumber: 7
@@ -152,6 +136,2 @@ }, this);
    * Secondary section of navigation, with header
-   *
-   * @param {object} props
-   *   @param {string} props.title - Title of navigation section
-   *   @param {Children} props.children
    */
@@ -169,3 +149,3 @@ function NavSection({
         fileName: _jsxFileName,
-        lineNumber: 113,
+        lineNumber: 101,
         columnNumber: 9
@@ -175,6 +155,7 @@ }, this), children]
       fileName: _jsxFileName,
-      lineNumber: 112,
+      lineNumber: 100,
       columnNumber: 7
     }, this);
   }
+  const groupKeys = Object.keys(componentGroups);
   return _jsxDEV("main", {
@@ -195,3 +176,3 @@ className: "max-w-[1200px] mx-auto",
                 fileName: _jsxFileName,
-                lineNumber: 126,
+                lineNumber: 116,
                 columnNumber: 17
@@ -201,3 +182,3 @@ }, this), "Component Library"]
               fileName: _jsxFileName,
-              lineNumber: 125,
+              lineNumber: 115,
               columnNumber: 15
@@ -207,3 +188,3 @@ }, this)
             fileName: _jsxFileName,
-            lineNumber: 124,
+            lineNumber: 114,
             columnNumber: 13
@@ -213,3 +194,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 123,
+          lineNumber: 113,
           columnNumber: 11
@@ -223,3 +204,3 @@ }, this), _jsxDEV("nav", {
             fileName: _jsxFileName,
-            lineNumber: 132,
+            lineNumber: 122,
             columnNumber: 13
@@ -230,3 +211,3 @@ }, this), _jsxDEV(NavList, {
             fileName: _jsxFileName,
-            lineNumber: 133,
+            lineNumber: 123,
             columnNumber: 13
@@ -237,12 +218,12 @@ }, this), _jsxDEV(NavHeader, {
             fileName: _jsxFileName,
-            lineNumber: 135,
+            lineNumber: 125,
             columnNumber: 13
-          }, this), Object.keys(componentGroups).map(group => {
+          }, this), groupKeys.map(group => {
             return _jsxDEV(NavSection, {
-              title: componentGroups[/** @type {keyof componentGroups} */group],
+              title: componentGroups[group],
               children: _jsxDEV(NavList, {
-                routes: getRoutes( /** @type PlaygroundRouteGroup */group)
+                routes: getRoutes(group)
               }, void 0, false, {
                 fileName: _jsxFileName,
-                lineNumber: 146,
+                lineNumber: 133,
                 columnNumber: 19
@@ -252,10 +233,24 @@ }, this)
               fileName: _jsxFileName,
-              lineNumber: 138,
+              lineNumber: 129,
               columnNumber: 17
             }, this);
-          }), _jsxDEV(NavHeader, {
+          }), extraRoutes.length > 0 && _jsxDEV(_Fragment, {
+            children: [_jsxDEV(NavHeader, {
+              children: extraRoutesTitle
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 140,
+              columnNumber: 17
+            }, this), _jsxDEV(NavList, {
+              routes: customRoutes
+            }, void 0, false, {
+              fileName: _jsxFileName,
+              lineNumber: 141,
+              columnNumber: 17
+            }, this)]
+          }, void 0, true), _jsxDEV(NavHeader, {
             children: "Legacy Components"
           }, void 0, false, {
             fileName: _jsxFileName,
-            lineNumber: 155,
+            lineNumber: 145,
             columnNumber: 13
@@ -266,22 +261,8 @@ }, this), _jsxDEV(NavList, {
             fileName: _jsxFileName,
-            lineNumber: 156,
+            lineNumber: 146,
             columnNumber: 13
-          }, this), extraRoutes.length > 0 && _jsxDEV(_Fragment, {
-            children: [_jsxDEV(NavHeader, {
-              children: "Application"
-            }, void 0, false, {
-              fileName: _jsxFileName,
-              lineNumber: 160,
-              columnNumber: 17
-            }, this), _jsxDEV(NavList, {
-              routes: extraRoutes
-            }, void 0, false, {
-              fileName: _jsxFileName,
-              lineNumber: 161,
-              columnNumber: 17
-            }, this)]
-          }, void 0, true)]
+          }, this)]
         }, void 0, true, {
           fileName: _jsxFileName,
-          lineNumber: 131,
+          lineNumber: 121,
           columnNumber: 11
@@ -291,3 +272,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 122,
+        lineNumber: 112,
         columnNumber: 9
@@ -299,3 +280,3 @@ }, this), _jsxDEV("div", {
         fileName: _jsxFileName,
-        lineNumber: 166,
+        lineNumber: 149,
         columnNumber: 9
@@ -305,3 +286,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 121,
+      lineNumber: 111,
       columnNumber: 7
@@ -311,3 +292,3 @@ }, this)
     fileName: _jsxFileName,
-    lineNumber: 120,
+    lineNumber: 110,
     columnNumber: 5
@@ -314,0 +295,0 @@ }, this);

lib/pattern-library/index.d.ts

@@ -1,36 +0,32 @@
-/**
- * @typedef {import("./components/PlaygroundApp").PlaygroundRoute} PlaygroundRoute
- */
-/**
- * @typedef PatternLibraryAppOptions
- * @prop {string} [baseURL] - The path relative to web root where the pattern
- *   library is served. Defaults to `/ui-playground`.
- * @prop {PlaygroundRoute[]} [extraRoutes] - Local-/application-specific routes
- *   to add to this pattern library in addition to the shared/common routes
- * @prop {Record<string, string>} [icons] - Icons, additional to default pattern-library icons,
- *   to register for use in patterns/components in the pattern library
- */
-/**
- * Render the pattern-library preact container
- *
- * @param {PatternLibraryAppOptions} options
- */
-export function startApp({ baseURL, extraRoutes, icons }?: PatternLibraryAppOptions): void;
-export type PlaygroundRoute = import("./components/PlaygroundApp").PlaygroundRoute;
-export type PatternLibraryAppOptions = {
+import 'preact/debug';
+import type { CustomPlaygroundRoute } from './routes';
+export type PlaygroundAppProps = {
     /**
-     * - The path relative to web root where the pattern
-     * library is served. Defaults to `/ui-playground`.
+     * The path relative to web root where the pattern library is served. Defaults
+     * to `/ui-playground`.
      */
-    baseURL?: string | undefined;
+    baseURL?: string;
     /**
-     * - Local-/application-specific routes
-     * to add to this pattern library in addition to the shared/common routes
+     * Application-specific routes to add to this pattern library in
+     * addition to the shared/common routes
      */
-    extraRoutes?: import("./routes").PlaygroundRoute[] | undefined;
+    extraRoutes?: CustomPlaygroundRoute[];
     /**
-     * - Icons, additional to default pattern-library icons,
-     * to register for use in patterns/components in the pattern library
+     * Optional title to use as a header above any custom routes shown in the
+     * navigation menu. Default title is "Playground".
      */
-    icons?: Record<string, string> | undefined;
+    extraRoutesTitle?: string;
 };
+export type PatternLibraryAppOptions = {
+    /**
+     * Icons, additional to default pattern-library icons, to register for use in
+     * patterns/components in the pattern library.
+     *
+     * @deprecated - Use individual icon components instead
+     */
+    icons?: Record<string, string>;
+} & PlaygroundAppProps;
+/**
+ * Render the pattern-library preact app
+ */
+export declare function startApp({ icons, ...componentProps }?: PatternLibraryAppOptions): void;

lib/pattern-library/index.js

@@ -1,2 +0,2 @@
-var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/index.js";
+var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/index.tsx";
 // Entry point for extending the pattern library
@@ -7,29 +7,11 @@ import { render } from 'preact';
 import { registerIcons } from '../';
+import PlaygroundApp from './components/PlaygroundApp';
 import iconSet from './icons';
-import PlaygroundApp from './components/PlaygroundApp';
-
+import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
 /**
- * @typedef {import("./components/PlaygroundApp").PlaygroundRoute} PlaygroundRoute
+ * Render the pattern-library preact app
  */
-
-/**
- * @typedef PatternLibraryAppOptions
- * @prop {string} [baseURL] - The path relative to web root where the pattern
- *   library is served. Defaults to `/ui-playground`.
- * @prop {PlaygroundRoute[]} [extraRoutes] - Local-/application-specific routes
- *   to add to this pattern library in addition to the shared/common routes
- * @prop {Record<string, string>} [icons] - Icons, additional to default pattern-library icons,
- *   to register for use in patterns/components in the pattern library
- */
-
-/**
- * Render the pattern-library preact container
- *
- * @param {PatternLibraryAppOptions} options
- */
-import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
 export function startApp({
-  baseURL = '',
-  extraRoutes = [],
-  icons = {}
+  icons = {},
+  ...componentProps
 } = {}) {
@@ -43,10 +25,9 @@ const allIcons = {
   render(_jsxDEV(PlaygroundApp, {
-    baseURL: baseURL,
-    extraRoutes: extraRoutes
+    ...componentProps
   }, void 0, false, {
     fileName: _jsxFileName,
-    lineNumber: 35,
-    columnNumber: 5
-  }, this), /** @type Element */container);
+    lineNumber: 53,
+    columnNumber: 10
+  }, this), container);
 }
 //# sourceMappingURL=index.js.map

lib/pattern-library/routes.d.ts

@@ -0,35 +1,29 @@
+import type { FunctionComponent } from 'preact';
+export declare const componentGroups: {
+    readonly data: "Data Display";
+    readonly feedback: "Feedback";
+    readonly input: "Input";
+    readonly layout: "Layout";
+    readonly navigation: "Navigation";
+};
+export type PlaygroundRouteGroup = keyof typeof componentGroups | 'home' | 'foundations' | 'components' | 'custom';
 /**
- * Retrieve all routes or the subset in group `group`.
- *
- * @param {PlaygroundRouteGroup} [group]
- * @returns {PlaygroundRoute[]}
+ * Route "handler" that provides a component (function) that should be rendered
+ * for the indicated route
  */
-export function getRoutes(group?: PlaygroundRouteGroup | undefined): PlaygroundRoute[];
-export namespace componentGroups {
-    const data: string;
-    const feedback: string;
-    const input: string;
-    const layout: string;
-    const navigation: string;
-}
-export type PlaygroundRouteGroup = keyof {
-    data: string;
-    feedback: string;
-    input: string;
-    layout: string;
-    navigation: string;
-} | 'home' | 'foundations' | 'components';
-/**
- * - Route "handler" that provides a component (function)
- *  that should be rendered for the indicated route
- */
 export type PlaygroundRoute = {
     /**
-     * - Pattern or string path relative to
-     * `baseURL`, e.g. '/data-my-component'
+     * Pattern or string path relative to `baseURL`, e.g. '/data-my-component'. If
+     * not provided, a placeholder entry for this route will be added to the
+     * navigation, with no link.
      */
-    route?: string | RegExp | undefined;
+    route?: RegExp | string;
     title: string;
-    component?: import("preact").FunctionComponent<{}> | undefined;
+    component?: FunctionComponent;
     group: PlaygroundRouteGroup;
 };
+export type CustomPlaygroundRoute = Omit<PlaygroundRoute, 'group'>;
+/**
+ * Retrieve all routes or the subset in group `group`.
+ */
+export declare function getRoutes(group?: PlaygroundRouteGroup): PlaygroundRoute[];

lib/pattern-library/routes.js

@@ -13,2 +13,3 @@ import LibraryHome from './components/LibraryHome';
 import ThumbnailPage from './components/patterns/data/ThumbnailPage';
+import ModalPage from './components/patterns/feedback/ModalPage';
 import SpinnerPage from './components/patterns/feedback/SpinnerPage';
@@ -25,2 +26,3 @@ import ButtonsPage from './components/patterns/input/ButtonPage';
 import LinkButtonPage from './components/patterns/navigation/LinkButtonPage';
+import TabPage from './components/patterns/navigation/TabPage';
 
@@ -46,16 +48,2 @@ // Legacy pattern-library pages
 };
-
-/**
- * @typedef {keyof componentGroups|'home'|'foundations'|'components'} PlaygroundRouteGroup
- *
- * @typedef PlaygroundRoute - Route "handler" that provides a component (function)
- *   that should be rendered for the indicated route
- * @prop {RegExp|string} [route] - Pattern or string path relative to
- *   `baseURL`, e.g. '/data-my-component'
- * @prop {string} title
- * @prop {import("preact").FunctionComponent<{}>} [component]
- * @prop {PlaygroundRouteGroup} group
- */
-
-/** @type {PlaygroundRoute[]} */
 const routes = [{
@@ -122,4 +110,6 @@ route: /^\/?$/,
 }, {
-  title: 'Dialog',
-  group: 'feedback'
+  title: 'Modal',
+  group: 'feedback',
+  component: ModalPage,
+  route: '/feedback-modal'
 }, {
@@ -181,2 +171,7 @@ title: 'Spinner',
 }, {
+  title: 'Tabs',
+  group: 'navigation',
+  component: TabPage,
+  route: '/navigation-tab'
+}, {
   route: '/components-buttons',
@@ -235,5 +230,2 @@ title: 'Buttons',
  * Retrieve all routes or the subset in group `group`.
- *
- * @param {PlaygroundRouteGroup} [group]
- * @returns {PlaygroundRoute[]}
  */
@@ -240,0 +232,0 @@ export function getRoutes(group) {

lib/pattern-library/util/jsx-to-string.d.ts

@@ -0,1 +1,2 @@
+import type { ComponentChildren } from 'preact';
 /**
@@ -9,7 +10,4 @@ * Render a JSX expression as a code string.
  *   jsxToString(<Widget expanded={true} label="Thing"/>) // returns `<Widget expanded label="Thing"/>`
- *
- * @param {import('preact').ComponentChildren} vnode
- * @return {string}
  */
-export function jsxToString(vnode: import('preact').ComponentChildren): string;
+export declare function jsxToString(vnode: ComponentChildren): string;
 /**
@@ -20,7 +18,3 @@ * Render a JSX expression as syntax-highlighted HTML markup.
  * loaded on the page.
- *
- * @param {import('preact').ComponentChildren} vnode - JSX expression to render.
- *   See {@link jsxToString}
- * @return {string}
  */
-export function jsxToHTML(vnode: import('preact').ComponentChildren): string;
+export declare function jsxToHTML(vnode: ComponentChildren): string;

lib/pattern-library/util/jsx-to-string.js

@@ -5,7 +5,4 @@ import hljs from 'highlight.js/lib/core';
 import { Fragment } from 'preact';
-
 /**
  * Escape `str` for use in a "-quoted string.
- *
- * @param {string} str
  */
@@ -16,6 +13,14 @@ function escapeQuotes(str) {
 
-/** @param {any} type */
+/**
+ * Format a component's name for display
+ */
 function componentName(type) {
   var _type$displayName;
-  const name = typeof type === 'string' ? type : (_type$displayName = type.displayName) !== null && _type$displayName !== void 0 ? _type$displayName : type.name;
+  let name = typeof type === 'string' ? type : (_type$displayName = type.displayName) !== null && _type$displayName !== void 0 ? _type$displayName : type.name;
+
+  // Remove the string "Wrapper" from component names. This allows the pattern
+  // library to create a convenience wrapper component around a given component
+  // being documented, and have it appear that the documented component is being
+  // used directly in rendered source content.
+  name = name.replace(/\BWrapper$/, '');
   // Handle (display)name conflicts if there are two components with the same
@@ -29,5 +34,2 @@ // name. e.g. if there are two components named `Foo`, the second of those
  * Indent a multi-line string by `indent` spaces.
- *
- * @param {string} str
- * @param {number} indent
  */
@@ -42,5 +44,2 @@ function indentLines(str, indent) {
  * Test if an element looks like a JSX element.
- *
- * @param {any} value
- * @return {value is import('preact').VNode<any>}
  */
@@ -60,5 +59,2 @@ function isJSXElement(value) {
  *   jsxToString(<Widget expanded={true} label="Thing"/>) // returns `<Widget expanded label="Thing"/>`
- *
- * @param {import('preact').ComponentChildren} vnode
- * @return {string}
  */
@@ -75,2 +71,7 @@ export function jsxToString(vnode) {
     let propStr = Object.entries(vnode.props).map(([name, value]) => {
+      // Don't render props that are for internal pattern-library wrapper
+      // component use only
+      if (name.includes('WrapperProp')) {
+        return '';
+      }
       if (name === 'children') {
@@ -126,6 +127,2 @@ return '';
  * loaded on the page.
- *
- * @param {import('preact').ComponentChildren} vnode - JSX expression to render.
- *   See {@link jsxToString}
- * @return {string}
  */
@@ -132,0 +129,0 @@ export function jsxToHTML(vnode) {

lib/tailwind.preset.js

@@ -84,2 +84,5 @@ import plugin from 'tailwindcss/plugin.js';
       screens: {
+        tall: {
+          raw: '(min-height: 32rem)'
+        },
         touch: {
@@ -86,0 +89,0 @@ raw: '(pointer: coarse)'

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "Shared components, styles and utilities for Hypothesis projects",
@@ -5,0 +5,0 @@ "license": "BSD-2-Clause",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2281973

increased by7.57%

Number of package files

803

increased by2.29%

Lines of code

32685

increased by7.45%

No dependency changes