@navinc/base-react-components/cjs/avatar.js

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const copy_1 = __importDefault(require("./copy"));
const icon_1 = __importDefault(require("./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_components_1.default.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_components_1.default.img.withConfig({ displayName: "brc-sc-Img", componentId: "brc-sc-1lhbb2j" }) `
  width: 100%;
`;
const AvatarImage = ({ alt, src, size, label, defaultIcon = 'people/profile' }) => ((0, jsx_runtime_1.jsxs)(ImgContainer, Object.assign({ size: size, src: src, label: label }, { children: [src && (0, jsx_runtime_1.jsx)(Img, { alt: alt || 'avatar image', src: src, "data-testid": "avatar:image" }), !src && label && (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ "data-testid": "avatar:abbr" }, { children: getDefaultText(label) })), !src && !label && (0, jsx_runtime_1.jsx)(icon_1.default, { "data-testid": `avatar:icon ${defaultIcon}`, name: defaultIcon })] })));
const AvatarContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-AvatarContainer", componentId: "brc-sc-1rfs3e2" }) `
  display: flex;
  align-items: center;

  ${copy_1.default} {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;
const Avatar = ({ className, label, size, alt, src, defaultIcon }) => ((0, jsx_runtime_1.jsxs)(AvatarContainer, Object.assign({ className: className, "data-testid": "avatar" }, { children: [(0, jsx_runtime_1.jsx)(AvatarImage, { size: size, alt: alt, src: src, label: label, defaultIcon: defaultIcon }), label && (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ "data-testid": "avatar:label" }, { children: label }))] })));
const StyledAvatar = (0, styled_components_1.default)(Avatar).withConfig({ displayName: "brc-sc-StyledAvatar", componentId: "brc-sc-ad6102" }) ``;
exports.default = Avatar;
//# sourceMappingURL=avatar.js.map