@tiller-ds/data-display/DescriptionList.d.ts

Data display module of Tiller Design System

import * as React from "react";
import { ComponentTokens, TokenProps } from "@tiller-ds/theme";
declare type DescriptionListType = "default" | "striped" | "clean";
declare type DescriptionListItemType = "default" | "same-column";
declare type DescriptionListProps = {
    /**
     * Description list content (usually DescriptionList.Item).
     */
    children: React.ReactNode;
    /**
     * Defines the look of the description list.
     * Can be 'default', 'striped' (every second row is colored in a different color) or 'clean' (no fill)
     */
    type?: DescriptionListType;
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    /**
     * A unique identifier for testing purposes.
     * This identifier can be used in testing frameworks like Jest or Cypress to locate specific elements for testing.
     * It helps ensure that UI components are behaving as expected across different scenarios.
     * @type {string}
     * @example
     * // Usage:
     * <MyComponent data-testid="my-component" />
     * // In tests:
     * getByTestId('my-component');
     */
    "data-testid"?: string;
} & DescriptionListTokensProps;
declare type DescriptionListTokensProps = {
    tokens?: ComponentTokens<"DescriptionList">;
};
declare type DescriptionListItemProps = {
    /**
     * Label of the list item
     */
    label: React.ReactNode;
    fullWidth?: boolean;
    /**
     * Content of list item
     */
    children: React.ReactNode;
    /**
     * Type of the item. Default is side-by-side display, same-column shows title and item one under another.
     */
    type?: DescriptionListItemType;
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    /**
     * A unique identifier for testing purposes.
     * This identifier can be used in testing frameworks like Jest or Cypress to locate specific elements for testing.
     * It helps ensure that UI components are behaving as expected across different scenarios.
     * @type {string}
     * @example
     * // Usage:
     * <MyComponent data-testid="my-component" />
     * // In tests:
     * getByTestId('my-component');
     */
    "data-testid"?: string;
} & TokenProps<"DescriptionList">;
declare function DescriptionList({ children, type, className, ...props }: DescriptionListProps): JSX.Element;
declare namespace DescriptionList {
    var Item: typeof DescriptionListItem;
}
declare function DescriptionListItem({ label, children, type, className, ...props }: DescriptionListItemProps): JSX.Element;
export default DescriptionList;