@navinc/base-react-components
Version:
Nav's Pattern Library
52 lines (51 loc) • 2.53 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import Copy from './copy';
import Icon from './icon';
const sizeMap = {
medium: '32px',
large: '50px',
};
const getSize = (size) => {
if (!size)
return sizeMap.medium;
return sizeMap[size];
};
const getDefaultText = (text = '') => {
var _a;
const initials = (_a = text.match(/\b\w/g)) === null || _a === void 0 ? void 0 : _a.join('').toUpperCase();
if (!initials)
return '';
if (initials.length > 1)
return initials[0] + initials.slice(-1);
return text.substring(0, 2).toUpperCase();
};
const ImgContainer = styled.div.withConfig({ displayName: "brc-sc-ImgContainer", componentId: "brc-sc-17a3fc6" })(({ size, src, label, theme }) => `{
border-radius: 10px;
background-color: ${src ? 'transparent' : theme.scuttleGray200};
height: ${getSize(size)};
width: ${getSize(size)};
min-width: ${getSize(size)};
display: flex;
align-items: center;
justify-content: center;
margin-right: ${label ? '16px' : 0};
overflow: hidden;
}`);
const Img = styled.img.withConfig({ displayName: "brc-sc-Img", componentId: "brc-sc-1lhbb2j" }) `
width: 100%;
`;
const AvatarImage = ({ alt, src, size, label, defaultIcon = 'people/profile' }) => (_jsxs(ImgContainer, Object.assign({ size: size, src: src, label: label }, { children: [src && _jsx(Img, { alt: alt || 'avatar image', src: src, "data-testid": "avatar:image" }), !src && label && _jsx(Copy, Object.assign({ "data-testid": "avatar:abbr" }, { children: getDefaultText(label) })), !src && !label && _jsx(Icon, { "data-testid": `avatar:icon ${defaultIcon}`, name: defaultIcon })] })));
const AvatarContainer = styled.div.withConfig({ displayName: "brc-sc-AvatarContainer", componentId: "brc-sc-1rfs3e2" }) `
display: flex;
align-items: center;
${Copy} {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
const Avatar = ({ className, label, size, alt, src, defaultIcon }) => (_jsxs(AvatarContainer, Object.assign({ className: className, "data-testid": "avatar" }, { children: [_jsx(AvatarImage, { size: size, alt: alt, src: src, label: label, defaultIcon: defaultIcon }), label && _jsx(Copy, Object.assign({ "data-testid": "avatar:label" }, { children: label }))] })));
const StyledAvatar = styled(Avatar).withConfig({ displayName: "brc-sc-StyledAvatar", componentId: "brc-sc-ad6102" }) ``;
export default Avatar;
//# sourceMappingURL=avatar.js.map