@spaced-out/ui-design-system

import * as React from 'react'; import type { SemanticIconProps } from './'; declare const _default: { argTypes: { readonly semantic: { readonly description: "The semantic type of the Icon Container (e.g., success, warning, danger, etc.).\n This works only in case of `<SemanticIcon />`\n "; readonly control: { readonly type: "select"; }; readonly options: unknown[]; readonly table: { readonly type: { readonly summary: "AlertSemanticType"; }; }; }; readonly classNames: { readonly description: "External classnames to be applied. Only valid in case of `<SemanticIcon />`. Use the className prop for `<Icon />`"; readonly control: { readonly type: "object"; }; readonly table: { readonly type: { readonly summary: "{wrapper?: string, icon?: string}"; }; }; }; 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: ({ semantic, classNames, size, ...iconProps }: SemanticIconProps) => React.JSX.Element; }; export default _default; /** * The SemanticIcon component is a reusable * React component that allows you to display * icons with semantic styling based on different * semantic types. It's designed to work with Font Awesome icons * and can be used to maintain consistent icon styles across your * application. * * Usage: * * ```jsx <SemanticIcon semantic="success" iconName="chart-line-up" iconSize="medium" iconType="solid" classNames={{ wrapper: css.wrapper, icon: css.icon }} /> * ``` */ export declare const _SemanticIcon: { (args: SemanticIconProps): React.JSX.Element; args: { name: string; semantic: string; }; }; //# sourceMappingURL=SemanticIcon.stories.d.ts.map