@spaced-out/ui-design-system/lib/components/Shimmer/Shimmer.stories.d.ts

Sense UI components library

import * as React from 'react';
import type { ShimmerProps } from './Shimmer';
declare const _default: {
    tags: string[];
    title: string;
    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<ShimmerProps, HTMLSpanElement>;
    argTypes: {
        classNames: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
            };
        };
        show: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
                defaultValue: {
                    summary: string;
                };
            };
        };
        width: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
                defaultValue: {
                    summary: string;
                };
            };
        };
        height: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
                defaultValue: {
                    summary: string;
                };
            };
        };
        type: {
            description: string;
            control: {
                type: string;
            };
            options: unknown[];
            table: {
                type: {
                    summary: string;
                };
                defaultValue: {
                    summary: string;
                };
            };
        };
        children: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
            };
        };
        borderRadius: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
                defaultValue: {
                    summary: string;
                };
            };
        };
    };
    parameters: {
        docs: {
            subtitle: string;
            description: {
                component: string;
            };
        };
        storySource: {
            componentPath: string;
        };
    };
};
export default _default;
export declare const _TextFragmentShimmer: {
    (args: ShimmerProps): React.JSX.Element;
    args: {
        width: number;
        show: boolean;
    };
};
export declare const _MultilineTextShimmer: {
    (args: ShimmerProps): React.JSX.Element;
    args: {
        show: boolean;
        width: number;
        height: number;
    };
};
export declare const _RoundedShimmer: {
    (args: ShimmerProps): React.JSX.Element;
    args: {
        show: boolean;
        width: number;
        height: number;
        type: string;
    };
};
export declare const _CircularShimmer: {
    (args: ShimmerProps): React.JSX.Element;
    args: {
        show: boolean;
        width: number;
        height: number;
        type: string;
    };
};
/**
 * The KPIShimmer component is a React component used to display placeholder content with a shimmering effect,
 * typically utilized as a loading indicator for KPIs (Key Performance Indicators).
 * It provides flexibility to configure various parts like text and icons.
 *
 * Props:
 *
 * - `textWidth` (number | string) [optional]:
 *   - Specifies the width of the shimmering text placeholders.
 *   - The default value is `150`.
 *   - Examples: `textWidth={200}`
 *
 * - `hasTopContent` (boolean) [optional]:
 *   - Determines if the top text content should be displayed.
 *   - The default value is `true`.
 *   - Example: `hasTopContent={false}`
 *
 * - `hasMiddleContent` (boolean) [optional]:
 *   - Determines if the middle text content should be displayed.
 *   - The default value is `true`.
 *   - Example: `hasMiddleContent={false}`
 *
 * - `hasBottomContent` (boolean) [optional]:
 *   - Determines if the bottom text content should be displayed.
 *   - The default value is `true`.
 *   - Example: `hasBottomContent={false}`
 *
 * - `hasIcon` (boolean) [optional]:
 *   - Determines if an icon should be displayed at the top.
 *   - The default value is `true`.
 *   - Example: `hasIcon={false}`
 *
 * - `classNames` (object) [optional]:
 *   - Adds a className to the parent wrapper
 *
 * Usage:
 *
 * ```jsx
 * import { KPIShimmer } from 'your-component-library';
 *
 * const MyComponent = () => (
 *   <KPIShimmer
 *     textWidth={200}
 *     hasTopContent={true}
 *     hasMiddleContent={false}
 *     hasBottomContent={true}
 *     hasIcon={true}
 *   />
 * );
 * ```
 *
 * Example Scenarios:
 *
 * 1. Display only top and bottom content with custom text width:
 * ```jsx
 * <KPIShimmer textWidth={75} hasMiddleContent={false} />
 * ```
 *
 * 2. Display no icon and only middle content:
 * ```jsx
 * <KPIShimmer hasIcon={false} hasTopContent={false} hasBottomContent={false} />
 * ```
 */
export declare const _KPIShimmer: () => React.JSX.Element;
export declare const _CardShimmer: () => React.JSX.Element;
//# sourceMappingURL=Shimmer.stories.d.ts.map