@sinchsmb/ui-kit/dist/types/components/ExtendablePanel/ExtendablePanel.d.ts

UI kit for SinchSMB frontend

import { ReactNode } from 'react';
import { CommonProps } from '../../types';
import { IconGlyph } from '../Icon/constants';
/** Props for {@link ExtendablePanel} */
export interface ExtendablePanelProps extends CommonProps {
    /**
     * The icon when the panel is opened
     *
     * @default {@link IconGlyph.ChevronUp}
     */
    openedIcon?: IconGlyph;
    /**
     * The icon when the panel is closed
     *
     * @default {@link IconGlyph.ChevronDown}
     */
    closedIcon?: IconGlyph;
    /** The trigger text when the panel is opened */
    openedLabel: ReactNode;
    /** The trigger text when the panel is closed */
    closedLabel: ReactNode;
    /** The panel content */
    children: ReactNode;
    /**
     * Displays the trigger in the end when panel is opened
     *
     * @default false
     */
    reversed?: boolean;
    /**
     * Opens the panel by default
     *
     * @default false
     */
    opened?: boolean;
}
/**
 * The component allows the user to show and hide content on a page.
 *
 * ```tsx
 * <ExtendablePanel closedLabel="Trigger closed" openedLabel="Trigger opened">
 *   Lorem ipsum
 * </ExtendablePanel>
 * ```
 *
 * Closed by default
 *
 * <Story id="components-extendablepanel--default" />
 *
 * Can be opened by passing the {@link ExtendablePanelProps.opened} prop
 *
 * <Story id="components-extendablepanel--opened" />
 *
 * Can be reversed - displays the trigger in the end when opened
 *
 * <Story id="components-extendablepanel--reversed" />
 *
 * Can have custom icons
 *
 * <Story id="components-extendablepanel--icons" />
 */
export declare function ExtendablePanel(props: ExtendablePanelProps): JSX.Element;