@naturacosmeticos/natds-react
Version:
A collection of components from Natura Design System for React
67 lines (66 loc) • 1.82 kB
TypeScript
/// <reference types="react" />
import { IconName } from '@naturacosmeticos/natds-icons';
import { Size } from '@naturacosmeticos/natds-themes';
import { BrandTypes } from '../../brandTypes/brandTypes';
export declare type AvatarSizes = keyof Pick<Size, 'standard' | 'semi' | 'semiX' | 'medium' | 'largeXXX'>;
export declare type AvatarBaseProps = {
/**
* Specify an optional className to be added to your Avatar
*/
className?: string;
/**
* Specify an optional className to be added to your Avatar
*/
brand?: BrandTypes;
/**
* Optional ID for testing
*/
testID?: string;
/**
* Specify the size of the Avatar
* @default medium
*/
size?: AvatarSizes;
};
export declare type AvatarImageProps = AvatarBaseProps & {
/**
* Avatar type
*/
type: 'image';
/**
* The alt text for the image
*/
alt?: React.ImgHTMLAttributes<HTMLImageElement>['alt'];
/**
* The source URL of the image you want to display
*/
src?: React.ImgHTMLAttributes<HTMLImageElement>['src'];
/**
* Event to fire if an error occurs while loading the image
*/
onError?: React.ImgHTMLAttributes<HTMLImageElement>['onError'];
};
export declare type AvatarIconProps = AvatarBaseProps & {
/**
* Avatar type
*/
type: 'icon';
/**
* The icon name
* @default outlined-default-mockup
*/
name?: IconName;
};
export declare type AvatarLabelProps = AvatarBaseProps & {
/**
* Avatar type
*/
type: 'label';
/**
* The label to be displayed in the Avatar.
* It's highly recommended to pass a maximum of two characters
* @default NA
*/
label?: string;
};
export declare type AvatarProps = AvatarImageProps | AvatarIconProps | AvatarLabelProps;