@workday/canvas-kit-react/dist/es6/avatar/lib/Avatar.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { BaseAvatar, baseAvatarStencil } from './BaseAvatar';
export const avatarStencil = createStencil({
    extends: baseAvatarStencil,
    parts: {
        avatarImage: 'avatar-image',
        avatarName: 'avatar-name',
    },
    base: { name: "2r5gr6", styles: "box-sizing:border-box;" },
    modifiers: {
        imageLoaded: {
            false: { name: "3qz05s", styles: "[data-part=\"avatar-image\"]{display:none;}" },
            true: { name: "18suww", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
        },
        objectFit: {
            contain: { name: "22yzn2", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
            cover: { name: "3djq7l", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
            fill: { name: "2a361m", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
            none: { name: "2pjhdo", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
            ['scale-down']: { name: "2f6u1p", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
            initial: { name: "10ko0p", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
            inherit: { name: "3wol81", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
            unset: { name: "29ek0n", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
            ['-moz-initial']: { name: "12ehzm", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
            ['revert']: { name: "2qm2g4", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
        }
    }
}, "avatar-620ed0");
/**
 * JSDoc for Avatar. Will be part of the Component API docs
 */
export const Avatar = createComponent('div')({
    displayName: 'Avatar',
    Component: ({ url, name, variant, objectFit = 'contain', preferredInitials, isDecorative, size, ...elemProps }, ref, Element) => {
        const [imageLoaded, setImageLoaded] = React.useState(false);
        const handleImageLoad = () => {
            if (!imageLoaded) {
                setImageLoaded(true);
            }
        };
        return (_jsxs(BaseAvatar, { as: Element, ref: ref, ...handleCsProp(elemProps, avatarStencil({ variant, size, imageLoaded, objectFit })), children: [url && (_jsx(_Fragment, { children: _jsx(BaseAvatar.Image, { onLoad: handleImageLoad, src: url, alt: isDecorative ? undefined : name, "aria-hidden": isDecorative, ...avatarStencil.parts.avatarImage }) })), name && (!url || !imageLoaded) && (_jsx(BaseAvatar.Name, { name: name, preferredInitials: preferredInitials, ...avatarStencil.parts.avatarName }))] }));
    },
});