@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: "2vdsa1", styles: "box-sizing:border-box;" },
    modifiers: {
        imageLoaded: {
            false: { name: "1q8t3", styles: "[data-part=\"avatar-image\"]{display:none;}" },
            true: { name: "22xcyh", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
        },
        objectFit: {
            contain: { name: "3vlr3b", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
            cover: { name: "14wblk", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
            fill: { name: "12gz3x", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
            none: { name: "2stef3", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
            ['scale-down']: { name: "417vg8", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
            initial: { name: "1i7d5q", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
            inherit: { name: "4azxq2", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
            unset: { name: "m2oq3", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
            ['-moz-initial']: { name: "2hwkr7", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
            ['revert']: { name: "ebh0h", 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 }))] }));
    },
});