@spaced-out/ui-design-system

export declare const ICON_DOCS: { readonly 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"; }; }; }; readonly testId: { readonly description: "Test ID for the component"; readonly control: { readonly type: "text"; }; readonly table: { readonly type: { readonly summary: "string"; }; }; }; }; readonly 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"; }; }; }; //# sourceMappingURL=Icon.docs.d.ts.map