@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
36 lines (35 loc) • 1.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Avatar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const Icon_1 = require("../Icon");
require("./Avatar.css");
const getInitialsFromName = (name) => {
var _a, _b;
if (!name)
return undefined;
const parts = name.trim().split(/\s+/);
if (parts.length === 0)
return undefined;
const first = (_a = parts[0]) === null || _a === void 0 ? void 0 : _a[0];
const last = parts.length > 1 ? (_b = parts[parts.length - 1]) === null || _b === void 0 ? void 0 : _b[0] : '';
return (first + last).toUpperCase();
};
const Avatar = ({ size = 'medium', src, alt, initials, name, icon, disabled = false, className = '', ...rest }) => {
var _a;
const computedInitials = initials || getInitialsFromName(name);
const hasImage = Boolean(src);
const hasInitials = !hasImage && Boolean(computedInitials);
const classes = [
'ds-avatar',
size && `ds-avatar--${size}`,
disabled && 'ds-avatar--disabled',
className,
]
.filter(Boolean)
.join(' ');
const imageSrc = src || undefined;
const imageAlt = (_a = alt !== null && alt !== void 0 ? alt : name) !== null && _a !== void 0 ? _a : 'Avatar';
return ((0, jsx_runtime_1.jsxs)("div", { className: classes, "aria-disabled": disabled || undefined, ...rest, children: [hasImage && imageSrc && ((0, jsx_runtime_1.jsx)("img", { className: "ds-avatar__img", src: imageSrc, alt: imageAlt })), !hasImage && hasInitials && ((0, jsx_runtime_1.jsx)("span", { className: "ds-avatar__initials", "aria-hidden": name ? undefined : true, children: computedInitials })), !hasImage && !hasInitials && ((0, jsx_runtime_1.jsx)("span", { className: "ds-avatar__icon", "aria-hidden": "true", children: icon !== null && icon !== void 0 ? icon : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "person" }) }))] }));
};
exports.Avatar = Avatar;