@navinc/base-react-components
Version:
Nav's Pattern Library
85 lines (82 loc) • 4.42 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled } from 'styled-components';
import { Copy } from './copy.js';
import { Icon } from './icon.js';
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-1wqd0tr" }) `
border-radius: 10px;
background-color: ${({ $src, theme }) => ($src ? 'transparent' : theme.navNeutral100)};
height: ${({ size }) => getSize(size)};
width: ${({ size }) => getSize(size)};
min-width: ${({ size }) => getSize(size)};
display: flex;
align-items: center;
justify-content: center;
margin-right: ${({ label }) => (label ? '16px' : 0)};
overflow: hidden;
`;
const Img = styled.img.withConfig({ displayName: "brc-sc-Img", componentId: "brc-sc-gmqtr8" }) `
width: 100%;
`;
export const AvatarImage = styled((_a) => {
var { alt, src, size, label, defaultIcon = 'people/profile' } = _a, props = __rest(_a, ["alt", "src", "size", "label", "defaultIcon"]);
return (_jsxs(ImgContainer, Object.assign({ size: size, "$src": src, label: label }, props, { children: [src && _jsx(Img, { alt: alt || 'avatar image', src: src, "data-testid": "avatar:image" }), !src && label && _jsx(Copy, { "data-testid": "avatar:abbr", children: getDefaultText(label) }), !src && !label && _jsx(Icon, { "data-testid": `avatar:icon ${defaultIcon}`, name: defaultIcon })] })));
}).withConfig({ displayName: "brc-sc-AvatarImage", componentId: "brc-sc-1lqgzw2" }) ``;
const AvatarContainer = styled.div.withConfig({ displayName: "brc-sc-AvatarContainer", componentId: "brc-sc-qzgwof" }) `
display: flex;
align-items: center;
${Copy} {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`;
/**
This component displays an Avatar with optional string label. The avatar image has a rounded square container.
## Props
- **src** (img src): displays an `img`.
- Without "src" it will fallback to label abbreviations or an icon, on a grey background
- image is always centered horizontally and vertically
- the image is never skewed and always fits 100% width. Try to use square images.
- if there is a source, the background is transparent
- **defaultIcon** (IconName): overrides the final fallback icon on a grey background if no image src or label is provided
- **label** (string): displays a `p` beside the avatar image, the avatar image will add margins.
- The label is the 2nd avatar fallback if no src is provided.
- The avatar label fallback is an abbreviation of the first and last words of the label, eg: Jack Daniels Whisky -> JW
- if the label is only 1 word, it will use the first 2 characters, ie: Jack -> JA
- **size** (string): one of "medium" (32px), "large" (50px)
- **alt** (string): replaces default alt string for accessibility
*/
export const Avatar = styled((_a) => {
var { className, label, size, alt, src, defaultIcon, labelSize = 'md' } = _a, rest = __rest(_a, ["className", "label", "size", "alt", "src", "defaultIcon", "labelSize"]);
return (_jsxs(AvatarContainer, Object.assign({ className: className, "data-testid": "avatar" }, rest, { children: [_jsx(AvatarImage, { size: size, alt: alt, src: src, label: label, defaultIcon: defaultIcon }), label && (_jsx(Copy, { "data-testid": "avatar:label", size: labelSize, children: label }))] })));
}).withConfig({ displayName: "brc-sc-Avatar", componentId: "brc-sc-1dr9af9" }) ``;
//# sourceMappingURL=avatar.js.map