@engie-group/fluid-design-system-react/lib/components/avatar/NJAvatar.d.ts

Fluid Design System React

import { type ITooltipOptions } from '@engie-group/fluid-design-system';
import React from 'react';
import { TSizeVariants } from '../../global';
import { IStatusIndicatorProps } from '../status-indicator/NJStatusIndicator';
import { ITooltipProps } from '../tooltip/NJTooltip';
export declare const NJAvatar: React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLAnchorElement & HTMLDivElement & HTMLButtonElement>>;
export interface IAvatarProps {
    /**
     *  Initials of avatar, max 3 characters.
     *  If a string with a bigger length than 3 characters, only the 3 first characters are taken
     **/
    initials?: string;
    /**
     *  You can pass an image as children
     **/
    children?: React.ReactNode;
    /**
     *  Avatar size.
     *  Impacts the size of the notification if provided
     **/
    size?: Extract<TSizeVariants, 'sm' | 'md' | 'lg' | 'xl'>;
    /**
     *  Text alternative for the avatar
     **/
    label: string;
    /**
     *  Link href, if set avatar is a link
     **/
    href?: string;
    /**
     *  Link target
     */
    target?: string;
    /**
     *  Link rel
     */
    rel?: string;
    /**
     *  Whether avatar is clickable or not, will make
     **/
    isClickable?: boolean;
    /**
     *  Notification number
     **/
    notification?: number;
    /**
     *  Max notification number. The displayed value will be `${notificationCapedValue}+`
     **/
    notificationCapedValue?: number;
    /**
     * Screen reader only notification unit label.
     *
     * @example
     * // The notification badge will be read as "12 unread messages"
     * <NJAvatar {...} notification={12} notificationUnitLabel="unread messages" />
     *
     * @default "notifications"
     */
    notificationUnitLabel?: string;
    /**
     *  Avatar status
     *  Cannot be used with notification, chose either one or the other. Notification
     *  takes priority
     **/
    status?: IStatusIndicatorProps['status'];
    /**
     * Title of the status
     */
    statusTitle?: string;
    /**
     *  Used for NJAvatarGroup as the last tile of the group
     **/
    isRemainingCount?: boolean;
    /**
     * Avatar's tooltip text
     */
    tooltipText?: ITooltipProps['text'];
    /**
     * Tooltip's position
     */
    tooltipPosition?: ITooltipOptions['placement'];
    /**
     *  Function called when the Avatar element is clicked
     */
    onClick?: React.MouseEventHandler<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>;
    /**
     * Function called when the user’s mouse enters the Avatar
     */
    onMouseEnter?: React.MouseEventHandler<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>;
    /**
     * Function called when the user’s mouse leaves the Avatar
     */
    onMouseLeave?: React.MouseEventHandler<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>;
    /**
     *  Optional additional className
     **/
    className?: string;
}