@octopusdeploy/design-system-components/dist/src/components/Form/utils/descriptionWithLinks.d.ts

The design systems component library.

import * as React from "react";
interface HelperLink {
    type: "link";
    text: string;
    url: string;
    newTab?: boolean;
}
interface HelperCode {
    type: "code";
    text: string;
}
export type DescriptionContent = Array<string | HelperLink | HelperCode>;
/**
 * Helper function to create a link object for use in description templates
 * @param text - The link text to display
 * @param url - The URL to link to (supports both absolute and relative URLs)
 * @param newTab - Whether to open the link in a new tab (defaults to false)
 * @returns HelperLink object for valid URLs, empty string for invalid URLs
 * @example
 * // Relative link (opens in same tab)
 * descriptionLink("Visit our docs", "/docs/getting-started")
 *
 * // Absolute link (opens in same tab)
 * descriptionLink("Visit our docs", "https://docs.example.com")
 *
 * // External link that opens in new tab
 * descriptionLink("External resource", "https://external.com", true)
 *
 * // Invalid/dangerous URLs return empty string
 * descriptionLink("Bad link", "javascript:alert('xss')") // returns ""
 */
export declare const descriptionLink: (text: string, url: string, newTab?: boolean) => HelperLink | "";
/**
 * Helper function to create a code object for use in description templates
 * @param text - The code text to display
 * @returns HelperCode object
 * @example
 * // Inline code snippet
 * code("propName")
 *
 * // Code with special characters
 * code("useState()")
 */
export declare const descriptionCode: (text: string) => HelperCode;
/**
 * For backwards compatibility
 * @deprecated Use `link` instead
 */
export declare const descriptionWithLink: (text: string, url: string, newTab?: boolean) => HelperLink | "";
/**
 * Tagged template literal function for creating rich descriptions with embedded links and code.
 * Allows natural template literal syntax with embedded link() and code() calls.
 * @param strings - Template literal strings
 * @param values - Interpolated values (including link and code objects)
 * @returns DescriptionContent array
 * @example
 * // Using template literal syntax with links
 * descriptionText`Visit our ${descriptionLink("documentation", "/docs")} for more info.`
 *
 * // With code snippets
 * descriptionText`Set the ${code("isVisible")} prop to control visibility.`
 */
export declare const descriptionText: (strings: TemplateStringsArray, ...values: (string | HelperLink | HelperCode)[]) => DescriptionContent;
/**
 * Renders a description array containing strings, links, and code snippets
 * @param content - Array of strings, HelperLink, and HelperCode objects
 * @returns JSX element containing the rendered content
 */
export declare const renderDescription: (content: DescriptionContent) => React.ReactElement;
export {};