@hypothesis/frontend-shared/lib/pattern-library/components/Library.d.ts

Shared components, styles and utilities for Hypothesis projects

declare namespace _default {
    export { Page };
    export { Pattern };
    export { Example };
    export { Demo };
}
export default _default;
export type LibraryBaseProps = {
    /**
     * - Optional
     * introductory content
     */
    intro?: import("preact").ComponentChildren;
    children?: import("preact").ComponentChildren;
    title?: string | undefined;
};
export type LibraryExampleProps = {
    children?: import("preact").ComponentChildren;
    title?: string | undefined;
    /**
     * - Layout variant. Applies
     * appropriate className.
     * - Split (default) lays out in a row. Non-demo example content is rendered
     * left, with demos right. Demos in this variant stack vertically.
     * - Wide lays out in a full-width column. Non-example is rendered first,
     * then a row to contain demos. Demos in this variant render next to each
     * other in a single row.
     */
    variant?: "split" | "wide" | undefined;
};
export type DemoButtonProps = {
    children?: import("preact").ComponentChildren;
    onClick?: (() => void) | undefined;
    pressed: boolean;
};
export type DemoProps = {
    children?: import("preact").ComponentChildren;
    /**
     * - Extra CSS classes for the demo content's immediate
     * parent container
     */
    classes?: string | undefined;
    /**
     * - Should the demo also render the source?
     * When true, a "Source" tab will be rendered, which will display the JSX
     * source of the Demo's children
     */
    withSource?: boolean | undefined;
    /**
     * - Inline styles to apply to the demo container
     */
    style?: object;
    title?: string | undefined;
};
/**
 * @typedef LibraryBaseProps
 * @prop {import("preact").ComponentChildren} [intro] - Optional
 *   introductory content
 * @prop {import("preact").ComponentChildren} [children]
 * @prop {string} [title]
 *
 */
/**
 * Components for rendering patterns, examples and demos in the pattern-library
 * page. A pattern-library Page contains Patterns, which in turn contain
 * Examples. An Example _may_ contain one or more Demos. Child content (markup)
 * may also be rendered in these components, as desired.
 *
 * Example of structure:
 *
 * <Library.Page intro={<p>Some introductory content</p>} title="Elephants">
 *   <p>Any content you want on the page.</p>
 *   More content: it can be any valid `ComponentChildren`
 *
 *   <Library.Pattern title="Elephant">
 *     <p>The `Elephant` component is used to render information about elephant
 *     personalities.</p>
 *     <Library.Example title="Colored elephants">
 *       <p>You can change the color of your elephant.</p>
 *       <Library.Demo withSource>
 *         <Elephant color="pink" />
 *       </Library.Demo>
 *     </Library.Example>
 *     // More Examples if desired
 *   </Library.Pattern>
 *
 *   // more Patterns if desired...
 * </Library.Page>
 */
/**
 * Render a pattern-library page.
 *
 * @param {LibraryBaseProps} props
 */
declare function Page({ children, intro, title }: LibraryBaseProps): import("preact").JSX.Element;
/**
 * Render info about a single pattern (or component) on a pattern-library page.
 *
 * @param {LibraryBaseProps} props
 */
declare function Pattern({ children, title }: LibraryBaseProps): import("preact").JSX.Element;
/**
 * @typedef LibraryExampleProps
 * @prop {import("preact").ComponentChildren} [children]
 * @prop {string} [title]
 * @prop {'split'|'wide'} [variant='split'] - Layout variant. Applies
 *   appropriate className.
 *   - Split (default) lays out in a row. Non-demo example content is rendered
 *     left, with demos right. Demos in this variant stack vertically.
 *   - Wide lays out in a full-width column. Non-example is rendered first,
 *     then a row to contain demos. Demos in this variant render next to each
 *     other in a single row.
 */
/**
 * Render example content and optional Demo(s) for a pattern.
 *
 * @param {LibraryExampleProps} props
 */
declare function Example({ children, title, variant }: LibraryExampleProps): import("preact").JSX.Element;
/**
 * @typedef DemoProps
 * @prop {import("preact").ComponentChildren} [children]
 * @prop {string} [classes] - Extra CSS classes for the demo content's immediate
 *   parent container
 * @prop {boolean} [withSource=false] - Should the demo also render the source?
 *   When true, a "Source" tab will be rendered, which will display the JSX
 *   source of the Demo's children
 * @prop {object} [style] - Inline styles to apply to the demo container
 * @prop {string} [title]
 */
/**
 * Render a "Demo", with optional source. This will render the children as
 * provided in a tabbed container. If `withSource` is `true`, the JSX source
 * of the children will be provided in a separate "Source" tab from the
 * rendered Demo content.
 *
 * @param {DemoProps} props
 */
declare function Demo({ children, classes, withSource, style, title }: DemoProps): import("preact").JSX.Element;