@kadconsulting/dry
Version:
KAD Reusable Component Library
90 lines • 4.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import classnames from 'classnames';
import './Avatar.scss';
// Helper Component for Image Variant
const AvatarImage = ({ size = 'med', imageUrl, type = 'square', }) => {
const classes = classnames('dry-avatar', `dry-avatar--${size}`, 'dry-avatar--image', {
'dry-avatar--square': type === 'square',
'dry-avatar--portrait': type === 'portrait',
});
return (_jsx("div", { className: classes, style: { backgroundImage: `url(${imageUrl})` } }));
};
// Helper Component for Online Indicator Variant
const AvatarOnline = ({ size = 'med', isOnline, }) => {
const classes = classnames('dry-avatar', `dry-avatar--${size}`, 'dry-avatar--online', {
'dry-avatar--isOnline': isOnline,
});
return _jsx("div", { className: classes, children: isOnline ? 'Online' : 'Offline' });
};
// Helper Component for Company Icon Variant
const AvatarCompany = ({ size = 'med' }) => {
const classes = classnames('dry-avatar', `dry-avatar--${size}`, 'dry-avatar--company');
return _jsx("div", { className: classes, children: "Company Icon" });
};
// Helper Component for Verified Tick Variant
const AvatarVerified = ({ size = 'med' }) => {
const classes = classnames('dry-avatar', `dry-avatar--${size}`, 'dry-avatar--verified');
return _jsx("div", { className: classes, children: "\u2714" });
};
// Helper Component for Add Button Variant
const AvatarAddButton = ({ size = 'med', state = 'default', }) => {
const classes = classnames('dry-avatar', `dry-avatar--${size}`, `dry-avatar--${state}`, 'dry-avatar--addButton');
return _jsx("div", { className: classes, children: "+" });
};
// Helper Component for Avatar Group Variant
const AvatarGroup = ({ size = 'med', moreUsers = false, addMoreButton = false, }) => {
const classes = classnames('dry-avatar', `dry-avatar--${size}`, 'dry-avatar--group');
return (_jsxs("div", { className: classes, children: [moreUsers && _jsx("div", { children: "More Users" }), addMoreButton && _jsx("div", { children: "Add More" })] }));
};
// Helper Component for Avatar Label Group Variant
const AvatarLabelGroup = ({ size = 'med', statusIcon = 'none', state = 'default', }) => {
const classes = classnames('dry-avatar', `dry-avatar--${size}`, `dry-avatar--${state}`, 'dry-avatar--labelGroup');
return (_jsx("div", { className: classes, children: statusIcon !== 'none' && _jsx("div", { children: statusIcon }) }));
};
// Helper Component for Avatar Profile Photo Variant
const AvatarProfilePhoto = ({ size = 'med', placeholder = false, text = false, verified = false, }) => {
const classes = classnames('dry-avatar', `dry-avatar--${size}`, 'dry-avatar--profilePhoto', {
'dry-avatar--placeholder': placeholder,
'dry-avatar--text': text,
'dry-avatar--verified': verified,
});
return (_jsxs("div", { className: classes, children: [placeholder ? 'Placeholder' : text ? 'Text' : '', verified && '✔'] }));
};
// Main Avatar Component
const Avatar = forwardRef((props, ref) => {
const { id, variant, size = 'med', state = 'default', 'data-testid': dataTestId, } = props;
const baseClasses = classnames('dry-avatar', `dry-avatar--${size}`, `dry-avatar--${state}`);
let content;
switch (variant) {
case 'image':
content = _jsx(AvatarImage, { ...props });
break;
case 'online':
content = _jsx(AvatarOnline, { ...props });
break;
case 'company':
content = _jsx(AvatarCompany, { ...props });
break;
case 'verified':
content = _jsx(AvatarVerified, { ...props });
break;
case 'addButton':
content = _jsx(AvatarAddButton, { ...props });
break;
case 'group':
content = _jsx(AvatarGroup, { ...props });
break;
case 'labelGroup':
content = _jsx(AvatarLabelGroup, { ...props });
break;
case 'profilePhoto':
content = _jsx(AvatarProfilePhoto, { ...props });
break;
default:
content = null;
}
return (_jsx("div", { id: id, ref: ref, className: classnames(baseClasses, `dry-avatar--${variant}`), "data-testid": dataTestId, children: content }));
});
export default Avatar;
//# sourceMappingURL=Avatar.js.map