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

Sense UI components library

import * as React from 'react';
import type { CloseIconProps, IconProps } from './';
declare const _default: {
    argTypes: {
        readonly type: {
            readonly description: "Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone";
            readonly options: readonly ["regular", "solid", "duotone", "brands"];
            readonly control: {
                readonly type: "select";
            };
            readonly table: {
                readonly type: {
                    readonly summary: "string";
                };
                readonly defaultValue: {
                    readonly summary: "regular";
                };
            };
        };
        readonly name: {
            readonly description: "Icon Name represents name of icon as supported by fontawesome";
            readonly type: {
                readonly required: true;
            };
            readonly table: {
                readonly type: {
                    readonly summary: "string";
                };
                readonly defaultValue: {
                    readonly summary: "face-party";
                };
            };
        };
        readonly color: {
            readonly description: "Same set of colors as supported in text";
            readonly options: unknown[];
            readonly control: {
                readonly type: "select";
            };
            readonly table: {
                readonly type: {
                    readonly summary: "string";
                };
                readonly defaultValue: {
                    readonly summary: "primary";
                };
            };
        };
        readonly size: {
            readonly description: "Icon supports three size variants namely small and medium. `small` < `medium` < `large`";
            readonly options: unknown[];
            readonly control: {
                readonly type: "select";
            };
            readonly table: {
                readonly type: {
                    readonly summary: "string";
                };
                readonly defaultValue: {
                    readonly summary: "medium";
                };
            };
        };
        readonly swapOpacity: {
            readonly name: "swapOpacity";
            readonly description: "Swap the default opacity of each layer in a duotone icon.";
            readonly options: readonly [false, true];
            readonly control: "boolean";
            readonly table: {
                readonly type: {
                    readonly summary: "boolean";
                };
                readonly defaultValue: {
                    readonly summary: false;
                };
            };
        };
        readonly className: {
            readonly description: "External className to be applied on container";
            readonly control: {
                readonly type: "text";
            };
            readonly table: {
                readonly type: {
                    readonly summary: "string";
                };
            };
        };
        readonly onClick: {
            readonly description: "onClick handler";
            readonly action: "clicked";
            readonly table: {
                readonly type: {
                    readonly summary: "(SyntheticEvent<HTMLElement>) => mixed";
                };
            };
        };
        readonly disabled: {
            readonly description: "If **true**, the clickable icon is disabled";
            readonly control: {
                readonly type: "boolean";
            };
            readonly table: {
                readonly type: {
                    readonly summary: "boolean";
                };
                readonly defaultValue: {
                    readonly summary: "false";
                };
            };
        };
        readonly ariaLabel: {
            readonly control: {
                readonly type: "text";
            };
            readonly description: "**aria-label** should be added where `ClickableIcon` and `CloseIcon` is used. This would avoid accessibility violations in screen readers";
            readonly table: {
                readonly type: {
                    readonly summary: "string";
                };
            };
        };
    };
    parameters: {
        readonly docs: {
            readonly subtitle: "Generates a Icon component";
            readonly description: {
                readonly component: "\n```js\nimport {\n  Icon,\n  ClickableIcon,\n  CloseIcon,\n  SemanticIcon\n} from \"@spaced-out/ui-design-system/lib/components/Icon\";\n```\nIcon component uses <a href=\"https://fontawesome.com/icons\" target=\"_blank\">fontawesome</a> icon internally.\nThe name prop has be to consistent with one used in fontawesome.\n        ";
            };
        };
        readonly storySource: {
            readonly componentPath: "/src/components/Icon/Icon";
        };
    };
    tags: string[];
    title: string;
    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<IconProps, HTMLDivElement>;
};
export default _default;
export declare const _Icon: {
    (args: IconProps): React.JSX.Element;
    args: {
        type: string;
        name: string;
        size: string;
        color: "primary";
    };
};
export declare const _IconWithTooltip: {
    (args: IconProps): React.JSX.Element;
    args: {
        type: string;
        name: string;
        size: string;
        color: "primary";
    };
};
export declare const _ClickableIcon: {
    (args: IconProps): React.JSX.Element;
    args: {
        type: string;
        name: string;
        size: string;
        color: "primary";
        ariaLabel: string;
    };
};
export declare const _CloseIcon: {
    (args: CloseIconProps): React.JSX.Element;
    args: {
        type: string;
        size: string;
        color: "primary";
        ariaLabel: string;
    };
};
export declare const _DuotoneIcon: {
    (args: IconProps): React.JSX.Element;
    args: {
        type: string;
        name: string;
        size: string;
        color: "primary";
        swapOpacity: boolean;
        style: {
            '--fa-primary-color': string;
            '--fa-secondary-color': string;
            '--fa-primary-opacity': string;
            '--fa-secondary-opacity': string;
        };
    };
};
//# sourceMappingURL=Icon.stories.d.ts.map